@cuby-ui/core 0.0.16 → 0.0.17

package/index.d.ts

@@ -1,5 +1,6 @@
 export * from './components';
 export * from './directives';
 export * from './interfaces';
+export * from './services';
 export * from './types';
 export * from './utils';

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@cuby-ui/core",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "peerDependencies": {
     "@angular/common": ">=15.0.0",
     "@angular/core": ">=15.0.0",
     "@angular/forms": ">=15.0.0",
-    "@cuby-ui/icons": "^0.0.16",
-    "@cuby-ui/cdk": "^0.0.16"
+    "@cuby-ui/icons": "^0.0.17",
+    "@cuby-ui/cdk": "^0.0.17"
   },
   "dependencies": {
     "tslib": "^2.3.0"

package/services/index.d.ts

@@ -0,0 +1 @@
+export * from './theme.service';

package/services/theme.options.d.ts

@@ -0,0 +1,5 @@
+export type CuiTheme = 'light' | 'dark';
+export declare const CUI_THEME_STORAGE_DEFAULT_KEY = "cuiTheme";
+export declare const CUI_DEFAULT_THEME: CuiTheme;
+export declare const CUI_THEME_STORAGE_KEY: import("@angular/core").InjectionToken<string>;
+export declare const CUI_THEME: import("@angular/core").InjectionToken<CuiTheme>;

package/services/theme.service.d.ts

@@ -0,0 +1,12 @@
+import { BehaviorSubject } from 'rxjs';
+import { CuiTheme } from './theme.options';
+import * as i0 from "@angular/core";
+export declare class CuiThemeService extends BehaviorSubject<CuiTheme> {
+    private readonly localStorage;
+    private readonly key;
+    constructor();
+    next(theme: CuiTheme): void;
+    switch(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CuiThemeService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<CuiThemeService>;
+}

package/styles/theme.scss

@@ -14,18 +14,26 @@
   --cui-gray-600: #4B5563;
   --cui-gray-900: #111827;
 
-  --dark-gray-30: #2B2D31;
+  --cui-dark-gray-10: #26262B;
+  --cui-dark-gray-30: #2B2D31;
+  --cui-dark-gray-400: #565962;
 
   --cui-cyan-800: #297F7E;
   --cui-cyan-900: #1A6B6A;
 
+  --cui-green-50: #ECFFF3;
+  --cui-green-500: #29CC6A;
   --cui-green-600: #17C174;
   --cui-green-700: #039855;
   --cui-green-900: #004627;
 
+  --cui-yellow-100: #FFE6B7;
   --cui-yellow-400: #FDB022;
   --cui-yellow-900: #533600;
 
+  --cui-orange-800: #8E3605;
+
+  --cui-red-50: #FFEEEE;
   --cui-red-500: #D92D20;
   --cui-red-600: #B82E2E;
   --cui-red-900: #520909;
@@ -67,3 +75,6 @@
   --cui-info-800: var(--cui-blue-800);
   --cui-info-900: var(--cui-blue-900);
 }
+
+[cuiTheme='dark'] {
+}

package/styles/variables/colors.scss

@@ -9,18 +9,26 @@ $cui-gray-500: var(--cui-gray-500);
 $cui-gray-600: var(--cui-gray-600);
 $cui-gray-900: var(--cui-gray-900);
 
-$cui-dark-gray-30: var(--dark-gray-30);
+$cui-dark-gray-10: var(--cui-dark-gray-10);
+$cui-dark-gray-30: var(--cui-dark-gray-30);
+$cui-dark-gray-400: var(--cui-dark-gray-400);
 
 $cui-cyan-800: var(--cui-cyan-800);
 $cui-cyan-900: var(--cui-cyan-900);
 
+$cui-green-50: var(--cui-green-50);
+$cui-green-500: var(--cui-green-500);
 $cui-green-600: var(--cui-green-600);
 $cui-green-700: var(--cui-green-700);
 $cui-green-900: var(--cui-green-900);
 
+$cui-yellow-100: var(--cui-yellow-100);
 $cui-yellow-400: var(--cui-yellow-400);
 $cui-yellow-900: var(--cui-yellow-900);
 
+$cui-orange-800: var(--cui-orange-800);
+
+$cui-red-50: var(--cui-red-50);
 $cui-red-500: var(--cui-red-500);
 $cui-red-600: var(--cui-red-600);
 $cui-red-900: var(--cui-red-900);