add videos (#2)

epicweb-dev · Oct 11, 2024 · e951233 · e951233
1 parent 86b947d
commit e951233
Show file tree

Hide file tree

Showing 29 changed files with 55 additions and 1 deletion.
diff --git a/exercises/01.figma-to-tailwind/01.problem.design-implementation/README.mdx b/exercises/01.figma-to-tailwind/01.problem.design-implementation/README.mdx
@@ -1,5 +1,7 @@
 # Design Implementation
 
+<EpicVideo url="https://www.epicweb.dev/tutorials/tailwind-color-tokens/figma-to-tailwind-css/design-implementation" />
+
 This first exercise is about converting the Figma design to a Tailwind CSS project.
 
 ## High Fidelity Implementations

diff --git a/exercises/01.figma-to-tailwind/01.solution.design-implementation/README.mdx b/exercises/01.figma-to-tailwind/01.solution.design-implementation/README.mdx
@@ -1,5 +1,7 @@
 # Design Implementation
 
+<EpicVideo url="https://www.epicweb.dev/tutorials/tailwind-color-tokens/figma-to-tailwind-css/design-implementation/solution" />
+
 Nice one — how did you go?
 
 With that out of the way, let's start bringing the custom colors to our Tailwind CSS project.
diff --git a/exercises/01.figma-to-tailwind/README.mdx b/exercises/01.figma-to-tailwind/README.mdx
@@ -1,5 +1,7 @@
 # Figma to Tailwind CSS
 
+<EpicVideo url="https://www.epicweb.dev/tutorials/tailwind-color-tokens/figma-to-tailwind-css/intro-figma-to-tailwind-css" />
+
 This exercise is about converting the Figma design to a Tailwind CSS project — both for the mobile and desktop layouts.
 
 We're not going to worry about the colors just yet — but we'll build a "grayscale" high fidelity version of the designs.

diff --git a/exercises/02.color-tokens/01.problem.custom-colors-in-ui/README.mdx b/exercises/02.color-tokens/01.problem.custom-colors-in-ui/README.mdx
@@ -1,5 +1,7 @@
 # Custom colors in UI
 
+<EpicVideo url="https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/custom-colors-in-ui" />
+
 ## 1. Add custom theme colors
 
 Start by extending the Tailwind theme with the raw color tokens.

diff --git a/exercises/02.color-tokens/01.solution.custom-colors-in-ui/README.mdx b/exercises/02.color-tokens/01.solution.custom-colors-in-ui/README.mdx
@@ -1,3 +1,5 @@
 # Custom colors in UI
 
+<EpicVideo url="https://www.epicweb.dev/tutorials/tailwind-color-tokens/custom-colors-in-ui/custom-colors-in-ui/solution" />
+
 Looking good! 😘
diff --git a/exercises/02.color-tokens/02.problem.cutoff-default-colors/README.mdx b/exercises/02.color-tokens/02.problem.cutoff-default-colors/README.mdx
@@ -1,5 +1,6 @@
 # Cutoff Default Colors
 
+<EpicVideo url="https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/cutoff-default-colors" />
 By extending the theme, we still hace access to all the default colors.
 
 While that's very useful for prototyping, in this case we don't want devlopers to start using `zinc` instead our custom `grey`, or `indigo` instead of our `accent`.

diff --git a/exercises/02.color-tokens/02.solution.cutoff-default-colors/README.mdx b/exercises/02.color-tokens/02.solution.cutoff-default-colors/README.mdx
@@ -1,3 +1,5 @@
 # Cutoff Default Colors
 
+<EpicVideo url="https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/cutoff-default-colors/solution" />
+
 Good stuff — less room to make a mess 😅
diff --git a/exercises/02.color-tokens/03.problem.non-colors-support/README.mdx b/exercises/02.color-tokens/03.problem.non-colors-support/README.mdx
@@ -1,5 +1,7 @@
 # "Non colors" support
 
+<EpicVideo url="https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/non-colors-support" />
+
 It might look like everything is working properly — but with our `colors` override, we have accidentally removed some functionality.
 
 For example, try to make the button's background transparent on hover:

diff --git a/exercises/02.color-tokens/03.solution.non-colors-support/README.mdx b/exercises/02.color-tokens/03.solution.non-colors-support/README.mdx
@@ -1,3 +1,5 @@
 # "Non colors" support
 
+<EpicVideo url="https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/non-colors-support/solution" />
+
 Awesome save — that would have created some sneaky bugs down the road that would get developers scratching their head!
diff --git a/exercises/02.color-tokens/04.problem.semantic-design-tokens/README.mdx b/exercises/02.color-tokens/04.problem.semantic-design-tokens/README.mdx
@@ -1,5 +1,7 @@
 # Semantic Design Tokens
 
+<EpicVideo url="https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/semantic-design-tokens" />
+
 We've got our colors under control.
 
 Well — actually we still have a problem with the current setup. Nothing is stopping anyone to use the `highlight` (`teal`) color (meant for background surfaces) on a text element, for example.

diff --git a/exercises/02.color-tokens/04.solution.semantic-design-tokens/README.mdx b/exercises/02.color-tokens/04.solution.semantic-design-tokens/README.mdx
@@ -1,5 +1,7 @@
 # Semantic Design Tokens
 
+<EpicVideo url="https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/semantic-design-tokens/solution" />
+
 Going places! Our Tailwind color setup is now much more controlled and rigid.
 
 Rigid and controlled are _good_ things if you're setting up an abmitious and themable color system for a project.
diff --git a/exercises/02.color-tokens/05.problem.broader-scopes/README.mdx b/exercises/02.color-tokens/05.problem.broader-scopes/README.mdx
@@ -1,5 +1,7 @@
 # Broader Scopes
 
+<EpicVideo url="https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/broader-scopes" />
+
 You know how we accidentally broke background transparency in a previous exercise?
 
 Well, we've broken things again, without meaning to.

diff --git a/exercises/02.color-tokens/05.solution.broader-scopes/README.mdx b/exercises/02.color-tokens/05.solution.broader-scopes/README.mdx
@@ -1,3 +1,5 @@
 # Broader Scopes
 
+<EpicVideo url="https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/broader-scopes/solution" />
+
 Look at you go! Another head-scratching time-saver for your developers — or your future self 🤣
diff --git a/exercises/02.color-tokens/06.problem.css-variables/README.mdx b/exercises/02.color-tokens/06.problem.css-variables/README.mdx
@@ -1,5 +1,7 @@
 # CSS Variables
 
+<EpicVideo url="https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/css-variables" />
+
 ## TL;DR
 
 This is a big one. You're going to need to do the following:

diff --git a/exercises/02.color-tokens/06.solution.css-variables/README.mdx b/exercises/02.color-tokens/06.solution.css-variables/README.mdx
@@ -1,5 +1,7 @@
 # CSS Variables
 
+<EpicVideo url="https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/css-variables/solution" />
+
 Fewwwwww.
 
 Congratulations — you've just done your first (but GIANT) step towards building support for **dark mode** and **multiple color themes** in your application!
diff --git a/exercises/02.color-tokens/07.problem.dark-mode/README.mdx b/exercises/02.color-tokens/07.problem.dark-mode/README.mdx
@@ -1,5 +1,7 @@
 # Dark Mode
 
+<EpicVideo url="https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/dark-mode" />
+
 You've seen that you can change the color values "on the fly" like so:
 
 ```tsx

diff --git a/exercises/02.color-tokens/07.solution.dark-mode/README.mdx b/exercises/02.color-tokens/07.solution.dark-mode/README.mdx
@@ -1,5 +1,7 @@
 # Dark Mode
 
+<EpicVideo url="https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/dark-mode/solution" />
+
 Good work!
 
 You now know how to implement dark mode in any project.

diff --git a/exercises/02.color-tokens/08.problem.multi-theme/README.mdx b/exercises/02.color-tokens/08.problem.multi-theme/README.mdx
@@ -1,5 +1,7 @@
 # Multi-Theme Support
 
+<EpicVideo url="https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/multi-theme" />
+
 Let's use the exact same approach to add support for multiple color themes — independent of dark mode.
 
 ## Add a new theme scope

diff --git a/exercises/02.color-tokens/08.solution.multi-theme/README.mdx b/exercises/02.color-tokens/08.solution.multi-theme/README.mdx
@@ -1,5 +1,7 @@
 # Multi-Theme Support
 
+<EpicVideo url="https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/multi-theme/solution" />
+
 Nicely done — You're an absolute legend!
 
 With this technique, you can create 3, 5 or even 100 different, dark-mode-capable color themes for your project 🤯

diff --git a/exercises/02.color-tokens/FINISHED.mdx b/exercises/02.color-tokens/FINISHED.mdx
@@ -1,5 +1,7 @@
 # Color Design Tokens
 
+<EpicVideo url="https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/color-design-tokens-outro" />
+
 Hot damn, this was a big segment.
 
 But I'm pretty sure that the value it unlocks made it worth it!

diff --git a/exercises/02.color-tokens/README.mdx b/exercises/02.color-tokens/README.mdx
@@ -1,5 +1,7 @@
 # Color Design Tokens
 
+<EpicVideo url="https://www.epicweb.dev/tutorials/tailwind-color-tokens/color-design-tokens/intro-color-design-tokens" />
+
 In this exercise, we'll implement the custom colors in our Tailwind CSS project.
 
 We'll start with the "raw" colors, and then add a layer of abstraction for semantic color tokens.

diff --git a/exercises/03.tailwind-v4/01.problem.theme-config-in-css/README.mdx b/exercises/03.tailwind-v4/01.problem.theme-config-in-css/README.mdx
@@ -1,5 +1,7 @@
 # Theme Configuration in CSS
 
+<EpicVideo url="https://www.epicweb.dev/tutorials/tailwind-color-tokens/conversion-to-tailwind-v4/theme-configuration-in-css" />
+
 Our project is already setup with Tailwind CSS v4.
 
 <callout-warning>

diff --git a/exercises/03.tailwind-v4/01.solution.theme-config-in-css/README.mdx b/exercises/03.tailwind-v4/01.solution.theme-config-in-css/README.mdx
@@ -1,5 +1,7 @@
 # Theme Configuration in CSS
 
+<EpicVideo url="https://www.epicweb.dev/tutorials/tailwind-color-tokens/conversion-to-tailwind-v4/theme-configuration-in-css/solution" />
+
 Sweet — that was a lot simpler, wasn't it?
 
 ## Wait. We're not done yet.

diff --git a/exercises/03.tailwind-v4/02.problem.simplification/README.mdx b/exercises/03.tailwind-v4/02.problem.simplification/README.mdx
@@ -1,5 +1,6 @@
 # Simplification
 
+<EpicVideo url="https://www.epicweb.dev/tutorials/tailwind-color-tokens/conversion-to-tailwind-v4/simplification" />
 All this time, we've been defining CSS variables for raw color tokens, and then set up scoped semantic tokens that reference those raw colors.
 
 It makes sense, that's sort of how the Figma file was setup.

diff --git a/exercises/03.tailwind-v4/02.solution.simplification/README.mdx b/exercises/03.tailwind-v4/02.solution.simplification/README.mdx
@@ -1,5 +1,6 @@
 # Simplification
 
+<EpicVideo url="https://www.epicweb.dev/tutorials/tailwind-color-tokens/conversion-to-tailwind-v4/simplification/solution" />
 ## Ummm, that was annoying to do
 
 Yep — I don't disagree. But here's something to lift up your mood again:

diff --git a/exercises/03.tailwind-v4/FINISHED.mdx b/exercises/03.tailwind-v4/FINISHED.mdx
@@ -1,5 +1,7 @@
 # Conversion to Tailwind v4
 
+<EpicVideo url="https://www.epicweb.dev/tutorials/tailwind-color-tokens/conversion-to-tailwind-v4/conversion-to-tailwind-v4-outro" />
+
 That's it — you are **done**!
 
 ## Dark mode & theming, in Tailwind v3 & v4

diff --git a/exercises/03.tailwind-v4/README.mdx b/exercises/03.tailwind-v4/README.mdx
@@ -1,5 +1,7 @@
 # Conversion to Tailwind v4
 
+<EpicVideo url="https://www.epicweb.dev/tutorials/tailwind-color-tokens/conversion-to-tailwind-v4/conversion-to-tailwind-v4-introduction" />
+
 Tailwind CSS v4 is coming!
 
 Or maybe it's _already_ here by the time you're reading this.

diff --git a/exercises/FINISHED.mdx b/exercises/FINISHED.mdx
@@ -1,5 +1,7 @@
 # Tailwind CSS Color Tokens 🎨
 
+<EpicVideo url="https://www.epicweb.dev/tutorials/tailwind-color-tokens/tailwind-css-color-tokens-outro/tailwind-css-color-tokens-outro" />
+
 Hooray! You're all done! 👏👏
 
 I'd really appreciate if you can take some time to complete the full workshop feedback form.

diff --git a/exercises/README.mdx b/exercises/README.mdx
@@ -1,5 +1,7 @@
 # Tailwind CSS Color Tokens 🎨
 
+<EpicVideo url="https://www.epicweb.dev/tutorials/tailwind-color-tokens/tailwind-css-color-tokens-introduction/introduction-to-tailwind-css-color-tokens" />
+
 In this workshop, we're going to define **semantic color tokens** in Tailwind CSS, to adhere to a convention set in a Figma design File.
 
 We'll cover both Tailwind CSS v3 and v4 approaches 🔥
@@ -76,7 +78,6 @@ Here's a visual representation of this design token layer, as presented on the [
 
 <img src="/images/token-layers.png" />
 
-
 ## Let's do this!
 
 We've got plenty to cover. Whenever you're ready — let's dive in 🤿