diff --git a/packages/stacks-docs/src/docs/public/brand/color/index.md b/packages/stacks-docs/src/docs/public/brand/color/index.md
index 7c174835c3..3dcc25bf13 100644
--- a/packages/stacks-docs/src/docs/public/brand/color/index.md
+++ b/packages/stacks-docs/src/docs/public/brand/color/index.md
@@ -26,13 +26,13 @@ Our color palette sets the visual tone of the brand and ensures consistency acro
Orange is the most distinctive color in our palette, rooted in our original brand hue. It should have a presence across our designs, appearing whenever accessibility and layout allow. We use it with intention and at varying scales, ensuring it remains a consistent and recognizable part of our visual identity.
-
+
## Stack color combinations
When designing with a three-sided graphic stack, follow these guidelines for color selection.
-
+
## Background colors
@@ -50,13 +50,13 @@ Business and general audiences have different needs, and our color usage should
The examples below illustrate how we apply color for Stack Overflow Business. Hierarchy plays a key role to make sure the emphasis is in the right place, and the color balance is right. The more restrained approach adds more sophistication for the Stack Overflow Business audience.
-
+
## General color usage
The examples below show how we apply color for a general audience, such as Stack Overflow Public Platforms. Hierarchy plays a key role to make sure the emphasis is in the right place and the color balance is right.
-
+
## Label color guidance
@@ -72,7 +72,7 @@ Color also comes through in our highlighted headlines. The guidance below shows
## Things to avoid
-
+
## Accessibility
diff --git a/packages/stacks-docs/src/docs/public/brand/logo/index.md b/packages/stacks-docs/src/docs/public/brand/logo/index.md
index d16318d02d..fec7e454e1 100644
--- a/packages/stacks-docs/src/docs/public/brand/logo/index.md
+++ b/packages/stacks-docs/src/docs/public/brand/logo/index.md
@@ -53,27 +53,27 @@ We have two approaches to sub-brand lockups. The approach you use should be dete
Use the diagram below to determine how sub-brand lockups, used at a large scale, should be created.
-
+
### Sub-brand small usage
Use the diagram below to determine how sub-brand lockups, used at a large scale, should be created.
-
+
### External partnership lockups
External partnerships use a simpler lockup, where the height of both logos should always align.
-
+
### Things to avoid
-
+
## Symbol
-
+
### Symbol lockup
diff --git a/packages/stacks-docs/src/docs/public/brand/motion.md b/packages/stacks-docs/src/docs/public/brand/motion.md
index b5226ff930..2eeb3586c7 100644
--- a/packages/stacks-docs/src/docs/public/brand/motion.md
+++ b/packages/stacks-docs/src/docs/public/brand/motion.md
@@ -16,15 +16,15 @@ The three guiding principles of our motion language align to strengthen our bran
Click
-
+
Follow
-
+
Snapback
-
+
@@ -39,11 +39,11 @@ This should take place over 12 frames or less: 2 for the intro frame, maximum 10
Click
-
+
Example
-
+
@@ -78,11 +78,11 @@ This should take place over maximum 22 frames and include 1 frame skip in the mi
Follow
-
+
Example
-
+
@@ -122,11 +122,11 @@ This should never be longer than 20 frames to keep the final movement as a snap
Snapback
-
+
Example
-
+
@@ -165,11 +165,11 @@ The symbol and lockup animations utilize a combination of the behaviors above.
Primary lockup
-
+
Symbol
-
+
@@ -180,14 +180,14 @@ Type animations utilize the Click behavior. While headlines animate word-by-word
Headlines
-
+
-
+
Body copy
-
+
@@ -199,13 +199,13 @@ We use these transitions to wipe screens or swap between content at a scale. We
-
+
-
+
-
+
@@ -213,13 +213,13 @@ The above transitions can also be applied to more complex layouts.
-
+
-
+
-
+
@@ -229,7 +229,7 @@ When introducing people or suppling the viewers with additional information in v
-
+
@@ -240,11 +240,11 @@ The logo animations can also be used to start or end longer videos.
Intro card
-
+
Outro card
-
+
@@ -255,7 +255,7 @@ Our bespoke cursor animations can be used to show interactions both on desktop a
Desktop
-
+
The desktop cursor animation follows a combination of our principles. The position movement uses the easings set in the Follow behavior, while the rotation animates with a Snapback movement. On click, the cursor scales down with a slight overshoot and changes color to Stack Orange for roughly 10 frames.
@@ -265,7 +265,7 @@ Our bespoke cursor animations can be used to show interactions both on desktop a
Mobile
-
+
The mobile cursor animation uses slightly smoother easings than the desktop cursor (70%-100%, rather than 100%-100%). Similarly to the desktop cursor, it changes color on click (to off-black) and on hold/drag (to Stack Orange). In addition to this color change, when dragging content the mobile cursor animates with a simple smear over the duration of the position movement.
@@ -277,15 +277,15 @@ Our bespoke cursor animations can be used to show interactions both on desktop a
Dragging
-
+
Pressing
-
+
Interaction
-
+
@@ -296,21 +296,21 @@ Our core motion principles can also be applied to UI when showing digital intera
Body copy
-
+
Headlines
-
+
Buttons
-
+
Hero buttons
-
+
@@ -318,7 +318,7 @@ Our core motion principles can also be applied to UI when showing digital intera
-
+
@@ -327,54 +327,54 @@ Our core motion principles can also be applied to UI when showing digital intera
Do not use easings other than the ones provided
-
+
Do not start text animation too far from its final position
-
+
Do not use different accent colors on type
-
+
Do not animate body copy line-by-line
-
+
Do not disregard reading timings
-
+
Do not transition elements in opposite directions
-
+
Do not use different accent colors on cursor
-
+
Do not exaggerate the cursor rotation
-
+
Do not rotate the mobile cursor
-
+
Do not use fades
-
+
diff --git a/packages/stacks-docs/src/docs/public/brand/stack-system/index.md b/packages/stacks-docs/src/docs/public/brand/stack-system/index.md
index 73085e571c..4a96d2db1a 100644
--- a/packages/stacks-docs/src/docs/public/brand/stack-system/index.md
+++ b/packages/stacks-docs/src/docs/public/brand/stack-system/index.md
@@ -15,13 +15,13 @@ In our design system we use three distinct types of graphics: functional graphic
-
+
-
+
-
+
@@ -29,48 +29,48 @@ In our design system we use three distinct types of graphics: functional graphic
Our 2D stack graphics are designed for moments where simplicity and clarity are key.They work especially well for infographics and thematic content focused on specifictopics such as networks or systems. Because of their straightforward nature, they aremost often used in B2B contexts, where communication benefits from a more directand less expressive approach.
-
+
## 2D stacks in use
-
+
## Expressive container graphics
Our expressive container graphics extend the stacking nature of our brand identity into layouts. These compositions are more dynamic and are best suited for applications with minimal, cohesive messaging. They work especially well for cover images in Instagram carousels or for CTAs. Below, we demonstrate the wide range of container styles available for use.
-
+
### How to Use Expressive Containers
The composition below shows how type, color, and 3D graphics come together within our stacking layouts. Use this as a benchmark when creating new graphics.
-
+
-
+
### In use
The stacking motif not only shapes our marketing materials but also guides the way we design certain product features and micro-interactions.
-
+
## 3D stacks
Our 3D stacks are the most expressive part of our brand, so they’re reserved for the most expressive contexts. They’re best used in high-level brand moments, setting the overall tone rather than addressing specific topics. We deploy these shapes in various ways across the brand, often as large, colorful crops that bring energy and impact to a composition.
-
+
### Generating shapes
We have a [Figma file of pre-made collages](https://www.figma.com/design/FEdyUP08JZQWfjSKwt5AOo/Base-shapes-for-3d-heros?node-id=0-1&t=v6OzktCCxojq0rI5-1), for creating new simple shapes you can use [i3D Figma plugin](https://www.figma.com/community/plugin/1387823712562916211), and more complicated shapes we have a custom build tool called [Stack Trace](https://trace.stackoverflow.design/). There is also tooling to batch create shapes from predefined shapes, perspectives and color palettes in the [GitHub repo](https://github.com/StackExchange/StackTrace).
-[](https://trace.stackoverflow.design/)
+[](https://trace.stackoverflow.design/)
### In use
-
+
### Things to avoid
-
+
diff --git a/packages/stacks-docs/src/docs/public/brand/typography/TypographyCharacter.svelte b/packages/stacks-docs/src/docs/public/brand/typography/TypographyCharacter.svelte
index 62bc6d85e6..bc09d23629 100644
--- a/packages/stacks-docs/src/docs/public/brand/typography/TypographyCharacter.svelte
+++ b/packages/stacks-docs/src/docs/public/brand/typography/TypographyCharacter.svelte
@@ -2,6 +2,7 @@
import { onMount } from 'svelte';
import { fade } from 'svelte/transition';
import { SvelteSet } from 'svelte/reactivity';
+ import { getCharacterLabel } from '$lib/characterLabel';
import Grid from '$components/Grid.svelte';
import GridColumn from '$components/GridColumn.svelte';
@@ -24,6 +25,7 @@
let loading = $state(true);
let switching = $state(false);
let selectedGlyph = $state(null);
+ let selectedCode = $state(null);
let showPoints = $state(false);
let showMetrics = $state(true);
@@ -120,7 +122,7 @@
if (!glyph) return;
selectedGlyph = glyph;
- _glyphIndex = glyph.index;
+ selectedCode = char.codePointAt(0);
}
function formatUnicode(unicode) {
@@ -255,7 +257,9 @@
{#each availableChars as { char, code } (code)}
@@ -176,17 +178,17 @@ When the padding amount is not sufficient enough to support a double ring on the
-
+
-
Toggle default
+
Toggle default
-
+
-
Toggle focused
+
Toggle focused
diff --git a/packages/stacks-docs/src/docs/public/system/components/editor/index.md b/packages/stacks-docs/src/docs/public/system/components/editor/index.md
index 09cf0b71d7..a130fa6485 100644
--- a/packages/stacks-docs/src/docs/public/system/components/editor/index.md
+++ b/packages/stacks-docs/src/docs/public/system/components/editor/index.md
@@ -29,7 +29,7 @@ import "@stackoverflow/stacks-editor/styles.css";
new StacksEditor(
document.querySelector("#editor-container"),
"*Hello* World!",
- {}
+ { elementAttributes: { "aria-label": "Editor content" } }
);
```
@@ -51,7 +51,7 @@ new StacksEditor(
new window.stacksEditor.StacksEditor(
document.querySelector("#editor-container"),
"*Hello* World!",
- {}
+ { elementAttributes: { "aria-label": "Editor content" } }
);
```
@@ -70,13 +70,13 @@ There are several options you can pass to the Stacks Editor.
new window.stacksEditor.StacksEditor(
document.querySelector("#editor-example-1"),
"",
- {}
+ { elementAttributes: { "aria-label": "Empty editor example" } }
);
```
-
+
### Textarea content with tables enabled
@@ -88,7 +88,10 @@ There are several options you can pass to the Stacks Editor.
new window.stacksEditor.StacksEditor(
document.querySelector("#editor-example-2"),
document.querySelector("#editor-content-2").value,
- { parserFeatures: { tables: true } }
+ {
+ parserFeatures: { tables: true },
+ elementAttributes: { "aria-label": "Editor example with tables" }
+ }
);
```
@@ -96,7 +99,7 @@ There are several options you can pass to the Stacks Editor.
diff --git a/packages/stacks-docs/src/docs/public/system/components/toggle-switch.md b/packages/stacks-docs/src/docs/public/system/components/toggle-switch.md
index b1c191420a..42c04b5691 100644
--- a/packages/stacks-docs/src/docs/public/system/components/toggle-switch.md
+++ b/packages/stacks-docs/src/docs/public/system/components/toggle-switch.md
@@ -106,16 +106,16 @@ Toggles switches can be extended to choose between two or more states where each
checked
value="value1"
/>
- First value…
- Second value…
- Third value…
@@ -129,9 +129,9 @@ Toggles switches can be extended to choose between two or more states where each
-
+
-
+
@@ -140,11 +140,11 @@ Toggles switches can be extended to choose between two or more states where each
-
+
-
+
-
+
diff --git a/packages/stacks-docs/src/docs/public/system/forms/select.md b/packages/stacks-docs/src/docs/public/system/forms/select.md
index 467d35ea84..59948ddf40 100644
--- a/packages/stacks-docs/src/docs/public/system/forms/select.md
+++ b/packages/stacks-docs/src/docs/public/system/forms/select.md
@@ -261,7 +261,7 @@ Validation states provides the user feedback based on their interaction (or lack