Customize styles

Miella is a child of the Base theme. Its own files live in platform/themes/miella/; anything it doesn't have (layouts, most views, widgets, routes, translations, vendor assets) comes from platform/themes/base/.

To change a file Miella inherits, copy it from base/ to the same path in miella/ and edit the copy.

Folder structure

miella/
├── config.php                 'inherit' => 'base'; loads Base's assets + miella.css / miella.js
├── theme.json
├── functions/
│   ├── functions.php          fonts, "Top bar menu" location, product + listing helpers
│   ├── theme-options.php      color defaults, product image shape, "New" badge days, Header + Footer sections
│   ├── shortcodes.php         shared shortcode helpers (heading, spacing / background)
│   └── shortcodes/<name>.php  one shortcode per file: registration + admin form
├── partials/
│   ├── site-header, header-actions, site-footer, page-header, menu, icon   (override Base's)
│   ├── product-card, product-item, rating, cta-link
│   └── shortcodes/<name>.blade.php                                        one view per shortcode
├── views/ecommerce/           product listings (shop, category, brand, tag, collection, search)
├── assets/sass/               source → public/css/miella.css (+ miella-rtl.css)
├── assets/js/miella.js        source → public/js/miella.js
├── sample/homepage-content.html
└── public/                    built CSS/JS; sample images in public/storage/miella/

Colors, fonts and shape

Every component reads the design tokens in assets/sass/base/_tokens.scss:

:root {
    --theme-color-primary: #bf4e6c;        /* rose: buttons, sale prices, eyebrows, active tab, menu underline */
    --theme-color-secondary: #1e1a1d;      /* near-black ink: headings, links, top bar, buy bar */
    --theme-color-accent: #f2c4ce;         /* blush: title highlights, footer link hover */
    --theme-color-tone-sage: #7c9a83;      /* soft palette: rose, nude, sage, lilac (+ "-soft") */
    --theme-color-surface-muted: #faf3f4;  /* blush: image boxes, page title, "Light blush" sections */
    --theme-color-surface-warm: #f6ede8;   /* nude: "Light nude" sections */
    --theme-radius-sm: 4px;                /* cards, images, labels (0 for a square look) */
    --theme-radius-button: 4px;            /* buttons, fields (999px for pills) */
}

Admins can override the main colors in Theme options → Style and the fonts in Theme options → Typography without touching code.

One component

Change a component's variables or modifiers instead of overriding its rules:

.card-grid--cols-4 { --card-grid-cols: 5; }                          /* 5 products per row on listings */
.product-card { --product-card-ratio: 2 / 3; }                       /* taller product photos */
.category-card { --category-card-ratio: 1; }                         /* square category cards */
.promo-banners__grid--layout-mosaic { --promo-banners-row: 240px; }  /* shorter mosaic */
.section-heading--align-center { --section-heading-line: 0; }        /* no line under centered titles */

Icons

[service-features] icons come from partials/icon.blade.php; the list offered in the admin is miella_service_icons(). To add an icon, add its SVG path to the partial and its name to that helper.

Naming conventions

What	Convention	Example
Blocks / elements	BEM block__element	.category-card__label
Option modifiers	block--{option}-{value}	.hero--position-center-right, .product-card--ratio-square
On/off modifiers	block--{state}	.category-tiles--heading-side
JS state	--active / --open / --ended	.product-tabs__tab--active
JS hooks	data-* attributes only, never classes	data-tabs, data-countdown
Theme tokens	--theme-{category}-{name}	--theme-color-tone-sage-soft
Component variables	--{block}-{name}	--product-card-ratio, --promo-banners-row
PHP helpers	miella_{group}_{name}(), wrapped in function_exists	miella_products_by_source()

JavaScript hooks

Hook	Behavior
[data-hero], [data-hero-slide], [data-hero-dot], [data-hero-prev/next]	Hero slider.
[data-slider] + [data-slider-prev/next] inside [data-slider-scope]	Scroll-snap sliders.
[data-tabs] > [data-tabs-tab] + [data-tabs-panel]	Product tabs.
[data-countdown="ISO date"]	Deal countdown; adds .countdown--ended at zero.
[data-menu-toggle]	Opens a submenu in vertical menus.
#site-search	Header search panel (Bootstrap collapse); Escape closes it.
[data-reveal]	Fades in on scroll.
[data-shop-sort], [data-shop-results]	Listing sort menu and AJAX filter counts.

Build

npm run prod
php artisan cms:theme:assets:publish miella