@ojiepermana/angular 21.1.23 → 21.1.25

package/theme/styles/themes/library/color/orange.css

@@ -0,0 +1,31 @@
+@layer tokens {
+  [data-color='orange'] {
+    --primary: 25 100% 50%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 25 100% 96%;
+    --accent-foreground: 18 100% 48%;
+    --secondary: 25 30% 96%;
+    --secondary-foreground: 18 100% 48%;
+    --ring: 25 100% 50%;
+    --theme-chart-1: 25 100% 50%;
+    --theme-chart-2: 44 100% 50%;
+    --theme-chart-3: 357 96% 58%;
+    --theme-chart-4: 47 100% 50%;
+    --theme-chart-5: 345 100% 56%;
+  }
+
+  [data-mode='dark'][data-color='orange'] {
+    --primary: 32 100% 51%;
+    --primary-foreground: 13 85% 14%;
+    --accent: 32 50% 18%;
+    --accent-foreground: 32 100% 51%;
+    --secondary: 32 30% 18%;
+    --secondary-foreground: 32 100% 51%;
+    --ring: 32 100% 51%;
+    --theme-chart-1: 32 100% 51%;
+    --theme-chart-2: 44 100% 50%;
+    --theme-chart-3: 359 100% 70%;
+    --theme-chart-4: 47 100% 50%;
+    --theme-chart-5: 350 100% 69%;
+  }
+}

package/theme/styles/themes/library/color/pink.css

@@ -0,0 +1,31 @@
+@layer tokens {
+  [data-color='pink'] {
+    --primary: 329 100% 45%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 329 100% 96%;
+    --accent-foreground: 329 100% 45%;
+    --secondary: 329 30% 96%;
+    --secondary-foreground: 329 100% 45%;
+    --ring: 329 100% 45%;
+    --theme-chart-1: 329 100% 45%;
+    --theme-chart-2: 345 100% 56%;
+    --theme-chart-3: 294 100% 44%;
+    --theme-chart-4: 273 100% 64%;
+    --theme-chart-5: 357 96% 58%;
+  }
+
+  [data-mode='dark'][data-color='pink'] {
+    --primary: 329 100% 45%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 329 50% 18%;
+    --accent-foreground: 327 95% 69%;
+    --secondary: 329 30% 18%;
+    --secondary-foreground: 327 95% 69%;
+    --ring: 329 100% 45%;
+    --theme-chart-1: 327 95% 69%;
+    --theme-chart-2: 350 100% 69%;
+    --theme-chart-3: 293 100% 71%;
+    --theme-chart-4: 271 100% 85%;
+    --theme-chart-5: 359 100% 70%;
+  }
+}

package/theme/styles/themes/library/color/purple.css

@@ -1,18 +1,31 @@
 @layer tokens {
   [data-color='purple'] {
-    --primary: 271 81% 56%;
+    --primary: 273 100% 64%;
     --primary-foreground: 0 0% 100%;
-    --accent: 271 81% 96%;
-    --accent-foreground: 271 81% 35%;
-    --secondary: 271 30% 95%;
-    --secondary-foreground: 271 81% 35%;
-    --ring: 271 81% 56%;
+    --accent: 273 100% 96%;
+    --accent-foreground: 275 96% 52%;
+    --secondary: 273 30% 96%;
+    --secondary-foreground: 275 96% 52%;
+    --ring: 273 100% 64%;
+    --theme-chart-1: 273 100% 64%;
+    --theme-chart-2: 261 100% 66%;
+    --theme-chart-3: 294 100% 44%;
+    --theme-chart-4: 241 100% 69%;
+    --theme-chart-5: 329 100% 45%;
   }
 
   [data-mode='dark'][data-color='purple'] {
-    --accent: 271 50% 20%;
-    --accent-foreground: 271 81% 80%;
-    --secondary: 271 30% 20%;
-    --secondary-foreground: 271 81% 80%;
+    --primary: 273 100% 64%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 273 50% 18%;
+    --accent-foreground: 271 100% 85%;
+    --secondary: 273 30% 18%;
+    --secondary-foreground: 271 100% 85%;
+    --ring: 273 100% 64%;
+    --theme-chart-1: 271 100% 85%;
+    --theme-chart-2: 257 100% 76%;
+    --theme-chart-3: 293 100% 71%;
+    --theme-chart-4: 230 100% 82%;
+    --theme-chart-5: 327 95% 69%;
   }
 }

package/theme/styles/themes/library/color/red.css

@@ -1,18 +1,31 @@
 @layer tokens {
   [data-color='red'] {
-    --primary: 0 72% 51%;
+    --primary: 357 96% 58%;
     --primary-foreground: 0 0% 100%;
-    --accent: 0 84% 95%;
-    --accent-foreground: 0 72% 35%;
-    --secondary: 0 30% 95%;
-    --secondary-foreground: 0 72% 35%;
-    --ring: 0 72% 51%;
+    --accent: 357 100% 96%;
+    --accent-foreground: 357 100% 45%;
+    --secondary: 357 30% 96%;
+    --secondary-foreground: 357 100% 45%;
+    --ring: 357 96% 58%;
+    --theme-chart-1: 357 96% 58%;
+    --theme-chart-2: 25 100% 50%;
+    --theme-chart-3: 44 100% 50%;
+    --theme-chart-4: 329 100% 45%;
+    --theme-chart-5: 345 100% 56%;
   }
 
   [data-mode='dark'][data-color='red'] {
-    --accent: 0 50% 20%;
-    --accent-foreground: 0 91% 80%;
-    --secondary: 0 30% 20%;
-    --secondary-foreground: 0 91% 80%;
+    --primary: 357 96% 58%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 357 50% 18%;
+    --accent-foreground: 359 100% 70%;
+    --secondary: 357 30% 18%;
+    --secondary-foreground: 359 100% 70%;
+    --ring: 357 96% 58%;
+    --theme-chart-1: 359 100% 70%;
+    --theme-chart-2: 32 100% 51%;
+    --theme-chart-3: 44 100% 50%;
+    --theme-chart-4: 327 95% 69%;
+    --theme-chart-5: 350 100% 69%;
   }
 }

package/theme/styles/themes/library/color/rose.css

@@ -0,0 +1,31 @@
+@layer tokens {
+  [data-color='rose'] {
+    --primary: 345 100% 56%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 345 100% 96%;
+    --accent-foreground: 345 100% 56%;
+    --secondary: 345 30% 96%;
+    --secondary-foreground: 345 100% 56%;
+    --ring: 345 100% 56%;
+    --theme-chart-1: 345 100% 56%;
+    --theme-chart-2: 357 96% 58%;
+    --theme-chart-3: 329 100% 45%;
+    --theme-chart-4: 25 100% 50%;
+    --theme-chart-5: 294 100% 44%;
+  }
+
+  [data-mode='dark'][data-color='rose'] {
+    --primary: 345 100% 56%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 345 50% 18%;
+    --accent-foreground: 350 100% 69%;
+    --secondary: 345 30% 18%;
+    --secondary-foreground: 350 100% 69%;
+    --ring: 345 100% 56%;
+    --theme-chart-1: 350 100% 69%;
+    --theme-chart-2: 359 100% 70%;
+    --theme-chart-3: 327 95% 69%;
+    --theme-chart-4: 32 100% 51%;
+    --theme-chart-5: 293 100% 71%;
+  }
+}

package/theme/styles/themes/library/color/sky.css

@@ -0,0 +1,31 @@
+@layer tokens {
+  [data-color='sky'] {
+    --primary: 202 100% 41%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 202 100% 96%;
+    --accent-foreground: 202 100% 41%;
+    --secondary: 202 30% 96%;
+    --secondary-foreground: 202 100% 41%;
+    --ring: 202 100% 41%;
+    --theme-chart-1: 202 100% 41%;
+    --theme-chart-2: 216 100% 58%;
+    --theme-chart-3: 192 100% 36%;
+    --theme-chart-4: 241 100% 69%;
+    --theme-chart-5: 175 100% 29%;
+  }
+
+  [data-mode='dark'][data-color='sky'] {
+    --primary: 202 100% 41%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 202 50% 18%;
+    --accent-foreground: 196 100% 50%;
+    --secondary: 202 30% 18%;
+    --secondary-foreground: 196 100% 50%;
+    --ring: 202 100% 41%;
+    --theme-chart-1: 196 100% 50%;
+    --theme-chart-2: 212 100% 66%;
+    --theme-chart-3: 188 100% 48%;
+    --theme-chart-4: 230 100% 82%;
+    --theme-chart-5: 173 100% 42%;
+  }
+}

package/theme/styles/themes/library/color/teal.css

@@ -0,0 +1,31 @@
+@layer tokens {
+  [data-color='teal'] {
+    --primary: 175 100% 29%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 175 100% 96%;
+    --accent-foreground: 175 100% 29%;
+    --secondary: 175 30% 96%;
+    --secondary-foreground: 175 100% 29%;
+    --ring: 175 100% 29%;
+    --theme-chart-1: 175 100% 29%;
+    --theme-chart-2: 192 100% 36%;
+    --theme-chart-3: 160 100% 30%;
+    --theme-chart-4: 202 100% 41%;
+    --theme-chart-5: 142 100% 33%;
+  }
+
+  [data-mode='dark'][data-color='teal'] {
+    --primary: 175 100% 29%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 175 50% 18%;
+    --accent-foreground: 173 100% 42%;
+    --secondary: 175 30% 18%;
+    --secondary-foreground: 173 100% 42%;
+    --ring: 175 100% 29%;
+    --theme-chart-1: 173 100% 42%;
+    --theme-chart-2: 188 100% 48%;
+    --theme-chart-3: 161 100% 42%;
+    --theme-chart-4: 196 100% 50%;
+    --theme-chart-5: 150 96% 45%;
+  }
+}

package/theme/styles/themes/library/color/violet.css

@@ -0,0 +1,31 @@
+@layer tokens {
+  [data-color='violet'] {
+    --primary: 261 100% 66%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 261 100% 96%;
+    --accent-foreground: 265 99% 56%;
+    --secondary: 261 30% 96%;
+    --secondary-foreground: 265 99% 56%;
+    --ring: 261 100% 66%;
+    --theme-chart-1: 261 100% 66%;
+    --theme-chart-2: 273 100% 64%;
+    --theme-chart-3: 241 100% 69%;
+    --theme-chart-4: 294 100% 44%;
+    --theme-chart-5: 216 100% 58%;
+  }
+
+  [data-mode='dark'][data-color='violet'] {
+    --primary: 261 100% 66%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 261 50% 18%;
+    --accent-foreground: 257 100% 76%;
+    --secondary: 261 30% 18%;
+    --secondary-foreground: 257 100% 76%;
+    --ring: 261 100% 66%;
+    --theme-chart-1: 257 100% 76%;
+    --theme-chart-2: 271 100% 85%;
+    --theme-chart-3: 230 100% 82%;
+    --theme-chart-4: 293 100% 71%;
+    --theme-chart-5: 212 100% 66%;
+  }
+}

package/theme/styles/themes/library/color/yellow.css

@@ -0,0 +1,31 @@
+@layer tokens {
+  [data-color='yellow'] {
+    --primary: 47 100% 50%;
+    --primary-foreground: 26 88% 14%;
+    --accent: 47 100% 96%;
+    --accent-foreground: 39 100% 41%;
+    --secondary: 47 30% 96%;
+    --secondary-foreground: 39 100% 41%;
+    --ring: 47 100% 50%;
+    --theme-chart-1: 47 100% 50%;
+    --theme-chart-2: 44 100% 50%;
+    --theme-chart-3: 80 100% 45%;
+    --theme-chart-4: 25 100% 50%;
+    --theme-chart-5: 142 100% 33%;
+  }
+
+  [data-mode='dark'][data-color='yellow'] {
+    --primary: 47 100% 50%;
+    --primary-foreground: 26 88% 14%;
+    --accent: 47 50% 18%;
+    --accent-foreground: 47 100% 50%;
+    --secondary: 47 30% 18%;
+    --secondary-foreground: 47 100% 50%;
+    --ring: 47 100% 50%;
+    --theme-chart-1: 47 100% 50%;
+    --theme-chart-2: 44 100% 50%;
+    --theme-chart-3: 80 100% 45%;
+    --theme-chart-4: 32 100% 51%;
+    --theme-chart-5: 150 96% 45%;
+  }
+}

package/theme/styles/themes/library/style/brutal.css

@@ -1,11 +1,13 @@
 @layer tokens {
   [data-style='brutal'] {
+    --theme-radius-xs: 0;
     --theme-radius-base: 0;
     --theme-radius-sm: 0;
     --theme-radius-md: 0;
     --theme-radius-lg: 0;
 
-    --radius: 0;
+    --radius: var(--theme-radius-md);
+    --radius-xs: var(--theme-radius-xs);
     --radius-sm: 0;
     --radius-md: 0;
     --radius-lg: 0;
@@ -30,7 +32,7 @@
     --font-weight-bold: 700;
     --theme-text-scale: 1.08;
     --nav-font-family: var(--font-sans);
-    --nav-text-size: var(--text-base);
+    --nav-text-size: calc(var(--text-base) - 0.125rem);
     --nav-text-line-height: var(--text-base--line-height);
     --nav-heading-font-family: var(--font-mono);
     --nav-heading-size: var(--text-sm);

package/theme/styles/themes/library/style/default.css

@@ -4,12 +4,14 @@
 @layer tokens {
   :root,
   [data-style='default'] {
+    --theme-radius-xs: 0.125rem;
     --theme-radius-base: 0.5rem;
     --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);
 
-    --radius: var(--theme-radius-base);
+    --radius: var(--theme-radius-md);
+    --radius-xs: var(--theme-radius-xs);
     --radius-sm: var(--theme-radius-sm);
     --radius-md: var(--theme-radius-md);
     --radius-lg: var(--theme-radius-lg);
@@ -34,7 +36,7 @@
     --font-weight-bold: 600;
     --theme-text-scale: 1;
     --nav-font-family: var(--font-sans);
-    --nav-text-size: var(--text-base);
+    --nav-text-size: calc(var(--text-base) - 0.125rem);
     --nav-text-line-height: var(--text-base--line-height);
     --nav-heading-font-family: var(--font-sans);
     --nav-heading-size: var(--text-sm);

package/theme/styles/themes/library/style/sharp.css

@@ -1,11 +1,13 @@
 @layer tokens {
   [data-style='sharp'] {
+    --theme-radius-xs: 0;
     --theme-radius-base: 0;
     --theme-radius-sm: 0;
     --theme-radius-md: 0;
     --theme-radius-lg: 0;
 
-    --radius: 0;
+    --radius: var(--theme-radius-md);
+    --radius-xs: var(--theme-radius-xs);
     --radius-sm: 0;
     --radius-md: 0;
     --radius-lg: 0;
@@ -30,7 +32,7 @@
     --font-weight-bold: 600;
     --theme-text-scale: 0.98;
     --nav-font-family: var(--font-sans);
-    --nav-text-size: var(--text-base);
+    --nav-text-size: calc(var(--text-base) - 0.125rem);
     --nav-text-line-height: var(--text-base--line-height);
     --nav-heading-font-family: var(--font-sans);
     --nav-heading-size: calc(var(--text-sm) * 0.94);

package/theme/styles/themes/library/style/soft.css

@@ -1,11 +1,13 @@
 @layer tokens {
   [data-style='soft'] {
+    --theme-radius-xs: 0.25rem;
     --theme-radius-base: 1rem;
     --theme-radius-sm: calc(var(--theme-radius-base) - 4px);
     --theme-radius-md: var(--theme-radius-base);
     --theme-radius-lg: calc(var(--theme-radius-base) + 6px);
 
-    --radius: var(--theme-radius-base);
+    --radius: var(--theme-radius-md);
+    --radius-xs: var(--theme-radius-xs);
     --radius-sm: var(--theme-radius-sm);
     --radius-md: var(--theme-radius-md);
     --radius-lg: var(--theme-radius-lg);
@@ -30,7 +32,7 @@
     --font-weight-bold: 600;
     --theme-text-scale: 1.05;
     --nav-font-family: var(--font-sans);
-    --nav-text-size: var(--text-base);
+    --nav-text-size: calc(var(--text-base) - 0.125rem);
     --nav-text-line-height: var(--text-base--line-height);
     --nav-heading-font-family: var(--font-sans);
     --nav-heading-size: var(--text-sm);

package/theme/styles/themes/tailwind.css

@@ -69,6 +69,8 @@
   --color-sidebar-border: hsl(var(--sidebar-border));
   --color-sidebar-ring: hsl(var(--sidebar-ring));
 
+  --radius: var(--theme-radius-md);
+  --radius-xs: var(--theme-radius-xs);
   --radius-sm: var(--theme-radius-sm);
   --radius-md: var(--theme-radius-md);
   --radius-lg: var(--theme-radius-lg);
@@ -109,4 +111,4 @@
 
   --font-sans: var(--theme-font-sans);
   --font-mono: var(--theme-font-mono);
-}
+}

package/types/ojiepermana-angular-brand-etos.d.ts

@@ -63,7 +63,7 @@ declare class EtosThemeSwitcherComponent {
     readonly actionSelected: _angular_core.OutputEmitterRef<string>;
     protected readonly themeMode: _angular_core.Signal<"light" | "dark">;
     protected readonly themeScheme: _angular_core.Signal<"light" | "dark" | "system">;
-    protected readonly layoutMode: _angular_core.Signal<"vertical" | "horizontal" | "empty">;
+    protected readonly layoutMode: _angular_core.Signal<"empty" | "horizontal" | "vertical">;
     protected readonly layoutWidth: _angular_core.Signal<"full" | "container" | "wide">;
     protected readonly themeSchemeOptions: readonly [{
         readonly value: "light";
@@ -140,13 +140,13 @@ declare class EtosThemeSwitcherComponent {
 }
 
 declare class EtosLayoutComponent {
-    readonly mode: _angular_core.InputSignal<"vertical" | "horizontal" | "empty" | null>;
+    readonly mode: _angular_core.InputSignal<"empty" | "horizontal" | "vertical" | null>;
     readonly sidebarHeaderTemplate: _angular_core.InputSignal<TemplateRef<unknown> | null>;
     readonly sidebarFooterTemplate: _angular_core.InputSignal<TemplateRef<unknown> | null>;
     readonly layoutBrandTemplate: _angular_core.InputSignal<TemplateRef<unknown> | null>;
     readonly layoutProfileTemplate: _angular_core.InputSignal<TemplateRef<unknown> | null>;
     private readonly layout;
-    protected readonly resolvedMode: _angular_core.Signal<"vertical" | "horizontal" | "empty">;
+    protected readonly resolvedMode: _angular_core.Signal<"empty" | "horizontal" | "vertical">;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EtosLayoutComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<EtosLayoutComponent, "etos-layout", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "sidebarHeaderTemplate": { "alias": "sidebarHeaderTemplate"; "required": false; "isSignal": true; }; "sidebarFooterTemplate": { "alias": "sidebarFooterTemplate"; "required": false; "isSignal": true; }; "layoutBrandTemplate": { "alias": "layoutBrandTemplate"; "required": false; "isSignal": true; }; "layoutProfileTemplate": { "alias": "layoutProfileTemplate"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }