From ef23c7c1f6e69c7a7f00dbcb363371c9c6f7ffcc Mon Sep 17 00:00:00 2001
From: codecalm <codecalm@gmail.com>
Date: Wed, 23 Jul 2025 20:15:23 +0200
Subject: [PATCH] Refactor SCSS imports

---
 core/scss/mixins/_functions.scss |  7 +++++++
 preview/scss/_config.scss        |  9 +++++++++
 preview/scss/_highlight.scss     | 21 ++++++++-------------
 preview/scss/demo.scss           | 16 ++++++----------
 shared/data/sri.json             |  4 ++--
 5 files changed, 32 insertions(+), 25 deletions(-)
 create mode 100644 preview/scss/_config.scss

diff --git a/core/scss/mixins/_functions.scss b/core/scss/mixins/_functions.scss
index 03749ae87..5eafe242c 100644
--- a/core/scss/mixins/_functions.scss
+++ b/core/scss/mixins/_functions.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 @function theme-color-lighter($color, $background: #fff) {
   @return mix($color, $background, 10%);
 }
@@ -93,4 +95,9 @@
   $svg: str-replace($svg, '<svg', '<svg xmlns="http://www.w3.org/2000/svg"');
 
   @return url('data:image/svg+xml;charset=UTF-8,#{$svg}');
+}
+
+
+@function to-rgb($value) {
+  @return color.red($value), color.green($value), color.blue($value);
 }
\ No newline at end of file
diff --git a/preview/scss/_config.scss b/preview/scss/_config.scss
new file mode 100644
index 000000000..04df202e4
--- /dev/null
+++ b/preview/scss/_config.scss
@@ -0,0 +1,9 @@
+$prefix: "tblr-";
+$demo-icon-size: 4rem;
+
+$color-highlight-green: #b5f4a5;
+$color-highlight-yellow: #ffe484;
+$color-highlight-purple: #d9a9ff;
+$color-highlight-red: #ff8383;
+$color-highlight-blue: #93ddfd;
+$color-highlight-gray: #a0aec0;
\ No newline at end of file
diff --git a/preview/scss/_highlight.scss b/preview/scss/_highlight.scss
index f09e7ffb7..2350db2dd 100644
--- a/preview/scss/_highlight.scss
+++ b/preview/scss/_highlight.scss
@@ -1,16 +1,11 @@
-$color-highlight-green: #b5f4a5;
-$color-highlight-yellow: #ffe484;
-$color-highlight-purple: #d9a9ff;
-$color-highlight-red: #ff8383;
-$color-highlight-blue: #93ddfd;
-$color-highlight-gray: #a0aec0;
+@use "config";
 
 pre.highlight,
 .highlight pre {
   max-height: 30rem;
   margin: 1.5rem 0;
   overflow: auto;
-  border-radius: var(--#{$prefix}border-radius);
+  border-radius: var(--#{config.$prefix}border-radius);
 }
 
 .highlight {
@@ -21,10 +16,10 @@ pre.highlight,
     padding: 0 !important;
   }
 
-  .c, .c1 { color: $color-highlight-gray; }
-  .nt, .nc, .nx { color: $color-highlight-red; }
-  .na, .p { color: $color-highlight-yellow; }
-  .s, .dl, .s2 { color: $color-highlight-green; }
-  .k { color: $color-highlight-blue; }
-  .s1, .mi { color: $color-highlight-purple; }
+  .c, .c1 { color: config.$color-highlight-gray; }
+  .nt, .nc, .nx { color: config.$color-highlight-red; }
+  .na, .p { color: config.$color-highlight-yellow; }
+  .s, .dl, .s2 { color: config.$color-highlight-green; }
+  .k { color: config.$color-highlight-blue; }
+  .s1, .mi { color: config.$color-highlight-purple; }
 }
diff --git a/preview/scss/demo.scss b/preview/scss/demo.scss
index 645e48aad..13f6c2d57 100644
--- a/preview/scss/demo.scss
+++ b/preview/scss/demo.scss
@@ -1,6 +1,5 @@
-$prefix: "tblr-";
-
-@import "highlight";
+@use "config";
+@use "highlight";
 
 .dropdown-menu-demo {
   display: inline-block;
@@ -45,7 +44,6 @@ $prefix: "tblr-";
   }
 }
 
-$demo-icon-size: 4rem;
 .demo-icons-list {
   display: flex;
   flex-wrap: wrap;
@@ -54,7 +52,7 @@ $demo-icon-size: 4rem;
   list-style: none;
 
   > * {
-    flex: 1 0 $demo-icon-size;
+    flex: 1 0 config.$demo-icon-size;
   }
 }
 
@@ -70,10 +68,8 @@ $demo-icon-size: 4rem;
   aspect-ratio: 1;
   text-align: center;
   padding: 0.5rem;
-  border-right: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
-    var(--#{$prefix}border-color);
-  border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
-    var(--#{$prefix}border-color);
+  border-right: var(--#{config.$prefix}border-width) var(--#{config.$prefix}border-style) var(--#{config.$prefix}border-color);
+  border-bottom: var(--#{config.$prefix}border-width) var(--#{config.$prefix}border-style) var(--#{config.$prefix}border-color);
   color: inherit;
   cursor: pointer;
 
@@ -86,4 +82,4 @@ $demo-icon-size: 4rem;
   &:hover {
     text-decoration: none;
   }
-}
\ No newline at end of file
+}
diff --git a/shared/data/sri.json b/shared/data/sri.json
index 1a1e86289..b65054e9b 100644
--- a/shared/data/sri.json
+++ b/shared/data/sri.json
@@ -1,6 +1,6 @@
 {
-  "css": "sha384-kz+I4+mczbNiZfLAJMxOlJaZmnbRYhARHNkR2k6tal4gz7OL33/0puDD3SvkiNX9",
-  "css-rtl": "sha384-oBsMN4t4hqHp2yPeHCvYqwzbzTIQj7tW4JvGHxhmk14iAV8n8UWc8nl5PjfN0Cmp",
+  "css": "sha384-An/wz3SdsHjVEyb1y+Q7MwPz3YdJoVxmt+/CB0OdqSGBDnOWO+UL/hvgkrtlj4jo",
+  "css-rtl": "sha384-RprtnnPRNE70SYFqGqYumwyYBsm4TWkKMjpRIG83xjdXJHtahpr3eRKHB6xhq7X8",
   "css-flags": "sha384-kmvP0hkBXZ2hMSZlbvE1Q2HIXzPCQRL3ijUeqNiwaPd2nl2Aks+s3gW+V5fAHOX9",
   "css-flags-rtl": "sha384-Q/h6koANGclsGnwB8rvF8h84H54NKHDeNWFj6yiE4WLLEXyHcz+Zu6Afkh2ssYTC",
   "css-marketing": "sha384-4dAlYnPzCom9yeC/5++PFq2FG/szJRlUPsDSrjZ3EWP8IAzK7g7rrsnSfqrS67Se",