diff --git a/docs/img/design-tokens/37-tokens-shadow-individual.webp b/docs/img/design-tokens/37-tokens-shadow-individual.webp new file mode 100644 index 0000000000..6246cc21df Binary files /dev/null and b/docs/img/design-tokens/37-tokens-shadow-individual.webp differ diff --git a/docs/img/design-tokens/38-tokens-shadow-reference.webp b/docs/img/design-tokens/38-tokens-shadow-reference.webp new file mode 100644 index 0000000000..9f7d9928f9 Binary files /dev/null and b/docs/img/design-tokens/38-tokens-shadow-reference.webp differ diff --git a/docs/user-guide/design-systems/design-tokens.njk b/docs/user-guide/design-systems/design-tokens.njk index 3a328fe5a8..b259a4bff0 100644 --- a/docs/user-guide/design-systems/design-tokens.njk +++ b/docs/user-guide/design-systems/design-tokens.njk @@ -455,6 +455,43 @@ ExtraBold Italic

A Typography composite token can be applied to a full text layer to set all typography properties at once. This lets you manage complete text styles using a single token instead of combining multiple individual ones.

When applying a Typography composite token to a layer, any previously applied Typography composite token or style will be detached. The same happens in reverse. Only one of them can be active at a time.

+

Shadow

+

Shadow tokens are composite entities that encapsulate the properties of one or more shadows into a single token definition. This token can contain a single shadow or an array of multiple shadows that can be reordered.

+

Shadow tokens support both Drop Shadow and Inner Shadow types. When creating or editing a shadow token, you can select the type of shadow you want to use. The default selection is Drop Shadow.

+
+ Shadow token creation with individual values +
+ +

Shadow properties

+

Each shadow within a shadow token contains a set of properties that define how the shadow appears:

+ +

Each property within a shadow token can reference existing tokens or be assigned hardcoded values. Shadows can also reference other shadow tokens (the type of shadow must match when using references).

+

Not all properties are mandatory to save a shadow token. Some can be empty (and will be computed as 0). Only the color property is mandatory. In an array of shadows, if any shadow does not have the color set, the form cannot be saved.

+ +

Creating shadow tokens

+

To create a shadow token, click on the + next to Shadow in the Tokens panel. Shadow tokens can be created in two ways:

+ +
+ Shadow token creation with reference +
+

When creating a shadow with individual values, the color value starts empty, but the other inputs have default values (X: 4, Y: 4, Blur: 4, Spread: 0). You can reorder shadows by hovering over a shadow form and using the reorder button to drag it to a different position.

+

You can also reference another existing shadow token instead of defining each property manually. When doing so, Penpot resolves all shadow properties from the referenced token.

+ +

Applying shadow tokens

+

Shadow tokens can be applied to any layer type. Clicking on a shadow token will apply it to the selected layer. Right-clicking on a shadow token shows the context menu with the Shadow option to apply it.

+

Text elements in CSS do not support inner shadows, but Penpot does, since it uses the filter property internally instead of the box-shadow property.

+

When applying a shadow token, any existing shadow on the layer will be overridden (whether it's a raw shadow or an applied token shadow). If the token contains an array of shadows, each shadow will be added in the same order as in the creation form.

+

In Penpot, an element can have multiple shadows, but only one token of the same type can be applied. This means that applying a second shadow token would override the first one, regardless of how many shadows the shape currently has.