@ojiepermana/angular 21.0.8 → 21.1.4

package/collection.json

@@ -1,30 +1,30 @@
 {
-    "$schema": "../../node_modules/@angular-devkit/schematics/collection-schema.json",
-    "schematics": {
-        "ng-add": {
-            "description": "Add @ojiepermana/angular and its required peer dependencies to an Angular workspace.",
-            "factory": "./generator/api/bin/schematics/ng-add/index.js#ngAdd",
-            "schema": "./generator/api/schematics/ng-add/schema.json"
-        },
-        "sdk": {
-            "description": "Generate an Angular SDK from an OpenAPI spec.",
-            "factory": "./generator/api/bin/schematics/sdk/index.js#sdk",
-            "schema": "./generator/api/schematics/sdk/schema.json"
-        },
-        "sdk-init": {
-            "description": "Create config/sdk.config.json under the workspace root.",
-            "factory": "./generator/api/bin/schematics/init/index.js#init",
-            "schema": "./generator/api/schematics/init/schema.json"
-        },
-        "guide": {
-            "description": "Compile Markdown files into Angular standalone components and a nested route tree.",
-            "factory": "./generator/guide/bin/schematics/build/index.js#build",
-            "schema": "./generator/guide/schematics/build/schema.json"
-        },
-        "guide-init": {
-            "description": "Create config/guide.config.json under the workspace root.",
-            "factory": "./generator/guide/bin/schematics/init/index.js#init",
-            "schema": "./generator/guide/schematics/init/schema.json"
-        }
+  "$schema": "../../node_modules/@angular-devkit/schematics/collection-schema.json",
+  "schematics": {
+    "ng-add": {
+      "description": "Add @ojiepermana/angular and its required peer dependencies to an Angular workspace.",
+      "factory": "./generator/api/bin/schematics/ng-add/index.js#ngAdd",
+      "schema": "./generator/api/schematics/ng-add/schema.json"
+    },
+    "sdk": {
+      "description": "Generate an Angular SDK from an OpenAPI spec.",
+      "factory": "./generator/api/bin/schematics/sdk/index.js#sdk",
+      "schema": "./generator/api/schematics/sdk/schema.json"
+    },
+    "sdk-init": {
+      "description": "Create config/sdk.config.json under the workspace root.",
+      "factory": "./generator/api/bin/schematics/init/index.js#init",
+      "schema": "./generator/api/schematics/init/schema.json"
+    },
+    "guide": {
+      "description": "Compile Markdown files into Angular standalone components and a nested route tree.",
+      "factory": "./generator/guide/bin/schematics/build/index.js#build",
+      "schema": "./generator/guide/schematics/build/schema.json"
+    },
+    "guide-init": {
+      "description": "Create config/guide.config.json under the workspace root.",
+      "factory": "./generator/guide/bin/schematics/init/index.js#init",
+      "schema": "./generator/guide/schematics/init/schema.json"
     }
-}
+  }
+}

package/etos/README.md

@@ -0,0 +1,68 @@
+# Etos Brand
+
+Etos implementation lives under `projects/angular/etos`. Published consumers should use `@ojiepermana/angular/etos`.
+
+Use this folder for Etos-specific implementation:
+
+- `core/` contains Etos provider composition and brand defaults.
+- `themes/` contains Etos color, style, layout, and component-facing CSS.
+- `layouts/` contains Etos shell components.
+- `navigation/`, `components/`, `assets/`, and `docs/` can be added when Etos needs brand-specific behavior beyond shared primitives.
+
+Shared services, types, and primitives stay in the generic libraries:
+
+- `@ojiepermana/angular/theme`
+- `@ojiepermana/angular/layout`
+- `@ojiepermana/angular/navigation`
+
+## Package usage
+
+Published consumers should import Etos through the short public entrypoint:
+
+```ts
+import { type EtosBrandOptions, EtosLayoutComponent, provideEtosBrand } from '@ojiepermana/angular/etos';
+
+export const etosBrandConfig = {
+  theme: { mode: 'light' },
+  layout: { mode: 'vertical' },
+} satisfies EtosBrandOptions;
+
+export const appConfig = {
+  providers: [provideEtosBrand(etosBrandConfig)],
+};
+```
+
+```ts
+@Component({
+  imports: [EtosLayoutComponent],
+  template: `<etos-layout />`,
+})
+export class Pages {}
+```
+
+App CSS should import the Etos package stylesheet before Tailwind:
+
+```css
+@import '@ojiepermana/angular/etos/styles';
+@import 'tailwindcss';
+@import '@ojiepermana/angular/theme/tailwind/theme.css';
+```
+
+## Workspace usage in this repository
+
+The Etos demo under `projects/demo/etos` already uses the short TypeScript entrypoint:
+
+- `src/app/app.config.ts` imports `provideEtosBrand` from `@ojiepermana/angular/etos`.
+- `src/pages/pages.ts` imports `EtosLayoutComponent` from `@ojiepermana/angular/etos`.
+
+For CSS, the workspace demo currently imports the Etos source stylesheet directly:
+
+```css
+@import '../../../angular/etos/themes/index.css';
+@import 'tailwindcss';
+@import '@ojiepermana/angular/theme/tailwind/theme.css';
+```
+
+That local CSS path is intentional while developing inside this monorepo. Angular resolves bare CSS package imports from `node_modules/@ojiepermana/angular`, while TypeScript imports in the demo resolve through `tsconfig.json` path aliases. After the package is built, published, and installed with the latest exports, consumers should use `@ojiepermana/angular/etos/styles`.
+
+The older `@ojiepermana/angular/theme/styles/etos.css` path is kept only as a compatibility shim.

package/etos/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/ojiepermana-angular-etos.mjs",
+  "typings": "../types/ojiepermana-angular-etos.d.ts"
+}

package/etos/styles/index.css

@@ -0,0 +1,15 @@
+/**
+ * @ojiepermana/angular/etos — complete Etos brand stylesheet.
+ *
+ * Import before Tailwind, then import the shared Tailwind token bridge.
+ */
+@import '@ojiepermana/angular/theme/styles/themes/library/_layers.css';
+@import '@ojiepermana/angular/theme/styles/themes/mode/index.css';
+@import '@ojiepermana/angular/theme/styles/themes/library/color/index.css';
+@import '@ojiepermana/angular/theme/styles/themes/library/style/index.css';
+@import './color.css';
+@import './style.css';
+@import './layout.css';
+@import '@ojiepermana/angular/theme/styles/themes/library/_tokens.css';
+@import '@ojiepermana/angular/theme/styles/themes/library/_material-overrides.css';
+@import '@ojiepermana/angular/theme/styles/themes/library/_components.css';

package/etos/styles/layout.css

@@ -0,0 +1,186 @@
+/**
+ * Etos brand layout layer.
+ */
+@layer tokens {
+  [theme-brand='etos'] {
+    --etos-layout-shell-padding: clamp(1rem, 2vw, 2rem);
+    --etos-layout-frame-radius: var(--radius-lg);
+    --etos-layout-frame-shadow: var(--shadow-sm);
+    --etos-layout-sidebar-width: 17.5rem;
+    --etos-layout-main-max-width: 80rem;
+    --etos-layout-vertical-shell-max-width: calc(var(--etos-layout-sidebar-width) + var(--etos-layout-main-max-width));
+    --etos-layout-empty-max-width: 24rem;
+    --etos-layout-empty-padding: clamp(1.5rem, 4vw, 3rem);
+    --etos-layout-topbar-inline: 0.875rem;
+    --etos-layout-brand-mark-size: 2rem;
+  }
+
+  [data-mode='dark'][theme-brand='etos'] {
+    --etos-layout-frame-shadow: 0 0 0 1px hsl(var(--border));
+  }
+}
+
+@layer components {
+  .etos-layout-host {
+    display: block;
+    height: 100dvh;
+    width: 100%;
+    overflow: hidden;
+    background: hsl(var(--background));
+    color: hsl(var(--foreground));
+  }
+
+  .etos-layout-host--fixed {
+    box-sizing: border-box;
+  }
+
+  .etos-layout-frame {
+    display: flex;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    background: hsl(var(--background));
+  }
+
+  .etos-layout-frame--horizontal {
+    flex-direction: column;
+  }
+
+  .etos-layout-main {
+    min-width: 0;
+    flex: 1 1 0%;
+    overflow: auto;
+  }
+
+  .etos-layout-main--fixed {
+    width: 100%;
+    max-width: var(--etos-layout-main-max-width);
+    margin-inline: auto;
+  }
+
+  .etos-layout-topbar {
+    width: 100%;
+    flex-shrink: 0;
+    border-bottom: var(--border-width) solid hsl(var(--border));
+  }
+
+  .etos-layout-topbar-slot {
+    display: flex;
+    min-width: 0;
+    align-items: center;
+  }
+
+  .etos-layout-topbar-slot--end {
+    justify-content: flex-end;
+  }
+
+  .etos-layout-empty-host {
+    display: flex;
+    min-height: 100dvh;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    padding: var(--etos-layout-empty-padding);
+    background: hsl(var(--background));
+    color: hsl(var(--foreground));
+  }
+
+  .etos-layout-empty-main {
+    width: 100%;
+    max-width: var(--etos-layout-empty-max-width);
+  }
+
+  .etos-brand-link,
+  .etos-profile-trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.75rem;
+    min-height: 2.5rem;
+    padding: 0.375rem 0.5rem;
+    color: hsl(var(--foreground));
+    text-decoration: none;
+    transition:
+      color 160ms ease,
+      background-color 160ms ease;
+  }
+
+  .etos-brand-link:focus-visible,
+  .etos-profile-trigger:focus-visible {
+    outline: 2px solid hsl(var(--ring));
+    outline-offset: 2px;
+  }
+
+  .etos-brand-mark,
+  .etos-profile-mark {
+    display: inline-flex;
+    height: var(--etos-layout-brand-mark-size);
+    width: var(--etos-layout-brand-mark-size);
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-md);
+    background: hsl(var(--primary));
+    color: hsl(var(--primary-foreground));
+    font-size: 0.7rem;
+    font-weight: 700;
+    letter-spacing: 0.18em;
+    line-height: 1;
+  }
+
+  .etos-profile-mark {
+    border-radius: 999px;
+    letter-spacing: 0;
+  }
+
+  .etos-brand-copy {
+    display: none;
+    min-width: 0;
+    flex-direction: column;
+    gap: 0.125rem;
+  }
+
+  .etos-brand-name {
+    font-size: var(--text-sm);
+    font-weight: 700;
+    line-height: 1;
+  }
+
+  .etos-brand-subtitle,
+  .etos-profile-name {
+    font-size: var(--text-xs);
+    line-height: 1;
+    color: hsl(var(--muted-foreground));
+  }
+
+  .etos-profile-name {
+    display: none;
+    font-weight: 600;
+  }
+
+  @media (min-width: 40rem) {
+    .etos-brand-copy,
+    .etos-profile-name {
+      display: flex;
+    }
+  }
+
+  @media (min-width: 64rem) {
+    .etos-layout-host--fixed {
+      padding: var(--etos-layout-shell-padding);
+    }
+
+    .etos-layout-frame--vertical-fixed {
+      max-width: var(--etos-layout-vertical-shell-max-width);
+      margin-inline: auto;
+    }
+
+    .etos-layout-frame--fixed {
+      border: var(--border-width) solid hsl(var(--border));
+      border-radius: var(--etos-layout-frame-radius);
+      box-shadow: var(--etos-layout-frame-shadow);
+    }
+
+    .etos-layout-main--vertical-fixed {
+      margin-inline: 0;
+    }
+  }
+}

package/{theme/styles/themes/brand/etos → etos/styles}/style.css

@@ -1,12 +1,12 @@
 /**
- * Etos mirrors the baseline style layer.
+ * Etos brand style layer.
  */
 @layer tokens {
   [theme-brand='etos'] {
-    --theme-radius-base: 0.5rem;
+    --theme-radius-base: 0.375rem;
     --theme-radius-sm: calc(var(--theme-radius-base) - 2px);
     --theme-radius-md: var(--theme-radius-base);
-    --theme-radius-lg: calc(var(--theme-radius-base) + 4px);
+    --theme-radius-lg: calc(var(--theme-radius-base) + 2px);
 
     --radius: var(--theme-radius-base);
     --radius-sm: var(--theme-radius-sm);
@@ -15,10 +15,10 @@
 
     --border-width: 1px;
 
-    --theme-shadow-sm: 0 1px 2px 0 hsl(0 0% 0% / 0.05);
-    --theme-shadow: 0 1px 3px 0 hsl(0 0% 0% / 0.1);
-    --theme-shadow-md: 0 4px 6px -1px hsl(0 0% 0% / 0.1);
-    --theme-shadow-lg: 0 10px 15px -3px hsl(0 0% 0% / 0.1);
+    --theme-shadow-sm: 0 1px 0 0 hsl(211 95% 12% / 0.08);
+    --theme-shadow: 0 2px 4px -2px hsl(211 95% 12% / 0.14);
+    --theme-shadow-md: 0 8px 18px -14px hsl(211 95% 12% / 0.24);
+    --theme-shadow-lg: 0 18px 36px -28px hsl(211 95% 12% / 0.34);
 
     --shadow-sm: var(--theme-shadow-sm);
     --shadow: var(--theme-shadow);
@@ -30,21 +30,22 @@
 
     --font-sans: var(--theme-font-sans);
     --font-mono: var(--theme-font-mono);
-    --font-weight-bold: 600;
+    --font-weight-bold: 650;
     --theme-text-scale: 1;
     --nav-font-family: var(--font-sans);
-    --nav-text-size: var(--text-base);
-    --nav-text-line-height: var(--text-base--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);
-    --nav-heading-weight: 600;
-    --nav-heading-letter-spacing: 0.12em;
+    --nav-heading-size: var(--text-xs);
+    --nav-heading-line-height: var(--text-xs--line-height);
+    --nav-heading-weight: 700;
+    --nav-heading-letter-spacing: 0.14em;
     --nav-badge-font-family: var(--font-sans);
-    --nav-badge-size: var(--text-sm);
-    --nav-badge-line-height: var(--text-sm--line-height);
-    --nav-badge-weight: 500;
+    --nav-badge-size: var(--text-xs);
+    --nav-badge-line-height: var(--text-xs--line-height);
+    --nav-badge-weight: 600;
     --letter-spacing: 0;
     --space-unit: 0.25rem;
+    --layout-topbar-height: 3.25rem;
   }
 }