CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-ckeditor--ckeditor5-theme-lark

A bright theme for CKEditor 5 providing comprehensive styling for all UI components and plugins.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

globals.mddocs/

Global Styles & Variables

Global CSS foundation providing CSS custom properties, typography, spacing, focus states, and component resets for all CKEditor 5 components.

Capabilities

CSS Global Styles Import

Foundation styling system that must be imported for proper CKEditor 5 theme functionality.

/**
 * Main global styles import - includes all foundation styles
 */
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/globals.css';

/**
 * Individual global style imports for selective theming
 */
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_colors.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_disabled.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_focus.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_fonts.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_reset.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_rounded.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_shadow.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_spacing.css';

Color System CSS Variables

Comprehensive color palette CSS custom properties defining the visual foundation.

/**
 * Base color variables - defined in _colors.css
 */
:root {
    /* Foundation colors */
    --ck-color-base-foreground: hsl(0, 0%, 98%);
    --ck-color-base-background: hsl(0, 0%, 100%);
    --ck-color-base-border: hsl(220, 6%, 81%);
    --ck-color-base-action: hsl(104, 50.2%, 42.5%);
    --ck-color-base-focus: hsl(209, 92%, 70%);
    --ck-color-base-text: hsl(0, 0%, 20%);
    --ck-color-base-active: hsl(218.1, 100%, 58%);
    --ck-color-base-active-focus: hsl(218.2, 100%, 52.5%);
    --ck-color-base-error: hsl(15, 100%, 43%);
}

Button Color System CSS Variables

Complete color definitions for all button states and variants.

/**
 * Button color variables - defined in _colors.css
 */
:root {
    /* Default button colors */
    --ck-color-button-default-background: transparent;
    --ck-color-button-default-hover-background: hsl(0, 0%, 94.1%);
    --ck-color-button-default-active-background: hsl(0, 0%, 94.1%);
    --ck-color-button-default-disabled-background: transparent;

    /* Active/pressed button colors */
    --ck-color-button-on-background: hsl(212, 100%, 97.1%);
    --ck-color-button-on-hover-background: hsl(211.7, 100%, 92.9%);
    --ck-color-button-on-active-background: hsl(211.7, 100%, 92.9%);
    --ck-color-button-on-disabled-background: hsl(211, 15%, 95%);
    --ck-color-button-on-color: hsl(218.1, 100%, 58%);

    /* Action button colors (primary buttons) */
    --ck-color-button-action-background: var(--ck-color-base-action);
    --ck-color-button-action-hover-background: hsl(104, 53.2%, 40.2%);
    --ck-color-button-action-active-background: hsl(104, 53.2%, 40.2%);
    --ck-color-button-action-disabled-background: hsl(104, 44%, 58%);
    --ck-color-button-action-text: var(--ck-color-base-background);

    /* Special button colors */
    --ck-color-button-save: hsl(120, 100%, 27%);
    --ck-color-button-cancel: hsl(15, 100%, 43%);
}

Form & Input Color CSS Variables

Color definitions for form elements and input components.

/**
 * Form and input color variables - defined in _colors.css
 */
:root {
    /* Input field colors */
    --ck-color-input-background: var(--ck-color-base-background);
    --ck-color-input-border: var(--ck-color-base-border);
    --ck-color-input-error-border: var(--ck-color-base-error);
    --ck-color-input-text: var(--ck-color-base-text);
    --ck-color-input-disabled-background: hsl(0, 0%, 95%);
    --ck-color-input-disabled-border: var(--ck-color-base-border);
    --ck-color-input-disabled-text: hsl(0, 0%, 46%);
}

UI Component Color CSS Variables

Color definitions for dropdowns, panels, toolbars, and other UI elements.

/**
 * UI component color variables - defined in _colors.css
 */
:root {
    /* Dropdown colors */
    --ck-color-dropdown-panel-background: var(--ck-color-base-background);
    --ck-color-dropdown-panel-border: var(--ck-color-base-border);

    /* Dialog colors */
    --ck-color-dialog-background: var(--ck-color-base-background);
    --ck-color-dialog-form-header-border: var(--ck-color-base-border);

    /* List colors */
    --ck-color-list-background: var(--ck-color-base-background);
    --ck-color-list-button-hover-background: var(--ck-color-button-default-hover-background);
    --ck-color-list-button-on-background: var(--ck-color-button-on-color);
    --ck-color-list-button-on-background-focus: var(--ck-color-button-on-color);
    --ck-color-list-button-on-text: var(--ck-color-base-background);

    /* Panel colors */
    --ck-color-panel-background: var(--ck-color-base-background);
    --ck-color-panel-border: var(--ck-color-base-border);

    /* Toolbar colors */
    --ck-color-toolbar-background: var(--ck-color-base-background);
    --ck-color-toolbar-border: var(--ck-color-base-border);

    /* Tooltip colors */
    --ck-color-tooltip-background: var(--ck-color-base-text);
    --ck-color-tooltip-text: var(--ck-color-base-background);
}

Focus System CSS Variables

Focus state styling variables for accessibility and keyboard navigation.

/**
 * Focus state color variables - defined in _colors.css and _focus.css
 */
:root {
    /* Focus border colors */
    --ck-color-focus-border-coordinates: 218, 81.8%, 56.9%;
    --ck-color-focus-border: hsl(var(--ck-color-focus-border-coordinates));
    --ck-color-focus-outer-shadow: hsl(212.4, 89.3%, 89%);
    --ck-color-focus-disabled-shadow: hsla(209, 90%, 72%, .3);
    --ck-color-focus-error-shadow: hsla(9, 100%, 56%, .3);
}

Shadow System CSS Variables

Box shadow definitions for depth and elevation.

/**
 * Shadow system variables - defined in _colors.css and _shadow.css
 */
:root {
    /* Drop shadows */
    --ck-color-shadow-drop: hsla(0, 0%, 0%, 0.15);
    --ck-color-shadow-drop-active: hsla(0, 0%, 0%, 0.2);
    --ck-color-shadow-inner: hsla(0, 0%, 0%, 0.1);

    /* Switch button shadows */
    --ck-color-switch-button-inner-shadow: hsla(0, 0%, 0%, 0.1);
}

Typography System CSS Variables

Font family and typography definitions.

/**
 * Typography variables - defined in _fonts.css
 */
:root {
    /* Font families - can be customized */
    --ck-font-face: "Helvetica Neue", Helvetica, Arial, Tahoma, Verdana, sans-serif;
    --ck-font-size-base: 13px;
    --ck-font-weight-normal: 400;
    --ck-font-weight-bold: 700;
}

Spacing System CSS Variables

Margin, padding, and spacing variables.

/**
 * Spacing system variables - defined in _spacing.css
 */
:root {
    /* Base spacing units */
    --ck-spacing-tiny: 0.4em;
    --ck-spacing-small: 0.6em;
    --ck-spacing-standard: 0.8em;
    --ck-spacing-medium: 1.2em;
    --ck-spacing-large: 1.6em;
    --ck-spacing-huge: 2.4em;

    /* Component-specific spacing */
    --ck-ui-component-min-height: 2.3em;
}

Border Radius System CSS Variables

Border radius variables for consistent rounded corners.

/**
 * Border radius variables - defined in _rounded.css
 */
:root {
    /* Standard border radius */
    --ck-border-radius: 2px;
    --ck-border-radius-large: 3px;
    --ck-border-radius-small: 1px;
}

CSS Reset Styles

Reset and normalization styles for consistent rendering.

/**
 * CKEditor 5 CSS reset - defined in _reset.css
 * Ensures consistent styling across browsers
 */
.ck.ck-reset,
.ck.ck-reset_all,
.ck.ck-reset_all * {
    /* Remove default margins and padding */
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    text-decoration: none;
    vertical-align: middle;
    transition: none;
    word-wrap: break-word;
}

.ck.ck-reset_all,
.ck.ck-reset_all * {
    /* Reset list styles */
    list-style: none;
    
    /* Reset table styles */
    border-collapse: collapse;
    border-spacing: 0;
    
    /* Reset form elements */
    outline: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Disabled State Styles

Styling for disabled UI components.

/**
 * Disabled state styling - defined in _disabled.css
 */
:root {
    --ck-disabled-opacity: 0.5;
}

.ck.ck-disabled {
    opacity: var(--ck-disabled-opacity);
}

Usage Examples

Customizing the Color Palette:

/* Override base colors before importing theme */
:root {
    --ck-color-base-background: #f8f9fa;
    --ck-color-base-border: #dee2e6;
    --ck-color-base-text: #212529;
    --ck-color-base-action: #007bff;
}

@import '@ckeditor/ckeditor5-theme-lark/theme/index.css';

Creating Custom Button Colors:

/* Custom button color scheme */
:root {
    --ck-color-button-action-background: #28a745;
    --ck-color-button-action-hover-background: #218838;
    --ck-color-button-save: #17a2b8;
    --ck-color-button-cancel: #dc3545;
}

Adjusting Spacing and Typography:

/* Larger UI scaling */
:root {
    --ck-font-size-base: 14px;
    --ck-spacing-small: 0.8em;
    --ck-spacing-standard: 1.0em;
    --ck-ui-component-min-height: 2.6em;
}

Install with Tessl CLI

npx tessl i tessl/npm-ckeditor--ckeditor5-theme-lark

docs

globals.md

index.md

plugins.md

ui-components.md

tile.json