@ojiepermana/angular-theme 22.0.36 → 22.0.43

package/styles/css/base/theme.css

@@ -19,7 +19,7 @@
 
     --border-width-base: 1px;
 
-    --shadow-base: 0 1px 2px hsl(240 10% 3.9% / 0.08);
+    --shadow-base: 0 1px 2px hsl(0 0% 3.9% / 0.08);
 
     --duration-base: 200ms;
     --ease-base: cubic-bezier(0.4, 0, 0.2, 1);
@@ -82,10 +82,10 @@
      * re-emitted by the Tailwind @theme mapping as var(--theme-shadow-*) in the
      * later `theme` layer, so pointing either alias back at --shadow-* would
      * create a var() cycle that invalidates the whole chain. */
-    --shadow-xs-base: 0 1px 1px hsl(240 10% 3.9% / 0.05);
-    --shadow-md-base: 0 4px 6px hsl(240 10% 3.9% / 0.08);
-    --shadow-lg-base: 0 10px 15px hsl(240 10% 3.9% / 0.1);
-    --shadow-xl-base: 0 20px 25px hsl(240 10% 3.9% / 0.12);
+    --shadow-xs-base: 0 1px 1px hsl(0 0% 3.9% / 0.05);
+    --shadow-md-base: 0 4px 6px hsl(0 0% 3.9% / 0.08);
+    --shadow-lg-base: 0 10px 15px hsl(0 0% 3.9% / 0.1);
+    --shadow-xl-base: 0 20px 25px hsl(0 0% 3.9% / 0.12);
     --shadow-xs: var(--shadow-xs-base);
     --shadow-sm: var(--shadow-base);
     --shadow-md: var(--shadow-md-base);
@@ -157,12 +157,88 @@
     --timeline-indicator-rose: 349 89% 60%;
     --timeline-indicator-rose-foreground: 0 0% 100%;
 
-    --layout-grid-line: var(--border);
-    --layout-grid-line-opacity: 0.18;
-    --layout-grid-dot-opacity: 0.22;
-
-    --overlay-backdrop: 240 10% 3.9% / 0.5;
-    --overlay-backdrop-strong: 240 10% 3.9% / 0.4;
+    /* --layout-grid-line is defined per-mode in base/tokens.css and per-neutral
+     * by the generated theme-neutral CSS, so the surface grid keeps constant
+     * contrast across every neutral — not just base. Opacity is the global
+     * visibility knob shared by all grid surfaces:
+     *   --layout-grid-line-opacity → the `grid` + `honeycomb` surfaces
+     *                                (multi-axis patterns)
+     *   --layout-grid-dot-opacity  → `line-vertical` / `line-horizontal`
+     *                                (single-axis rules)
+     * The multi-axis patterns are denser so they sit a step below the
+     * single-axis lines. Raised from 0.18/0.22 so the pattern actually reads
+     * on-screen against the ~16-point line/background lightness gap. */
+    --layout-grid-line-opacity: 0.4;
+    --layout-grid-dot-opacity: 0.5;
+
+    /* `grid` surface line color. DEFAULT (fallback) = the neutral --layout-grid-line
+     * at --layout-grid-line-opacity (unchanged behavior). Where CSS relative color
+     * is supported it's overridden below to FOLLOW THE ACCENT: accent hue+saturation
+     * (from --accent-foreground) at the grid's own lightness (82% light / 24% dark,
+     * pinned so brightness stays put — grayscale in the base theme, tinted under a
+     * color theme). Only the `grid` surface uses this; honeycomb/line-* stay neutral. */
+    --layout-grid-color: hsl(var(--layout-grid-line) / var(--layout-grid-line-opacity));
+
+    /* `grid-line` surface — global faintness of its accent-tinted glow (accent hue
+     * from --accent-foreground at lightness --layout-grid-highlight-l, composed in
+     * base/components.css). Per-element alpha (faint base grid, faint cell fills,
+     * bright glow squares) is baked into the SVG mask, so this multiplies it: lower
+     * for a quieter surface, raise for a more assertive glow. */
+    --layout-grid-highlight-opacity: 0.55;
+
+    /* `grid-line` frame border opacity. The square layout frame borders with the
+     * accent color (--accent-foreground — the STRONG member of the accent family,
+     * so it follows the active theme-color and inverts dark-on-light / light-on-
+     * dark). Now that the SURFACE also tints with the accent, the border was too
+     * strong — toned down to 0.484, but kept ABOVE the surface's strongest line
+     * (≈ --layout-grid-highlight-opacity 0.55 × the brightest baked stroke 0.9 ≈
+     * 0.5) so the layout edge still reads as the strongest line. */
+    --layout-grid-line-border-opacity: 0.484;
+
+    /* border-rail appearance — color, opacity, and THICKNESS of the layout's rail
+     * lines AND its frame border (all read these). Color/opacity follow the ACCENT
+     * (--accent-foreground) globally, so every border-rail layout picks up the
+     * active theme-color and reads bright, not the soft neutral --border.
+     * --accent-foreground inverts dark-on-light / light-on-dark automatically.
+     * --layout-rail-width is the single thickness knob for the layout rails. */
+    --layout-rail-color: var(--accent-foreground);
+    --layout-rail-opacity: 0.9;
+    --layout-rail-width: 1.21px;
+
+    /* `matrix` surface — a scattered binary (0/1) field tinted with the brand
+     * --primary accent (not the neutral --layout-grid-line), so it reads as a soft
+     * "digital" signature that recolors with the active theme. Two knobs:
+     *   --layout-matrix-opacity → global faintness of the field. Per-glyph opacity
+     *                             is baked into the SVG mask, so this multiplies it;
+     *                             toned down for dark mode in base/tokens.css so the
+     *                             inverted (near-white) accent never shouts.
+     *   --layout-matrix-size    → the SVG tile period (square). Larger = sparser.
+     *   --layout-matrix-glow-opacity → brightness of the sparse edge-glow accents
+     *                             (the `::after` lit digits). Sits ABOVE the field
+     *                             opacity so the ~10% lit digits read as a glow;
+     *                             raised in dark mode (base/tokens.css) so the
+     *                             inverted accent actually blooms. */
+    --layout-matrix-opacity: 0.26;
+    --layout-matrix-size: 240px;
+
+    /* `circuit` surface — a tileable PCB / circuit-board texture drawn as two
+     * mask layers (base/components.css). Two faintness knobs, one per layer:
+     *   --layout-circuit-opacity      → the neutral copper TRACES (--layout-grid-line).
+     *                                   Per-trace alpha (ghost/trace/trunk) is baked
+     *                                   into the SVG, so this multiplies it. Sits in
+     *                                   the dense multi-axis tier (like `honeycomb`),
+     *                                   so it matches --layout-grid-line-opacity.
+     *   --layout-circuit-node-opacity → the accent via NODES / pads (--primary).
+     *                                   Toned down for dark mode in base/tokens.css
+     *                                   (the inverted near-white accent blooms). Kept
+     *                                   a touch above the trace tier so the sparse
+     *                                   nodes read as quiet glints, not noise. */
+    --layout-circuit-opacity: 0.4;
+    --layout-circuit-node-opacity: 0.5;
+    --layout-matrix-glow-opacity: 0.55;
+
+    --overlay-backdrop: 0 0% 3.9% / 0.5;
+    --overlay-backdrop-strong: 0 0% 3.9% / 0.4;
 
     --editor-highlight: 48 96% 80%;
 
@@ -184,43 +260,28 @@
     --theme-shadow-xl: var(--shadow-xl-base);
   }
 
+  /* `grid` surface accent tint — applied only where CSS relative color is
+   * supported (otherwise the neutral fallback set on :root above stands). Follows
+   * the accent hue+saturation (from --accent-foreground) at the grid's own
+   * lightness (--layout-grid-l, per-mode), so brightness is unchanged while the
+   * tint tracks the theme-color. --layout-grid-l is per-mode, so this single rule
+   * covers light + dark. */
+  @supports (color: hsl(from white h s l)) {
+    :root {
+      --layout-grid-color: hsl(
+        from hsl(var(--accent-foreground)) h s var(--layout-grid-l) /
+          var(--layout-grid-line-opacity)
+      );
+    }
+  }
+
   :root,
   [data-mode='light'] {
     color-scheme: light;
-
-    --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
-
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
   }
 
   [data-mode='dark'] {
     color-scheme: dark;
-
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
-
-    --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
-
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
-
-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
-
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
   }
 }
 
@@ -238,11 +299,17 @@
     --info: 217 91% 60%;
     --info-foreground: 0 0% 100%;
 
+    /*
+     * Chart series palette. --chart-1 follows the selected accent (--primary)
+     * so the primary series always reflects the picked theme color; --chart-2..5
+     * mirror the shadcn/ui chart palette for distinguishable supporting series.
+     * Each stays overridable per-theme via the --theme-chart-* hook.
+     */
     --chart-1: var(--theme-chart-1, var(--primary));
-    --chart-2: var(--theme-chart-2, var(--accent-foreground));
-    --chart-3: var(--theme-chart-3, 271 81% 56%);
-    --chart-4: var(--theme-chart-4, 38 92% 50%);
-    --chart-5: var(--theme-chart-5, 355 78% 56%);
+    --chart-2: var(--theme-chart-2, 173 58% 39%);
+    --chart-3: var(--theme-chart-3, 197 37% 24%);
+    --chart-4: var(--theme-chart-4, 43 74% 66%);
+    --chart-5: var(--theme-chart-5, 27 87% 67%);
 
     --sidebar: var(--card);
     --sidebar-background: var(--sidebar);
@@ -273,10 +340,11 @@
 
     --editor-highlight: 48 70% 30%;
 
+    /* Chart palette (dark) — --chart-1 follows --primary; rest track shadcn/ui. */
     --chart-1: var(--theme-chart-1, var(--primary));
-    --chart-2: var(--theme-chart-2, var(--accent-foreground));
-    --chart-3: var(--theme-chart-3, 271 85% 70%);
-    --chart-4: var(--theme-chart-4, 38 96% 62%);
-    --chart-5: var(--theme-chart-5, 355 82% 68%);
+    --chart-2: var(--theme-chart-2, 160 60% 45%);
+    --chart-3: var(--theme-chart-3, 30 80% 55%);
+    --chart-4: var(--theme-chart-4, 280 65% 60%);
+    --chart-5: var(--theme-chart-5, 340 75% 55%);
   }
 }

package/styles/css/base/tokens.css

@@ -7,39 +7,57 @@
     --highlight-border-alpha: 0.7;
     --highlight-background-alpha: 0.7;
 
-    --background: 210 38% 98%;
+    --background: 0 0% 98%;
     --surface: 0 0% 89.8%;
-    --surface-foreground: 211 56% 12%;
-    --foreground: 211 56% 12%;
+    --surface-foreground: 0 0% 12%;
+    --foreground: 0 0% 12%;
 
     --card: 0 0% 100%;
-    --card-foreground: 211 56% 12%;
+    --card-foreground: 0 0% 12%;
 
     --popover: 0 0% 100%;
-    --popover-foreground: 211 56% 12%;
-
-    --muted: 211 34% 94%;
-    --muted-foreground: 211 24% 38%;
-
-    --border: 211 28% 82%;
-    --input: 211 28% 82%;
+    --popover-foreground: 0 0% 12%;
+
+    --muted: 0 0% 94%;
+    --muted-foreground: 0 0% 38%;
+
+    --border: 0 0% 82%;
+    --input: 0 0% 82%;
+
+    /* Surface-grid line for the base neutral. Explicit (not var(--border)) so the
+     * grid keeps the same ~16-point lightness gap vs --background that every
+     * generated neutral targets — base is no longer a special case. */
+    --layout-grid-line: 0 0% 82%;
+    /* LIGHTNESS of the `grid` surface lines — used to pin lightness when the grid
+     * follows the accent (see --layout-grid-color in base/theme.css), so the tint
+     * tracks the theme-color while brightness stays at the current ~82% (light). */
+    --layout-grid-l: 82%;
+
+    /* `grid-line` surface highlight LIGHTNESS. The glow now FOLLOWS the accent:
+     * the surface paints with the accent hue+saturation (from --accent-foreground,
+     * via CSS relative color in base/components.css) but pins lightness to this
+     * value, so the brightness stays exactly as before while the tint tracks the
+     * active theme-color. Medium-dark in light mode so the mosaic reads as soft
+     * darker lines on a light surface; inverts to near-white in dark (dark block).
+     * Global faintness lives in --layout-grid-highlight-opacity (base/theme.css). */
+    --layout-grid-highlight-l: 45%;
 
     /* Base accent = near-black neutral (FluxUI "base"); inverts to near-white in
      * dark mode (see :root[data-mode='dark'] below). Accent palettes
      * (theme-color) override these at higher specificity. */
-    --primary: 240 6% 10%;
+    --primary: 0 0% 10%;
     --primary-foreground: 0 0% 100%;
-    --accent: 210 30% 95%;
-    --accent-foreground: 222 20% 14%;
-    --secondary: 210 24% 95%;
-    --secondary-foreground: 222 20% 18%;
-    --ring: 222 18% 16%;
+    --accent: 0 0% 95%;
+    --accent-foreground: 0 0% 14%;
+    --secondary: 0 0% 95%;
+    --secondary-foreground: 0 0% 18%;
+    --ring: 0 0% 16%;
 
     /* Brand identity color — set by the consumer via ThemeBrandService
      * (provideUiTheme({ brand }) or setBrand()). Concrete (not var(--primary))
      * so the theme-color='brand' preset never forms a var() cycle. Defaults to
      * the base accent and inverts in dark mode. */
-    --brand: 240 6% 10%;
+    --brand: 0 0% 10%;
     --brand-foreground: 0 0% 100%;
 
     --radius-base: 0.625rem;
@@ -53,17 +71,17 @@
      * --shadow-* — the Tailwind @theme mapping re-emits
      * --shadow-*: var(--theme-shadow-*) in the later `theme` layer, which
      * turns that into a var() cycle and invalidates both tokens. */
-    --shadow-base: 0 1px 0 0 hsl(211 95% 12% / 0.08);
-    --shadow-md-base: 0 8px 18px -14px hsl(211 95% 12% / 0.24);
-    --shadow-lg-base: 0 18px 36px -28px hsl(211 95% 12% / 0.34);
-    --shadow-xl-base: 0 24px 48px -36px hsl(211 95% 12% / 0.4);
+    --shadow-base: 0 1px 0 0 hsl(0 0% 12% / 0.08);
+    --shadow-md-base: 0 8px 18px -14px hsl(0 0% 12% / 0.24);
+    --shadow-lg-base: 0 18px 36px -28px hsl(0 0% 12% / 0.34);
+    --shadow-xl-base: 0 24px 48px -36px hsl(0 0% 12% / 0.4);
     --shadow-sm: var(--shadow-base);
     --shadow-md: var(--shadow-md-base);
     --shadow-lg: var(--shadow-lg-base);
     --shadow-xl: var(--shadow-xl-base);
 
     --theme-shadow-sm: var(--shadow-base);
-    --theme-shadow: 0 2px 4px -2px hsl(211 95% 12% / 0.14);
+    --theme-shadow: 0 2px 4px -2px hsl(0 0% 12% / 0.14);
     --theme-shadow-md: var(--shadow-md-base);
     --theme-shadow-lg: var(--shadow-lg-base);
     --theme-shadow-xl: var(--shadow-xl-base);
@@ -80,21 +98,28 @@
     --line-height-base: 1.5;
     --control-height-base: 2.25rem;
     --nav-font-family: var(--font-sans);
-    --nav-text-size: calc(var(--text-base) - 0.125rem);
-    --nav-text-line-height: var(--text-base--line-height);
+    /* Item labels — the nav baseline tier (14px, snug line-height). */
+    --nav-text-size: var(--text-sm);
+    --nav-text-line-height: var(--text-sm--line-height);
     --nav-heading-font-family: var(--font-sans);
-    --nav-heading-size: var(--text-sm);
-    --nav-heading-line-height: var(--text-sm--line-height);
+    /* Section/group headings — a distinct micro-label tier *below* item labels:
+     * smaller (11px), uppercase, heavier weight, restrained tracking. Keeping it
+     * smaller than --nav-text-size is what gives the sidebar a clear hierarchy. */
+    --nav-heading-size: var(--text-2xs-plus);
+    --nav-heading-line-height: var(--text-2xs-plus--line-height);
     --nav-heading-weight: 600;
-    --nav-heading-letter-spacing: 0.12em;
+    --nav-heading-letter-spacing: 0.08em;
     --nav-badge-font-family: var(--font-sans);
-    --nav-badge-size: var(--text-sm);
-    --nav-badge-line-height: var(--text-sm--line-height);
+    /* Badges/counters — compact pill tier (11px), aligned with the heading tier. */
+    --nav-badge-size: var(--text-2xs-plus);
+    --nav-badge-line-height: var(--text-2xs-plus--line-height);
     --nav-badge-weight: 500;
     --letter-spacing: 0;
     --spacing-base: 0.25rem;
     --space-unit: var(--spacing-base);
-    --layout-topbar-height: 3.25rem;
+    /* Matches the actual shell bar height (h-12 = 3rem) used by the navigation
+     * header/footer/navbar and page header/footer. */
+    --layout-topbar-height: 3rem;
 
     --layout-shell-padding: clamp(1rem, 2vw, 2rem);
     --layout-frame-radius: var(--radius-lg);
@@ -114,36 +139,61 @@
     --highlight-border-alpha: 0.45;
     --highlight-background-alpha: 0.55;
 
-    --background: 211 38% 9%;
-    --surface: 211 22% 18%;
-    --surface-foreground: 210 40% 96%;
-    --foreground: 210 40% 96%;
+    --background: 0 0% 9%;
+    --surface: 0 0% 18%;
+    --surface-foreground: 0 0% 96%;
+    --foreground: 0 0% 96%;
+
+    --card: 0 0% 11%;
+    --card-foreground: 0 0% 96%;
+
+    --popover: 0 0% 11%;
+    --popover-foreground: 0 0% 96%;
+
+    --muted: 0 0% 18%;
+    --muted-foreground: 0 0% 70%;
+
+    --border: 0 0% 24%;
+    --input: 0 0% 24%;
 
-    --card: 211 34% 11%;
-    --card-foreground: 210 40% 96%;
+    /* Surface-grid line for the base neutral (dark). See light block. */
+    --layout-grid-line: 0 0% 24%;
+    /* `grid` surface line lightness (dark) — see light block. */
+    --layout-grid-l: 24%;
 
-    --popover: 211 34% 11%;
-    --popover-foreground: 210 40% 96%;
+    /* `grid-line` highlight lightness inverts to near-white so the glow squares
+     * read bright on the dark surface, matching the dark mosaic reference; the
+     * accent hue is mixed in via relative color (see light block). */
+    --layout-grid-highlight-l: 88%;
 
-    --muted: 211 22% 18%;
-    --muted-foreground: 211 18% 70%;
+    /* `matrix` is tinted with --primary, which inverts to near-white on dark
+     * — so tone the field down here to keep it as faint behind content as it is in
+     * light mode (see --layout-matrix-opacity in base/theme.css). The edge-glow
+     * accents are raised instead: near-white on near-black actually blooms, so the
+     * lit digits read as a glow against the dark surface. */
+    --layout-matrix-opacity: 0.19;
+    --layout-matrix-glow-opacity: 0.7;
 
-    --border: 211 24% 24%;
-    --input: 211 24% 24%;
+    /* `circuit` via nodes are tinted with --primary, which inverts to near-white
+     * on dark and blooms — so tone the node layer down here to keep the glints as
+     * quiet as they are in light mode (same treatment as --layout-matrix-opacity).
+     * The neutral traces use --layout-grid-line (already per-mode), so they need
+     * no dark override. */
+    --layout-circuit-node-opacity: 0.4;
 
     /* Base accent inverts: near-white primary on dark. */
     --primary: 0 0% 98%;
-    --primary-foreground: 222 20% 12%;
-    --accent: 211 40% 16%;
+    --primary-foreground: 0 0% 12%;
+    --accent: 0 0% 16%;
     --accent-foreground: 0 0% 98%;
-    --secondary: 211 24% 18%;
+    --secondary: 0 0% 18%;
     --secondary-foreground: 0 0% 96%;
     --ring: 0 0% 85%;
 
     --brand: 0 0% 98%;
-    --brand-foreground: 222 20% 12%;
+    --brand-foreground: 0 0% 12%;
 
-    --shadow-base: 0 1px 0 0 hsl(210 40% 96% / 0.08);
+    --shadow-base: 0 1px 0 0 hsl(0 0% 96% / 0.08);
     --shadow-sm: var(--shadow-base);
     --theme-shadow-sm: var(--shadow-base);
 

package/styles/css/color/amber.css

@@ -15,6 +15,7 @@
     --muted-foreground: 38 18% 40%;
     --border: 38 28% 87%;
     --input: 38 28% 87%;
+    --layout-grid-line: 38 28% 82%;
     --primary: 38 92% 48%;
     --primary-foreground: 0 0% 12%;
     --accent: 38 55% 94%;
@@ -38,6 +39,7 @@
     --muted-foreground: 38 18% 64%;
     --border: 38 23% 18%;
     --input: 38 23% 18%;
+    --layout-grid-line: 38 23% 23%;
     --primary: 38 92% 58%;
     --primary-foreground: 0 0% 10%;
     --accent: 38 46% 18%;

package/styles/css/color/blue.css

@@ -15,6 +15,7 @@
     --muted-foreground: 221 17% 40%;
     --border: 221 25% 87%;
     --input: 221 25% 87%;
+    --layout-grid-line: 221 25% 82%;
     --primary: 221 83% 48%;
     --primary-foreground: 0 0% 100%;
     --accent: 221 50% 94%;
@@ -38,6 +39,7 @@
     --muted-foreground: 221 17% 64%;
     --border: 221 21% 18%;
     --input: 221 21% 18%;
+    --layout-grid-line: 221 21% 23%;
     --primary: 221 83% 58%;
     --primary-foreground: 0 0% 100%;
     --accent: 221 42% 18%;

package/styles/css/color/cyan.css

@@ -15,6 +15,7 @@
     --muted-foreground: 191 17% 40%;
     --border: 191 26% 87%;
     --input: 191 26% 87%;
+    --layout-grid-line: 191 26% 82%;
     --primary: 191 85% 48%;
     --primary-foreground: 0 0% 100%;
     --accent: 191 51% 94%;
@@ -38,6 +39,7 @@
     --muted-foreground: 191 17% 64%;
     --border: 191 21% 18%;
     --input: 191 21% 18%;
+    --layout-grid-line: 191 21% 23%;
     --primary: 191 85% 58%;
     --primary-foreground: 0 0% 100%;
     --accent: 191 43% 18%;

package/styles/css/color/emerald.css

@@ -15,6 +15,7 @@
     --muted-foreground: 160 16% 40%;
     --border: 160 23% 87%;
     --input: 160 23% 87%;
+    --layout-grid-line: 160 23% 82%;
     --primary: 160 78% 48%;
     --primary-foreground: 0 0% 100%;
     --accent: 160 47% 94%;
@@ -38,6 +39,7 @@
     --muted-foreground: 160 16% 64%;
     --border: 160 20% 18%;
     --input: 160 20% 18%;
+    --layout-grid-line: 160 20% 23%;
     --primary: 160 78% 58%;
     --primary-foreground: 0 0% 100%;
     --accent: 160 39% 18%;

package/styles/css/color/fuchsia.css

@@ -15,6 +15,7 @@
     --muted-foreground: 292 16% 40%;
     --border: 292 24% 87%;
     --input: 292 24% 87%;
+    --layout-grid-line: 292 24% 82%;
     --primary: 292 80% 48%;
     --primary-foreground: 0 0% 100%;
     --accent: 292 48% 94%;
@@ -38,6 +39,7 @@
     --muted-foreground: 292 16% 64%;
     --border: 292 20% 18%;
     --input: 292 20% 18%;
+    --layout-grid-line: 292 20% 23%;
     --primary: 292 80% 58%;
     --primary-foreground: 0 0% 100%;
     --accent: 292 40% 18%;

package/styles/css/color/green.css

@@ -15,6 +15,7 @@
     --muted-foreground: 142 14% 40%;
     --border: 142 21% 87%;
     --input: 142 21% 87%;
+    --layout-grid-line: 142 21% 82%;
     --primary: 142 69% 48%;
     --primary-foreground: 0 0% 100%;
     --accent: 142 41% 94%;
@@ -38,6 +39,7 @@
     --muted-foreground: 142 14% 64%;
     --border: 142 17% 18%;
     --input: 142 17% 18%;
+    --layout-grid-line: 142 17% 23%;
     --primary: 142 69% 58%;
     --primary-foreground: 0 0% 100%;
     --accent: 142 35% 18%;

package/styles/css/color/indigo.css

@@ -15,6 +15,7 @@
     --muted-foreground: 239 16% 40%;
     --border: 239 23% 87%;
     --input: 239 23% 87%;
+    --layout-grid-line: 239 23% 82%;
     --primary: 239 78% 48%;
     --primary-foreground: 0 0% 100%;
     --accent: 239 47% 94%;
@@ -38,6 +39,7 @@
     --muted-foreground: 239 16% 64%;
     --border: 239 20% 18%;
     --input: 239 20% 18%;
+    --layout-grid-line: 239 20% 23%;
     --primary: 239 78% 58%;
     --primary-foreground: 0 0% 100%;
     --accent: 239 39% 18%;

package/styles/css/color/lime.css

@@ -15,6 +15,7 @@
     --muted-foreground: 84 16% 40%;
     --border: 84 23% 87%;
     --input: 84 23% 87%;
+    --layout-grid-line: 84 23% 82%;
     --primary: 84 78% 48%;
     --primary-foreground: 0 0% 12%;
     --accent: 84 47% 94%;
@@ -38,6 +39,7 @@
     --muted-foreground: 84 16% 64%;
     --border: 84 20% 18%;
     --input: 84 20% 18%;
+    --layout-grid-line: 84 20% 23%;
     --primary: 84 78% 58%;
     --primary-foreground: 0 0% 10%;
     --accent: 84 39% 18%;

package/styles/css/color/orange.css

@@ -15,6 +15,7 @@
     --muted-foreground: 24 19% 40%;
     --border: 24 29% 87%;
     --input: 24 29% 87%;
+    --layout-grid-line: 24 29% 82%;
     --primary: 24 95% 48%;
     --primary-foreground: 0 0% 100%;
     --accent: 24 57% 94%;
@@ -38,6 +39,7 @@
     --muted-foreground: 24 19% 64%;
     --border: 24 24% 18%;
     --input: 24 24% 18%;
+    --layout-grid-line: 24 24% 23%;
     --primary: 24 95% 58%;
     --primary-foreground: 0 0% 100%;
     --accent: 24 48% 18%;

package/styles/css/color/pink.css

@@ -15,6 +15,7 @@
     --muted-foreground: 330 16% 40%;
     --border: 330 23% 87%;
     --input: 330 23% 87%;
+    --layout-grid-line: 330 23% 82%;
     --primary: 330 78% 48%;
     --primary-foreground: 0 0% 100%;
     --accent: 330 47% 94%;
@@ -38,6 +39,7 @@
     --muted-foreground: 330 16% 64%;
     --border: 330 20% 18%;
     --input: 330 20% 18%;
+    --layout-grid-line: 330 20% 23%;
     --primary: 330 78% 58%;
     --primary-foreground: 0 0% 100%;
     --accent: 330 39% 18%;

package/styles/css/color/purple.css

@@ -15,6 +15,7 @@
     --muted-foreground: 271 16% 40%;
     --border: 271 24% 87%;
     --input: 271 24% 87%;
+    --layout-grid-line: 271 24% 82%;
     --primary: 271 81% 48%;
     --primary-foreground: 0 0% 100%;
     --accent: 271 49% 94%;
@@ -38,6 +39,7 @@
     --muted-foreground: 271 16% 64%;
     --border: 271 20% 18%;
     --input: 271 20% 18%;
+    --layout-grid-line: 271 20% 23%;
     --primary: 271 81% 58%;
     --primary-foreground: 0 0% 100%;
     --accent: 271 41% 18%;

package/styles/css/color/red.css

@@ -15,6 +15,7 @@
     --muted-foreground: 0 14% 40%;
     --border: 0 22% 87%;
     --input: 0 22% 87%;
+    --layout-grid-line: 0 22% 82%;
     --primary: 0 72% 48%;
     --primary-foreground: 0 0% 100%;
     --accent: 0 43% 94%;
@@ -38,6 +39,7 @@
     --muted-foreground: 0 14% 64%;
     --border: 0 18% 18%;
     --input: 0 18% 18%;
+    --layout-grid-line: 0 18% 23%;
     --primary: 0 72% 58%;
     --primary-foreground: 0 0% 100%;
     --accent: 0 36% 18%;

package/styles/css/color/rose.css

@@ -15,6 +15,7 @@
     --muted-foreground: 349 17% 40%;
     --border: 349 25% 87%;
     --input: 349 25% 87%;
+    --layout-grid-line: 349 25% 82%;
     --primary: 349 84% 48%;
     --primary-foreground: 0 0% 100%;
     --accent: 349 50% 94%;
@@ -38,6 +39,7 @@
     --muted-foreground: 349 17% 64%;
     --border: 349 21% 18%;
     --input: 349 21% 18%;
+    --layout-grid-line: 349 21% 23%;
     --primary: 349 84% 58%;
     --primary-foreground: 0 0% 100%;
     --accent: 349 42% 18%;

package/styles/css/color/sky.css

@@ -15,6 +15,7 @@
     --muted-foreground: 199 18% 40%;
     --border: 199 27% 87%;
     --input: 199 27% 87%;
+    --layout-grid-line: 199 27% 82%;
     --primary: 199 89% 48%;
     --primary-foreground: 0 0% 100%;
     --accent: 199 53% 94%;
@@ -38,6 +39,7 @@
     --muted-foreground: 199 18% 64%;
     --border: 199 22% 18%;
     --input: 199 22% 18%;
+    --layout-grid-line: 199 22% 23%;
     --primary: 199 89% 58%;
     --primary-foreground: 0 0% 100%;
     --accent: 199 45% 18%;