CSS System

One compiled stylesheet

Every page links a single compiled stylesheet:

<link id="stylesheet" href="assets/css/style.css" media="screen" rel="stylesheet">

• assets/css/style.css — full, readable build (use during development).
• assets/css/style.min.css — minified build (use in production).

Bootstrap 5 loads separately, before style.css, from assets/plugins/bootstrap/css/bootstrap.min.css. So the cascade on every page is Bootstrap → style.css → any page-specific stylesheet.

LESS source → one CSS bundle

You don't author CSS directly. The source is LESS: roughly 70 feature-scoped partials in assets/css/, each named NN-feature.less (e.g. 04-header.less, 05-sidebar.less, 24-badges.less). The master file style.less @imports them in numeric order, and Gulp compiles the result into the single style.css / style.min.css bundle the browser loads.

// style.less (master import — order matters)
@import "01-variable";   // design tokens (LESS @-variables)
@import "02-reset";       // :root CSS custom properties + resets
@import "03-loading";
@import "04-header";
@import "05-sidebar";
// … through …
@import "70-landingPage";
@import "99-customStyle";  // your own additions go last

Because the import order is the cascade order, a later partial (or 99-customStyle.less) can override an earlier one without !important.

What each partial covers

The numbered files map cleanly to features, which makes it easy to find where something is styled:

These compile into style.css — you don't link the partials individually, and you normally don't edit them. See Customizing below.

Design tokens — 01-variable.less

01-variable.less holds the flat design tokens as LESS @-variables: the color palette, responsive breakpoints, fonts and a few sizing values.

// Base palette (badges & widgets)
@color-red:    #FFC5C5;
@color-orange: #FFEBD8;
@color-green:  #C7DCA7;
@color-teal:   #89B9AD;
@color-purple: #AC87C5;
@color-blue:   #8ACDD7;
@color-yellow: #dcd6a7;
 
// Fonts
@font-family: 'Maven Pro', sans-serif;          // Latin
@font-family-ja: 'Noto Sans JP', sans-serif;    // Japanese
@font-family-zh: 'Noto Sans SC', sans-serif;    // Chinese
@general-font-size: 0.8125rem;
 
// Responsive breakpoints (LESS media-query strings)
@767: ~'only screen and (max-width: 767px)';
@991: ~'only screen and (max-width: 991px)';
@1149: ~'only screen and (max-width: 1149px)';
@1150m: ~'only screen and (min-width: 1150px)';
// …also 500 / 799 / 992 and many more

Breakpoints are stored as full media-query strings and used as @media @767 { … }. The kit defines a dense ladder (375, 400, 450, 500, 767, 799, 991, 992, 1024, 1149, 1150, 1200 … up to 1601px) so individual screens can fine-tune their responsive behavior.

Layout sizing — :root custom properties (02-reset.less)

Unlike the palette, the runtime layout dimensions are real CSS custom properties declared in the :root block of 02-reset.less (so they can be read and overridden at runtime):

:root {
  --app-width-lhs: 16.5625rem;     /* sidebar width */
  --app-head-height: 4.375rem;     /* header height */
  --page-header-height: 4.375rem;  /* page header height */
  --page-header-sticky-top: 4.4375rem;
  --animate-duration: 0.3s;        /* base animation timing */
  --nav-transition-duration: 0.4s;
}

In the minified-sidebar state the same --app-width-lhs is reduced to 5.625rem. You can override any of these from your own stylesheet, e.g. to widen the sidebar:

:root { --app-width-lhs: 18rem; }

Dark theme — 14-dark-theme.less

The kit ships a full light/dark theme. The header's #themeToggle button flips a data-theme="dark" attribute, and 14-dark-theme.less scopes a set of CSS custom properties to that attribute:

[data-theme="dark"] {
  --bg-primary: #1a1a1a;
  --text-primary: #e8e8e8;
  --card-bg: #2d2d2d;
  --sidebar-bg: #252525;
  --color-green: #5D6E3F;   /* darkened palette */
  /* … */
}

Because dark mode is expressed as variable overrides, components that read those variables adapt automatically — you don't write a parallel set of dark rules.

Design-system tokens — tokens.json / tokens.css

The HTML edition is the canonical source for the shared @taxi-crm/design-system package, which the React and Vue editions consume. Its build (packages/design-system/build.mjs) does two relevant things:

1. Compiles style.less → dist/style.css.
2. Extracts every flat @name: value; token from 01-variable.less into dist/tokens.json (a { name: value } map) and dist/tokens.css (the same tokens re-emitted as :root custom properties, @color-red → --color-red).

/* tokens.css (generated) */
:root {
  --color-red: #FFC5C5;
  --color-green: #C7DCA7;
  --general-font-size: 0.8125rem;
  /* … */
}

This lets the framework editions theme against the same source-of-truth tokens as the HTML edition. The dist/ output is generated (not committed), produced by npm run ds:build.

Color palette (badges & widgets)

The kit's signature colors are the named badge/widget palette defined in 01-variable.less. These are the colors used for badges and dashboard widgets:

Badge variants (all combine with the colors above):

<span class="badge badge-green">Solid</span>
<span class="badge badge-green-light">Light</span>
<span class="badge badge-outline-green">Outline</span>
<span class="badge badge-pill badge-green">Pill</span>
<span class="badge badge-sm badge-green">Small</span>
<span class="badge badge-lg badge-green">Large</span>

• badge-{color}-light — soft tinted background with a stronger text color.
• badge-outline-{color} — bordered, transparent background.
• badge-pill — fully rounded; badge-sm / badge-lg — sizes.
• badge-disabled — neutral grey (used for "off" states).

Utility classes

style.css rides on top of Bootstrap 5, so the full set of Bootstrap utilities is available — spacing (m-*, p-*, mb-3, me-2…), display/flex (d-flex, flex-column, justify-content-*, align-items-*), text (text-primary, text-muted, fw-bold, text-center), sizing (w-100, h-100), and the grid (row, col-*, responsive col-md-6 etc.).

Use Bootstrap 5 utility class names (e.g. me-2, mb-3), not legacy m-r-5-style names.

Customizing the look

If you have the LESS source, add your overrides to 99-customStyle.less (it imports last) and recompile. If you only received the compiled output, don't edit style.css — add your own stylesheet after it so your rules win because they load later:

<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/your-overrides.css" rel="stylesheet">   <!-- your customizations -->

/* your-overrides.css */
:root { --app-width-lhs: 18rem; }      /* widen sidebar via the variable */
.panel-card .card-title { font-weight: 700; }

For production, switch the link to style.min.css and serve your override file minified too.