Customize styles

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

To change a file Kids Toys inherits, copy it from base/ to the same path in kidstoys/ and edit the copy.

Folder structure

kidstoys/
├── config.php                 'inherit' => 'base'; loads Base's assets + kidstoys.css / kidstoys.js
├── theme.json
├── functions/
│   ├── functions.php          fonts, "Top bar menu" + "Category menu" locations, product + listing helpers
│   ├── theme-options.php      color defaults, "New" badge days, Header section
│   ├── shortcodes.php         shared shortcode helpers (heading, spacing / background / waves)
│   └── 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, decorations
│   └── shortcodes/<name>.blade.php                                        one view per shortcode
├── views/ecommerce/           product listings (shop, category, brand, tag, collection, search)
├── assets/sass/               source → public/css/kidstoys.css (+ kidstoys-rtl.css)
├── assets/js/kidstoys.js      source → public/js/kidstoys.js
├── sample/homepage-content.html
└── public/                    built CSS/JS; sample images in public/storage/kidstoys/

Colors, fonts and shape

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

:root {
    --theme-color-primary: #ff5e5b;        /* coral: buttons, prices, eyebrows, active tab */
    --theme-color-secondary: #1f2d5c;      /* navy ink: headings, text links, top bar */
    --theme-color-accent: #ffc93c;         /* sunny yellow: counters, hotline icon, title highlights */
    --theme-color-fun-sky: #4cc3f5;        /* playful palette: coral, sun, sky, mint, grape, pink (+ "-soft") */
    --theme-color-surface-muted: #fff5ec;  /* peach: product image boxes, "Light peach" sections */
    --theme-color-surface-sky: #eaf7fd;    /* sky: search field, page title, "Light sky blue" sections */
    --theme-radius-md: 20px;               /* cards, tiles (0 for a square look) */
    --theme-radius-button: 999px;          /* pill buttons */
    --theme-wave-height: clamp(18px, 2.4vw, 36px);  /* wavy edges (0 flattens them all) */
}

Admins can override the main colors in Theme options → Style 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-media-bg: #eaf7fd; }     /* sky image boxes */
.shop-by-age__grid { --age-bubble-size: 140px; }        /* smaller age bubbles */
.countdown__unit:nth-child(1) { --countdown-unit-bg: var(--theme-color-fun-grape); }

Floating shapes

partials/decorations.blade.php adds floating shapes to any positioned block:

{!! Theme::partial('decorations', ['shapes' => [['star', '10%', '20%', '30px', 'accent', '0s']]]) !!}

Each shape is [type, top, left, size, color, animation delay]. Types: star, ring, dot, triangle, squiggle. The color is a --theme-color-* name without the prefix.

Icons

[service-features] icons come from partials/icon.blade.php; the list offered in the admin is kidstoys_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	.age-bubble__shape
Option modifiers	block--{option}-{value}	.shop-by-age--shape-blob, .section--wave-both
Palette modifiers	bubble--color-{coral|sun|sky|mint|grape|pink}	.age-bubble.bubble--color-sky
JS state	--active / --open / --ended	.product-tabs__tab--active, .countdown--ended
JS hooks	data-* attributes only, never classes	data-tabs, data-countdown
Theme tokens	--theme-{category}-{name}	--theme-color-fun-mint-soft
SCSS mixins	in assets/sass/_abstracts.scss	label(), wave-edge(top|bottom)
PHP helpers	kidstoys_{group}_{name}(), wrapped in function_exists	kidstoys_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"] > [data-countdown-days/hours/minutes/seconds]	Deal countdown; adds .countdown--ended at zero.
[data-category-menu-toggle]	Opens the "All categories" panel.
[data-menu-toggle]	Opens a submenu in vertical menus.
[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 kidstoys