slint/docs/astro
Tasuku Suzuki f24ad34a03
Some checks are pending
autofix.ci / format_fix (push) Waiting to run
autofix.ci / lint_typecheck (push) Waiting to run
autofix.ci / ci (push) Blocked by required conditions
Add support for CSS conic-gradient 'from <angle>' syntax (#9830)
* Add support for CSS conic-gradient 'from <angle>' syntax

Implement rotation support for conic gradients by adding the 'from <angle>'
syntax, which rotates the entire gradient by the specified angle.

- Add `from_angle` field to ConicGradient expression
- Parse 'from <angle>' syntax in compiler (defaults to 0deg when omitted)
- Normalize angles to 0-1 range (0.0 = 0°, 1.0 = 360°)
- Add `ConicGradientBrush::rotated_stops()` method that:
  * Applies rotation by adding from_angle to each stop position
  * Adds boundary stops at 0.0 and 1.0 with interpolated colors
  * Handles stops outside [0, 1] range for boundary interpolation
- Update all renderers (Skia, FemtoVG, Qt, Software) to use rotated_stops()

The rotation is applied at render time by the rotated_stops() method,
which ensures all renderers consistently handle the gradient rotation.

* Add screenshot to rotated conic gradient docs example

Wraps the rotated conic gradient example in CodeSnippetMD to automatically
generate and display a visual screenshot of the gradient rotation effect.
This makes it easier for users to understand how the 'from' parameter rotates
the gradient.

* Make ConicGradientBrush fields private

The from_angle and stops fields don't need to be pub since:
- Rust code in the same module can access them without pub
- C++ FFI access works through cbindgen-generated struct (C++ struct members are public by default)

* Optimize ConicGradientBrush::rotated_stops to avoid allocations

- Changed return type from Vec to SharedVector
- When from_angle is zero, returns a clone of internal SharedVector
  (only increments reference count instead of allocating new Vec)
- Removed break from duplicate position separation loop to handle
  all duplicate pairs, not just the first one
- Updated documentation to match actual implementation

* Remove automatic sorting in ConicGradientBrush::new() to match CSS spec

- CSS conic-gradient does not automatically sort color stops
- Stops are processed in the order specified by the user
- Changed boundary stop interpolation logic to use max_by/min_by
  instead of relying on sorted order
- This allows CSS-style hard transitions when stops are out of order

* Move conic gradient rotation processing to construction time

Major changes:
- ConicGradientBrush::new() now applies rotation and boundary stop
  processing immediately, instead of deferring to rotated_stops()
- Removed rotated_stops() method - backends now use stops() directly
- Changed to LinearGradientBrush pattern: store angle in first dummy stop
- Added angle() method to retrieve the stored angle
- Maintained #[repr(transparent)] by removing from_angle field
- All backends updated: rotated_stops() -> stops()
  - Qt backend
  - Skia renderer
  - femtovg renderer
  - Software renderer

C++ API changes:
- Added FFI function slint_conic_gradient_new() for C++ to call Rust's new()
- Updated make_conic_gradient() to call FFI function instead of manually
  constructing SharedVector
- Ensures C++-created gradients get full rotation processing

Benefits:
- Eliminates per-frame rotation calculations
- Reduces memory usage (no from_angle field)
- Consistent with LinearGradientBrush design
- C++ and Rust APIs now produce identical results

* Change ConicGradientBrush::new() from_angle parameter to use degrees

- Changed from_angle parameter from normalized form (0.0-1.0) to degrees
- Matches LinearGradientBrush API convention (angle in degrees)
- Updated internal conversion: from_angle / 360.0 for normalization
- Stores angle as-is in degrees in the first dummy stop
- FFI function slint_conic_gradient_new() passes degrees directly

Example usage:
  ConicGradientBrush::new(90.0, stops)  // 90 degrees
  LinearGradientBrush::new(90.0, stops) // 90 degrees (consistent)

* Fix ConicGradient color transformation methods to preserve angle

Changed brighter(), darker(), transparentize(), and with_alpha() methods
to clone and modify the gradient in-place instead of calling new().

- Clones the existing gradient (preserves angle and rotation)
- Modifies only color stops (skips first stop which contains angle)
- Avoids re-running expensive rotation processing
- Maintains the original angle information

Before: ConicGradientBrush::new(0.0, ...) // Lost angle information
After:  Clone + modify colors in-place     // Preserves angle

* Use premultiplied alpha interpolation for conic gradient colors

- Changed interpolate_color() to use premultiplied RGBA interpolation
- Updated signature to match Color::mix convention (&Color, factor)
- Added documentation explaining why we can't use Color::mix() here
  (Sass algorithm vs CSS gradient color interpolation)
- Reference: https://www.w3.org/TR/css-images-4/#color-interpolation

This ensures correct visual interpolation of semi-transparent colors
in gradient boundaries, following CSS gradient specification.

* Run rustfmt on conic gradient code

* Fix ConicGradientBrush edge cases and add comprehensive tests

- Handle stops that are all below 0.0 or all above 1.0
- Add default transparent gradient when no valid stops remain
- Add 7 unit tests covering basic functionality and edge cases

* Apply clippy suggestion: use retain() instead of filter().collect()

* Fix radial-gradient parsing to allow empty gradients

Allow @radial-gradient(circle) without color stops, fixing syntax test
regression from commit 820ae2b04.

The previous logic required a comma after 'circle', but it should only
error if there's something that is NOT a comma.

* Fix conic-gradient syntax test error markers

Update error markers to match actual compiler error positions.
The 'from 2' case produces two errors:
- One at the @conic-gradient expression level
- One at the literal '2' position

Auto-updated using SLINT_SYNTAX_TEST_UPDATE=1.

* Refactor ConicGradientBrush epsilon adjustment and update tests

- Move epsilon adjustment for first stop into rotation block
  (only needed when rotation is applied)
- Update property_view test to reflect boundary stops added by
  ConicGradientBrush::new()

* Update conic-gradient screenshot reference image

Update the reference screenshot to match the current rendering output.
The small pixel differences (1% different pixels, max color diff 3.46)
are due to minor rounding differences in the conic gradient implementation.

* Fix ConicGradientBrush C++ FFI to avoid C-linkage return type error

Refactored ConicGradientBrush construction to match LinearGradientBrush
pattern, fixing macOS Clang error about returning C++ types from extern "C"
functions.

Changes:
- Rust: Split ConicGradientBrush::new into simple construction + separate
  normalize_stops() and apply_rotation() methods
- Rust: Added FFI functions slint_conic_gradient_normalize_stops() and
  slint_conic_gradient_apply_rotation() that take pointers (no return value)
- C++: Construct SharedVector directly in make_conic_gradient(), then call
  Rust functions via pointer (matching LinearGradientBrush pattern)
- Optimized both methods to only copy when changes are needed

This resolves the macOS Clang error:
"'slint_conic_gradient_new' has C-linkage specified, but returns incomplete
type 'ConicGradientBrush' which could be incompatible with C"

The new approach maintains ABI compatibility while keeping complex gradient
processing logic in Rust.

* Fix C++ header generation to avoid GradientStop redefinition error

Resolves the macOS CI compilation error where GradientStop and
ConicGradientBrush were being defined in multiple headers
(slint_color_internal.h, slint_image_internal.h, and slint_brush_internal.h).

Changes:
- cbindgen.rs: Add ConicGradientBrush and FFI functions to slint_brush_internal.h include list
- cbindgen.rs: Add GradientStop, ConicGradientBrush, and FFI functions to exclude list for other headers
- slint_color.h: Add forward declaration for ConicGradientBrush
- slint_color.h: Add friend declaration for ConicGradientBrush to allow access to Color::inner

Root cause: After adding extern "C" functions in graphics/brush.rs,
cbindgen automatically detects and tries to include them in all headers
that use graphics/brush.rs as a source. The exclude list + filter logic
ensures these types only appear in slint_brush_internal.h.

This fixes the C++ compilation errors:
- "redefinition of 'GradientStop'"
- "ConicGradientBrush does not name a type"
- "Color::inner is private within this context"

* Prepare ConicGradientBrush FFI for Rust 2024 edition

Update FFI functions to use the new `#[unsafe(no_mangle)]` attribute
syntax and safe function signatures in preparation for Rust 2024 edition.

- Add `#![allow(unsafe_code)]` to graphics module for `#[unsafe(no_mangle)]`
- Add `#[cfg(feature = "ffi")]` to conditionally compile FFI functions
- Change from raw pointers to safe references (&mut)
- Remove manual null checks and unsafe blocks
2025-11-13 16:05:16 +01:00
..
public docs.slint.dev google search results missing favicon (#8841) 2025-07-03 15:33:44 +03:00
src Add support for CSS conic-gradient 'from <angle>' syntax (#9830) 2025-11-13 16:05:16 +01:00
tests Allow easier sharing of common web files (#8869) 2025-07-08 16:44:06 +03:00
.gitignore 1.9 Organise docs folder. (#7005) 2024-12-05 15:40:04 +02:00
astro.config.mjs Docs: add a third party libraries section 2025-09-26 10:09:22 +02:00
biome.json build(deps): bump @biomejs/biome from 2.2.6 to 2.3.2 (#9926) 2025-11-03 10:47:12 +02:00
ec.config.mjs Allow easier sharing of common web files (#8869) 2025-07-08 16:44:06 +03:00
package.json Bump version number to 1.15.0 2025-10-24 14:28:17 +00:00
playwright.config.ts Allow easier sharing of common web files (#8869) 2025-07-08 16:44:06 +03:00
README.md Fix typos (#8421) 2025-05-12 13:03:59 +02:00
tsconfig.json 1.9 Organise docs folder. (#7005) 2024-12-05 15:40:04 +02:00
writing-style-guide.md Add User-Centric Messaging in writing style guide 2025-06-12 10:08:27 +02:00

Slint Documentation

Prerequisites

  • Rust
  • Node.js
  • pnpm

🚀 Project Structure

The documentation site is built with Astro Starlight and reuses its project structure.

docs/
├── public/
├── src/
│   ├── assets/
│   ├── content/
│   │   ├── docs/
│   │   └── config.ts
│   └── env.d.ts
├── tests/
├── astro.config.mjs
├── package.json
├── tsconfig.json
└──

Starlight looks for .md or .mdx files in the src/content/docs/ directory. Each file is exposed as a route based on its file name.

Images can be added to src/assets/ and embedded in Markdown with a relative link. They will be optimized for download size and also their width and height will be extracted so the framework can render them without ugly content shifts.

Static assets, like favicons, can be placed in the public/ directory. Note that images in this folder will not be processed and optimized by Starlight.

Building the docs

The docs use a lot of autogenerated content. First create all the screenshots which will be placed at src/assets/generated/.

cargo run -p slint-docsnapper -- docs/astro/src/content --overwrite

Then generate the slint auto generated content.

cargo xtask slintdocs

This xtask also installs the npm dependencies and builds the docs. The equivalent of:

pnpm i
pnpm run build

This will build the site and place it in dist/.

Live edit the docs

To run the live hot reloading dev server run in the astro directory:

cd docs/astro/
pnpm start

This will start the dev server at localhost:4321/docs/.

🧞 Commands

All commands are run from the root of the project, from a terminal:

Command Action
pnpm i Installs dependencies
pnpm start Starts local dev server at localhost:4321
pnpm build Build your production site to ./dist/
pnpm preview Preview your build locally, before deploying
pnpm run astro ... Run CLI commands like astro add, astro check
npm run astro -- --help Get help using the Astro CLI

👀 Want to learn more about Astro and Starlight?

Check out Starlights docs, read the Astro documentation, or jump into the Astro Discord server.