feat: gradual shades of effort in the calendar component

Author: aradzie

package-lock.json

@@ -35,10 +35,6 @@ export const lightTheme = new CustomTheme()
   .set("--left-index-zone-color", Color.parse("#83A698"))
   .set("--right-index-zone-color", Color.parse("#D3869B"))
   .set("--thumb-zone-color", Color.parse("#D66354"))
-  .set("--effort-0-color", Color.parse("#D1DAF4"))
-  .set("--effort-1-color", Color.parse("#ADC5F8"))
-  .set("--effort-2-color", Color.parse("#8AAFFB"))
-  .set("--effort-3-color", Color.parse("#6699FF"))
   .set("--syntax-keyword", Color.parse("#56A1F4"))
   .set("--syntax-string", Color.parse("#72B172"))
   .set("--syntax-number", Color.parse("#763A9E"))
@@ -76,10 +72,6 @@ export const darkTheme = new CustomTheme()
   .set("--left-index-zone-color", Color.parse("#5B6D66"))
   .set("--right-index-zone-color", Color.parse("#835D67"))
   .set("--thumb-zone-color", Color.parse("#854B44"))
-  .set("--effort-0-color", Color.parse("#323948"))
-  .set("--effort-1-color", Color.parse("#303F5D"))
-  .set("--effort-2-color", Color.parse("#2F4471"))
-  .set("--effort-3-color", Color.parse("#2D4A86"))
   .set("--syntax-keyword", Color.parse("#5991CD"))
   .set("--syntax-string", Color.parse("#72B172"))
   .set("--syntax-number", Color.parse("#B281D3"))
@@ -117,10 +109,6 @@ export const grayTheme = new CustomTheme()
   .set("--left-index-zone-color", Color.parse("#8DA99D"))
   .set("--right-index-zone-color", Color.parse("#CD8FA0"))
   .set("--thumb-zone-color", Color.parse("#CF7367"))
-  .set("--effort-0-color", Color.parse("#A4AEC2"))
-  .set("--effort-1-color", Color.parse("#94A9D2"))
-  .set("--effort-2-color", Color.parse("#85A3E1"))
-  .set("--effort-3-color", Color.parse("#759EF0"))
   .set("--syntax-keyword", Color.parse("#56A1F4"))
   .set("--syntax-string", Color.parse("#72B172"))
   .set("--syntax-number", Color.parse("#763A9E"))
@@ -158,10 +146,6 @@ export const yellowTheme = new CustomTheme()
   .set("--left-index-zone-color", Color.parse("#A8B989"))
   .set("--right-index-zone-color", Color.parse("#E0A38B"))
   .set("--thumb-zone-color", Color.parse("#E28A59"))
-  .set("--effort-0-color", Color.parse("#E5C88C"))
-  .set("--effort-1-color", Color.parse("#CAAAB3"))
-  .set("--effort-2-color", Color.parse("#B08CD9"))
-  .set("--effort-3-color", Color.parse("#956EFF"))
   .set("--syntax-keyword", Color.parse("#56A1F4"))
   .set("--syntax-string", Color.parse("#72B172"))
   .set("--syntax-number", Color.parse("#763A9E"))
@@ -199,10 +183,6 @@ export const gardenTheme = new CustomTheme()
   .set("--left-index-zone-color", Color.parse("#83A698"))
   .set("--right-index-zone-color", Color.parse("#D3869B"))
   .set("--thumb-zone-color", Color.parse("#D66354"))
-  .set("--effort-0-color", Color.parse("#B4CEBB"))
-  .set("--effort-1-color", Color.parse("#9ABDD2"))
-  .set("--effort-2-color", Color.parse("#80ABE8"))
-  .set("--effort-3-color", Color.parse("#6699FF"))
   .set("--syntax-keyword", Color.parse("#56A1F4"))
   .set("--syntax-string", Color.parse("#72B172"))
   .set("--syntax-number", Color.parse("#763A9E"))
@@ -240,10 +220,6 @@ export const coffeeTheme = new CustomTheme()
   .set("--left-index-zone-color", Color.parse("#9BB4A5"))
   .set("--right-index-zone-color", Color.parse("#DB9AA7"))
   .set("--thumb-zone-color", Color.parse("#DD7E6E"))
-  .set("--effort-0-color", Color.parse("#D9D9DD"))
-  .set("--effort-1-color", Color.parse("#B8C5E4"))
-  .set("--effort-2-color", Color.parse("#96B2EA"))
-  .set("--effort-3-color", Color.parse("#759EF0"))
   .set("--syntax-keyword", Color.parse("#56A1F4"))
   .set("--syntax-string", Color.parse("#72B172"))
   .set("--syntax-number", Color.parse("#763A9E"))
@@ -281,10 +257,6 @@ export const chocolateTheme = new CustomTheme()
   .set("--left-index-zone-color", Color.parse("#7C9487"))
   .set("--right-index-zone-color", Color.parse("#BC7A89"))
   .set("--thumb-zone-color", Color.parse("#BE5E51"))
-  .set("--effort-0-color", Color.parse("#655F6E"))
-  .set("--effort-1-color", Color.parse("#6B749A"))
-  .set("--effort-2-color", Color.parse("#7089C5"))
-  .set("--effort-3-color", Color.parse("#759EF0"))
   .set("--syntax-keyword", Color.parse("#56A1F4"))
   .set("--syntax-string", Color.parse("#72B172"))
   .set("--syntax-number", Color.parse("#763A9E"))
@@ -322,10 +294,6 @@ export const honeyTheme = new CustomTheme()
   .set("--left-index-zone-color", Color.parse("#A8AE6A"))
   .set("--right-index-zone-color", Color.parse("#E0976D"))
   .set("--thumb-zone-color", Color.parse("#E27F3B"))
-  .set("--effort-0-color", Color.parse("#E5AB40"))
-  .set("--effort-1-color", Color.parse("#CA9780"))
-  .set("--effort-2-color", Color.parse("#B082BF"))
-  .set("--effort-3-color", Color.parse("#956EFF"))
   .set("--syntax-keyword", Color.parse("#56A1F4"))
   .set("--syntax-string", Color.parse("#72B172"))
   .set("--syntax-number", Color.parse("#763A9E"))
@@ -363,10 +331,6 @@ export const customTheme = new CustomTheme()
   .set("--left-index-zone-color", Color.parse("#83A698"))
   .set("--right-index-zone-color", Color.parse("#D3869B"))
   .set("--thumb-zone-color", Color.parse("#D66354"))
-  .set("--effort-0-color", Color.parse("#A0ADC6"))
-  .set("--effort-1-color", Color.parse("#8DA6D9"))
-  .set("--effort-2-color", Color.parse("#79A0EC"))
-  .set("--effort-3-color", Color.parse("#6699FF"))
   .set("--syntax-keyword", Color.parse("#56A1F4"))
   .set("--syntax-string", Color.parse("#72B172"))
   .set("--syntax-number", Color.parse("#763A9E"))

packages/keybr-theme-designer/lib/themes/themes.ts

@@ -40,13 +40,6 @@
   --thumb-zone-color: mix(@primary, @zone-thumb, @mix);
 }
 
-.use-effort-colors(@primary, @effort) {
-  --effort-0-color: mix(@primary, @effort, 75);
-  --effort-1-color: mix(@primary, @effort, 50);
-  --effort-2-color: mix(@primary, @effort, 25);
-  --effort-3-color: mix(@primary, @effort, 0);
-}
-
 .use-syntax-colors() {
   --syntax-keyword: #56a1f4;
   --syntax-string: #72b172;

packages/keybr-themes/lib/themes/palettes.less

@@ -28,10 +28,10 @@
   --shadow-color: #00000044;
   --slow-key-color: #cc0000;
   --fast-key-color: #60d788;
+  --effort-color: #6699ff;
   .use-textinput-colors(@primary, @secondary, @error);
   .use-keyboard-colors(@primary, 0);
   .use-chart-colors(@primary, 0);
-  .use-effort-colors(@primary, #6699ff);
   .use-syntax-colors();
 }
 

packages/keybr-themes/lib/themes/theme-1-light.less

@@ -28,10 +28,10 @@
   --shadow-color: #00000088;
   --slow-key-color: #8c1818;
   --fast-key-color: #448154;
+  --effort-color: #2d4a86;
   .use-textinput-colors(@primary, @secondary, @error);
   .use-keyboard-colors(@primary, 50);
   .use-chart-colors(@primary, 50);
-  .use-effort-colors(@primary, #2d4a86);
   --syntax-keyword: #5991cd;
   --syntax-string: #72b172;
   --syntax-number: #b281d3;

packages/keybr-themes/lib/themes/theme-2-dark.less

@@ -28,9 +28,9 @@ html[data-color="gray"] {
   --shadow-color: #00000044;
   --slow-key-color: #cf5f5f;
   --fast-key-color: #6fa882;
+  --effort-color: #759ef0;
   .use-textinput-colors(@primary, @secondary, @error);
   .use-keyboard-colors(@primary, 20);
   .use-chart-colors(@primary, 20);
-  .use-effort-colors(@primary, #759ef0);
   .use-syntax-colors();
 }

packages/keybr-themes/lib/themes/theme-3-gray.less

@@ -28,9 +28,9 @@ html[data-color="yellow"] {
   --shadow-color: #00000044;
   --slow-key-color: #cc8b00;
   --fast-key-color: #96d760;
+  --effort-color: #956eff;
   .use-textinput-colors(@primary, @secondary, @error);
   .use-keyboard-colors(@primary, 30);
   .use-chart-colors(@primary, 30);
-  .use-effort-colors(@primary, #956eff);
   .use-syntax-colors();
 }

packages/keybr-themes/lib/themes/theme-4-yellow.less

@@ -28,10 +28,10 @@ html[data-color="garden"] {
   --shadow-color: #00000044;
   --slow-key-color: #cc0000;
   --fast-key-color: #60d788;
+  --effort-color: #6699ff;
   .use-textinput-colors(@primary, @secondary, @error);
   .use-keyboard-colors(@primary, 0);
   .use-chart-colors(@primary, 0);
-  .use-effort-colors(@primary, #6699ff);
   .use-syntax-colors();
   --background-image: url(../../assets/bg-garden.svg);
   --Surface__box-shadow: 0 0.5rem 1rem var(--shadow-color);

packages/keybr-themes/lib/themes/theme-5-garden.less

@@ -28,10 +28,10 @@ html[data-color="coffee"] {
   --shadow-color: #00000044;
   --slow-key-color: #cf5f5f;
   --fast-key-color: #6fa882;
+  --effort-color: #759ef0;
   .use-textinput-colors(@primary, @secondary, @error);
   .use-keyboard-colors(@primary, 20);
   .use-chart-colors(@primary, 20);
-  .use-effort-colors(@primary, #759ef0);
   .use-syntax-colors();
   --background-image: url(../../assets/bg-coffee.svg);
   --Surface__box-shadow: 0 0.5rem 1rem var(--shadow-color);

packages/keybr-themes/lib/themes/theme-6-coffee.less

@@ -28,10 +28,10 @@ html[data-color="chocolate"] {
   --shadow-color: #00000044;
   --slow-key-color: #cf5f5f;
   --fast-key-color: #6fa882;
+  --effort-color: #759ef0;
   .use-textinput-colors(@primary, @secondary, @error);
   .use-keyboard-colors(@primary, 20);
   .use-chart-colors(@primary, 20);
-  .use-effort-colors(@primary, #759ef0);
   .use-syntax-colors();
   --background-image: url(../../assets/bg-chocolate.svg);
   --Surface__box-shadow: 0 0.5rem 1rem var(--shadow-color);

packages/keybr-themes/lib/themes/theme-7-chocolate.less

@@ -28,10 +28,10 @@ html[data-color="honey"] {
   --shadow-color: #00000044;
   --slow-key-color: #cc8b00;
   --fast-key-color: #8cc64e;
+  --effort-color: #956eff;
   .use-textinput-colors(@primary, @secondary, @error);
   .use-keyboard-colors(@primary, 30);
   .use-chart-colors(@primary, 30);
-  .use-effort-colors(@primary, #956eff);
   .use-syntax-colors();
   --background-image: url(../../assets/bg-honey.svg);
   --Surface__box-shadow: none;

packages/keybr-themes/lib/themes/theme-8-honey.less

@@ -28,9 +28,9 @@ html[data-color="custom"] {
   --shadow-color: #00000044;
   --slow-key-color: #cc0000;
   --fast-key-color: #60d788;
+  --effort-color: #6699ff;
   .use-textinput-colors(@primary, @secondary, @error);
   .use-keyboard-colors(@primary, 0);
   .use-chart-colors(@primary, 0);
-  .use-effort-colors(@primary, #6699ff);
   .use-syntax-colors();
 }

packages/keybr-themes/lib/themes/theme-99-custom.less

@@ -88,16 +88,13 @@ export const themePropsMap = {
   "--textinput--miss__color": colorType,
   "--slow-key-color": colorType,
   "--fast-key-color": colorType,
+  "--effort-color": colorType,
   "--pinky-zone-color": colorType,
   "--ring-zone-color": colorType,
   "--middle-zone-color": colorType,
   "--left-index-zone-color": colorType,
   "--right-index-zone-color": colorType,
   "--thumb-zone-color": colorType,
-  "--effort-0-color": colorType,
-  "--effort-1-color": colorType,
-  "--effort-2-color": colorType,
-  "--effort-3-color": colorType,
   "--syntax-keyword": colorType,
   "--syntax-string": colorType,
   "--syntax-number": colorType,

packages/keybr-themes/lib/themes/theme-props.ts

@@ -43,8 +43,7 @@
 
   --Calendar-caption__background-color: var(--primary-d1);
   --Calendar-headerCell__background-color: var(--primary-d2);
-  --Calendar-cell__color: var(--secondary);
-  --Calendar-cell--z__background-color: var(--primary-l1);
+  --Calendar-cell--background-color: var(--primary-l1);
 
   --Player__background-color: var(--primary);
   --Player--me__background-color: var(--primary-d1);

packages/keybr-themes/lib/themes/theme.less

@@ -1,79 +1,38 @@
-.wrapper {
+.root {
   display: flex;
   flex-wrap: wrap;
-  align-content: flex-start;
-  align-items: flex-start;
-  justify-content: flex-start;
-  margin-inline: -0.5rem;
-  margin-block: -0.5rem;
+  gap: 1rem;
+  justify-content: center;
 }
 
 .calendar {
-  margin-inline: 0.5rem;
-  margin-block: 0.5rem;
   border: var(--separator-border);
-
-  table {
-    table-layout: fixed;
-
-    caption {
-      font-weight: normal;
-      font-style: normal;
-      text-align: center;
-    }
-
-    th,
-    td {
-      vertical-align: middle;
-      inline-size: 1.5rem;
-      block-size: 1.5rem;
-      font-size: 0.9rem;
-      text-align: center;
-    }
-  }
 }
 
 .table {
-  /* Empty. */
+  table-layout: fixed;
+  border-collapse: collapse;
 }
 
 .caption {
   background-color: var(--Calendar-caption__background-color);
+  text-align: center;
 }
 
-.headerCell {
-  background-color: var(--Calendar-headerCell__background-color);
-  font-weight: bold;
-  font-style: normal;
-  cursor: default;
-}
-
+.headerCell,
 .cell {
-  font-weight: normal;
-  font-style: normal;
+  vertical-align: middle;
+  inline-size: 1.5rem;
+  block-size: 1.5rem;
+  font-size: 0.75rem;
+  text-align: center;
   cursor: default;
 }
 
-.cell_s0 {
-  color: var(--Calendar-cell__color);
-  background-color: var(--effort-0-color);
-}
-
-.cell_s1 {
-  color: var(--Calendar-cell__color);
-  background-color: var(--effort-1-color);
-}
-
-.cell_s2 {
-  color: var(--Calendar-cell__color);
-  background-color: var(--effort-2-color);
-}
-
-.cell_s3 {
-  color: var(--Calendar-cell__color);
-  background-color: var(--effort-3-color);
+.headerCell {
+  background-color: var(--Calendar-headerCell__background-color);
 }
 
-.cell_z {
-  background-color: var(--Calendar-cell--z__background-color);
+.cell {
+  background-color: var(--Calendar-cell--background-color);
 }