@ojiepermana/angular 22.1.11 → 22.1.13

package/theme/styles/css/base/theme.css

@@ -0,0 +1,374 @@
+/**
+ * Core theme layers and shared tokens.
+ */
+@layer reset, base, mat-mdc, tokens, components, utilities;
+
+@layer tokens {
+  :root {
+    /* Tailwind's stock `rounded-md`, matching the theme-radius='md' default. */
+    --radius-base: 0.375rem;
+    --radius-none: 0px;
+    --scrollbar-size: 0.5rem;
+    --scrollbar-radius: 9999px;
+    --scrollbar-track: var(--primary) / var(--opacity-10);
+    --scrollbar-thumb: var(--primary);
+    --scrollbar-thumb-hover: var(--primary);
+    --spacing-base: 0.25rem;
+
+    --font-size-base: 1rem;
+    --line-height-base: 1.5;
+
+    --border-width-base: 1px;
+
+    --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);
+
+    /* The middle rung of the control ladder, and the one everything else is
+     * measured against. Derived from --spacing-base so control heights move with
+     * the theme-space density axis instead of standing still while the padding
+     * around them tightens. Nine units, which is exactly 2.25rem at the 0.25rem
+     * default, so nothing shifts for anyone who never touches the axis. */
+    --control-height-base: calc(var(--spacing-base) * 9);
+
+    --container-base: 80rem;
+
+    --z-base: 1;
+
+    --opacity-10: 0.1;
+    --opacity-20: 0.2;
+    --opacity-24: 0.24;
+    --opacity-30: 0.3;
+    --opacity-40: 0.4;
+    --opacity-50: 0.5;
+    --opacity-60: 0.6;
+    --opacity-70: 0.7;
+    --opacity-80: 0.8;
+    --opacity-90: 0.9;
+
+    --radius-xs: calc(var(--radius-base) * 0.4);
+    --radius-sm: calc(var(--radius-base) * 0.6);
+    --radius-md: calc(var(--radius-base) * 0.8);
+    --radius-lg: var(--radius-base);
+    --radius-xl: calc(var(--radius-base) * 1.4);
+    --radius-2xl: calc(var(--radius-base) * 1.8);
+    --radius-3xl: calc(var(--radius-base) * 2.2);
+    --radius-4xl: calc(var(--radius-base) * 2.6);
+    --radius: var(--radius-base);
+
+    --spacing-xs: calc(var(--spacing-base) * 1);
+    --spacing-sm: calc(var(--spacing-base) * 2);
+    --spacing-md: calc(var(--spacing-base) * 4);
+    --spacing-lg: calc(var(--spacing-base) * 6);
+    --spacing-xl: calc(var(--spacing-base) * 8);
+    --spacing-2xl: calc(var(--spacing-base) * 12);
+    --spacing-3xl: calc(var(--spacing-base) * 16);
+    --spacing-4xl: calc(var(--spacing-base) * 24);
+
+    --font-size-xs: calc(var(--font-size-base) * 0.75);
+    --font-size-sm: calc(var(--font-size-base) * 0.875);
+    --font-size-md: var(--font-size-base);
+    --font-size-lg: calc(var(--font-size-base) * 1.125);
+    --font-size-xl: calc(var(--font-size-base) * 1.25);
+    --font-size-2xl: calc(var(--font-size-base) * 1.5);
+    --font-size-3xl: calc(var(--font-size-base) * 1.875);
+    --font-size-4xl: calc(var(--font-size-base) * 2.25);
+
+    --line-height-tight: 1.25;
+    --line-height-snug: 1.375;
+    --line-height-normal: var(--line-height-base);
+    --line-height-relaxed: 1.625;
+    --line-height-loose: 2;
+
+    --border-width-thin: var(--border-width-base);
+    --border-width-medium: calc(var(--border-width-base) * 2);
+    --border-width-thick: calc(var(--border-width-base) * 3);
+
+    /* Concrete values live in the *-base primitives. The --shadow-* aliases are
+     * 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(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);
+    --shadow-lg: var(--shadow-lg-base);
+    --shadow-xl: var(--shadow-xl-base);
+
+    --duration-fast: calc(var(--duration-base) * 0.5);
+    --duration-normal: var(--duration-base);
+    --duration-slow: calc(var(--duration-base) * 1.5);
+    --duration-slower: calc(var(--duration-base) * 2);
+
+    --ease-standard: var(--ease-base);
+    --ease-enter: cubic-bezier(0, 0, 0.2, 1);
+    --ease-exit: cubic-bezier(0.4, 0, 1, 1);
+
+    /* The control height ladder, every rung a multiple of the same knob.
+     *
+     * The multipliers are not free choices: they are the only ones that land on
+     * the values these tokens already had, which is what keeps the promise that
+     * theme-space='normal' renders pixel for pixel as before.
+     *
+     * `-10` and `-11` break the t-shirt naming, and do so deliberately. The
+     * library ships controls at 40px (button lg, toggle lg, an OTP slot) and
+     * 44px (segmented control), and there is no free t-shirt rung between `md`
+     * and `lg` to put them on. Renaming the existing rungs to make room would
+     * change what `h-control-lg` means for anyone already using it, so the two
+     * additions name their spacing multiple instead. */
+    --control-height-xs: calc(var(--spacing-base) * 7);
+    --control-height-sm: calc(var(--spacing-base) * 8);
+    --control-height-md: var(--control-height-base);
+    --control-height-10: calc(var(--spacing-base) * 10);
+    --control-height-11: calc(var(--spacing-base) * 11);
+    --control-height-lg: calc(var(--spacing-base) * 12);
+    --control-height-xl: calc(var(--spacing-base) * 14);
+
+    --container-sm: 40rem;
+    --container-md: 48rem;
+    --container-lg: 64rem;
+    --container-xl: var(--container-base);
+    --container-2xl: 96rem;
+
+    --z-dropdown: calc(var(--z-base) * 100);
+    --z-sticky: calc(var(--z-base) * 200);
+    --z-fixed: calc(var(--z-base) * 300);
+    --z-overlay: calc(var(--z-base) * 400);
+    --z-modal: calc(var(--z-base) * 500);
+    --z-popover: calc(var(--z-base) * 600);
+    --z-tooltip: calc(var(--z-base) * 700);
+    --z-toast: calc(var(--z-base) * 800);
+
+    --timeline-indicator-red: 0 72% 51%;
+    --timeline-indicator-red-foreground: 0 0% 100%;
+    --timeline-indicator-orange: 24 95% 53%;
+    --timeline-indicator-orange-foreground: 0 0% 100%;
+    --timeline-indicator-amber: 38 92% 50%;
+    --timeline-indicator-amber-foreground: 0 0% 100%;
+    --timeline-indicator-yellow: 48 96% 53%;
+    --timeline-indicator-yellow-foreground: 0 0% 10%;
+    --timeline-indicator-lime: 84 81% 44%;
+    --timeline-indicator-lime-foreground: 0 0% 10%;
+    --timeline-indicator-green: 142 71% 45%;
+    --timeline-indicator-green-foreground: 0 0% 100%;
+    --timeline-indicator-emerald: 160 84% 39%;
+    --timeline-indicator-emerald-foreground: 0 0% 100%;
+    --timeline-indicator-teal: 173 80% 40%;
+    --timeline-indicator-teal-foreground: 0 0% 100%;
+    --timeline-indicator-cyan: 191 91% 36%;
+    --timeline-indicator-cyan-foreground: 0 0% 100%;
+    --timeline-indicator-sky: 199 89% 48%;
+    --timeline-indicator-sky-foreground: 0 0% 100%;
+    --timeline-indicator-blue: 221 83% 53%;
+    --timeline-indicator-blue-foreground: 0 0% 100%;
+    --timeline-indicator-indigo: 239 84% 67%;
+    --timeline-indicator-indigo-foreground: 0 0% 100%;
+    --timeline-indicator-violet: 258 90% 66%;
+    --timeline-indicator-violet-foreground: 0 0% 100%;
+    --timeline-indicator-purple: 271 91% 65%;
+    --timeline-indicator-purple-foreground: 0 0% 100%;
+    --timeline-indicator-fuchsia: 292 84% 61%;
+    --timeline-indicator-fuchsia-foreground: 0 0% 100%;
+    --timeline-indicator-pink: 330 81% 60%;
+    --timeline-indicator-pink-foreground: 0 0% 100%;
+    --timeline-indicator-rose: 349 89% 60%;
+    --timeline-indicator-rose-foreground: 0 0% 100%;
+
+    /* --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, including 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. The stronger values keep the neutral canvas and its
+    * decorative texture visible without competing with content. */
+    --layout-grid-line-opacity: 0.5;
+    --layout-grid-dot-opacity: 0.6;
+
+    /* ── Surface-pattern color system ─────────────────────────────────────
+     * Every `<Layout surface>` pattern draws from one cascading hue/saturation
+     * source and THREE semantic HSL tiers:
+     *   --layout-pattern-hs        → source hue + saturation
+     *   --layout-pattern-line      → `grid` lines, honeycomb, line-vertical/
+     *                                line-horizontal, circuit traces
+     *   --layout-pattern-highlight → the `grid-line` mosaic glow
+     *   --layout-pattern-node      → matrix digits + circuit via nodes/pads
+    * RULE: patterns FOLLOW THE NEUTRAL. The base fallback keeps
+    * --layout-pattern-hs achromatic while theme-neutral='base' is active. Every
+    * generated non-base neutral is imported later and overrides that source with
+    * its own saturation-boosted family hue plus a neutral NODE tier. Lightness remains
+     * pinned per mode, and opacity remains a separate visibility knob, so the
+     * texture is visibly related to the palette without becoming loud.
+     *
+    * Classic HSL triplets are deliberate: the full mapping works without CSS
+    * relative-color syntax. Accent and brand tokens stay on UI chrome, while
+    * decorative surface tokens stay on the neutral axis. */
+    --layout-pattern-hs: 0 0%;
+    --layout-pattern-line: var(--layout-pattern-hs) var(--layout-grid-l);
+    --layout-pattern-highlight: var(--layout-pattern-hs) var(--layout-grid-highlight-l);
+    --layout-pattern-node: 0 0% 32%;
+
+    /* Composed per-consumer colors (semantic tier × its opacity knob). Layout
+     * host classes and base/components.css consume ONLY these aliases. */
+    --layout-grid-color: hsl(var(--layout-pattern-line) / var(--layout-grid-line-opacity));
+    --layout-line-color: hsl(var(--layout-pattern-line) / var(--layout-grid-dot-opacity));
+    --layout-circuit-trace-color: hsl(var(--layout-pattern-line) / var(--layout-circuit-opacity));
+    --layout-grid-highlight-color: hsl(
+      var(--layout-pattern-highlight) / var(--layout-grid-highlight-opacity)
+    );
+    --layout-matrix-color: hsl(var(--layout-pattern-node) / var(--layout-matrix-opacity));
+    --layout-matrix-glow-color: hsl(var(--layout-pattern-node) / var(--layout-matrix-glow-opacity));
+    --layout-circuit-node-color: hsl(
+      var(--layout-pattern-node) / var(--layout-circuit-node-opacity)
+    );
+
+    /* `grid-line` surface — global faintness of its HIGHLIGHT-tier glow. Its hue
+    * follows the active neutral family (achromatic on theme-neutral='base') and
+     * its tonal anchor is --layout-grid-highlight-l. Per-element alpha is baked
+     * into the SVG mask, so this multiplies it: lower for a quieter surface. */
+    --layout-grid-highlight-opacity: 0.65;
+
+    /* `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). The border stays ACCENT on every neutral — it is layout chrome, like
+     * --layout-rail-color, not part of the pattern — even though the SURFACE glow
+    * follows the neutral family in every mode (see the
+     * --layout-pattern-* tiers). Toned down to 0.484, nearly matching the surface's
+     * strongest sparse stroke (0.55 × 0.9 ≈ 0.495); the border's continuous edge
+     * still defines the frame without becoming harsh. */
+    --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.
+     * Opacity matches navigation chrome for a consistent visual weight, while
+     * --layout-rail-width is the single thickness knob for the layout rails. */
+    --layout-rail-color: var(--accent-foreground);
+    --layout-rail-opacity: 0.666;
+    --layout-rail-width: 1px;
+
+    /* `matrix` surface — a scattered binary (0/1) field tinted with the pattern
+    * NODE tier (--layout-pattern-node: the active neutral family's hue, or an
+    * achromatic base node), so it reads as a soft
+     * "digital" signature that recolors with the active neutral/theme. 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 neutral node 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.3;
+    --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 copper TRACES (pattern LINE tier:
+    *                                   the neutral family's hue, achromatic on
+    *                                   theme-neutral='base'). Per-trace alpha
+     *                                   (ghost/trace/trunk) is baked into the SVG,
+     *                                   so this multiplies it. It sits below the
+     *                                   dense multi-axis grid tier because the PCB
+     *                                   geometry contains more visual detail.
+     *   --layout-circuit-node-opacity → the via NODES / pads (pattern NODE tier:
+    *                                   the neutral family's hue, achromatic on
+    *                                   theme-neutral='base'). Toned down for dark
+     *                                   mode in base/tokens.css (the bright node
+     *                                   color blooms on dark). Both stay below the
+     *                                   grid tier because the PCB mask is much
+     *                                   denser and otherwise competes with content. */
+    --layout-circuit-opacity: 0.3;
+    --layout-circuit-node-opacity: 0.4;
+    --layout-matrix-glow-opacity: 0.65;
+
+    --overlay-backdrop: 0 0% 3.9% / 0.5;
+    --overlay-backdrop-strong: 0 0% 3.9% / 0.4;
+
+    --editor-highlight: 48 96% 80%;
+
+    --font-size-2xs: 0.625rem;
+    --line-height-2xs: 1rem;
+    --font-size-2xs-plus: 0.6875rem;
+    --line-height-2xs-plus: 1rem;
+
+    /* Deprecated: use the new primitive token names instead.
+     * Must reference the *-base primitives, never --shadow-* — the Tailwind
+     * @theme mapping re-emits --shadow-*: var(--theme-shadow-*), so an alias
+     * back to --shadow-* forms a var() cycle. */
+    --theme-shadow-xs: var(--shadow-xs-base);
+    --border-width: var(--border-width-base);
+    --theme-shadow-sm: var(--shadow-base);
+    --theme-shadow: var(--shadow-base);
+    --theme-shadow-md: var(--shadow-md-base);
+    --theme-shadow-lg: var(--shadow-lg-base);
+    --theme-shadow-xl: var(--shadow-xl-base);
+  }
+
+  :root,
+  [data-mode='light'] {
+    color-scheme: light;
+  }
+
+  [data-mode='dark'] {
+    color-scheme: dark;
+  }
+}
+
+@layer tokens {
+  :root {
+    --destructive: 0 72% 51%;
+    --destructive-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, 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);
+    --sidebar-foreground: var(--foreground);
+    --sidebar-primary: var(--primary);
+    --sidebar-primary-foreground: var(--primary-foreground);
+    --sidebar-accent: var(--accent);
+    --sidebar-accent-foreground: var(--accent-foreground);
+    --sidebar-border: var(--border);
+    --sidebar-ring: var(--ring);
+  }
+
+  [data-mode='dark'] {
+    --destructive: 0 62% 45%;
+    --destructive-foreground: 0 0% 95%;
+
+    --overlay-backdrop: 0 0% 0% / 0.64;
+    --overlay-backdrop-strong: 0 0% 0% / 0.5;
+
+    --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, 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%);
+  }
+}