[{"_1":2,"_617":-5,"_618":-5},"loaderData",{"_3":4,"_288":289,"_360":361,"_616":-5},"root",{"_5":6,"_11":-5,"_12":13,"_14":-5,"_15":16,"_17":18,"_110":111,"_153":113,"_154":115,"_116":117,"_155":156,"_166":167,"_190":-5,"_191":-5,"_192":193},"userId",{"_7":8,"_9":10},"id","nas883v9u5jh6eg8a4pjbr8j","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","workshopConfig",{"_112":113,"_114":115,"_116":117,"_123":124,"_136":137,"_138":139,"_140":141,"_142":143,"_148":149,"_151":152},"title","Tailwind CSS Color Tokens 🎨","subtitle","Semantic, themable color design tokens in Tailwind CSS","instructor",{"_20":118,"_119":120,"_121":122},"Simon Vrachliotis","avatar","/images/instructor.png","𝕏","simonswiss","product",{"_125":126,"_127":128,"_129":130,"_131":132,"_133":134,"_135":-7},"host","www.epicweb.dev","displayName","EpicWeb.dev","displayNameShort","Epic Web","logo","/logo.svg","discordChannelId","1161045224907341972","slug","onboardingVideo","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",{"_144":145,"_146":147},"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",{"_150":16},"enabled","initialRoute","/","workshopTitle","workshopSubtitle","ENV",{"_157":158,"_159":160,"_161":139,"_162":141,"_163":16,"_164":165},"MODE","production","EPICSHOP_CONTEXT_CWD","/myapp/workshop-content","EPICSHOP_GITHUB_REPO","EPICSHOP_GITHUB_ROOT","EPICSHOP_DEPLOYED","EPICSHOP_APP_VERSION","5.7.1","requestInfo",{"_168":169,"_170":171,"_172":173,"_174":175,"_176":175,"_177":178,"_185":186,"_187":188,"_189":152},"protocol","http:","hostname","tailwindcss-color-tokens.epicweb.dev","port","","origin","http://tailwindcss-color-tokens.epicweb.dev","domain","hints",{"_179":180,"_181":182,"_183":184},"theme","light","timeZone","UTC","reducedMotion","no-preference","path","/exercise/02","session",{"_179":-5},"separator","toast","confettiId","presence",{"_194":195},"users",[196,214,223,232,239,245,250,257,263,267,275,281,284],{"_7":197,"_198":16,"_199":200,"_201":202,"_20":203,"_204":205},"e01506b2-3ac3-4074-a9ed-12ba4fb3d3f5","hasAccess","imageUrlSmall","https://www.gravatar.com/avatar/04c1854f5b1f5f611eb2e31f6ed54399?size=64&default=identicon","imageUrlLarge","https://www.gravatar.com/avatar/04c1854f5b1f5f611eb2e31f6ed54399?size=512&default=identicon","Bartosz Tobiński","location",{"_153":206,"_174":207,"_146":208},"React Fundamentals ⚛","http://localhost:5639",{"_9":209,"_210":211,"_212":213},"problem","exerciseNumber",10,"stepNumber",2,{"_7":215,"_198":16,"_199":216,"_201":217,"_20":218,"_204":219},"d80131ac-8551-4c02-9dd2-543c1d88f9d2","https://avatars.githubusercontent.com/u/1212576?v=4&size=64","https://avatars.githubusercontent.com/u/1212576?v=4&size=512","WING C YIP",{"_153":220,"_174":207,"_146":221},"React Performance ⚡",{"_210":222},4,{"_7":224,"_198":16,"_199":225,"_201":226,"_20":227,"_204":228},"d32b3566-dc97-410a-bf9f-7e482e2bfa2a","https://cdn.discordapp.com/avatars/696097699610624150/d2daedd90ad4027e253a4b53198fb3ff.png?size=64","https://cdn.discordapp.com/avatars/696097699610624150/d2daedd90ad4027e253a4b53198fb3ff.png?size=512","Daniel Dujmovic",{"_153":206,"_174":207,"_146":229},{"_9":209,"_210":230,"_212":231},5,3,{"_7":233,"_198":16,"_199":234,"_201":235,"_20":236,"_204":237},"e8cb17ed-de12-4160-8ed4-157d3d2a91c3","https://www.gravatar.com/avatar/f6b024dc484ab9d9cc17e343fec6c3fd?size=64&default=identicon","https://www.gravatar.com/avatar/f6b024dc484ab9d9cc17e343fec6c3fd?size=512&default=identicon","Ryan Morrow",{"_153":206,"_174":207,"_146":238},{"_210":222},{"_7":240,"_204":241},"rwl8165li74eincix9g6w56i",{"_153":206,"_174":242,"_146":243},"http://fundamentals.epicreact.dev",{"_210":244},1,{"_7":246,"_204":247},"tj6gb0b6ukqirpp6e0b6ller",{"_153":248,"_174":207,"_146":249},"Web Authentication 🔐",{"_210":244},{"_7":251,"_204":252},"yyswx3jl0d2im40ze5v93ohs",{"_153":253,"_174":254,"_146":255},"Advanced React Patterns 🤯","http://advanced-patterns.epicreact.dev",{"_210":256},8,{"_7":258,"_204":259},"yz657l6ag4wucpdz8dzszout",{"_153":260,"_174":261,"_146":262},"Advanced React APIs 🔥","http://advanced-apis.epicreact.dev",{"_9":209,"_210":244,"_212":222},{"_7":264,"_204":265},"j4dfjr64q0wn8fhatld0erf8",{"_153":206,"_174":207,"_146":266},{"_9":209,"_210":231,"_212":213},{"_7":268,"_198":269,"_199":270,"_201":271,"_20":-5,"_204":272},"a52989d1-5c61-4a6c-b70d-07185461149b",false,"https://www.gravatar.com/avatar/8e1f2b7456c15ec33ac65133c7e8efc6?size=64&default=identicon","https://www.gravatar.com/avatar/8e1f2b7456c15ec33ac65133c7e8efc6?size=512&default=identicon",{"_153":273,"_174":207,"_146":274},"Data Modeling Deep Dive 💾",{"_210":213},{"_7":276,"_198":16,"_199":277,"_201":278,"_20":-5,"_204":279},"fce9e8e3-42d6-4041-98f0-307290ce9486","https://www.gravatar.com/avatar/4e401c163abc21572e54fb4f59bc117c?size=64&default=identicon","https://www.gravatar.com/avatar/4e401c163abc21572e54fb4f59bc117c?size=512&default=identicon",{"_153":260,"_174":207,"_146":280},{"_210":230},{"_7":282,"_204":283},"v8xfi5uiocpxkq7yyhb9dkvv",{"_153":206,"_174":242},{"_7":285,"_204":286},"n7mvti4iei872me5gbe0ojy1",{"_153":113,"_174":175,"_146":287},{"_210":213,"_212":-5,"_9":-5},"routes/_app+/_layout",{"_153":113,"_290":291,"_356":357,"_359":269},"exercises",[292,304,343],{"_210":244,"_112":293,"_294":295,"_298":299,"_301":302},"Figma to Tailwind CSS","solutions",[296],{"_212":244,"_112":297,"_20":27},"Design Implementation","problems",[300],{"_212":244,"_112":297,"_20":21},"steps",[303],{"_212":244,"_112":297,"_20":21},{"_210":213,"_112":305,"_294":306,"_298":325,"_301":334},"Color Design Tokens",[307,309,311,313,315,317,320,323],{"_212":244,"_112":308,"_20":35},"Custom colors in UI",{"_212":213,"_112":310,"_20":43},"Cutoff Default Colors",{"_212":231,"_112":312,"_20":51},"\"Non colors\" support",{"_212":222,"_112":314,"_20":59},"Semantic Design Tokens",{"_212":230,"_112":316,"_20":67},"Broader Scopes",{"_212":318,"_112":319,"_20":75},6,"CSS Variables",{"_212":321,"_112":322,"_20":83},7,"Dark Mode",{"_212":256,"_112":324,"_20":91},"Multi-Theme Support",[326,327,328,329,330,331,332,333],{"_212":244,"_112":308,"_20":31},{"_212":213,"_112":310,"_20":39},{"_212":231,"_112":312,"_20":47},{"_212":222,"_112":314,"_20":55},{"_212":230,"_112":316,"_20":63},{"_212":318,"_112":319,"_20":71},{"_212":321,"_112":322,"_20":79},{"_212":256,"_112":324,"_20":87},[335,336,337,338,339,340,341,342],{"_212":244,"_112":308,"_20":31},{"_212":213,"_112":310,"_20":39},{"_212":231,"_112":312,"_20":47},{"_212":222,"_112":314,"_20":55},{"_212":230,"_112":316,"_20":63},{"_212":318,"_112":319,"_20":71},{"_212":321,"_112":322,"_20":79},{"_212":256,"_112":324,"_20":87},{"_210":231,"_112":344,"_294":345,"_298":350,"_301":353},"Conversion to Tailwind v4",[346,348],{"_212":244,"_112":347,"_20":99},"Theme Configuration in CSS",{"_212":213,"_112":349,"_20":107},"Simplification",[351,352],{"_212":244,"_112":347,"_20":95},{"_212":213,"_112":349,"_20":103},[354,355],{"_212":244,"_112":347,"_20":95},{"_212":213,"_112":349,"_20":103},"playground",{"_358":-5,"_210":-2},"appName","isMenuOpened","routes/_app+/exercise+/$exerciseNumber",{"_362":363,"_146":364,"_210":213,"_606":607,"_611":305,"_612":378,"_613":209,"_112":113,"_614":615},"articleId","workshop-tailwind-css-color-tokens-2-instructions",{"_210":213,"_365":366,"_112":305,"_367":368,"_369":370,"_371":372,"_374":375,"_301":377,"_298":540,"_294":573},"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",[373],"https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/intro-color-design-tokens","finishedEpicVideoEmbeds",[376],"https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/color-design-tokens-outro",[378,407,426,445,464,483,502,521],{"_212":244,"_209":379,"_396":397},{"_20":31,"_112":308,"_365":380,"_22":32,"_24":33,"_367":381,"_382":383,"_385":386,"_388":389,"_393":394,"_210":213,"_212":244,"_9":209,"_395":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:[\"\ttheme: {\",`\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",[384],"https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/custom-colors-in-ui","test",{"_9":387},"none","dev",{"_9":390,"_391":392,"_151":152},"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","solution",{"_20":35,"_112":308,"_365":398,"_22":36,"_24":37,"_367":399,"_382":400,"_385":402,"_388":403,"_393":405,"_210":213,"_212":244,"_9":396,"_406":-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;",[401],"https://www.epicweb.dev/tutorials/tailwind-color-tokens/custom-colors-in-ui/custom-colors-in-ui/solution",{"_9":387},{"_9":390,"_391":404,"_151":152},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",{"_212":213,"_209":408,"_396":417},{"_20":39,"_112":310,"_365":409,"_22":40,"_24":41,"_367":410,"_382":411,"_385":413,"_388":414,"_393":416,"_210":213,"_212":213,"_9":209,"_395":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;",[412],"https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/cutoff-default-colors",{"_9":387},{"_9":390,"_391":415,"_151":152},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,"_112":310,"_365":418,"_22":44,"_24":45,"_367":419,"_382":420,"_385":422,"_388":423,"_393":425,"_210":213,"_212":213,"_9":396,"_406":-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;",[421],"https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/cutoff-default-colors/solution",{"_9":387},{"_9":390,"_391":424,"_151":152},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",{"_212":231,"_209":427,"_396":436},{"_20":47,"_112":312,"_365":428,"_22":48,"_24":49,"_367":429,"_382":430,"_385":432,"_388":433,"_393":435,"_210":213,"_212":231,"_9":209,"_395":51},"03.problem.non-colors-support","var Component=(()=>{var p=Object.create;var t=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var u=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)t(r,o,{get:e[o],enumerable:!0})},c=(r,e,o,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of u(e))!v.call(r,a)&&a!==o&&t(r,a,{get:()=>e[a],enumerable:!(l=b(e,a))||l.enumerable});return r};var f=(r,e,o)=>(o=r!=null?p(m(r)):{},c(e||!r||!r.__esModule?t(o,\"default\",{value:r,enumerable:!0}):o,r)),g=r=>c(t({},\"__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\"}),\"=\",'\"',(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"#\"}),'\"',\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"className\"}),\"=\",'\"',(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"... 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;",[431],"https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/non-colors-support",{"_9":387},{"_9":390,"_391":434,"_151":152},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,"_112":312,"_365":437,"_22":52,"_24":53,"_367":438,"_382":439,"_385":441,"_388":442,"_393":444,"_210":213,"_212":231,"_9":396,"_406":-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;",[440],"https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/non-colors-support/solution",{"_9":387},{"_9":390,"_391":443,"_151":152},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",{"_212":222,"_209":446,"_396":455},{"_20":55,"_112":314,"_365":447,"_22":56,"_24":57,"_367":448,"_382":449,"_385":451,"_388":452,"_393":454,"_210":213,"_212":222,"_9":209,"_395":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;",[450],"https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/semantic-design-tokens",{"_9":387},{"_9":390,"_391":453,"_151":152},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,"_112":314,"_365":456,"_22":60,"_24":61,"_367":457,"_382":458,"_385":460,"_388":461,"_393":463,"_210":213,"_212":222,"_9":396,"_406":-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;",[459],"https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/semantic-design-tokens/solution",{"_9":387},{"_9":390,"_391":462,"_151":152},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",{"_212":230,"_209":465,"_396":474},{"_20":63,"_112":316,"_365":466,"_22":64,"_24":65,"_367":467,"_382":468,"_385":470,"_388":471,"_393":473,"_210":213,"_212":230,"_9":209,"_395":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;",[469],"https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/broader-scopes",{"_9":387},{"_9":390,"_391":472,"_151":152},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,"_112":316,"_365":475,"_22":68,"_24":69,"_367":476,"_382":477,"_385":479,"_388":480,"_393":482,"_210":213,"_212":230,"_9":396,"_406":-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;",[478],"https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/broader-scopes/solution",{"_9":387},{"_9":390,"_391":481,"_151":152},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",{"_212":318,"_209":484,"_396":493},{"_20":71,"_112":319,"_365":485,"_22":72,"_24":73,"_367":486,"_382":487,"_385":489,"_388":490,"_393":492,"_210":213,"_212":318,"_9":209,"_395":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;",[488],"https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/css-variables",{"_9":387},{"_9":390,"_391":491,"_151":152},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,"_112":319,"_365":494,"_22":76,"_24":77,"_367":495,"_382":496,"_385":498,"_388":499,"_393":501,"_210":213,"_212":318,"_9":396,"_406":-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;",[497],"https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/css-variables/solution",{"_9":387},{"_9":390,"_391":500,"_151":152},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",{"_212":321,"_209":503,"_396":512},{"_20":79,"_112":322,"_365":504,"_22":80,"_24":81,"_367":505,"_382":506,"_385":508,"_388":509,"_393":511,"_210":213,"_212":321,"_9":209,"_395":83},"07.problem.dark-mode","var Component=(()=>{var p=Object.create;var o=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var k=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),v=(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))!g.call(r,d)&&d!==l&&o(r,d,{get:()=>e[d],enumerable:!(c=m(e,d))||c.enumerable});return r};var f=(r,e,l)=>(l=r!=null?p(y(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={};v(x,{default:()=>b,frontmatter:()=>N});var n=f(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:\"{\"}),\"{ \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"--color-bg-subtle\"}),\"'\",\": \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"0 0% 19%\"}),\"'\",\" }\",(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" />\",`\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;",[507],"https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/dark-mode",{"_9":387},{"_9":390,"_391":510,"_151":152},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,"_112":322,"_365":513,"_22":84,"_24":85,"_367":514,"_382":515,"_385":517,"_388":518,"_393":520,"_210":213,"_212":321,"_9":396,"_406":-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;",[516],"https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/dark-mode/solution",{"_9":387},{"_9":390,"_391":519,"_151":152},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",{"_212":256,"_209":522,"_396":531},{"_20":87,"_112":324,"_365":523,"_22":88,"_24":89,"_367":524,"_382":525,"_385":527,"_388":528,"_393":530,"_210":213,"_212":256,"_9":209,"_395":91},"08.problem.multi-theme","var Component=(()=>{var u=Object.create;var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,g=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))!g.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(y(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\"}),(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\":\"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;",[526],"https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/multi-theme",{"_9":387},{"_9":390,"_391":529,"_151":152},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,"_112":324,"_365":532,"_22":92,"_24":93,"_367":533,"_382":534,"_385":536,"_388":537,"_393":539,"_210":213,"_212":256,"_9":396,"_406":-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;",[535],"https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/multi-theme/solution",{"_9":387},{"_9":390,"_391":538,"_151":152},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",[541,545,549,553,557,561,565,569],{"_20":31,"_112":308,"_365":380,"_22":32,"_24":33,"_367":381,"_382":542,"_385":543,"_388":544,"_393":394,"_210":213,"_212":244,"_9":209,"_395":35},[384],{"_9":387},{"_9":390,"_391":392,"_151":152},{"_20":39,"_112":310,"_365":409,"_22":40,"_24":41,"_367":410,"_382":546,"_385":547,"_388":548,"_393":416,"_210":213,"_212":213,"_9":209,"_395":43},[412],{"_9":387},{"_9":390,"_391":415,"_151":152},{"_20":47,"_112":312,"_365":428,"_22":48,"_24":49,"_367":429,"_382":550,"_385":551,"_388":552,"_393":435,"_210":213,"_212":231,"_9":209,"_395":51},[431],{"_9":387},{"_9":390,"_391":434,"_151":152},{"_20":55,"_112":314,"_365":447,"_22":56,"_24":57,"_367":448,"_382":554,"_385":555,"_388":556,"_393":454,"_210":213,"_212":222,"_9":209,"_395":59},[450],{"_9":387},{"_9":390,"_391":453,"_151":152},{"_20":63,"_112":316,"_365":466,"_22":64,"_24":65,"_367":467,"_382":558,"_385":559,"_388":560,"_393":473,"_210":213,"_212":230,"_9":209,"_395":67},[469],{"_9":387},{"_9":390,"_391":472,"_151":152},{"_20":71,"_112":319,"_365":485,"_22":72,"_24":73,"_367":486,"_382":562,"_385":563,"_388":564,"_393":492,"_210":213,"_212":318,"_9":209,"_395":75},[488],{"_9":387},{"_9":390,"_391":491,"_151":152},{"_20":79,"_112":322,"_365":504,"_22":80,"_24":81,"_367":505,"_382":566,"_385":567,"_388":568,"_393":511,"_210":213,"_212":321,"_9":209,"_395":83},[507],{"_9":387},{"_9":390,"_391":510,"_151":152},{"_20":87,"_112":324,"_365":523,"_22":88,"_24":89,"_367":524,"_382":570,"_385":571,"_388":572,"_393":530,"_210":213,"_212":256,"_9":209,"_395":91},[526],{"_9":387},{"_9":390,"_391":529,"_151":152},[574,578,582,586,590,594,598,602],{"_20":35,"_112":308,"_365":398,"_22":36,"_24":37,"_367":399,"_382":575,"_385":576,"_388":577,"_393":405,"_210":213,"_212":244,"_9":396,"_406":-5},[401],{"_9":387},{"_9":390,"_391":404,"_151":152},{"_20":43,"_112":310,"_365":418,"_22":44,"_24":45,"_367":419,"_382":579,"_385":580,"_388":581,"_393":425,"_210":213,"_212":213,"_9":396,"_406":-5},[421],{"_9":387},{"_9":390,"_391":424,"_151":152},{"_20":51,"_112":312,"_365":437,"_22":52,"_24":53,"_367":438,"_382":583,"_385":584,"_388":585,"_393":444,"_210":213,"_212":231,"_9":396,"_406":-5},[440],{"_9":387},{"_9":390,"_391":443,"_151":152},{"_20":59,"_112":314,"_365":456,"_22":60,"_24":61,"_367":457,"_382":587,"_385":588,"_388":589,"_393":463,"_210":213,"_212":222,"_9":396,"_406":-5},[459],{"_9":387},{"_9":390,"_391":462,"_151":152},{"_20":67,"_112":316,"_365":475,"_22":68,"_24":69,"_367":476,"_382":591,"_385":592,"_388":593,"_393":482,"_210":213,"_212":230,"_9":396,"_406":-5},[478],{"_9":387},{"_9":390,"_391":481,"_151":152},{"_20":75,"_112":319,"_365":494,"_22":76,"_24":77,"_367":495,"_382":595,"_385":596,"_388":597,"_393":501,"_210":213,"_212":318,"_9":396,"_406":-5},[497],{"_9":387},{"_9":390,"_391":500,"_151":152},{"_20":83,"_112":322,"_365":513,"_22":84,"_24":85,"_367":514,"_382":599,"_385":600,"_388":601,"_393":520,"_210":213,"_212":321,"_9":396,"_406":-5},[516],{"_9":387},{"_9":390,"_391":519,"_151":152},{"_20":91,"_112":324,"_365":532,"_22":92,"_24":93,"_367":533,"_382":603,"_385":604,"_388":605,"_393":539,"_210":213,"_212":256,"_9":396,"_406":-5},[535],{"_9":387},{"_9":390,"_391":538,"_151":152},"exerciseReadme",{"_608":609,"_24":610},"file","/myapp/workshop-content/exercises/02.color-tokens/README.mdx","exercises/02.color-tokens","exerciseTitle","firstStep","firstType","epicVideoInfosPromise",["P",615],"routes/_app+/exercise+/_layout","actionData","errors"]