@resolve-components/theme 1.0.0

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@resolve-components/theme",
+  "version": "1.0.0",
+  "schematics": "./collection.json",
+  "description": "🔥 Fully customizable Angular UI components made with ❤️ using Angular CDK 🔥",
+  "peerDependencies": {
+    "@angular/common": "^21.1.0",
+    "@angular/core": "^21.1.0",
+    "@angular/forms": "~21.1.0",
+    "@angular/cdk": "^21.1.5",
+    "rxjs": "~7.8.0",
+    "@angular/platform-browser": "~21.1.0",
+    "eva-icons": "^1.1.3"
+  },
+  "keywords": [
+    "@resolve-components/theme",
+    "@resolve-components",
+    "resolve-components",
+    "r components",
+    "angular components",
+    "angular",
+    "components",
+    "theme",
+    "angular theme",
+    "ui",
+    "ui components",
+    "ui library",
+    "ui framework"
+  ],
+  "sideEffects": false,
+  "module": "fesm2022/resolve-components-theme.mjs",
+  "typings": "types/resolve-components-theme.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/resolve-components-theme.d.ts",
+      "default": "./fesm2022/resolve-components-theme.mjs"
+    }
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

package/schematics/ng-add/index.js

@@ -0,0 +1,147 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ngAdd = ngAdd;
+const schematics_1 = require("@angular-devkit/schematics");
+const tasks_1 = require("@angular-devkit/schematics/tasks");
+function getWorkspace(tree) {
+    const file = tree.exists('angular.json')
+        ? 'angular.json'
+        : tree.exists('workspace.json')
+            ? 'workspace.json'
+            : null;
+    if (!file)
+        return null;
+    try {
+        const content = JSON.parse(tree.read(file).toString('utf-8'));
+        return { file, content };
+    }
+    catch {
+        return null;
+    }
+}
+function resolveProjectName(ws, options) {
+    if (options.project)
+        return options.project;
+    const c = ws.content;
+    return c['defaultProject'] ?? Object.keys(c['projects'] ?? {})[0] ?? null;
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function getBuildOptions(project) {
+    return (project?.['architect']?.['build']?.['options'] ??
+        project?.['targets']?.['build']?.['options'] ??
+        null);
+}
+// ---------------------------------------------------------------------------
+// Rule: patch angular.json
+// ---------------------------------------------------------------------------
+function addAngularJsonConfig(options) {
+    return (tree) => {
+        const ws = getWorkspace(tree);
+        if (!ws)
+            return tree;
+        const projectName = resolveProjectName(ws, options);
+        if (!projectName)
+            return tree;
+        const project = ws.content['projects']?.[projectName];
+        if (!project)
+            return tree;
+        const buildOptions = getBuildOptions(project);
+        if (!buildOptions)
+            return tree;
+        // ── styles: prepend CDK overlay CSS ──
+        const cdkStyle = 'node_modules/@angular/cdk/overlay-prebuilt.css';
+        if (!Array.isArray(buildOptions['styles'])) {
+            buildOptions['styles'] = [];
+        }
+        if (!buildOptions['styles'].includes(cdkStyle)) {
+            buildOptions['styles'].unshift(cdkStyle);
+        }
+        // ── stylePreprocessorOptions: add includePath ──
+        const includePath = 'node_modules/@resolve-components/theme/styles';
+        buildOptions['stylePreprocessorOptions'] ??= {};
+        const paths = (buildOptions['stylePreprocessorOptions']['includePaths'] ??= []);
+        if (!paths.includes(includePath)) {
+            paths.unshift(includePath);
+        }
+        tree.overwrite(ws.file, JSON.stringify(ws.content, null, 2));
+        return tree;
+    };
+}
+// ---------------------------------------------------------------------------
+// Rule: add provideRcTheme() to app.config.ts
+// ---------------------------------------------------------------------------
+function addProviderToConfig() {
+    return (tree) => {
+        const configPath = 'src/app/app.config.ts';
+        if (!tree.exists(configPath))
+            return tree;
+        let content = tree.read(configPath).toString('utf-8');
+        if (content.includes('provideRcTheme'))
+            return tree;
+        // Insert import after the last existing @angular import
+        const importLine = `import { provideRcTheme } from '@resolve-components/theme';\n`;
+        const lastAngularImportMatch = [...content.matchAll(/^import .*;\n/gm)].pop();
+        if (lastAngularImportMatch) {
+            const insertAt = lastAngularImportMatch.index + lastAngularImportMatch[0].length;
+            content = content.slice(0, insertAt) + importLine + content.slice(insertAt);
+        }
+        else {
+            content = importLine + content;
+        }
+        // Insert provider at start of providers array
+        content = content.replace(/(providers:\s*\[)/, `$1\n    provideRcTheme({ name: 'default' }),`);
+        tree.overwrite(configPath, content);
+        return tree;
+    };
+}
+// ---------------------------------------------------------------------------
+// Rule: prepend @use / @include to styles.scss
+// ---------------------------------------------------------------------------
+function addGlobalStyles() {
+    return (tree) => {
+        const stylesPath = 'src/styles.scss';
+        if (!tree.exists(stylesPath))
+            return tree;
+        let content = tree.read(stylesPath).toString('utf-8');
+        if (content.includes('@resolve-components/theme') || content.includes(`@use 'all'`)) {
+            return tree;
+        }
+        const addition = [
+            `@use 'all';`,
+            `@use 'theming/install' as *;`,
+            ``,
+            `@include rc-install() {`,
+            `  *,`,
+            `  *::before,`,
+            `  *::after { box-sizing: border-box; }`,
+            ``,
+            `  body {`,
+            `    margin: 0;`,
+            `    font-family: rc-theme('font-family-primary');`,
+            `    font-size: rc-theme('text-body-font-size');`,
+            `    color: rc-theme('text-basic-color');`,
+            `    background-color: rc-theme('background-basic-color-1');`,
+            `  }`,
+            `}`,
+            ``,
+        ].join('\n');
+        tree.overwrite(stylesPath, addition + content);
+        return tree;
+    };
+}
+// ---------------------------------------------------------------------------
+// Exported schematic factory
+// ---------------------------------------------------------------------------
+function ngAdd(options) {
+    return (tree, context) => {
+        context.logger.info('Installing @resolve-components/theme…');
+        return (0, schematics_1.chain)([
+            addAngularJsonConfig(options),
+            addProviderToConfig(),
+            addGlobalStyles(),
+            (_tree, ctx) => {
+                ctx.addTask(new tasks_1.NodePackageInstallTask());
+            },
+        ])(tree, context);
+    };
+}

package/schematics/ng-add/schema.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "id": "SchematicsResolveComponentsNgAdd",
+  "title": "Add @resolve-components/theme to an Angular project",
+  "type": "object",
+  "properties": {
+    "project": {
+      "type": "string",
+      "description": "The name of the Angular project to configure. Defaults to the default project.",
+      "$default": {
+        "$source": "projectName"
+      }
+    }
+  }
+}

package/src/lib/styles/_all.scss

@@ -0,0 +1,52 @@
+// =============================================================================
+// Resolve Components — Styles Entry Point
+// =============================================================================
+// This is the main entry point for the entire SCSS theming system.
+//
+// Usage in consumer app's styles.scss:
+//
+//   @use '@resolve-components/styles' as *;
+//
+//   @include rc-install() {
+//     // optional global overrides
+//   }
+//
+// Or import individual parts:
+//
+//   @use '@resolve-components/styles/theming' as *;
+//   @use '@resolve-components/styles/themes';
+//
+// =============================================================================
+
+@forward 'theming';
+@forward 'themes';
+@forward 'globals';
+
+@use '../button/rc-button';
+@use '../icon/rc-icon';
+@use '../tabs/rc-tabs';
+@use '../alert/rc-alert';
+@use '../toast/rc-toast';
+@use '../dialog/rc-dialog';
+@use '../input/rc-input';
+@use '../table/rc-table';
+@use '../chip/rc-chip';
+@use '../radio/rc-radio';
+@use '../toggle/rc-toggle';
+@use '../checkbox/rc-checkbox';
+@use '../select/rc-select';
+@use '../accordion/rc-accordion';
+@use '../slider/rc-slider';
+@use '../autocomplete/rc-autocomplete';
+@use '../sidenav/rc-sidenav';
+@use '../navbar/rc-navbar';
+@use '../datepicker/rc-datepicker';
+@use '../tree/rc-tree';
+@use '../spinner/rc-spinner';
+@use '../progress-bar/rc-progress-bar';
+@use '../file-upload/rc-file-upload';
+@use '../virtual-scroll/rc-virtual-scroll';
+@use '../tooltip/rc-tooltip';
+@use '../menu/rc-menu';
+@use '../infinite-scroll/rc-infinite-scroll';
+@use '../paginator/rc-paginator';

package/src/lib/styles/_globals.scss

@@ -0,0 +1,66 @@
+// =============================================================================
+// Resolve Components — Global Reset & Base Styles
+// =============================================================================
+// Lightweight normalizations applied once per theme installation.
+// Components should NOT depend on these — they are quality-of-life defaults.
+// =============================================================================
+
+@use 'theming/get-value' as *;
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: rc-theme('font-family-primary');
+  font-size: rc-theme('text-body-font-size');
+  color: rc-theme('text-basic-color');
+  background-color: rc-theme('background-basic-color-1');
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  color: rc-theme('color-primary-default');
+  text-decoration: none;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-top: 0;
+  font-family: rc-theme('font-family-primary');
+  color: rc-theme('text-basic-color');
+}
+
+h1 {
+  font-size: rc-theme('text-heading-1-font-size');
+  font-weight: rc-theme('text-heading-1-font-weight');
+}
+
+h2 {
+  font-size: rc-theme('text-heading-2-font-size');
+  font-weight: rc-theme('text-heading-2-font-weight');
+}
+
+h3 {
+  font-size: rc-theme('text-heading-3-font-size');
+  font-weight: rc-theme('text-heading-3-font-weight');
+}
+
+h4 {
+  font-size: rc-theme('text-heading-4-font-size');
+  font-weight: rc-theme('text-heading-4-font-weight');
+}
+
+code,
+pre {
+  font-family: rc-theme('font-family-mono');
+}

package/src/lib/styles/_themes.scss

@@ -0,0 +1,9 @@
+// =============================================================================
+// Resolve Components — Themes Entry Point
+// =============================================================================
+// Import this file to register all built-in themes.
+// Order matters: default must be registered before any child themes.
+// =============================================================================
+
+@use 'themes/default';
+@use 'themes/dark';

package/src/lib/styles/_theming.scss

@@ -0,0 +1,20 @@
+// =============================================================================
+// Resolve Components — Theming (Public Entry Point)
+// =============================================================================
+// This file forwards the entire theming API for consumers.
+//
+// Usage:
+//   @use '@resolve-components/styles/theming' as *;
+//
+//   .my-component {
+//     color: rc-theme('text-basic-color');
+//   }
+// =============================================================================
+
+@forward 'theming/theming-variables';
+@forward 'theming/functions';
+@forward 'theming/mapping';
+@forward 'theming/register';
+@forward 'theming/get-value';
+@forward 'theming/install';
+@forward 'theming/animation';

package/src/lib/styles/themes/_dark.scss

@@ -0,0 +1,107 @@
+// =============================================================================
+// Resolve Components — Dark Theme
+// =============================================================================
+// Inherits from default. Only overrides what changes for dark mode.
+// Follows Microsoft Fluent dark surface / text conventions.
+// =============================================================================
+
+@use 'sass:string';
+@use 'default'; // Ensure default is registered first
+@use '../theming/theming-variables' as vars;
+@use '../theming/register' as reg;
+
+$theme: (
+  // Direct CSS properties (emitted without -- prefix)
+  _color-scheme: dark,
+
+  // ── Adjusted Primary for dark backgrounds ─────────────────────────────
+  color-primary-default: color-primary-400,
+  color-primary-hover: color-primary-300,
+  color-primary-active: color-primary-200,
+  color-primary-focus: color-primary-400,
+  color-primary-transparent-default: rgba(91, 163, 230, 0.1),
+  color-primary-transparent-hover: rgba(91, 163, 230, 0.16),
+  color-primary-transparent-active: rgba(91, 163, 230, 0.22),
+  // ── Adjusted Success ──────────────────────────────────────────────────
+  color-success-default: color-success-400,
+  color-success-hover: color-success-300,
+  color-success-active: color-success-200,
+
+  // ── Adjusted Warning ──────────────────────────────────────────────────
+  color-warning-default: color-warning-400,
+  color-warning-hover: color-warning-300,
+  color-warning-active: color-warning-200,
+
+  // ── Adjusted Danger ───────────────────────────────────────────────────
+  color-danger-default: color-danger-400,
+  color-danger-hover: color-danger-300,
+  color-danger-active: color-danger-200,
+
+  // ── Adjusted Info ─────────────────────────────────────────────────────
+  color-info-default: color-info-400,
+  color-info-hover: color-info-300,
+  color-info-active: color-info-200,
+
+  // ── Dark Backgrounds ──────────────────────────────────────────────────
+  background-basic-color-1: color-basic-1000,
+  background-basic-color-2: color-basic-900,
+  background-basic-color-3: color-basic-800,
+  background-basic-color-4: color-basic-700,
+  background-alternative-color-1: color-basic-100,
+  background-alternative-color-2: color-basic-200,
+
+  // ── Text on dark ──────────────────────────────────────────────────────
+  text-basic-color: color-basic-200,
+  text-alternate-color: color-basic-1000,
+  text-hint-color: color-basic-500,
+  text-disabled-color: color-basic-700,
+
+  // ── Borders on dark ───────────────────────────────────────────────────
+  border-basic-color: color-basic-800,
+  border-basic-color-2: color-basic-700,
+  border-basic-color-3: color-basic-900,
+
+  // ── Shadows on dark ───────────────────────────────────────────────────
+  shadow: string.unquote(
+      '0 1.6px 3.6px 0 rgba(0, 0, 0, 0.38), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.30)'
+    ),
+  shadow-sm: string.unquote(
+      '0 0.8px 1.8px 0 rgba(0, 0, 0, 0.30), 0 0.15px 0.45px 0 rgba(0, 0, 0, 0.24)'
+    ),
+  shadow-md: string.unquote(
+      '0 3.2px 7.2px 0 rgba(0, 0, 0, 0.38), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.30)'
+    ),
+  shadow-lg: string.unquote(
+      '0 6.4px 14.4px 0 rgba(0, 0, 0, 0.38), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.30)'
+    ),
+  // ── Outline / Focus ───────────────────────────────────────────────────
+  outline-color: color-basic-100,
+
+  // ── Divider ───────────────────────────────────────────────────────────
+  divider-color: border-basic-color,
+
+  // ── Alert (dark overrides) ────────────────────────────────────────────
+  alert-info-subtle-background: rgba(0, 183, 195, 0.12),
+  alert-info-subtle-color: color-info-300,
+  alert-info-subtle-border: rgba(0, 183, 195, 0.3),
+  alert-info-outline-color: color-info-300,
+  alert-success-subtle-background: rgba(16, 124, 16, 0.14),
+  alert-success-subtle-color: color-success-300,
+  alert-success-subtle-border: rgba(84, 176, 84, 0.35),
+  alert-success-outline-color: color-success-300,
+  alert-warning-subtle-background: rgba(255, 185, 0, 0.12),
+  alert-warning-subtle-color: color-warning-300,
+  alert-warning-subtle-border: rgba(255, 185, 0, 0.3),
+  alert-warning-outline-color: color-warning-300,
+  alert-danger-subtle-background: rgba(209, 52, 56, 0.14),
+  alert-danger-subtle-color: color-danger-300,
+  alert-danger-subtle-border: rgba(231, 72, 86, 0.35),
+  alert-danger-outline-color: color-danger-300,
+
+  // ── Toast (dark overrides) ────────────────────────────────────────────
+  toast-background: background-basic-color-2,
+  toast-border-color: border-basic-color-2
+);
+
+// Register dark theme with 'default' as parent
+vars.$rc-themes: reg.rc-register-theme($theme, dark, default);