update cheatsheet colors (#327)

This commit is contained in:
end-4 2024-03-16 22:41:03 +07:00
parent d59142fa6d
commit 46642ba4b1
6 changed files with 70 additions and 47 deletions

View file

@ -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
}
]];

View file

@ -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",

View file

@ -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({

View file

@ -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 {

View file

@ -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 {

View file

@ -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
// );