@rhavenside/baseline-ui 1.0.21 → 1.0.23

package/src/components/_sidebar.scss

@@ -13,7 +13,7 @@
   background: var(--glass-bg-medium);
   backdrop-filter: blur(var(--glass-blur-md));
   -webkit-backdrop-filter: blur(var(--glass-blur-md));
-  border: 1px solid var(--glass-border-medium);
+  border: 0.0625rem solid var(--glass-border-medium); // 1px
   border-radius: var(--tech-border-radius-sm);
   color: var(--color-text);
   cursor: pointer;
@@ -25,8 +25,8 @@
   }
 
   &:focus {
-    outline: 1px solid var(--color-border-focus);
-    outline-offset: 2px;
+    outline: 0.0625rem solid var(--color-border-focus); // 1px
+    outline-offset: 0.125rem; // 2px
   }
 
   // Hide on desktop (≥768px)
@@ -41,22 +41,28 @@
   top: 0;
   left: 0;
   z-index: var(--z-index-sidebar);
-  width: 280px;
+  width: 17.5rem; // 280px - Desktop default
   height: 100vh;
   display: flex;
   flex-direction: column;
   background: var(--glass-bg-medium);
   backdrop-filter: blur(var(--glass-blur-lg));
   -webkit-backdrop-filter: blur(var(--glass-blur-lg));
-  border-right: 1px solid var(--glass-border-medium);
+  border-right: 0.0625rem solid var(--glass-border-medium); // 1px
   box-shadow: var(--glass-shadow-lg);
   transform: translateX(-100%);
   transition: transform var(--transition-duration-slow) var(--transition-ease-out);
   overflow: hidden; // Let .bl-sidebar-nav handle scrolling
 
+  // Mobile: Breitere Sidebar für bessere Nutzbarkeit
+  @media (max-width: 767.98px) {
+    width: min(85%, 20rem); // 320px
+    max-width: 90vw; // Sicherheitsgrenze
+  }
+
   // Custom Scrollbar for sidebar container (fallback)
   &::-webkit-scrollbar {
-    width: 6px;
+    width: 0.375rem; // 6px
   }
 
   &::-webkit-scrollbar-track {
@@ -65,8 +71,8 @@
 
   &::-webkit-scrollbar-thumb {
     background: var(--glass-bg-medium);
-    border-radius: 3px;
-    border: 1px solid var(--glass-border-light);
+    border-radius: 0.1875rem; // 3px
+    border: 0.0625rem solid var(--glass-border-light); // 1px
 
     &:hover {
       background: var(--glass-bg-heavy);
@@ -84,7 +90,8 @@
     height: auto;
     min-height: 100vh;
     box-shadow: none;
-    border-right: 1px solid var(--glass-border-medium);
+    border-right: 0.0625rem solid var(--glass-border-medium); // 1px
+    width: 17.5rem; // 280px - Desktop bleibt 17.5rem
   }
 
   // Sidebar Open (Mobile)
@@ -95,7 +102,7 @@
   // Sidebar Collapsed (Desktop)
   &.bl-sidebar-collapsed {
     @media (min-width: 768px) {
-      width: 64px;
+      width: 4rem; // 64px
 
       .bl-sidebar-header h3,
       .bl-sidebar-nav .bl-nav-link span:not(.bl-icon),
@@ -121,7 +128,7 @@
     left: auto;
     right: 0;
     border-right: none;
-    border-left: 1px solid var(--glass-border-medium);
+    border-left: 0.0625rem solid var(--glass-border-medium); // 1px
     transform: translateX(100%);
 
     &.bl-sidebar-open {
@@ -195,7 +202,7 @@
   align-items: center;
   justify-content: space-between;
   padding: var(--spacing-lg) var(--spacing-md);
-  border-bottom: 1px solid var(--glass-border-medium);
+  border-bottom: 0.0625rem solid var(--glass-border-medium); // 1px
   background: var(--glass-bg-light);
   backdrop-filter: blur(var(--glass-blur-sm));
   -webkit-backdrop-filter: blur(var(--glass-blur-sm));
@@ -224,11 +231,11 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 32px;
-  height: 32px;
+  width: 2rem; // 32px
+  height: 2rem; // 32px
   padding: 0;
   background: transparent;
-  border: 1px solid transparent;
+  border: 0.0625rem solid transparent; // 1px
   border-radius: var(--tech-border-radius-sm);
   color: var(--color-text);
   cursor: pointer;
@@ -242,8 +249,8 @@
   }
 
   &:focus {
-    outline: 1px solid var(--color-border-focus);
-    outline-offset: 2px;
+    outline: 0.0625rem solid var(--color-border-focus); // 1px
+    outline-offset: 0.125rem; // 2px
   }
 
   // Hide on desktop (collapsed sidebar shows it)
@@ -270,7 +277,7 @@
 
   // Custom Scrollbar (Webkit)
   &::-webkit-scrollbar {
-    width: 6px;
+    width: 0.375rem; // 6px
   }
 
   &::-webkit-scrollbar-track {
@@ -279,8 +286,8 @@
 
   &::-webkit-scrollbar-thumb {
     background: var(--glass-bg-medium);
-    border-radius: 3px;
-    border: 1px solid var(--glass-border-light);
+    border-radius: 0.1875rem; // 3px
+    border: 0.0625rem solid var(--glass-border-light); // 1px
 
     &:hover {
       background: var(--glass-bg-heavy);
@@ -311,11 +318,11 @@
     line-height: var(--line-height-base);
     color: var(--color-text);
     text-decoration: none;
-    min-height: 40px; // Better touch target
+    min-height: 2.5rem; // 40px - Better touch target
 
     @media (max-width: 767.98px) {
       padding: var(--spacing-md);
-      min-height: 44px; // iOS touch target recommendation
+      min-height: 2.75rem; // 44px - iOS touch target recommendation
     }
 
     span:not(.bl-icon) {
@@ -325,8 +332,8 @@
 
     .bl-icon {
       flex-shrink: 0;
-      width: 18px;
-      height: 18px;
+      width: 1.125rem; // 18px
+      height: 1.125rem; // 18px
       color: var(--color-text-muted);
       transition: var(--transition-base);
     }
@@ -334,7 +341,7 @@
     &:hover {
       background: var(--glass-bg-light);
       color: var(--color-text);
-      transform: translateX(2px); // Subtle slide animation
+      transform: translateX(0.125rem); // 2px - Subtle slide animation
 
       .bl-icon {
         color: var(--color-text);
@@ -342,14 +349,14 @@
     }
 
     &:active {
-      transform: translateX(1px);
+      transform: translateX(0.0625rem); // 1px
     }
 
     &.bl-active {
       background: var(--glass-bg-medium);
       color: var(--color-text);
       font-weight: var(--font-weight-medium);
-      padding-left: calc(var(--spacing-md) - 3px);
+      padding-left: calc(var(--spacing-md) - 0.1875rem); // 3px
       transform: translateX(0);
 
       &::before {
@@ -358,7 +365,7 @@
         left: 0;
         top: 0;
         bottom: 0;
-        width: 3px;
+        width: 0.1875rem; // 3px
         background: var(--color-accent);
         border-radius: 0 var(--tech-border-radius-sm) var(--tech-border-radius-sm) 0;
       }
@@ -374,8 +381,8 @@
     }
 
     &:focus {
-      outline: 1px solid var(--color-border-focus);
-      outline-offset: -2px;
+      outline: 0.0625rem solid var(--color-border-focus); // 1px
+      outline-offset: -0.125rem; // -2px
     }
   }
 }
@@ -395,7 +402,7 @@
   // Visual separator between groups (optional)
   + .bl-nav-group {
     padding-top: var(--spacing-md);
-    border-top: 1px solid var(--glass-border-light);
+    border-top: 0.0625rem solid var(--glass-border-light); // 1px
     margin-top: var(--spacing-lg);
   }
 }
@@ -416,7 +423,7 @@
 // Sidebar Footer (optional)
 .bl-sidebar-footer {
   padding: var(--spacing-md);
-  border-top: 1px solid var(--glass-border-medium);
+  border-top: 0.0625rem solid var(--glass-border-medium); // 1px
   background: var(--glass-bg-light);
   backdrop-filter: blur(var(--glass-blur-sm));
   -webkit-backdrop-filter: blur(var(--glass-blur-sm));

package/src/components/_spinner.scss

@@ -22,10 +22,10 @@
   &::before {
     content: '';
     position: absolute;
-    top: 2px;
-    left: 2px;
-    right: 2px;
-    bottom: 2px;
+    top: 0.125rem; // 2px
+    left: 0.125rem; // 2px
+    right: 0.125rem; // 2px
+    bottom: 0.125rem; // 2px
     background: var(--color-accent);
     opacity: 0.3;
     border-radius: var(--tech-border-radius-sm);

package/src/components/_table.scss

@@ -13,16 +13,16 @@
   background: var(--glass-bg-medium);
   backdrop-filter: blur(var(--glass-blur-md));
   -webkit-backdrop-filter: blur(var(--glass-blur-md));
-  border: 1px solid var(--glass-border-medium);
+  border: 0.0625rem solid var(--glass-border-medium); // 1px
   border-radius: var(--tech-border-radius-md);
   overflow: hidden;
 
   > :not(caption) > * > * {
     padding: var(--spacing-sm) var(--spacing-md);
     background-color: transparent;
-    border-bottom-width: 1px;
+    border-bottom-width: 0.0625rem; // 1px
     border-bottom-color: var(--glass-border-light);
-    border-right-width: 1px;
+    border-right-width: 0.0625rem; // 1px
     border-right-color: var(--glass-border-light);
     box-shadow: inset 0 0 0 9999px transparent;
   }
@@ -40,7 +40,7 @@
   }
 
   > :not(:first-child) {
-    border-top: 1px solid var(--glass-border-light);
+    border-top: 0.0625rem solid var(--glass-border-light); // 1px
   }
 }
 
@@ -72,13 +72,13 @@
 }
 
 .bl-table-bordered {
-  border: 1px solid var(--glass-border-medium);
+  border: 0.0625rem solid var(--glass-border-medium); // 1px
 
   > :not(caption) > * {
-    border-width: 1px 0;
+    border-width: 0.0625rem 0; // 1px 0
 
     > * {
-      border-width: 0 1px;
+      border-width: 0 0.0625rem; // 0 1px
       border-color: var(--glass-border-light);
     }
   }

package/src/components/_toast.scss

@@ -48,7 +48,7 @@
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sm);
-  max-width: 400px;
+  max-width: 25rem; // 400px
   width: 100%;
 
   @media (max-width: 575.98px) {
@@ -66,12 +66,12 @@
   background: var(--glass-bg-medium);
   backdrop-filter: blur(var(--glass-blur-lg));
   -webkit-backdrop-filter: blur(var(--glass-blur-lg));
-  border: 1px solid var(--glass-border-medium);
+  border: 0.0625rem solid var(--glass-border-medium); // 1px
   border-radius: var(--tech-border-radius-md);
   box-shadow: var(--glass-shadow-lg);
   color: var(--color-text);
   pointer-events: all;
-  min-width: 300px;
+  min-width: 18.75rem; // 300px
   max-width: 100%;
   animation: bl-toast-slide-in var(--transition-duration-base) var(--transition-ease-out);
 
@@ -113,8 +113,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 24px;
-  height: 24px;
+  width: 1.5rem; // 24px
+  height: 1.5rem; // 24px
   padding: 0;
   background: transparent;
   border: none;
@@ -132,14 +132,14 @@
   }
 
   &:focus {
-    outline: 1px solid var(--color-border-focus);
-    outline-offset: 2px;
+    outline: 0.0625rem solid var(--color-border-focus); // 1px
+    outline-offset: 0.125rem; // 2px
   }
 }
 
 // Toast Variants
 .bl-toast-success {
-  border-left: 4px solid var(--color-success);
+  border-left: 0.25rem solid var(--color-success); // 4px
 
   .bl-toast-title {
     color: var(--color-success);
@@ -147,7 +147,7 @@
 }
 
 .bl-toast-error {
-  border-left: 4px solid var(--color-error);
+  border-left: 0.25rem solid var(--color-error); // 4px
 
   .bl-toast-title {
     color: var(--color-error);
@@ -155,7 +155,7 @@
 }
 
 .bl-toast-warning {
-  border-left: 4px solid var(--color-warning);
+  border-left: 0.25rem solid var(--color-warning); // 4px
 
   .bl-toast-title {
     color: var(--color-warning);
@@ -163,7 +163,7 @@
 }
 
 .bl-toast-info {
-  border-left: 4px solid var(--color-info);
+  border-left: 0.25rem solid var(--color-info); // 4px
 
   .bl-toast-title {
     color: var(--color-info);
@@ -175,8 +175,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 24px;
-  height: 24px;
+  width: 1.5rem; // 24px
+  height: 1.5rem; // 24px
   flex-shrink: 0;
   font-size: 1.25rem;
 }
@@ -185,7 +185,7 @@
 @keyframes bl-toast-slide-in {
   from {
     opacity: 0;
-    transform: translateY(-20px);
+    transform: translateY(-1.25rem); // -20px
   }
   to {
     opacity: 1;
@@ -200,7 +200,7 @@
   }
   to {
     opacity: 0;
-    transform: translateY(-20px);
+    transform: translateY(-1.25rem); // -20px
   }
 }
 
@@ -220,7 +220,7 @@
 @keyframes bl-toast-slide-in-bottom {
   from {
     opacity: 0;
-    transform: translateY(20px);
+    transform: translateY(1.25rem); // 20px
   }
   to {
     opacity: 1;
@@ -235,7 +235,7 @@
   }
   to {
     opacity: 0;
-    transform: translateY(20px);
+    transform: translateY(1.25rem); // 20px
   }
 }
 

package/src/components/_tooltip.scss

@@ -17,7 +17,7 @@
   position: absolute;
   z-index: var(--z-index-tooltip);
   display: none;
-  max-width: 200px;
+  max-width: 12.5rem; // 200px
   padding: var(--spacing-xs) var(--spacing-sm);
   font-size: var(--font-size-xs);
   font-family: var(--font-family-mono); // Precise, monospace possible
@@ -29,7 +29,7 @@
   background: var(--glass-bg-medium);
   backdrop-filter: blur(var(--glass-blur-md));
   -webkit-backdrop-filter: blur(var(--glass-blur-md));
-  border: 1px solid var(--glass-border-medium);
+  border: 0.0625rem solid var(--glass-border-medium); // 1px
   border-radius: var(--tech-border-radius-sm);
   opacity: 0;
   transition: var(--transition-opacity);
@@ -54,9 +54,9 @@
       left: 50%;
       width: 0;
       height: 0;
-      margin-left: -6px;
+      margin-left: -0.375rem; // -6px
       content: "";
-      border-width: 6px 6px 0 6px;
+      border-width: 0.375rem 0.375rem 0 0.375rem; // 6px 6px 0 6px
       border-style: solid;
       border-color: var(--glass-bg-medium) transparent transparent transparent;
       clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%); // Trapezoidal
@@ -77,9 +77,9 @@
       left: 50%;
       width: 0;
       height: 0;
-      margin-left: -6px;
+      margin-left: -0.375rem; // -6px
       content: "";
-      border-width: 0 6px 6px 6px;
+      border-width: 0 0.375rem 0.375rem 0.375rem; // 0 6px 6px 6px
       border-style: solid;
       border-color: transparent transparent var(--glass-bg-medium) transparent;
       clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%); // Trapezoidal
@@ -100,9 +100,9 @@
       left: 100%;
       width: 0;
       height: 0;
-      margin-top: -6px;
+      margin-top: -0.375rem; // -6px
       content: "";
-      border-width: 6px 0 6px 6px;
+      border-width: 0.375rem 0 0.375rem 0.375rem; // 6px 0 6px 6px
       border-style: solid;
       border-color: transparent transparent transparent var(--glass-bg-medium);
       clip-path: polygon(0 20%, 0 80%, 100% 100%, 100% 0); // Trapezoidal
@@ -123,9 +123,9 @@
       right: 100%;
       width: 0;
       height: 0;
-      margin-top: -6px;
+      margin-top: -0.375rem; // -6px
       content: "";
-      border-width: 6px 6px 6px 0;
+      border-width: 0.375rem 0.375rem 0.375rem 0; // 6px 6px 6px 0
       border-style: solid;
       border-color: transparent var(--glass-bg-medium) transparent transparent;
       clip-path: polygon(0 0, 0 100%, 100% 80%, 100% 20%); // Trapezoidal

package/src/layout/_container.scss

@@ -13,27 +13,27 @@
 
   // Small devices (landscape phones, 640px and up)
   @media (min-width: 640px) {
-    max-width: 640px;
+    max-width: 40rem; // 640px
   }
 
   // Medium devices (tablets, 768px and up)
   @media (min-width: 768px) {
-    max-width: 768px;
+    max-width: 48rem; // 768px
   }
 
   // Large devices (desktops, 1024px and up)
   @media (min-width: 1024px) {
-    max-width: 1024px;
+    max-width: 64rem; // 1024px
   }
 
   // Extra large devices (large desktops, 1280px and up)
   @media (min-width: 1280px) {
-    max-width: 1280px;
+    max-width: 80rem; // 1280px
   }
 
   // 2X Large devices (larger desktops, 1536px and up)
   @media (min-width: 1536px) {
-    max-width: 1536px;
+    max-width: 96rem; // 1536px
   }
 }
 

package/src/tokens/_borders.scss

@@ -4,17 +4,17 @@
 
 // Border Widths
 $border-width-none: 0;
-$border-width-thin: 1px;
-$border-width-base: 2px;
-$border-width-thick: 4px;
+$border-width-thin: 0.0625rem; // 1px
+$border-width-base: 0.125rem; // 2px
+$border-width-thick: 0.25rem; // 4px
 
 // Border Radius (Technical - Max 4px)
 $border-radius-none: 0;
-$border-radius-sm: 2px;
-$border-radius-md: 4px;
-$border-radius-lg: 4px; // Max 4px
-$border-radius-xl: 4px; // Max 4px
-$border-radius-2xl: 4px; // Max 4px
+$border-radius-sm: 0.125rem; // 2px
+$border-radius-md: 0.25rem; // 4px
+$border-radius-lg: 0.25rem; // 4px - Max 4px
+$border-radius-xl: 0.25rem; // 4px - Max 4px
+$border-radius-2xl: 0.25rem; // 4px - Max 4px
 $border-radius-full: 9999px; // Keep for special cases like switches
 
 // Export as CSS Custom Properties

package/src/tokens/_glassmorphism.scss

@@ -9,10 +9,10 @@ $glass-bg-heavy: rgba(255, 255, 255, 0.12);
 $glass-bg-etched: rgba(255, 255, 255, 0.15); // For table headers (etched glass)
 
 // Backdrop Blur (subtle, reduced)
-$glass-blur-sm: 2px;
-$glass-blur-md: 4px;
-$glass-blur-lg: 6px;
-$glass-blur-xl: 8px;
+$glass-blur-sm: 0.125rem; // 2px
+$glass-blur-md: 0.25rem; // 4px
+$glass-blur-lg: 0.375rem; // 6px
+$glass-blur-xl: 0.5rem; // 8px
 
 // Glass Borders (cool, slightly bright on dark ground)
 $glass-border-light: rgba(255, 255, 255, 0.1);
@@ -20,14 +20,14 @@ $glass-border-medium: rgba(255, 255, 255, 0.15);
 $glass-border-heavy: rgba(255, 255, 255, 0.2);
 
 // Glass Shadows (subtle gray, no colorful glows)
-$glass-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
-$glass-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.15);
-$glass-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.2);
+$glass-shadow-sm: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.1); // 0 1px 2px
+$glass-shadow-md: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15); // 0 2px 4px
+$glass-shadow-lg: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2); // 0 4px 8px
 
 // Technical Border Radius (max 4px)
 $tech-border-radius-none: 0;
-$tech-border-radius-sm: 2px;
-$tech-border-radius-md: 4px;
+$tech-border-radius-sm: 0.125rem; // 2px
+$tech-border-radius-md: 0.25rem; // 4px
 
 // Export as CSS Custom Properties
 :root {

package/src/utilities/_accessibility.scss

@@ -5,10 +5,10 @@
 // Screen Reader Only
 .bl-sr-only {
   position: absolute;
-  width: 1px;
-  height: 1px;
+  width: 0.0625rem; // 1px
+  height: 0.0625rem; // 1px
   padding: 0;
-  margin: -1px;
+  margin: -0.0625rem; // -1px
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
@@ -29,7 +29,7 @@
 // Skip Link
 .bl-skip-link {
   position: absolute;
-  top: -40px;
+  top: -2.5rem; // -40px
   left: 0;
   z-index: var(--z-index-tooltip);
   padding: var(--spacing-sm) var(--spacing-md);
@@ -40,8 +40,8 @@
 
   &:focus {
     top: var(--spacing-sm);
-    outline: 2px solid var(--color-border-focus);
-    outline-offset: 2px;
+    outline: 0.125rem solid var(--color-border-focus); // 2px
+    outline-offset: 0.125rem; // 2px
   }
 }
 
@@ -58,7 +58,7 @@
   }
 
   .bl-skip-link {
-    border: 2px solid currentColor;
+    border: 0.125rem solid currentColor; // 2px
   }
 }