Manage design tokens for consistent theming across platforms. Use when defining colors, typography, spacing, or other design system values.
Manages design tokens for consistent theming across platforms. Use when defining colors, typography, spacing, or other design system values.
/plugin marketplace add astoeffer/plugin-marketplace/plugin install cloodle-moodle-theming@astoeffer-dev-pluginsThis skill is limited to using the following tools:
Zero One (UIkit) to Bootstrap 5 design token mapping.
// Primary
$cloodle-primary: #6e66cc;
$cloodle-primary-hover: #5c53c6;
$cloodle-primary-light: #e2e0f5;
// Secondary
$cloodle-secondary: #130a28;
$cloodle-heading: #130a28;
// Text
$cloodle-text: #423653;
$cloodle-text-muted: #aeaeae;
// Background
$cloodle-bg-light: #f7f7f7;
$cloodle-border: #dedbe0;
// Semantic
$cloodle-success: #6BC116;
$cloodle-danger: #E84646;
$font-family-sans-serif: "Outfit", sans-serif;
$font-size-base: 1rem;
$headings-font-weight: 700;
$h1-font-size: 2.55rem;
$h2-font-size: 1.7rem;
$border-radius: 12px;
$border-radius-pill: 500px;
$btn-padding-y: 0.75rem;
$btn-padding-x: 1.875rem;
| UIkit Class | Bootstrap Equivalent |
|---|---|
uk-button-primary | btn btn-primary |
uk-card | card |
uk-input | form-control |
uk-section-muted | bg-light |