update cheatsheet colors (#327)

.config/ags/modules/cheatsheet/data_keybinds.js

@@ -11,7 +11,7 @@ export const keybindList = [[
             { "keys": ["", "+", "PageUp"], "action": "Go to workspace on the left" },
             { "keys": ["", "+", "PageDown"], "action": "Go to workspace on the right" }
         ],
-        "appeartick": 1
+        "id": 1
     },
     {
         "icon": "overview_key",
@@ -22,7 +22,7 @@ export const keybindList = [[
             { "keys": ["", "Alt", "+", "PageUp"], "action": "Move window to workspace on the left" },
             { "keys": ["", "Alt", "+", "PageDown"], "action": "Move window to workspace on the right" }
         ],
-        "appeartick": 1
+        "id": 2
     },
     {
         "icon": "move_group",
@@ -38,7 +38,7 @@ export const keybindList = [[
             { "keys": ["", "+", "F"], "action": "Fullscreen" },
             { "keys": ["", "Alt", "+", "F"], "action": "Fake fullscreen" }
         ],
-        "appeartick": 1
+        "id": 3
     }
 ],
 [
@@ -65,7 +65,7 @@ export const keybindList = [[
             // { "keys": ["", "+", "M"], "action": "Toggle useless audio visualizer" },
             // { "keys": ["(right)Ctrl"], "action": "Dismiss notification & close menus" }
         ],
-        "appeartick": 2
+        "id": 4
     },
     {
         "icon": "construction",
@@ -79,22 +79,8 @@ export const keybindList = [[
             { "keys": ["Ctrl", "Alt", "+", "R"], "action": "Record region with sound" },
             { "keys": ["", "Shift", "Alt", "+", "R"], "action": "Record screen with sound" }
         ],
-        "appeartick": 2
+        "id": 5
     },
-    // {
-    //     "icon": "edit",
-    //     "name": "Edit mode",
-    //     "binds": [
-    //         { "keys": ["Esc"], "action": "Exit Edit mode" },
-    //         { "keys": ["#"], "action": "Go to to workspace #" },
-    //         { "keys": ["Alt", "+", "#"], "action": "Dump windows to workspace #" },
-    //         { "keys": ["Shift", "+", "#"], "action": "Swap windows with workspace #" },
-    //         { "keys": ["Lmb"], "action": "Move window" },
-    //         { "keys": ["Mmb"], "action": "Move window" },
-    //         { "keys": ["Rmb"], "action": "Resize window" }
-    //     ],
-    //     "appeartick": 2
-    // }
 ],
 [
     {
@@ -107,7 +93,7 @@ export const keybindList = [[
             { "keys": ["", "+", "X"], "action": "Launch editor: GNOME Text Editor" },
             { "keys": ["", "+", "I"], "action": "Launch settings: GNOME Control center" }
         ],
-        "appeartick": 3
+        "id": 6
     },
     {
         "icon": "keyboard",
@@ -116,7 +102,7 @@ export const keybindList = [[
             { "keys": ["", "+", "V"], "action": "Clipboard history  >>  clipboard" },
             { "keys": ["", "+", "."], "action": "Emoji picker  >>  clipboard" },
         ],
-        "appeartick": 3
+        "id": 7
     },
     {
         "icon": "terminal",
@@ -130,6 +116,6 @@ export const keybindList = [[
             { "keys": [">color"], "action": "Pick acccent color" },
             { "keys": [">todo"], "action": "Type something after that to add a To-do item" },
         ],
-        "appeartick": 3
+        "id": 8
     }
 ]];

.config/ags/modules/cheatsheet/keybinds.js

@@ -5,10 +5,10 @@ export const Keybinds = () => Widget.Box({
     vertical: false,
     className: "spacing-h-15",
     homogeneous: true,
-    children: keybindList.map((group, i) => Widget.Box({ // Columns
+    children: keybindList.map((group, _) => Widget.Box({ // Columns
         vertical: true,
         className: "spacing-v-15",
-        children: group.map((category, i) => Widget.Box({ // Categories
+        children: group.map((category, _) => Widget.Box({ // Categories
             vertical: true,
             className: "spacing-v-15",
             children: [
@@ -18,7 +18,7 @@ export const Keybinds = () => Widget.Box({
                     children: [
                         Widget.Label({
                             xalign: 0,
-                            className: "icon-material txt txt-larger",
+                            className: `icon-material txt-larger cheatsheet-color-${category.id}`,
                             label: category.icon,
                         }),
                         Widget.Label({
@@ -35,10 +35,10 @@ export const Keybinds = () => Widget.Box({
                         Widget.Box({ // Keys
                             vertical: true,
                             homogeneous: true,
-                            children: category.binds.map((keybinds, i) => Widget.Box({ // Binds
+                            children: category.binds.map((keybinds, _) => Widget.Box({ // Binds
                                 vertical: false,
-                                children: keybinds.keys.map((key, i) => Widget.Label({ // Specific keys
+                                children: keybinds.keys.map((key, _) => Widget.Label({ // Specific keys
-                                    className: `${['OR', '+'].includes(key) ? 'cheatsheet-key-notkey' : 'cheatsheet-key'} txt-small`,
+                                    className: `${['OR', '+'].includes(key) ? 'cheatsheet-key-notkey' : 'cheatsheet-key cheatsheet-color-' + category.id} txt-small`,
                                     label: key,
                                 }))
                             }))
@@ -46,7 +46,7 @@ export const Keybinds = () => Widget.Box({
                         Widget.Box({ // Actions
                             vertical: true,
                             homogeneous: true,
-                            children: category.binds.map((keybinds, i) => Widget.Label({ // Binds
+                            children: category.binds.map((keybinds, _) => Widget.Label({ // Binds
                                 xalign: 0,
                                 label: keybinds.action,
                                 className: "txt chearsheet-action txt-small",

.config/ags/modules/cheatsheet/main.js

@@ -14,12 +14,12 @@ const cheatsheetHeader = () => Widget.CenterBox({
         children: [
             Widget.Box({
                 hpack: 'center',
-                className: 'spacing-h-5',
+                className: 'spacing-h-5 cheatsheet-title',
                 children: [
                     Widget.Label({
                         hpack: 'center',
                         css: 'margin-right: 0.682rem;',
-                        className: 'txt-title txt',
+                        className: 'txt-title',
                         label: 'Cheat sheet',
                     }),
                     Widget.Label({

.config/ags/scss/_bar.scss

@@ -23,7 +23,7 @@ $bar_ws_width_focus_active: 2.045rem;
 }
 
 .bar-bg-focus-batterylow {
-    background-color: mix($background, $errorContainer, 80%);
+    background-color: mix($layer0, $errorContainer, 80%);
 }
 
 .bar-sidespace {

.config/ags/scss/_cheatsheet.scss

@@ -3,29 +3,40 @@
     @include elevation-border;
     @include elevation2;
     margin-bottom: 0.682rem;
-    background-color: $t_background;
+    background-color: $layer0;
     padding: 1.364rem;
 }
 
+.cheatsheet-title {
+    color: $cheatsheetTitle;
+}
+
 .cheatsheet-key {
     @include techfont;
     min-height: 1.364rem;
     min-width: 1.364rem;
     margin: 0.17rem;
     padding: 0.136rem 0.205rem;
-    border-radius: 0.409rem;
     -gtk-outline-radius: 0.409rem;
-    color: $primary;
+    color: $cheatsheetTitle;
-    border: 0.068rem solid $primary;
+    border-radius: 0.409rem;
-    box-shadow: 0rem 0.136rem 0rem $primary;
+    border: 0.068rem solid $cheatsheetTitle;
-    font-weight: 500;
+    box-shadow: 0rem 0.136rem 0rem $cheatsheetTitle;
 }
 
 .cheatsheet-key-notkey {
     min-height: 1.364rem;
     padding: 0.136rem 0.205rem;
     margin: 0.17rem;
-    color: $onPrimaryContainer;
+    color: $onLayer0;
+}
+
+@for $i from 1 through 8 {
+    .cheatsheet-color-#{$i} {
+        color: nth($cheatsheetColors, $i);
+        border-color: nth($cheatsheetColors, $i);
+        box-shadow: 0rem 0.136rem 0rem nth($cheatsheetColors, $i);
+    }
 }
 
 // .cheatsheet-action {}
@@ -39,11 +50,11 @@
 
 .cheatsheet-closebtn:hover,
 .cheatsheet-closebtn:focus {
-    background-color: $hovercolor;
+    background-color: $layer0Hover;
 }
 
 .cheatsheet-closebtn:active {
-    background-color: $activecolor;
+    background-color: $layer0Active;
 }
 
 .cheatsheet-category-title {

.config/ags/scss/_colors.scss

@@ -135,10 +135,12 @@ $term7: $onSurfaceVariant;
 // General
 $layer0: $t_background;
 $onLayer0: $onBackground;
-$onLayer0Inactive: mix($onBackground, $background, 70%);
+$layer0Hover: mix($layer0, $onLayer0, 85%);
-$layer0Active: mix($t_background, $t_onBackground, 80%);
+$layer0Active: mix($layer0, $onLayer0, 70%);
+$onLayer0Inactive: mix($onLayer0, $layer0, 70%);
 $layer1: $surface;
-$onLayer1Inactive: mix($onBackground, $background, 45%);
+$onLayer1: $onSurface;
+$onLayer1Inactive: mix($onLayer1, $layer1, 45%);
 $onLayer1: $onSurfaceVariant;
 $layer2: $surfaceVariant;
 $onLayer2: $onSurfaceVariant;
@@ -172,19 +174,32 @@ $workspaceLayer3: $secondaryContainer;
 $workspaceOnLayer3: $onSecondaryContainer;
 $workspaceOnLayer2: $onSurfaceVariant;
 $trayOnLayer0: $onLayer0;
+$cheatsheetTitle: $onSecondaryContainer;
+$cheatsheetColors: (
+    $onSecondaryContainer,
+    $onSecondaryContainer,
+    $onSecondaryContainer,
+    $onSecondaryContainer,
+    $onSecondaryContainer,
+    $onSecondaryContainer,
+    $onSecondaryContainer,
+    $onSecondaryContainer
+);
 
 ///////////////////// test theme: amarena (kind of) /////////////////////////
 // $layer0: #0e1116;
 // $onLayer0: #FFFFFF;
-// $layer0Active: mix($t_background, $t_onBackground, 80%);
+// $layer0Hover: mix($layer0, $onLayer0, 85%);
+// $layer0Active: mix($layer0, $onLayer0, 70%);
 // $layer1: #171c22;
-// $onLayer1Inactive: mix($onBackground, $background, 45%);
+// $onLayer1Inactive: mix($onLayer1, $layer1, 45%);
 // $onLayer1: $onSurfaceVariant;
 // $layer2: #252c35;
 // $onLayer2: $onSurfaceVariant;
 // $layer2Hover: mix($layer2, $onSurfaceVariant, 90%);
 // $layer2Active: mix($layer2, $onSurfaceVariant, 80%);
 // $layer3: #1C232A;
+// // Bar
 // $windowtitleOnLayer0Inactive: #70afa4;
 // $windowtitleOnLayer0: #7FE3D1;
 // $barspacerightOnLayer0: #7FE3D1;
@@ -212,4 +227,15 @@ $trayOnLayer0: $onLayer0;
 // $workspaceOnLayer3: #7FE3D1;
 // $workspaceOnLayer2: #7FE3D1;
 // $trayOnLayer0: #6DC0D5;
-
+// // Cheatsheet
+// $cheatsheetTitle: #6DC0D4;
+// $cheatsheetColors: (
+//     #F692B2,
+//     #6EC1D6,
+//     #CD84C8,
+//     #7FE4D2,
+//     #94CF95,
+//     #CD84C8,
+//     #FB6396,
+//     #6EC1D6
+// );