From 39d2dfcbcdbd1bb28748f826635a1617987f7bec Mon Sep 17 00:00:00 2001
From: gtmnayan <50981692+gtm-nayan@users.noreply.github.com>
Date: Tue, 12 Apr 2022 23:46:32 +0545
Subject: [PATCH] [docs] style directive tutorial (#7161)

---
 .../01-classes/app-a/App.svelte                |  0
 .../01-classes/app-b/App.svelte                |  0
 .../01-classes/text.md                         |  0
 .../02-class-shorthand/app-a/App.svelte        |  0
 .../02-class-shorthand/app-b/App.svelte        |  0
 .../02-class-shorthand/text.md                 |  0
 .../03-inline-styles/app-a/App.svelte          | 15 +++++++++++++++
 .../03-inline-styles/app-b/App.svelte          | 15 +++++++++++++++
 .../03-inline-styles/text.md                   | 10 ++++++++++
 .../04-style-directive/app-a/App.svelte        | 15 +++++++++++++++
 .../04-style-directive/app-b/App.svelte        | 15 +++++++++++++++
 .../04-style-directive/text.md                 | 18 ++++++++++++++++++
 .../tutorial/13-advanced-styling/meta.json     |  3 +++
 site/content/tutorial/13-classes/meta.json     |  3 ---
 14 files changed, 91 insertions(+), 3 deletions(-)
 rename site/content/tutorial/{13-classes => 13-advanced-styling}/01-classes/app-a/App.svelte (100%)
 rename site/content/tutorial/{13-classes => 13-advanced-styling}/01-classes/app-b/App.svelte (100%)
 rename site/content/tutorial/{13-classes => 13-advanced-styling}/01-classes/text.md (100%)
 rename site/content/tutorial/{13-classes => 13-advanced-styling}/02-class-shorthand/app-a/App.svelte (100%)
 rename site/content/tutorial/{13-classes => 13-advanced-styling}/02-class-shorthand/app-b/App.svelte (100%)
 rename site/content/tutorial/{13-classes => 13-advanced-styling}/02-class-shorthand/text.md (100%)
 create mode 100644 site/content/tutorial/13-advanced-styling/03-inline-styles/app-a/App.svelte
 create mode 100644 site/content/tutorial/13-advanced-styling/03-inline-styles/app-b/App.svelte
 create mode 100644 site/content/tutorial/13-advanced-styling/03-inline-styles/text.md
 create mode 100644 site/content/tutorial/13-advanced-styling/04-style-directive/app-a/App.svelte
 create mode 100644 site/content/tutorial/13-advanced-styling/04-style-directive/app-b/App.svelte
 create mode 100644 site/content/tutorial/13-advanced-styling/04-style-directive/text.md
 create mode 100644 site/content/tutorial/13-advanced-styling/meta.json
 delete mode 100644 site/content/tutorial/13-classes/meta.json

diff --git a/site/content/tutorial/13-classes/01-classes/app-a/App.svelte b/site/content/tutorial/13-advanced-styling/01-classes/app-a/App.svelte
similarity index 100%
rename from site/content/tutorial/13-classes/01-classes/app-a/App.svelte
rename to site/content/tutorial/13-advanced-styling/01-classes/app-a/App.svelte
diff --git a/site/content/tutorial/13-classes/01-classes/app-b/App.svelte b/site/content/tutorial/13-advanced-styling/01-classes/app-b/App.svelte
similarity index 100%
rename from site/content/tutorial/13-classes/01-classes/app-b/App.svelte
rename to site/content/tutorial/13-advanced-styling/01-classes/app-b/App.svelte
diff --git a/site/content/tutorial/13-classes/01-classes/text.md b/site/content/tutorial/13-advanced-styling/01-classes/text.md
similarity index 100%
rename from site/content/tutorial/13-classes/01-classes/text.md
rename to site/content/tutorial/13-advanced-styling/01-classes/text.md
diff --git a/site/content/tutorial/13-classes/02-class-shorthand/app-a/App.svelte b/site/content/tutorial/13-advanced-styling/02-class-shorthand/app-a/App.svelte
similarity index 100%
rename from site/content/tutorial/13-classes/02-class-shorthand/app-a/App.svelte
rename to site/content/tutorial/13-advanced-styling/02-class-shorthand/app-a/App.svelte
diff --git a/site/content/tutorial/13-classes/02-class-shorthand/app-b/App.svelte b/site/content/tutorial/13-advanced-styling/02-class-shorthand/app-b/App.svelte
similarity index 100%
rename from site/content/tutorial/13-classes/02-class-shorthand/app-b/App.svelte
rename to site/content/tutorial/13-advanced-styling/02-class-shorthand/app-b/App.svelte
diff --git a/site/content/tutorial/13-classes/02-class-shorthand/text.md b/site/content/tutorial/13-advanced-styling/02-class-shorthand/text.md
similarity index 100%
rename from site/content/tutorial/13-classes/02-class-shorthand/text.md
rename to site/content/tutorial/13-advanced-styling/02-class-shorthand/text.md
diff --git a/site/content/tutorial/13-advanced-styling/03-inline-styles/app-a/App.svelte b/site/content/tutorial/13-advanced-styling/03-inline-styles/app-a/App.svelte
new file mode 100644
index 00000000000..b86665ce553
--- /dev/null
+++ b/site/content/tutorial/13-advanced-styling/03-inline-styles/app-a/App.svelte
@@ -0,0 +1,15 @@
+<script>
+	let bgOpacity = 0.5;
+	$: color = bgOpacity < 0.6 ? '#000' : '#fff';
+</script>
+
+<input type="range" min="0" max="1" step="0.1" bind:value={bgOpacity} />
+
+<p>This is a paragraph.</p>
+
+<style>
+	p {
+		font-family: "Comic Sans MS", cursive;
+		background: rgba(255, 62, 0, var(--opacity));
+	}
+</style>
diff --git a/site/content/tutorial/13-advanced-styling/03-inline-styles/app-b/App.svelte b/site/content/tutorial/13-advanced-styling/03-inline-styles/app-b/App.svelte
new file mode 100644
index 00000000000..58280f71ad6
--- /dev/null
+++ b/site/content/tutorial/13-advanced-styling/03-inline-styles/app-b/App.svelte
@@ -0,0 +1,15 @@
+<script>
+	let bgOpacity = 0.5;
+	$: color = bgOpacity < 0.6 ? '#000' : '#fff';
+</script>
+
+<input type="range" min="0" max="1" step="0.1" bind:value={bgOpacity} />
+
+<p style="color: {color}; --opacity: {bgOpacity};">This is a paragraph.</p>
+
+<style>
+	p {
+		font-family: "Comic Sans MS", cursive;
+		background: rgba(255, 62, 0, var(--opacity));
+	}
+</style>
diff --git a/site/content/tutorial/13-advanced-styling/03-inline-styles/text.md b/site/content/tutorial/13-advanced-styling/03-inline-styles/text.md
new file mode 100644
index 00000000000..f5589583587
--- /dev/null
+++ b/site/content/tutorial/13-advanced-styling/03-inline-styles/text.md
@@ -0,0 +1,10 @@
+---
+title: Inline styles
+---
+
+Apart from adding styles inside style tags, you can also add styles to individual elements using the style attribute. Usually you will want to do styling through CSS, but this can come in handy for dynamic styles, especially when combined with CSS custom properties.
+
+Add the following style attribute to the paragraph element:
+`style="color: {color}; --opacity: {bgOpacity};"`
+
+Great, now you can style the paragraph using variables that change based on your input without having to make a class for every possible value.
diff --git a/site/content/tutorial/13-advanced-styling/04-style-directive/app-a/App.svelte b/site/content/tutorial/13-advanced-styling/04-style-directive/app-a/App.svelte
new file mode 100644
index 00000000000..58280f71ad6
--- /dev/null
+++ b/site/content/tutorial/13-advanced-styling/04-style-directive/app-a/App.svelte
@@ -0,0 +1,15 @@
+<script>
+	let bgOpacity = 0.5;
+	$: color = bgOpacity < 0.6 ? '#000' : '#fff';
+</script>
+
+<input type="range" min="0" max="1" step="0.1" bind:value={bgOpacity} />
+
+<p style="color: {color}; --opacity: {bgOpacity};">This is a paragraph.</p>
+
+<style>
+	p {
+		font-family: "Comic Sans MS", cursive;
+		background: rgba(255, 62, 0, var(--opacity));
+	}
+</style>
diff --git a/site/content/tutorial/13-advanced-styling/04-style-directive/app-b/App.svelte b/site/content/tutorial/13-advanced-styling/04-style-directive/app-b/App.svelte
new file mode 100644
index 00000000000..aade861b435
--- /dev/null
+++ b/site/content/tutorial/13-advanced-styling/04-style-directive/app-b/App.svelte
@@ -0,0 +1,15 @@
+<script>
+	let bgOpacity = 0.5;
+	$: color = bgOpacity < 0.6 ? "#000" : "#fff";
+</script>
+
+<input type="range" min="0" max="1" step="0.1" bind:value={bgOpacity} />
+
+<p style:color style:--opacity={bgOpacity}>This is a paragraph.</p>
+
+<style>
+	p {
+		font-family: "Comic Sans MS", cursive;
+		background: rgba(255, 62, 0, var(--opacity));
+	}
+</style>
diff --git a/site/content/tutorial/13-advanced-styling/04-style-directive/text.md b/site/content/tutorial/13-advanced-styling/04-style-directive/text.md
new file mode 100644
index 00000000000..88b4e058853
--- /dev/null
+++ b/site/content/tutorial/13-advanced-styling/04-style-directive/text.md
@@ -0,0 +1,18 @@
+---
+title: The style directive
+---
+
+Being able to set CSS properties dynamically is nice. However, this can get unwieldy if you have to write a long string. Mistakes like missing any of the semicolons could make the whole string invalid. Therefore, Svelte provides a nicer way to write inline styles with the style directive.
+
+Change the style attribute of the paragraph to the following:
+
+```html
+<p 
+	style:color 
+	style:--opacity="{bgOpacity}"
+>
+```
+
+The style directive shares a few qualities with the class directive. You can use a shorthand when the name of the property and the variable are the same. So `style:color="{color}"` can be written as just `style:color`.
+
+Similar to the class directive, the style directive will take precedence if you try to set the same property through a style attribute.
diff --git a/site/content/tutorial/13-advanced-styling/meta.json b/site/content/tutorial/13-advanced-styling/meta.json
new file mode 100644
index 00000000000..2b76d024e49
--- /dev/null
+++ b/site/content/tutorial/13-advanced-styling/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Advanced styling"
+}
\ No newline at end of file
diff --git a/site/content/tutorial/13-classes/meta.json b/site/content/tutorial/13-classes/meta.json
deleted file mode 100644
index 9c2b8a41f67..00000000000
--- a/site/content/tutorial/13-classes/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Classes"
-}
\ No newline at end of file