@idealyst/theme 1.0.94 → 1.0.96

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/theme",
-  "version": "1.0.94",
+  "version": "1.0.96",
   "description": "Theming system for Idealyst Framework",
   "readme": "README.md",
   "main": "src/index.ts",

package/src/darkTheme.ts

@@ -2,6 +2,15 @@ import { ButtonSizeValue, ColorValue, Pallet, Shade, Size } from "./theme";
 import { Theme } from "./theme/index";
 
 export const darkTheme: Theme = {
+  interaction: {
+    focusedBackground: 'rgba(96, 165, 250, 0.15)',
+    focusBorder: 'rgba(96, 165, 250, 0.4)',
+    opacity: {
+      hover: 0.85,
+      active: 0.7,
+      disabled: 0.4,
+    },
+  },
   shadows: {
     none: {},
     sm: {

package/src/lightTheme.ts

@@ -2,7 +2,16 @@ import { ButtonSizeValue, ColorValue, Pallet, Shade, Size } from "./theme";
 import { Theme } from "./theme/index";
 
 export const lightTheme: Theme = {
-       shadows: {
+      interaction: {
+        focusedBackground: 'rgba(59, 130, 246, 0.08)',
+        focusBorder: 'rgba(59, 130, 246, 0.3)',
+        opacity: {
+          hover: 0.9,
+          active: 0.75,
+          disabled: 0.5,
+        },
+      },
+      shadows: {
         none: {},
         sm: {
           elevation: 1,

package/src/theme/index.ts

@@ -3,11 +3,31 @@ import { Intent, IntentValue } from "./intent";
 import { AllComponentSizes, SizeValue } from "./size";
 import { AllShadowTypes } from "./shadow";
 
+/**
+ * Interaction state configuration for hover, focus, active states
+ */
+export type InteractionConfig = {
+    /** Background color for focused/highlighted items (e.g., list items, select options) */
+    focusedBackground: string;
+    /** Border/outline color for focused elements */
+    focusBorder: string;
+    /** Opacity values for various interaction states */
+    opacity: {
+        /** Opacity for hovered elements */
+        hover: number;
+        /** Opacity for active/pressed elements */
+        active: number;
+        /** Opacity for disabled elements */
+        disabled: number;
+    };
+};
+
 export type Theme = {
     intents: Record<Intent, IntentValue>;
     colors: AllColorTypes;
     sizes: AllComponentSizes;
     shadows: AllShadowTypes;
+    interaction: InteractionConfig;
 };
 
 export * from "./intent";