Download the PHP package medienbaecker/kirby-token-field without Composer

On this page you can find all versions of the php package medienbaecker/kirby-token-field. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.

FAQ

After the download, you have to make one include require_once('vendor/autoload.php');. After that you have to import the classes with use statements.

Example:
If you use only one package a project is not needed. But if you use more then one package, without a project it is not possible to import the classes with use statements.

In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
Some PHP packages are not free to download and because of that hosted in private repositories. In this case some credentials are needed to access such packages. Please use the auth.json textarea to insert credentials, if a package is coming from a private repository. You can look here for more information.

  • Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
  • To use Composer is sometimes complicated. Especially for beginners.
  • Composer needs much resources. Sometimes they are not available on a simple webspace.
  • If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
  • Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Please rate this library. Is it a good library?

Example code of medienbaecker/kirby-token-field

Informations about the package kirby-token-field

Kirby Token Field

Kirby's color field is great for visually selecting colours but I've wanted to save color-primary instead of #d74894 since forever.

This plugin adds a token field type that lets you select from visual options while saving whatever you want. It can not only be used for colours but also fonts, spacing values, shadows, or any other design token. So far I've built previews for colours, font families, font sizes, spacing, shadows, border radii, and plain text.

Installation

[!TIP] You can also install this plugin manually by downloading the repository and placing it in site/plugins/token-field.

Usage

The option key (e.g. color-red) is what gets saved to your content file. The template option wraps the value for the visual preview — so var(--color-red) is used as the CSS colour for the swatch, as long as --color-red is defined in your panel.css.

Display

By default, the option key is used for the visual preview, too. Use display to decouple the preview from the saved value:

You can even display multiple values, for example for things like background and foreground colour combinations:

Dynamic Options

Options can be fetched dynamically using Kirby's query language, just like the native select, radio, and checkboxes fields. For example, you could create a custom site method that returns your design tokens:

Common return formats are detected automatically — no text or value templates needed:

Pages, files, and other collections also work out of the box with Kirby's defaults (e.g. page title and ID).

For custom property names, use the explicit query syntax:

display works here too — pass a string, array, or object template and it'll be resolved per item. See contrast for an object-form example.

The template option works on top of dynamic options — the resolved value is passed through the template before being used for the preview.

Default Value

Set a specific default or use default: true to auto-select the first option. This is especially useful for dynamic options where the values can change over time:

Preview Types

Set the preview option to change how options are displayed. Default is color.

color

Colour swatches with checkerboard background for transparency.

contrast

Renders "Aa" in a text colour on a background colour. Needs a display object with background and color:

font-family

Renders "Lorem Ipsum" in the given font family. The text can be customised.

font-size

Renders "Aa" at the actual font size. The text can be customised.

size

A filled square that grows to the token value. Useful for spacing scales.

shadow

Shows a box shadow on a white card.

radius

Shows a shape with the given border radius.

text

Renders the option label as a text pill. Useful when no visual preview makes sense.

Structure Field Preview

The token field automatically provides a compact preview when used inside a structure field — no extra configuration needed. Visual previews like colours, shadows, and radii show a small swatch, while text-based types show the option label.

Custom preview components receive a compact Boolean prop when rendered inside a structure table. You can use it to adapt your preview for the smaller space, or simply ignore it.

Custom Previews

You can register your own preview types via panel.plugin(). The token field checks for a globally registered component named k-token-preview-{type} before falling back to the built-in previews. See the preview-examples/ folder for working examples.

Every custom preview plugin needs three files:

Your component receives two props: value (the resolved preview value) and text (the configured preview text). Use the k-token-preview base class to inherit shared styles like the selection outline.

Structure table support

When your custom preview renders inside a structure table, two things change:

  1. CSS custom property — --token-preview-size is set to a compact size. Use var(--token-preview-size, var(--input-height)) instead of a fixed var(--input-height) for width/height so your preview scales down automatically.
  2. compact prop — a Boolean prop is passed as true. You can use this if you need to change behaviour beyond just sizing (e.g. hiding labels, simplifying rendering).

Using CSS Variables in Previews

If your options reference CSS custom properties (e.g. var(--color-primary)), the Panel needs to know about them. Create a panel.css in your assets folder and import your colour definitions:

Then register it in your config.php:

This makes your design tokens available in the Panel, so colour swatches render with the actual colours.

Options

You can customise the preview text for font previews in your config.php:

The defaults are "Lorem Ipsum" for font-family and "Aa" for font-size.

License

MIT

All versions of kirby-token-field with dependencies

PHP Build Version
Package Version
Requires php Version ^8.2
getkirby/composer-installer Version ^1.2
Composer command for our command line client (download client) This client runs in each environment. You don't need a specific PHP version etc. The first 20 API calls are free. Standard composer command

The package medienbaecker/kirby-token-field contains the following files

Loading the files please wait ...