diff --git a/docs/img/styling/background-blur.webp b/docs/img/styling/background-blur.webp new file mode 100644 index 0000000000..3c7a0859de Binary files /dev/null and b/docs/img/styling/background-blur.webp differ diff --git a/docs/user-guide/design-systems/design-tokens.njk b/docs/user-guide/design-systems/design-tokens.njk index 390959a2ed..53f58cdb99 100644 --- a/docs/user-guide/design-systems/design-tokens.njk +++ b/docs/user-guide/design-systems/design-tokens.njk @@ -31,6 +31,7 @@ desc: Learn how to create, manage and apply Penpot Design Tokens using W3C DTCG
  • Description: You can also choose to add a description to your token.

    • Once you have named the token and assigned it a value, click Save to store the token and start referencing it.

    +

    Token value fields suggest existing tokens as you type. Pick a suggestion to insert a reference, or keep typing a custom value.

    Referencing tokens into values (aliases)

    When assigning a value to a token, you can reference existing tokens - these are called aliases at the DTCG Glossary.

    @@ -111,7 +112,7 @@ desc: Learn how to create, manage and apply Penpot Design Tokens using W3C DTCG

    This ensures the spacing is at least 8, even if the base token is smaller.

    Editing a token

    -

    Tokens can be edited by right-clicking the token and selecting Edit token. This will allow you to change the tokens name, value and description. Once the changes are made, click Save.

    +

    Tokens can be edited by right-clicking the token and selecting Edit token. This will allow you to change the tokens name, value and description. Value fields offer the same token suggestions as when creating a token. Once the changes are made, click Save.

    Tokens edit
    @@ -141,12 +142,15 @@ desc: Learn how to create, manage and apply Penpot Design Tokens using W3C DTCG
  • Size and position: width, height, x, y
  • Rotation and border radius
  • Layout spacing: gaps, paddings, margins, min and max widths and heights
    • -
  • Typography: letter spacing and line height
    • +
  • Typography: letter spacing, line height, and composite typography tokens on text layers
  • Stroke width
  • Shadows: x, y, blur, spread
  • Blur amount

    • Click the token control on a field to open a list of applicable tokens from your active sets and themes. Select a token to apply it; a token pill shows the bound token. Use the pill menu to detach the token when you need a custom value again.

    +

    On text layers, the Typography section shows a composite typography token row when one is applied. Open the token list from the section header to pick or switch tokens without going to the Tokens panel. Hover a token name to see its resolved values (font family, size, weight, and the rest).

    +

    When you multi-select text layers that share typography tokens, the Typography section shows the applied token. If the selection mixes different tokens, detach them from there or apply a new one to the whole selection.

    +

    Typography options in the dropdown list show resolved values on hover, so you can tell styles apart before applying them.

    When a numeric field has a token applied, drag-to-change is disabled for that field. Edit the token or detach it first.

    Token list on a numeric field in the Design sidebar @@ -528,6 +532,7 @@ ExtraBold Italic

    Apply a Typography token

    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.

    +

    Apply it from the Tokens panel, or from the Typography section in the Design sidebar when a text layer is selected.

    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

    diff --git a/docs/user-guide/designing/color-stroke.njk b/docs/user-guide/designing/color-stroke.njk index d6d227fac3..012b45b264 100644 --- a/docs/user-guide/designing/color-stroke.njk +++ b/docs/user-guide/designing/color-stroke.njk @@ -57,7 +57,7 @@ desc: Style your designs with Penpot's options! Learn about color fills, gradien
  • Color type - Solid, gradient, or image.
  • Sliders - Easily manage settings like brightness, saturation or opacity.
  • Values - Set precise color values. Available formats depend on the selected color model.
    • -
  • Libraries - Switch between recent colors and libraries.
    • +
  • Libraries - Switch between recent colors and libraries. Color tokens in a library can be shown as a grid or a list. Use the list view when you need to scan names or work with long token lists.
  • Color palette - A quick launcher of the palette with the selected library.
    • @@ -116,6 +116,7 @@ desc: Style your designs with Penpot's options! Learn about color fills, gradien
  • Style - solid, dotted, dashed, mixed
  • Visibility - show or hide the stroke without removing it
    • +

    When the style is set to dashed, two extra fields appear to control the dash and gap length in pixels.

    You can add as many strokes as you want to the same layer.

    Multiple strokes diff --git a/docs/user-guide/designing/layers.njk b/docs/user-guide/designing/layers.njk index 474432b66c..2c55a7a7ca 100644 --- a/docs/user-guide/designing/layers.njk +++ b/docs/user-guide/designing/layers.njk @@ -461,8 +461,18 @@ You can choose to edit individual nodes or create new ones. Press Esc

    Blur

    -

    You can set a blur for each and every layer at Penpot.

    -

    Applying a lot and/or big values for blurs can affect Penpot’s performance as it requires a lot from the browser.

    +

    You can add blur effects to layers from the Design sidebar. Penpot supports two types:

    + +

    Background blur is not included in exported files yet (PNG, SVG, PDF, and others). The exporter still uses the legacy SVG renderer, so the effect only shows in the workspace and View mode. Export support is a current priority and will land in an upcoming release.

    +
    + Colorful shapes behind a frosted panel with background blur applied +
    Background blur affects the layers behind the shape, not the shape itself.
    +
    +

    Click + in the Blur section to add an effect. You can apply both types on the same layer. Use the type selector to switch between them, the eye icon to show or hide an effect without removing it, and the value field to set the blur amount.

    +

    Applying many or large blur values can affect Penpot’s performance, as it requires a lot from the browser.