@semanticus/semanticus-css 0.9.0 → 1.0.0

package/src/utilities/_grid.css

@@ -0,0 +1,306 @@
+/* ======================================================================
+   Responsive 12-Column Grid
+   -----------------------------------------------------------------------
+   Implemented with CSS Flexbox and logical properties.
+   Mobile-first: all columns default to full width; size modifiers
+   override at their breakpoint. Gutter controlled via --grid-gutter-x.
+
+   Breakpoints (inherit from src/variables/_breakpoints.css):
+     (default) — all widths (no media query)
+     sm  — min-width: 576px
+     md  — min-width: 768px
+     lg  — min-width: 1024px
+
+   Alignment, ordering, and reversing use existing flexbox utilities:
+     .justify-content-*           horizontal alignment on .row
+     .align-items-*               vertical alignment on .row
+     .order-first / .order-last   column ordering
+     .flex-row-reverse            reverse column order on .row
+   ====================================================================== */
+
+/* --- Row -------------------------------------------------------------- */
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-inline: calc(var(--grid-gutter-x) / -2);
+  row-gap: var(--grid-gutter-y);
+}
+
+/* --- Column base ------------------------------------------------------ */
+/*
+ * All col-* elements default to full width (mobile-first stacking).
+ * Responsive size classes and explicit col-N classes override this.
+ */
+
+[class*="col-"],
+.col {
+  box-sizing: border-box;
+  flex: 0 0 100%;
+  max-width: 100%;
+  min-width: 0;
+  padding-inline: calc(var(--grid-gutter-x) / 2);
+}
+
+/* ======================================================================
+   Default — all screen sizes (no media query)
+   ====================================================================== */
+
+/* Auto-width: equal share of remaining row space */
+.col {
+  flex: 1 1 0;
+}
+
+/* Fixed-width columns 1–12 */
+.col-1  { flex: 0 0 calc( 1 / 12 * 100%); max-width: calc( 1 / 12 * 100%); }
+.col-2  { flex: 0 0 calc( 2 / 12 * 100%); max-width: calc( 2 / 12 * 100%); }
+.col-3  { flex: 0 0 calc( 3 / 12 * 100%); max-width: calc( 3 / 12 * 100%); }
+.col-4  { flex: 0 0 calc( 4 / 12 * 100%); max-width: calc( 4 / 12 * 100%); }
+.col-5  { flex: 0 0 calc( 5 / 12 * 100%); max-width: calc( 5 / 12 * 100%); }
+.col-6  { flex: 0 0 calc( 6 / 12 * 100%); max-width: calc( 6 / 12 * 100%); }
+.col-7  { flex: 0 0 calc( 7 / 12 * 100%); max-width: calc( 7 / 12 * 100%); }
+.col-8  { flex: 0 0 calc( 8 / 12 * 100%); max-width: calc( 8 / 12 * 100%); }
+.col-9  { flex: 0 0 calc( 9 / 12 * 100%); max-width: calc( 9 / 12 * 100%); }
+.col-10 { flex: 0 0 calc(10 / 12 * 100%); max-width: calc(10 / 12 * 100%); }
+.col-11 { flex: 0 0 calc(11 / 12 * 100%); max-width: calc(11 / 12 * 100%); }
+.col-12 { flex: 0 0 100%;                  max-width: 100%;                  }
+
+/* Offsets */
+.col-offset-0  { margin-inline-start: 0;                              }
+.col-offset-1  { margin-inline-start: calc( 1 / 12 * 100%); }
+.col-offset-2  { margin-inline-start: calc( 2 / 12 * 100%); }
+.col-offset-3  { margin-inline-start: calc( 3 / 12 * 100%); }
+.col-offset-4  { margin-inline-start: calc( 4 / 12 * 100%); }
+.col-offset-5  { margin-inline-start: calc( 5 / 12 * 100%); }
+.col-offset-6  { margin-inline-start: calc( 6 / 12 * 100%); }
+.col-offset-7  { margin-inline-start: calc( 7 / 12 * 100%); }
+.col-offset-8  { margin-inline-start: calc( 8 / 12 * 100%); }
+.col-offset-9  { margin-inline-start: calc( 9 / 12 * 100%); }
+.col-offset-10 { margin-inline-start: calc(10 / 12 * 100%); }
+.col-offset-11 { margin-inline-start: calc(11 / 12 * 100%); }
+
+/* ======================================================================
+   sm — min-width: 576px
+   ====================================================================== */
+
+@media (--breakpoint-sm) {
+  .col-sm {
+    flex: 1 1 0;
+    max-width: 100%;
+  }
+
+  .col-sm-1  { flex: 0 0 calc( 1 / 12 * 100%); max-width: calc( 1 / 12 * 100%); }
+  .col-sm-2  { flex: 0 0 calc( 2 / 12 * 100%); max-width: calc( 2 / 12 * 100%); }
+  .col-sm-3  { flex: 0 0 calc( 3 / 12 * 100%); max-width: calc( 3 / 12 * 100%); }
+  .col-sm-4  { flex: 0 0 calc( 4 / 12 * 100%); max-width: calc( 4 / 12 * 100%); }
+  .col-sm-5  { flex: 0 0 calc( 5 / 12 * 100%); max-width: calc( 5 / 12 * 100%); }
+  .col-sm-6  { flex: 0 0 calc( 6 / 12 * 100%); max-width: calc( 6 / 12 * 100%); }
+  .col-sm-7  { flex: 0 0 calc( 7 / 12 * 100%); max-width: calc( 7 / 12 * 100%); }
+  .col-sm-8  { flex: 0 0 calc( 8 / 12 * 100%); max-width: calc( 8 / 12 * 100%); }
+  .col-sm-9  { flex: 0 0 calc( 9 / 12 * 100%); max-width: calc( 9 / 12 * 100%); }
+  .col-sm-10 { flex: 0 0 calc(10 / 12 * 100%); max-width: calc(10 / 12 * 100%); }
+  .col-sm-11 { flex: 0 0 calc(11 / 12 * 100%); max-width: calc(11 / 12 * 100%); }
+  .col-sm-12 { flex: 0 0 100%;                  max-width: 100%;                  }
+
+  .col-offset-sm-0  { margin-inline-start: 0;                              }
+  .col-offset-sm-1  { margin-inline-start: calc( 1 / 12 * 100%); }
+  .col-offset-sm-2  { margin-inline-start: calc( 2 / 12 * 100%); }
+  .col-offset-sm-3  { margin-inline-start: calc( 3 / 12 * 100%); }
+  .col-offset-sm-4  { margin-inline-start: calc( 4 / 12 * 100%); }
+  .col-offset-sm-5  { margin-inline-start: calc( 5 / 12 * 100%); }
+  .col-offset-sm-6  { margin-inline-start: calc( 6 / 12 * 100%); }
+  .col-offset-sm-7  { margin-inline-start: calc( 7 / 12 * 100%); }
+  .col-offset-sm-8  { margin-inline-start: calc( 8 / 12 * 100%); }
+  .col-offset-sm-9  { margin-inline-start: calc( 9 / 12 * 100%); }
+  .col-offset-sm-10 { margin-inline-start: calc(10 / 12 * 100%); }
+  .col-offset-sm-11 { margin-inline-start: calc(11 / 12 * 100%); }
+}
+
+/* ======================================================================
+   md — min-width: 768px
+   ====================================================================== */
+
+@media (--breakpoint-md) {
+  .col-md {
+    flex: 1 1 0;
+    max-width: 100%;
+  }
+
+  .col-md-1  { flex: 0 0 calc( 1 / 12 * 100%); max-width: calc( 1 / 12 * 100%); }
+  .col-md-2  { flex: 0 0 calc( 2 / 12 * 100%); max-width: calc( 2 / 12 * 100%); }
+  .col-md-3  { flex: 0 0 calc( 3 / 12 * 100%); max-width: calc( 3 / 12 * 100%); }
+  .col-md-4  { flex: 0 0 calc( 4 / 12 * 100%); max-width: calc( 4 / 12 * 100%); }
+  .col-md-5  { flex: 0 0 calc( 5 / 12 * 100%); max-width: calc( 5 / 12 * 100%); }
+  .col-md-6  { flex: 0 0 calc( 6 / 12 * 100%); max-width: calc( 6 / 12 * 100%); }
+  .col-md-7  { flex: 0 0 calc( 7 / 12 * 100%); max-width: calc( 7 / 12 * 100%); }
+  .col-md-8  { flex: 0 0 calc( 8 / 12 * 100%); max-width: calc( 8 / 12 * 100%); }
+  .col-md-9  { flex: 0 0 calc( 9 / 12 * 100%); max-width: calc( 9 / 12 * 100%); }
+  .col-md-10 { flex: 0 0 calc(10 / 12 * 100%); max-width: calc(10 / 12 * 100%); }
+  .col-md-11 { flex: 0 0 calc(11 / 12 * 100%); max-width: calc(11 / 12 * 100%); }
+  .col-md-12 { flex: 0 0 100%;                  max-width: 100%;                  }
+
+  .col-offset-md-0  { margin-inline-start: 0;                              }
+  .col-offset-md-1  { margin-inline-start: calc( 1 / 12 * 100%); }
+  .col-offset-md-2  { margin-inline-start: calc( 2 / 12 * 100%); }
+  .col-offset-md-3  { margin-inline-start: calc( 3 / 12 * 100%); }
+  .col-offset-md-4  { margin-inline-start: calc( 4 / 12 * 100%); }
+  .col-offset-md-5  { margin-inline-start: calc( 5 / 12 * 100%); }
+  .col-offset-md-6  { margin-inline-start: calc( 6 / 12 * 100%); }
+  .col-offset-md-7  { margin-inline-start: calc( 7 / 12 * 100%); }
+  .col-offset-md-8  { margin-inline-start: calc( 8 / 12 * 100%); }
+  .col-offset-md-9  { margin-inline-start: calc( 9 / 12 * 100%); }
+  .col-offset-md-10 { margin-inline-start: calc(10 / 12 * 100%); }
+  .col-offset-md-11 { margin-inline-start: calc(11 / 12 * 100%); }
+}
+
+/* ======================================================================
+   lg — min-width: 1024px
+   ====================================================================== */
+
+@media (--breakpoint-lg) {
+  .col-lg {
+    flex: 1 1 0;
+    max-width: 100%;
+  }
+
+  .col-lg-1  { flex: 0 0 calc( 1 / 12 * 100%); max-width: calc( 1 / 12 * 100%); }
+  .col-lg-2  { flex: 0 0 calc( 2 / 12 * 100%); max-width: calc( 2 / 12 * 100%); }
+  .col-lg-3  { flex: 0 0 calc( 3 / 12 * 100%); max-width: calc( 3 / 12 * 100%); }
+  .col-lg-4  { flex: 0 0 calc( 4 / 12 * 100%); max-width: calc( 4 / 12 * 100%); }
+  .col-lg-5  { flex: 0 0 calc( 5 / 12 * 100%); max-width: calc( 5 / 12 * 100%); }
+  .col-lg-6  { flex: 0 0 calc( 6 / 12 * 100%); max-width: calc( 6 / 12 * 100%); }
+  .col-lg-7  { flex: 0 0 calc( 7 / 12 * 100%); max-width: calc( 7 / 12 * 100%); }
+  .col-lg-8  { flex: 0 0 calc( 8 / 12 * 100%); max-width: calc( 8 / 12 * 100%); }
+  .col-lg-9  { flex: 0 0 calc( 9 / 12 * 100%); max-width: calc( 9 / 12 * 100%); }
+  .col-lg-10 { flex: 0 0 calc(10 / 12 * 100%); max-width: calc(10 / 12 * 100%); }
+  .col-lg-11 { flex: 0 0 calc(11 / 12 * 100%); max-width: calc(11 / 12 * 100%); }
+  .col-lg-12 { flex: 0 0 100%;                  max-width: 100%;                  }
+
+  .col-offset-lg-0  { margin-inline-start: 0;                              }
+  .col-offset-lg-1  { margin-inline-start: calc( 1 / 12 * 100%); }
+  .col-offset-lg-2  { margin-inline-start: calc( 2 / 12 * 100%); }
+  .col-offset-lg-3  { margin-inline-start: calc( 3 / 12 * 100%); }
+  .col-offset-lg-4  { margin-inline-start: calc( 4 / 12 * 100%); }
+  .col-offset-lg-5  { margin-inline-start: calc( 5 / 12 * 100%); }
+  .col-offset-lg-6  { margin-inline-start: calc( 6 / 12 * 100%); }
+  .col-offset-lg-7  { margin-inline-start: calc( 7 / 12 * 100%); }
+  .col-offset-lg-8  { margin-inline-start: calc( 8 / 12 * 100%); }
+  .col-offset-lg-9  { margin-inline-start: calc( 9 / 12 * 100%); }
+  .col-offset-lg-10 { margin-inline-start: calc(10 / 12 * 100%); }
+  .col-offset-lg-11 { margin-inline-start: calc(11 / 12 * 100%); }
+}
+
+/* ======================================================================
+   Gutter classes — control --grid-gutter-x (horizontal) and/or
+   --grid-gutter-y (vertical) on a .row.
+
+   .g-*   — both axes
+   .gx-*  — horizontal axis only
+   .gy-*  — vertical axis only
+
+   Scale mirrors the spacing scale (0–5):
+     0 → 0
+     1 → --spacing-1  (× 0.25)
+     2 → --spacing-2  (× 0.5)
+     3 → --spacing-3  (× 1,  default horizontal gutter)
+     4 → --spacing-4  (× 1.5)
+     5 → --spacing-5  (× 3)
+   ====================================================================== */
+
+/* --- Default (all sizes) ---------------------------------------------- */
+
+.g-0  { --grid-gutter-x: 0;                --grid-gutter-y: 0; }
+.g-1  { --grid-gutter-x: var(--spacing-1); --grid-gutter-y: var(--spacing-1); }
+.g-2  { --grid-gutter-x: var(--spacing-2); --grid-gutter-y: var(--spacing-2); }
+.g-3  { --grid-gutter-x: var(--spacing-3); --grid-gutter-y: var(--spacing-3); }
+.g-4  { --grid-gutter-x: var(--spacing-4); --grid-gutter-y: var(--spacing-4); }
+.g-5  { --grid-gutter-x: var(--spacing-5); --grid-gutter-y: var(--spacing-5); }
+
+.gx-0 { --grid-gutter-x: 0; }
+.gx-1 { --grid-gutter-x: var(--spacing-1); }
+.gx-2 { --grid-gutter-x: var(--spacing-2); }
+.gx-3 { --grid-gutter-x: var(--spacing-3); }
+.gx-4 { --grid-gutter-x: var(--spacing-4); }
+.gx-5 { --grid-gutter-x: var(--spacing-5); }
+
+.gy-0 { --grid-gutter-y: 0; }
+.gy-1 { --grid-gutter-y: var(--spacing-1); }
+.gy-2 { --grid-gutter-y: var(--spacing-2); }
+.gy-3 { --grid-gutter-y: var(--spacing-3); }
+.gy-4 { --grid-gutter-y: var(--spacing-4); }
+.gy-5 { --grid-gutter-y: var(--spacing-5); }
+
+/* --- sm — min-width: 576px -------------------------------------------- */
+
+@media (--breakpoint-sm) {
+  .g-sm-0  { --grid-gutter-x: 0;                --grid-gutter-y: 0; }
+  .g-sm-1  { --grid-gutter-x: var(--spacing-1); --grid-gutter-y: var(--spacing-1); }
+  .g-sm-2  { --grid-gutter-x: var(--spacing-2); --grid-gutter-y: var(--spacing-2); }
+  .g-sm-3  { --grid-gutter-x: var(--spacing-3); --grid-gutter-y: var(--spacing-3); }
+  .g-sm-4  { --grid-gutter-x: var(--spacing-4); --grid-gutter-y: var(--spacing-4); }
+  .g-sm-5  { --grid-gutter-x: var(--spacing-5); --grid-gutter-y: var(--spacing-5); }
+
+  .gx-sm-0 { --grid-gutter-x: 0; }
+  .gx-sm-1 { --grid-gutter-x: var(--spacing-1); }
+  .gx-sm-2 { --grid-gutter-x: var(--spacing-2); }
+  .gx-sm-3 { --grid-gutter-x: var(--spacing-3); }
+  .gx-sm-4 { --grid-gutter-x: var(--spacing-4); }
+  .gx-sm-5 { --grid-gutter-x: var(--spacing-5); }
+
+  .gy-sm-0 { --grid-gutter-y: 0; }
+  .gy-sm-1 { --grid-gutter-y: var(--spacing-1); }
+  .gy-sm-2 { --grid-gutter-y: var(--spacing-2); }
+  .gy-sm-3 { --grid-gutter-y: var(--spacing-3); }
+  .gy-sm-4 { --grid-gutter-y: var(--spacing-4); }
+  .gy-sm-5 { --grid-gutter-y: var(--spacing-5); }
+}
+
+/* --- md — min-width: 768px -------------------------------------------- */
+
+@media (--breakpoint-md) {
+  .g-md-0  { --grid-gutter-x: 0;                --grid-gutter-y: 0; }
+  .g-md-1  { --grid-gutter-x: var(--spacing-1); --grid-gutter-y: var(--spacing-1); }
+  .g-md-2  { --grid-gutter-x: var(--spacing-2); --grid-gutter-y: var(--spacing-2); }
+  .g-md-3  { --grid-gutter-x: var(--spacing-3); --grid-gutter-y: var(--spacing-3); }
+  .g-md-4  { --grid-gutter-x: var(--spacing-4); --grid-gutter-y: var(--spacing-4); }
+  .g-md-5  { --grid-gutter-x: var(--spacing-5); --grid-gutter-y: var(--spacing-5); }
+
+  .gx-md-0 { --grid-gutter-x: 0; }
+  .gx-md-1 { --grid-gutter-x: var(--spacing-1); }
+  .gx-md-2 { --grid-gutter-x: var(--spacing-2); }
+  .gx-md-3 { --grid-gutter-x: var(--spacing-3); }
+  .gx-md-4 { --grid-gutter-x: var(--spacing-4); }
+  .gx-md-5 { --grid-gutter-x: var(--spacing-5); }
+
+  .gy-md-0 { --grid-gutter-y: 0; }
+  .gy-md-1 { --grid-gutter-y: var(--spacing-1); }
+  .gy-md-2 { --grid-gutter-y: var(--spacing-2); }
+  .gy-md-3 { --grid-gutter-y: var(--spacing-3); }
+  .gy-md-4 { --grid-gutter-y: var(--spacing-4); }
+  .gy-md-5 { --grid-gutter-y: var(--spacing-5); }
+}
+
+/* --- lg — min-width: 1024px ------------------------------------------- */
+
+@media (--breakpoint-lg) {
+  .g-lg-0  { --grid-gutter-x: 0;                --grid-gutter-y: 0; }
+  .g-lg-1  { --grid-gutter-x: var(--spacing-1); --grid-gutter-y: var(--spacing-1); }
+  .g-lg-2  { --grid-gutter-x: var(--spacing-2); --grid-gutter-y: var(--spacing-2); }
+  .g-lg-3  { --grid-gutter-x: var(--spacing-3); --grid-gutter-y: var(--spacing-3); }
+  .g-lg-4  { --grid-gutter-x: var(--spacing-4); --grid-gutter-y: var(--spacing-4); }
+  .g-lg-5  { --grid-gutter-x: var(--spacing-5); --grid-gutter-y: var(--spacing-5); }
+
+  .gx-lg-0 { --grid-gutter-x: 0; }
+  .gx-lg-1 { --grid-gutter-x: var(--spacing-1); }
+  .gx-lg-2 { --grid-gutter-x: var(--spacing-2); }
+  .gx-lg-3 { --grid-gutter-x: var(--spacing-3); }
+  .gx-lg-4 { --grid-gutter-x: var(--spacing-4); }
+  .gx-lg-5 { --grid-gutter-x: var(--spacing-5); }
+
+  .gy-lg-0 { --grid-gutter-y: 0; }
+  .gy-lg-1 { --grid-gutter-y: var(--spacing-1); }
+  .gy-lg-2 { --grid-gutter-y: var(--spacing-2); }
+  .gy-lg-3 { --grid-gutter-y: var(--spacing-3); }
+  .gy-lg-4 { --grid-gutter-y: var(--spacing-4); }
+  .gy-lg-5 { --grid-gutter-y: var(--spacing-5); }
+}

package/src/utilities/_variables.css

@@ -1,54 +1,39 @@
-/*!
- * Adapted from Bootstrap v5.3.8 utilities (https://getbootstrap.com/)
- * Copyright (c) 2011-2026 The Bootstrap Authors
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
- */
-
-/* ==========================================================================
-   Theme-independent variables
-   ========================================================================== */
-
 :root,
 :host {
+  --max-z-index: 1050;
+
+  /* Grid */
+  --grid-gutter-x: var(--spacing);
+  --grid-gutter-y: 0;
+
   /* Gradient */
   --gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
 
   /* Borders & radii */
-  --border-style: solid;
-  --border-radius-default: var(--border-radius);
-  --border-radius-sm: var(--border-radius-default);
-  --border-radius-lg: calc(var(--border-radius-default) * 2);
-  --border-radius-xl: calc(var(--border-radius-default) * 4);
-  --border-radius-xxl: calc(var(--border-radius-default) * 8);
   --border-radius-pill: 50rem;
+  --border-radius-1: var(--radius);
+  --border-radius-2: calc(var(--radius) * 2);
+  --border-radius-3: calc(var(--radius) * 4);
+  --border-radius-4: calc(var(--radius) * 6);
+  --border-radius-5: calc(var(--radius) * 8);
 
   /* Border-width scale */
-  --border-width-default: var(--border-width);
-  --border-width-0: 0;
-  --border-width-1: var(--border-width-default);
-  --border-width-2: calc(var(--border-width-default) * 2);
-  --border-width-3: calc(var(--border-width-default) * 3);
-  --border-width-4: calc(var(--border-width-default) * 4);
-  --border-width-5: calc(var(--border-width-default) * 5);
+  --border-style: solid;
+  --border-width-1: var(--border-size);
+  --border-width-2: calc(var(--border-size) * 2);
+  --border-width-3: calc(var(--border-size) * 3);
+  --border-width-4: calc(var(--border-size) * 4);
+  --border-width-5: calc(var(--border-size) * 5);
 
   /* Spacing scale */
-  --spacer-default: var(--spacing);
-  --spacer-0: 0;
-  --spacer-1: calc(var(--spacer-default) * 0.25);
-  --spacer-2: calc(var(--spacer-default) * 0.5);
-  --spacer-3: var(--spacer-default);
-  --spacer-4: calc(var(--spacer-default) * 1.5);
-  --spacer-5: calc(var(--spacer-default) * 3);
-
-  /* Focus ring */
-  --focus-ring-width: var(--outline-width);
-  --focus-ring-opacity: 0.25;
-
-  /* Auto-switching mappings (resolved at computed-value time via Semanticus CSS) */
-  --emphasis-color: rgb(var(--color-contrast-rgb));
-  --secondary-color: var(--color-text-muted);
-  --border-color: var(--color-border-muted);
-  --focus-ring-color: var(--color-primary-focus);
-
-  --max-z-index: 1050;
+  --spacing-1: calc(var(--spacing) * 0.25);
+  --spacing-2: calc(var(--spacing) * 0.5);
+  --spacing-3: var(--spacing);
+  --spacing-4: calc(var(--spacing) * 1.5);
+  --spacing-5: calc(var(--spacing) * 3);
+
+  /* Shadows */
+  --shadow-sm: light-dark(0 0.0625rem 0.125rem rgba(129, 145, 181, 0.1), 0 0.0625rem 0.125rem rgba(7, 8.5, 12, 0.1));
+  --shadow-md: light-dark(0.0625rem 0.125rem 0.5rem rgba(129, 145, 181, 0.15), 0.0625rem 0.125rem 0.5rem rgba(7, 8.5, 12, 0.15));
+  --shadow-lg: light-dark(0.125rem 0.25rem 1rem rgba(129, 145, 181, 0.2), 0.125rem 0.25rem 1rem rgba(7, 8.5, 12, 0.2));
 }

package/src/utilities/borders/_border-radius.css

@@ -1,33 +1,29 @@
 .rounded {
-  border-radius: var(--border-radius) !important;
+  border-radius: var(--radius) !important;
 }
 
 .rounded-0 {
   border-radius: 0 !important;
 }
 
-.rounded-d {
-  border-radius: var(--border-radius-default) !important;
-}
-
 .rounded-1 {
-  border-radius: var(--border-radius-sm) !important;
+  border-radius: var(--border-radius-1) !important;
 }
 
 .rounded-2 {
-  border-radius: var(--border-radius) !important;
+  border-radius: var(--border-radius-2) !important;
 }
 
 .rounded-3 {
-  border-radius: var(--border-radius-lg) !important;
+  border-radius: var(--border-radius-3) !important;
 }
 
 .rounded-4 {
-  border-radius: var(--border-radius-xl) !important;
+  border-radius: var(--border-radius-4) !important;
 }
 
 .rounded-5 {
-  border-radius: var(--border-radius-xxl) !important;
+  border-radius: var(--border-radius-5) !important;
 }
 
 .rounded-circle {
@@ -39,8 +35,8 @@
 }
 
 .rounded-top {
-  border-top-left-radius: var(--border-radius) !important;
-  border-top-right-radius: var(--border-radius) !important;
+  border-top-left-radius: var(--radius) !important;
+  border-top-right-radius: var(--radius) !important;
 }
 
 .rounded-top-0 {
@@ -48,34 +44,29 @@
   border-top-right-radius: 0 !important;
 }
 
-.rounded-top-d {
-  border-top-left-radius: var(--border-radius-default) !important;
-  border-top-right-radius: var(--border-radius-default) !important;
-}
-
 .rounded-top-1 {
-  border-top-left-radius: var(--border-radius-sm) !important;
-  border-top-right-radius: var(--border-radius-sm) !important;
+  border-top-left-radius: var(--border-radius-1) !important;
+  border-top-right-radius: var(--border-radius-1) !important;
 }
 
 .rounded-top-2 {
-  border-top-left-radius: var(--border-radius) !important;
-  border-top-right-radius: var(--border-radius) !important;
+  border-top-left-radius: var(--border-radius-2) !important;
+  border-top-right-radius: var(--border-radius-2) !important;
 }
 
 .rounded-top-3 {
-  border-top-left-radius: var(--border-radius-lg) !important;
-  border-top-right-radius: var(--border-radius-lg) !important;
+  border-top-left-radius: var(--border-radius-3) !important;
+  border-top-right-radius: var(--border-radius-3) !important;
 }
 
 .rounded-top-4 {
-  border-top-left-radius: var(--border-radius-xl) !important;
-  border-top-right-radius: var(--border-radius-xl) !important;
+  border-top-left-radius: var(--border-radius-4) !important;
+  border-top-right-radius: var(--border-radius-4) !important;
 }
 
 .rounded-top-5 {
-  border-top-left-radius: var(--border-radius-xxl) !important;
-  border-top-right-radius: var(--border-radius-xxl) !important;
+  border-top-left-radius: var(--border-radius-5) !important;
+  border-top-right-radius: var(--border-radius-5) !important;
 }
 
 .rounded-top-circle {
@@ -89,8 +80,8 @@
 }
 
 .rounded-end {
-  border-top-right-radius: var(--border-radius) !important;
-  border-bottom-right-radius: var(--border-radius) !important;
+  border-top-right-radius: var(--radius) !important;
+  border-bottom-right-radius: var(--radius) !important;
 }
 
 .rounded-end-0 {
@@ -98,34 +89,29 @@
   border-bottom-right-radius: 0 !important;
 }
 
-.rounded-end-d {
-  border-top-right-radius: var(--border-radius-default) !important;
-  border-bottom-right-radius: var(--border-radius-default) !important;
-}
-
 .rounded-end-1 {
-  border-top-right-radius: var(--border-radius-sm) !important;
-  border-bottom-right-radius: var(--border-radius-sm) !important;
+  border-top-right-radius: var(--border-radius-1) !important;
+  border-bottom-right-radius: var(--border-radius-1) !important;
 }
 
 .rounded-end-2 {
-  border-top-right-radius: var(--border-radius) !important;
-  border-bottom-right-radius: var(--border-radius) !important;
+  border-top-right-radius: var(--border-radius-2) !important;
+  border-bottom-right-radius: var(--border-radius-2) !important;
 }
 
 .rounded-end-3 {
-  border-top-right-radius: var(--border-radius-lg) !important;
-  border-bottom-right-radius: var(--border-radius-lg) !important;
+  border-top-right-radius: var(--border-radius-3) !important;
+  border-bottom-right-radius: var(--border-radius-3) !important;
 }
 
 .rounded-end-4 {
-  border-top-right-radius: var(--border-radius-xl) !important;
-  border-bottom-right-radius: var(--border-radius-xl) !important;
+  border-top-right-radius: var(--border-radius-4) !important;
+  border-bottom-right-radius: var(--border-radius-4) !important;
 }
 
 .rounded-end-5 {
-  border-top-right-radius: var(--border-radius-xxl) !important;
-  border-bottom-right-radius: var(--border-radius-xxl) !important;
+  border-top-right-radius: var(--border-radius-5) !important;
+  border-bottom-right-radius: var(--border-radius-5) !important;
 }
 
 .rounded-end-circle {
@@ -139,8 +125,8 @@
 }
 
 .rounded-bottom {
-  border-bottom-right-radius: var(--border-radius) !important;
-  border-bottom-left-radius: var(--border-radius) !important;
+  border-bottom-right-radius: var(--radius) !important;
+  border-bottom-left-radius: var(--radius) !important;
 }
 
 .rounded-bottom-0 {
@@ -148,34 +134,29 @@
   border-bottom-left-radius: 0 !important;
 }
 
-.rounded-bottom-d {
-  border-bottom-right-radius: var(--border-radius-default) !important;
-  border-bottom-left-radius: var(--border-radius-default) !important;
-}
-
 .rounded-bottom-1 {
-  border-bottom-right-radius: var(--border-radius-sm) !important;
-  border-bottom-left-radius: var(--border-radius-sm) !important;
+  border-bottom-right-radius: var(--border-radius-1) !important;
+  border-bottom-left-radius: var(--border-radius-1) !important;
 }
 
 .rounded-bottom-2 {
-  border-bottom-right-radius: var(--border-radius) !important;
-  border-bottom-left-radius: var(--border-radius) !important;
+  border-bottom-right-radius: var(--border-radius-2) !important;
+  border-bottom-left-radius: var(--border-radius-2) !important;
 }
 
 .rounded-bottom-3 {
-  border-bottom-right-radius: var(--border-radius-lg) !important;
-  border-bottom-left-radius: var(--border-radius-lg) !important;
+  border-bottom-right-radius: var(--border-radius-3) !important;
+  border-bottom-left-radius: var(--border-radius-3) !important;
 }
 
 .rounded-bottom-4 {
-  border-bottom-right-radius: var(--border-radius-xl) !important;
-  border-bottom-left-radius: var(--border-radius-xl) !important;
+  border-bottom-right-radius: var(--border-radius-4) !important;
+  border-bottom-left-radius: var(--border-radius-4) !important;
 }
 
 .rounded-bottom-5 {
-  border-bottom-right-radius: var(--border-radius-xxl) !important;
-  border-bottom-left-radius: var(--border-radius-xxl) !important;
+  border-bottom-right-radius: var(--border-radius-5) !important;
+  border-bottom-left-radius: var(--border-radius-5) !important;
 }
 
 .rounded-bottom-circle {
@@ -189,8 +170,8 @@
 }
 
 .rounded-start {
-  border-bottom-left-radius: var(--border-radius) !important;
-  border-top-left-radius: var(--border-radius) !important;
+  border-bottom-left-radius: var(--radius) !important;
+  border-top-left-radius: var(--radius) !important;
 }
 
 .rounded-start-0 {
@@ -198,34 +179,29 @@
   border-top-left-radius: 0 !important;
 }
 
-.rounded-start-d {
-  border-bottom-left-radius: var(--border-radius-default) !important;
-  border-top-left-radius: var(--border-radius-default) !important;
-}
-
 .rounded-start-1 {
-  border-bottom-left-radius: var(--border-radius-sm) !important;
-  border-top-left-radius: var(--border-radius-sm) !important;
+  border-bottom-left-radius: var(--border-radius-1) !important;
+  border-top-left-radius: var(--border-radius-1) !important;
 }
 
 .rounded-start-2 {
-  border-bottom-left-radius: var(--border-radius) !important;
-  border-top-left-radius: var(--border-radius) !important;
+  border-bottom-left-radius: var(--border-radius-2) !important;
+  border-top-left-radius: var(--border-radius-2) !important;
 }
 
 .rounded-start-3 {
-  border-bottom-left-radius: var(--border-radius-lg) !important;
-  border-top-left-radius: var(--border-radius-lg) !important;
+  border-bottom-left-radius: var(--border-radius-3) !important;
+  border-top-left-radius: var(--border-radius-3) !important;
 }
 
 .rounded-start-4 {
-  border-bottom-left-radius: var(--border-radius-xl) !important;
-  border-top-left-radius: var(--border-radius-xl) !important;
+  border-bottom-left-radius: var(--border-radius-4) !important;
+  border-top-left-radius: var(--border-radius-4) !important;
 }
 
 .rounded-start-5 {
-  border-bottom-left-radius: var(--border-radius-xxl) !important;
-  border-top-left-radius: var(--border-radius-xxl) !important;
+  border-bottom-left-radius: var(--border-radius-5) !important;
+  border-top-left-radius: var(--border-radius-5) !important;
 }
 
 .rounded-start-circle {
@@ -237,4 +213,3 @@
   border-bottom-left-radius: var(--border-radius-pill) !important;
   border-top-left-radius: var(--border-radius-pill) !important;
 }
-