[{"_1":2,"_701":-5,"_702":-5},"loaderData",{"_3":4,"_351":352,"_445":446},"root",{"_5":6,"_11":-5,"_12":13,"_14":-5,"_15":16,"_17":18,"_110":111,"_114":115,"_116":113,"_117":118,"_163":120,"_164":122,"_123":124,"_165":166,"_187":188,"_212":-5,"_213":-5,"_214":215},"userId",{"_7":8,"_9":10},"id","072ca5f1-5ee3-4d18-81f1-61b85423824b","type","cookie.randomId","preferences","progress",[],"user","userHasAccess",true,"apps",[19,26,30,34,38,42,46,50,54,58,62,66,70,74,78,82,86,90,94,98,102,106],{"_20":21,"_22":23,"_24":25},"name","01.01.problem","fullPath","/myapp/workshop-content/exercises/01.figma-to-tailwind/01.problem.design-implementation","relativePath","exercises/01.figma-to-tailwind/01.problem.design-implementation",{"_20":27,"_22":28,"_24":29},"01.01.solution","/myapp/workshop-content/exercises/01.figma-to-tailwind/01.solution.design-implementation","exercises/01.figma-to-tailwind/01.solution.design-implementation",{"_20":31,"_22":32,"_24":33},"02.01.problem","/myapp/workshop-content/exercises/02.color-tokens/01.problem.custom-colors-in-ui","exercises/02.color-tokens/01.problem.custom-colors-in-ui",{"_20":35,"_22":36,"_24":37},"02.01.solution","/myapp/workshop-content/exercises/02.color-tokens/01.solution.custom-colors-in-ui","exercises/02.color-tokens/01.solution.custom-colors-in-ui",{"_20":39,"_22":40,"_24":41},"02.02.problem","/myapp/workshop-content/exercises/02.color-tokens/02.problem.cutoff-default-colors","exercises/02.color-tokens/02.problem.cutoff-default-colors",{"_20":43,"_22":44,"_24":45},"02.02.solution","/myapp/workshop-content/exercises/02.color-tokens/02.solution.cutoff-default-colors","exercises/02.color-tokens/02.solution.cutoff-default-colors",{"_20":47,"_22":48,"_24":49},"02.03.problem","/myapp/workshop-content/exercises/02.color-tokens/03.problem.non-colors-support","exercises/02.color-tokens/03.problem.non-colors-support",{"_20":51,"_22":52,"_24":53},"02.03.solution","/myapp/workshop-content/exercises/02.color-tokens/03.solution.non-colors-support","exercises/02.color-tokens/03.solution.non-colors-support",{"_20":55,"_22":56,"_24":57},"02.04.problem","/myapp/workshop-content/exercises/02.color-tokens/04.problem.semantic-design-tokens","exercises/02.color-tokens/04.problem.semantic-design-tokens",{"_20":59,"_22":60,"_24":61},"02.04.solution","/myapp/workshop-content/exercises/02.color-tokens/04.solution.semantic-design-tokens","exercises/02.color-tokens/04.solution.semantic-design-tokens",{"_20":63,"_22":64,"_24":65},"02.05.problem","/myapp/workshop-content/exercises/02.color-tokens/05.problem.broader-scopes","exercises/02.color-tokens/05.problem.broader-scopes",{"_20":67,"_22":68,"_24":69},"02.05.solution","/myapp/workshop-content/exercises/02.color-tokens/05.solution.broader-scopes","exercises/02.color-tokens/05.solution.broader-scopes",{"_20":71,"_22":72,"_24":73},"02.06.problem","/myapp/workshop-content/exercises/02.color-tokens/06.problem.css-variables","exercises/02.color-tokens/06.problem.css-variables",{"_20":75,"_22":76,"_24":77},"02.06.solution","/myapp/workshop-content/exercises/02.color-tokens/06.solution.css-variables","exercises/02.color-tokens/06.solution.css-variables",{"_20":79,"_22":80,"_24":81},"02.07.problem","/myapp/workshop-content/exercises/02.color-tokens/07.problem.dark-mode","exercises/02.color-tokens/07.problem.dark-mode",{"_20":83,"_22":84,"_24":85},"02.07.solution","/myapp/workshop-content/exercises/02.color-tokens/07.solution.dark-mode","exercises/02.color-tokens/07.solution.dark-mode",{"_20":87,"_22":88,"_24":89},"02.08.problem","/myapp/workshop-content/exercises/02.color-tokens/08.problem.multi-theme","exercises/02.color-tokens/08.problem.multi-theme",{"_20":91,"_22":92,"_24":93},"02.08.solution","/myapp/workshop-content/exercises/02.color-tokens/08.solution.multi-theme","exercises/02.color-tokens/08.solution.multi-theme",{"_20":95,"_22":96,"_24":97},"03.01.problem","/myapp/workshop-content/exercises/03.tailwind-v4/01.problem.theme-config-in-css","exercises/03.tailwind-v4/01.problem.theme-config-in-css",{"_20":99,"_22":100,"_24":101},"03.01.solution","/myapp/workshop-content/exercises/03.tailwind-v4/01.solution.theme-config-in-css","exercises/03.tailwind-v4/01.solution.theme-config-in-css",{"_20":103,"_22":104,"_24":105},"03.02.problem","/myapp/workshop-content/exercises/03.tailwind-v4/02.problem.simplification","exercises/03.tailwind-v4/02.problem.simplification",{"_20":107,"_22":108,"_24":109},"03.02.solution","/myapp/workshop-content/exercises/03.tailwind-v4/02.solution.simplification","exercises/03.tailwind-v4/02.solution.simplification","repoUpdates",{"_112":113},"updatesAvailable",false,"unmutedNotifications",[],"exerciseChanges","workshopConfig",{"_119":120,"_121":122,"_123":124,"_130":131,"_141":142,"_144":145,"_146":147,"_148":149,"_154":155,"_157":158,"_159":160,"_161":162},"title","Tailwind CSS Color Tokens 🎨","subtitle","Semantic, themable color design tokens in Tailwind CSS","instructor",{"_20":125,"_126":127,"_128":129},"Simon Vrachliotis","avatar","/images/instructor.png","𝕏","simonswiss","product",{"_132":133,"_134":135,"_136":137,"_138":139,"_140":-7},"host","www.epicweb.dev","displayName","EpicWeb.dev","displayNameShort","Epic Web","logo","/logo.svg","slug","onboardingVideo",[143],"https://www.epicweb.dev/tips/get-started-with-the-epic-workshop-app","githubRepo","https://github.com/epicweb-dev/tailwindcss-color-tokens","githubRoot","https://github.com/epicweb-dev/tailwindcss-color-tokens/tree/main","forms",{"_150":151,"_152":153},"workshop","https://docs.google.com/forms/d/e/1FAIpQLSdBPrvL1FTGs4GV2c2FRhLkboZXNdgf4omm5-zgDEetoAvztQ/viewform?hl=en&embedded=true&usp=pp_url&entry.768811917={workshopTitle}","exercise","https://docs.google.com/forms/d/e/1FAIpQLSd_CXGmaqrhEs4ykj2Z92pE17K_HpZwMv81qFVZUyYUfC6-ng/viewform?hl=en&embedded=true&usp=pp_url&entry.768811917={workshopTitle}&entry.279928360={exerciseTitle}","testTab",{"_156":16},"enabled","initialRoute","/","notifications",[],"sidecarProcesses",{},"workshopTitle","workshopSubtitle","ENV",{"_167":168,"_169":170,"_171":172,"_173":145,"_174":147,"_175":16,"_176":177,"_178":179,"_180":181,"_182":16,"_183":184,"_185":186},"MODE","production","EPICSHOP_CONTEXT_CWD","/myapp/workshop-content","EPICSHOP_WORKSHOP_INSTANCE_ID","4e1570b81d1baf3d16bd3a08ece570cb","EPICSHOP_GITHUB_REPO","EPICSHOP_GITHUB_ROOT","EPICSHOP_DEPLOYED","EPICSHOP_APP_VERSION","6.45.7","EPICSHOP_PARENT_PORT","3742","EPICSHOP_PARENT_TOKEN","ba66dd6079e7c0a7a5743e20d10af14655fd946139e9156467c6e98da0010d58","EPICSHOP_IS_PUBLISHED","SENTRY_DSN","https://cd51fbf4ca0834f7b3529a478a8ece4c@o913766.ingest.us.sentry.io/4509630082252800","SENTRY_PROJECT_ID","4509630082252800","requestInfo",{"_189":190,"_191":192,"_193":194,"_195":196,"_197":196,"_198":199,"_206":207,"_208":209,"_210":158,"_211":16},"protocol","http:","hostname","epicweb-dev-tailwindcss-color-tokens.fly.dev","port","","origin","http://epicweb-dev-tailwindcss-color-tokens.fly.dev","domain","hints",{"_200":201,"_202":203,"_204":205},"theme","light","timeZone","UTC","reducedMotion","no-preference","path","/exercise/02","session",{"_200":-5},"separator","online","toast","confettiId","presence",{"_216":217},"users",[218,235,243,249,259,269,277,286,295,303,311,319,325,330,335,338,341,347],{"_7":219,"_220":16,"_221":222,"_223":224,"_20":225,"_226":227},"35f5782a-73a5-450b-ad4b-42bd6265aa3f","hasAccess","imageUrlSmall","https://www.gravatar.com/avatar/0cbcfeb7f58969da6db66cef5934c0ce?size=64&default=identicon","imageUrlLarge","https://www.gravatar.com/avatar/0cbcfeb7f58969da6db66cef5934c0ce?size=512&default=identicon","Keshia Niemegeerts","location",{"_163":228,"_195":229,"_152":230},"React Fundamentals ⚛","http://localhost:5639",{"_9":231,"_232":233,"_234":233},"solution","exerciseNumber",5,"stepNumber",{"_7":236,"_220":16,"_221":237,"_223":238,"_20":239,"_226":240},"5451b67b-8085-4946-a424-0cd9a21dce5c","https://avatars.githubusercontent.com/u/121665946?v=4&size=64","https://avatars.githubusercontent.com/u/121665946?v=4&size=512","Sivananda Balaji D",{"_163":228,"_195":229,"_152":241},{"_232":242},6,{"_7":244,"_220":16,"_221":245,"_223":246,"_20":247,"_226":248},"4a6cbe81-f17e-4ab5-90df-49b6f1942fb0","https://www.gravatar.com/avatar/3809e094d46fe7f55768431294254583?size=64&default=identicon","https://www.gravatar.com/avatar/3809e094d46fe7f55768431294254583?size=512&default=identicon","carlmarion.develops@gmail.com",{"_163":228,"_195":229},{"_7":250,"_220":16,"_221":251,"_223":252,"_20":253,"_226":254},"0304457a-b911-43db-8c41-75a0fc0fcb89","https://www.gravatar.com/avatar/8d980454ef1d8d3b3642f8e72ca355c4?size=64&default=identicon","https://www.gravatar.com/avatar/8d980454ef1d8d3b3642f8e72ca355c4?size=512&default=identicon","Joel Choo",{"_163":255,"_195":229,"_152":256},"Data Modeling Deep Dive 💾",{"_9":257,"_232":258,"_234":258},"problem",1,{"_7":260,"_220":16,"_221":261,"_223":262,"_20":263,"_226":264},"b3a47ad0-7c04-42be-8067-dfb308cc3d24","https://www.gravatar.com/avatar/19bd33f2b37cf3af0b977c40bb0b8ea6?size=64&default=identicon","https://www.gravatar.com/avatar/19bd33f2b37cf3af0b977c40bb0b8ea6?size=512&default=identicon","MARIO ALFREDO JORGE",{"_163":265,"_195":266,"_152":267},"Advanced React Patterns 🤯","http://localhost:5640",{"_232":268},3,{"_7":270,"_220":16,"_221":271,"_223":272,"_20":273,"_226":274},"e829e798-f939-4c19-9503-f5c2698a3805","https://avatars.githubusercontent.com/u/57207914?v=4&size=64","https://avatars.githubusercontent.com/u/57207914?v=4&size=512","Sandy",{"_163":275,"_195":229,"_152":276},"Mocking Techniques in Vitest",{"_9":231,"_232":258,"_234":258},{"_7":278,"_220":16,"_221":279,"_223":280,"_20":281,"_226":282},"e674136d-2308-4f63-88fc-baebe8be65c0","https://www.gravatar.com/avatar/3d8a7f810b6ef7d425c2df44d85744a6?size=64&default=identicon","https://www.gravatar.com/avatar/3d8a7f810b6ef7d425c2df44d85744a6?size=512&default=identicon","Chegu Manikanta Kumar",{"_163":283,"_195":229,"_152":284},"Advanced React APIs 🔥",{"_232":285},4,{"_7":287,"_220":16,"_221":288,"_223":289,"_20":290,"_226":291},"1355cd61-c8b7-4dee-b4c5-1ffe647a03bc","https://cdn.discordapp.com/avatars/364344171915640843/1664054b9c39700705d0fa6692e19ab3.png?size=64","https://cdn.discordapp.com/avatars/364344171915640843/1664054b9c39700705d0fa6692e19ab3.png?size=512","Ritvars Biksis",{"_163":292,"_195":229,"_152":293},"MCP Fundamentals 🧱",{"_232":294},2,{"_7":296,"_220":16,"_221":297,"_223":298,"_20":299,"_226":300},"e2de664f-a76d-42d9-ab6c-1aaf33ad97db","https://www.gravatar.com/avatar/2b4aac8301f008dac1b4f0f4d611a692?size=64&default=identicon","https://www.gravatar.com/avatar/2b4aac8301f008dac1b4f0f4d611a692?size=512&default=identicon","Teerawat Prarom",{"_163":283,"_195":229,"_152":301},{"_232":302},9,{"_7":304,"_220":16,"_221":305,"_223":306,"_20":307,"_226":308},"70e35bb0-e529-4a3a-acba-0dca0f3d3889","https://www.gravatar.com/avatar/98416b956e075550dd16e968f4c6b68c?size=64&default=identicon","https://www.gravatar.com/avatar/98416b956e075550dd16e968f4c6b68c?size=512&default=identicon","RICARDO GUTIERREZ H",{"_163":309,"_195":229,"_152":310},"Full Stack Foundations 🔭",{"_9":257,"_232":242,"_234":258},{"_7":312,"_220":16,"_221":313,"_223":314,"_20":315,"_226":316},"6332fd58-8897-4400-b3be-046d4ca59c97","https://cdn.discordapp.com/avatars/200228449388855296/0e5708bbae085a8236ea7dfdbc606b76.png?size=64","https://cdn.discordapp.com/avatars/200228449388855296/0e5708bbae085a8236ea7dfdbc606b76.png?size=512","Ryota Murakami",{"_163":317,"_195":229,"_152":318},"📐 Pixel Perfect Tailwind",{"_9":257,"_232":294,"_234":258},{"_7":320,"_226":321},"312d3f4f-f343-4424-b7ca-32f85b097393",{"_163":322,"_195":323,"_152":324},"Advanced MCP Features 🐡","http://advanced-mcp-features.epicai.pro",{"_232":285},{"_7":326,"_226":327},"f34a0cd3-182b-49b9-80b8-811e87d5b5e9",{"_163":328,"_195":329},"React Server Components 🤹","http://server-components.epicreact.dev",{"_7":331,"_226":332},"ao1bx8rbmn2onhrsyxzrzqto",{"_163":228,"_195":333,"_152":334},"http://127.0.0.1:5639",{"_9":257,"_232":285,"_234":285},{"_7":336,"_226":337},"ake7w2jegbb1iu7weqqohyrb",{"_163":283,"_195":229},{"_7":339,"_226":340},"6ea17e84-332d-4f64-974a-27119453ace0",{"_163":328,"_195":329},{"_7":342,"_220":16,"_221":343,"_223":344,"_20":-5,"_226":345},"56c6557a-1df7-437e-82ef-ab427c629bf0","https://www.gravatar.com/avatar/75a57f9ab14f446474a0bfc9a934bf3c?size=64&default=identicon","https://www.gravatar.com/avatar/75a57f9ab14f446474a0bfc9a934bf3c?size=512&default=identicon",{"_163":292,"_195":229,"_152":346},{"_9":257,"_232":268,"_234":285},{"_7":348,"_226":349},"aba9a9b0-687a-4b1f-b3ed-7c8725d6bbef",{"_163":120,"_195":196,"_152":350},{"_232":294,"_234":-5,"_9":-5},"routes/_app+/_layout",{"_163":120,"_353":354,"_441":442,"_444":113},"exercises",[355,369,424],{"_232":258,"_119":356,"_357":358,"_361":362,"_364":365},"Figma to Tailwind CSS","solutions",[359],{"_234":258,"_119":360,"_20":27},"Design Implementation","problems",[363],{"_234":258,"_119":360,"_20":21},"steps",[366],{"_234":258,"_119":360,"_20":21,"_257":367,"_231":368},{"_20":21,"_119":360},{"_20":27,"_119":360},{"_232":294,"_119":370,"_357":371,"_361":390,"_364":399},"Color Design Tokens",[372,374,376,378,380,382,384,387],{"_234":258,"_119":373,"_20":35},"Custom colors in UI",{"_234":294,"_119":375,"_20":43},"Cutoff Default Colors",{"_234":268,"_119":377,"_20":51},"\"Non colors\" support",{"_234":285,"_119":379,"_20":59},"Semantic Design Tokens",{"_234":233,"_119":381,"_20":67},"Broader Scopes",{"_234":242,"_119":383,"_20":75},"CSS Variables",{"_234":385,"_119":386,"_20":83},7,"Dark Mode",{"_234":388,"_119":389,"_20":91},8,"Multi-Theme Support",[391,392,393,394,395,396,397,398],{"_234":258,"_119":373,"_20":31},{"_234":294,"_119":375,"_20":39},{"_234":268,"_119":377,"_20":47},{"_234":285,"_119":379,"_20":55},{"_234":233,"_119":381,"_20":63},{"_234":242,"_119":383,"_20":71},{"_234":385,"_119":386,"_20":79},{"_234":388,"_119":389,"_20":87},[400,403,406,409,412,415,418,421],{"_234":258,"_119":373,"_20":31,"_257":401,"_231":402},{"_20":31,"_119":373},{"_20":35,"_119":373},{"_234":294,"_119":375,"_20":39,"_257":404,"_231":405},{"_20":39,"_119":375},{"_20":43,"_119":375},{"_234":268,"_119":377,"_20":47,"_257":407,"_231":408},{"_20":47,"_119":377},{"_20":51,"_119":377},{"_234":285,"_119":379,"_20":55,"_257":410,"_231":411},{"_20":55,"_119":379},{"_20":59,"_119":379},{"_234":233,"_119":381,"_20":63,"_257":413,"_231":414},{"_20":63,"_119":381},{"_20":67,"_119":381},{"_234":242,"_119":383,"_20":71,"_257":416,"_231":417},{"_20":71,"_119":383},{"_20":75,"_119":383},{"_234":385,"_119":386,"_20":79,"_257":419,"_231":420},{"_20":79,"_119":386},{"_20":83,"_119":386},{"_234":388,"_119":389,"_20":87,"_257":422,"_231":423},{"_20":87,"_119":389},{"_20":91,"_119":389},{"_232":268,"_119":425,"_357":426,"_361":431,"_364":434},"Conversion to Tailwind v4",[427,429],{"_234":258,"_119":428,"_20":99},"Theme Configuration in CSS",{"_234":294,"_119":430,"_20":107},"Simplification",[432,433],{"_234":258,"_119":428,"_20":95},{"_234":294,"_119":430,"_20":103},[435,438],{"_234":258,"_119":428,"_20":95,"_257":436,"_231":437},{"_20":95,"_119":428},{"_20":99,"_119":428},{"_234":294,"_119":430,"_20":103,"_257":439,"_231":440},{"_20":103,"_119":430},{"_20":107,"_119":430},"playground",{"_443":-5,"_232":-2,"_234":-2,"_9":-7},"appName","isMenuOpened","routes/_app+/exercise+/$exerciseNumber",{"_447":448,"_152":449,"_232":294,"_691":692,"_696":370,"_697":464,"_698":257,"_119":120,"_699":700},"articleId","workshop-tailwind-css-color-tokens-2-instructions",{"_22":450,"_232":294,"_451":452,"_119":370,"_453":454,"_455":456,"_457":458,"_460":461,"_364":463,"_361":625,"_357":658},"/myapp/workshop-content/exercises/02.color-tokens","dirName","02.color-tokens","instructionsCode","var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),x=(o,e)=>{for(var t in e)i(o,t,{get:e[t],enumerable:!0})},c=(o,e,t,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of u(e))!f.call(o,r)&&r!==t&&i(o,r,{get:()=>e[r],enumerable:!(s=h(e,r))||s.enumerable});return o};var k=(o,e,t)=>(t=o!=null?p(w(o)):{},c(e||!o||!o.__esModule?i(t,\"default\",{value:o,enumerable:!0}):t,o)),_=o=>c(i({},\"__esModule\",{value:!0}),o);var l=g((E,a)=>{a.exports=_jsx_runtime});var y={};x(y,{default:()=>m,frontmatter:()=>j});var n=k(l()),j=void 0;function d(o){let e={h1:\"h1\",p:\"p\",...o.components},{EpicVideo:t}=e;return t||b(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Color Design Tokens\"}),`\n`,(0,n.jsx)(t,{url:\"https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/intro-color-design-tokens\"}),`\n`,(0,n.jsx)(e.p,{children:\"In this exercise, we'll implement the custom colors in our Tailwind CSS project.\"}),`\n`,(0,n.jsx)(e.p,{children:`We'll start with the \"raw\" colors, and then add a layer of abstraction for semantic color tokens.`}),`\n`,(0,n.jsx)(\"img\",{src:\"/images/semantic-color-tokens.png\",alt:\"screenshot of Figma's variables panel showing semantic color design tokens\"}),`\n`,(0,n.jsx)(e.p,{children:\"Ready? You know what to do!\"})]})}function m(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(d,{...o})}):d(o)}function b(o,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+o+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return _(y);})();\n;return Component;","finishedCode","var Component=(()=>{var u=Object.create;var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var x=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),g=(t,e)=>{for(var o in e)i(t,o,{get:e[o],enumerable:!0})},c=(t,e,o,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!k.call(t,r)&&r!==o&&i(t,r,{get:()=>e[r],enumerable:!(s=m(e,r))||s.enumerable});return t};var w=(t,e,o)=>(o=t!=null?u(f(t)):{},c(e||!t||!t.__esModule?i(o,\"default\",{value:t,enumerable:!0}):o,t)),y=t=>c(i({},\"__esModule\",{value:!0}),t);var d=x((v,a)=>{a.exports=_jsx_runtime});var j={};g(j,{default:()=>l,frontmatter:()=>b});var n=w(d()),b=void 0;function h(t){let e={h1:\"h1\",h2:\"h2\",p:\"p\",...t.components},{EpicVideo:o}=e;return o||_(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Color Design Tokens\"}),`\n`,(0,n.jsx)(o,{url:\"https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/color-design-tokens-outro\"}),`\n`,(0,n.jsx)(e.p,{children:\"Hot damn, this was a big segment.\"}),`\n`,(0,n.jsx)(e.p,{children:\"But I'm pretty sure that the value it unlocks made it worth it!\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Tell me what you think!\"}),`\n`,(0,n.jsx)(e.p,{children:\"If you could spend 2 mintues filling the feedback form \\u2014\\xA0 that truly helps make the workshop materials better for everyone \\u2764\\uFE0F\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Break time\"}),`\n`,(0,n.jsx)(e.p,{children:\"Make sure you take a good break before jumping into the next exercise.\"})]})}function l(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(h,{...t})}):h(t)}function _(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return y(j);})();\n;return Component;","instructionsEpicVideoEmbeds",[459],"https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/intro-color-design-tokens","finishedEpicVideoEmbeds",[462],"https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/color-design-tokens-outro",[464,492,511,530,549,568,587,606],{"_234":258,"_257":465,"_231":482},{"_20":31,"_119":373,"_451":466,"_22":32,"_24":33,"_453":467,"_468":469,"_471":472,"_474":475,"_479":480,"_232":294,"_234":258,"_9":257,"_481":35},"01.problem.custom-colors-in-ui","var Component=(()=>{var p=Object.create;var t=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var f=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),k=(l,e)=>{for(var c in e)t(l,c,{get:e[c],enumerable:!0})},d=(l,e,c,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of b(e))!y.call(l,i)&&i!==c&&t(l,i,{get:()=>e[i],enumerable:!(r=u(e,i))||r.enumerable});return l};var w=(l,e,c)=>(c=l!=null?p(g(l)):{},d(e||!l||!l.__esModule?t(c,\"default\",{value:l,enumerable:!0}):c,l)),x=l=>d(t({},\"__esModule\",{value:!0}),l);var a=f((j,o)=>{o.exports=_jsx_runtime});var _={};k(_,{default:()=>m,frontmatter:()=>N});var n=w(a()),N=void 0;function s(l){let e={code:\"code\",h1:\"h1\",h2:\"h2\",li:\"li\",p:\"p\",pre:\"pre\",span:\"span\",ul:\"ul\",...l.components},{EpicVideo:c,InlineFile:r}=e;return c||h(\"EpicVideo\",!0),r||h(\"InlineFile\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Custom colors in UI\"}),`\n`,(0,n.jsx)(c,{url:\"https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/custom-colors-in-ui\"}),`\n`,(0,n.jsx)(e.h2,{children:\"1. Add custom theme colors\"}),`\n`,(0,n.jsx)(e.p,{children:\"Start by extending the Tailwind theme with the raw color tokens.\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"You can do this in the \",(0,n.jsx)(r,{file:\"tailwind.config.ts\"}),\" file.\"]}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"ts\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"export\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"default\"}),\" {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t\",\"theme\",\": {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t\textend: {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t\t\tcolors: {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t\t\t\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// Add the colors here...\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"\t\t\t},\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"\t\t},\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\"\t},\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[\"}\",`\n`]})]})}),`\n`,(0,n.jsx)(e.p,{children:\"There should be 14 new colors added to the theme:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.code,{children:\"teal\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.code,{children:\"purple\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.code,{children:\"grey-0\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.code,{children:\"grey-5\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.code,{children:\"grey-10\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.code,{children:\"grey-20\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.code,{children:\"grey-30\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.code,{children:\"grey-40\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.code,{children:\"grey-50\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.code,{children:\"grey-60\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.code,{children:\"grey-70\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.code,{children:\"grey-80\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.code,{children:\"grey-90\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.code,{children:\"grey-100\"})}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"2. Replace the colors in the UI\"}),`\n`,(0,n.jsx)(e.p,{children:\"Update the UI to use the color tokens to match the design.\"}),`\n`,(0,n.jsx)(e.p,{children:\"Remember, we'll change to semantic design tookens later \\u2014\\xA0but let's get the UI right first with these new colors in place.\"})]})}function m(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,{...l,children:(0,n.jsx)(s,{...l})}):s(l)}function h(l,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+l+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return x(_);})();\n;return Component;","epicVideoEmbeds",[470],"https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/custom-colors-in-ui","test",{"_9":473},"none","dev",{"_9":476,"_477":478,"_157":158},"script","portNumber",6011,"stackBlitzUrl","https://stackblitz.com/github/epicweb-dev/tailwindcss-color-tokens/tree/main/exercises/02.color-tokens/01.problem.custom-colors-in-ui?title=Custom+colors+in+UI+%28problem%29","solutionName",{"_20":35,"_119":373,"_451":483,"_22":36,"_24":37,"_453":484,"_468":485,"_471":487,"_474":488,"_479":490,"_232":294,"_234":258,"_9":231,"_491":-5},"01.solution.custom-colors-in-ui","var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var w=(o,t)=>()=>(t||o((t={exports:{}}).exports,t),t.exports),_=(o,t)=>{for(var n in t)i(o,n,{get:t[n],enumerable:!0})},c=(o,t,n,s)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of f(t))!h.call(o,r)&&r!==n&&i(o,r,{get:()=>t[r],enumerable:!(s=a(t,r))||s.enumerable});return o};var g=(o,t,n)=>(n=o!=null?p(x(o)):{},c(t||!o||!o.__esModule?i(n,\"default\",{value:o,enumerable:!0}):n,o)),j=o=>c(i({},\"__esModule\",{value:!0}),o);var d=w((y,u)=>{u.exports=_jsx_runtime});var b={};_(b,{default:()=>m,frontmatter:()=>E});var e=g(d()),E=void 0;function l(o){let t={h1:\"h1\",p:\"p\",...o.components},{EpicVideo:n}=t;return n||M(\"EpicVideo\",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(t.h1,{children:\"Custom colors in UI\"}),`\n`,(0,e.jsx)(n,{url:\"https://www.epicweb.dev/tutorials/tailwind-color-tokens/custom-colors-in-ui/custom-colors-in-ui/solution\"}),`\n`,(0,e.jsx)(t.p,{children:\"Looking good! \\u{1F618}\"})]})}function m(o={}){let{wrapper:t}=o.components||{};return t?(0,e.jsx)(t,{...o,children:(0,e.jsx)(l,{...o})}):l(o)}function M(o,t){throw new Error(\"Expected \"+(t?\"component\":\"object\")+\" `\"+o+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return j(b);})();\n;return Component;",[486],"https://www.epicweb.dev/tutorials/tailwind-color-tokens/custom-colors-in-ui/custom-colors-in-ui/solution",{"_9":473},{"_9":476,"_477":489,"_157":158},7011,"https://stackblitz.com/github/epicweb-dev/tailwindcss-color-tokens/tree/main/exercises/02.color-tokens/01.solution.custom-colors-in-ui?title=Custom+colors+in+UI+%28solution%29","problemName",{"_234":294,"_257":493,"_231":502},{"_20":39,"_119":375,"_451":494,"_22":40,"_24":41,"_453":495,"_468":496,"_471":498,"_474":499,"_479":501,"_232":294,"_234":294,"_9":257,"_481":43},"02.problem.cutoff-default-colors","var Component=(()=>{var h=Object.create;var c=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var w=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),g=(t,e)=>{for(var n in e)c(t,n,{get:e[n],enumerable:!0})},s=(t,e,n,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!x.call(t,r)&&r!==n&&c(t,r,{get:()=>e[r],enumerable:!(i=f(e,r))||i.enumerable});return t};var y=(t,e,n)=>(n=t!=null?h(m(t)):{},s(e||!t||!t.__esModule?c(n,\"default\",{value:t,enumerable:!0}):n,t)),_=t=>s(c({},\"__esModule\",{value:!0}),t);var l=w((k,d)=>{d.exports=_jsx_runtime});var M={};g(M,{default:()=>u,frontmatter:()=>j});var o=y(l()),j=void 0;function a(t){let e={code:\"code\",h1:\"h1\",p:\"p\",...t.components},{EpicVideo:n}=e;return n||v(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.h1,{children:\"Cutoff Default Colors\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/cutoff-default-colors\"}),`\n`,(0,o.jsx)(e.p,{children:\"By extending the theme, we still hace access to all the default colors.\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"While that's very useful for prototyping, in this case we don't want devlopers to start using \",(0,o.jsx)(e.code,{children:\"zinc\"}),\" instead our custom \",(0,o.jsx)(e.code,{children:\"grey\"}),\", or \",(0,o.jsx)(e.code,{children:\"indigo\"}),\" instead of our \",(0,o.jsx)(e.code,{children:\"accent\"}),\".\"]}),`\n`,(0,o.jsx)(e.p,{children:\"Make sure the only colors available in the theme are the custom ones you've added.\"})]})}function u(t={}){let{wrapper:e}=t.components||{};return e?(0,o.jsx)(e,{...t,children:(0,o.jsx)(a,{...t})}):a(t)}function v(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return _(M);})();\n;return Component;",[497],"https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/cutoff-default-colors",{"_9":473},{"_9":476,"_477":500,"_157":158},6012,"https://stackblitz.com/github/epicweb-dev/tailwindcss-color-tokens/tree/main/exercises/02.color-tokens/02.problem.cutoff-default-colors?title=Cutoff+Default+Colors+%28problem%29",{"_20":43,"_119":375,"_451":503,"_22":44,"_24":45,"_453":504,"_468":505,"_471":507,"_474":508,"_479":510,"_232":294,"_234":294,"_9":231,"_491":-5},"02.solution.cutoff-default-colors","var Component=(()=>{var a=Object.create;var s=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var w=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),_=(o,e)=>{for(var t in e)s(o,t,{get:e[t],enumerable:!0})},c=(o,e,t,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!h.call(o,r)&&r!==t&&s(o,r,{get:()=>e[r],enumerable:!(i=m(e,r))||i.enumerable});return o};var j=(o,e,t)=>(t=o!=null?a(x(o)):{},c(e||!o||!o.__esModule?s(t,\"default\",{value:o,enumerable:!0}):t,o)),g=o=>c(s({},\"__esModule\",{value:!0}),o);var f=w((b,d)=>{d.exports=_jsx_runtime});var E={};_(E,{default:()=>l,frontmatter:()=>k});var n=j(f()),k=void 0;function u(o){let e={h1:\"h1\",p:\"p\",...o.components},{EpicVideo:t}=e;return t||C(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Cutoff Default Colors\"}),`\n`,(0,n.jsx)(t,{url:\"https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/cutoff-default-colors/solution\"}),`\n`,(0,n.jsx)(e.p,{children:\"Good stuff \\u2014 less room to make a mess \\u{1F605}\"})]})}function l(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(u,{...o})}):u(o)}function C(o,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+o+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return g(E);})();\n;return Component;",[506],"https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/cutoff-default-colors/solution",{"_9":473},{"_9":476,"_477":509,"_157":158},7012,"https://stackblitz.com/github/epicweb-dev/tailwindcss-color-tokens/tree/main/exercises/02.color-tokens/02.solution.cutoff-default-colors?title=Cutoff+Default+Colors+%28solution%29",{"_234":268,"_257":512,"_231":521},{"_20":47,"_119":377,"_451":513,"_22":48,"_24":49,"_453":514,"_468":515,"_471":517,"_474":518,"_479":520,"_232":294,"_234":268,"_9":257,"_481":51},"03.problem.non-colors-support","var Component=(()=>{var p=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var y=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),k=(r,e)=>{for(var o in e)a(r,o,{get:e[o],enumerable:!0})},l=(r,e,o,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of b(e))!v.call(r,t)&&t!==o&&a(r,t,{get:()=>e[t],enumerable:!(c=u(e,t))||c.enumerable});return r};var f=(r,e,o)=>(o=r!=null?p(m(r)):{},l(e||!r||!r.__esModule?a(o,\"default\",{value:r,enumerable:!0}):o,r)),g=r=>l(a({},\"__esModule\",{value:!0}),r);var i=y((_,s)=>{s.exports=_jsx_runtime});var j={};k(j,{default:()=>h,frontmatter:()=>w});var n=f(i()),w=void 0;function d(r){let e={a:\"a\",code:\"code\",em:\"em\",h1:\"h1\",h2:\"h2\",h3:\"h3\",p:\"p\",pre:\"pre\",span:\"span\",...r.components},{EpicVideo:o}=e;return o||x(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:'\"Non colors\" support'}),`\n`,(0,n.jsx)(o,{url:\"https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/non-colors-support\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"It might look like everything is working properly \\u2014 but with our \",(0,n.jsx)(e.code,{children:\"colors\"}),\" override, we have accidentally removed some functionality.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"For example, try to make the button's background transparent on hover:\"}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"html\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsx)(e.code,{children:(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[\"<\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"a\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:'href=\"#\" className=\"... hover:bg-transparent\">Learn more'}),`\n`]})})}),`\n`,(0,n.jsx)(e.p,{children:\"If you hover this button, you'd expect the background to become... transparent, right?\"}),`\n`,(0,n.jsx)(e.p,{children:\"Womp Womp. It doesn't work.\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"The default colors are more than just \",(0,n.jsx)(e.em,{children:\"colors\"}),\".\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"colors\"}),' object in the Tailwind theme contains a few things beside \"true\" colors.']}),`\n`,(0,n.jsxs)(e.p,{children:[\"Go ahead, have a look at the \",(0,n.jsx)(e.a,{href:\"https://tailwindcss.com/docs/text-color\",children:\"Tailwind docs (text-color, for example)\"}),\" to see what's in there.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Yup. \",(0,n.jsx)(e.code,{children:\"inherit\"}),\", \",(0,n.jsx)(e.code,{children:\"current\"}),\", \",(0,n.jsx)(e.code,{children:\"transparent\"}),\".\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Well, we've removed all three by overriding the \",(0,n.jsx)(e.code,{children:\"colors\"}),\" object.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"And that's why our \",(0,n.jsx)(e.code,{children:\"bg-transparent\"}),\" class has no effect.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Bring these back\"}),`\n`,(0,n.jsx)(e.p,{children:\"Make sure these three key-value pairs are also added to the colors object:\"}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"ts\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[\"{\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"inherit\"}),\": \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"inherit\"}),\"'\",\",\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"transparent\"}),\": \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"transparent\"}),\"'\",\",\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"current\"}),\": \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"currentColor\"}),\"'\",\",\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"}\",`\n`]})]})})]})}function h(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(d,{...r})}):d(r)}function x(r,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+r+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return g(j);})();\n;return Component;",[516],"https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/non-colors-support",{"_9":473},{"_9":476,"_477":519,"_157":158},6013,"https://stackblitz.com/github/epicweb-dev/tailwindcss-color-tokens/tree/main/exercises/02.color-tokens/03.problem.non-colors-support?title=%22Non+colors%22+support+%28problem%29",{"_20":51,"_119":377,"_451":522,"_22":52,"_24":53,"_453":523,"_468":524,"_471":526,"_474":527,"_479":529,"_232":294,"_234":268,"_9":231,"_491":-5},"03.solution.non-colors-support","var Component=(()=>{var l=Object.create;var s=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var x=(e,o)=>()=>(o||e((o={exports:{}}).exports,o),o.exports),g=(e,o)=>{for(var t in o)s(e,t,{get:o[t],enumerable:!0})},c=(e,o,t,i)=>{if(o&&typeof o==\"object\"||typeof o==\"function\")for(let r of m(o))!f.call(e,r)&&r!==t&&s(e,r,{get:()=>o[r],enumerable:!(i=h(o,r))||i.enumerable});return e};var _=(e,o,t)=>(t=e!=null?l(w(e)):{},c(o||!e||!e.__esModule?s(t,\"default\",{value:e,enumerable:!0}):t,e)),j=e=>c(s({},\"__esModule\",{value:!0}),e);var a=x((E,d)=>{d.exports=_jsx_runtime});var k={};g(k,{default:()=>u,frontmatter:()=>v});var n=_(a()),v=void 0;function p(e){let o={h1:\"h1\",p:\"p\",...e.components},{EpicVideo:t}=o;return t||b(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(o.h1,{children:'\"Non colors\" support'}),`\n`,(0,n.jsx)(t,{url:\"https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/non-colors-support/solution\"}),`\n`,(0,n.jsx)(o.p,{children:\"Awesome save \\u2014\\xA0that would have created some sneaky bugs down the road that would get developers scratching their head!\"})]})}function u(e={}){let{wrapper:o}=e.components||{};return o?(0,n.jsx)(o,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}function b(e,o){throw new Error(\"Expected \"+(o?\"component\":\"object\")+\" `\"+e+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return j(k);})();\n;return Component;",[525],"https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/non-colors-support/solution",{"_9":473},{"_9":476,"_477":528,"_157":158},7013,"https://stackblitz.com/github/epicweb-dev/tailwindcss-color-tokens/tree/main/exercises/02.color-tokens/03.solution.non-colors-support?title=%22Non+colors%22+support+%28solution%29",{"_234":285,"_257":531,"_231":540},{"_20":55,"_119":379,"_451":532,"_22":56,"_24":57,"_453":533,"_468":534,"_471":536,"_474":537,"_479":539,"_232":294,"_234":285,"_9":257,"_481":59},"04.problem.semantic-design-tokens","var Component=(()=>{var p=Object.create;var c=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var w=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),f=(o,e)=>{for(var r in e)c(o,r,{get:e[r],enumerable:!0})},l=(o,e,r,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of u(e))!b.call(o,t)&&t!==r&&c(o,t,{get:()=>e[t],enumerable:!(i=g(e,t))||i.enumerable});return o};var k=(o,e,r)=>(r=o!=null?p(m(o)):{},l(e||!o||!o.__esModule?c(r,\"default\",{value:o,enumerable:!0}):r,o)),y=o=>l(c({},\"__esModule\",{value:!0}),o);var a=w((C,s)=>{s.exports=_jsx_runtime});var _={};f(_,{default:()=>h,frontmatter:()=>v});var n=k(a()),v=void 0;function d(o){let e={code:\"code\",em:\"em\",h1:\"h1\",h2:\"h2\",p:\"p\",pre:\"pre\",span:\"span\",strong:\"strong\",...o.components},{EpicVideo:r}=e;return r||x(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Semantic Design Tokens\"}),`\n`,(0,n.jsx)(r,{url:\"https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/semantic-design-tokens\"}),`\n`,(0,n.jsx)(e.p,{children:\"We've got our colors under control.\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Well \\u2014\\xA0actually we still have a problem with the current setup. Nothing is stopping anyone to use the \",(0,n.jsx)(e.code,{children:\"highlight\"}),\" (\",(0,n.jsx)(e.code,{children:\"teal\"}),\") color (meant for background surfaces) on a text element, for example.\"]}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"html\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsx)(e.code,{children:(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[\"<\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"p\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"className\"}),\"=\",'\"',(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"text-teal ...\"}),'\"',\">Special Deal\",`\n`]})})}),`\n`,(0,n.jsx)(\"img\",{src:\"/images/highlight-text-eww.png\"}),`\n`,(0,n.jsx)(e.p,{children:\"Ewwww...\"}),`\n`,(0,n.jsx)(e.p,{children:\"What's thaaaat?\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u{1F605}\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"I don't think the designers wanted the \",(0,n.jsx)(e.code,{children:\"highlight\"}),\" color to be used like that.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Scope colors to specific use cases\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"We can lock down the usage of colors to specific scenarios by leveraging Tailwind's \",(0,n.jsx)(e.code,{children:\"corePlugins\"}),\".\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"colors\"}),\" object makes a color available \",(0,n.jsx)(e.strong,{children:\"everywhere\"}),\".\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"But you can target core plugins like \",(0,n.jsx)(e.code,{children:\"backgroundColor\"}),\" to only allow colors to be used for \",(0,n.jsx)(e.em,{children:\"backgrounds\"}),\".\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Or \",(0,n.jsx)(e.code,{children:\"borderColor\"}),\" for borders, etc.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Translate the Figma file's Semantic Color Tokens\"}),`\n`,(0,n.jsx)(e.p,{children:\"Recreate the semantic tokens you can find in Figma in your Tailwind theme.\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"If you can't access the variables panel in Figma, here's a screenshot of the relevant color \",(0,n.jsx)(e.em,{children:\"mapping\"}),\".\"]}),`\n`,(0,n.jsx)(\"img\",{src:\"/images/semantic-color-tokens.png\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Update the UI to use the new, semantic tokens\"}),`\n`,(0,n.jsx)(e.p,{children:\"Make sure the UI is using the new semantic tokens and still works properly!\"}),`\n`,(0,n.jsx)(e.p,{children:\"You've got this \\u2014 good luck!\"})]})}function h(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(d,{...o})}):d(o)}function x(o,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+o+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return y(_);})();\n;return Component;",[535],"https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/semantic-design-tokens",{"_9":473},{"_9":476,"_477":538,"_157":158},6014,"https://stackblitz.com/github/epicweb-dev/tailwindcss-color-tokens/tree/main/exercises/02.color-tokens/04.problem.semantic-design-tokens?title=Semantic+Design+Tokens+%28problem%29",{"_20":59,"_119":379,"_451":541,"_22":60,"_24":61,"_453":542,"_468":543,"_471":545,"_474":546,"_479":548,"_232":294,"_234":285,"_9":231,"_491":-5},"04.solution.semantic-design-tokens","var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var x=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),w=(n,e)=>{for(var t in e)r(n,t,{get:e[t],enumerable:!0})},c=(n,e,t,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of h(e))!g.call(n,i)&&i!==t&&r(n,i,{get:()=>e[i],enumerable:!(s=u(e,i))||s.enumerable});return n};var _=(n,e,t)=>(t=n!=null?p(f(n)):{},c(e||!n||!n.__esModule?r(t,\"default\",{value:n,enumerable:!0}):t,n)),j=n=>c(r({},\"__esModule\",{value:!0}),n);var a=x((M,d)=>{d.exports=_jsx_runtime});var y={};w(y,{default:()=>m,frontmatter:()=>b});var o=_(a()),b=void 0;function l(n){let e={em:\"em\",h1:\"h1\",p:\"p\",...n.components},{EpicVideo:t}=e;return t||k(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.h1,{children:\"Semantic Design Tokens\"}),`\n`,(0,o.jsx)(t,{url:\"https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/semantic-design-tokens/solution\"}),`\n`,(0,o.jsx)(e.p,{children:\"Going places! Our Tailwind color setup is now much more controlled and rigid.\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"Rigid and controlled are \",(0,o.jsx)(e.em,{children:\"good\"}),\" things if you're setting up an abmitious and themable color system for a project.\"]})]})}function m(n={}){let{wrapper:e}=n.components||{};return e?(0,o.jsx)(e,{...n,children:(0,o.jsx)(l,{...n})}):l(n)}function k(n,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+n+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return j(y);})();\n;return Component;",[544],"https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/semantic-design-tokens/solution",{"_9":473},{"_9":476,"_477":547,"_157":158},7014,"https://stackblitz.com/github/epicweb-dev/tailwindcss-color-tokens/tree/main/exercises/02.color-tokens/04.solution.semantic-design-tokens?title=Semantic+Design+Tokens+%28solution%29",{"_234":233,"_257":550,"_231":559},{"_20":63,"_119":381,"_451":551,"_22":64,"_24":65,"_453":552,"_468":553,"_471":555,"_474":556,"_479":558,"_232":294,"_234":233,"_9":257,"_481":67},"05.problem.broader-scopes","var Component=(()=>{var u=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var w=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),f=(n,e)=>{for(var r in e)c(n,r,{get:e[r],enumerable:!0})},a=(n,e,r,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of g(e))!m.call(n,t)&&t!==r&&c(n,t,{get:()=>e[t],enumerable:!(i=p(e,t))||i.enumerable});return n};var y=(n,e,r)=>(r=n!=null?u(b(n)):{},a(e||!n||!n.__esModule?c(r,\"default\",{value:n,enumerable:!0}):r,n)),v=n=>a(c({},\"__esModule\",{value:!0}),n);var d=w((C,l)=>{l.exports=_jsx_runtime});var j={};f(j,{default:()=>h,frontmatter:()=>k});var o=y(d()),k=void 0;function s(n){let e={a:\"a\",code:\"code\",h1:\"h1\",h2:\"h2\",p:\"p\",pre:\"pre\",span:\"span\",strong:\"strong\",...n.components},{EpicVideo:r}=e;return r||x(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.h1,{children:\"Broader Scopes\"}),`\n`,(0,o.jsx)(r,{url:\"https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/broader-scopes\"}),`\n`,(0,o.jsx)(e.p,{children:\"You know how we accidentally broke background transparency in a previous exercise?\"}),`\n`,(0,o.jsx)(e.p,{children:\"Well, we've broken things again, without meaning to.\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"Here's an example: try make the \",(0,o.jsx)(e.code,{children:\"highlight\"}),\" box have a gradient background fading from \",(0,o.jsx)(e.code,{children:\"highlight\"}),\" to white (\",(0,o.jsx)(e.code,{children:\"bg-neutral\"}),\"):\"]}),`\n`,(0,o.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"html\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,o.jsx)(e.code,{children:(0,o.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[\"<\",(0,o.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\" \",(0,o.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"className\"}),\"=\",'\"',(0,o.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"... from-highlight to-neutral bg-gradient-to-r\"}),'\"',\">...\",`\n`]})})}),`\n`,(0,o.jsxs)(e.p,{children:[\"Uuuuh \\u2014 \",(0,o.jsx)(e.code,{children:\"from-\"}),\" and \",(0,o.jsx)(e.code,{children:\"to-\"}),\" classes only suggest \",(0,o.jsx)(e.code,{children:\"inherit\"}),\", \",(0,o.jsx)(e.code,{children:\"current\"}),\", and \",(0,o.jsx)(e.code,{children:\"transparent\"}),\" as possible values.\"]}),`\n`,(0,o.jsxs)(e.p,{children:[\"Yup. The colors we added to the \",(0,o.jsx)(e.code,{children:\"backgroundColor\"}),\" core plugin are only available for... background colors.\"]}),`\n`,(0,o.jsx)(e.h2,{children:\"Broaden the scope of where colors are allowed\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"Background gradient options are controlled by the \",(0,o.jsx)(e.code,{children:\"gradientColorStops\"}),\" corePlugin. The background colors should probably be added there too.\"]}),`\n`,(0,o.jsxs)(e.p,{children:[\"What about \",(0,o.jsx)(e.code,{children:\"outline\"}),\" or \",(0,o.jsx)(e.code,{children:\"ring\"}),\" utilities? Sounds like they should share the \",(0,o.jsx)(e.code,{children:\"borderColor\"}),\" options, right?\"]}),`\n`,(0,o.jsxs)(e.p,{children:[\"There is a decent amount of \",(0,o.jsx)(e.code,{children:\"color\"}),\"-related \",(0,o.jsx)(e.a,{href:\"https://tailwindcss.com/docs/theme#configuration-reference\",children:\"corePlugins in Tailwind\"}),\". You don't need to add \",(0,o.jsx)(e.strong,{children:\"all\"}),\" of them in this exercise, but add a few.\"]}),`\n`,(0,o.jsx)(e.p,{children:\"And remember this moment \\u2014 because you'll almost inevitably reach a point where some color somewhere doesn't work, because you've accidentally scoped it too narrowly.\"}),`\n`,(0,o.jsx)(e.p,{children:\"\\u{1F4B0} Tip: since you're going to want to share the same color customisations for multiple core plugins, you can create a JS object with the colors to add, and re-use that object multiple times for various corePlugins \\u{1F919}\"})]})}function h(n={}){let{wrapper:e}=n.components||{};return e?(0,o.jsx)(e,{...n,children:(0,o.jsx)(s,{...n})}):s(n)}function x(n,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+n+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return v(j);})();\n;return Component;",[554],"https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/broader-scopes",{"_9":473},{"_9":476,"_477":557,"_157":158},6015,"https://stackblitz.com/github/epicweb-dev/tailwindcss-color-tokens/tree/main/exercises/02.color-tokens/05.problem.broader-scopes?title=Broader+Scopes+%28problem%29",{"_20":67,"_119":381,"_451":560,"_22":68,"_24":69,"_453":561,"_468":562,"_471":564,"_474":565,"_479":567,"_232":294,"_234":233,"_9":231,"_491":-5},"05.solution.broader-scopes","var Component=(()=>{var l=Object.create;var s=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var w=(e,o)=>()=>(o||e((o={exports:{}}).exports,o),o.exports),_=(e,o)=>{for(var t in o)s(e,t,{get:o[t],enumerable:!0})},c=(e,o,t,i)=>{if(o&&typeof o==\"object\"||typeof o==\"function\")for(let r of m(o))!x.call(e,r)&&r!==t&&s(e,r,{get:()=>o[r],enumerable:!(i=f(o,r))||i.enumerable});return e};var g=(e,o,t)=>(t=e!=null?l(h(e)):{},c(o||!e||!e.__esModule?s(t,\"default\",{value:e,enumerable:!0}):t,e)),j=e=>c(s({},\"__esModule\",{value:!0}),e);var a=w((E,d)=>{d.exports=_jsx_runtime});var k={};_(k,{default:()=>p,frontmatter:()=>y});var n=g(a()),y=void 0;function u(e){let o={h1:\"h1\",p:\"p\",...e.components},{EpicVideo:t}=o;return t||b(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(o.h1,{children:\"Broader Scopes\"}),`\n`,(0,n.jsx)(t,{url:\"https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/broader-scopes/solution\"}),`\n`,(0,n.jsx)(o.p,{children:\"Look at you go! Another head-scratching time-saver for your developers \\u2014 or your future self \\u{1F923}\"})]})}function p(e={}){let{wrapper:o}=e.components||{};return o?(0,n.jsx)(o,{...e,children:(0,n.jsx)(u,{...e})}):u(e)}function b(e,o){throw new Error(\"Expected \"+(o?\"component\":\"object\")+\" `\"+e+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return j(k);})();\n;return Component;",[563],"https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/broader-scopes/solution",{"_9":473},{"_9":476,"_477":566,"_157":158},7015,"https://stackblitz.com/github/epicweb-dev/tailwindcss-color-tokens/tree/main/exercises/02.color-tokens/05.solution.broader-scopes?title=Broader+Scopes+%28solution%29",{"_234":242,"_257":569,"_231":578},{"_20":71,"_119":383,"_451":570,"_22":72,"_24":73,"_453":571,"_468":572,"_471":574,"_474":575,"_479":577,"_232":294,"_234":242,"_9":257,"_481":75},"06.problem.css-variables","var Component=(()=>{var b=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var g=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),k=(a,e)=>{for(var l in e)c(a,l,{get:e[l],enumerable:!0})},i=(a,e,l,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of m(e))!v.call(a,o)&&o!==l&&c(a,o,{get:()=>e[o],enumerable:!(r=u(e,o))||r.enumerable});return a};var f=(a,e,l)=>(l=a!=null?b(y(a)):{},i(e||!a||!a.__esModule?c(l,\"default\",{value:a,enumerable:!0}):l,a)),w=a=>i(c({},\"__esModule\",{value:!0}),a);var t=g((T,s)=>{s.exports=_jsx_runtime});var C={};k(C,{default:()=>p,frontmatter:()=>S});var n=f(t()),S=void 0;function d(a){let e={a:\"a\",code:\"code\",em:\"em\",h1:\"h1\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",span:\"span\",strong:\"strong\",...a.components},{EpicVideo:l,InlineFile:r}=e;return l||h(\"EpicVideo\",!0),r||h(\"InlineFile\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"CSS Variables\"}),`\n`,(0,n.jsx)(l,{url:\"https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/css-variables\"}),`\n`,(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"This is a big one. You're going to need to do the following:\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"Convert the \",(0,n.jsx)(e.code,{children:\"HEX\"}),\" colors to \",(0,n.jsx)(e.code,{children:\"HSL\"}),\" or any other color format that supports an \",(0,n.jsx)(e.em,{children:\"alpha channel\"}),\" opacity transparency\"]}),`\n`,(0,n.jsx)(e.li,{children:\"Move the colors from the JS file to the CSS file, defined as CSS variables\"}),`\n`,(0,n.jsx)(e.li,{children:\"Recreate the semantic tokens abstraction as CSS variables\"}),`\n`,(0,n.jsx)(e.li,{children:\"Update the Tailwind config file to consume those CSS variables\"}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"This piece of work requires a \",(0,n.jsx)(e.em,{children:\"certain\"}),\" understanding of CSS variables, so this page contains a \",(0,n.jsx)(e.em,{children:\"certain\"}),\" amount of theory.\"]}),`\n`,(0,n.jsx)(\"callout-success\",{class:\"important\",children:(0,n.jsxs)(e.p,{children:[`If you want to deep dive into multi-theme strategy with CSS variables and the\nTailwind Plugin API, check out the `,(0,n.jsx)(e.a,{href:\"https://protailwind.com/workshops/multi-theme-strategy\",children:`Multi-Theme\nStrategy`}),\" workshop!\"]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"You'll find detailed instructions for this exercise \",(0,n.jsx)(e.a,{href:\"#lets-get-to-work\",children:\"after the theory primer\"}),\".\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:'\"Hardcoded\" vs Swappable Color Classes'}),`\n`,(0,n.jsx)(e.p,{children:\"One of the key reasons we opted to use a semantic naming convention is to detach the color value from the use case.\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"And why did we do that? So that we can \",(0,n.jsx)(e.em,{children:\"change\"}),\" the color value, without departing from the semantic meaning applied to a specific element.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"CSS variables for the win!\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"CSS variables are defined with a two-dash prefix \",(0,n.jsx)(e.code,{children:\"--\"}),\", and consumed with the \",(0,n.jsx)(e.code,{children:\"var()\"}),\" function.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Here\\u2019s an example:\"}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"css\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[\":\",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"root\"}),\" {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"/* CSS var definition */\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"--highlight\"}),\": #00FFE1;\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"}\",`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\".\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"callout\"}),\" {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"/* CSS var consumption */\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0C)\"},children:\"background-color\"}),\": \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"var\"}),\"(\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"--highlight);\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[\"...;\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",children:[\"}\",`\n`]})]})}),`\n`,(0,n.jsx)(e.h2,{children:\"Nested CSS variable scopes\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"A great feature of CSS variables is that they can be \",(0,n.jsx)(e.strong,{children:\"redefined\"}),\" within any CSS selector.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"When doing so, the new value will only take effect within the \",(0,n.jsx)(e.em,{children:\"scope\"}),\" of that selector:\"]}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"css\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[\":\",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"root\"}),\" {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"--highlight\"}),\": #00FFE1;\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"}\",`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\".\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"callout\"}),\" {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0C)\"},children:\"background-color\"}),\": \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"var\"}),\"(\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"--highlight\"}),\");\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"...;\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\"}\",`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",children:[\".\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"callout--neon\"}),\" {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"/* Redefine the value of an existing CSS variable */\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"--highlight\"}),\": #52FF00;\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",children:[\"}\",`\n`]})]})}),`\n`,(0,n.jsx)(e.p,{children:\"With that in place, take the following markup:\"}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"html\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[\"<\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"class\"}),\"=\",'\"',(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"callout\"}),'\"',\">Callout\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"<\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"class\"}),\"=\",'\"',(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"callout callout--neon\"}),'\"',\">Neon callout\",`\n`]})]})}),`\n`,(0,n.jsx)(e.p,{children:\"Here\\u2019s how these two callouts would look like:\"}),`\n`,(0,n.jsxs)(\"div\",{style:{display:\"grid\",gridTemplateColumns:\"1fr 1fr\",gap:\"1rem\"},children:[(0,n.jsx)(\"div\",{style:{background:\"#00FFE1\",padding:\"1.5rem\",fontSize:\"1.3rem\",fontWeight:600},children:(0,n.jsx)(e.p,{children:\"Callout\"})}),(0,n.jsx)(\"div\",{style:{background:\"#52FF00\",padding:\"1.5rem\",fontSize:\"1.3rem\",fontWeight:600},children:(0,n.jsx)(e.p,{children:\"Neon Callout\"})})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The default callout is using the color value defined at the \",(0,n.jsx)(e.code,{children:\":root\"}),\" scope, while the The Neon callout uses the valued \",(0,n.jsx)(e.em,{children:\"scoped\"}),\" to the \",(0,n.jsx)(e.code,{children:\".callout--neon\"}),\" class.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"That's your theming recipe!\"}),`\n`,(0,n.jsx)(e.p,{children:\"This CSS variable scoping is all you need to understand to know how to setup multiple color themes for a project.\"}),`\n`,(0,n.jsx)(e.p,{children:`You can create \\u201Ctheme scope\\u201D selectors, where you redefine these same CSS variables with new values.\nAny HTML element within a given theme scope will get those updated values when reading on of the CSS variables!`}),`\n`,(0,n.jsxs)(e.p,{children:[\"These scopes can be anything: \",(0,n.jsx)(e.code,{children:'data-theme=\"citrus\"'}),\" for a citrus theme, \",(0,n.jsx)(e.code,{children:\".dark\"}),\" or \",(0,n.jsx)(e.code,{children:\"@media (prefers-color-scheme: dark)\"}),\" for dark-mode...\"]}),`\n`,(0,n.jsx)(e.p,{children:\"You get the idea \\u2014\\xA0you can get creative with it!\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Tailwind (v3) Opacity Management\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Let\\u2019s take a look at a \",(0,n.jsx)(e.code,{children:\"background-color\"}),\" class for a default Tailwind CSS v3 color, like \",(0,n.jsx)(e.code,{children:\"bg-indigo-600\"}),\" for example:\"]}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"html\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsx)(e.code,{children:(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[\"<\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"p\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"class\"}),\"=\",'\"',(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"bg-indigo-600\"}),'\"',\">I love this color\",`\n`]})})}),`\n`,(0,n.jsx)(e.p,{children:\"Here\\u2019s the CSS generated for this utility class:\"}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"css\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[\".\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"bg-indigo-600\"}),\" {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"--tw-bg-opacity\"}),\": \",(0,n.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"1\"}),\";\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0C)\"},children:\"background-color\"}),\": \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"rgb\"}),\"(\",(0,n.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"79\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"70\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"229\"}),\" / \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"var\"}),\"(\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"--tw-bg-opacity\"}),\"));\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"}\",`\n`]})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"See that \",(0,n.jsx)(e.code,{children:\"--tw-bg-opacity\"}),\" CSS variable? It\\u2019s being used to compose the opacity into the background color, which is defined as an \",(0,n.jsx)(e.code,{children:\"rgb()\"}),\" color.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"CSS variable composition\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"By default, this opacity variable is set to \",(0,n.jsx)(e.code,{children:\"1\"}),\", or \",(0,n.jsx)(e.strong,{children:\"full opacity\"}),\".\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Let\\u2019s add a background opacity utilty to our paragraph tag:\"}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"html\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsx)(e.code,{children:(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[\"<\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"p\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"class\"}),\"=\",'\"',(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"bg-indigo-600 bg-opacity-50\"}),'\"',\">I love this color\",`\n`]})})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Can you guess what that \",(0,n.jsx)(e.code,{children:\"bg-opacity-50\"}),\" class is doing?\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Here's the answer:\"}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"css\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[\".\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"bg-opacity-50\"}),\" {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"--tw-bg-opacity\"}),\": \",(0,n.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"0.5\"}),\";\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"}\",`\n`]})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"That\\u2019s right. It just redefines the value of the \",(0,n.jsx)(e.code,{children:\"--tw-bg-opacity\"}),\" variable. It doesn\\u2019t apply any CSS property or anything!\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Since the opacity utilities are generated \",(0,n.jsx)(e.em,{children:\"after\"}),\" the color utilities in the CSS file, the value of the \",(0,n.jsx)(e.code,{children:\"--tw-bg-opacity\"}),\" CSS variable is updated to \",(0,n.jsx)(e.code,{children:\"0.5\"}),\".\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"As a result, the background color is now a \",(0,n.jsx)(e.code,{children:\"rgb()\"}),\" color with a \",(0,n.jsx)(e.code,{children:\"0.5\"}),\" \",(0,n.jsx)(e.strong,{children:\"alpha channel\"}),\", or 50% opacity!\"]}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"diff\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[\".bg-indigo-600 {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"-\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\" --tw-bg-opacity: 1;\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"+\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\" --tw-bg-opacity: 0.5;\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\" background-color: rgb(79 70 229 / var(--tw-bg-opacity));\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"}\",`\n`]})]})}),`\n`,(0,n.jsx)(e.p,{children:\"This is some pretty clever stuff, hopefully opening your eyes to what you can do with CSS variable composition.\"}),`\n`,(0,n.jsx)(e.p,{children:\"Tailwind CSS is full of mind bending CSS variable composition tricks.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Let's Get To Work!\"}),`\n`,(0,n.jsx)(e.p,{children:\"Feewww \\u2014\\xA0that was a lot of theory! Let's get our hands dirty now.\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"You'll notice that the main UI has been moved to a \",(0,n.jsx)(r,{file:\"src/components/demo.tsx\",children:(0,n.jsx)(e.code,{children:\"\"})}),\" component.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"It's literally the exact same markup than at the end of the last exercise,\\xA0with an extra wrapper that spreads props.\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"That allows us to pass attributes \\u2014 like \",(0,n.jsx)(e.code,{children:\"className\"}),\" or \",(0,n.jsx)(e.code,{children:\"data-*\"}),\" attributes \\u2014 to the component.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Here's what you need to do:\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"1. Convert the \",(0,n.jsx)(e.code,{children:\"HEX\"}),\" colors to \",(0,n.jsx)(e.code,{children:\"HSL\"}),\" (or other opacity-aware color format)\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"We need any other color format that supports an \",(0,n.jsx)(e.em,{children:\"alpha channel\"}),\" opacity transparency. You can use a vscode extension or ask AI to help you with that :)\"]}),`\n`,(0,n.jsx)(\"callout-warning\",{class:\"important\",children:(0,n.jsxs)(e.p,{children:[`To make this more complicated, you only need to define the separate channels\nfor the color \\u2014 not the color itself. Tailwind will `,(0,n.jsx)(e.a,{href:\"https://tailwindcss.com/docs/customizing-colors#using-css-variables\",children:`handle the alpha\nchannel`}),`\nmanually.`]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"If you're using \",(0,n.jsx)(e.code,{children:\"HSL\"}),\", you literally want to store an \",(0,n.jsx)(e.code,{children:\"${H} ${S} ${L}\"}),\" string, not the \",(0,n.jsx)(e.code,{children:\"HSL\"}),\" color.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Something like \",(0,n.jsx)(e.code,{children:\"30 100% 50%\"}),\".\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"2. Move the colors from the JS file to the CSS file, defined as CSS variables.\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Do this at the \",(0,n.jsx)(e.code,{children:\":root\"}),\" scope, in an \",(0,n.jsx)(e.code,{children:\"@layer base {}\"}),\" block.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"You can name the variables anything you like \\u2014\\xA0but if you need a suggestion, go with this:\"}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"css\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[\"@\",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"layer\"}),\" base {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t:\",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"root\"}),\" {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"--color-teal\"}),\": YOUR_COLOR_HERE;\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"--color-grey-0\"}),\": YOUR_COLOR_HERE;\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"/* ... */\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"\t}\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"}\",`\n`]})]})}),`\n`,(0,n.jsx)(e.h3,{children:\"3. Recreate the semantic tokens abstraction as CSS variables\"}),`\n`,(0,n.jsx)(e.p,{children:'You need to port over the intentional \"mapping\" of the color tokens to semantic tokens to the CSS file, using CSS variables.'}),`\n`,(0,n.jsxs)(e.p,{children:[\"Here's an example that maps the \",(0,n.jsx)(e.code,{children:\"neutral\"}),\" semantic color for the \",(0,n.jsx)(e.code,{children:\"backgroundColor\"}),\" core plugin to the actual \",(0,n.jsx)(e.code,{children:\"grey-0\"}),\" color:\"]}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"css\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[\"@\",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"layer\"}),\" base {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t:\",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"root\"}),\" {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"--color-bg-neutral\"}),\": \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"var\"}),\"(\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"--color-grey-0\"}),\");\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t}\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"}\",`\n`]})]})}),`\n`,(0,n.jsx)(e.h3,{children:\"4. Update the Tailwind config file to consume those CSS variables\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Finally, you need to update the \",(0,n.jsx)(e.code,{children:\"backroundColors\"}),\", \",(0,n.jsx)(e.code,{children:\"borderColors\"}),\" and \",(0,n.jsx)(e.code,{children:\"textColors\"}),\" objects used in the \",(0,n.jsx)(e.code,{children:\"tailwind.config.ts\"}),\" file to consume the CSS variables you've defined.\"]}),`\n`,(0,n.jsx)(e.h3,{children:'5. Test the \"swappability\" of the new color tokens!'}),`\n`,(0,n.jsx)(e.p,{children:\"Whoaaa \\u2014 this was a lot. We just want to verify that this was actually useful.\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In \",(0,n.jsx)(r,{file:\"src/App.tsx\"}),\", add a second \",(0,n.jsx)(e.code,{children:\"\"}),\" component, and try to change the value of a CSS variable with an inline \",(0,n.jsx)(e.code,{children:\"style\"}),\" attribute:\"]}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"diff\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[\"<>\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\" \",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"+\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\" \"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\",`\n`]})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"This should set the value odf the \",(0,n.jsx)(e.code,{children:\"--color-bg-subtle\"}),\" CSS variable to a the \",(0,n.jsx)(e.code,{children:\"hsl(0 0% 19%)\"}),\" color \\u2014 which is technically the \",(0,n.jsx)(e.code,{children:\"grey-[80]\"}),\" color.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"As a Result, you should see the second \",(0,n.jsx)(e.code,{children:\"\"}),\" component render with a dark grey background color!\"]}),`\n`,(0,n.jsx)(\"img\",{src:\"/images/dark-mode.png\",alt:\"screenshot of a light and dark version of the demo component\"})]})}function p(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,{...a,children:(0,n.jsx)(d,{...a})}):d(a)}function h(a,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+a+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return w(C);})();\n;return Component;",[573],"https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/css-variables",{"_9":473},{"_9":476,"_477":576,"_157":158},6016,"https://stackblitz.com/github/epicweb-dev/tailwindcss-color-tokens/tree/main/exercises/02.color-tokens/06.problem.css-variables?title=CSS+Variables+%28problem%29",{"_20":75,"_119":383,"_451":579,"_22":76,"_24":77,"_453":580,"_468":581,"_471":583,"_474":584,"_479":586,"_232":294,"_234":242,"_9":231,"_491":-5},"06.solution.css-variables","var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var g=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),x=(e,t)=>{for(var o in t)i(e,o,{get:t[o],enumerable:!0})},c=(e,t,o,s)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of w(t))!h.call(e,r)&&r!==o&&i(e,r,{get:()=>t[r],enumerable:!(s=m(t,r))||s.enumerable});return e};var _=(e,t,o)=>(o=e!=null?p(f(e)):{},c(t||!e||!e.__esModule?i(o,\"default\",{value:e,enumerable:!0}):o,e)),b=e=>c(i({},\"__esModule\",{value:!0}),e);var a=g((C,d)=>{d.exports=_jsx_runtime});var k={};x(k,{default:()=>u,frontmatter:()=>j});var n=_(a()),j=void 0;function l(e){let t={h1:\"h1\",p:\"p\",strong:\"strong\",...e.components},{EpicVideo:o}=t;return o||y(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h1,{children:\"CSS Variables\"}),`\n`,(0,n.jsx)(o,{url:\"https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/css-variables/solution\"}),`\n`,(0,n.jsx)(t.p,{children:\"Fewwwwww.\"}),`\n`,(0,n.jsxs)(t.p,{children:[\"Congratulations \\u2014 you've just done your first (but GIANT) step towards building support for \",(0,n.jsx)(t.strong,{children:\"dark mode\"}),\" and \",(0,n.jsx)(t.strong,{children:\"multiple color themes\"}),\" in your application!\"]})]})}function u(e={}){let{wrapper:t}=e.components||{};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(l,{...e})}):l(e)}function y(e,t){throw new Error(\"Expected \"+(t?\"component\":\"object\")+\" `\"+e+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return b(k);})();\n;return Component;",[582],"https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/css-variables/solution",{"_9":473},{"_9":476,"_477":585,"_157":158},7016,"https://stackblitz.com/github/epicweb-dev/tailwindcss-color-tokens/tree/main/exercises/02.color-tokens/06.solution.css-variables?title=CSS+Variables+%28solution%29",{"_234":385,"_257":588,"_231":597},{"_20":79,"_119":386,"_451":589,"_22":80,"_24":81,"_453":590,"_468":591,"_471":593,"_474":594,"_479":596,"_232":294,"_234":385,"_9":257,"_481":83},"07.problem.dark-mode","var Component=(()=>{var p=Object.create;var o=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var k=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),f=(r,e)=>{for(var l in e)o(r,l,{get:e[l],enumerable:!0})},t=(r,e,l,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let d of u(e))!y.call(r,d)&&d!==l&&o(r,d,{get:()=>e[d],enumerable:!(c=m(e,d))||c.enumerable});return r};var v=(r,e,l)=>(l=r!=null?p(g(r)):{},t(e||!r||!r.__esModule?o(l,\"default\",{value:r,enumerable:!0}):l,r)),w=r=>t(o({},\"__esModule\",{value:!0}),r);var i=k((M,a)=>{a.exports=_jsx_runtime});var x={};f(x,{default:()=>b,frontmatter:()=>N});var n=v(i()),N=void 0;function s(r){let e={code:\"code\",h1:\"h1\",h2:\"h2\",h3:\"h3\",p:\"p\",pre:\"pre\",span:\"span\",strong:\"strong\",table:\"table\",tbody:\"tbody\",td:\"td\",th:\"th\",thead:\"thead\",tr:\"tr\",...r.components},{EpicVideo:l,InlineFile:c}=e;return l||h(\"EpicVideo\",!0),c||h(\"InlineFile\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Dark Mode\"}),`\n`,(0,n.jsx)(l,{url:\"https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/dark-mode\"}),`\n`,(0,n.jsx)(e.p,{children:`You've seen that you can change the color values \"on the fly\" like so:`}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsx)(e.code,{children:(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[\"<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Demo\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"style\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),\"{ '--color-bg-subtle': '0 0% 19%' }} />\",`\n`]})})}),`\n`,(0,n.jsx)(e.p,{children:\"But you don't want to be passing style attributes everytime you want to do that.\"}),`\n`,(0,n.jsx)(e.p,{children:`Instead, you're going to leverage the \"theme scopes\" concept you have learned about in previous exercises.`}),`\n`,(0,n.jsx)(e.h2,{children:\"Dark Mode Support\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this exercise, you're actually going to add support for a fully functional \",(0,n.jsx)(e.strong,{children:\"dark mode\"}),\" implementation.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"And, thanks to the hard work from the previous exercises, this is going to be incredibly easy.\"}),`\n`,(0,n.jsxs)(e.h3,{children:[\"1. Enable the \",(0,n.jsx)(e.code,{children:\"darkMode\"}),' \"class\" strategy in the Tailwind config']}),`\n`,(0,n.jsxs)(e.p,{children:[\"In the \",(0,n.jsx)(c,{file:\"tailwind.config.ts\"}),\" file, add a \",(0,n.jsx)(e.code,{children:\"darkMode: 'class'\"}),\" option to the Tailwind config.\"]}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"diff\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[\"export default {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\tcontent: [...],\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"+\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"\tdarkMode: 'class',\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\ttheme: {...}\",`\n`]})]})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"2. Add the \",(0,n.jsx)(e.code,{children:\"dark\"}),\" class to the second \",(0,n.jsx)(e.code,{children:\"\"}),\" component instance\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Replace the inline style attribute with a \",(0,n.jsx)(e.code,{children:\"className\"}),\" attribute that includes the \",(0,n.jsx)(e.code,{children:\"dark\"}),\" class.\"]}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"diff\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[\"<>\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\" \",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"-\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\" \"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"+\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:' '}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\",`\n`]})]})}),`\n`,(0,n.jsx)(e.h3,{children:\"3. Redefine the semantic color token CSS variables\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In the CSS file's \",(0,n.jsx)(e.code,{children:\"base\"}),\" layer block, below the \",(0,n.jsx)(e.code,{children:\":root\"}),\" selector scope, add a new \",(0,n.jsx)(e.code,{children:\".dark\"}),\" selector.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"In there, redefine the semantic color tokens by pointing them to different raw color variables.\"}),`\n`,(0,n.jsx)(e.p,{children:\"Here's an example:\"}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"css\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[\"@\",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"layer\"}),\" base {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t:\",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"root\"}),\" {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:'/* \"base\" raw color and semantic color tokens */'}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t}\",`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"\t.\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"dark\"}),\" {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"\t\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"--color-bg-subtle\"}),\": \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"var\"}),\"(\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"--color-grey-80);\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\"\t\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"/* ... */\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[\"\t}\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",children:[\"}\",`\n`]})]})}),`\n`,(0,n.jsx)(e.p,{children:\"The Figma file does not show the dark mode values, but here's a suggestion of how you could map the colors:\"}),`\n`,(0,n.jsxs)(e.table,{children:[(0,n.jsx)(e.thead,{children:(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.th,{children:\"Semantic Token\"}),(0,n.jsx)(e.th,{children:\"Dark Mode Mapping\"})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"--color-bg-highlight\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"173 100% 30%;\"})})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"--color-bg-accent\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"263 100% 70%;\"})})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"--color-bg-neutral\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"grey-100\"})})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"--color-bg-neutral-inverted\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"grey-0\"})})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"--color-bg-subtle\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"grey-80\"})})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"--color-bg-bold\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"grey-5\"})})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"--color-border-bold\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"grey-40\"})})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"--color-border-subtle\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"grey-60\"})})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"--color-border-muted\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"grey-80\"})})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"--color-text-copy\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"grey-0\"})})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"--color-text-subtle\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"grey-40\"})})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"--color-text-muted\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"grey-60\"})})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"--color-text-inverted\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"grey-90\"})})]})]})]}),`\n`,(0,n.jsx)(\"callout-info\",{children:(0,n.jsxs)(e.p,{children:[\"Notice that the \",(0,n.jsx)(e.code,{children:\"highlight\"}),\" and \",(0,n.jsx)(e.code,{children:\"accent\"}),` colors are not mapped to an existing\ncolor token. None of the existing raw color values really work in dark mode,\nso we've defined new `,(0,n.jsx)(e.code,{children:\"H\"}),\" \",(0,n.jsx)(e.code,{children:\"S\"}),\" \",(0,n.jsx)(e.code,{children:\"L\"}),` channels. Those are the same colors with a\nmodified `,(0,n.jsx)(e.code,{children:\"Lightness\"}),\" for better contrast in dark mode.\"]})}),`\n`,(0,n.jsx)(e.h2,{children:\"Watch it come together\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"As you redefine the semantic color tokens for \",(0,n.jsx)(e.code,{children:\"dark\"}),\" mode, you should see the UI of the second \",(0,n.jsx)(e.code,{children:\"\"}),\" component come together progressively!\"]}),`\n`,(0,n.jsx)(e.p,{children:\"This should be pretty satisfying.\"})]})}function b(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(s,{...r})}):s(r)}function h(r,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+r+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return w(x);})();\n;return Component;",[592],"https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/dark-mode",{"_9":473},{"_9":476,"_477":595,"_157":158},6017,"https://stackblitz.com/github/epicweb-dev/tailwindcss-color-tokens/tree/main/exercises/02.color-tokens/07.problem.dark-mode?title=Dark+Mode+%28problem%29",{"_20":83,"_119":386,"_451":598,"_22":84,"_24":85,"_453":599,"_468":600,"_471":602,"_474":603,"_479":605,"_232":294,"_234":385,"_9":231,"_491":-5},"07.solution.dark-mode","var Component=(()=>{var l=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var k=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),x=(n,e)=>{for(var t in e)i(n,t,{get:e[t],enumerable:!0})},c=(n,e,t,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of h(e))!w.call(n,r)&&r!==t&&i(n,r,{get:()=>e[r],enumerable:!(d=u(e,r))||d.enumerable});return n};var _=(n,e,t)=>(t=n!=null?l(f(n)):{},c(e||!n||!n.__esModule?i(t,\"default\",{value:n,enumerable:!0}):t,n)),j=n=>c(i({},\"__esModule\",{value:!0}),n);var a=k((b,s)=>{s.exports=_jsx_runtime});var M={};x(M,{default:()=>m,frontmatter:()=>g});var o=_(a()),g=void 0;function p(n){let e={h1:\"h1\",p:\"p\",...n.components},{EpicVideo:t}=e;return t||y(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.h1,{children:\"Dark Mode\"}),`\n`,(0,o.jsx)(t,{url:\"https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/dark-mode/solution\"}),`\n`,(0,o.jsx)(e.p,{children:\"Good work!\"}),`\n`,(0,o.jsx)(e.p,{children:\"You now know how to implement dark mode in any project.\"}),`\n`,(0,o.jsx)(e.p,{children:\"And what a difference dark mode support makes. It's like... night and day \\u{1F941}\"})]})}function m(n={}){let{wrapper:e}=n.components||{};return e?(0,o.jsx)(e,{...n,children:(0,o.jsx)(p,{...n})}):p(n)}function y(n,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+n+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return j(M);})();\n;return Component;",[601],"https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/dark-mode/solution",{"_9":473},{"_9":476,"_477":604,"_157":158},7017,"https://stackblitz.com/github/epicweb-dev/tailwindcss-color-tokens/tree/main/exercises/02.color-tokens/07.solution.dark-mode?title=Dark+Mode+%28solution%29",{"_234":388,"_257":607,"_231":616},{"_20":87,"_119":389,"_451":608,"_22":88,"_24":89,"_453":609,"_468":610,"_471":612,"_474":613,"_479":615,"_232":294,"_234":388,"_9":257,"_481":91},"08.problem.multi-theme","var Component=(()=>{var u=Object.create;var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var k=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),f=(r,e)=>{for(var t in e)c(r,t,{get:e[t],enumerable:!0})},o=(r,e,t,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of b(e))!y.call(r,a)&&a!==t&&c(r,a,{get:()=>e[a],enumerable:!(l=m(e,a))||l.enumerable});return r};var v=(r,e,t)=>(t=r!=null?u(g(r)):{},o(e||!r||!r.__esModule?c(t,\"default\",{value:r,enumerable:!0}):t,r)),w=r=>o(c({},\"__esModule\",{value:!0}),r);var i=k((C,d)=>{d.exports=_jsx_runtime});var N={};f(N,{default:()=>p,frontmatter:()=>x});var n=v(i()),x=void 0;function s(r){let e={code:\"code\",h1:\"h1\",h2:\"h2\",h3:\"h3\",p:\"p\",pre:\"pre\",span:\"span\",strong:\"strong\",table:\"table\",tbody:\"tbody\",td:\"td\",th:\"th\",thead:\"thead\",tr:\"tr\",...r.components},{EpicVideo:t,InlineFile:l}=e;return t||h(\"EpicVideo\",!0),l||h(\"InlineFile\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Multi-Theme Support\"}),`\n`,(0,n.jsx)(t,{url:\"https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/multi-theme\"}),`\n`,(0,n.jsx)(e.p,{children:\"Let's use the exact same approach to add support for multiple color themes \\u2014 independent of dark mode.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Add a new theme scope\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"You're going to add a \",(0,n.jsx)(e.code,{children:\"citrus\"}),\" theme to the project.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"This theme needs a scope selector, just like you did for \",(0,n.jsx)(e.code,{children:\"dark\"}),\" mode.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"You could use a \",(0,n.jsx)(e.code,{children:\".citrus\"}),\" class \\u2014 but there's something nice about using something other than a class selector for a theme toggle.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"How about a \",(0,n.jsx)(e.code,{children:\"data-theme\"}),\" attribute? That's pretty explicit, right?\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"1. Create a new theme scope selector in CSS\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In the \",(0,n.jsx)(l,{file:\"src/index.css\"}),\" file, add a \",(0,n.jsx)(e.code,{children:'[data-theme=\"citrus\"]'}),\" selector.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"2. Redefine semantic color tokens within that scope\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"You could go crazy and redefine all the color tokens within the \",(0,n.jsx)(e.code,{children:'data-theme=\"citrus\"'}),\" scope \\u2014\\xA0but for the sake of this exercise, only redefine the \",(0,n.jsx)(e.code,{children:\"hightlight\"}),\" and \",(0,n.jsx)(e.code,{children:\"accent\"}),\" colors.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Use what you want \\u2014\\xA0but here are two yellow and orange \",(0,n.jsx)(e.code,{children:\"HSL\"}),' color suggestions that feel pretty \"citrus-ey\":']}),`\n`,(0,n.jsxs)(e.table,{children:[(0,n.jsx)(e.thead,{children:(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.th,{children:\"Color\"}),(0,n.jsx)(e.th,{children:\"HSL value\"})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"highlight\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"hsl(60 100% 50%)\"})})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"accent\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"hsl(30 100% 50%)\"})})]})]})]}),`\n`,(0,n.jsxs)(e.h3,{children:[\"3. Add \",(0,n.jsx)(e.code,{children:\"dark\"}),' support for your \"citrus\" theme']}),`\n`,(0,n.jsxs)(e.p,{children:[\"Make sure you also redefine \",(0,n.jsx)(e.code,{children:\"highlight\"}),\" and \",(0,n.jsx)(e.code,{children:\"accent\"}),\" colors for the scenario where both the \",(0,n.jsx)(e.code,{children:\"dark\"}),\" mode and \",(0,n.jsx)(e.code,{children:\"citrus\"}),\" theme are active:\"]}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"css\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[\"[\",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"data-theme='citrus'].dark {\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"/* Dark citrus colors */\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"}\",`\n`]})]})}),`\n`,(0,n.jsx)(\"callout-info\",{children:(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Tip\"}),\": Keeping the same color hue (\",(0,n.jsx)(e.code,{children:\"H\"}),\") but changing the lightness (\",(0,n.jsx)(e.code,{children:\"L\"}),`)\nworks pretty well to adjust vibrant colors for dark mode.`]})}),`\n`,(0,n.jsx)(\"callout-warning\",{children:(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Warning\"}),\": Note that this selector above will only work if the \",(0,n.jsx)(e.code,{children:\"dark\"}),` class\nand the `,(0,n.jsx)(e.code,{children:'data-theme=\"citrus\"'}),\" attribute are applied to the \",(0,n.jsx)(e.strong,{children:`same HTML\nelement`}),\".\"]})}),`\n`,(0,n.jsx)(e.h2,{children:\"Nesting themes and dark mode toggles\"}),`\n`,(0,n.jsx)(e.p,{children:\"If you want to be able to nest and compose combinations of themes and dark mode, consider adding a few parent/child selector combinations:\"}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"css\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"/* same element */\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"[\",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"data-theme\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"citrus\"}),\"'\",\"].\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"dark\"}),\",\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"/* parent <--> child */\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"[\",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"data-theme\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"citrus\"}),\"'\",\"] .\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"dark\"}),\",\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"/* reverse relationship */\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\".\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"dark\"}),\" [\",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"data-theme\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"citrus\"}),\"'\",\"] {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"/* Dark citrus colors */\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\"}\",`\n`]})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"This will allow you to make any part of your HTML tree dark or light, citrus-themed or not, \",(0,n.jsx)(e.strong,{children:\"independently of anything else\"}),\" that has been set on parent elements.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"And that's the superpower and flexibility of CSS variable scopes \\u{1F525}\"})]})}function p(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(s,{...r})}):s(r)}function h(r,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+r+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return w(N);})();\n;return Component;",[611],"https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/multi-theme",{"_9":473},{"_9":476,"_477":614,"_157":158},6018,"https://stackblitz.com/github/epicweb-dev/tailwindcss-color-tokens/tree/main/exercises/02.color-tokens/08.problem.multi-theme?title=Multi-Theme+Support+%28problem%29",{"_20":91,"_119":389,"_451":617,"_22":92,"_24":93,"_453":618,"_468":619,"_471":621,"_474":622,"_479":624,"_232":294,"_234":388,"_9":231,"_491":-5},"08.solution.multi-theme","var Component=(()=>{var a=Object.create;var i=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),w=(t,e)=>{for(var n in e)i(t,n,{get:e[n],enumerable:!0})},s=(t,e,n,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!x.call(t,r)&&r!==n&&i(t,r,{get:()=>e[r],enumerable:!(c=h(e,r))||c.enumerable});return t};var y=(t,e,n)=>(n=t!=null?a(f(t)):{},s(e||!t||!t.__esModule?i(n,\"default\",{value:t,enumerable:!0}):n,t)),_=t=>s(i({},\"__esModule\",{value:!0}),t);var l=g((E,d)=>{d.exports=_jsx_runtime});var M={};w(M,{default:()=>p,frontmatter:()=>j});var o=y(l()),j=void 0;function u(t){let e={h1:\"h1\",p:\"p\",strong:\"strong\",...t.components},{EpicVideo:n}=e;return n||b(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.h1,{children:\"Multi-Theme Support\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/multi-theme/solution\"}),`\n`,(0,o.jsx)(e.p,{children:\"Nicely done \\u2014\\xA0You're an absolute legend!\"}),`\n`,(0,o.jsx)(e.p,{children:\"With this technique, you can create 3, 5 or even 100 different, dark-mode-capable color themes for your project \\u{1F92F}\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"That's pretty cool, \",(0,o.jsx)(e.strong,{children:\"seriously\"}),\".\"]})]})}function p(t={}){let{wrapper:e}=t.components||{};return e?(0,o.jsx)(e,{...t,children:(0,o.jsx)(u,{...t})}):u(t)}function b(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return _(M);})();\n;return Component;",[620],"https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/multi-theme/solution",{"_9":473},{"_9":476,"_477":623,"_157":158},7018,"https://stackblitz.com/github/epicweb-dev/tailwindcss-color-tokens/tree/main/exercises/02.color-tokens/08.solution.multi-theme?title=Multi-Theme+Support+%28solution%29",[626,630,634,638,642,646,650,654],{"_20":31,"_119":373,"_451":466,"_22":32,"_24":33,"_453":467,"_468":627,"_471":628,"_474":629,"_479":480,"_232":294,"_234":258,"_9":257,"_481":35},[470],{"_9":473},{"_9":476,"_477":478,"_157":158},{"_20":39,"_119":375,"_451":494,"_22":40,"_24":41,"_453":495,"_468":631,"_471":632,"_474":633,"_479":501,"_232":294,"_234":294,"_9":257,"_481":43},[497],{"_9":473},{"_9":476,"_477":500,"_157":158},{"_20":47,"_119":377,"_451":513,"_22":48,"_24":49,"_453":514,"_468":635,"_471":636,"_474":637,"_479":520,"_232":294,"_234":268,"_9":257,"_481":51},[516],{"_9":473},{"_9":476,"_477":519,"_157":158},{"_20":55,"_119":379,"_451":532,"_22":56,"_24":57,"_453":533,"_468":639,"_471":640,"_474":641,"_479":539,"_232":294,"_234":285,"_9":257,"_481":59},[535],{"_9":473},{"_9":476,"_477":538,"_157":158},{"_20":63,"_119":381,"_451":551,"_22":64,"_24":65,"_453":552,"_468":643,"_471":644,"_474":645,"_479":558,"_232":294,"_234":233,"_9":257,"_481":67},[554],{"_9":473},{"_9":476,"_477":557,"_157":158},{"_20":71,"_119":383,"_451":570,"_22":72,"_24":73,"_453":571,"_468":647,"_471":648,"_474":649,"_479":577,"_232":294,"_234":242,"_9":257,"_481":75},[573],{"_9":473},{"_9":476,"_477":576,"_157":158},{"_20":79,"_119":386,"_451":589,"_22":80,"_24":81,"_453":590,"_468":651,"_471":652,"_474":653,"_479":596,"_232":294,"_234":385,"_9":257,"_481":83},[592],{"_9":473},{"_9":476,"_477":595,"_157":158},{"_20":87,"_119":389,"_451":608,"_22":88,"_24":89,"_453":609,"_468":655,"_471":656,"_474":657,"_479":615,"_232":294,"_234":388,"_9":257,"_481":91},[611],{"_9":473},{"_9":476,"_477":614,"_157":158},[659,663,667,671,675,679,683,687],{"_20":35,"_119":373,"_451":483,"_22":36,"_24":37,"_453":484,"_468":660,"_471":661,"_474":662,"_479":490,"_232":294,"_234":258,"_9":231,"_491":-5},[486],{"_9":473},{"_9":476,"_477":489,"_157":158},{"_20":43,"_119":375,"_451":503,"_22":44,"_24":45,"_453":504,"_468":664,"_471":665,"_474":666,"_479":510,"_232":294,"_234":294,"_9":231,"_491":-5},[506],{"_9":473},{"_9":476,"_477":509,"_157":158},{"_20":51,"_119":377,"_451":522,"_22":52,"_24":53,"_453":523,"_468":668,"_471":669,"_474":670,"_479":529,"_232":294,"_234":268,"_9":231,"_491":-5},[525],{"_9":473},{"_9":476,"_477":528,"_157":158},{"_20":59,"_119":379,"_451":541,"_22":60,"_24":61,"_453":542,"_468":672,"_471":673,"_474":674,"_479":548,"_232":294,"_234":285,"_9":231,"_491":-5},[544],{"_9":473},{"_9":476,"_477":547,"_157":158},{"_20":67,"_119":381,"_451":560,"_22":68,"_24":69,"_453":561,"_468":676,"_471":677,"_474":678,"_479":567,"_232":294,"_234":233,"_9":231,"_491":-5},[563],{"_9":473},{"_9":476,"_477":566,"_157":158},{"_20":75,"_119":383,"_451":579,"_22":76,"_24":77,"_453":580,"_468":680,"_471":681,"_474":682,"_479":586,"_232":294,"_234":242,"_9":231,"_491":-5},[582],{"_9":473},{"_9":476,"_477":585,"_157":158},{"_20":83,"_119":386,"_451":598,"_22":84,"_24":85,"_453":599,"_468":684,"_471":685,"_474":686,"_479":605,"_232":294,"_234":385,"_9":231,"_491":-5},[601],{"_9":473},{"_9":476,"_477":604,"_157":158},{"_20":91,"_119":389,"_451":617,"_22":92,"_24":93,"_453":618,"_468":688,"_471":689,"_474":690,"_479":624,"_232":294,"_234":388,"_9":231,"_491":-5},[620],{"_9":473},{"_9":476,"_477":623,"_157":158},"exerciseReadme",{"_693":694,"_24":695},"file","/myapp/workshop-content/exercises/02.color-tokens/README.mdx","exercises/02.color-tokens/README.mdx","exerciseTitle","firstStep","firstType","epicVideoInfosPromise",["P",700],"actionData","errors"]