@ojiepermana/angular 22.0.1 → 22.0.29

package/theme/styles/foundation/layers.css

@@ -1,15 +0,0 @@
-/**
- * @ojiepermana/angular cascade layers.
- *
- * Order (low → high precedence):
- *   reset      – normalize defaults
- *   base       – foundational library styles
- *   mat-mdc    – Angular Material auto-injects here
- *   tokens     – shadcn CSS variables (must override mat-mdc)
- *   components – component-specific overrides (overlay panelClass, etc.)
- *   utilities  – Tailwind utility classes (always wins)
- *
- * Consumers MUST import this file at the very top of their global stylesheet
- * so every rule authored later inherits the correct order.
- */
-@layer reset, base, mat-mdc, tokens, components, utilities;

package/theme/styles/foundation/tokens.css

@@ -1,55 +0,0 @@
-/**
- * Semantic and shared tokens.
- * Feedback colors stay independent from the color layer.
- */
-@layer tokens {
-  :root {
-    --destructive: 0 72% 51%;
-    --destructive-foreground: 0 0% 100%;
-
-    --success: 142 71% 45%;
-    --success-foreground: 0 0% 100%;
-
-    --warning: 38 92% 50%;
-    --warning-foreground: 0 0% 10%;
-
-    --info: 217 91% 60%;
-    --info-foreground: 0 0% 100%;
-
-    /* Chart slots resolve from the active color theme first, with shared fallbacks. */
-    --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%);
-
-    --sidebar-background: var(--card);
-    --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%;
-
-    --success: 142 60% 40%;
-    --success-foreground: 0 0% 95%;
-
-    --warning: 38 80% 45%;
-    --warning-foreground: 0 0% 10%;
-
-    --info: 217 80% 55%;
-    --info-foreground: 0 0% 95%;
-
-    --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%);
-  }
-}

package/theme/styles/index.css

@@ -1,37 +0,0 @@
-/**
- * @ojiepermana/angular/theme — root stylesheet.
- *
- * Usage — import once in the consumer app, **before** Tailwind:
- *
- *   @import '@ojiepermana/angular/theme/styles';
- *   @import 'tailwindcss';
- *   @import '@ojiepermana/angular/theme/tailwind/theme.css';
- *
- * Includes cascade layers, independent mode/color/style tokens, shared
- * semantic tokens, and an Angular Material bridge so `mat-*` components
- * inherit the active theme automatically.
- *
- * Source layout:
- *   foundation   – shared layers, semantic tokens, and component helpers
- *   variants     – mode, color, and style theme axes
- *   integrations – Angular Material and Tailwind bridges
- */
-@import './foundation/layers.css';
-
-/* Layer 1: mode variants. */
-@import './variants/mode/index.css';
-
-/* Layer 2: color variants. */
-@import './variants/color/index.css';
-
-/* Layer 3: style variants. */
-@import './variants/style/index.css';
-
-/* Shared semantic and library tokens. */
-@import './foundation/tokens.css';
-
-/* Angular Material M3 bridge. */
-@import './integrations/material.css';
-
-/* Global component-facing styles. */
-@import './foundation/components.css';

package/theme/styles/integrations/material/autocomplete.css

@@ -1,178 +0,0 @@
-/**
- * Angular Material autocomplete overrides.
- *
- * The public API remains CSS-only: Material tokens do the broad work, while
- * the component selectors below tighten the overlay into a shadcn-like popover.
- */
-@layer tokens {
-  :root,
-  [data-style='default'] {
-    --mat-autocomplete-background-color: hsl(var(--popover));
-    --mat-autocomplete-container-shape: var(--radius-md);
-    --mat-autocomplete-container-elevation-shadow: var(--shadow-md);
-
-    --ui-mat-autocomplete-border-color: hsl(var(--border));
-    --ui-mat-autocomplete-border-width: var(--border-width);
-    --ui-mat-autocomplete-active-border-color: hsl(var(--ring));
-    --ui-mat-autocomplete-option-radius: 0;
-    --ui-mat-autocomplete-option-min-height: 2.25rem;
-    --ui-mat-autocomplete-option-padding-x: 0.5rem;
-    --ui-mat-autocomplete-option-gap: 0.5rem;
-    --ui-mat-autocomplete-hover-background: hsl(var(--accent) / 0.72);
-    --ui-mat-autocomplete-active-background: hsl(var(--accent));
-    --ui-mat-autocomplete-active-foreground: hsl(var(--accent-foreground));
-    --ui-mat-autocomplete-selected-background: hsl(var(--accent));
-    --ui-mat-autocomplete-selected-foreground: hsl(var(--accent-foreground));
-  }
-
-  [data-style='sharp'] {
-    --mat-autocomplete-container-shape: 0;
-    --mat-autocomplete-container-elevation-shadow: none;
-    --ui-mat-autocomplete-option-radius: 0;
-    --ui-mat-autocomplete-hover-background: hsl(var(--muted));
-    --ui-mat-autocomplete-active-background: hsl(var(--muted));
-    --ui-mat-autocomplete-selected-background: hsl(var(--muted));
-  }
-
-  [data-style='brutal'] {
-    --mat-autocomplete-container-shape: 0;
-    --mat-autocomplete-container-elevation-shadow: var(--shadow-lg);
-    --ui-mat-autocomplete-border-color: hsl(var(--foreground));
-    --ui-mat-autocomplete-border-width: var(--border-width);
-    --ui-mat-autocomplete-active-border-color: hsl(var(--foreground));
-    --ui-mat-autocomplete-option-radius: 0;
-    --ui-mat-autocomplete-hover-background: hsl(var(--primary) / 0.14);
-    --ui-mat-autocomplete-active-background: hsl(var(--primary));
-    --ui-mat-autocomplete-active-foreground: hsl(var(--primary-foreground));
-    --ui-mat-autocomplete-selected-background: hsl(var(--primary));
-    --ui-mat-autocomplete-selected-foreground: hsl(var(--primary-foreground));
-  }
-
-  [data-style='soft'] {
-    --mat-autocomplete-container-shape: var(--radius-lg);
-    --mat-autocomplete-container-elevation-shadow: var(--shadow-lg);
-    --ui-mat-autocomplete-border-color: hsl(var(--border) / 0.72);
-    --ui-mat-autocomplete-active-border-color: hsl(var(--ring) / 0.8);
-    --ui-mat-autocomplete-option-radius: 0;
-    --ui-mat-autocomplete-hover-background: hsl(var(--accent) / 0.6);
-    --ui-mat-autocomplete-active-background: hsl(var(--accent) / 0.82);
-    --ui-mat-autocomplete-selected-background: hsl(var(--accent) / 0.82);
-  }
-}
-
-@layer components {
-  .mat-mdc-form-field:has(.mat-mdc-autocomplete-trigger[aria-expanded='true']) .mat-mdc-text-field-wrapper {
-    @apply relative z-10;
-  }
-
-  .mat-mdc-form-field:has(.mat-mdc-autocomplete-trigger[aria-expanded='true']) .mdc-notched-outline__leading,
-  .mat-mdc-form-field:has(.mat-mdc-autocomplete-trigger[aria-expanded='true']) .mdc-notched-outline__notch,
-  .mat-mdc-form-field:has(.mat-mdc-autocomplete-trigger[aria-expanded='true']) .mdc-notched-outline__trailing {
-    @apply border-ring;
-
-    border-color: var(--ui-mat-autocomplete-active-border-color) !important;
-    border-width: var(--ui-mat-autocomplete-border-width) !important;
-  }
-
-  .mat-mdc-form-field:has(.mat-mdc-autocomplete-trigger[aria-expanded='true']) .mdc-notched-outline__leading {
-    @apply rounded-bl-none;
-
-    border-bottom-color: var(--ui-mat-autocomplete-border-color) !important;
-    border-bottom-left-radius: 0 !important;
-  }
-
-  .mat-mdc-form-field:has(.mat-mdc-autocomplete-trigger[aria-expanded='true']) .mdc-notched-outline__trailing {
-    @apply rounded-br-none;
-
-    border-bottom-color: var(--ui-mat-autocomplete-border-color) !important;
-    border-bottom-right-radius: 0 !important;
-  }
-
-  .ui-mat-autocomplete-trigger[aria-expanded='true'] {
-    @apply rounded-b-none border-ring;
-
-    border-color: var(--ui-mat-autocomplete-active-border-color) !important;
-    border-bottom-color: var(--ui-mat-autocomplete-border-color) !important;
-    border-width: var(--ui-mat-autocomplete-border-width) !important;
-    border-bottom-left-radius: 0 !important;
-    border-bottom-right-radius: 0 !important;
-    box-shadow: none !important;
-  }
-
-  .cdk-overlay-pane div.mat-mdc-autocomplete-panel {
-    --mat-option-label-text-color: hsl(var(--popover-foreground));
-    --mat-option-hover-state-layer-color: var(--ui-mat-autocomplete-hover-background);
-    --mat-option-focus-state-layer-color: var(--ui-mat-autocomplete-active-background);
-    --mat-option-selected-state-layer-color: var(--ui-mat-autocomplete-selected-background);
-    --mat-option-selected-state-label-text-color: var(--ui-mat-autocomplete-selected-foreground);
-
-    @apply border p-1 text-foreground;
-
-    border-color: var(--ui-mat-autocomplete-border-color) !important;
-    border-width: var(--ui-mat-autocomplete-border-width) !important;
-    border-radius: var(--mat-autocomplete-container-shape) !important;
-    background-color: var(--mat-autocomplete-background-color) !important;
-    box-shadow: var(--mat-autocomplete-container-elevation-shadow) !important;
-  }
-
-  .cdk-overlay-pane:not(.mat-mdc-autocomplete-panel-above) div.mat-mdc-autocomplete-panel,
-  .mat-mdc-autocomplete-panel-above div.mat-mdc-autocomplete-panel {
-    border-radius: var(--mat-autocomplete-container-shape) !important;
-  }
-
-  .cdk-overlay-pane:not(.mat-mdc-autocomplete-panel-above) div.mat-mdc-autocomplete-panel.mat-mdc-autocomplete-visible {
-    @apply rounded-t-none border-ring;
-
-    margin-top: calc(var(--ui-mat-autocomplete-border-width) * -1);
-    border-color: var(--ui-mat-autocomplete-active-border-color) !important;
-    border-top-left-radius: 0 !important;
-    border-top-right-radius: 0 !important;
-  }
-
-  .mat-mdc-autocomplete-panel-above div.mat-mdc-autocomplete-panel.mat-mdc-autocomplete-visible {
-    @apply rounded-b-none border-ring;
-
-    margin-bottom: calc(var(--ui-mat-autocomplete-border-width) * -1);
-    border-color: var(--ui-mat-autocomplete-active-border-color) !important;
-    border-bottom-left-radius: 0 !important;
-    border-bottom-right-radius: 0 !important;
-  }
-
-  .cdk-overlay-pane div.mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item {
-    @apply min-h-9 px-2 text-sm transition-colors;
-
-    min-height: var(--ui-mat-autocomplete-option-min-height);
-    border-radius: var(--ui-mat-autocomplete-option-radius);
-    gap: var(--ui-mat-autocomplete-option-gap);
-    padding-inline: var(--ui-mat-autocomplete-option-padding-x);
-  }
-
-  .cdk-overlay-pane div.mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item__primary-text {
-    @apply flex min-w-0 items-center gap-2 truncate;
-  }
-
-  .cdk-overlay-pane div.mat-mdc-autocomplete-panel .mat-mdc-option:hover:not(.mdc-list-item--disabled),
-  .cdk-overlay-pane div.mat-mdc-autocomplete-panel .mat-mdc-option.mat-mdc-option-active.mdc-list-item {
-    color: var(--ui-mat-autocomplete-active-foreground);
-  }
-
-  .cdk-overlay-pane
-    div.mat-mdc-autocomplete-panel
-    .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) {
-    color: var(--ui-mat-autocomplete-selected-foreground);
-  }
-
-  .cdk-overlay-pane div.mat-mdc-autocomplete-panel .mat-mdc-optgroup-label {
-    @apply min-h-8 px-2 text-xs font-semibold uppercase text-muted-foreground;
-
-    letter-spacing: 0.08em;
-  }
-
-  [data-style='brutal'] .cdk-overlay-pane div.mat-mdc-autocomplete-panel {
-    @apply border-2;
-  }
-
-  [data-style='sharp'] .cdk-overlay-pane div.mat-mdc-autocomplete-panel {
-    @apply shadow-none;
-  }
-}