kimu-core 0.4.1 → 0.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (67) hide show
  1. package/.editorconfig +116 -30
  2. package/.gitattributes +81 -11
  3. package/.github/FUNDING.yml +8 -8
  4. package/.github/kimu-copilot-instructions.md +3779 -3779
  5. package/.github/workflows/deploy-demo.yml +39 -39
  6. package/.nvmrc +1 -0
  7. package/.prettierignore +44 -0
  8. package/.prettierrc +16 -0
  9. package/FUNDING.md +31 -31
  10. package/icon.svg +10 -10
  11. package/package.json +9 -2
  12. package/scripts/minify-css-assets.js +82 -82
  13. package/src/core/index.ts +47 -47
  14. package/src/core/kimu-global-styles.ts +136 -136
  15. package/src/core/kimu-reactive.ts +196 -196
  16. package/src/modules-repository/api-axios/CHANGELOG.md +48 -48
  17. package/src/modules-repository/api-axios/QUICK-REFERENCE.md +178 -178
  18. package/src/modules-repository/api-axios/README.md +304 -304
  19. package/src/modules-repository/api-axios/api-axios-service.ts +355 -355
  20. package/src/modules-repository/api-axios/examples.ts +293 -293
  21. package/src/modules-repository/api-axios/index.ts +19 -19
  22. package/src/modules-repository/api-axios/interfaces.ts +71 -71
  23. package/src/modules-repository/api-axios/module.ts +41 -41
  24. package/src/modules-repository/api-core/CHANGELOG.md +42 -42
  25. package/src/modules-repository/api-core/QUICK-REFERENCE.md +192 -192
  26. package/src/modules-repository/api-core/README.md +435 -435
  27. package/src/modules-repository/api-core/api-core-service.ts +289 -289
  28. package/src/modules-repository/api-core/examples.ts +432 -432
  29. package/src/modules-repository/api-core/index.ts +8 -8
  30. package/src/modules-repository/api-core/interfaces.ts +83 -83
  31. package/src/modules-repository/api-core/module.ts +30 -30
  32. package/src/modules-repository/event-bus/README.md +273 -273
  33. package/src/modules-repository/event-bus/event-bus-service.ts +176 -176
  34. package/src/modules-repository/event-bus/module.ts +30 -30
  35. package/src/modules-repository/notification/README.md +423 -423
  36. package/src/modules-repository/notification/module.ts +30 -30
  37. package/src/modules-repository/notification/notification-service.ts +436 -436
  38. package/src/modules-repository/router/README.it.md +61 -10
  39. package/src/modules-repository/router/README.md +61 -10
  40. package/src/modules-repository/router/router-config.ts.example +61 -0
  41. package/src/modules-repository/router/router.ts +18 -0
  42. package/src/modules-repository/state/README.md +409 -409
  43. package/src/modules-repository/state/module.ts +30 -30
  44. package/src/modules-repository/state/state-service.ts +296 -296
  45. package/src/modules-repository/theme/README.md +311 -267
  46. package/src/modules-repository/theme/module.ts +30 -30
  47. package/src/modules-repository/theme/pre-build.js +40 -40
  48. package/src/modules-repository/theme/theme-service.ts +411 -389
  49. package/src/modules-repository/theme/themes/theme-cherry-blossom.css +78 -78
  50. package/src/modules-repository/theme/themes/theme-cozy.css +111 -111
  51. package/src/modules-repository/theme/themes/theme-cyberpunk.css +150 -150
  52. package/src/modules-repository/theme/themes/theme-dark.css +79 -79
  53. package/src/modules-repository/theme/themes/theme-forest.css +171 -171
  54. package/src/modules-repository/theme/themes/theme-gold.css +100 -100
  55. package/src/modules-repository/theme/themes/theme-high-contrast.css +126 -126
  56. package/src/modules-repository/theme/themes/theme-lava.css +101 -101
  57. package/src/modules-repository/theme/themes/theme-lavender.css +90 -90
  58. package/src/modules-repository/theme/themes/theme-light.css +79 -79
  59. package/src/modules-repository/theme/themes/theme-matrix.css +103 -103
  60. package/src/modules-repository/theme/themes/theme-midnight.css +81 -81
  61. package/src/modules-repository/theme/themes/theme-nord.css +94 -94
  62. package/src/modules-repository/theme/themes/theme-ocean.css +84 -84
  63. package/src/modules-repository/theme/themes/theme-retro80s.css +343 -343
  64. package/src/modules-repository/theme/themes/theme-sunset.css +62 -62
  65. package/src/modules-repository/theme/themes-config-default.json +19 -0
  66. package/src/modules-repository/theme/themes-config.d.ts +27 -27
  67. package/src/modules-repository/theme/{themes-config.json → themes-config.json.example} +223 -213
@@ -1,78 +1,78 @@
1
- /**
2
- * Cherry Blossom Theme - Delicate pink sakura colors
3
- * A soft and elegant theme inspired by Japanese cherry blossoms
4
- */
5
-
6
- :root {
7
- /* Main colors */
8
- --kimu-background: linear-gradient(135deg, #FFE5EC 0%, #FFD6E0 50%, #FFC2D4 100%);
9
- --kimu-surface: rgba(255, 194, 212, 0.2);
10
- --kimu-surface-elevated: rgba(255, 194, 212, 0.3);
11
-
12
- /* Text colors */
13
- --kimu-text-primary: #6B2E4F;
14
- --kimu-text-secondary: #8B4A6F;
15
- --kimu-text-tertiary: #A86B8F;
16
- --kimu-text-disabled: #C28BAF;
17
-
18
- /* Border colors */
19
- --kimu-border: #FFB3C6;
20
- --kimu-border-light: #FFCCD9;
21
- --kimu-divider: rgba(255, 179, 198, 0.3);
22
-
23
- /* Accent colors */
24
- --kimu-primary: #FF9EBB;
25
- --kimu-primary-dark: #FF85AA;
26
- --kimu-primary-light: #FFB3C6;
27
- --kimu-secondary: #FFAAC2;
28
- --kimu-accent: #FFC2D4;
29
-
30
- /* State colors */
31
- --kimu-success: #98D8C8;
32
- --kimu-warning: #FFD93D;
33
- --kimu-error: #FF6B9D;
34
- --kimu-info: #C8A2D0;
35
-
36
- /* Shadow */
37
- --kimu-shadow: rgba(255, 158, 187, 0.3);
38
- --kimu-shadow-strong: rgba(255, 158, 187, 0.5);
39
-
40
- /* Component colors */
41
- --kimu-input-bg: #FFFFFF;
42
- --kimu-input-border: #FFB3C6;
43
- --kimu-button-bg: #FF9EBB;
44
- --kimu-button-hover: #FF85AA;
45
- --kimu-card-bg: rgba(255, 255, 255, 0.9);
46
-
47
- /* Font */
48
- --kimu-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
49
- }
50
-
51
- /* Body background with gradient */
52
- body {
53
- background: linear-gradient(135deg, #FFE5EC 0%, #FFD6E0 50%, #FFC2D4 100%);
54
- background-attachment: fixed;
55
- color: var(--kimu-text-primary);
56
- }
57
-
58
- /* Petal animation effect */
59
- @keyframes petal-fall {
60
- 0% {
61
- transform: translateY(-10px) rotate(0deg);
62
- opacity: 0;
63
- }
64
- 50% {
65
- opacity: 0.5;
66
- }
67
- 100% {
68
- transform: translateY(100vh) rotate(360deg);
69
- opacity: 0;
70
- }
71
- }
72
-
73
- /* Soft glow on hover */
74
- button:hover,
75
- a:hover {
76
- box-shadow: 0 0 15px rgba(255, 158, 187, 0.6);
77
- transition: all 0.3s ease;
78
- }
1
+ /**
2
+ * Cherry Blossom Theme - Delicate pink sakura colors
3
+ * A soft and elegant theme inspired by Japanese cherry blossoms
4
+ */
5
+
6
+ :root {
7
+ /* Main colors */
8
+ --kimu-background: linear-gradient(135deg, #FFE5EC 0%, #FFD6E0 50%, #FFC2D4 100%);
9
+ --kimu-surface: rgba(255, 194, 212, 0.2);
10
+ --kimu-surface-elevated: rgba(255, 194, 212, 0.3);
11
+
12
+ /* Text colors */
13
+ --kimu-text-primary: #6B2E4F;
14
+ --kimu-text-secondary: #8B4A6F;
15
+ --kimu-text-tertiary: #A86B8F;
16
+ --kimu-text-disabled: #C28BAF;
17
+
18
+ /* Border colors */
19
+ --kimu-border: #FFB3C6;
20
+ --kimu-border-light: #FFCCD9;
21
+ --kimu-divider: rgba(255, 179, 198, 0.3);
22
+
23
+ /* Accent colors */
24
+ --kimu-primary: #FF9EBB;
25
+ --kimu-primary-dark: #FF85AA;
26
+ --kimu-primary-light: #FFB3C6;
27
+ --kimu-secondary: #FFAAC2;
28
+ --kimu-accent: #FFC2D4;
29
+
30
+ /* State colors */
31
+ --kimu-success: #98D8C8;
32
+ --kimu-warning: #FFD93D;
33
+ --kimu-error: #FF6B9D;
34
+ --kimu-info: #C8A2D0;
35
+
36
+ /* Shadow */
37
+ --kimu-shadow: rgba(255, 158, 187, 0.3);
38
+ --kimu-shadow-strong: rgba(255, 158, 187, 0.5);
39
+
40
+ /* Component colors */
41
+ --kimu-input-bg: #FFFFFF;
42
+ --kimu-input-border: #FFB3C6;
43
+ --kimu-button-bg: #FF9EBB;
44
+ --kimu-button-hover: #FF85AA;
45
+ --kimu-card-bg: rgba(255, 255, 255, 0.9);
46
+
47
+ /* Font */
48
+ --kimu-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
49
+ }
50
+
51
+ /* Body background with gradient */
52
+ body {
53
+ background: linear-gradient(135deg, #FFE5EC 0%, #FFD6E0 50%, #FFC2D4 100%);
54
+ background-attachment: fixed;
55
+ color: var(--kimu-text-primary);
56
+ }
57
+
58
+ /* Petal animation effect */
59
+ @keyframes petal-fall {
60
+ 0% {
61
+ transform: translateY(-10px) rotate(0deg);
62
+ opacity: 0;
63
+ }
64
+ 50% {
65
+ opacity: 0.5;
66
+ }
67
+ 100% {
68
+ transform: translateY(100vh) rotate(360deg);
69
+ opacity: 0;
70
+ }
71
+ }
72
+
73
+ /* Soft glow on hover */
74
+ button:hover,
75
+ a:hover {
76
+ box-shadow: 0 0 15px rgba(255, 158, 187, 0.6);
77
+ transition: all 0.3s ease;
78
+ }
@@ -1,111 +1,111 @@
1
- /**
2
- * KIMU Cozy Theme
3
- * Warm, feminine and cozy theme with soft colors
4
- *
5
- * This file OVERRIDES the default CSS variables defined in style.css
6
- * When this theme is loaded, these values take precedence.
7
- */
8
-
9
- :root {
10
- /* Primary colors - Soft pinks and purples */
11
- --kimu-primary: #ec4899;
12
- --kimu-primary-light: #f472b6;
13
- --kimu-primary-dark: #db2777;
14
- --kimu-text-on-primary: #ffffff;
15
-
16
- /* Accent colors - Warm coral/peach */
17
- --kimu-accent: #fb923c;
18
- --kimu-accent-light: #fdba74;
19
- --kimu-accent-dark: #f97316;
20
- --kimu-text-on-accent: #ffffff;
21
-
22
- /* Background colors - Soft creams and beiges */
23
- --kimu-background: #fef3f2;
24
- --kimu-background-alt: #fff1f0;
25
- --kimu-surface: #ffffff;
26
-
27
- /* Text colors - Warm darks */
28
- --kimu-text-primary: #431407;
29
- --kimu-text-secondary: #78350f;
30
- --kimu-text-disabled: #d97706;
31
-
32
- /* Semantic colors */
33
- --kimu-success: #86efac;
34
- --kimu-success-light: #bbf7d0;
35
- --kimu-success-dark: #4ade80;
36
-
37
- --kimu-warning: #fbbf24;
38
- --kimu-warning-light: #fde047;
39
- --kimu-warning-dark: #f59e0b;
40
-
41
- --kimu-error: #f87171;
42
- --kimu-error-light: #fca5a5;
43
- --kimu-error-dark: #ef4444;
44
-
45
- --kimu-info: #93c5fd;
46
- --kimu-info-light: #bfdbfe;
47
- --kimu-info-dark: #60a5fa;
48
-
49
- /* Borders and dividers */
50
- --kimu-border: #fed7d7;
51
- --kimu-divider: #fecaca;
52
-
53
- /* Shadows - Soft pink tint */
54
- --kimu-shadow: rgba(236, 72, 153, 0.1);
55
- --kimu-shadow-light: rgba(236, 72, 153, 0.05);
56
- --kimu-shadow-medium: rgba(236, 72, 153, 0.15);
57
- --kimu-shadow-heavy: rgba(236, 72, 153, 0.25);
58
-
59
- /* Additional UI colors */
60
- --kimu-card-bg: #fffbeb;
61
- --kimu-card-border: #fed7aa;
62
- --kimu-input-bg: #ffffff;
63
- --kimu-input-border: #fecaca;
64
- --kimu-input-focus: #ec4899;
65
-
66
- /* Navigation */
67
- --kimu-nav-bg: #fef3c7;
68
- --kimu-nav-text: #78350f;
69
- --kimu-nav-active: #ec4899;
70
-
71
- /* Footer */
72
- --kimu-footer-bg: #fff7ed;
73
- --kimu-footer-text: #c2410c;
74
- }
75
-
76
- /* Smooth transitions for theme changes */
77
- * {
78
- transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
79
- }
80
-
81
- /* Cozy gradient background */
82
- body {
83
- background: linear-gradient(135deg, #fef3f2 0%, #fff1f0 50%, #fffbeb 100%);
84
- }
85
-
86
- /* Soft rounded corners for cozy feel */
87
- .kimu-card,
88
- .kimu-button,
89
- .kimu-input {
90
- border-radius: 16px;
91
- }
92
-
93
- /* Subtle texture overlay (optional) */
94
- body::before {
95
- content: '';
96
- position: fixed;
97
- top: 0;
98
- left: 0;
99
- right: 0;
100
- bottom: 0;
101
- background-image:
102
- repeating-linear-gradient(
103
- 45deg,
104
- transparent,
105
- transparent 10px,
106
- rgba(255, 255, 255, 0.03) 10px,
107
- rgba(255, 255, 255, 0.03) 20px
108
- );
109
- pointer-events: none;
110
- z-index: -1;
111
- }
1
+ /**
2
+ * KIMU Cozy Theme
3
+ * Warm, feminine and cozy theme with soft colors
4
+ *
5
+ * This file OVERRIDES the default CSS variables defined in style.css
6
+ * When this theme is loaded, these values take precedence.
7
+ */
8
+
9
+ :root {
10
+ /* Primary colors - Soft pinks and purples */
11
+ --kimu-primary: #ec4899;
12
+ --kimu-primary-light: #f472b6;
13
+ --kimu-primary-dark: #db2777;
14
+ --kimu-text-on-primary: #ffffff;
15
+
16
+ /* Accent colors - Warm coral/peach */
17
+ --kimu-accent: #fb923c;
18
+ --kimu-accent-light: #fdba74;
19
+ --kimu-accent-dark: #f97316;
20
+ --kimu-text-on-accent: #ffffff;
21
+
22
+ /* Background colors - Soft creams and beiges */
23
+ --kimu-background: #fef3f2;
24
+ --kimu-background-alt: #fff1f0;
25
+ --kimu-surface: #ffffff;
26
+
27
+ /* Text colors - Warm darks */
28
+ --kimu-text-primary: #431407;
29
+ --kimu-text-secondary: #78350f;
30
+ --kimu-text-disabled: #d97706;
31
+
32
+ /* Semantic colors */
33
+ --kimu-success: #86efac;
34
+ --kimu-success-light: #bbf7d0;
35
+ --kimu-success-dark: #4ade80;
36
+
37
+ --kimu-warning: #fbbf24;
38
+ --kimu-warning-light: #fde047;
39
+ --kimu-warning-dark: #f59e0b;
40
+
41
+ --kimu-error: #f87171;
42
+ --kimu-error-light: #fca5a5;
43
+ --kimu-error-dark: #ef4444;
44
+
45
+ --kimu-info: #93c5fd;
46
+ --kimu-info-light: #bfdbfe;
47
+ --kimu-info-dark: #60a5fa;
48
+
49
+ /* Borders and dividers */
50
+ --kimu-border: #fed7d7;
51
+ --kimu-divider: #fecaca;
52
+
53
+ /* Shadows - Soft pink tint */
54
+ --kimu-shadow: rgba(236, 72, 153, 0.1);
55
+ --kimu-shadow-light: rgba(236, 72, 153, 0.05);
56
+ --kimu-shadow-medium: rgba(236, 72, 153, 0.15);
57
+ --kimu-shadow-heavy: rgba(236, 72, 153, 0.25);
58
+
59
+ /* Additional UI colors */
60
+ --kimu-card-bg: #fffbeb;
61
+ --kimu-card-border: #fed7aa;
62
+ --kimu-input-bg: #ffffff;
63
+ --kimu-input-border: #fecaca;
64
+ --kimu-input-focus: #ec4899;
65
+
66
+ /* Navigation */
67
+ --kimu-nav-bg: #fef3c7;
68
+ --kimu-nav-text: #78350f;
69
+ --kimu-nav-active: #ec4899;
70
+
71
+ /* Footer */
72
+ --kimu-footer-bg: #fff7ed;
73
+ --kimu-footer-text: #c2410c;
74
+ }
75
+
76
+ /* Smooth transitions for theme changes */
77
+ * {
78
+ transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
79
+ }
80
+
81
+ /* Cozy gradient background */
82
+ body {
83
+ background: linear-gradient(135deg, #fef3f2 0%, #fff1f0 50%, #fffbeb 100%);
84
+ }
85
+
86
+ /* Soft rounded corners for cozy feel */
87
+ .kimu-card,
88
+ .kimu-button,
89
+ .kimu-input {
90
+ border-radius: 16px;
91
+ }
92
+
93
+ /* Subtle texture overlay (optional) */
94
+ body::before {
95
+ content: '';
96
+ position: fixed;
97
+ top: 0;
98
+ left: 0;
99
+ right: 0;
100
+ bottom: 0;
101
+ background-image:
102
+ repeating-linear-gradient(
103
+ 45deg,
104
+ transparent,
105
+ transparent 10px,
106
+ rgba(255, 255, 255, 0.03) 10px,
107
+ rgba(255, 255, 255, 0.03) 20px
108
+ );
109
+ pointer-events: none;
110
+ z-index: -1;
111
+ }
@@ -1,150 +1,150 @@
1
- /**
2
- * Cyberpunk Theme - Futuristic neon aesthetic
3
- *
4
- * Inspired by cyberpunk aesthetics with neon colors,
5
- * dark backgrounds, and electric accents
6
- */
7
-
8
- :root {
9
- /* Primary Colors - Neon Cyan */
10
- --kimu-primary: #00F0FF;
11
- --kimu-primary-hover: #33F3FF;
12
- --kimu-primary-active: #00D0E0;
13
- --kimu-primary-light: rgba(0, 240, 255, 0.15);
14
-
15
- /* Secondary Colors - Electric Pink */
16
- --kimu-secondary: #FF006E;
17
- --kimu-secondary-hover: #FF3388;
18
- --kimu-secondary-active: #E0005E;
19
-
20
- /* Accent Colors - Neon Purple */
21
- --kimu-accent: #B100FF;
22
- --kimu-accent-hover: #C433FF;
23
- --kimu-accent-active: #9900E0;
24
-
25
- /* Background Colors - Deep Dark */
26
- --kimu-bg-primary: #0A0A0F;
27
- --kimu-bg-secondary: #14141F;
28
- --kimu-bg-tertiary: #1E1E2E;
29
- --kimu-bg-hover: #28283D;
30
-
31
- /* Text Colors - Bright Neon */
32
- --kimu-text-primary: #F0F0FF;
33
- --kimu-text-secondary: #C0C0E0;
34
- --kimu-text-tertiary: #9090C0;
35
- --kimu-text-disabled: #505070;
36
-
37
- /* Border Colors - Glowing edges */
38
- --kimu-border: #00F0FF;
39
- --kimu-border-light: rgba(0, 240, 255, 0.3);
40
- --kimu-border-strong: #FF006E;
41
-
42
- /* Status Colors - Neon Palette */
43
- --kimu-success: #00FF88;
44
- --kimu-warning: #FFD700;
45
- --kimu-error: #FF0055;
46
- --kimu-info: #00CCFF;
47
-
48
- /* Shadows - Glowing effects */
49
- --kimu-shadow-sm: 0 0 10px rgba(0, 240, 255, 0.3);
50
- --kimu-shadow-md: 0 0 20px rgba(0, 240, 255, 0.4);
51
- --kimu-shadow-lg: 0 0 30px rgba(0, 240, 255, 0.5);
52
-
53
- /* Additional Component-specific Colors */
54
- --kimu-card-bg: var(--kimu-bg-secondary);
55
- --kimu-input-bg: var(--kimu-bg-tertiary);
56
- --kimu-input-border: var(--kimu-border-light);
57
- --kimu-input-focus: var(--kimu-primary);
58
-
59
- /* Links - Neon glow */
60
- --kimu-link: var(--kimu-primary);
61
- --kimu-link-hover: var(--kimu-secondary);
62
-
63
- /* Overlays */
64
- --kimu-overlay: rgba(10, 10, 15, 0.9);
65
- }
66
-
67
- /* Cyberpunk-specific styling */
68
- body {
69
- color: var(--kimu-text-primary);
70
- background: var(--kimu-bg-primary);
71
- font-family: 'Courier New', 'Consolas', monospace;
72
- }
73
-
74
- /* Add subtle grid background */
75
- body::before {
76
- content: '';
77
- position: fixed;
78
- top: 0;
79
- left: 0;
80
- width: 100%;
81
- height: 100%;
82
- background-image:
83
- linear-gradient(rgba(0, 240, 255, 0.03) 1px, transparent 1px),
84
- linear-gradient(90deg, rgba(0, 240, 255, 0.03) 1px, transparent 1px);
85
- background-size: 50px 50px;
86
- pointer-events: none;
87
- z-index: -1;
88
- }
89
-
90
- /* Glowing text effect for headers */
91
- h1, h2, h3, h4, h5, h6 {
92
- color: var(--kimu-primary);
93
- text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
94
- }
95
-
96
- /* Button glow effects */
97
- button {
98
- box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
99
- transition: all 0.3s ease;
100
- }
101
-
102
- button:hover {
103
- box-shadow: 0 0 20px rgba(0, 240, 255, 0.6);
104
- transform: translateY(-2px);
105
- }
106
-
107
- /* Input glow on focus */
108
- input:focus,
109
- textarea:focus,
110
- select:focus {
111
- box-shadow: 0 0 15px rgba(0, 240, 255, 0.5);
112
- border-color: var(--kimu-primary);
113
- }
114
-
115
- /* Link neon glow */
116
- a {
117
- text-shadow: 0 0 5px rgba(0, 240, 255, 0.5);
118
- transition: all 0.3s ease;
119
- }
120
-
121
- a:hover {
122
- text-shadow: 0 0 10px rgba(255, 0, 110, 0.8);
123
- }
124
-
125
- /* Scrollbar - Neon style */
126
- ::-webkit-scrollbar {
127
- width: 12px;
128
- height: 12px;
129
- }
130
-
131
- ::-webkit-scrollbar-track {
132
- background: var(--kimu-bg-secondary);
133
- border: 1px solid rgba(0, 240, 255, 0.2);
134
- }
135
-
136
- ::-webkit-scrollbar-thumb {
137
- background: linear-gradient(180deg, #00F0FF, #B100FF);
138
- border-radius: 6px;
139
- box-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
140
- }
141
-
142
- ::-webkit-scrollbar-thumb:hover {
143
- box-shadow: 0 0 15px rgba(0, 240, 255, 0.8);
144
- }
145
-
146
- /* Selection glow */
147
- ::selection {
148
- background: rgba(0, 240, 255, 0.3);
149
- text-shadow: 0 0 5px rgba(0, 240, 255, 0.8);
150
- }
1
+ /**
2
+ * Cyberpunk Theme - Futuristic neon aesthetic
3
+ *
4
+ * Inspired by cyberpunk aesthetics with neon colors,
5
+ * dark backgrounds, and electric accents
6
+ */
7
+
8
+ :root {
9
+ /* Primary Colors - Neon Cyan */
10
+ --kimu-primary: #00F0FF;
11
+ --kimu-primary-hover: #33F3FF;
12
+ --kimu-primary-active: #00D0E0;
13
+ --kimu-primary-light: rgba(0, 240, 255, 0.15);
14
+
15
+ /* Secondary Colors - Electric Pink */
16
+ --kimu-secondary: #FF006E;
17
+ --kimu-secondary-hover: #FF3388;
18
+ --kimu-secondary-active: #E0005E;
19
+
20
+ /* Accent Colors - Neon Purple */
21
+ --kimu-accent: #B100FF;
22
+ --kimu-accent-hover: #C433FF;
23
+ --kimu-accent-active: #9900E0;
24
+
25
+ /* Background Colors - Deep Dark */
26
+ --kimu-bg-primary: #0A0A0F;
27
+ --kimu-bg-secondary: #14141F;
28
+ --kimu-bg-tertiary: #1E1E2E;
29
+ --kimu-bg-hover: #28283D;
30
+
31
+ /* Text Colors - Bright Neon */
32
+ --kimu-text-primary: #F0F0FF;
33
+ --kimu-text-secondary: #C0C0E0;
34
+ --kimu-text-tertiary: #9090C0;
35
+ --kimu-text-disabled: #505070;
36
+
37
+ /* Border Colors - Glowing edges */
38
+ --kimu-border: #00F0FF;
39
+ --kimu-border-light: rgba(0, 240, 255, 0.3);
40
+ --kimu-border-strong: #FF006E;
41
+
42
+ /* Status Colors - Neon Palette */
43
+ --kimu-success: #00FF88;
44
+ --kimu-warning: #FFD700;
45
+ --kimu-error: #FF0055;
46
+ --kimu-info: #00CCFF;
47
+
48
+ /* Shadows - Glowing effects */
49
+ --kimu-shadow-sm: 0 0 10px rgba(0, 240, 255, 0.3);
50
+ --kimu-shadow-md: 0 0 20px rgba(0, 240, 255, 0.4);
51
+ --kimu-shadow-lg: 0 0 30px rgba(0, 240, 255, 0.5);
52
+
53
+ /* Additional Component-specific Colors */
54
+ --kimu-card-bg: var(--kimu-bg-secondary);
55
+ --kimu-input-bg: var(--kimu-bg-tertiary);
56
+ --kimu-input-border: var(--kimu-border-light);
57
+ --kimu-input-focus: var(--kimu-primary);
58
+
59
+ /* Links - Neon glow */
60
+ --kimu-link: var(--kimu-primary);
61
+ --kimu-link-hover: var(--kimu-secondary);
62
+
63
+ /* Overlays */
64
+ --kimu-overlay: rgba(10, 10, 15, 0.9);
65
+ }
66
+
67
+ /* Cyberpunk-specific styling */
68
+ body {
69
+ color: var(--kimu-text-primary);
70
+ background: var(--kimu-bg-primary);
71
+ font-family: 'Courier New', 'Consolas', monospace;
72
+ }
73
+
74
+ /* Add subtle grid background */
75
+ body::before {
76
+ content: '';
77
+ position: fixed;
78
+ top: 0;
79
+ left: 0;
80
+ width: 100%;
81
+ height: 100%;
82
+ background-image:
83
+ linear-gradient(rgba(0, 240, 255, 0.03) 1px, transparent 1px),
84
+ linear-gradient(90deg, rgba(0, 240, 255, 0.03) 1px, transparent 1px);
85
+ background-size: 50px 50px;
86
+ pointer-events: none;
87
+ z-index: -1;
88
+ }
89
+
90
+ /* Glowing text effect for headers */
91
+ h1, h2, h3, h4, h5, h6 {
92
+ color: var(--kimu-primary);
93
+ text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
94
+ }
95
+
96
+ /* Button glow effects */
97
+ button {
98
+ box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
99
+ transition: all 0.3s ease;
100
+ }
101
+
102
+ button:hover {
103
+ box-shadow: 0 0 20px rgba(0, 240, 255, 0.6);
104
+ transform: translateY(-2px);
105
+ }
106
+
107
+ /* Input glow on focus */
108
+ input:focus,
109
+ textarea:focus,
110
+ select:focus {
111
+ box-shadow: 0 0 15px rgba(0, 240, 255, 0.5);
112
+ border-color: var(--kimu-primary);
113
+ }
114
+
115
+ /* Link neon glow */
116
+ a {
117
+ text-shadow: 0 0 5px rgba(0, 240, 255, 0.5);
118
+ transition: all 0.3s ease;
119
+ }
120
+
121
+ a:hover {
122
+ text-shadow: 0 0 10px rgba(255, 0, 110, 0.8);
123
+ }
124
+
125
+ /* Scrollbar - Neon style */
126
+ ::-webkit-scrollbar {
127
+ width: 12px;
128
+ height: 12px;
129
+ }
130
+
131
+ ::-webkit-scrollbar-track {
132
+ background: var(--kimu-bg-secondary);
133
+ border: 1px solid rgba(0, 240, 255, 0.2);
134
+ }
135
+
136
+ ::-webkit-scrollbar-thumb {
137
+ background: linear-gradient(180deg, #00F0FF, #B100FF);
138
+ border-radius: 6px;
139
+ box-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
140
+ }
141
+
142
+ ::-webkit-scrollbar-thumb:hover {
143
+ box-shadow: 0 0 15px rgba(0, 240, 255, 0.8);
144
+ }
145
+
146
+ /* Selection glow */
147
+ ::selection {
148
+ background: rgba(0, 240, 255, 0.3);
149
+ text-shadow: 0 0 5px rgba(0, 240, 255, 0.8);
150
+ }