From f15a345a6e7738b032ac21c7f38e987ea72f2048 Mon Sep 17 00:00:00 2001
From: Vitalii Dudnik <dudnikvtl@gmail.com>
Date: Tue, 24 Dec 2024 17:28:26 +0200
Subject: [PATCH 1/4] Add 2 more sizes of dynamic radius

---
 src/constants.js       |  2 ++
 src/preset-tailwind.js |  6 ++++++
 src/types.ts           | 12 ++++++++++++
 src/utils/theme.ts     |  8 ++++++++
 vueless.config.ts      |  2 ++
 5 files changed, 30 insertions(+)

diff --git a/src/constants.js b/src/constants.js
index ad7f1be18..b52b4836d 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -21,7 +21,9 @@ export const DEFAULT_RING = 4; /* pixels */
 export const DEFAULT_RING_OFFSET = 0; /* pixels */
 export const DEFAULT_RING_OFFSET_COLOR_LIGHT = "#ffffff"; // white
 export const DEFAULT_RING_OFFSET_COLOR_DARK = "#111827"; // gray-900
+export const DEFAULT_ROUNDING_SM = 4; /* pixels */
 export const DEFAULT_ROUNDING = 8; /* pixels */
+export const DEFAULT_ROUNDING_LG = 16; /* pixels */
 
 /* Vueless supported colors and shades */
 export const COLOR_SHADES = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
diff --git a/src/preset-tailwind.js b/src/preset-tailwind.js
index e8e97a544..5513fa036 100644
--- a/src/preset-tailwind.js
+++ b/src/preset-tailwind.js
@@ -11,7 +11,9 @@ import {
   GRAY_COLOR,
   COOL_COLOR,
   DARK_MODE_SELECTOR,
+  DEFAULT_ROUNDING_SM,
   DEFAULT_ROUNDING,
+  DEFAULT_ROUNDING_LG,
   DEFAULT_RING,
   DEFAULT_RING_OFFSET,
   DEFAULT_RING_OFFSET_COLOR_LIGHT,
@@ -88,7 +90,9 @@ export const vuelessTailwindConfig = {
       },
       borderRadius: {
         inherit: "inherit",
+        "dynamic-sm": "var(--vl-rounding-sm)",
         dynamic: "var(--vl-rounding)",
+        "dynamic-lg": "var(--vl-rounding-lg)",
       },
       ringWidth: {
         dynamic: "var(--vl-ring)",
@@ -106,7 +110,9 @@ export const vuelessTailwindConfig = {
         "var(--vl-ring)": DEFAULT_RING,
         "var(--vl-ring-offset)": DEFAULT_RING_OFFSET,
         "var(--vl-ring-offset-color)": DEFAULT_RING_OFFSET_COLOR_LIGHT,
+        "var(--vl-rounding-sm)": DEFAULT_ROUNDING_SM,
         "var(--vl-rounding)": DEFAULT_ROUNDING,
+        "var(--vl-rounding-lg)": DEFAULT_ROUNDING_LG,
         ...getReplacementColors(GRAY_COLOR, grayColor),
         ...getReplacementColors(BRAND_COLOR, brandColor),
       },
diff --git a/src/types.ts b/src/types.ts
index fd4e073de..9aa909ad2 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -77,11 +77,21 @@ export interface ThemeConfig {
    */
   gray?: GrayColors;
 
+  /**
+   * Default components "sm" size rounding (border-radius).
+   */
+  "rounding-sm"?: number;
+
   /**
    * Default components rounding (border-radius).
    */
   rounding?: number;
 
+  /**
+   * Default components "lg" size rounding (border-radius).
+   */
+  "rounding-lg"?: number;
+
   /**
    * Default components ring width.
    */
@@ -323,7 +333,9 @@ export interface VuelessCssVariables {
   "--vl-ring": string;
   "--vl-ring-offset": string;
   "--vl-ring-offset-color": string;
+  "--vl-rounding-sm": string;
   "--vl-rounding": string;
+  "--vl-rounding-lg": string;
   /* Gray CSS variables */
   "--vl-color-gray-50": string;
   "--vl-color-gray-100": string;
diff --git a/src/utils/theme.ts b/src/utils/theme.ts
index 24bbe223c..9f2269d94 100644
--- a/src/utils/theme.ts
+++ b/src/utils/theme.ts
@@ -9,7 +9,9 @@ import {
   GRAYSCALE_COLOR,
   DEFAULT_RING,
   DEFAULT_RING_OFFSET,
+  DEFAULT_ROUNDING_SM,
   DEFAULT_ROUNDING,
+  DEFAULT_ROUNDING_LG,
   DEFAULT_BRAND_COLOR,
   DEFAULT_GRAY_COLOR,
   DEFAULT_RING_OFFSET_COLOR_LIGHT,
@@ -98,7 +100,11 @@ export function setColorMode(colorMode: `${ColorMode}`) {
 export function setTheme(config: Config = {}) {
   setColorMode(config?.colorMode || vuelessConfig?.colorMode || ColorMode.Auto);
 
+  const roundingSm =
+    config?.["rounding-sm"] ?? vuelessConfig?.["rounding-sm"] ?? DEFAULT_ROUNDING_SM;
   const rounding = config?.rounding ?? vuelessConfig.rounding ?? DEFAULT_ROUNDING;
+  const roundingLg =
+    config?.["rounding-lg"] ?? vuelessConfig?.["rounding-lg"] ?? DEFAULT_ROUNDING_LG;
   const isDarkMode = document.documentElement.classList.contains(DARK_MODE_SELECTOR);
 
   let brand: BrandColors | GrayColors | typeof GRAY_COLOR =
@@ -148,7 +154,9 @@ export function setTheme(config: Config = {}) {
   const colors: DefaultColors = merge(tailwindColors, tailwindConfig?.theme?.extend?.colors || {});
 
   const variables: Partial<VuelessCssVariables> = {
+    "--vl-rounding-sm": `${Number(roundingSm) / PX_IN_REM}rem`,
     "--vl-rounding": `${Number(rounding) / PX_IN_REM}rem`,
+    "--vl-rounding-lg": `${Number(roundingLg) / PX_IN_REM}rem`,
     "--vl-ring": `${ring}px`,
     "--vl-ring-offset": `${ringOffset}px`,
     "--vl-ring-offset-color": convertHexInRgb(defaultRingOffsetColor),
diff --git a/vueless.config.ts b/vueless.config.ts
index 030c9897f..246416364 100644
--- a/vueless.config.ts
+++ b/vueless.config.ts
@@ -6,7 +6,9 @@ export default {
   ringOffset: 0,
   ringOffsetColorLight: "#ffffff", // white
   ringOffsetColorDark: "#111827", // gray-900
+  "rounding-sm": 4,
   rounding: 8,
+  "rounding-lg": 16,
   darkMode: "auto",
   directive: {
     // directive configs

From cbbefd8802cdd6c81adab8292d05e7feec5fa2d5 Mon Sep 17 00:00:00 2001
From: Vitalii Dudnik <dudnikvtl@gmail.com>
Date: Thu, 26 Dec 2024 13:33:03 +0200
Subject: [PATCH 2/4] Use camelCase for "rounding" config keys, add back
 toggleIcon rotation classes (USelect component), add new roundings into
 twMerge config

---
 src/constants.js             | 30 ++++++++++++++++++++++++++++++
 src/ui.form-select/config.ts |  2 +-
 vueless.config.ts            |  4 ++--
 3 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/src/constants.js b/src/constants.js
index b52b4836d..a2c798564 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -173,6 +173,21 @@ export const TAILWIND_MERGE_EXTENSION = {
       "ring-offset-w": [{ "ring-offset": ["dynamic"] }],
       "ring-offset-color": [{ "ring-offset": ["color-dynamic"] }],
       "font-size": [{ text: ["2xs"] }],
+      roundedSm: [{ rounded: ["dynamic-sm", "inherit"] }],
+      "rounded-s-sm": [{ "rounded-s-sm": ["dynamic-sm", "inherit"] }],
+      "rounded-e-sm": [{ "rounded-e-sm": ["dynamic-sm", "inherit"] }],
+      "rounded-t-sm": [{ "rounded-t-sm": ["dynamic-sm", "inherit"] }],
+      "rounded-r-sm": [{ "rounded-r-sm": ["dynamic-sm", "inherit"] }],
+      "rounded-b-sm": [{ "rounded-b-sm": ["dynamic-sm", "inherit"] }],
+      "rounded-l-sm": [{ "rounded-l-sm": ["dynamic-sm", "inherit"] }],
+      "rounded-ss-sm": [{ "rounded-ss-sm": ["dynamic-sm", "inherit"] }],
+      "rounded-se-sm": [{ "rounded-se-sm": ["dynamic-sm", "inherit"] }],
+      "rounded-ee-sm": [{ "rounded-ee-sm": ["dynamic-sm", "inherit"] }],
+      "rounded-es-sm": [{ "rounded-es-sm": ["dynamic-sm", "inherit"] }],
+      "rounded-tl-sm": [{ "rounded-tl-sm": ["dynamic-sm", "inherit"] }],
+      "rounded-tr-sm": [{ "rounded-tr-sm": ["dynamic-sm", "inherit"] }],
+      "rounded-br-sm": [{ "rounded-br-sm": ["dynamic-sm", "inherit"] }],
+      "rounded-bl-sm": [{ "rounded-bl-sm": ["dynamic-sm", "inherit"] }],
       rounded: [{ rounded: ["dynamic", "inherit"] }],
       "rounded-s": [{ "rounded-s": ["dynamic", "inherit"] }],
       "rounded-e": [{ "rounded-e": ["dynamic", "inherit"] }],
@@ -188,6 +203,21 @@ export const TAILWIND_MERGE_EXTENSION = {
       "rounded-tr": [{ "rounded-tr": ["dynamic", "inherit"] }],
       "rounded-br": [{ "rounded-br": ["dynamic", "inherit"] }],
       "rounded-bl": [{ "rounded-bl": ["dynamic", "inherit"] }],
+      roundedLg: [{ rounded: ["dynamic-lg", "inherit"] }],
+      "rounded-s-lg": [{ "rounded-s-lg": ["dynamic-lg", "inherit"] }],
+      "rounded-e-lg": [{ "rounded-e-lg": ["dynamic-lg", "inherit"] }],
+      "rounded-t-lg": [{ "rounded-t-lg": ["dynamic-lg", "inherit"] }],
+      "rounded-r-lg": [{ "rounded-r-lg": ["dynamic-lg", "inherit"] }],
+      "rounded-b-lg": [{ "rounded-b-lg": ["dynamic-lg", "inherit"] }],
+      "rounded-l-lg": [{ "rounded-l-lg": ["dynamic-lg", "inherit"] }],
+      "rounded-ss-lg": [{ "rounded-ss-lg": ["dynamic-lg", "inherit"] }],
+      "rounded-se-lg": [{ "rounded-se-lg": ["dynamic-lg", "inherit"] }],
+      "rounded-ee-lg": [{ "rounded-ee-lg": ["dynamic-lg", "inherit"] }],
+      "rounded-es-lg": [{ "rounded-es-lg": ["dynamic-lg", "inherit"] }],
+      "rounded-tl-lg": [{ "rounded-tl-lg": ["dynamic-lg", "inherit"] }],
+      "rounded-tr-lg": [{ "rounded-tr-lg": ["dynamic-lg", "inherit"] }],
+      "rounded-br-lg": [{ "rounded-br-lg": ["dynamic-lg", "inherit"] }],
+      "rounded-bl-lg": [{ "rounded-bl-lg": ["dynamic-lg", "inherit"] }],
     },
   },
 };
diff --git a/src/ui.form-select/config.ts b/src/ui.form-select/config.ts
index 90eebc810..5f5faecb6 100644
--- a/src/ui.form-select/config.ts
+++ b/src/ui.form-select/config.ts
@@ -90,7 +90,7 @@ export default /*tw*/ {
     ],
   },
   toggle: "{>caret} mr-3",
-  toggleIcon: "{UIcon} {>selectIcon}",
+  toggleIcon: "{UIcon} {>selectIcon} transition duration-300 group-[]/active:rotate-180",
   clear: "{>caret}",
   clearIcon: "{UIcon} {>selectIcon}",
   clearMultiple: "flex items-center",
diff --git a/vueless.config.ts b/vueless.config.ts
index 246416364..230c34130 100644
--- a/vueless.config.ts
+++ b/vueless.config.ts
@@ -6,9 +6,9 @@ export default {
   ringOffset: 0,
   ringOffsetColorLight: "#ffffff", // white
   ringOffsetColorDark: "#111827", // gray-900
-  "rounding-sm": 4,
+  roundingSm: 4,
   rounding: 8,
-  "rounding-lg": 16,
+  roundingLg: 16,
   darkMode: "auto",
   directive: {
     // directive configs

From 1f5324efd0e8f30a759865596006ef8e8e76c064 Mon Sep 17 00:00:00 2001
From: Vitalii Dudnik <dudnikvtl@gmail.com>
Date: Thu, 26 Dec 2024 17:21:12 +0200
Subject: [PATCH 3/4] Change roundin lg/sm to camelCase in types.ts and
 theme.ts, add new roundings to UCard & UCheckbox

---
 src/constants.js                | 60 +++++++++------------------------
 src/types.ts                    |  4 +--
 src/ui.container-card/config.ts |  2 +-
 src/ui.form-checkbox/config.ts  |  4 +--
 src/utils/theme.ts              |  6 ++--
 5 files changed, 22 insertions(+), 54 deletions(-)

diff --git a/src/constants.js b/src/constants.js
index a2c798564..259a60605 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -173,51 +173,21 @@ export const TAILWIND_MERGE_EXTENSION = {
       "ring-offset-w": [{ "ring-offset": ["dynamic"] }],
       "ring-offset-color": [{ "ring-offset": ["color-dynamic"] }],
       "font-size": [{ text: ["2xs"] }],
-      roundedSm: [{ rounded: ["dynamic-sm", "inherit"] }],
-      "rounded-s-sm": [{ "rounded-s-sm": ["dynamic-sm", "inherit"] }],
-      "rounded-e-sm": [{ "rounded-e-sm": ["dynamic-sm", "inherit"] }],
-      "rounded-t-sm": [{ "rounded-t-sm": ["dynamic-sm", "inherit"] }],
-      "rounded-r-sm": [{ "rounded-r-sm": ["dynamic-sm", "inherit"] }],
-      "rounded-b-sm": [{ "rounded-b-sm": ["dynamic-sm", "inherit"] }],
-      "rounded-l-sm": [{ "rounded-l-sm": ["dynamic-sm", "inherit"] }],
-      "rounded-ss-sm": [{ "rounded-ss-sm": ["dynamic-sm", "inherit"] }],
-      "rounded-se-sm": [{ "rounded-se-sm": ["dynamic-sm", "inherit"] }],
-      "rounded-ee-sm": [{ "rounded-ee-sm": ["dynamic-sm", "inherit"] }],
-      "rounded-es-sm": [{ "rounded-es-sm": ["dynamic-sm", "inherit"] }],
-      "rounded-tl-sm": [{ "rounded-tl-sm": ["dynamic-sm", "inherit"] }],
-      "rounded-tr-sm": [{ "rounded-tr-sm": ["dynamic-sm", "inherit"] }],
-      "rounded-br-sm": [{ "rounded-br-sm": ["dynamic-sm", "inherit"] }],
-      "rounded-bl-sm": [{ "rounded-bl-sm": ["dynamic-sm", "inherit"] }],
-      rounded: [{ rounded: ["dynamic", "inherit"] }],
-      "rounded-s": [{ "rounded-s": ["dynamic", "inherit"] }],
-      "rounded-e": [{ "rounded-e": ["dynamic", "inherit"] }],
-      "rounded-t": [{ "rounded-t": ["dynamic", "inherit"] }],
-      "rounded-r": [{ "rounded-r": ["dynamic", "inherit"] }],
-      "rounded-b": [{ "rounded-b": ["dynamic", "inherit"] }],
-      "rounded-l": [{ "rounded-l": ["dynamic", "inherit"] }],
-      "rounded-ss": [{ "rounded-ss": ["dynamic", "inherit"] }],
-      "rounded-se": [{ "rounded-se": ["dynamic", "inherit"] }],
-      "rounded-ee": [{ "rounded-ee": ["dynamic", "inherit"] }],
-      "rounded-es": [{ "rounded-es": ["dynamic", "inherit"] }],
-      "rounded-tl": [{ "rounded-tl": ["dynamic", "inherit"] }],
-      "rounded-tr": [{ "rounded-tr": ["dynamic", "inherit"] }],
-      "rounded-br": [{ "rounded-br": ["dynamic", "inherit"] }],
-      "rounded-bl": [{ "rounded-bl": ["dynamic", "inherit"] }],
-      roundedLg: [{ rounded: ["dynamic-lg", "inherit"] }],
-      "rounded-s-lg": [{ "rounded-s-lg": ["dynamic-lg", "inherit"] }],
-      "rounded-e-lg": [{ "rounded-e-lg": ["dynamic-lg", "inherit"] }],
-      "rounded-t-lg": [{ "rounded-t-lg": ["dynamic-lg", "inherit"] }],
-      "rounded-r-lg": [{ "rounded-r-lg": ["dynamic-lg", "inherit"] }],
-      "rounded-b-lg": [{ "rounded-b-lg": ["dynamic-lg", "inherit"] }],
-      "rounded-l-lg": [{ "rounded-l-lg": ["dynamic-lg", "inherit"] }],
-      "rounded-ss-lg": [{ "rounded-ss-lg": ["dynamic-lg", "inherit"] }],
-      "rounded-se-lg": [{ "rounded-se-lg": ["dynamic-lg", "inherit"] }],
-      "rounded-ee-lg": [{ "rounded-ee-lg": ["dynamic-lg", "inherit"] }],
-      "rounded-es-lg": [{ "rounded-es-lg": ["dynamic-lg", "inherit"] }],
-      "rounded-tl-lg": [{ "rounded-tl-lg": ["dynamic-lg", "inherit"] }],
-      "rounded-tr-lg": [{ "rounded-tr-lg": ["dynamic-lg", "inherit"] }],
-      "rounded-br-lg": [{ "rounded-br-lg": ["dynamic-lg", "inherit"] }],
-      "rounded-bl-lg": [{ "rounded-bl-lg": ["dynamic-lg", "inherit"] }],
+      rounded: [{ rounded: ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
+      "rounded-s": [{ "rounded-s": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
+      "rounded-e": [{ "rounded-e": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
+      "rounded-t": [{ "rounded-t": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
+      "rounded-r": [{ "rounded-r": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
+      "rounded-b": [{ "rounded-b": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
+      "rounded-l": [{ "rounded-l": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
+      "rounded-ss": [{ "rounded-ss": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
+      "rounded-se": [{ "rounded-se": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
+      "rounded-ee": [{ "rounded-ee": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
+      "rounded-es": [{ "rounded-es": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
+      "rounded-tl": [{ "rounded-tl": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
+      "rounded-tr": [{ "rounded-tr": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
+      "rounded-br": [{ "rounded-br": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
+      "rounded-bl": [{ "rounded-bl": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
     },
   },
 };
diff --git a/src/types.ts b/src/types.ts
index 9aa909ad2..2b4c04ea0 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -80,7 +80,7 @@ export interface ThemeConfig {
   /**
    * Default components "sm" size rounding (border-radius).
    */
-  "rounding-sm"?: number;
+  roundingSm?: number;
 
   /**
    * Default components rounding (border-radius).
@@ -90,7 +90,7 @@ export interface ThemeConfig {
   /**
    * Default components "lg" size rounding (border-radius).
    */
-  "rounding-lg"?: number;
+  roundingLg?: number;
 
   /**
    * Default components ring width.
diff --git a/src/ui.container-card/config.ts b/src/ui.container-card/config.ts
index eacdb9c89..ae61027db 100644
--- a/src/ui.container-card/config.ts
+++ b/src/ui.container-card/config.ts
@@ -1,5 +1,5 @@
 export default /*tw*/ {
-  wrapper: "p-4 md:p-5 border rounded-dynamic border-gray-200 bg-white space-y-4 w-full",
+  wrapper: "p-4 md:p-5 border rounded-dynamic-lg border-gray-200 bg-white space-y-4 w-full",
   header: "flex justify-between",
   headerLeft: "flex items-center gap-2 w-fit",
   headerLeftFallback: "flex flex-col w-fit",
diff --git a/src/ui.form-checkbox/config.ts b/src/ui.form-checkbox/config.ts
index de90fd34e..46c763170 100644
--- a/src/ui.form-checkbox/config.ts
+++ b/src/ui.form-checkbox/config.ts
@@ -2,7 +2,7 @@ export default /*tw*/ {
   checkboxLabel: "{ULabel}",
   checkbox: {
     base: `
-      border rounded bg-white cursor-pointer transition checked:text-{color}-600
+      border rounded-dynamic-sm bg-white cursor-pointer transition checked:text-{color}-600
       border-gray-300 hover:border-gray-400 focus:border-{color}-500 active:border-{color}-800
       focus:ring-{color}-700/15 focus:ring-dynamic focus:ring-offset-dynamic
       disabled:border-gray-300 disabled:bg-gray-100 disabled:cursor-not-allowed
@@ -23,7 +23,7 @@ export default /*tw*/ {
   },
   iconWrapper: {
     base: `
-      flex items-center justify-center absolute rounded cursor-pointer transition
+      flex items-center justify-center absolute rounded-dynamic-sm cursor-pointer transition
       bg-{color}-600 hover:bg-{color}-700 active:bg-{color}-800
     `,
     variants: {
diff --git a/src/utils/theme.ts b/src/utils/theme.ts
index 9f2269d94..1f7e79e53 100644
--- a/src/utils/theme.ts
+++ b/src/utils/theme.ts
@@ -100,11 +100,9 @@ export function setColorMode(colorMode: `${ColorMode}`) {
 export function setTheme(config: Config = {}) {
   setColorMode(config?.colorMode || vuelessConfig?.colorMode || ColorMode.Auto);
 
-  const roundingSm =
-    config?.["rounding-sm"] ?? vuelessConfig?.["rounding-sm"] ?? DEFAULT_ROUNDING_SM;
+  const roundingSm = config?.roundingSm ?? vuelessConfig?.roundingSm ?? DEFAULT_ROUNDING_SM;
   const rounding = config?.rounding ?? vuelessConfig.rounding ?? DEFAULT_ROUNDING;
-  const roundingLg =
-    config?.["rounding-lg"] ?? vuelessConfig?.["rounding-lg"] ?? DEFAULT_ROUNDING_LG;
+  const roundingLg = config?.roundingLg ?? vuelessConfig?.roundingLg ?? DEFAULT_ROUNDING_LG;
   const isDarkMode = document.documentElement.classList.contains(DARK_MODE_SELECTOR);
 
   let brand: BrandColors | GrayColors | typeof GRAY_COLOR =

From 1cfd4fa7d38c73f20dcce5d42b776398ff643c13 Mon Sep 17 00:00:00 2001
From: Admin User <ilevel.ws@gmail.com>
Date: Thu, 26 Dec 2024 15:34:04 +0000
Subject: [PATCH 4/4] GITBOOK-52: No subject

---
 docs/customization/rounding.md | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/docs/customization/rounding.md b/docs/customization/rounding.md
index 5cb715757..fe087d404 100644
--- a/docs/customization/rounding.md
+++ b/docs/customization/rounding.md
@@ -3,18 +3,20 @@
 You can specify rounding (border-radius) globally for all Vueless components.&#x20;
 
 <pre class="language-js" data-title="vueless.config.js"><code class="lang-js">export default {
+  roundingSm: 2, /* default -> 4 (pixels) */
   rounding: 6, /* default -> 8 (pixels) */
+  roundingLg: 8, /* default -> 16 (pixels) */
 }<a data-footnote-ref href="#user-content-fn-1">;</a>
 </code></pre>
 
-It may be possible to set any of value in pixels but we highly recommend stick to the [Tailwind CSS border-radius](https://tailwindcss.com/docs/border-radius) values.
+It may be possible to set any value in pixels but we highly recommend stick to the [Tailwind CSS border-radius](https://tailwindcss.com/docs/border-radius) values.
 
 {% hint style="info" %}
-We use `pixels` measurement unit in config to make the setting more straightforward for developers, but under the hood the value always converts into `rem`.
+We use `pixels` measurement unit in config to make the setting more straightforward for developers, but under the hood the value is always converted into `rem`.
 {% endhint %}
 
 ## Custom tailwind class
 
-To implement dynamic rounding has been created custom Tailwind CSS class `rounded-dynamic`. So, feel free to add it into you components when you need to have same rounding somewhere in your project.
+To implement dynamic rounding, custom Tailwind CSS classes `rounded-dynamic-sm, rounded-dynamic, rounded-dynamic-lg` have been created . So, feel free to add them into your components when you need to have same rounding somewhere in your project.
 
 [^1]: