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 {