Skip to content

Commit

Permalink
config
Browse files Browse the repository at this point in the history
  • Loading branch information
@alinelena
alinelena committed Oct 21, 2024
1 parent a1c6f83 commit fe612e5
Showing 1 changed file with 268 additions and 42 deletions.
310 changes: 268 additions & 42 deletions keymap-drawer/config.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -613,77 +613,303 @@ draw_config:
glyphs: {}
# Custom CSS
svg_style: |
/* font and background color specifications */
svg {
font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
font-size: 14px;
font-kerning: normal;
text-rendering: optimizeLegibility;
fill: #24292e;
}
/* default key styling */
rect {
fill: #f6f8fa;
stroke: #c9cccf;
stroke-width: 1;
}
/* color accent for combo boxes */
rect.combo {
fill: #cdf;
/* inherit to force styles through use tags */
/* a lot lifted from https://github.com/minusfive/zmk-config */
svg path {
fill: inherit;
}
/* color accent for held keys */
rect.held, rect.combo.held {
fill: #fdd;
/* 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;
*/
}
/* color accent for ghost (optional) keys */
rect.ghost, rect.combo.ghost {
fill: #ddd;
rect,
path {
shape-rendering: geometricPrecision;
}
text {
text-anchor: middle;
dominant-baseline: middle;
line-height: 1;
}
/* styling for layer labels */
/* Layer labels */
text.label {
font-weight: bold;
font-size: 36px;
text-anchor: start;
stroke: white;
stroke-width: 2;
paint-order: stroke;
fill: var(--color--layer--text);
translate: 100px 20px;
}
/* styling for combo tap, and key hold/shifted label text */
text.combo, text.hold, text.shifted {
font-size: 11px;
}
text.hold {
/* Keys */
rect.key{
fill: var(--color--key--bg);
stroke: var(--color--key--border);
}
rect.combo {
fill: var(--color--material--yellow-100);
stroke: var(--color--key--border);
}
.tap {
fill: var(--color--key--text--tap);
}
.shifted,
.hold {
font-size: 16px;
text-anchor: middle;
dominant-baseline: auto;
}
text.shifted {
text-anchor: middle;
.shifted {
dominant-baseline: hanging;
fill: var(--color--key--text--shifted);
}
.shifted.glyph {
}
/* styling for hold/shifted label text in combo box */
text.combo.hold, text.combo.shifted {
font-size: 8px;
.hold {
dominant-baseline: ideographic;
fill: var(--color--key--text--hold);
}
.hold.glyph {
}
/* styling for combo dendrons */
path {
/*
* 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: gray;
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;
}
.rect.hold {
font-size: 16px;
translate: 0 0;
fill: var(--color-material--red--100);
}
/*
* Transparent, None, and Ghost Keys
*/
.trans,
.none,
.ghost {
opacity: 0.7;
}
.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);
}

0 comments on commit fe612e5

Please sign in to comment.