@ojiepermana/angular 0.1.1 → 21.0.0

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

@@ -0,0 +1,51 @@
+/**
+ * Default is the baseline style layer.
+ */
+@layer tokens {
+  :root,
+  [data-style='default'] {
+    --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-sm: var(--theme-radius-sm);
+    --radius-md: var(--theme-radius-md);
+    --radius-lg: var(--theme-radius-lg);
+
+    --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);
+
+    --shadow-sm: var(--theme-shadow-sm);
+    --shadow: var(--theme-shadow);
+    --shadow-md: var(--theme-shadow-md);
+    --shadow-lg: var(--theme-shadow-lg);
+
+    --theme-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    --theme-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+
+    --font-sans: var(--theme-font-sans);
+    --font-mono: var(--theme-font-mono);
+    --font-weight-bold: 600;
+    --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-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-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;
+    --letter-spacing: 0;
+    --space-unit: 0.25rem;
+  }
+}

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

@@ -0,0 +1,8 @@
+/**
+ * Layer 3: style.
+ * Imports every style variant in a stable order.
+ */
+@import './default.css';
+@import './sharp.css';
+@import './brutal.css';
+@import './soft.css';

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

@@ -0,0 +1,47 @@
+@layer tokens {
+  [data-style='sharp'] {
+    --theme-radius-base: 0;
+    --theme-radius-sm: 0;
+    --theme-radius-md: 0;
+    --theme-radius-lg: 0;
+
+    --radius: 0;
+    --radius-sm: 0;
+    --radius-md: 0;
+    --radius-lg: 0;
+
+    --border-width: 1px;
+
+    --theme-shadow-sm: none;
+    --theme-shadow: none;
+    --theme-shadow-md: none;
+    --theme-shadow-lg: none;
+
+    --shadow-sm: none;
+    --shadow: none;
+    --shadow-md: none;
+    --shadow-lg: none;
+
+    --theme-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    --theme-font-mono: 'JetBrains Mono', monospace;
+
+    --font-sans: var(--theme-font-sans);
+    --font-mono: var(--theme-font-mono);
+    --font-weight-bold: 600;
+    --theme-text-scale: 0.98;
+    --nav-font-family: var(--font-sans);
+    --nav-text-size: var(--text-base);
+    --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);
+    --nav-heading-line-height: 1.35;
+    --nav-heading-weight: 600;
+    --nav-heading-letter-spacing: 0.16em;
+    --nav-badge-font-family: var(--font-sans);
+    --nav-badge-size: calc(var(--text-sm) * 0.94);
+    --nav-badge-line-height: 1.35;
+    --nav-badge-weight: 500;
+    --letter-spacing: 0;
+    --space-unit: 0.25rem;
+  }
+}

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

@@ -0,0 +1,47 @@
+@layer tokens {
+  [data-style='soft'] {
+    --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-sm: var(--theme-radius-sm);
+    --radius-md: var(--theme-radius-md);
+    --radius-lg: var(--theme-radius-lg);
+
+    --border-width: 1px;
+
+    --theme-shadow-sm: 0 2px 8px hsl(0 0% 0% / 0.04);
+    --theme-shadow: 0 4px 14px hsl(0 0% 0% / 0.08);
+    --theme-shadow-md: 0 8px 24px hsl(0 0% 0% / 0.1);
+    --theme-shadow-lg: 0 16px 40px hsl(0 0% 0% / 0.12);
+
+    --shadow-sm: var(--theme-shadow-sm);
+    --shadow: var(--theme-shadow);
+    --shadow-md: var(--theme-shadow-md);
+    --shadow-lg: var(--theme-shadow-lg);
+
+    --theme-font-sans: 'Quicksand', 'Nunito', system-ui, sans-serif;
+    --theme-font-mono: 'Fira Code', monospace;
+
+    --font-sans: var(--theme-font-sans);
+    --font-mono: var(--theme-font-mono);
+    --font-weight-bold: 600;
+    --theme-text-scale: 1.05;
+    --nav-font-family: var(--font-sans);
+    --nav-text-size: var(--text-base);
+    --nav-text-line-height: var(--text-base--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: 700;
+    --nav-heading-letter-spacing: 0.08em;
+    --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: 600;
+    --letter-spacing: 0;
+    --space-unit: 0.25rem;
+  }
+}

package/theme/styles/themes/mode/dark.css

@@ -0,0 +1,20 @@
+@layer tokens {
+  [data-mode='dark'] {
+    color-scheme: dark;
+
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+  }
+}

package/theme/styles/themes/mode/index.css

@@ -0,0 +1,6 @@
+/**
+ * Layer 1: mode.
+ * Imports every mode variant in a stable order.
+ */
+@import './light.css';
+@import './dark.css';

package/theme/styles/themes/mode/light.css

@@ -0,0 +1,24 @@
+/**
+ * Light is the default mode layer.
+ */
+@layer tokens {
+  :root,
+  [data-mode='light'] {
+    color-scheme: light;
+
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+  }
+}

package/theme/styles/themes/taildwind.css

@@ -0,0 +1,109 @@
+/**
+ * Tailwind v4 theme mapping for @ojiepermana/angular/theme.
+ *
+ * Requires Tailwind CSS ^4.2.0.
+ *
+ * Usage (styles.css):
+ *   @import '@ojiepermana/angular/theme/styles';
+ *   @import 'tailwindcss';
+ *   @import '@ojiepermana/angular/theme/tailwind/theme.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-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-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-background));
+  --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-sm: var(--theme-radius-sm);
+  --radius-md: var(--theme-radius-md);
+  --radius-lg: var(--theme-radius-lg);
+  --radius-xl: calc(var(--theme-radius-lg) + 0.375rem);
+
+  --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-lg);
+
+  --text-xs: calc(0.75rem * var(--theme-text-scale));
+  --text-xs--line-height: calc(1 / 0.75);
+  --text-sm: calc(0.875rem * var(--theme-text-scale));
+  --text-sm--line-height: calc(1.25 / 0.875);
+  --text-base: calc(1rem * var(--theme-text-scale));
+  --text-base--line-height: calc(1.5 / 1);
+  --text-lg: calc(1.125rem * var(--theme-text-scale));
+  --text-lg--line-height: calc(1.75 / 1.125);
+  --text-xl: calc(1.25rem * var(--theme-text-scale));
+  --text-xl--line-height: calc(1.75 / 1.25);
+  --text-2xl: calc(1.5rem * var(--theme-text-scale));
+  --text-2xl--line-height: calc(2 / 1.5);
+  --text-3xl: calc(1.875rem * var(--theme-text-scale));
+  --text-3xl--line-height: calc(2.25 / 1.875);
+  --text-4xl: calc(2.25rem * var(--theme-text-scale));
+  --text-4xl--line-height: calc(2.5 / 2.25);
+  --text-5xl: calc(3rem * var(--theme-text-scale));
+  --text-5xl--line-height: 1;
+  --text-6xl: calc(3.75rem * var(--theme-text-scale));
+  --text-6xl--line-height: 1;
+  --text-7xl: calc(4.5rem * var(--theme-text-scale));
+  --text-7xl--line-height: 1;
+  --text-8xl: calc(6rem * var(--theme-text-scale));
+  --text-8xl--line-height: 1;
+  --text-9xl: calc(8rem * var(--theme-text-scale));
+  --text-9xl--line-height: 1;
+
+  --font-sans: var(--theme-font-sans);
+  --font-mono: var(--theme-font-mono);
+}