or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

globals.md index.md plugins.md ui-components.md

tile.json

UI Components

Complete CSS styling system for all CKEditor 5 UI components including buttons, forms, dropdowns, toolbars, panels, dialogs, and navigation elements.

Capabilities

Button Component Styling

Comprehensive CSS styling for all button types and states in CKEditor 5.

/**
 * Button component CSS imports
 */
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/components/button/button.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/components/button/switchbutton.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/components/button/listitembutton.css';

/**
 * Base button styles - automatically applied by CKEditor 5
 */
.ck.ck-button,
a.ck.ck-button {
    white-space: nowrap;
    cursor: default;
    vertical-align: middle;
    padding: var(--ck-spacing-tiny);
    text-align: center;
    min-width: var(--ck-ui-component-min-height);
    min-height: var(--ck-ui-component-min-height);
    line-height: 1;
    font-size: inherit;
    border: 1px solid transparent;
    transition: box-shadow .2s ease-in-out, border .2s ease-in-out;
    -webkit-appearance: none;
}

/**
 * Button state classes applied by CKEditor 5
 */
.ck.ck-button:hover {
    background: var(--ck-color-button-default-hover-background);
}

.ck.ck-button.ck-on {
    background: var(--ck-color-button-on-background);
    color: var(--ck-color-button-on-color);
}

.ck.ck-button.ck-button-action {
    background: var(--ck-color-button-action-background);
    color: var(--ck-color-button-action-text);
}

.ck.ck-button:disabled,
.ck.ck-button.ck-disabled {
    opacity: var(--ck-disabled-opacity);
    cursor: default;
}

Switch Button Component Styling

CSS styling for toggle/switch button controls.

/**
 * Switch button CSS import
 */
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/components/button/switchbutton.css';

/**
 * Switch button styles - for toggle controls
 */
.ck.ck-button.ck-switchbutton {
    border: 0;
    width: 2.6153846154em;    /* ~34px when base font size is 13px */
    height: 1.6923076923em;   /* ~22px when base font size is 13px */
    background: var(--ck-color-switch-button-off-background);
    border-radius: 100px;
    padding: 0;
    transition: background .4s ease, box-shadow .2s ease-in-out;
}

.ck.ck-button.ck-switchbutton.ck-on {
    background: var(--ck-color-switch-button-on-background);
}

.ck.ck-button.ck-switchbutton .ck-button__toggle {
    border-radius: 100px;
    width: 1.3846153846em;    /* ~18px when base font size is 13px */
    height: 1.3846153846em;   /* ~18px when base font size is 13px */
    background: var(--ck-color-switch-button-inner-background);
    box-shadow: var(--ck-color-switch-button-inner-shadow) 0 0 0 1px;
    transition: transform .3s ease;
}

Form Component Styling

Complete form element styling including inputs, textareas, labels, and form layouts.

/**
 * Form component CSS imports
 */
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/components/input/input.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/components/textarea/textarea.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/components/label/label.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/components/form/form.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/components/labeledinput/labeledinput.css';

/**
 * Text input styling - applied by CKEditor 5
 */
.ck.ck-input {
    background: var(--ck-color-input-background);
    border: 1px solid var(--ck-color-input-border);
    border-radius: var(--ck-border-radius);
    padding: var(--ck-spacing-small);
    transition: border-color .2s ease-in-out;
    min-width: 15em;
    font: inherit;
    color: var(--ck-color-input-text);
}

.ck.ck-input:focus {
    outline: none;
    border-color: var(--ck-color-focus-border);
    box-shadow: var(--ck-focus-outer-shadow) 0 0 0 2px;
}

.ck.ck-input.ck-error {
    border-color: var(--ck-color-input-error-border);
    animation: ck-text-field-shake .3s ease both;
}

/**
 * Textarea styling - applied by CKEditor 5
 */
.ck.ck-textarea {
    background: var(--ck-color-input-background);
    border: 1px solid var(--ck-color-input-border);
    border-radius: var(--ck-border-radius);
    padding: var(--ck-spacing-small);
    font: inherit;
    color: var(--ck-color-input-text);
    resize: vertical;
    min-height: 8em;
}

/**
 * Label styling - applied by CKEditor 5
 */
.ck.ck-label {
    font-weight: var(--ck-font-weight-bold);
    color: var(--ck-color-base-text);
}

Dropdown Component Styling

CSS styling for dropdown and menu selection controls.

/**
 * Dropdown component CSS imports
 */
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown/dropdown.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown/listdropdown.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown/toolbardropdown.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown/splitbutton.css';

/**
 * Base dropdown styling - applied by CKEditor 5
 */
.ck.ck-dropdown {
    display: inline-block;
    position: relative;
}

.ck.ck-dropdown__button {
    width: 100%;
}

.ck.ck-dropdown__arrow {
    pointer-events: none;
    width: 0.7em;
    margin-left: var(--ck-spacing-small);
}

/**
 * Dropdown panel styling - applied by CKEditor 5
 */
.ck.ck-dropdown__panel {
    background: var(--ck-color-dropdown-panel-background);
    border: 1px solid var(--ck-color-dropdown-panel-border);
    border-radius: var(--ck-border-radius);
    box-shadow: var(--ck-drop-shadow), 0 0;
    min-width: 100%;
}

.ck.ck-dropdown__panel.ck-dropdown__panel_sw {
    border-top-left-radius: 0;
}

.ck.ck-dropdown__panel.ck-dropdown__panel_se {
    border-top-right-radius: 0;
}

Toolbar Component Styling

CSS styling for toolbar containers and items in CKEditor 5.

/**
 * Toolbar component CSS imports
 */
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/components/toolbar/toolbar.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/components/toolbar/blocktoolbar.css';

/**
 * Main toolbar styling - applied by CKEditor 5
 */
.ck.ck-toolbar {
    background: var(--ck-color-toolbar-background);
    padding: 0 var(--ck-spacing-small);
    border: 1px solid var(--ck-color-toolbar-border);
    border-radius: var(--ck-border-radius);
}

.ck.ck-toolbar .ck.ck-toolbar__separator {
    height: var(--ck-icon-size);
    width: 1px;
    min-width: 1px;
    background: var(--ck-color-toolbar-border);
    margin-top: var(--ck-spacing-small);
    margin-bottom: var(--ck-spacing-small);
}

.ck.ck-toolbar > .ck-toolbar__items > *:not(.ck-toolbar__line-break) {
    margin-right: var(--ck-spacing-small);
}

/**
 * Block toolbar styling - floating toolbar for blocks
 */
.ck.ck-block-toolbar-button {
    position: absolute;
    z-index: var(--ck-z-default);
    color: var(--ck-color-base-text);
    font-size: 1.1em;
    width: 2.2em;
    height: 2.2em;
    line-height: 2.2em;
    text-align: center;
    border: 1px solid var(--ck-color-base-border);
    border-radius: var(--ck-border-radius);
    background: var(--ck-color-base-background);
}

Panel Component Styling

CSS styling for panel and popup floating UI elements.

/**
 * Panel component CSS imports
 */
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/components/panel/balloonpanel.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/components/panel/balloonrotator.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/components/panel/fakepanel.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/components/panel/stickypanel.css';

/**
 * Balloon panel styling - floating panels and popups
 */
.ck.ck-balloon-panel {
    position: absolute;
    z-index: var(--ck-z-modal);
    background: var(--ck-color-panel-background);
    border: 1px solid var(--ck-color-panel-border);
    border-radius: var(--ck-border-radius);
    box-shadow: var(--ck-drop-shadow), 0 0;
    min-height: 15px;
}

.ck.ck-balloon-panel::before,
.ck.ck-balloon-panel::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
}

/**
 * Sticky panel styling - panels that stick to viewport
 */
.ck.ck-sticky-panel {
    position: sticky;
    top: 0;
    z-index: var(--ck-z-modal);
    background: var(--ck-color-base-background);
    border-bottom: 1px solid var(--ck-color-base-border);
}

Dialog Component Styling

CSS styling for modal dialogs and overlays.

/**
 * Dialog component CSS imports
 */
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dialog/dialog.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dialog/dialogactions.css';

/**
 * Modal dialog styling - applied by CKEditor 5
 */
.ck.ck-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--ck-z-modal);
    background: hsla(0, 0%, 0%, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ck.ck-dialog {
    background: var(--ck-color-dialog-background);
    border: 1px solid var(--ck-color-panel-border);
    border-radius: var(--ck-border-radius);
    box-shadow: var(--ck-drop-shadow), 0 0;
    max-width: 90vw;
    max-height: 90vh;
    overflow: auto;
}

.ck.ck-dialog__header {
    background: var(--ck-color-base-foreground);
    border-bottom: 1px solid var(--ck-color-dialog-form-header-border);
    padding: var(--ck-spacing-large);
}

.ck.ck-dialog__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--ck-spacing-standard);
    padding: var(--ck-spacing-large);
}

List Component Styling

CSS styling for list and list item components in dropdowns and menus.

/**
 * List component CSS import
 */
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/components/list/list.css';

/**
 * List container styling - applied by CKEditor 5
 */
.ck.ck-list {
    background: var(--ck-color-list-background);
    border-radius: 0;
}

.ck.ck-list__item {
    cursor: default;
    min-width: 12em;
}

.ck.ck-list__button {
    min-height: var(--ck-ui-component-min-height);
    padding: calc(0.2 * var(--ck-line-height-base) * var(--ck-font-size-base));
    text-align: left;
    border-radius: 0;
    width: 100%;
    border: 0;
}

.ck.ck-list__button:hover {
    background: var(--ck-color-list-button-hover-background);
}

.ck.ck-list__button.ck-on {
    background: var(--ck-color-list-button-on-background);
    color: var(--ck-color-list-button-on-text);
}

Icon Component Styling

CSS styling for icon and symbol elements in UI components.

/**
 * Icon component CSS import
 */
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/components/icon/icon.css';

/**
 * Icon styling - for SVG icons in buttons and UI elements
 */
.ck.ck-icon {
    vertical-align: middle;
    color: inherit;
    cursor: inherit;
    width: var(--ck-icon-size);
    height: var(--ck-icon-size);
    font-size: 0.833em;
}

.ck.ck-button .ck-icon {
    margin-left: calc(-1 * var(--ck-spacing-small));
    margin-right: var(--ck-spacing-small);
    margin-top: calc(-1 * var(--ck-spacing-small));
    margin-bottom: calc(-1 * var(--ck-spacing-small));
}

Tooltip Component Styling

CSS styling for tooltip contextual help and information.

/**
 * Tooltip component CSS import
 */
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/components/tooltip/tooltip.css';

/**
 * Tooltip styling - contextual help popups
 */
.ck.ck-tooltip {
    position: absolute;
    z-index: var(--ck-z-modal);
    background: var(--ck-color-tooltip-background);
    color: var(--ck-color-tooltip-text);
    font-size: 0.75em;
    line-height: 1.5;
    padding: var(--ck-spacing-small);
    border-radius: var(--ck-border-radius);
    pointer-events: none;
    max-width: 12em;
}

.ck.ck-tooltip::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border: 5px solid transparent;
}

.ck.ck-tooltip_s::after {
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-color: var(--ck-color-tooltip-background);
}

Menu Bar Component Styling

CSS styling for menu bar navigation components.

/**
 * Menu bar component CSS imports
 */
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/components/menubar/menubar.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/components/menubar/menubarmenu.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/components/menubar/menubarmenubutton.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/components/menubar/menubarmenulistitem.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/components/menubar/menubarmenulistitembutton.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/components/menubar/menubarmenupanel.css';

Additional UI Components

Various specialized UI components with dedicated styling.

/**
 * Additional UI component CSS imports
 */
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/components/autocomplete/autocomplete.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/components/collapsible/collapsible.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/components/colorgrid/colorgrid.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/components/colorselector/colorselector.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/components/formheader/formheader.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/components/labeledfield/labeledfieldview.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/components/responsive-form/responsiveform.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/components/search/search.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/components/spinner/spinner.css';

Usage Examples

Custom Button Styling:

/* Override button appearance */
.ck.ck-button.my-custom-button {
    background: linear-gradient(to bottom, #f8f9fa, #e9ecef);
    border: 1px solid #dee2e6;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.ck.ck-button.my-custom-button:hover {
    background: linear-gradient(to bottom, #e9ecef, #dee2e6);
    transform: translateY(1px);
}

Custom Toolbar Layout:

/* Vertical toolbar layout */
.ck.ck-toolbar.vertical-toolbar {
    flex-direction: column;
    width: 3em;
    align-items: stretch;
}

.ck.ck-toolbar.vertical-toolbar > .ck-toolbar__items {
    flex-direction: column;
    align-items: stretch;
}

Custom Dialog Styling:

/* Larger dialog with custom styling */
.ck.ck-dialog.large-dialog {
    min-width: 600px;
    min-height: 400px;
}

.ck.ck-dialog.large-dialog .ck-dialog__header {
    background: linear-gradient(to right, #007bff, #0056b3);
    color: white;
    text-align: center;
}