diff --git a/.config/ags/modules/cheatsheet/data_keybinds.js b/.config/ags/modules/cheatsheet/data_keybinds.js index 8d0eeb0a..5065b343 100644 --- a/.config/ags/modules/cheatsheet/data_keybinds.js +++ b/.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 } ]]; diff --git a/.config/ags/modules/cheatsheet/keybinds.js b/.config/ags/modules/cheatsheet/keybinds.js index 3aea58f2..c156eb31 100644 --- a/.config/ags/modules/cheatsheet/keybinds.js +++ b/.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 - className: `${['OR', '+'].includes(key) ? 'cheatsheet-key-notkey' : 'cheatsheet-key'} txt-small`, + children: keybinds.keys.map((key, _) => Widget.Label({ // Specific keys + 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", diff --git a/.config/ags/modules/cheatsheet/main.js b/.config/ags/modules/cheatsheet/main.js index d83a18b8..da4fa39f 100644 --- a/.config/ags/modules/cheatsheet/main.js +++ b/.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({ diff --git a/.config/ags/scss/_bar.scss b/.config/ags/scss/_bar.scss index 4c73b7c9..0ec525ae 100644 --- a/.config/ags/scss/_bar.scss +++ b/.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 { diff --git a/.config/ags/scss/_cheatsheet.scss b/.config/ags/scss/_cheatsheet.scss index 8681e1cf..70debef0 100644 --- a/.config/ags/scss/_cheatsheet.scss +++ b/.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; - border: 0.068rem solid $primary; - box-shadow: 0rem 0.136rem 0rem $primary; - font-weight: 500; + color: $cheatsheetTitle; + border-radius: 0.409rem; + border: 0.068rem solid $cheatsheetTitle; + 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 { diff --git a/.config/ags/scss/_colors.scss b/.config/ags/scss/_colors.scss index 839c1c00..30ffb7d3 100644 --- a/.config/ags/scss/_colors.scss +++ b/.config/ags/scss/_colors.scss @@ -135,10 +135,12 @@ $term7: $onSurfaceVariant; // General $layer0: $t_background; $onLayer0: $onBackground; -$onLayer0Inactive: mix($onBackground, $background, 70%); -$layer0Active: mix($t_background, $t_onBackground, 80%); +$layer0Hover: mix($layer0, $onLayer0, 85%); +$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 +// );