From b72de2dc8f8e875424df24f3557163f994c296f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?andr=C3=A9s=20gonz=C3=A1lez?= Date: Thu, 15 Jan 2026 09:09:08 +0100 Subject: [PATCH] :books: Add shadow token documentation (#8082) --- .../37-tokens-shadow-individual.webp | Bin 0 -> 14662 bytes .../38-tokens-shadow-reference.webp | Bin 0 -> 14544 bytes .../design-systems/design-tokens.njk | 37 ++++++++++++++++++ 3 files changed, 37 insertions(+) create mode 100644 docs/img/design-tokens/37-tokens-shadow-individual.webp create mode 100644 docs/img/design-tokens/38-tokens-shadow-reference.webp 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 0000000000000000000000000000000000000000..6246cc21dff88cf58d0a2cc90f1ed78ad444e30c GIT binary patch literal 14662 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 IUVeVUCOT{!r~m)} literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..9f7d9928f9b0b2d93375bf9ae13e9c984d99380e GIT binary patch literal 14544 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 literal 0 HcmV?d00001 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:

+
    +
  • Color: The color of the shadow. Accepts the same values as color tokens (Hex, RGB, RGBA, ARGB, HSL, HSLA), and you can reference existing color tokens. The color picker is available when defining the value.
  • +
  • X offset: The horizontal offset of the shadow. Can be unit or unitless, and accepts negative values. You can use a number or reference a number or dimension token.
  • +
  • Y offset: The vertical offset of the shadow. Can be unit or unitless, and accepts negative values. You can use a number or reference a number or dimension token.
  • +
  • Blur: The blur radius of the shadow. Can be unit or unitless. You can use a number or reference a number or dimension token.
  • +
  • Spread: The spread radius of the shadow. Can be unit or unitless. You can use a number or reference a number or dimension token.
  • +
  • Type: Whether the shadow is a drop shadow or an inner shadow. Selected via a dropdown menu, with Drop Shadow as the default.
  • +
+

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:

+
    +
  • Individual values: You can create one shadow or multiple shadows with individual property values. Click the + button to add more shadows to the array. New shadows are added at the top of the list.
  • +
  • Single reference: You can reference another existing shadow token. When using a single reference, you cannot add more than one shadow. The resolved value will display the shadow or list of shadows that the referenced token contains.
  • +
+
+ 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.