1.1.1 - kirkland signature console theme

Author: jimmylee

components/page/DefaultActionBar.tsx

@@ -216,6 +216,11 @@ const DefaultActionBar: React.FC<DefaultActionBarProps> = ({ items = [] }) => {
                 children: 'Neon Green Garden',
                 onClick: () => Utilities.onHandleThemeChange('theme-green'),
               },
+              {
+                icon: '⊹',
+                children: 'Kirkland Signature Console',
+                onClick: () => Utilities.onHandleThemeChange('theme-black-green'),
+              },
             ],
           },
           {

global.scss

@@ -211,7 +211,6 @@ body.theme-blue {
   --theme-background-input: var(--color-blue-60);
   --theme-border: var(--color-blue-70);
   --theme-border-subdued: var(--color-blue-60-2);
-  --theme-primary: var(--color-gold-30);
   --theme-text: var(--color-blue-10);
   --theme-button: var(--color-blue-10);
   --theme-button-text: var(--color-blue-80);
@@ -229,7 +228,6 @@ body.theme-light {
   --theme-background-input: var(--color-gray-10);
   --theme-border: var(--color-gray-20);
   --theme-border-subdued: var(--color-gray-40-2);
-  --theme-primary: var(--color-blue-60);
   --theme-text: var(--color-black-100);
   --theme-button: var(--color-black-100);
   --theme-button-text: var(--color-white);
@@ -247,7 +245,6 @@ body.theme-dark {
   --theme-background-input: var(--color-gray-60);
   --theme-border: var(--color-gray-80);
   --theme-border-subdued: var(--color-gray-70-3);
-  --theme-primary: var(--color-gold-30);
   --theme-text: var(--color-white);
   --theme-button: var(--color-white);
   --theme-button-text: var(--color-black-100);
@@ -265,7 +262,6 @@ body.theme-green {
   --theme-background-input: var(--color-neon-green-30);
   --theme-border: var(--color-neon-green-60);
   --theme-border-subdued: var(--color-neon-green-60-3);
-  --theme-primary: var(--color-gold-30);
   --theme-text: var(--color-neon-green-100);
   --theme-button: var(--color-neon-green-100);
   --theme-button-text: var(--color-neon-green-10);
@@ -283,7 +279,6 @@ body.theme-black-red {
   --theme-background-input: var(--color-red-60);
   --theme-border: var(--color-red-60-7);
   --theme-border-subdued: var(--color-red-60-3);
-  --theme-primary: var(--color-gold-30);
   --theme-text: var(--color-red-30);
   --theme-button: var(--color-red-100);
   --theme-button-text: var(--color-red-20);
@@ -301,7 +296,6 @@ body.theme-black-teal {
   --theme-background-input: var(--color-teal-60);
   --theme-border: var(--color-teal-60-7);
   --theme-border-subdued: var(--color-teal-60-3);
-  --theme-primary: var(--color-gold-30);
   --theme-text: var(--color-teal-30);
   --theme-button: var(--color-teal-100);
   --theme-button-text: var(--color-teal-20);
@@ -311,6 +305,23 @@ body.theme-black-teal {
   --theme-focused-foreground-subdued: var(--color-teal-70-4);
 }
 
+body.theme-black-green {
+  --theme-overlay: var(--color-black-100-4);
+  --theme-background: var(--color-black-100);
+  --theme-background-modal: var(--color-gray-90);
+  --theme-background-modal-footer: var(--color-gray-80);
+  --theme-background-input: var(--color-gray-70);
+  --theme-border: var(--color-gray-80);
+  --theme-border-subdued: var(--color-gray-70-3);
+  --theme-text: var(--color-green-50);
+  --theme-button: var(--color-green-50);
+  --theme-button-text: var(--color-green-80);
+  --theme-button-foreground: var(--color-green-80);
+  --theme-button-background: var(--color-green-90);
+  --theme-focused-foreground: var(--color-gray-30);
+  --theme-focused-foreground-subdued: var(--color-gray-40);
+}
+
 body.font-use-berkeley-mono {
   --font-family-mono: 'TX02Mono-Regular', sans-serif;
 }
@@ -358,6 +369,7 @@ body {
   --color-black-100-4: rgba(0, 0, 0, 0.4);
   --color-black-daybreak-100: rgba(4, 2, 0, 1);
   --color-black-daybreak-100-4: rgba(4, 2, 0, 0.4);
+
   --color-blue-10: rgba(237, 245, 255, 1);
   --color-blue-100: rgba(0, 17, 65, 1);
   --color-blue-20: rgba(208, 226, 255, 1);
@@ -376,6 +388,7 @@ body {
   --color-blue-80-6: rgba(0, 45, 156, 0.6);
   --color-blue-90: rgba(0, 29, 108, 1);
   --color-blue-90-6: rgba(0, 29, 108, 0.6);
+
   --color-daybreak: rgba(255, 108, 4, 1);
   --color-daybreak-1: rgba(255, 108, 4, 0.1);
   --color-daybreak-10: rgba(239, 99, 0, 1);
@@ -392,7 +405,9 @@ body {
   --color-daybreak-70-3: rgba(121, 50, 0, 0.3);
   --color-daybreak-80: rgba(102, 42, 0, 1);
   --color-daybreak-90: rgba(82, 34, 0, 1);
+
   --color-gold-30: rgba(241, 194, 27, 1);
+
   --color-gray-10: rgba(244, 244, 244, 1);
   --color-gray-100: rgba(22, 22, 22, 1);
   --color-gray-20: rgba(224, 224, 224, 1);
@@ -410,8 +425,20 @@ body {
   --color-gray-80-6: rgba(57, 57, 57, 0.6);
   --color-gray-90: rgba(38, 38, 38, 1);
   --color-gray-90-6: rgba(38, 38, 38, 0.6);
+
+  --color-green-100: rgba(7, 25, 8, 1);
+  --color-green-100: rgba(7, 25, 8, 1);
+  --color-green-90: rgba(2, 45, 13, 1);
+  --color-green-80: rgba(4, 67, 23, 1);
+  --color-green-70: rgba(14, 96, 39, 1);
   --color-green-60: rgba(25, 128, 56, 1);
   --color-green-60-3: rgba(25, 128, 56, 0.3);
+  --color-green-50: rgba(36, 161, 72, 1);
+  --color-green-40: rgba(66, 190, 101, 1);
+  --color-green-30: rgba(111, 220, 140, 1);
+  --color-green-20: rgba(167, 240, 186, 1);
+  --color-green-10: rgba(222, 251, 230, 1);
+
   --color-neon-green-10: rgba(242, 255, 233, 1);
   --color-neon-green-100: rgba(10, 44, 2, 1);
   --color-neon-green-100-1: rgba(10, 44, 2, 0.1);

package.json

@@ -5,7 +5,7 @@
     "node": ">=18"
   },
   "license": "MIT",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "scripts": {
     "dev": "next -p 10000",
     "build": "next build",