From dc3edbc26c28205b5ccf697ff3ef2acd001e1a5d Mon Sep 17 00:00:00 2001 From: Cem Keylan Date: Tue, 2 Feb 2021 02:37:30 +0300 Subject: initial commit --- sass/colors.scss | 68 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 68 insertions(+) create mode 100644 sass/colors.scss (limited to 'sass/colors.scss') 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; -- cgit v1.2.3