[{"data":1,"prerenderedAt":2916},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-design-tokens-composables-duration":407,"-docs-theme-design-tokens-composables-duration-surround":2911},{"gettingStarted":4,"api":57,"theme":148},[5],{"title":6,"icon":7,"path":8,"stem":9,"children":10,"page":7},"Getting Started",false,"/docs/getting-started","docs/getting-started",[11,16,21,26,31,52],{"title":12,"path":13,"stem":14,"icon":15},"Introduction","/docs/getting-started/introduction","docs/getting-started/01.introduction","i-lucide-house",{"title":17,"path":18,"stem":19,"icon":20},"Installation","/docs/getting-started/installation","docs/getting-started/02.installation","i-lucide-download",{"title":22,"path":23,"stem":24,"icon":25},"Guides","/docs/getting-started/guides","docs/getting-started/03.guides","i-lucide-book-open",{"title":27,"path":28,"stem":29,"icon":30},"Comparisons","/docs/getting-started/comparisons","docs/getting-started/04.comparisons","i-lucide-file-diff",{"title":32,"icon":33,"path":34,"stem":35,"children":36,"page":7},"Tooling","i-lucide-hammer","/docs/getting-started/tooling","docs/getting-started/05.tooling",[37,42,47],{"title":38,"path":39,"stem":40,"icon":41},"CLI Reference","/docs/getting-started/tooling/cli","docs/getting-started/05.tooling/01.cli","i-lucide-square-terminal",{"title":43,"path":44,"stem":45,"icon":46},"Utility Scanner","/docs/getting-started/tooling/scanner","docs/getting-started/05.tooling/02.scanner","i-lucide-view",{"title":48,"path":49,"stem":50,"icon":51},"Figma Plugin","/docs/getting-started/tooling/figma-plugin","docs/getting-started/05.tooling/03.figma-plugin","i-simple-icons-figma",{"title":53,"path":54,"stem":55,"icon":56},"Licensing","/docs/getting-started/licensing","docs/getting-started/06.licensing","i-lucide-scale",[58],{"title":59,"path":60,"stem":61,"children":62,"icon":7},"API Reference","/docs/api","docs/api/00.index",[63,66,71,76,81,86,91,96,101,106,111,116,131,136,141,146],{"title":64,"path":60,"stem":61,"icon":65},"Overview","i-lucide-book-text",{"title":67,"path":68,"stem":69,"icon":70},"Instance","/docs/api/instance","docs/api/01.instance","i-lucide-cloud-lightning",{"title":72,"path":73,"stem":74,"icon":75},"Variables","/docs/api/variables","docs/api/02.variables","i-lucide-variable",{"title":77,"path":78,"stem":79,"icon":80},"Selectors","/docs/api/selectors","docs/api/03.selectors","i-lucide-scan-text",{"title":82,"path":83,"stem":84,"icon":85},"At-Rules","/docs/api/at-rules","docs/api/04.at-rules","i-lucide-at-sign",{"title":87,"path":88,"stem":89,"icon":90},"Media Queries","/docs/api/media-queries","docs/api/05.media-queries","i-lucide-image-upscale",{"title":92,"path":93,"stem":94,"icon":95},"Keyframes","/docs/api/keyframes","docs/api/06.keyframes","i-lucide-square-play",{"title":97,"path":98,"stem":99,"icon":100},"Interpolation","/docs/api/interpolation","docs/api/07.interpolation","i-lucide-wrap-text",{"title":102,"path":103,"stem":104,"icon":105},"Utilities","/docs/api/utilities","docs/api/08.utilities","i-lucide-sparkles",{"title":107,"path":108,"stem":109,"icon":110},"Utility Modifiers","/docs/api/utility-modifiers","docs/api/09.utility-modifiers","i-lucide-align-horizontal-justify-center",{"title":112,"path":113,"stem":114,"icon":115},"Themes","/docs/api/themes","docs/api/10.themes","i-lucide-paintbrush",{"title":117,"path":118,"stem":119,"children":120,"icon":130},"Recipes","/docs/api/recipes","docs/api/11.recipes/00.index",[121,122,126],{"title":64,"path":118,"stem":119},{"title":123,"path":124,"stem":125},"Runtime","/docs/api/recipes/runtime","docs/api/11.recipes/01.runtime",{"title":127,"path":128,"stem":129},"Output Format","/docs/api/recipes/output-format","docs/api/11.recipes/02.output-format","i-lucide-chef-hat",{"title":132,"path":133,"stem":134,"icon":135},"Composables","/docs/api/composables","docs/api/12.composables","i-lucide-component",{"title":137,"path":138,"stem":139,"icon":140},"Imports","/docs/api/imports","docs/api/13.imports","i-lucide-file-input",{"title":142,"path":143,"stem":144,"icon":145},"Merging","/docs/api/merging","docs/api/13.merging","i-lucide-squares-intersect",{"title":137,"path":138,"stem":147,"icon":140},"docs/api/14.imports",[149,223,289,362],{"title":150,"path":151,"stem":152,"children":153,"icon":7},"Design Tokens","/docs/theme/design-tokens","docs/theme/design-tokens/00.index",[154,155,160],{"title":64,"path":151,"stem":152,"icon":65},{"title":156,"path":157,"stem":158,"icon":159},"Presets","/docs/theme/design-tokens/presets","docs/theme/design-tokens/01.presets","i-lucide-package",{"title":132,"icon":135,"defaultOpen":7,"path":161,"stem":162,"children":163,"page":7},"/docs/theme/design-tokens/composables","docs/theme/design-tokens/02.composables",[164,168,172,176,180,184,188,192,207,211,215,219],{"title":165,"path":166,"stem":167,"icon":7},"Border Radiuses","/docs/theme/design-tokens/composables/border-radiuses","docs/theme/design-tokens/02.composables/00.border-radiuses",{"title":169,"path":170,"stem":171,"icon":7},"Borders","/docs/theme/design-tokens/composables/borders","docs/theme/design-tokens/02.composables/01.borders",{"title":173,"path":174,"stem":175,"icon":7},"Box Shadows","/docs/theme/design-tokens/composables/box-shadows","docs/theme/design-tokens/02.composables/02.box-shadows",{"title":177,"path":178,"stem":179,"icon":7},"Breakpoints","/docs/theme/design-tokens/composables/breakpoints","docs/theme/design-tokens/02.composables/03.breakpoints",{"title":181,"path":182,"stem":183,"icon":7},"Colors","/docs/theme/design-tokens/composables/colors","docs/theme/design-tokens/02.composables/04.colors",{"title":185,"path":186,"stem":187,"icon":7},"Duration","/docs/theme/design-tokens/composables/duration","docs/theme/design-tokens/02.composables/05.duration",{"title":189,"path":190,"stem":191,"icon":7},"Easing","/docs/theme/design-tokens/composables/easing","docs/theme/design-tokens/02.composables/06.easing",{"title":193,"path":194,"stem":195,"children":196,"icon":7,"pro":206,"defaultOpen":7},"Fluid Design","/docs/theme/design-tokens/composables/fluid-design","docs/theme/design-tokens/02.composables/07.fluid-design/01.index",[197,198,202],{"title":64,"path":194,"stem":195},{"title":199,"path":200,"stem":201},"Fluid Viewport","/docs/theme/design-tokens/composables/fluid-design/viewport","docs/theme/design-tokens/02.composables/07.fluid-design/02.viewport",{"title":203,"path":204,"stem":205},"Fluid Typography","/docs/theme/design-tokens/composables/fluid-design/typography","docs/theme/design-tokens/02.composables/07.fluid-design/03.typography",true,{"title":208,"path":209,"stem":210,"icon":7},"Scales","/docs/theme/design-tokens/composables/scales","docs/theme/design-tokens/02.composables/08.scales",{"title":212,"path":213,"stem":214,"icon":7},"Spacing","/docs/theme/design-tokens/composables/spacing","docs/theme/design-tokens/02.composables/09.spacing",{"title":216,"path":217,"stem":218,"icon":7},"Typography","/docs/theme/design-tokens/composables/typography","docs/theme/design-tokens/02.composables/10.typography",{"title":220,"path":221,"stem":222,"icon":7},"Z-Index","/docs/theme/design-tokens/composables/z-index","docs/theme/design-tokens/02.composables/11.z-index",{"title":224,"path":225,"stem":226,"children":227,"icon":7},"Components","/docs/theme/components","docs/theme/components/00.index",[228,229],{"title":64,"path":225,"stem":226,"icon":65},{"title":132,"icon":135,"defaultOpen":206,"path":230,"stem":231,"children":232,"page":7},"/docs/theme/components/composables","docs/theme/components/02.composables",[233,237,241,245,249,253,257,261,265,269,273,277,281,285],{"title":234,"path":235,"stem":236},"Badge","/docs/theme/components/composables/badge","docs/theme/components/02.composables/01.badge",{"title":238,"path":239,"stem":240},"Button","/docs/theme/components/composables/button","docs/theme/components/02.composables/02.button",{"title":242,"path":243,"stem":244},"Button Group","/docs/theme/components/composables/button-group","docs/theme/components/02.composables/03.button-group",{"title":246,"path":247,"stem":248},"Callout","/docs/theme/components/composables/callout","docs/theme/components/02.composables/04.callout",{"title":250,"path":251,"stem":252},"Card","/docs/theme/components/composables/card","docs/theme/components/02.composables/05.card",{"title":254,"path":255,"stem":256},"Nav","/docs/theme/components/composables/nav","docs/theme/components/02.composables/06.nav",{"title":258,"path":259,"stem":260},"Modal","/docs/theme/components/composables/modal","docs/theme/components/02.composables/07.modal",{"title":262,"path":263,"stem":264},"Skeleton","/docs/theme/components/composables/skeleton","docs/theme/components/02.composables/08.skeleton",{"title":266,"path":267,"stem":268},"Tooltip","/docs/theme/components/composables/tooltip","docs/theme/components/02.composables/08.tooltip",{"title":270,"path":271,"stem":272},"Placeholder","/docs/theme/components/composables/placeholder","docs/theme/components/02.composables/09.placeholder",{"title":274,"path":275,"stem":276},"Progress","/docs/theme/components/composables/progress","docs/theme/components/02.composables/10.progress",{"title":278,"path":279,"stem":280},"Popover","/docs/theme/components/composables/popover","docs/theme/components/02.composables/11.popover",{"title":282,"path":283,"stem":284},"Chip","/docs/theme/components/composables/chip","docs/theme/components/02.composables/12.chip",{"title":286,"path":287,"stem":288},"Spinner","/docs/theme/components/composables/spinner","docs/theme/components/02.composables/13.spinner",{"title":102,"path":290,"stem":291,"children":292,"icon":7},"/docs/theme/utilities","docs/theme/utilities/00.index",[293,294,297],{"title":64,"path":290,"stem":291,"icon":65},{"title":156,"path":295,"stem":296,"icon":159},"/docs/theme/utilities/presets","docs/theme/utilities/01.presets",{"title":132,"icon":135,"defaultOpen":7,"path":298,"stem":299,"children":300,"page":7},"/docs/theme/utilities/composables","docs/theme/utilities/02.composables",[301,305,309,313,316,320,324,328,332,336,340,343,347,351,355,359],{"title":302,"path":303,"stem":304,"icon":7},"Accessibility","/docs/theme/utilities/composables/accessibility","docs/theme/utilities/02.composables/00.accessibility",{"title":306,"path":307,"stem":308,"icon":7},"Animations","/docs/theme/utilities/composables/animations","docs/theme/utilities/02.composables/01.animations",{"title":310,"path":311,"stem":312,"icon":7},"Backgrounds","/docs/theme/utilities/composables/backgrounds","docs/theme/utilities/02.composables/02.backgrounds",{"title":169,"path":314,"stem":315,"icon":7},"/docs/theme/utilities/composables/borders","docs/theme/utilities/02.composables/03.borders",{"title":317,"path":318,"stem":319,"icon":7},"Effects","/docs/theme/utilities/composables/effects","docs/theme/utilities/02.composables/04.effects",{"title":321,"path":322,"stem":323,"icon":7},"Filters","/docs/theme/utilities/composables/filters","docs/theme/utilities/02.composables/05.filters",{"title":325,"path":326,"stem":327,"icon":7},"Flexbox & Grid","/docs/theme/utilities/composables/flexbox-grid","docs/theme/utilities/02.composables/06.flexbox-grid",{"title":329,"path":330,"stem":331,"icon":7},"Interactivity","/docs/theme/utilities/composables/interactivity","docs/theme/utilities/02.composables/07.interactivity",{"title":333,"path":334,"stem":335,"icon":7},"Layout","/docs/theme/utilities/composables/layout","docs/theme/utilities/02.composables/08.layout",{"title":337,"path":338,"stem":339,"icon":7},"Sizing","/docs/theme/utilities/composables/sizing","docs/theme/utilities/02.composables/09.sizing",{"title":212,"path":341,"stem":342,"icon":7},"/docs/theme/utilities/composables/spacing","docs/theme/utilities/02.composables/10.spacing",{"title":344,"path":345,"stem":346,"icon":7},"SVG","/docs/theme/utilities/composables/svg","docs/theme/utilities/02.composables/11.svg",{"title":348,"path":349,"stem":350,"icon":7},"Tables","/docs/theme/utilities/composables/tables","docs/theme/utilities/02.composables/12.tables",{"title":352,"path":353,"stem":354,"icon":7},"Transforms","/docs/theme/utilities/composables/transforms","docs/theme/utilities/02.composables/13.transforms",{"title":356,"path":357,"stem":358,"icon":7},"Transitions","/docs/theme/utilities/composables/transitions","docs/theme/utilities/02.composables/14.transitions",{"title":216,"path":360,"stem":361,"icon":7},"/docs/theme/utilities/composables/typography","docs/theme/utilities/02.composables/15.typography",{"title":363,"path":364,"stem":365,"children":366,"icon":7},"Modifiers","/docs/theme/modifiers","docs/theme/modifiers/00.index",[367,368,371],{"title":64,"path":364,"stem":365,"icon":65},{"title":156,"path":369,"stem":370,"icon":159},"/docs/theme/modifiers/presets","docs/theme/modifiers/01.presets",{"title":132,"icon":135,"defaultOpen":7,"path":372,"stem":373,"children":374,"page":7},"/docs/theme/modifiers/composables","docs/theme/modifiers/02.composables",[375,379,383,387,391,395,399,403],{"title":376,"path":377,"stem":378,"icon":7},"ARIA State","/docs/theme/modifiers/composables/aria-state","docs/theme/modifiers/02.composables/00.aria-state",{"title":380,"path":381,"stem":382,"icon":7},"Directional","/docs/theme/modifiers/composables/directional","docs/theme/modifiers/02.composables/01.directional",{"title":384,"path":385,"stem":386,"icon":7},"Form State","/docs/theme/modifiers/composables/form-state","docs/theme/modifiers/02.composables/02.form-state",{"title":388,"path":389,"stem":390,"icon":7},"Media & Preferences","/docs/theme/modifiers/composables/media-preferences","docs/theme/modifiers/02.composables/03.media-preferences",{"title":392,"path":393,"stem":394,"icon":7},"Other State","/docs/theme/modifiers/composables/other-state","docs/theme/modifiers/02.composables/04.other-state",{"title":396,"path":397,"stem":398,"icon":7},"Pseudo-Elements","/docs/theme/modifiers/composables/pseudo-elements","docs/theme/modifiers/02.composables/05.pseudo-elements",{"title":400,"path":401,"stem":402,"icon":7},"Pseudo-State","/docs/theme/modifiers/composables/pseudo-state","docs/theme/modifiers/02.composables/06.pseudo-state",{"title":404,"path":405,"stem":406,"icon":7},"Structural","/docs/theme/modifiers/composables/structural","docs/theme/modifiers/02.composables/07.structural",{"id":408,"title":409,"body":410,"description":2903,"extension":2904,"links":2905,"meta":2906,"navigation":2907,"path":186,"seo":2908,"sitemap":2909,"stem":187,"__hash__":2910},"docs_theme/docs/theme/design-tokens/02.composables/05.duration.md","Duration Design Tokens",{"type":411,"value":412,"toc":2888},"minimark",[413,417,421,425,428,457,464,471,826,847,861,865,870,1029,1034,1173,1177,1180,1744,1748,1752,1755,2032,2036,2039,2602,2606,2660,2671,2675,2884],[414,415,64],"h2",{"id":416},"overview",[418,419,420],"p",{},"The duration composables help you create consistent animation and transition timing systems with minimal code. They generate duration variables that can be easily referenced throughout your application, enabling flexible theming and consistent motion design.",[414,422,424],{"id":423},"why-use-duration-composables","Why use duration composables?",[418,426,427],{},"Duration composables help you:",[429,430,431,439,445,451],"ul",{},[432,433,434,438],"li",{},[435,436,437],"strong",{},"Centralize timing values",": Define all your animation durations in one place for easy management.",[432,440,441,444],{},[435,442,443],{},"Enable flexible theming",": Override duration values to instantly update animation speed across your application.",[432,446,447,450],{},[435,448,449],{},"Maintain consistency",": Use semantic names to ensure consistent timing throughout your design system.",[432,452,453,456],{},[435,454,455],{},"Eliminate magic numbers",": Replace hardcoded millisecond values with meaningful token names.",[414,458,460],{"id":459},"usedurationdesigntokens",[461,462,463],"code",{},"useDurationDesignTokens",[418,465,466,467,470],{},"The ",[461,468,469],{},"useDurationDesignTokens()"," function creates a set of duration variables from a simple object of timing value definitions. It includes sensible defaults covering a full range from instant (0ms) through slowest (1000ms).",[472,473,474,745],"tabs",{},[475,476,479],"tabs-item",{"icon":477,"label":478},"i-lucide-code","Code",[480,481,487],"pre",{"className":482,"code":483,"filename":484,"language":485,"meta":486,"style":486},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'styleframe';\nimport { useDurationDesignTokens } from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst {\n    duration,\n    durationFast,\n    durationNormal,\n    durationSlow,\n} = useDurationDesignTokens(s, {\n    default: '@duration.normal',\n    fast: '150ms',\n    normal: '250ms',\n    slow: '300ms',\n} as const);\n\nexport default s;\n","styleframe.config.ts","ts","",[461,488,489,525,548,554,575,580,588,597,605,613,621,640,659,676,693,710,726,731],{"__ignoreMap":486},[490,491,494,498,502,506,509,512,515,519,522],"span",{"class":492,"line":493},"line",1,[490,495,497],{"class":496},"s7zQu","import",[490,499,501],{"class":500},"sMK4o"," {",[490,503,505],{"class":504},"sTEyZ"," styleframe",[490,507,508],{"class":500}," }",[490,510,511],{"class":496}," from",[490,513,514],{"class":500}," '",[490,516,518],{"class":517},"sfazB","styleframe",[490,520,521],{"class":500},"'",[490,523,524],{"class":500},";\n",[490,526,528,530,532,535,537,539,541,544,546],{"class":492,"line":527},2,[490,529,497],{"class":496},[490,531,501],{"class":500},[490,533,534],{"class":504}," useDurationDesignTokens",[490,536,508],{"class":500},[490,538,511],{"class":496},[490,540,514],{"class":500},[490,542,543],{"class":517},"@styleframe/theme",[490,545,521],{"class":500},[490,547,524],{"class":500},[490,549,551],{"class":492,"line":550},3,[490,552,553],{"emptyLinePlaceholder":206},"\n",[490,555,557,561,564,567,570,573],{"class":492,"line":556},4,[490,558,560],{"class":559},"spNyl","const",[490,562,563],{"class":504}," s ",[490,565,566],{"class":500},"=",[490,568,505],{"class":569},"s2Zo4",[490,571,572],{"class":504},"()",[490,574,524],{"class":500},[490,576,578],{"class":492,"line":577},5,[490,579,553],{"emptyLinePlaceholder":206},[490,581,583,585],{"class":492,"line":582},6,[490,584,560],{"class":559},[490,586,587],{"class":500}," {\n",[490,589,591,594],{"class":492,"line":590},7,[490,592,593],{"class":504},"    duration",[490,595,596],{"class":500},",\n",[490,598,600,603],{"class":492,"line":599},8,[490,601,602],{"class":504},"    durationFast",[490,604,596],{"class":500},[490,606,608,611],{"class":492,"line":607},9,[490,609,610],{"class":504},"    durationNormal",[490,612,596],{"class":500},[490,614,616,619],{"class":492,"line":615},10,[490,617,618],{"class":504},"    durationSlow",[490,620,596],{"class":500},[490,622,624,627,630,632,635,638],{"class":492,"line":623},11,[490,625,626],{"class":500},"}",[490,628,629],{"class":500}," =",[490,631,534],{"class":569},[490,633,634],{"class":504},"(s",[490,636,637],{"class":500},",",[490,639,587],{"class":500},[490,641,643,647,650,652,655,657],{"class":492,"line":642},12,[490,644,646],{"class":645},"swJcz","    default",[490,648,649],{"class":500},":",[490,651,514],{"class":500},[490,653,654],{"class":517},"@duration.normal",[490,656,521],{"class":500},[490,658,596],{"class":500},[490,660,662,665,667,669,672,674],{"class":492,"line":661},13,[490,663,664],{"class":645},"    fast",[490,666,649],{"class":500},[490,668,514],{"class":500},[490,670,671],{"class":517},"150ms",[490,673,521],{"class":500},[490,675,596],{"class":500},[490,677,679,682,684,686,689,691],{"class":492,"line":678},14,[490,680,681],{"class":645},"    normal",[490,683,649],{"class":500},[490,685,514],{"class":500},[490,687,688],{"class":517},"250ms",[490,690,521],{"class":500},[490,692,596],{"class":500},[490,694,696,699,701,703,706,708],{"class":492,"line":695},15,[490,697,698],{"class":645},"    slow",[490,700,649],{"class":500},[490,702,514],{"class":500},[490,704,705],{"class":517},"300ms",[490,707,521],{"class":500},[490,709,596],{"class":500},[490,711,713,715,718,721,724],{"class":492,"line":712},16,[490,714,626],{"class":500},[490,716,717],{"class":496}," as",[490,719,720],{"class":559}," const",[490,722,723],{"class":504},")",[490,725,524],{"class":500},[490,727,729],{"class":492,"line":728},17,[490,730,553],{"emptyLinePlaceholder":206},[490,732,734,737,740,743],{"class":492,"line":733},18,[490,735,736],{"class":496},"export",[490,738,739],{"class":496}," default",[490,741,742],{"class":504}," s",[490,744,524],{"class":500},[475,746,748],{"icon":140,"label":747},"Output",[480,749,754],{"className":750,"code":751,"filename":752,"language":753,"meta":486,"style":486},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",":root {\n    --duration--fast: 150ms;\n    --duration--normal: 250ms;\n    --duration--slow: 300ms;\n    --duration: var(--duration--normal);\n}\n","styleframe/index.css","css",[461,755,756,765,778,790,802,821],{"__ignoreMap":486},[490,757,758,760,763],{"class":492,"line":493},[490,759,649],{"class":500},[490,761,762],{"class":559},"root",[490,764,587],{"class":500},[490,766,767,770,772,776],{"class":492,"line":527},[490,768,769],{"class":504},"    --duration--fast",[490,771,649],{"class":500},[490,773,775],{"class":774},"sbssI"," 150ms",[490,777,524],{"class":500},[490,779,780,783,785,788],{"class":492,"line":550},[490,781,782],{"class":504},"    --duration--normal",[490,784,649],{"class":500},[490,786,787],{"class":774}," 250ms",[490,789,524],{"class":500},[490,791,792,795,797,800],{"class":492,"line":556},[490,793,794],{"class":504},"    --duration--slow",[490,796,649],{"class":500},[490,798,799],{"class":774}," 300ms",[490,801,524],{"class":500},[490,803,804,807,809,812,815,818],{"class":492,"line":577},[490,805,806],{"class":504},"    --duration",[490,808,649],{"class":500},[490,810,811],{"class":569}," var",[490,813,814],{"class":500},"(",[490,816,817],{"class":504},"--duration--normal",[490,819,820],{"class":500},");\n",[490,822,823],{"class":492,"line":582},[490,824,825],{"class":500},"}\n",[418,827,828,829,832,833,836,837,839,840,836,843,846],{},"Each key in the object becomes a duration variable with the prefix ",[461,830,831],{},"duration",", and the export name is automatically converted to camelCase (e.g., ",[461,834,835],{},"default"," → ",[461,838,831],{},", ",[461,841,842],{},"fast",[461,844,845],{},"durationFast",").",[848,849,850,853,854,856,857,860],"tip",{},[435,851,852],{},"Pro tip:"," Use the ",[461,855,835],{}," key for your primary duration. It will create a variable named ",[461,858,859],{},"--duration"," without any suffix, making it the natural choice for standard transitions throughout your application.",[414,862,864],{"id":863},"default-values","Default Values",[418,866,466,867,869],{},[461,868,469],{}," composable comes with comprehensive defaults. You can use them directly without passing any arguments:",[480,871,873],{"className":482,"code":872,"filename":484,"language":485,"meta":486,"style":486},"import { styleframe } from 'styleframe';\nimport { useDurationDesignTokens } from '@styleframe/theme';\n\nconst s = styleframe();\n\n// Use all defaults\nconst {\n    durationInstant,\n    durationFastest,\n    durationFaster,\n    durationFast,\n    durationNormal,\n    durationSlow,\n    durationSlower,\n    durationSlowest,\n} = useDurationDesignTokens(s);\n\nexport default s;\n",[461,874,875,895,915,919,933,937,943,949,956,963,970,976,982,988,995,1002,1015,1019],{"__ignoreMap":486},[490,876,877,879,881,883,885,887,889,891,893],{"class":492,"line":493},[490,878,497],{"class":496},[490,880,501],{"class":500},[490,882,505],{"class":504},[490,884,508],{"class":500},[490,886,511],{"class":496},[490,888,514],{"class":500},[490,890,518],{"class":517},[490,892,521],{"class":500},[490,894,524],{"class":500},[490,896,897,899,901,903,905,907,909,911,913],{"class":492,"line":527},[490,898,497],{"class":496},[490,900,501],{"class":500},[490,902,534],{"class":504},[490,904,508],{"class":500},[490,906,511],{"class":496},[490,908,514],{"class":500},[490,910,543],{"class":517},[490,912,521],{"class":500},[490,914,524],{"class":500},[490,916,917],{"class":492,"line":550},[490,918,553],{"emptyLinePlaceholder":206},[490,920,921,923,925,927,929,931],{"class":492,"line":556},[490,922,560],{"class":559},[490,924,563],{"class":504},[490,926,566],{"class":500},[490,928,505],{"class":569},[490,930,572],{"class":504},[490,932,524],{"class":500},[490,934,935],{"class":492,"line":577},[490,936,553],{"emptyLinePlaceholder":206},[490,938,939],{"class":492,"line":582},[490,940,942],{"class":941},"sHwdD","// Use all defaults\n",[490,944,945,947],{"class":492,"line":590},[490,946,560],{"class":559},[490,948,587],{"class":500},[490,950,951,954],{"class":492,"line":599},[490,952,953],{"class":504},"    durationInstant",[490,955,596],{"class":500},[490,957,958,961],{"class":492,"line":607},[490,959,960],{"class":504},"    durationFastest",[490,962,596],{"class":500},[490,964,965,968],{"class":492,"line":615},[490,966,967],{"class":504},"    durationFaster",[490,969,596],{"class":500},[490,971,972,974],{"class":492,"line":623},[490,973,602],{"class":504},[490,975,596],{"class":500},[490,977,978,980],{"class":492,"line":642},[490,979,610],{"class":504},[490,981,596],{"class":500},[490,983,984,986],{"class":492,"line":661},[490,985,618],{"class":504},[490,987,596],{"class":500},[490,989,990,993],{"class":492,"line":678},[490,991,992],{"class":504},"    durationSlower",[490,994,596],{"class":500},[490,996,997,1000],{"class":492,"line":695},[490,998,999],{"class":504},"    durationSlowest",[490,1001,596],{"class":500},[490,1003,1004,1006,1008,1010,1013],{"class":492,"line":712},[490,1005,626],{"class":500},[490,1007,629],{"class":500},[490,1009,534],{"class":569},[490,1011,1012],{"class":504},"(s)",[490,1014,524],{"class":500},[490,1016,1017],{"class":492,"line":728},[490,1018,553],{"emptyLinePlaceholder":206},[490,1020,1021,1023,1025,1027],{"class":492,"line":733},[490,1022,736],{"class":496},[490,1024,739],{"class":496},[490,1026,742],{"class":504},[490,1028,524],{"class":500},[1030,1031,1033],"h3",{"id":1032},"duration-scale","Duration Scale",[1035,1036,1037,1053],"table",{},[1038,1039,1040],"thead",{},[1041,1042,1043,1047,1050],"tr",{},[1044,1045,1046],"th",{},"Name",[1044,1048,1049],{},"Value",[1044,1051,1052],{},"Use Case",[1054,1055,1056,1072,1087,1102,1115,1129,1143,1158],"tbody",{},[1041,1057,1058,1064,1069],{},[1059,1060,1061],"td",{},[461,1062,1063],{},"instant",[1059,1065,1066],{},[461,1067,1068],{},"0ms",[1059,1070,1071],{},"Immediate state changes, no animation",[1041,1073,1074,1079,1084],{},[1059,1075,1076],{},[461,1077,1078],{},"fastest",[1059,1080,1081],{},[461,1082,1083],{},"50ms",[1059,1085,1086],{},"Micro-interactions (ripple effects)",[1041,1088,1089,1094,1099],{},[1059,1090,1091],{},[461,1092,1093],{},"faster",[1059,1095,1096],{},[461,1097,1098],{},"100ms",[1059,1100,1101],{},"Hover and focus states",[1041,1103,1104,1108,1112],{},[1059,1105,1106],{},[461,1107,842],{},[1059,1109,1110],{},[461,1111,671],{},[1059,1113,1114],{},"Button presses, toggles",[1041,1116,1117,1122,1126],{},[1059,1118,1119],{},[461,1120,1121],{},"normal",[1059,1123,1124],{},[461,1125,688],{},[1059,1127,1128],{},"Standard UI transitions (modals, dropdowns)",[1041,1130,1131,1136,1140],{},[1059,1132,1133],{},[461,1134,1135],{},"slow",[1059,1137,1138],{},[461,1139,705],{},[1059,1141,1142],{},"Page transitions, complex reveals",[1041,1144,1145,1150,1155],{},[1059,1146,1147],{},[461,1148,1149],{},"slower",[1059,1151,1152],{},[461,1153,1154],{},"500ms",[1059,1156,1157],{},"Spring and bounce animations",[1041,1159,1160,1165,1170],{},[1059,1161,1162],{},[461,1163,1164],{},"slowest",[1059,1166,1167],{},[461,1168,1169],{},"1000ms",[1059,1171,1172],{},"Full-page animations, onboarding flows",[414,1174,1176],{"id":1175},"using-duration-variables","Using Duration Variables",[418,1178,1179],{},"Once created, duration variables can be used anywhere in your styles:",[472,1181,1182,1563],{},[475,1183,1184],{"icon":477,"label":478},[480,1185,1187],{"className":482,"code":1186,"filename":484,"language":485,"meta":486,"style":486},"import { styleframe } from 'styleframe';\nimport { useDurationDesignTokens, useEasingDesignTokens } from '@styleframe/theme';\n\nconst s = styleframe();\nconst { ref, selector, css } = s;\n\nconst { durationFast, durationNormal } = useDurationDesignTokens(s, {\n    fast: '150ms',\n    normal: '250ms',\n} as const);\n\nconst { easingEaseOutCubic } = useEasingDesignTokens(s, {\n    'ease-out-cubic': 'cubic-bezier(0.215, 0.61, 0.355, 1)',\n} as const);\n\nselector('.button', {\n    transition: css`background-color ${durationFast} ${easingEaseOutCubic}`,\n});\n\nselector('.modal', {\n    transition: css`opacity ${durationNormal} ${easingEaseOutCubic}, transform ${durationNormal} ${easingEaseOutCubic}`,\n});\n\nexport default s;\n",[461,1188,1189,1209,1234,1238,1252,1279,1283,1309,1323,1337,1349,1353,1374,1395,1407,1411,1429,1463,1471,1476,1494,1538,1547,1552],{"__ignoreMap":486},[490,1190,1191,1193,1195,1197,1199,1201,1203,1205,1207],{"class":492,"line":493},[490,1192,497],{"class":496},[490,1194,501],{"class":500},[490,1196,505],{"class":504},[490,1198,508],{"class":500},[490,1200,511],{"class":496},[490,1202,514],{"class":500},[490,1204,518],{"class":517},[490,1206,521],{"class":500},[490,1208,524],{"class":500},[490,1210,1211,1213,1215,1217,1219,1222,1224,1226,1228,1230,1232],{"class":492,"line":527},[490,1212,497],{"class":496},[490,1214,501],{"class":500},[490,1216,534],{"class":504},[490,1218,637],{"class":500},[490,1220,1221],{"class":504}," useEasingDesignTokens",[490,1223,508],{"class":500},[490,1225,511],{"class":496},[490,1227,514],{"class":500},[490,1229,543],{"class":517},[490,1231,521],{"class":500},[490,1233,524],{"class":500},[490,1235,1236],{"class":492,"line":550},[490,1237,553],{"emptyLinePlaceholder":206},[490,1239,1240,1242,1244,1246,1248,1250],{"class":492,"line":556},[490,1241,560],{"class":559},[490,1243,563],{"class":504},[490,1245,566],{"class":500},[490,1247,505],{"class":569},[490,1249,572],{"class":504},[490,1251,524],{"class":500},[490,1253,1254,1256,1258,1261,1263,1266,1268,1271,1273,1275,1277],{"class":492,"line":577},[490,1255,560],{"class":559},[490,1257,501],{"class":500},[490,1259,1260],{"class":504}," ref",[490,1262,637],{"class":500},[490,1264,1265],{"class":504}," selector",[490,1267,637],{"class":500},[490,1269,1270],{"class":504}," css ",[490,1272,626],{"class":500},[490,1274,629],{"class":500},[490,1276,742],{"class":504},[490,1278,524],{"class":500},[490,1280,1281],{"class":492,"line":582},[490,1282,553],{"emptyLinePlaceholder":206},[490,1284,1285,1287,1289,1292,1294,1297,1299,1301,1303,1305,1307],{"class":492,"line":590},[490,1286,560],{"class":559},[490,1288,501],{"class":500},[490,1290,1291],{"class":504}," durationFast",[490,1293,637],{"class":500},[490,1295,1296],{"class":504}," durationNormal ",[490,1298,626],{"class":500},[490,1300,629],{"class":500},[490,1302,534],{"class":569},[490,1304,634],{"class":504},[490,1306,637],{"class":500},[490,1308,587],{"class":500},[490,1310,1311,1313,1315,1317,1319,1321],{"class":492,"line":599},[490,1312,664],{"class":645},[490,1314,649],{"class":500},[490,1316,514],{"class":500},[490,1318,671],{"class":517},[490,1320,521],{"class":500},[490,1322,596],{"class":500},[490,1324,1325,1327,1329,1331,1333,1335],{"class":492,"line":607},[490,1326,681],{"class":645},[490,1328,649],{"class":500},[490,1330,514],{"class":500},[490,1332,688],{"class":517},[490,1334,521],{"class":500},[490,1336,596],{"class":500},[490,1338,1339,1341,1343,1345,1347],{"class":492,"line":615},[490,1340,626],{"class":500},[490,1342,717],{"class":496},[490,1344,720],{"class":559},[490,1346,723],{"class":504},[490,1348,524],{"class":500},[490,1350,1351],{"class":492,"line":623},[490,1352,553],{"emptyLinePlaceholder":206},[490,1354,1355,1357,1359,1362,1364,1366,1368,1370,1372],{"class":492,"line":642},[490,1356,560],{"class":559},[490,1358,501],{"class":500},[490,1360,1361],{"class":504}," easingEaseOutCubic ",[490,1363,626],{"class":500},[490,1365,629],{"class":500},[490,1367,1221],{"class":569},[490,1369,634],{"class":504},[490,1371,637],{"class":500},[490,1373,587],{"class":500},[490,1375,1376,1379,1382,1384,1386,1388,1391,1393],{"class":492,"line":661},[490,1377,1378],{"class":500},"    '",[490,1380,1381],{"class":645},"ease-out-cubic",[490,1383,521],{"class":500},[490,1385,649],{"class":500},[490,1387,514],{"class":500},[490,1389,1390],{"class":517},"cubic-bezier(0.215, 0.61, 0.355, 1)",[490,1392,521],{"class":500},[490,1394,596],{"class":500},[490,1396,1397,1399,1401,1403,1405],{"class":492,"line":678},[490,1398,626],{"class":500},[490,1400,717],{"class":496},[490,1402,720],{"class":559},[490,1404,723],{"class":504},[490,1406,524],{"class":500},[490,1408,1409],{"class":492,"line":695},[490,1410,553],{"emptyLinePlaceholder":206},[490,1412,1413,1416,1418,1420,1423,1425,1427],{"class":492,"line":712},[490,1414,1415],{"class":569},"selector",[490,1417,814],{"class":504},[490,1419,521],{"class":500},[490,1421,1422],{"class":517},".button",[490,1424,521],{"class":500},[490,1426,637],{"class":500},[490,1428,587],{"class":500},[490,1430,1431,1434,1436,1439,1442,1445,1448,1450,1452,1455,1458,1461],{"class":492,"line":728},[490,1432,1433],{"class":645},"    transition",[490,1435,649],{"class":500},[490,1437,1438],{"class":569}," css",[490,1440,1441],{"class":500},"`",[490,1443,1444],{"class":517},"background-color ",[490,1446,1447],{"class":500},"${",[490,1449,845],{"class":504},[490,1451,626],{"class":500},[490,1453,1454],{"class":500}," ${",[490,1456,1457],{"class":504},"easingEaseOutCubic",[490,1459,1460],{"class":500},"}`",[490,1462,596],{"class":500},[490,1464,1465,1467,1469],{"class":492,"line":733},[490,1466,626],{"class":500},[490,1468,723],{"class":504},[490,1470,524],{"class":500},[490,1472,1474],{"class":492,"line":1473},19,[490,1475,553],{"emptyLinePlaceholder":206},[490,1477,1479,1481,1483,1485,1488,1490,1492],{"class":492,"line":1478},20,[490,1480,1415],{"class":569},[490,1482,814],{"class":504},[490,1484,521],{"class":500},[490,1486,1487],{"class":517},".modal",[490,1489,521],{"class":500},[490,1491,637],{"class":500},[490,1493,587],{"class":500},[490,1495,1497,1499,1501,1503,1505,1508,1510,1513,1515,1517,1519,1521,1524,1526,1528,1530,1532,1534,1536],{"class":492,"line":1496},21,[490,1498,1433],{"class":645},[490,1500,649],{"class":500},[490,1502,1438],{"class":569},[490,1504,1441],{"class":500},[490,1506,1507],{"class":517},"opacity ",[490,1509,1447],{"class":500},[490,1511,1512],{"class":504},"durationNormal",[490,1514,626],{"class":500},[490,1516,1454],{"class":500},[490,1518,1457],{"class":504},[490,1520,626],{"class":500},[490,1522,1523],{"class":517},", transform ",[490,1525,1447],{"class":500},[490,1527,1512],{"class":504},[490,1529,626],{"class":500},[490,1531,1454],{"class":500},[490,1533,1457],{"class":504},[490,1535,1460],{"class":500},[490,1537,596],{"class":500},[490,1539,1541,1543,1545],{"class":492,"line":1540},22,[490,1542,626],{"class":500},[490,1544,723],{"class":504},[490,1546,524],{"class":500},[490,1548,1550],{"class":492,"line":1549},23,[490,1551,553],{"emptyLinePlaceholder":206},[490,1553,1555,1557,1559,1561],{"class":492,"line":1554},24,[490,1556,736],{"class":496},[490,1558,739],{"class":496},[490,1560,742],{"class":504},[490,1562,524],{"class":500},[475,1564,1565],{"icon":140,"label":747},[480,1566,1568],{"className":750,"code":1567,"filename":752,"language":753,"meta":486,"style":486},":root {\n    --duration--fast: 150ms;\n    --duration--normal: 250ms;\n    --easing--ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n\n.button {\n    transition: background-color var(--duration--fast) var(--easing--ease-out-cubic);\n}\n\n.modal {\n    transition: opacity var(--duration--normal) var(--easing--ease-out-cubic), transform var(--duration--normal) var(--easing--ease-out-cubic);\n}\n",[461,1569,1570,1578,1588,1598,1630,1634,1638,1649,1678,1682,1686,1695,1740],{"__ignoreMap":486},[490,1571,1572,1574,1576],{"class":492,"line":493},[490,1573,649],{"class":500},[490,1575,762],{"class":559},[490,1577,587],{"class":500},[490,1579,1580,1582,1584,1586],{"class":492,"line":527},[490,1581,769],{"class":504},[490,1583,649],{"class":500},[490,1585,775],{"class":774},[490,1587,524],{"class":500},[490,1589,1590,1592,1594,1596],{"class":492,"line":550},[490,1591,782],{"class":504},[490,1593,649],{"class":500},[490,1595,787],{"class":774},[490,1597,524],{"class":500},[490,1599,1600,1603,1605,1608,1610,1613,1615,1618,1620,1623,1625,1628],{"class":492,"line":556},[490,1601,1602],{"class":504},"    --easing--ease-out-cubic",[490,1604,649],{"class":500},[490,1606,1607],{"class":569}," cubic-bezier",[490,1609,814],{"class":500},[490,1611,1612],{"class":774},"0.215",[490,1614,637],{"class":500},[490,1616,1617],{"class":774}," 0.61",[490,1619,637],{"class":500},[490,1621,1622],{"class":774}," 0.355",[490,1624,637],{"class":500},[490,1626,1627],{"class":774}," 1",[490,1629,820],{"class":500},[490,1631,1632],{"class":492,"line":577},[490,1633,825],{"class":500},[490,1635,1636],{"class":492,"line":582},[490,1637,553],{"emptyLinePlaceholder":206},[490,1639,1640,1643,1647],{"class":492,"line":590},[490,1641,1642],{"class":500},".",[490,1644,1646],{"class":1645},"sBMFI","button",[490,1648,587],{"class":500},[490,1650,1651,1654,1656,1659,1662,1664,1667,1669,1671,1673,1676],{"class":492,"line":599},[490,1652,1433],{"class":1653},"sqsOY",[490,1655,649],{"class":500},[490,1657,1658],{"class":504}," background-color ",[490,1660,1661],{"class":569},"var",[490,1663,814],{"class":500},[490,1665,1666],{"class":504},"--duration--fast",[490,1668,723],{"class":500},[490,1670,811],{"class":569},[490,1672,814],{"class":500},[490,1674,1675],{"class":504},"--easing--ease-out-cubic",[490,1677,820],{"class":500},[490,1679,1680],{"class":492,"line":607},[490,1681,825],{"class":500},[490,1683,1684],{"class":492,"line":615},[490,1685,553],{"emptyLinePlaceholder":206},[490,1687,1688,1690,1693],{"class":492,"line":623},[490,1689,1642],{"class":500},[490,1691,1692],{"class":1645},"modal",[490,1694,587],{"class":500},[490,1696,1697,1699,1701,1704,1706,1708,1710,1712,1714,1716,1718,1721,1724,1726,1728,1730,1732,1734,1736,1738],{"class":492,"line":642},[490,1698,1433],{"class":1653},[490,1700,649],{"class":500},[490,1702,1703],{"class":504}," opacity ",[490,1705,1661],{"class":569},[490,1707,814],{"class":500},[490,1709,817],{"class":504},[490,1711,723],{"class":500},[490,1713,811],{"class":569},[490,1715,814],{"class":500},[490,1717,1675],{"class":504},[490,1719,1720],{"class":500},"),",[490,1722,1723],{"class":504}," transform ",[490,1725,1661],{"class":569},[490,1727,814],{"class":500},[490,1729,817],{"class":504},[490,1731,723],{"class":500},[490,1733,811],{"class":569},[490,1735,814],{"class":500},[490,1737,1675],{"class":504},[490,1739,820],{"class":500},[490,1741,1742],{"class":492,"line":661},[490,1743,825],{"class":500},[414,1745,1747],{"id":1746},"examples","Examples",[1030,1749,1751],{"id":1750},"semantic-duration-names","Semantic Duration Names",[418,1753,1754],{},"Use semantic names to make animation intent clear:",[472,1756,1757,1964],{},[475,1758,1759],{"icon":477,"label":478},[480,1760,1762],{"className":482,"code":1761,"filename":484,"language":485,"meta":486,"style":486},"import { styleframe } from 'styleframe';\nimport { useDurationDesignTokens, durationValues } from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst {\n    duration,\n    durationMicro,\n    durationUi,\n    durationPage,\n} = useDurationDesignTokens(s, {\n    default: '@duration.ui',\n    micro: durationValues.faster,\n    ui: durationValues.normal,\n    page: durationValues.slow,\n} as const);\n\nexport default s;\n",[461,1763,1764,1784,1809,1813,1827,1831,1837,1843,1850,1857,1864,1878,1893,1908,1923,1938,1950,1954],{"__ignoreMap":486},[490,1765,1766,1768,1770,1772,1774,1776,1778,1780,1782],{"class":492,"line":493},[490,1767,497],{"class":496},[490,1769,501],{"class":500},[490,1771,505],{"class":504},[490,1773,508],{"class":500},[490,1775,511],{"class":496},[490,1777,514],{"class":500},[490,1779,518],{"class":517},[490,1781,521],{"class":500},[490,1783,524],{"class":500},[490,1785,1786,1788,1790,1792,1794,1797,1799,1801,1803,1805,1807],{"class":492,"line":527},[490,1787,497],{"class":496},[490,1789,501],{"class":500},[490,1791,534],{"class":504},[490,1793,637],{"class":500},[490,1795,1796],{"class":504}," durationValues",[490,1798,508],{"class":500},[490,1800,511],{"class":496},[490,1802,514],{"class":500},[490,1804,543],{"class":517},[490,1806,521],{"class":500},[490,1808,524],{"class":500},[490,1810,1811],{"class":492,"line":550},[490,1812,553],{"emptyLinePlaceholder":206},[490,1814,1815,1817,1819,1821,1823,1825],{"class":492,"line":556},[490,1816,560],{"class":559},[490,1818,563],{"class":504},[490,1820,566],{"class":500},[490,1822,505],{"class":569},[490,1824,572],{"class":504},[490,1826,524],{"class":500},[490,1828,1829],{"class":492,"line":577},[490,1830,553],{"emptyLinePlaceholder":206},[490,1832,1833,1835],{"class":492,"line":582},[490,1834,560],{"class":559},[490,1836,587],{"class":500},[490,1838,1839,1841],{"class":492,"line":590},[490,1840,593],{"class":504},[490,1842,596],{"class":500},[490,1844,1845,1848],{"class":492,"line":599},[490,1846,1847],{"class":504},"    durationMicro",[490,1849,596],{"class":500},[490,1851,1852,1855],{"class":492,"line":607},[490,1853,1854],{"class":504},"    durationUi",[490,1856,596],{"class":500},[490,1858,1859,1862],{"class":492,"line":615},[490,1860,1861],{"class":504},"    durationPage",[490,1863,596],{"class":500},[490,1865,1866,1868,1870,1872,1874,1876],{"class":492,"line":623},[490,1867,626],{"class":500},[490,1869,629],{"class":500},[490,1871,534],{"class":569},[490,1873,634],{"class":504},[490,1875,637],{"class":500},[490,1877,587],{"class":500},[490,1879,1880,1882,1884,1886,1889,1891],{"class":492,"line":642},[490,1881,646],{"class":645},[490,1883,649],{"class":500},[490,1885,514],{"class":500},[490,1887,1888],{"class":517},"@duration.ui",[490,1890,521],{"class":500},[490,1892,596],{"class":500},[490,1894,1895,1898,1900,1902,1904,1906],{"class":492,"line":661},[490,1896,1897],{"class":645},"    micro",[490,1899,649],{"class":500},[490,1901,1796],{"class":504},[490,1903,1642],{"class":500},[490,1905,1093],{"class":504},[490,1907,596],{"class":500},[490,1909,1910,1913,1915,1917,1919,1921],{"class":492,"line":678},[490,1911,1912],{"class":645},"    ui",[490,1914,649],{"class":500},[490,1916,1796],{"class":504},[490,1918,1642],{"class":500},[490,1920,1121],{"class":504},[490,1922,596],{"class":500},[490,1924,1925,1928,1930,1932,1934,1936],{"class":492,"line":695},[490,1926,1927],{"class":645},"    page",[490,1929,649],{"class":500},[490,1931,1796],{"class":504},[490,1933,1642],{"class":500},[490,1935,1135],{"class":504},[490,1937,596],{"class":500},[490,1939,1940,1942,1944,1946,1948],{"class":492,"line":712},[490,1941,626],{"class":500},[490,1943,717],{"class":496},[490,1945,720],{"class":559},[490,1947,723],{"class":504},[490,1949,524],{"class":500},[490,1951,1952],{"class":492,"line":728},[490,1953,553],{"emptyLinePlaceholder":206},[490,1955,1956,1958,1960,1962],{"class":492,"line":733},[490,1957,736],{"class":496},[490,1959,739],{"class":496},[490,1961,742],{"class":504},[490,1963,524],{"class":500},[475,1965,1966],{"icon":140,"label":747},[480,1967,1969],{"className":750,"code":1968,"filename":752,"language":753,"meta":486,"style":486},":root {\n    --duration--micro: 100ms;\n    --duration--ui: 250ms;\n    --duration--page: 300ms;\n    --duration: var(--duration--ui);\n}\n",[461,1970,1971,1979,1991,2002,2013,2028],{"__ignoreMap":486},[490,1972,1973,1975,1977],{"class":492,"line":493},[490,1974,649],{"class":500},[490,1976,762],{"class":559},[490,1978,587],{"class":500},[490,1980,1981,1984,1986,1989],{"class":492,"line":527},[490,1982,1983],{"class":504},"    --duration--micro",[490,1985,649],{"class":500},[490,1987,1988],{"class":774}," 100ms",[490,1990,524],{"class":500},[490,1992,1993,1996,1998,2000],{"class":492,"line":550},[490,1994,1995],{"class":504},"    --duration--ui",[490,1997,649],{"class":500},[490,1999,787],{"class":774},[490,2001,524],{"class":500},[490,2003,2004,2007,2009,2011],{"class":492,"line":556},[490,2005,2006],{"class":504},"    --duration--page",[490,2008,649],{"class":500},[490,2010,799],{"class":774},[490,2012,524],{"class":500},[490,2014,2015,2017,2019,2021,2023,2026],{"class":492,"line":577},[490,2016,806],{"class":504},[490,2018,649],{"class":500},[490,2020,811],{"class":569},[490,2022,814],{"class":500},[490,2024,2025],{"class":504},"--duration--ui",[490,2027,820],{"class":500},[490,2029,2030],{"class":492,"line":582},[490,2031,825],{"class":500},[1030,2033,2035],{"id":2034},"combined-with-easing","Combined with Easing",[418,2037,2038],{},"Pair duration tokens with easing tokens for a complete motion system:",[472,2040,2041,2375],{},[475,2042,2043],{"icon":477,"label":478},[480,2044,2046],{"className":482,"code":2045,"filename":484,"language":485,"meta":486,"style":486},"import { styleframe } from 'styleframe';\nimport { useDurationDesignTokens, useEasingDesignTokens } from '@styleframe/theme';\n\nconst s = styleframe();\nconst { selector, css } = s;\n\nconst { durationFast, durationNormal, durationSlower } = useDurationDesignTokens(s);\nconst { easingEaseOut, easingEaseInOut, easingSpring } = useEasingDesignTokens(s);\n\nselector('.tooltip', {\n    transition: css`opacity ${durationFast} ${easingEaseOut}`,\n});\n\nselector('.dropdown', {\n    transition: css`transform ${durationNormal} ${easingEaseInOut}`,\n});\n\nselector('.notification', {\n    transition: css`transform ${durationSlower} ${easingSpring}`,\n});\n\nexport default s;\n",[461,2047,2048,2068,2092,2096,2110,2130,2134,2162,2191,2195,2212,2239,2247,2251,2268,2296,2304,2308,2325,2353,2361,2365],{"__ignoreMap":486},[490,2049,2050,2052,2054,2056,2058,2060,2062,2064,2066],{"class":492,"line":493},[490,2051,497],{"class":496},[490,2053,501],{"class":500},[490,2055,505],{"class":504},[490,2057,508],{"class":500},[490,2059,511],{"class":496},[490,2061,514],{"class":500},[490,2063,518],{"class":517},[490,2065,521],{"class":500},[490,2067,524],{"class":500},[490,2069,2070,2072,2074,2076,2078,2080,2082,2084,2086,2088,2090],{"class":492,"line":527},[490,2071,497],{"class":496},[490,2073,501],{"class":500},[490,2075,534],{"class":504},[490,2077,637],{"class":500},[490,2079,1221],{"class":504},[490,2081,508],{"class":500},[490,2083,511],{"class":496},[490,2085,514],{"class":500},[490,2087,543],{"class":517},[490,2089,521],{"class":500},[490,2091,524],{"class":500},[490,2093,2094],{"class":492,"line":550},[490,2095,553],{"emptyLinePlaceholder":206},[490,2097,2098,2100,2102,2104,2106,2108],{"class":492,"line":556},[490,2099,560],{"class":559},[490,2101,563],{"class":504},[490,2103,566],{"class":500},[490,2105,505],{"class":569},[490,2107,572],{"class":504},[490,2109,524],{"class":500},[490,2111,2112,2114,2116,2118,2120,2122,2124,2126,2128],{"class":492,"line":577},[490,2113,560],{"class":559},[490,2115,501],{"class":500},[490,2117,1265],{"class":504},[490,2119,637],{"class":500},[490,2121,1270],{"class":504},[490,2123,626],{"class":500},[490,2125,629],{"class":500},[490,2127,742],{"class":504},[490,2129,524],{"class":500},[490,2131,2132],{"class":492,"line":582},[490,2133,553],{"emptyLinePlaceholder":206},[490,2135,2136,2138,2140,2142,2144,2147,2149,2152,2154,2156,2158,2160],{"class":492,"line":590},[490,2137,560],{"class":559},[490,2139,501],{"class":500},[490,2141,1291],{"class":504},[490,2143,637],{"class":500},[490,2145,2146],{"class":504}," durationNormal",[490,2148,637],{"class":500},[490,2150,2151],{"class":504}," durationSlower ",[490,2153,626],{"class":500},[490,2155,629],{"class":500},[490,2157,534],{"class":569},[490,2159,1012],{"class":504},[490,2161,524],{"class":500},[490,2163,2164,2166,2168,2171,2173,2176,2178,2181,2183,2185,2187,2189],{"class":492,"line":599},[490,2165,560],{"class":559},[490,2167,501],{"class":500},[490,2169,2170],{"class":504}," easingEaseOut",[490,2172,637],{"class":500},[490,2174,2175],{"class":504}," easingEaseInOut",[490,2177,637],{"class":500},[490,2179,2180],{"class":504}," easingSpring ",[490,2182,626],{"class":500},[490,2184,629],{"class":500},[490,2186,1221],{"class":569},[490,2188,1012],{"class":504},[490,2190,524],{"class":500},[490,2192,2193],{"class":492,"line":607},[490,2194,553],{"emptyLinePlaceholder":206},[490,2196,2197,2199,2201,2203,2206,2208,2210],{"class":492,"line":615},[490,2198,1415],{"class":569},[490,2200,814],{"class":504},[490,2202,521],{"class":500},[490,2204,2205],{"class":517},".tooltip",[490,2207,521],{"class":500},[490,2209,637],{"class":500},[490,2211,587],{"class":500},[490,2213,2214,2216,2218,2220,2222,2224,2226,2228,2230,2232,2235,2237],{"class":492,"line":623},[490,2215,1433],{"class":645},[490,2217,649],{"class":500},[490,2219,1438],{"class":569},[490,2221,1441],{"class":500},[490,2223,1507],{"class":517},[490,2225,1447],{"class":500},[490,2227,845],{"class":504},[490,2229,626],{"class":500},[490,2231,1454],{"class":500},[490,2233,2234],{"class":504},"easingEaseOut",[490,2236,1460],{"class":500},[490,2238,596],{"class":500},[490,2240,2241,2243,2245],{"class":492,"line":642},[490,2242,626],{"class":500},[490,2244,723],{"class":504},[490,2246,524],{"class":500},[490,2248,2249],{"class":492,"line":661},[490,2250,553],{"emptyLinePlaceholder":206},[490,2252,2253,2255,2257,2259,2262,2264,2266],{"class":492,"line":678},[490,2254,1415],{"class":569},[490,2256,814],{"class":504},[490,2258,521],{"class":500},[490,2260,2261],{"class":517},".dropdown",[490,2263,521],{"class":500},[490,2265,637],{"class":500},[490,2267,587],{"class":500},[490,2269,2270,2272,2274,2276,2278,2281,2283,2285,2287,2289,2292,2294],{"class":492,"line":695},[490,2271,1433],{"class":645},[490,2273,649],{"class":500},[490,2275,1438],{"class":569},[490,2277,1441],{"class":500},[490,2279,2280],{"class":517},"transform ",[490,2282,1447],{"class":500},[490,2284,1512],{"class":504},[490,2286,626],{"class":500},[490,2288,1454],{"class":500},[490,2290,2291],{"class":504},"easingEaseInOut",[490,2293,1460],{"class":500},[490,2295,596],{"class":500},[490,2297,2298,2300,2302],{"class":492,"line":712},[490,2299,626],{"class":500},[490,2301,723],{"class":504},[490,2303,524],{"class":500},[490,2305,2306],{"class":492,"line":728},[490,2307,553],{"emptyLinePlaceholder":206},[490,2309,2310,2312,2314,2316,2319,2321,2323],{"class":492,"line":733},[490,2311,1415],{"class":569},[490,2313,814],{"class":504},[490,2315,521],{"class":500},[490,2317,2318],{"class":517},".notification",[490,2320,521],{"class":500},[490,2322,637],{"class":500},[490,2324,587],{"class":500},[490,2326,2327,2329,2331,2333,2335,2337,2339,2342,2344,2346,2349,2351],{"class":492,"line":1473},[490,2328,1433],{"class":645},[490,2330,649],{"class":500},[490,2332,1438],{"class":569},[490,2334,1441],{"class":500},[490,2336,2280],{"class":517},[490,2338,1447],{"class":500},[490,2340,2341],{"class":504},"durationSlower",[490,2343,626],{"class":500},[490,2345,1454],{"class":500},[490,2347,2348],{"class":504},"easingSpring",[490,2350,1460],{"class":500},[490,2352,596],{"class":500},[490,2354,2355,2357,2359],{"class":492,"line":1478},[490,2356,626],{"class":500},[490,2358,723],{"class":504},[490,2360,524],{"class":500},[490,2362,2363],{"class":492,"line":1496},[490,2364,553],{"emptyLinePlaceholder":206},[490,2366,2367,2369,2371,2373],{"class":492,"line":1540},[490,2368,736],{"class":496},[490,2370,739],{"class":496},[490,2372,742],{"class":504},[490,2374,524],{"class":500},[475,2376,2377],{"icon":140,"label":747},[480,2378,2380],{"className":750,"code":2379,"filename":752,"language":753,"meta":486,"style":486},":root {\n    --duration--fast: 150ms;\n    --duration--normal: 250ms;\n    --duration--slower: 500ms;\n    --easing--ease-out: ease-out;\n    --easing--ease-in-out: ease-in-out;\n    --easing--spring: linear(0, 0.0018, ...);\n}\n\n.tooltip {\n    transition: opacity var(--duration--fast) var(--easing--ease-out);\n}\n\n.dropdown {\n    transition: transform var(--duration--normal) var(--easing--ease-in-out);\n}\n\n.notification {\n    transition: transform var(--duration--slower) var(--easing--spring);\n}\n",[461,2381,2382,2390,2400,2410,2422,2434,2446,2471,2475,2479,2488,2513,2517,2521,2530,2555,2559,2563,2572,2598],{"__ignoreMap":486},[490,2383,2384,2386,2388],{"class":492,"line":493},[490,2385,649],{"class":500},[490,2387,762],{"class":559},[490,2389,587],{"class":500},[490,2391,2392,2394,2396,2398],{"class":492,"line":527},[490,2393,769],{"class":504},[490,2395,649],{"class":500},[490,2397,775],{"class":774},[490,2399,524],{"class":500},[490,2401,2402,2404,2406,2408],{"class":492,"line":550},[490,2403,782],{"class":504},[490,2405,649],{"class":500},[490,2407,787],{"class":774},[490,2409,524],{"class":500},[490,2411,2412,2415,2417,2420],{"class":492,"line":556},[490,2413,2414],{"class":504},"    --duration--slower",[490,2416,649],{"class":500},[490,2418,2419],{"class":774}," 500ms",[490,2421,524],{"class":500},[490,2423,2424,2427,2429,2432],{"class":492,"line":577},[490,2425,2426],{"class":504},"    --easing--ease-out",[490,2428,649],{"class":500},[490,2430,2431],{"class":504}," ease-out",[490,2433,524],{"class":500},[490,2435,2436,2439,2441,2444],{"class":492,"line":582},[490,2437,2438],{"class":504},"    --easing--ease-in-out",[490,2440,649],{"class":500},[490,2442,2443],{"class":504}," ease-in-out",[490,2445,524],{"class":500},[490,2447,2448,2451,2453,2456,2459,2461,2464,2466,2469],{"class":492,"line":590},[490,2449,2450],{"class":504},"    --easing--spring",[490,2452,649],{"class":500},[490,2454,2455],{"class":504}," linear(",[490,2457,2458],{"class":774},"0",[490,2460,637],{"class":500},[490,2462,2463],{"class":774}," 0.0018",[490,2465,637],{"class":500},[490,2467,2468],{"class":504}," ...)",[490,2470,524],{"class":500},[490,2472,2473],{"class":492,"line":599},[490,2474,825],{"class":500},[490,2476,2477],{"class":492,"line":607},[490,2478,553],{"emptyLinePlaceholder":206},[490,2480,2481,2483,2486],{"class":492,"line":615},[490,2482,1642],{"class":500},[490,2484,2485],{"class":1645},"tooltip",[490,2487,587],{"class":500},[490,2489,2490,2492,2494,2496,2498,2500,2502,2504,2506,2508,2511],{"class":492,"line":623},[490,2491,1433],{"class":1653},[490,2493,649],{"class":500},[490,2495,1703],{"class":504},[490,2497,1661],{"class":569},[490,2499,814],{"class":500},[490,2501,1666],{"class":504},[490,2503,723],{"class":500},[490,2505,811],{"class":569},[490,2507,814],{"class":500},[490,2509,2510],{"class":504},"--easing--ease-out",[490,2512,820],{"class":500},[490,2514,2515],{"class":492,"line":642},[490,2516,825],{"class":500},[490,2518,2519],{"class":492,"line":661},[490,2520,553],{"emptyLinePlaceholder":206},[490,2522,2523,2525,2528],{"class":492,"line":678},[490,2524,1642],{"class":500},[490,2526,2527],{"class":1645},"dropdown",[490,2529,587],{"class":500},[490,2531,2532,2534,2536,2538,2540,2542,2544,2546,2548,2550,2553],{"class":492,"line":695},[490,2533,1433],{"class":1653},[490,2535,649],{"class":500},[490,2537,1723],{"class":504},[490,2539,1661],{"class":569},[490,2541,814],{"class":500},[490,2543,817],{"class":504},[490,2545,723],{"class":500},[490,2547,811],{"class":569},[490,2549,814],{"class":500},[490,2551,2552],{"class":504},"--easing--ease-in-out",[490,2554,820],{"class":500},[490,2556,2557],{"class":492,"line":712},[490,2558,825],{"class":500},[490,2560,2561],{"class":492,"line":728},[490,2562,553],{"emptyLinePlaceholder":206},[490,2564,2565,2567,2570],{"class":492,"line":733},[490,2566,1642],{"class":500},[490,2568,2569],{"class":1645},"notification",[490,2571,587],{"class":500},[490,2573,2574,2576,2578,2580,2582,2584,2587,2589,2591,2593,2596],{"class":492,"line":1473},[490,2575,1433],{"class":1653},[490,2577,649],{"class":500},[490,2579,1723],{"class":504},[490,2581,1661],{"class":569},[490,2583,814],{"class":500},[490,2585,2586],{"class":504},"--duration--slower",[490,2588,723],{"class":500},[490,2590,811],{"class":569},[490,2592,814],{"class":500},[490,2594,2595],{"class":504},"--easing--spring",[490,2597,820],{"class":500},[490,2599,2600],{"class":492,"line":1478},[490,2601,825],{"class":500},[414,2603,2605],{"id":2604},"best-practices","Best Practices",[429,2607,2608,2620,2632,2642,2654],{},[432,2609,2610,2613,2614,2616,2617,2619],{},[435,2611,2612],{},"Keep micro-interactions fast",": Hover and focus effects should use ",[461,2615,1078],{}," (50ms) to ",[461,2618,842],{}," (150ms) for responsive feedback.",[432,2621,2622,2628,2629,2631],{},[435,2623,2624,2625,2627],{},"Use the ",[461,2626,835],{}," key",": This creates a clean ",[461,2630,859],{}," variable that's perfect for general-purpose transitions.",[432,2633,2634,2637,2638,2641],{},[435,2635,2636],{},"Pair with easing tokens",": Duration alone doesn't make great animations — combine with ",[461,2639,2640],{},"useEasingDesignTokens"," for polished motion.",[432,2643,2644,2647,2648,2650,2651,1642],{},[435,2645,2646],{},"Respect reduced motion",": For users who prefer reduced motion, consider overriding durations to ",[461,2649,1068],{}," using ",[461,2652,2653],{},"prefers-reduced-motion",[432,2655,2656,2659],{},[435,2657,2658],{},"Match duration to distance",": Larger movements need longer durations. A tooltip fade needs less time than a full-page transition.",[2661,2662,2663,2666,2667,2670],"note",{},[435,2664,2665],{},"Good to know:"," We use ",[461,2668,2669],{},"as const"," to ensure the object is treated as a constant type. This helps TypeScript infer the return type of the composables and provides better type safety and autocomplete support.",[414,2672,2674],{"id":2673},"faq","FAQ",[2676,2677,2678,2718,2743,2766],"accordion",{},[2679,2680,2683,2686,2712],"accordion-item",{"icon":2681,"label":2682},"i-lucide-circle-help","How do I choose the right duration for my animation?",[418,2684,2685],{},"Follow these guidelines based on animation type:",[429,2687,2688,2694,2700,2706],{},[432,2689,2690,2693],{},[435,2691,2692],{},"Micro-interactions"," (hover, focus, ripples): 50-150ms",[432,2695,2696,2699],{},[435,2697,2698],{},"UI transitions"," (modals, dropdowns, tooltips): 200-300ms",[432,2701,2702,2705],{},[435,2703,2704],{},"Page transitions",": 300-500ms",[432,2707,2708,2711],{},[435,2709,2710],{},"Spring/bounce effects",": 400-600ms (they need time to settle)",[418,2713,2714,2715,2717],{},"When in doubt, start with ",[461,2716,1121],{}," (250ms) and adjust from there.",[2679,2719,2721,2723,2724,2727,2728,2731,2732,2735,2736,2739,2740,846],{"icon":2681,"label":2720},"What's the difference between duration and delay?",[435,2722,185],{}," controls how long an animation takes to complete. ",[435,2725,2726],{},"Delay"," controls how long to wait before the animation starts. Both use the same time units (ms/s), and both ",[461,2729,2730],{},"transition-duration"," and ",[461,2733,2734],{},"transition-delay"," utilities can reference duration tokens using the ",[461,2737,2738],{},"@"," prefix (e.g., ",[461,2741,2742],{},"@fast",[2679,2744,2746,2749,2763],{"icon":2681,"label":2745},"When should I use longer durations?",[418,2747,2748],{},"Use longer durations (500ms+) when:",[429,2750,2751,2754,2757,2760],{},[432,2752,2753],{},"The animation covers a large distance on screen",[432,2755,2756],{},"You're using spring or bounce easing that needs time to settle",[432,2758,2759],{},"The animation is decorative and meant to be noticed (onboarding, celebrations)",[432,2761,2762],{},"Multiple elements are animating in sequence (staggered animations)",[418,2764,2765],{},"Avoid long durations for interactive feedback — users expect immediate response to their actions.",[2679,2767,2769,2778,2881],{"icon":2681,"label":2768},"How do I support users who prefer reduced motion?",[418,2770,2771,2772,2774,2775,2777],{},"Override duration tokens to ",[461,2773,1068],{}," using the ",[461,2776,2653],{}," media query:",[480,2779,2781],{"className":482,"code":2780,"language":485,"meta":486,"style":486},"selector('@media (prefers-reduced-motion: reduce)', {\n    '--duration': '0ms',\n    '--duration--fast': '0ms',\n    '--duration--normal': '0ms',\n    '--duration--slow': '0ms',\n});\n",[461,2782,2783,2800,2818,2836,2854,2873],{"__ignoreMap":486},[490,2784,2785,2787,2789,2791,2794,2796,2798],{"class":492,"line":493},[490,2786,1415],{"class":569},[490,2788,814],{"class":504},[490,2790,521],{"class":500},[490,2792,2793],{"class":517},"@media (prefers-reduced-motion: reduce)",[490,2795,521],{"class":500},[490,2797,637],{"class":500},[490,2799,587],{"class":500},[490,2801,2802,2804,2806,2808,2810,2812,2814,2816],{"class":492,"line":527},[490,2803,1378],{"class":500},[490,2805,859],{"class":645},[490,2807,521],{"class":500},[490,2809,649],{"class":500},[490,2811,514],{"class":500},[490,2813,1068],{"class":517},[490,2815,521],{"class":500},[490,2817,596],{"class":500},[490,2819,2820,2822,2824,2826,2828,2830,2832,2834],{"class":492,"line":550},[490,2821,1378],{"class":500},[490,2823,1666],{"class":645},[490,2825,521],{"class":500},[490,2827,649],{"class":500},[490,2829,514],{"class":500},[490,2831,1068],{"class":517},[490,2833,521],{"class":500},[490,2835,596],{"class":500},[490,2837,2838,2840,2842,2844,2846,2848,2850,2852],{"class":492,"line":556},[490,2839,1378],{"class":500},[490,2841,817],{"class":645},[490,2843,521],{"class":500},[490,2845,649],{"class":500},[490,2847,514],{"class":500},[490,2849,1068],{"class":517},[490,2851,521],{"class":500},[490,2853,596],{"class":500},[490,2855,2856,2858,2861,2863,2865,2867,2869,2871],{"class":492,"line":577},[490,2857,1378],{"class":500},[490,2859,2860],{"class":645},"--duration--slow",[490,2862,521],{"class":500},[490,2864,649],{"class":500},[490,2866,514],{"class":500},[490,2868,1068],{"class":517},[490,2870,521],{"class":500},[490,2872,596],{"class":500},[490,2874,2875,2877,2879],{"class":492,"line":582},[490,2876,626],{"class":500},[490,2878,723],{"class":504},[490,2880,524],{"class":500},[418,2882,2883],{},"This instantly disables all animations that reference duration tokens.",[2885,2886,2887],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}",{"title":486,"searchDepth":527,"depth":527,"links":2889},[2890,2891,2892,2893,2896,2897,2901,2902],{"id":416,"depth":527,"text":64},{"id":423,"depth":527,"text":424},{"id":459,"depth":527,"text":463},{"id":863,"depth":527,"text":864,"children":2894},[2895],{"id":1032,"depth":550,"text":1033},{"id":1175,"depth":527,"text":1176},{"id":1746,"depth":527,"text":1747,"children":2898},[2899,2900],{"id":1750,"depth":550,"text":1751},{"id":2034,"depth":550,"text":2035},{"id":2604,"depth":527,"text":2605},{"id":2673,"depth":527,"text":2674},"Create and manage duration design tokens with CSS variables for consistent animation and transition timing across your application.","md",null,{},{"title":185,"icon":7},{"title":409,"description":2903},{"loc":186},"g82zRYrYnzkkEIN0ZGyCy5o0eE1_l2W1za1F61Ut268",[2912,2914],{"title":181,"path":182,"stem":183,"description":2913,"icon":7,"children":-1},"Create and manage color design tokens with automatic, easily configurable variants, tints, and shades using the oklch color space.",{"title":189,"path":190,"stem":191,"description":2915,"icon":7,"children":-1},"Create and manage easing design tokens with CSS variables for consistent animation timing across your application.",1776621142955]