Replace SCSS variables with custom CSS variables

Author: otacke

src/styles/colors.scss

@@ -1,5 +1,3 @@
-@import "./colors";
-
 html {
   box-sizing: border-box;
 }
@@ -14,8 +12,38 @@ html {
 // }
 
 .h5p-boilerplate-snordian {
-  background-color: $color-background;
-  color: $color-text;
+  /* Common colors */
+  --color-background: #fff;
+  --color-text: #4c4452;
+  --color-text-dark: var(--color-text);
+  --color-text-light: #fff;
+
+  /* Disabled color, e.g. for buttons */
+  --color-disabled: rgb(128 128 128 / 95%);
+
+  /* Hint box, e.g. for when no content is set */
+  --color-hint-message-background: #f5e8d5;
+  --color-hint-message-border: #ed5;
+  --color-hint-message-text: #9e5c16;
+
+  /* Primary color with common gradients */
+  --color-primary: rgb(26, 115, 217);
+  --color-primary-5: rgb(26 115 217 / 5%);
+  --color-primary-10: rgb(26 115 217 / 10%);
+  --color-primary-15: rgb(26 115 217 / 15%);
+  --color-primary-30: rgb(26 115 217 / 30%);
+  --color-primary-50: rgb(26 115 217 / 50%);
+  --color-primary-70: rgb(26 115 217 / 70%);
+  --color-primary-90: rgb(26 115 217 / 90%);
+  --color-primary-95: rgb(26 115 217 / 95%);
+
+  /* Commonly used by H5P Group */
+  --color-joubelui-button: #1a73d9;
+  --color-joubelui-button-hover: #1356a3;
+  --color-joubelui-button-active: #104888;
+
+  background-color: var(--color-background);
+  color: var(--color-text);
   width: 100%;
 
   .h5p-boilerplate-snordian-main {