From cd726049a17176d2f2ee468f766686f9d5e6370a Mon Sep 17 00:00:00 2001
From: Matthias Metelka <62722460+kleinerpirat@users.noreply.github.com>
Date: Wed, 31 Aug 2022 21:19:53 +0200
Subject: [PATCH] Return CSS var by default and add palette-of function for raw
 value

---
 sass/_functions.scss |  2 +-
 sass/_vars.scss      | 15 +++++++++------
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/sass/_functions.scss b/sass/_functions.scss
index bd1affb67..df98ad002 100644
--- a/sass/_functions.scss
+++ b/sass/_functions.scss
@@ -26,7 +26,7 @@
     @return $map;
 }
 
-@function get-var-from-map($map, $keyword, $theme, $keys: ()) {
+@function get-value-from-map($map, $keyword, $theme, $keys: ()) {
     $i: str-index($keyword, "-");
 
     @if $i {
diff --git a/sass/_vars.scss b/sass/_vars.scss
index 5f2b4c392..1956ff378 100644
--- a/sass/_vars.scss
+++ b/sass/_vars.scss
@@ -174,14 +174,17 @@ $vars: (
     ),
 );
 
-@function color($keyword, $theme: default) {
-    $colors: map.get($vars, colors);
-    @return get-var-from-map($colors, $keyword, $theme);
+@function color($keyword) {
+    @return var(--#{$keyword});
 }
 
-@function prop($keyword, $theme: default) {
-    $props: map.get($vars, props);
-    @return get-var-from-map($props, $keyword, $theme);
+@function palette-of($keyword, $theme: default) {
+    $colors: map.get($vars, colors);
+    @return get-value-from-map($colors, $keyword, $theme);
+}
+
+@function prop($keyword) {
+    @return var(--#{$keyword});
 }
 
 :root {