Merge pull request #507 from no-chris/handle-themes

Handle ChordMark themes
no-chris · Dec 18, 2021 · 83b3c4d · 83b3c4d
2 parents 647aaf5 + 0e593c6
commit 83b3c4d
Show file tree

Hide file tree

Showing 69 changed files with 1,183 additions and 1,455 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,5 @@
+coverage
+node_modules
+build
+SLOC
+package.json
diff --git a/package.json b/package.json
@@ -17,7 +17,7 @@
     "css-loader": "^6.5.1",
     "css-minimizer-webpack-plugin": "^3.1.1",
     "deep-freeze": "0.0.1",
-    "eslint": "^8.2.0",
+    "eslint": "^8.5.0",
     "eslint-plugin-import": "^2.23.4",
     "eslint-plugin-jam3": "^0.2.3",
     "eslint-plugin-no-unsanitized": "^4.0.0",

diff --git a/packages/chord-charts-studio/.prettierignore b/packages/chord-charts-studio/.prettierignore
@@ -2,3 +2,4 @@ coverage
 node_modules
 build
 SLOC
+package.json
diff --git a/packages/chord-charts-studio/SLOC b/packages/chord-charts-studio/SLOC
@@ -2,14 +2,14 @@ Source code:
 
 ---------- Result ------------
 
-            Physical :  6290
-              Source :  5206
-             Comment :  127
- Single-line comment :  59
+            Physical :  6319
+              Source :  5227
+             Comment :  128
+ Single-line comment :  60
        Block comment :  68
-               Mixed :  5
+               Mixed :  6
  Empty block comment :  0
-               Empty :  962
+               Empty :  970
                To Do :  0
 
 Number of files read :  145
@@ -20,14 +20,14 @@ Tests:
 
 ---------- Result ------------
 
-            Physical :  7438
-              Source :  6126
+            Physical :  7403
+              Source :  6102
              Comment :  65
  Single-line comment :  58
        Block comment :  7
                Mixed :  8
  Empty block comment :  0
-               Empty :  1255
+               Empty :  1244
                To Do :  0
 
 Number of files read :  71
@@ -38,14 +38,14 @@ Total:
 
 ---------- Result ------------
 
-            Physical :  13728
-              Source :  11332
-             Comment :  192
- Single-line comment :  117
+            Physical :  13722
+              Source :  11329
+             Comment :  193
+ Single-line comment :  118
        Block comment :  75
-               Mixed :  13
+               Mixed :  14
  Empty block comment :  0
-               Empty :  2217
+               Empty :  2214
                To Do :  0
 
 Number of files read :  216

diff --git a/packages/chord-charts-studio/assets/icon_blackbg.png b/packages/chord-charts-studio/assets/icon_blackbg.png
diff --git a/packages/chord-charts-studio/assets/icon_whitebg.png b/packages/chord-charts-studio/assets/icon_whitebg.png
diff --git a/packages/chord-charts-studio/build/33725b71b01853fb41bf.png b/packages/chord-charts-studio/build/33725b71b01853fb41bf.png
diff --git a/packages/chord-charts-studio/build/79d473963b244164d1a3.png b/packages/chord-charts-studio/build/79d473963b244164d1a3.png
diff --git a/packages/chord-charts-studio/build/css/main.8f6ad30499a2a9bc845a.css b/packages/chord-charts-studio/build/css/main.8f6ad30499a2a9bc845a.css
diff --git a/packages/chord-charts-studio/build/css/main.8f6ad30499a2a9bc845a.css.map b/packages/chord-charts-studio/build/css/main.8f6ad30499a2a9bc845a.css.map
diff --git a/packages/chord-charts-studio/build/css/main.e57b2f1a1a4debfe1406.css b/packages/chord-charts-studio/build/css/main.e57b2f1a1a4debfe1406.css
diff --git a/packages/chord-charts-studio/build/css/main.e57b2f1a1a4debfe1406.css.map b/packages/chord-charts-studio/build/css/main.e57b2f1a1a4debfe1406.css.map
diff --git a/packages/chord-charts-studio/build/index.html b/packages/chord-charts-studio/build/index.html
@@ -2,4 +2,4 @@
         function gtag(){dataLayer.push(arguments);}
         gtag('js', new Date());
 
-        gtag('config', 'G-EGKBT2J600');</script><link rel="icon" href="favicon.ico"><script defer="defer" src="vendors.e57b2f1a1a4debfe1406.js"></script><script defer="defer" src="main.e57b2f1a1a4debfe1406.js"></script><link href="css/main.e57b2f1a1a4debfe1406.css" rel="stylesheet"></head><body><div id="app" class="theme-dark"></div></body></html>
+        gtag('config', 'G-EGKBT2J600');</script><link rel="icon" href="favicon.ico"><script defer="defer" src="vendors.8f6ad30499a2a9bc845a.js"></script><script defer="defer" src="main.8f6ad30499a2a9bc845a.js"></script><link href="css/main.8f6ad30499a2a9bc845a.css" rel="stylesheet"></head><body><div id="app" class="theme-dark"></div></body></html>
diff --git a/packages/chord-charts-studio/build/main.8f6ad30499a2a9bc845a.js b/packages/chord-charts-studio/build/main.8f6ad30499a2a9bc845a.js
diff --git a/packages/chord-charts-studio/build/main.8f6ad30499a2a9bc845a.js.map b/packages/chord-charts-studio/build/main.8f6ad30499a2a9bc845a.js.map
diff --git a/packages/chord-charts-studio/build/main.e57b2f1a1a4debfe1406.js b/packages/chord-charts-studio/build/main.e57b2f1a1a4debfe1406.js
diff --git a/packages/chord-charts-studio/build/main.e57b2f1a1a4debfe1406.js.map b/packages/chord-charts-studio/build/main.e57b2f1a1a4debfe1406.js.map
diff --git a/packages/chord-charts-studio/build/vendors.8f6ad30499a2a9bc845a.js b/packages/chord-charts-studio/build/vendors.8f6ad30499a2a9bc845a.js
diff --git a/...ndors.e57b2f1a1a4debfe1406.js.LICENSE.txt → ...ndors.8f6ad30499a2a9bc845a.js.LICENSE.txt b/...ndors.e57b2f1a1a4debfe1406.js.LICENSE.txt → ...ndors.8f6ad30499a2a9bc845a.js.LICENSE.txt
diff --git a/packages/chord-charts-studio/build/vendors.8f6ad30499a2a9bc845a.js.map b/packages/chord-charts-studio/build/vendors.8f6ad30499a2a9bc845a.js.map
diff --git a/packages/chord-charts-studio/build/vendors.e57b2f1a1a4debfe1406.js b/packages/chord-charts-studio/build/vendors.e57b2f1a1a4debfe1406.js
diff --git a/packages/chord-charts-studio/build/vendors.e57b2f1a1a4debfe1406.js.map b/packages/chord-charts-studio/build/vendors.e57b2f1a1a4debfe1406.js.map
diff --git a/packages/chord-charts-studio/package.json b/packages/chord-charts-studio/package.json
@@ -23,11 +23,12 @@
 		"@testing-library/user-event": "^13.5.0"
 	},
 	"dependencies": {
-		"chord-mark": "^0.8.0",
-		"chord-mark-2-chordpro": "^0.8.0",
+		"chord-mark": "^0.9.0",
+		"chord-mark-2-chordpro": "^0.9.0",
+		"chord-mark-themes": "^0.9.1",
 		"chordsheetjs": "^5.1.2",
 		"combine-section-reducers": "^1.0.6",
-		"core-js": "^3.15.2",
+		"core-js": "^3.20.0",
 		"dompurify": "^2.2.9",
 		"file-saver": "^2.0.5",
 		"filesize": "^8.0.6",

diff --git a/packages/chord-charts-studio/scss/_base.scss b/packages/chord-charts-studio/scss/_base.scss
@@ -1,3 +1,14 @@
+@import 'abstract';
+
+$themes: (
+	light: (),
+	dark: (
+		link1: cv(dark-accent),
+		link1-hover: cv(dark-accent, light10),
+		link1-active: cv(dark-accent, light20),
+	),
+);
+
 html {
 	/* switching to border-box model for all elements */
 	box-sizing: border-box;
@@ -14,3 +25,21 @@ body {
 	font-family: $font-family-base;
 	line-height: $line-height-base;
 }
+
+.link1 {
+	@include themify($themes) {
+		color: themed('link1');
+	}
+
+	&:hover {
+		@include themify($themes) {
+			color: themed('link1-hover');
+		}
+	}
+
+	&:active {
+		@include themify($themes) {
+			color: themed('link1-active');
+		}
+	}
+}
diff --git a/packages/chord-charts-studio/scss/abstract/_typography.scss b/packages/chord-charts-studio/scss/abstract/_typography.scss
@@ -1,5 +1,12 @@
 @use 'sass:math';
 
+// ChordMark
+
+$cmFontStack: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+	'Courier New', monospace;
+$cmFontSize: 13px;
+$cmLineHeight: 1.65em;
+
 // Source: Knacss
 
 // Font families