Skip to content

Commit

Permalink
drawer
Browse files Browse the repository at this point in the history
  • Loading branch information
@alinelena @github-actions
alinelena authored and github-actions[bot] committed Oct 19, 2024
1 parent 65082c3 commit 7cd5508
Show file tree
Hide file tree
Showing 3 changed files with 2,207 additions and 1,460 deletions.
353 changes: 340 additions & 13 deletions keymap-drawer/config.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -396,22 +396,22 @@ parse_config:
zmk_additional_includes: ["zmk-helpers/include"]

draw_config:
key_w: 60.0
key_h: 56.0
key_w: 80.0
key_h: 75.0
split_gap: 30.0
combo_w: 28.0
combo_h: 26.0
key_rx: 6.0
key_ry: 6.0
dark_mode: true
combo_w: 34.0
combo_h: 32.0
key_rx: 4.0
key_ry: 4.0
dark_mode: auto
n_columns: 1
separate_combo_diagrams: false
combo_diagrams_scale: 2
inner_pad_w: 2.0
inner_pad_h: 2.0
outer_pad_w: 30.0
outer_pad_h: 56.0
line_spacing: 1.2
outer_pad_w: 0.0
outer_pad_h: 0.0
line_spacing: 1.0
arc_radius: 6.0
append_colon_to_layer_header: true
small_pad: 2.0
Expand All @@ -429,7 +429,334 @@ draw_config:
footer_text: Created with <a href="https://github.com/caksoylar/keymap-drawer">keymap-drawer</a>
shrink_wide_legends: 5
style_layer_activators: true
glyph_tap_size: 16
glyph_hold_size: 10
glyph_shifted_size: 10
glyph_tap_size: 26
glyph_hold_size: 16
glyph_shifted_size: 16
glyphs: {}
# Custom CSS
svg_style: |
/* inherit to force styles through use tags */
svg path {
fill: inherit;
}
/* font and background color specifications */
svg.keymap {
/*
* ====================
* Theme Variables
* ====================
*/
--logo-path: none;
--logo-size: 12%;
--logo-position: 49.5% 5%;
/* === Colors === */
--color--material--blue--50: rgb(227, 242, 253);
--color--material--blue--100: rgb(187, 222, 251);
--color--material--blue--200: rgb(144, 202, 249);
--color--material--blue--300: rgb(100, 181, 246);
--color--material--blue--400: rgb(66, 165, 245);
--color--material--blue--500: rgb(33, 150, 243);
--color--material--blue--600: rgb(30, 136, 229);
--color--material--blue--700: rgb(25, 118, 210);
--color--material--blue--800: rgb(21, 101, 192);
--color--material--blue--900: rgb(13, 71, 161);
--color--material--blue--a100: rgb(130, 177, 255);
--color--material--blue--a200: rgb(68, 138, 255);
--color--material--blue--a400: rgb(41, 121, 255);
--color--material--blue--a700: rgb(41, 98, 255);
--color--material--blue-gray--50: rgb(236, 239, 241);
--color--material--blue-gray--100: rgb(207, 216, 220);
--color--material--blue-gray--200: rgb(176, 190, 197);
--color--material--blue-gray--300: rgb(144, 164, 174);
--color--material--blue-gray--400: rgb(120, 144, 156);
--color--material--blue-gray--500: rgb(96, 125, 139);
--color--material--blue-gray--600: rgb(84, 110, 122);
--color--material--blue-gray--700: rgb(69, 90, 100);
--color--material--blue-gray--800: rgb(55, 71, 79);
--color--material--blue-gray--900: rgb(38, 50, 56);
--color--material--blue-light--50: rgb(225, 245, 254);
--color--material--blue-light--100: rgb(179, 229, 252);
--color--material--blue-light--200: rgb(129, 212, 250);
--color--material--blue-light--300: rgb(79, 195, 247);
--color--material--blue-light--400: rgb(41, 182, 246);
--color--material--blue-light--500: rgb(3, 169, 244);
--color--material--blue-light--600: rgb(3, 155, 229);
--color--material--blue-light--700: rgb(2, 136, 209);
--color--material--blue-light--800: rgb(2, 119, 189);
--color--material--blue-light--900: rgb(1, 87, 155);
--color--material--blue-light--a100: rgb(128, 216, 255);
--color--material--blue-light--a200: rgb(64, 196, 255);
--color--material--blue-light--a400: rgb(0, 176, 255);
--color--material--blue-light--a700: rgb(0, 145, 234);
--color--material--purple--50: rgb(243, 229, 245);
--color--material--purple--100: rgb(225, 190, 231);
--color--material--purple--200: rgb(206, 147, 216);
--color--material--purple--300: rgb(186, 104, 200);
--color--material--purple--400: rgb(171, 71, 188);
--color--material--purple--500: rgb(156, 39, 176);
--color--material--purple--600: rgb(142, 36, 170);
--color--material--purple--700: rgb(123, 31, 162);
--color--material--purple--800: rgb(106, 27, 154);
--color--material--purple--900: rgb(74, 20, 140);
--color--material--purple--a100: rgb(234, 128, 252);
--color--material--purple--a200: rgb(224, 64, 251);
--color--material--purple--a400: rgb(213, 0, 249);
--color--material--purple--a700: rgb(170, 0, 255);
--color--material--red--50: rgb(255, 235, 238);
--color--material--red--100: rgb(255, 205, 210);
--color--material--red--200: rgb(239, 154, 154);
--color--material--red--300: rgb(229, 115, 115);
--color--material--red--400: rgb(239, 83, 80);
--color--material--red--500: rgb(244, 67, 54);
--color--material--red--600: rgb(229, 57, 53);
--color--material--red--700: rgb(211, 47, 47);
--color--material--red--800: rgb(198, 40, 40);
--color--material--red--900: rgb(183, 28, 28);
--color--material--red--a100: rgb(255, 138, 128);
--color--material--red--a200: rgb(255, 82, 82);
--color--material--red--a400: rgb(255, 23, 68);
--color--material--red--a700: rgb(213, 0, 0);
--color--material--teal--50: rgb(224, 242, 241);
--color--material--teal--100: rgb(178, 223, 219);
--color--material--teal--200: rgb(128, 203, 196);
--color--material--teal--300: rgb(77, 182, 172);
--color--material--teal--400: rgb(38, 166, 154);
--color--material--teal--500: rgb(0, 150, 136);
--color--material--teal--600: rgb(0, 137, 123);
--color--material--teal--700: rgb(0, 121, 107);
--color--material--teal--800: rgb(0, 105, 92);
--color--material--teal--900: rgb(0, 77, 64);
--color--material--teal--a100: rgb(167, 255, 235);
--color--material--teal--a200: rgb(100, 255, 218);
--color--material--teal--a400: rgb(29, 233, 182);
--color--material--teal--a700: rgb(0, 191, 165);
--color--material--yellow--50: rgb(255, 253, 231);
--color--material--yellow--100: rgb(255, 249, 196);
--color--material--yellow--200: rgb(255, 245, 157);
--color--material--yellow--300: rgb(255, 241, 118);
--color--material--yellow--400: rgb(255, 238, 88);
--color--material--yellow--500: rgb(255, 235, 59);
--color--material--yellow--600: rgb(253, 216, 53);
--color--material--yellow--700: rgb(251, 192, 45);
--color--material--yellow--800: rgb(249, 168, 37);
--color--material--yellow--900: rgb(245, 127, 23);
--color--material--yellow--a100: rgb(255, 255, 141);
--color--material--yellow--a200: rgb(255, 255, 0);
--color--material--yellow--a400: rgb(255, 234, 0);
--color--material--yellow--a700: rgb(255, 214, 0);
--color--turquoise--500: rgb(51, 204, 204);
--color--bg: transparent;
--color--text: var(--color--turquoise--500);
--color--layer--text: var(--color--material--blue-gray--400);
--color--key--bg: var(--color--material--blue-gray--50);
--color--key--border: white;
--color--key--text--tap: var(--color--text);
--color--key--text--shifted: var(--color--text);
--color--key--text--hold: var(--color--text);
--color--combo--bg: var(--color--material--blue-gray--100);
--color--combo--border: var(--color--combo--bg);
--color--combo--dendron: var(--color--combo--border);
--color--combo--text--tap: var(--color--material--blue-gray--800);
--color--combo--text--shifted: var(--color--material--blue-gray--400);
--color--combo--text--hold: var(--color--combo--text--tap);
--color--trans--bg: transparent;
--color--trans--border: var(--color--material--blue-gray--400);
--color--trans--text--tap: var(--color--trans--border);
--color--trans--text--shifted: var(--color--trans--text--tap);
--color--trans--text--hold: var(--color--trans--text--tap);
--color--none--bg: var(--color--trans--bg);
--color--none--border: var(--color--trans--border);
--color--none--text--tap: var(--color--trans--text--tap);
--color--none--text--shifted: var(--color--trans--text--shifted);
--color--none--text--hold: var(--color--trans--text--hold);
--color--ghost--bg: var(--color--trans--bg);
--color--ghost--border: var(--color--trans--border);
--color--ghost--text--tap: var(--color--trans--text--tap);
--color--ghost--text--shifted: var(--color--trans--text--shifted);
--color--ghost--text--hold: var(--color--trans--text--shifted);
/*
* ====================
* /End Theme Variables
* ====================
*/
font-family: SFMono-Regular, Consolas,Liberation Mono,monospace;
font-size: 24px;
font-kerning: normal;
text-rendering: optimizeLegibility;
fill: var(--color--text);
background-color: var(--color--bg);
background-image: var(--logo-path);
background-repeat: no-repeat;
background-position: var(--logo-position);
background-size: var(--logo-size) auto;
}
rect,
path {
shape-rendering: geometricPrecision;
}
text {
text-anchor: middle;
dominant-baseline: middle;
line-height: 1;
}
/* Layer labels */
text.label {
font-weight: bold;
font-size: 36px;
text-anchor: start;
paint-order: stroke;
fill: var(--color--layer--text);
translate: 100px 20px;
}
/* Keys */
rect.key,
rect.combo {
fill: var(--color--key--bg);
stroke: var(--color--key--border);
}
.tap {
fill: var(--color--key--text--tap);
}
.shifted,
.hold {
font-size: 16px;
text-anchor: middle;
}
.shifted {
dominant-baseline: hanging;
fill: var(--color--key--text--shifted);
}
.shifted.glyph {
}
.hold {
dominant-baseline: ideographic;
fill: var(--color--key--text--hold);
}
.hold.glyph {
}
/*
* Combos
*/
.combo {
--color--key--bg: var(--color--combo--bg);
--color--key--border: var(--color--combo--border);
--color--key--text--tap: var(--color--combo--text--tap);
--color--key--text--shifted: var(--color--combo--text--shifted);
--color--key--text--hold: var(--color--combo--text--hold);
}
rect.combo {
stroke-width: 0;
}
path.combo {
stroke-width: 1;
stroke: var(--color--combo--dendron);
fill: none;
}
.combo.tap {
font-size: 16px;
}
.combo.shifted {
font-size: 13px;
translate: -9px -2px;
}
.combo.shifted.glyph {
translate: -9px -3px;
}
.combo.hold {
font-size: 16px;
translate: 0 0;
}
/*
* Transparent, None, and Ghost Keys
*/
.trans,
.none,
.ghost {
opacity: 0.4;
}
.trans {
--color--key--bg: var(--color--trans--bg);
--color--key--border: var(--color--trans--border);
--color--key--text--tap: var(--color--trans--text--tap);
--color--key--text--shifted: var(--color--trans--text--shifted);
--color--key--text--hold: var(--color--trans--text--hold);
}
.none {
--color--key--bg: var(--color--none--bg);
--color--key--border: var(--color--none--border);
--color--key--text--tap: var(--color--none--text--tap);
--color--key--text--shifted: var(--color--none--text--shifted);
--color--key--text--hold: var(--color--none--text--hold);
}
.ghost {
--color--key--bg: var(--color--ghost--bg);
--color--key--border: var(--color--ghost--border);
--color--key--text--tap: var(--color--ghost--text--tap);
--color--key--text--shifted: var(--color--ghost--text--shifted);
--color--key--text--hold: var(--color--ghost--text--hold);
}
/*
* Overrides
*/
/* Outer column + thumb keys */
.keypos-0,
.keypos-11,
.keypos-12,
.keypos-23,
.keypos-24,
.keypos-35,
.keypos-36,
.keypos-37,
.keypos-38,
.keypos-39,
.keypos-40,
.keypos-41 {
--color--key--bg: var(--color--material--red--100);
--color--key--border: var(--color--material--blue-gray--50);
}
.keypos-12 {
--color--key--bg: var(--color--material--red--300);
--color--key--border: var(--color--material--red--200);
--color--key--text--shifted: var(--color--key--text--tap);
--color--key--text--hold: var(--color--key--text--tap);
}
.keypos-23 {
--color--key--bg: var(--color--material--teal--200);
--color--key--border: var(--color--material--teal--100);
}
Loading

0 comments on commit 7cd5508

Please sign in to comment.