docs: rounding tool

Author: adarshpastakia

.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,22 +338,37 @@ export const ThemeToggle = () => {
       >
         <div
           style={{
-            width: "1rem",
+            width: "1.5rem",
             height: "1rem",
             borderRadius: "4px",
             backgroundColor: "gray",
           }}
         />
       </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}
         onClick={() => changeRounding(ROUNDING.FULL)}
       >
         <div
           style={{
-            width: "1rem",
+            width: "1.5rem",
             height: "1rem",
             borderRadius: "8px",
             backgroundColor: "gray",

.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;
       }, []);
 

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;