initial commit

1 files changed, 68 insertions, 0 deletions

diff --git a/sass/colors.scss b/sass/colors.scss
new file mode 100644
index 0000000..dc4eff9
--- /dev/null
+++ b/sass/colors.scss
@@ -0,0 +1,68 @@
+$colors: (
+    light: (
+        carbs-color-bg:    #F3F6F8,
+        carbs-color-fg:    #0A1E2B,
+        carbs-highlight:   #E9ECEE,
+        carbs-pink:        #BF6790,
+        carbs-purple:      #8C45D4,
+        carbs-blue:        #3F74A6,
+        carbs-blue-alt:    #3F41A6,
+        carbs-red:         #D32C2C,
+        carbs-grey:        #738B8B,
+        carbs-green:       #027A59,
+        carbs-orange:      #B45123,
+    ),
+    dark: (
+        carbs-color-bg:    #0A1E2B,
+        carbs-color-fg:    #F3F6F8,
+        carbs-highlight:   #0A2830,
+        carbs-pink:        #BF6790,
+        carbs-purple:      #A6A6D2,
+        carbs-blue:        #6790BF,
+        carbs-blue-alt:    #67BCBF,
+        carbs-red:         #C34266,
+        carbs-grey:        #686868,
+        carbs-green:       #67BF96,
+        carbs-orange:      #F47A00,
+    ),
+);
+
+@function compose-color-variable($color-key) {
+    @return '--color-#{$color-key}';
+}
+
+@function color-get($theme, $color) {
+    $result: #{map-get(map-get($colors, $theme), $color)};
+    @if $result != "" {
+        @return $result;
+    }
+    @else { @error "Unknown theme/color combination: '#{$theme}' '#{$color}'" }
+}
+
+@mixin theme-adjust-hue($key, $color-name, $light-hue, $dark-hue: $light-hue) {
+    #{$key}: #{adjust-hue(map-get(map-get($colors, 'light'), $color-name), $light-hue)};
+    @at-root @media (prefers-color-scheme: dark) {
+        & {
+            #{$key}: #{adjust-hue(map-get(map-get($colors, 'dark'), $color-name), $dark-hue)};
+        }
+    }
+}
+
+$carbs-color-fg:  var(--color-carbs-color-fg) !default;
+$carbs-color-bg:  var(--color-carbs-color-bg) !default;
+$carbs-highlight: var(--color-carbs-highlight) !default;
+$carbs-pink:      var(--color-carbs-pink) !default;
+$carbs-purple:    var(--color-carbs-purple) !default;
+$carbs-blue:      var(--color-carbs-blue) !default;
+$carbs-blue-alt:  var(--color-carbs-blue-alt) !default;
+$carbs-red:       var(--color-carbs-red) !default;
+$carbs-grey:      var(--color-carbs-grey) !default;
+$carbs-green:     var(--color-carbs-green) !default;
+$carbs-orange:    var(--color-carbs-orange) !default;
+
+$font-size: 16px;
+
+$font-text: 'Noto Sans', 'Open Sans', sans-serif;
+$primary: $carbs-pink;
+$link: $carbs-pink;
+$link-alt: $carbs-blue-alt;