From 3aff99e761a81ffaded403ce49e578b6b4534f5d Mon Sep 17 00:00:00 2001
From: Adarsh Pastakia <adarshpastakia@outlook.com>
Date: Sun, 25 Aug 2024 00:47:12 +0400
Subject: [PATCH] docs: rounding tool

---
 .storybook/addon-theme/register.tsx | 30 ++++++++++++++++++++++-------
 .storybook/preview.tsx              |  2 ++
 packages/core/css/reset/_theme.css  |  4 ++--
 3 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/.storybook/addon-theme/register.tsx b/.storybook/addon-theme/register.tsx
index 7ecdfa0..3c67536 100644
--- a/.storybook/addon-theme/register.tsx
+++ b/.storybook/addon-theme/register.tsx
@@ -42,8 +42,9 @@ enum TINT {
   SAND = "sand",
 }
 enum ROUNDING {
-  MINIMAL = "minimal",
+  SMALL = "sm",
   NORMAL = "normal",
+  MEDIUM = "md",
   FULL = "full",
 }
 
@@ -316,13 +317,13 @@ export const ThemeToggle = () => {
       />
 
       <IconButton
-        title="Rounding: Minimal"
-        active={rounding === ROUNDING.MINIMAL}
-        onClick={() => changeRounding(ROUNDING.MINIMAL)}
+        title="Rounding: Small"
+        active={rounding === ROUNDING.SMALL}
+        onClick={() => changeRounding(ROUNDING.SMALL)}
       >
         <div
           style={{
-            width: "1rem",
+            width: "1.5rem",
             height: "1rem",
             borderRadius: "2px",
             backgroundColor: "gray",
@@ -337,7 +338,7 @@ export const ThemeToggle = () => {
       >
         <div
           style={{
-            width: "1rem",
+            width: "1.5rem",
             height: "1rem",
             borderRadius: "4px",
             backgroundColor: "gray",
@@ -345,6 +346,21 @@ export const ThemeToggle = () => {
         />
       </IconButton>
 
+      <IconButton
+        title="Rounding: Medium"
+        active={rounding === ROUNDING.MEDIUM}
+        onClick={() => changeRounding(ROUNDING.MEDIUM)}
+      >
+        <div
+          style={{
+            width: "1.5rem",
+            height: "1rem",
+            borderRadius: "6px",
+            backgroundColor: "gray",
+          }}
+        />
+      </IconButton>
+
       <IconButton
         title="Rounding: Full"
         active={rounding === ROUNDING.FULL}
@@ -352,7 +368,7 @@ export const ThemeToggle = () => {
       >
         <div
           style={{
-            width: "1rem",
+            width: "1.5rem",
             height: "1rem",
             borderRadius: "8px",
             backgroundColor: "gray",
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 7867391..52dca12 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -147,6 +147,7 @@ export default {
       const [globals] = useGlobals();
 
       useEffect(() => {
+        const scheme = localStorage.getItem("storybook-scheme") ?? "light";
         const theme = localStorage.getItem("storybook-theme") ?? "denim:jade";
         const tint = localStorage.getItem("storybook-tint") ?? "silver";
         const round = localStorage.getItem("storybook-rounding") ?? "normal";
@@ -163,6 +164,7 @@ export default {
           "--ruf-tint",
           `var(--${tint})`,
         );
+        document.documentElement.dataset.colorScheme = scheme;
         document.documentElement.dataset.rounding = round;
       }, []);
 
diff --git a/packages/core/css/reset/_theme.css b/packages/core/css/reset/_theme.css
index 80062d1..fe9c7ec 100644
--- a/packages/core/css/reset/_theme.css
+++ b/packages/core/css/reset/_theme.css
@@ -86,13 +86,13 @@
     background-color: color-mix(in lab, var(--ruf-bg) 92%, var(--ruf-tint));
   }
 
-  [data-rounding="minimal"] {
+  [data-rounding="sm"] {
     /* default rounding */
     --ruf-rounding: 2px;
     --ruf-rounding-cap: 2px;
   }
 
-  [data-rounding="normal"] {
+  [data-rounding="md"] {
     /* default rounding */
     --ruf-rounding: 0.5rem;
     --ruf-rounding-cap: 0.5rem;