diff --git a/docs/assets/plugins/code-block/code-block.css b/docs/assets/plugins/code-block/code-block.css
index 72b5a5cb..ce93ac5d 100644
--- a/docs/assets/plugins/code-block/code-block.css
+++ b/docs/assets/plugins/code-block/code-block.css
@@ -39,7 +39,7 @@
   bottom: 0;
   width: 1.75rem;
   font-size: 20px;
-  color: var(--sl-color-neutral-700);
+  color: var(--sl-color-neutral-600);
   background-color: var(--sl-color-neutral-0);
   border-left: solid 1px var(--sl-color-neutral-200);
   border-top-right-radius: 3px;
@@ -91,7 +91,7 @@
   font-size: 0.7rem;
   font-weight: 500;
   text-transform: uppercase;
-  color: var(--sl-color-neutral-700);
+  color: var(--sl-color-neutral-600);
   padding: 0 1rem;
   cursor: pointer;
 }
@@ -110,7 +110,7 @@
 
 .code-block__button--selected {
   font-weight: 700;
-  color: var(--sl-color-primary-700);
+  color: var(--sl-color-primary-600);
 }
 
 .code-block__button--codepen {
@@ -132,13 +132,13 @@
   box-shadow: 0 0 0 1px var(--sl-color-primary-400);
   border-right-color: transparent;
   background-color: var(--sl-color-primary-50);
-  color: var(--sl-color-primary-700);
+  color: var(--sl-color-primary-600);
   z-index: 1;
 }
 
 .code-block__button:focus-visible {
   outline: none;
-  color: var(--sl-color-primary-700);
+  color: var(--sl-color-primary-600);
   border-color: var(--sl-color-primary-400);
   border-right-color: transparent;
   background-color: var(--sl-color-primary-50);
@@ -153,7 +153,7 @@
   align-items: center;
   justify-content: center;
   width: 100%;
-  color: var(--sl-color-neutral-700);
+  color: var(--sl-color-neutral-600);
   cursor: pointer;
   -webkit-appearance: none;
 }
@@ -185,7 +185,7 @@
 
 .markdown-section .docsify-copy-code-button.copied {
   animation: pulse 0.75s;
-  --pulse-color: var(--sl-color-neutral-700);
+  --pulse-color: var(--sl-color-neutral-600);
 }
 
 @keyframes pulse {
@@ -214,7 +214,7 @@
 }
 
 .markdown-section .docsify-copy-code-button:active {
-  background-color: var(--sl-color-neutral-700);
+  background-color: var(--sl-color-neutral-600);
   transform: scale(0.92);
 }
 
diff --git a/docs/components/input.md b/docs/components/input.md
index 75619eba..0c132632 100644
--- a/docs/components/input.md
+++ b/docs/components/input.md
@@ -18,6 +18,34 @@ const App = () => <SlInput />;
 
 ## Examples
 
+### Labels
+
+Use the `label` attribute to give the input an accessible label. For labels that contain HTML, use the `label` slot instead.
+
+```html preview
+<sl-input label="What is your name?"></sl-input>
+```
+
+```jsx react
+import { SlIcon, SlInput } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => <SlInput label="What is your name?" />;
+```
+
+### Help Text
+
+Add descriptive help text to an input with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead.
+
+```html preview
+<sl-input label="Nickname" help-text="What would you like people to call you?"></sl-input>
+```
+
+```jsx react
+import { SlIcon, SlInput } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => <SlInput label="Nickname" help-text="What would you like people to call you?" />;
+```
+
 ### Placeholders
 
 Use the `placeholder` attribute to add a placeholder.
@@ -234,32 +262,4 @@ const App = () => (
 );
 ```
 
-### Labels
-
-Use the `label` attribute to give the input an accessible label. For labels that contain HTML, use the `label` slot instead.
-
-```html preview
-<sl-input label="What is your name?"></sl-input>
-```
-
-```jsx react
-import { SlIcon, SlInput } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => <SlInput label="What is your name?" />;
-```
-
-### Help Text
-
-Add descriptive help text to an input with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead.
-
-```html preview
-<sl-input label="Nickname" help-text="What would you like people to call you?"></sl-input>
-```
-
-```jsx react
-import { SlIcon, SlInput } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => <SlInput label="Nickname" help-text="What would you like people to call you?" />;
-```
-
 [component-metadata:sl-input]
diff --git a/docs/components/progress-bar.md b/docs/components/progress-bar.md
index 7d94339d..b8732a82 100644
--- a/docs/components/progress-bar.md
+++ b/docs/components/progress-bar.md
@@ -16,20 +16,6 @@ const App = () => <SlProgressBar value={50} />;
 
 ## Examples
 
-### Custom Height
-
-Use the `--height` custom property to set the progress bar's height.
-
-```html preview
-<sl-progress-bar value="50" style="--height: 6px;"></sl-progress-bar>
-```
-
-```jsx react
-import { SlProgressBar } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => <SlProgressBar value={50} style={{ '--height': '6px' }} />;
-```
-
 ### Labels
 
 Use the `label` attribute to label the progress bar and tell assistive devices how to announce it.
@@ -44,6 +30,20 @@ import { SlProgressBar } from '@shoelace-style/shoelace/dist/react';
 const App = () => <SlProgressBar value="50" label="Upload progress" />;
 ```
 
+### Custom Height
+
+Use the `--height` custom property to set the progress bar's height.
+
+```html preview
+<sl-progress-bar value="50" style="--height: 6px;"></sl-progress-bar>
+```
+
+```jsx react
+import { SlProgressBar } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => <SlProgressBar value={50} style={{ '--height': '6px' }} />;
+```
+
 ### Showing Values
 
 Use the default slot to show a value.
diff --git a/docs/components/range.md b/docs/components/range.md
index da6b0a3a..dfbe056d 100644
--- a/docs/components/range.md
+++ b/docs/components/range.md
@@ -18,6 +18,39 @@ const App = () => <SlRange />;
 
 ## Examples
 
+### Labels
+
+Use the `label` attribute to give the range an accessible label. For labels that contain HTML, use the `label` slot instead.
+
+```html preview
+<sl-range label="Volume" min="0" max="100"></sl-input>
+```
+
+```jsx react
+import { SlRange } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => <SlRange label="Volume" min={0} max={100} />;
+```
+
+### Help Text
+
+Add descriptive help text to a range with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead.
+
+```html preview
+<sl-range
+  label="Volume"
+  help-text="Controls the volume of the current song."
+  min="0"
+  max="100"
+></sl-input>
+```
+
+```jsx react
+import { SlRange } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => <SlRange label="Volume" help-text="Controls the volume of the current song." min={0} max={100} />;
+```
+
 ### Min, Max, and Step
 
 Use the `min` and `max` attributes to set the range's minimum and maximum values, respectively. The `step` attribute determines the value's interval when increasing and decreasing.
@@ -119,37 +152,4 @@ import { SlRange } from '@shoelace-style/shoelace/dist/react';
 const App = () => <SlRange min={0} max={100} step={1} tooltipFormatter={value => `Total - ${value}%`} />;
 ```
 
-### Labels
-
-Use the `label` attribute to give the range an accessible label. For labels that contain HTML, use the `label` slot instead.
-
-```html preview
-<sl-range label="Volume" min="0" max="100"></sl-input>
-```
-
-```jsx react
-import { SlRange } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => <SlRange label="Volume" min={0} max={100} />;
-```
-
-### Help Text
-
-Add descriptive help text to a range with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead.
-
-```html preview
-<sl-range
-  label="Volume"
-  help-text="Controls the volume of the current song."
-  min="0"
-  max="100"
-></sl-input>
-```
-
-```jsx react
-import { SlRange } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => <SlRange label="Volume" help-text="Controls the volume of the current song." min={0} max={100} />;
-```
-
 [component-metadata:sl-range]
diff --git a/docs/components/textarea.md b/docs/components/textarea.md
index 9d37c915..5b4c80a0 100644
--- a/docs/components/textarea.md
+++ b/docs/components/textarea.md
@@ -18,6 +18,34 @@ const App = () => <SlTextarea />;
 
 ## Examples
 
+### Labels
+
+Use the `label` attribute to give the textarea an accessible label. For labels that contain HTML, use the `label` slot instead.
+
+```html preview
+<sl-textarea label="Comments"></sl-textarea>
+```
+
+```jsx react
+import { SlTextarea } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => <SlTextarea label="Comments" />;
+```
+
+### Help Text
+
+Add descriptive help text to a textarea with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead.
+
+```html preview
+<sl-textarea label="Feedback" help-text="Please tell us what you think."> </sl-textarea>
+```
+
+```jsx react
+import { SlTextarea } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => <SlTextarea label="Feedback" help-text="Please tell us what you think." />;
+```
+
 ### Rows
 
 Use the `rows` attribute to change the number of text rows that get shown.
@@ -100,34 +128,6 @@ const App = () => (
 );
 ```
 
-### Labels
-
-Use the `label` attribute to give the textarea an accessible label. For labels that contain HTML, use the `label` slot instead.
-
-```html preview
-<sl-textarea label="Comments"></sl-textarea>
-```
-
-```jsx react
-import { SlTextarea } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => <SlTextarea label="Comments" />;
-```
-
-### Help Text
-
-Add descriptive help text to a textarea with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead.
-
-```html preview
-<sl-textarea label="Feedback" help-text="Please tell us what you think."> </sl-textarea>
-```
-
-```jsx react
-import { SlTextarea } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => <SlTextarea label="Feedback" help-text="Please tell us what you think." />;
-```
-
 ### Prevent Resizing
 
 By default, textareas can be resized vertically by the user. To prevent resizing, set the `resize` attribute to `none`.