P541:[{"_548":71,"_549":75,"_550":551},"app1","app2","diffCode","var Component=(()=>{var p=Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var y=(n,a)=>()=>(a||n((a={exports:{}}).exports,a),a.exports),k=(n,a)=>{for(var r in a)o(n,r,{get:a[r],enumerable:!0})},c=(n,a,r,s)=>{if(a&&typeof a==\"object\"||typeof a==\"function\")for(let l of h(a))!f.call(n,l)&&l!==r&&o(n,l,{get:()=>a[l],enumerable:!(s=u(a,l))||s.enumerable});return n};var N=(n,a,r)=>(r=n!=null?p(v(n)):{},c(a||!n||!n.__esModule?o(r,\"default\",{value:n,enumerable:!0}):r,n)),g=n=>c(o({},\"__esModule\",{value:!0}),n);var i=y((A,t)=>{t.exports=_jsx_runtime});var w={};k(w,{default:()=>m,frontmatter:()=>x});var e=N(i()),x=void 0;function b(n){let a={code:\"code\",pre:\"pre\",span:\"span\",...n.components},{Accordion:r,Icon:s,LaunchEditor:l}=a;return r||d(\"Accordion\",!0),s||d(\"Icon\",!0),l||d(\"LaunchEditor\",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(r,{title:\"src/App.tsx\",variant:\"changed\",children:(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"src/App.tsx\",\"data-start\":\"4\",\"data-remove\":\"7,8,9,10,11,12,13,14\",\"data-add\":\"15,16,17\",\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,e.jsxs)(a.code,{children:[(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",\"data-diff-line-number\":\"4\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" (\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",\"data-diff-line-number\":\"5\",children:[\"\t\t<>\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",\"data-diff-line-number\":\"6\",children:[\"\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Demo\"}),\" />\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",\"data-remove\":!0,\"data-diff-line-number\":\"6\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"/* \"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",\"data-remove\":!0,\"data-diff-line-number\":\"6\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\t\\u{1F428} 5. Add a second component and give it a style attribute\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",\"data-remove\":!0,\"data-diff-line-number\":\"6\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\tthat changes the value of the `--color-bg-subtle` CSS variable.\"}),`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",\"data-remove\":!0,\"data-diff-line-number\":\"6\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",\"data-remove\":!0,\"data-diff-line-number\":\"6\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\tYou can try `0 0% 19%` for the value.\"}),`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",\"data-remove\":!0,\"data-diff-line-number\":\"6\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",\"data-remove\":!0,\"data-diff-line-number\":\"6\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\tThe should render with a dark background!\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",\"data-remove\":!0,\"data-diff-line-number\":\"6\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t*/\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",\"data-add\":!0,\"data-diff-line-number\":\"7\",children:[\"\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Demo\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",\"data-add\":!0,\"data-diff-line-number\":\"8\",children:[\"\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"style\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),\"{ \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"--color-bg-subtle\"}),\"'\",\": \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"0 0% 19%\"}),\"'\",\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"as\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"React\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"CSSProperties\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",\"data-add\":!0,\"data-diff-line-number\":\"9\",children:[\"\t\t\t/>\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"18\",\"data-diff-line-number\":\"10\",children:[\"\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"19\",\"data-diff-line-number\":\"11\",children:[\"\t)\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"20\",\"data-diff-line-number\":\"12\",children:[\"}\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(l,{file:\"/myapp/workshop-content/exercises/02.color-tokens/06.problem.css-variables/src/App.tsx\",line:4,children:(0,e.jsx)(\"span\",{title:\"02.color-tokens/06.problem.css-variables/src/App.tsx\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 1\"})}),(0,e.jsxs)(\"div\",{className:\"display-alt-down flex gap-2\",children:[(0,e.jsx)(l,{file:\"/myapp/workshop-content/exercises/02.color-tokens/06.problem.css-variables/src/App.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/02.color-tokens/06.solution.css-variables/src/App.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(s,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(l,{file:\"/myapp/workshop-content/exercises/02.color-tokens/06.solution.css-variables/src/App.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/02.color-tokens/06.problem.css-variables/src/App.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(s,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(l,{file:\"/myapp/workshop-content/exercises/02.color-tokens/06.solution.css-variables/src/App.tsx\",line:4,children:(0,e.jsx)(\"span\",{title:\"02.color-tokens/06.solution.css-variables/src/App.tsx\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 2\"})})]})]})}),`\n`,(0,e.jsx)(r,{title:\"src/index.css\",variant:\"changed\",children:(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"src/index.css\",\"data-start\":\"2\",\"data-remove\":\"5,6,7,8,15,16,17,31,32\",\"data-add\":\"9,10,11,12,13,18,19,20,21,22,23,24,25,26,27,28,29,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51\",\"data-line-numbers\":\"true\",\"data-lang\":\"css\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,e.jsxs)(a.code,{children:[(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",\"data-diff-line-number\":\"2\",children:[\"@\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"tailwind\"}),\" components;\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",\"data-diff-line-number\":\"3\",children:[\"@\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"tailwind\"}),\" utilities;\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",\"data-diff-line-number\":\"4\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",\"data-remove\":!0,\"data-diff-line-number\":\"4\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"/* \"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",\"data-remove\":!0,\"data-diff-line-number\":\"4\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\\u{1F428} 2. Define the 14 colors as CSS variables at \"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",\"data-remove\":!0,\"data-diff-line-number\":\"4\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\" the `:root` scope, inside the `@base` layer.\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",\"data-remove\":!0,\"data-diff-line-number\":\"4\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"*/\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",\"data-add\":!0,\"data-diff-line-number\":\"5\",children:[\"@\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"layer\"}),\" base {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",\"data-add\":!0,\"data-diff-line-number\":\"6\",children:[\"\t:\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"root\"}),\" {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",\"data-add\":!0,\"data-diff-line-number\":\"7\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"/* Raw color accessors */\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",\"data-add\":!0,\"data-diff-line-number\":\"8\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"--color-teal\"}),\": \",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"173\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"100%\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"50%\"}),\";\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",\"data-add\":!0,\"data-diff-line-number\":\"9\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"--color-purple\"}),\": \",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"263\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"100%\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"50%\"}),\";\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",\"data-diff-line-number\":\"10\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",\"data-remove\":!0,\"data-diff-line-number\":\"10\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"/* \"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",\"data-remove\":!0,\"data-diff-line-number\":\"10\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\\u{1F428} 3. Recreate the semantic token abstractions as CSS variables.\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",\"data-remove\":!0,\"data-diff-line-number\":\"10\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\" Those should consume the raw color CSS variables.\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"18\",\"data-add\":!0,\"data-diff-line-number\":\"11\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t--color-grey-0: 0 0% 100%;\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"19\",\"data-add\":!0,\"data-diff-line-number\":\"12\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t--color-grey-5: 0 0% 92%;\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"20\",\"data-add\":!0,\"data-diff-line-number\":\"13\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t--color-grey-10: 0 0% 85%;\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"21\",\"data-add\":!0,\"data-diff-line-number\":\"14\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t--color-grey-20: 0 0% 76%;\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"22\",\"data-add\":!0,\"data-diff-line-number\":\"15\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t--color-grey-30: 0 0% 67%;\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"23\",\"data-add\":!0,\"data-diff-line-number\":\"16\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t--color-grey-40: 0 0% 57%;\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"24\",\"data-add\":!0,\"data-diff-line-number\":\"17\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t--color-grey-50: 0 0% 47%;\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"25\",\"data-add\":!0,\"data-diff-line-number\":\"18\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t--color-grey-60: 0 0% 38%;\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"26\",\"data-add\":!0,\"data-diff-line-number\":\"19\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t--color-grey-70: 0 0% 29%;\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"27\",\"data-add\":!0,\"data-diff-line-number\":\"20\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t--color-grey-80: 0 0% 19%;\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"28\",\"data-add\":!0,\"data-diff-line-number\":\"21\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t--color-grey-90: 0 0% 9%;\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"29\",\"data-add\":!0,\"data-diff-line-number\":\"22\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t--color-grey-100: 0 0% 0%;\"}),`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"30\",\"data-diff-line-number\":\"23\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"31\",\"data-remove\":!0,\"data-diff-line-number\":\"23\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\" Example: `--color-bg-neutral: var(--color-grey-0);`\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"32\",\"data-remove\":!0,\"data-diff-line-number\":\"23\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"*/\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"33\",\"data-add\":!0,\"data-diff-line-number\":\"24\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"/* Semantic tokens */\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"34\",\"data-add\":!0,\"data-diff-line-number\":\"25\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"--color-bg-highlight\"}),\": \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"var\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"--color-teal\"}),\");\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"35\",\"data-add\":!0,\"data-diff-line-number\":\"26\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"--color-bg-accent\"}),\": \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"var\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"--color-purple\"}),\");\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"36\",\"data-add\":!0,\"data-diff-line-number\":\"27\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"37\",\"data-add\":!0,\"data-diff-line-number\":\"28\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"--color-bg-neutral\"}),\": \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"var\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"--color-grey-0\"}),\");\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"38\",\"data-add\":!0,\"data-diff-line-number\":\"29\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"--color-bg-neutral-inverted\"}),\": \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"var\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"--color-grey-100\"}),\");\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"39\",\"data-add\":!0,\"data-diff-line-number\":\"30\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"--color-bg-subtle\"}),\": \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"var\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"--color-grey-5\"}),\");\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"40\",\"data-add\":!0,\"data-diff-line-number\":\"31\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"--color-bg-bold\"}),\": \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"var\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"--color-grey-80\"}),\");\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"41\",\"data-add\":!0,\"data-diff-line-number\":\"32\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"42\",\"data-add\":!0,\"data-diff-line-number\":\"33\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"--color-border-bold\"}),\": \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"var\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"--color-grey-60\"}),\");\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"43\",\"data-add\":!0,\"data-diff-line-number\":\"34\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"--color-border-subtle\"}),\": \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"var\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"--color-grey-40\"}),\");\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"44\",\"data-add\":!0,\"data-diff-line-number\":\"35\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"--color-border-muted\"}),\": \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"var\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"--color-grey-20\"}),\");\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"45\",\"data-add\":!0,\"data-diff-line-number\":\"36\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"46\",\"data-add\":!0,\"data-diff-line-number\":\"37\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"--color-text-copy\"}),\": \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"var\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"--color-grey-100\"}),\");\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"47\",\"data-add\":!0,\"data-diff-line-number\":\"38\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"--color-text-subtle\"}),\": \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"var\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"--color-grey-60\"}),\");\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"48\",\"data-add\":!0,\"data-diff-line-number\":\"39\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"--color-text-muted\"}),\": \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"var\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"--color-grey-40\"}),\");\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"49\",\"data-add\":!0,\"data-diff-line-number\":\"40\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"--color-text-inverted\"}),\": \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"var\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"--color-grey-5\"}),\");\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"50\",\"data-add\":!0,\"data-diff-line-number\":\"41\",children:[\"\t}\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"51\",\"data-add\":!0,\"data-diff-line-number\":\"42\",children:[\"}\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(l,{file:\"/myapp/workshop-content/exercises/02.color-tokens/06.problem.css-variables/src/index.css\",line:2,children:(0,e.jsx)(\"span\",{title:\"02.color-tokens/06.problem.css-variables/src/index.css\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 1\"})}),(0,e.jsxs)(\"div\",{className:\"display-alt-down flex gap-2\",children:[(0,e.jsx)(l,{file:\"/myapp/workshop-content/exercises/02.color-tokens/06.problem.css-variables/src/index.css\",syncTo:{file:\"/myapp/workshop-content/exercises/02.color-tokens/06.solution.css-variables/src/index.css\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(s,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(l,{file:\"/myapp/workshop-content/exercises/02.color-tokens/06.solution.css-variables/src/index.css\",syncTo:{file:\"/myapp/workshop-content/exercises/02.color-tokens/06.problem.css-variables/src/index.css\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(s,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(l,{file:\"/myapp/workshop-content/exercises/02.color-tokens/06.solution.css-variables/src/index.css\",line:2,children:(0,e.jsx)(\"span\",{title:\"02.color-tokens/06.solution.css-variables/src/index.css\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 2\"})})]})]})}),`\n`,(0,e.jsx)(r,{title:\"tailwind.config.ts\",variant:\"changed\",children:(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"tailwind.config.ts\",\"data-start\":\"1\",\"data-remove\":\"3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,34,35,39,40,44,45,51,52,53,60,61,62,63\",\"data-add\":\"36,37,41,42,46,47,54,55,56,64,65,66,67\",\"data-line-numbers\":\"true\",\"data-lang\":\"typescript\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,e.jsxs)(a.code,{children:[(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",\"data-diff-line-number\":\"1\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"type\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"Config\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"tailwindcss\"}),\"'\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",\"data-diff-line-number\":\"2\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",\"data-remove\":!0,\"data-diff-line-number\":\"2\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"/* \"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",\"data-remove\":!0,\"data-diff-line-number\":\"2\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\\u{1F428} 1. Convert the HEX colors below to `H` `S` `L` strings\"}),`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",\"data-remove\":!0,\"data-diff-line-number\":\"2\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",\"data-remove\":!0,\"data-diff-line-number\":\"2\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t(steps 2 and 3 happen in the `src/index.css` file)\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",\"data-remove\":!0,\"data-diff-line-number\":\"2\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"*/\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",\"data-remove\":!0,\"data-diff-line-number\":\"2\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"colors\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",\"data-remove\":!0,\"data-diff-line-number\":\"2\",children:[\"\tteal: \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"#00FFE1\"}),\"'\",\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",\"data-remove\":!0,\"data-diff-line-number\":\"2\",children:[\"\tpurple: \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"#6200FF\"}),\"'\",\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",\"data-remove\":!0,\"data-diff-line-number\":\"2\",children:[\"\tgrey: {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",\"data-remove\":!0,\"data-diff-line-number\":\"2\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"0\"}),\": \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"#FFFFFF\"}),\"'\",\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",\"data-remove\":!0,\"data-diff-line-number\":\"2\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"5\"}),\": \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"#EBEBEB\"}),\"'\",\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",\"data-remove\":!0,\"data-diff-line-number\":\"2\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"10\"}),\": \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"#DADADA\"}),\"'\",\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",\"data-remove\":!0,\"data-diff-line-number\":\"2\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"20\"}),\": \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"#C2C2C2\"}),\"'\",\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",\"data-remove\":!0,\"data-diff-line-number\":\"2\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"30\"}),\": \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"#AAAAAA\"}),\"'\",\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",\"data-remove\":!0,\"data-diff-line-number\":\"2\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"40\"}),\": \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"#919191\"}),\"'\",\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"18\",\"data-remove\":!0,\"data-diff-line-number\":\"2\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"50\"}),\": \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"#797979\"}),\"'\",\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"19\",\"data-remove\":!0,\"data-diff-line-number\":\"2\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"60\"}),\": \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"#616161\"}),\"'\",\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"20\",\"data-remove\":!0,\"data-diff-line-number\":\"2\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"70\"}),\": \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"#494949\"}),\"'\",\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"21\",\"data-remove\":!0,\"data-diff-line-number\":\"2\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"80\"}),\": \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"#313131\"}),\"'\",\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"22\",\"data-remove\":!0,\"data-diff-line-number\":\"2\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"90\"}),\": \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"#181818\"}),\"'\",\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"23\",\"data-remove\":!0,\"data-diff-line-number\":\"2\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"100\"}),\": \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"#000000\"}),\"'\",\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"24\",\"data-remove\":!0,\"data-diff-line-number\":\"2\",children:[\"\t},\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"25\",\"data-remove\":!0,\"data-diff-line-number\":\"2\",children:[\"}\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"26\",\"data-remove\":!0,\"data-diff-line-number\":\"2\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"27\",\"data-remove\":!0,\"data-diff-line-number\":\"2\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"/* \"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"28\",\"data-remove\":!0,\"data-diff-line-number\":\"2\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\\u{1F428} 4. Update the objects below to consume the new CSS variables.\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"29\",\"data-remove\":!0,\"data-diff-line-number\":\"2\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\tMake sure you compose them with Tailwind's .\"}),`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"30\",\"data-remove\":!0,\"data-diff-line-number\":\"2\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"31\",\"data-remove\":!0,\"data-diff-line-number\":\"2\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\tExample: `highlight: 'hsl(var(--color-bg-highlight) / )'`\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"32\",\"data-remove\":!0,\"data-diff-line-number\":\"2\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"*/\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"33\",\"data-diff-line-number\":\"3\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"backgroundColors\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"34\",\"data-remove\":!0,\"data-diff-line-number\":\"3\",children:[\"\thighlight: \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"colors\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"teal\"}),\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"35\",\"data-remove\":!0,\"data-diff-line-number\":\"3\",children:[\"\taccent: \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"colors\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"purple\"}),\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"36\",\"data-add\":!0,\"data-diff-line-number\":\"4\",children:[\"\thighlight: \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"hsl(var(--color-bg-highlight) / )\"}),\"'\",\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"37\",\"data-add\":!0,\"data-diff-line-number\":\"5\",children:[\"\taccent: \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"hsl(var(--color-bg-accent) / )\"}),\"'\",\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"38\",\"data-diff-line-number\":\"6\",children:[\"\tneutral: {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"39\",\"data-remove\":!0,\"data-diff-line-number\":\"6\",children:[\"\t\tDEFAULT: \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"colors\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"grey\"}),\"[\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"0\"}),\"'\",\"],\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"40\",\"data-remove\":!0,\"data-diff-line-number\":\"6\",children:[\"\t\tinverted: \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"colors\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"grey\"}),\"[\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"100\"}),\"'\",\"],\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"41\",\"data-add\":!0,\"data-diff-line-number\":\"7\",children:[\"\t\tDEFAULT: \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"hsl(var(--color-bg-neutral) / )\"}),\"'\",\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"42\",\"data-add\":!0,\"data-diff-line-number\":\"8\",children:[\"\t\tinverted: \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"hsl(var(--color-bg-neutral-inverted) / )\"}),\"'\",\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"43\",\"data-diff-line-number\":\"9\",children:[\"\t},\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"44\",\"data-remove\":!0,\"data-diff-line-number\":\"9\",children:[\"\tsubtle: \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"colors\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"grey\"}),\"[\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"5\"}),\"'\",\"],\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"45\",\"data-remove\":!0,\"data-diff-line-number\":\"9\",children:[\"\tbold: \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"colors\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"grey\"}),\"[\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"80\"}),\"'\",\"],\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"46\",\"data-add\":!0,\"data-diff-line-number\":\"10\",children:[\"\tsubtle: \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"hsl(var(--color-bg-subtle) / )\"}),\"'\",\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"47\",\"data-add\":!0,\"data-diff-line-number\":\"11\",children:[\"\tbold: \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"hsl(var(--color-bg-bold) / )\"}),\"'\",\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"48\",\"data-diff-line-number\":\"12\",children:[\"}\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"49\",\"data-diff-line-number\":\"13\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"50\",\"data-diff-line-number\":\"14\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"borderColors\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"51\",\"data-remove\":!0,\"data-diff-line-number\":\"14\",children:[\"\tbold: \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"colors\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"grey\"}),\"[\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"60\"}),\"'\",\"],\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"52\",\"data-remove\":!0,\"data-diff-line-number\":\"14\",children:[\"\tsubtle: \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"colors\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"grey\"}),\"[\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"40\"}),\"'\",\"],\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"53\",\"data-remove\":!0,\"data-diff-line-number\":\"14\",children:[\"\tmuted: \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"colors\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"grey\"}),\"[\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"20\"}),\"'\",\"],\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"54\",\"data-add\":!0,\"data-diff-line-number\":\"15\",children:[\"\tbold: \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"hsl(var(--color-border-bold) / )\"}),\"'\",\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"55\",\"data-add\":!0,\"data-diff-line-number\":\"16\",children:[\"\tsubtle: \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"hsl(var(--color-border-subtle) / )\"}),\"'\",\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"56\",\"data-add\":!0,\"data-diff-line-number\":\"17\",children:[\"\tmuted: \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"hsl(var(--color-border-muted) / )\"}),\"'\",\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"57\",\"data-diff-line-number\":\"18\",children:[\"}\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"58\",\"data-diff-line-number\":\"19\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"59\",\"data-diff-line-number\":\"20\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"textColors\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"60\",\"data-remove\":!0,\"data-diff-line-number\":\"20\",children:[\"\tcopy: \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"colors\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"grey\"}),\"[\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"100\"}),\"'\",\"],\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"61\",\"data-remove\":!0,\"data-diff-line-number\":\"20\",children:[\"\tsubtle: \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"colors\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"grey\"}),\"[\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"60\"}),\"'\",\"],\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"62\",\"data-remove\":!0,\"data-diff-line-number\":\"20\",children:[\"\tmuted: \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"colors\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"grey\"}),\"[\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"40\"}),\"'\",\"],\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"63\",\"data-remove\":!0,\"data-diff-line-number\":\"20\",children:[\"\tinverted: \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"colors\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"grey\"}),\"[\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"5\"}),\"'\",\"],\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"64\",\"data-add\":!0,\"data-diff-line-number\":\"21\",children:[\"\tcopy: \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"hsl(var(--color-text-copy) / )\"}),\"'\",\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"65\",\"data-add\":!0,\"data-diff-line-number\":\"22\",children:[\"\tsubtle: \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"hsl(var(--color-text-subtle) / )\"}),\"'\",\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"66\",\"data-add\":!0,\"data-diff-line-number\":\"23\",children:[\"\tmuted: \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"hsl(var(--color-text-muted) / )\"}),\"'\",\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"67\",\"data-add\":!0,\"data-diff-line-number\":\"24\",children:[\"\tinverted: \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"hsl(var(--color-text-inverted) / )\"}),\"'\",\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"68\",\"data-diff-line-number\":\"25\",children:[\"}\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"69\",\"data-diff-line-number\":\"26\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"70\",\"data-diff-line-number\":\"27\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"export\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"default\"}),\" {\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(l,{file:\"/myapp/workshop-content/exercises/02.color-tokens/06.problem.css-variables/tailwind.config.ts\",line:1,children:(0,e.jsx)(\"span\",{title:\"02.color-tokens/06.problem.css-variables/tailwind.config.ts\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 1\"})}),(0,e.jsxs)(\"div\",{className:\"display-alt-down flex gap-2\",children:[(0,e.jsx)(l,{file:\"/myapp/workshop-content/exercises/02.color-tokens/06.problem.css-variables/tailwind.config.ts\",syncTo:{file:\"/myapp/workshop-content/exercises/02.color-tokens/06.solution.css-variables/tailwind.config.ts\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(s,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(l,{file:\"/myapp/workshop-content/exercises/02.color-tokens/06.solution.css-variables/tailwind.config.ts\",syncTo:{file:\"/myapp/workshop-content/exercises/02.color-tokens/06.problem.css-variables/tailwind.config.ts\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(s,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(l,{file:\"/myapp/workshop-content/exercises/02.color-tokens/06.solution.css-variables/tailwind.config.ts\",line:1,children:(0,e.jsx)(\"span\",{title:\"02.color-tokens/06.solution.css-variables/tailwind.config.ts\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 2\"})})]})]})})]})}function m(n={}){let{wrapper:a}=n.components||{};return a?(0,e.jsx)(a,{...n,children:(0,e.jsx)(b,{...n})}):b(n)}function d(n,a){throw new Error(\"Expected \"+(a?\"component\":\"object\")+\" `\"+n+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return g(w);})();\n;return Component;"]

02. Color Design Tokens/06. CSS Variables (🏁 solution)

CSS Variables