@ojiepermana/angular 22.1.11 → 22.1.13

package/theme/styles/css/base/prefers-dark.css

@@ -0,0 +1,86 @@
+/**
+ * Base theme: (prefers-color-scheme: dark) fallback.
+ *
+ * Generated by scripts/gen-theme-colors.mjs — do not edit. Mirrors every
+ * [data-mode='dark'] rule in theme.css and tokens.css so an OS dark preference
+ * is honoured before the theme provider has written the attribute. An explicit
+ * data-mode choice, in either direction, still decides.
+ */
+@layer tokens {
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-mode='light']) {
+      color-scheme: dark;
+    }
+
+    :root:not([data-mode='light']) {
+      --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-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%);
+    }
+
+    :root:not([data-mode='light']) {
+      --highlight: 0 0% 64%;
+      --highlight-border-alpha: 0.45;
+      --highlight-background-alpha: 0.55;
+      --background: 0 0% 5%;
+      --layout-canvas: 0 0% 15%;
+      --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%;
+      --layout-grid-line: 0 0% 24%;
+      --layout-grid-l: 24%;
+      --layout-grid-highlight-l: 88%;
+      --layout-grid-highlight-opacity: 0.62;
+      --layout-matrix-opacity: 0.24;
+      --layout-matrix-glow-opacity: 0.72;
+      --layout-circuit-node-opacity: 0.3;
+      --layout-pattern-node: 0 0% 78%;
+      --primary: 0 0% 98%;
+      --primary-foreground: 0 0% 12%;
+      --accent: 0 0% 16%;
+      --accent-foreground: 0 0% 98%;
+      --secondary: 0 0% 18%;
+      --secondary-foreground: 0 0% 96%;
+      --ring: 0 0% 85%;
+      --brand: 0 0% 98%;
+      --brand-foreground: 0 0% 12%;
+      --shadow-base: 0 1px 0 0 hsl(0 0% 96% / 0.08);
+      --shadow-sm: var(--shadow-base);
+      --theme-shadow-sm: var(--shadow-base);
+      --layout-frame-shadow: 0 0 0 1px hsl(var(--border));
+    }
+
+    :root:not([data-mode='light']) [data-shell-color='default'][data-shell-device='macos'] {
+      --shell-bar-background: 240 2% 18%;
+      --shell-bar-foreground: 0 0% 90%;
+      --shell-bar-border: 240 2% 26%;
+    }
+
+    :root:not([data-mode='light']) [data-shell-color='default'][data-shell-device='windows'] {
+      --shell-bar-background: 0 0% 13%;
+      --shell-bar-foreground: 0 0% 93%;
+      --shell-bar-border: 0 0% 22%;
+    }
+
+    :root:not([data-mode='light']) [data-shell-color='default'][data-shell-device='linux'] {
+      --shell-bar-background: 0 0% 19%;
+      --shell-bar-foreground: 0 0% 92%;
+      --shell-bar-border: 0 0% 27%;
+    }
+  }
+}

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

@@ -0,0 +1,62 @@
+/**
+ * Automatic print contract for the application shell.
+ *
+ * Printing keeps business content from PageContent/PageDashboard while removing
+ * navigation and interactive page chrome. The structural resets are important:
+ * screen layouts intentionally use viewport heights and nested scroll regions,
+ * which otherwise clip long documents to the visible viewport when printed.
+ */
+@media print {
+  [data-layout-loading],
+  [data-layout-navigation],
+  [data-navigation-id],
+  [data-layout-rail],
+  [data-page-slot='header'],
+  [data-page-slot='footer'],
+  [data-page-slot='side'],
+  [data-page-slot='filter'],
+  [data-page-control],
+  [data-page-overlay-backdrop] {
+    display: none !important;
+  }
+
+  [data-layout-root],
+  [data-layout-stage],
+  [data-layout-frame],
+  [data-layout-content-shell],
+  [data-layout-variant],
+  [data-layout-content],
+  [data-page-root],
+  [data-page-shell],
+  [data-page-body],
+  [data-page-content-region],
+  [data-page-slot='content'],
+  [data-page-slot='dashboard'] {
+    display: block !important;
+    min-height: 0 !important;
+    max-height: none !important;
+    height: auto !important;
+    min-width: 0 !important;
+    max-width: none !important;
+    width: 100% !important;
+    overflow: visible !important;
+  }
+
+  [data-layout-root] {
+    padding: 0 !important;
+    background: transparent !important;
+  }
+
+  [data-layout-root]::before,
+  [data-layout-root]::after {
+    display: none !important;
+    content: none !important;
+  }
+
+  [data-layout-frame] {
+    border: 0 !important;
+    border-radius: 0 !important;
+    background: transparent !important;
+    box-shadow: none !important;
+  }
+}

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

@@ -0,0 +1,38 @@
+/**
+ * Semantic status fills: success, warning, info.
+ *
+ * Generated by scripts/gen-theme-colors.mjs — do not edit. Derived from the
+ * same accent seeds as the palettes (green, amber, sky) with the foreground
+ * chosen by measured contrast, so components can use bg-success and friends
+ * instead of hardcoded Tailwind colours and still pass WCAG AA.
+ */
+@layer tokens {
+  :root {
+    --success: 142 69% 48%;
+    --success-foreground: 0 0% 12%;
+    --warning: 38 92% 48%;
+    --warning-foreground: 0 0% 12%;
+    --info: 199 89% 48%;
+    --info-foreground: 0 0% 12%;
+  }
+
+  [data-mode='dark'] {
+    --success: 142 69% 58%;
+    --success-foreground: 0 0% 10%;
+    --warning: 38 92% 58%;
+    --warning-foreground: 0 0% 10%;
+    --info: 199 89% 58%;
+    --info-foreground: 0 0% 10%;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-mode='light']) {
+      --success: 142 69% 58%;
+      --success-foreground: 0 0% 10%;
+      --warning: 38 92% 58%;
+      --warning-foreground: 0 0% 10%;
+      --info: 199 89% 58%;
+      --info-foreground: 0 0% 10%;
+    }
+  }
+}

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

@@ -0,0 +1,165 @@
+/**
+ * Tailwind v4 theme mapping for @ojiepermana/angular/theme/styles.
+ *
+ * Requires Tailwind CSS ^4.3.0.
+ *
+ * Usage (styles.css):
+ *   @import '@ojiepermana/angular/theme/theme.css';
+ *   @import 'tailwindcss';
+ *   @import '@ojiepermana/angular/theme/styles/css/base/tailwind.css';
+ *
+ * Maps the 3-layer HSL CSS variables onto Tailwind v4 design tokens so
+ * utilities like `bg-primary`, `text-foreground`, `rounded-md`, and
+ * `shadow-lg` resolve to the active theme automatically.
+ */
+@custom-variant dark (&:where([data-mode='dark'], [data-mode='dark'] *, .dark, .dark *));
+
+@theme inline {
+  --color-highlight: hsl(var(--highlight) / 0.7);
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-background: hsl(var(--background));
+  --color-surface: hsl(var(--surface, var(--muted)));
+  --color-surface-foreground: hsl(var(--surface-foreground, var(--foreground)));
+  --color-layout-canvas: hsl(var(--layout-canvas, var(--background)));
+  --color-foreground: hsl(var(--foreground));
+
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+
+  --color-brand: hsl(var(--brand));
+  --color-brand-foreground: hsl(var(--brand-foreground));
+
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+
+  --color-success: hsl(var(--success));
+  --color-success-foreground: hsl(var(--success-foreground));
+
+  --color-warning: hsl(var(--warning));
+  --color-warning-foreground: hsl(var(--warning-foreground));
+
+  --color-info: hsl(var(--info));
+  --color-info-foreground: hsl(var(--info-foreground));
+
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+
+  --color-chart-1: hsl(var(--chart-1));
+  --color-chart-2: hsl(var(--chart-2));
+  --color-chart-3: hsl(var(--chart-3));
+  --color-chart-4: hsl(var(--chart-4));
+  --color-chart-5: hsl(var(--chart-5));
+
+  --color-sidebar: hsl(var(--sidebar));
+  --color-sidebar-foreground: hsl(var(--sidebar-foreground));
+  --color-sidebar-primary: hsl(var(--sidebar-primary));
+  --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
+  --color-sidebar-accent: hsl(var(--sidebar-accent));
+  --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
+  --color-sidebar-border: hsl(var(--sidebar-border));
+  --color-sidebar-ring: hsl(var(--sidebar-ring));
+
+  --radius: var(--radius-base);
+  --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);
+
+  --shadow-xs: var(--theme-shadow-xs);
+  --shadow-sm: var(--theme-shadow-sm);
+  --shadow: var(--theme-shadow);
+  --shadow-md: var(--theme-shadow-md);
+  --shadow-lg: var(--theme-shadow-lg);
+  --shadow-xl: var(--theme-shadow-xl);
+
+  --text-2xs: var(--font-size-2xs);
+  --text-2xs--line-height: var(--line-height-2xs);
+  --text-2xs-plus: var(--font-size-2xs-plus);
+  --text-2xs-plus--line-height: var(--line-height-2xs-plus);
+  --text-xs: var(--font-size-xs);
+  --text-xs--line-height: var(--line-height-tight);
+  --text-sm: var(--font-size-sm);
+  --text-sm--line-height: var(--line-height-snug);
+  --text-base: var(--font-size-md);
+  --text-base--line-height: var(--line-height-normal);
+  --text-lg: var(--font-size-lg);
+  --text-lg--line-height: var(--line-height-normal);
+  --text-xl: var(--font-size-xl);
+  --text-xl--line-height: var(--line-height-snug);
+  --text-2xl: var(--font-size-2xl);
+  --text-2xl--line-height: var(--line-height-snug);
+  --text-3xl: var(--font-size-3xl);
+  --text-3xl--line-height: var(--line-height-tight);
+  --text-4xl: var(--font-size-4xl);
+  --text-4xl--line-height: var(--line-height-tight);
+  --text-5xl: calc(var(--font-size-base) * 3);
+  --text-5xl--line-height: 1;
+  --text-6xl: calc(var(--font-size-base) * 3.75);
+  --text-6xl--line-height: 1;
+  --text-7xl: calc(var(--font-size-base) * 4.5);
+  --text-7xl--line-height: 1;
+  --text-8xl: calc(var(--font-size-base) * 6);
+  --text-8xl--line-height: 1;
+  --text-9xl: calc(var(--font-size-base) * 8);
+  --text-9xl--line-height: 1;
+
+  --leading-tight: var(--line-height-tight);
+  --leading-snug: var(--line-height-snug);
+  --leading-normal: var(--line-height-normal);
+  --leading-relaxed: var(--line-height-relaxed);
+  --leading-loose: var(--line-height-loose);
+
+  /* Global spacing unit — Tailwind derives every padding, margin, gap, width and
+   * height utility from this. Wired to --spacing-base so the theme-space density
+   * axis rescales all spacing at runtime (default 0.25rem = unchanged). */
+  --spacing: var(--spacing-base);
+
+  --spacing-control-xs: var(--control-height-xs);
+  --spacing-control-sm: var(--control-height-sm);
+  --spacing-control-md: var(--control-height-md);
+  --spacing-control-10: var(--control-height-10);
+  --spacing-control-11: var(--control-height-11);
+  --spacing-control-lg: var(--control-height-lg);
+  --spacing-control-xl: var(--control-height-xl);
+
+  --spacing-container-sm: var(--container-sm);
+  --spacing-container-md: var(--container-md);
+  --spacing-container-lg: var(--container-lg);
+  --spacing-container-xl: var(--container-xl);
+  --spacing-container-2xl: var(--container-2xl);
+
+  --font-sans: var(--theme-font-sans);
+  --font-mono: var(--theme-font-mono);
+}
+
+/**
+ * `rounded-base` — the unscaled theme corner radius.
+ *
+ * It cannot be declared alongside the scaled steps in the `@theme inline` block
+ * above: Tailwind derives the utility name from the variable name, so
+ * `--radius-base: var(--radius-base)` would resolve against itself. Declaring it
+ * as a first-class utility keeps the `rounded-base` spelling pointing straight at
+ * the runtime radius knob, so every `theme-radius` preset (none → full) drives it
+ * exactly like `rounded-md` and friends.
+ */
+@utility rounded-base {
+  border-radius: var(--radius-base);
+}