Add shoelace theme

Add the default Alchemy Shoelace theme. Replaced all color with our colors. Add a custom properties file to store the new variables in it.

app/assets/stylesheets/alchemy/_custom-properties.scss

@@ -0,0 +1,61 @@
+:root {
+  // Sizes
+  --spacing-1: 4px;
+  --spacing-2: 8px;
+  --spacing-3: 12px;
+  --spacing-4: 16px;
+
+  // Font Families
+  --font-mono: Menlo, Monaco, "Bitstream Vera Sans Mono", "Lucida Console",
+    Terminal, monospace;
+  --font-sans: "Open Sans", "Lucida Grande", "Lucida Sans Unicode",
+    "Lucida Sans", Verdana, Tahoma, sans-serif;
+
+  // Font Size - at the moment only in Pixel, because the base font size is 12px
+  --font-size_small: 12px; // 0.875rem
+  --font-size_medium: 14px; // 1rem
+  --font-size_large: 16px; // 1.25 rem
+
+  // border-radius
+  --border-radius_medium: 3px;
+
+  // Colors
+  --color-blue_very_light: hsl(203deg, 32%, 85%);
+  --color-blue_light: hsl(212deg, 51%, 50%);
+  --color-blue_medium: hsl(212deg, 52%, 36%);
+  --color-blue_dark: hsl(212deg, 51%, 26%);
+
+  --color-green_very_light: hsl(88deg, 47%, 88%);
+  --color-green_light: hsl(127deg, 25%, 69%);
+  --color-green_medium: hsl(127deg, 25%, 48%);
+  --color-green_dark: hsl(128deg, 32%, 26%);
+
+  --color-yellow_light: hsl(60, 81%, 92%);
+  --color-yellow_medium: hsl(56, 68%, 85%);
+  --color-yellow_dark: hsl(56, 53%, 29%);
+
+  --color-orange_medium: hsl(42deg, 100%, 74%);
+  --color-orange_dark: hsl(28deg, 77%, 68%);
+  --color-orange_very_dark: hsl(28deg, 77%, 48%);
+
+  --color-red_very_light: hsl(360deg, 47%, 88%);
+  --color-red_light: hsl(360deg, 25%, 69%);
+  --color-red_medium: hsl(360deg, 51%, 42%);
+  --color-red_dark: hsl(360deg, 51%, 25%);
+
+  --color-grey-blue_light: hsl(224deg, 23%, 60%);
+  --color-grey-blue_medium: hsl(224deg, 23%, 40%);
+  --color-grey-blue_dark: hsl(224deg, 23%, 26%);
+
+  --color-grey_light: hsl(0deg, 0%, 97%);
+  --color-grey_medium: hsl(0deg, 0%, 94%);
+  --color-grey_dark: hsl(0deg, 0%, 40%);
+  --color-grey_very_dark: hsl(0deg, 0%, 20%);
+}
+
+.alchemy-light {
+  --outline-color: var(--color-orange_dark);
+
+  --tabs_indicator-color: var(--color-orange_dark);
+  --tabs_track-color: var(--color-grey_medium);
+}

app/assets/stylesheets/alchemy/admin.scss

@@ -6,6 +6,7 @@
 @import "fontawesome/fontawesome";
 @import "fontawesome/regular";
 @import "fontawesome/solid";
+@import "alchemy/custom-properties";
 @import "alchemy/defaults";
 @import "alchemy/archive";
 @import "alchemy/navigation";