@semanticus/semanticus-css 0.8.0 → 1.0.0

package/src/utilities/effects/_focus-ring.css

@@ -0,0 +1,33 @@
+.focus-ring:focus {
+  outline: 0;
+  box-shadow: var(--focus-ring-x, 0) var(--focus-ring-y, 0) var(--focus-ring-blur, 0) var(--outline-size) var(--focus-ring-color);
+}
+
+.focus-ring,
+.focus-ring-primary {
+  --focus-ring-color: var(--color-primary-focus-ring);
+}
+
+.focus-ring-secondary {
+  --focus-ring-color: var(--color-secondary-focus-ring);
+}
+
+.focus-ring-success {
+  --focus-ring-color: var(--color-success-focus-ring);
+}
+
+.focus-ring-info {
+  --focus-ring-color: var(--color-info-focus-ring);
+}
+
+.focus-ring-warning {
+  --focus-ring-color: var(--color-warning-focus-ring);
+}
+
+.focus-ring-danger {
+  --focus-ring-color: var(--color-danger-focus-ring);
+}
+
+.focus-ring-contrast {
+  --focus-ring-color: var(--color-contrast-focus-ring);
+}

package/src/utilities/effects/_shadows.css

@@ -1,8 +1,3 @@
-.focus-ring:focus {
-  outline: 0;
-  box-shadow: var(--focus-ring-x, 0) var(--focus-ring-y, 0) var(--focus-ring-blur, 0) var(--focus-ring-width) var(--focus-ring-color);
-}
-
 .shadow {
   box-shadow: var(--shadow-md) !important;
 }
@@ -18,31 +13,3 @@
 .shadow-none {
   box-shadow: none !important;
 }
-
-.focus-ring-primary {
-  --focus-ring-color: rgba(var(--color-primary-rgb), var(--focus-ring-opacity));
-}
-
-.focus-ring-secondary {
-  --focus-ring-color: rgba(var(--color-secondary-rgb), var(--focus-ring-opacity));
-}
-
-.focus-ring-success {
-  --focus-ring-color: rgba(var(--color-success-rgb), var(--focus-ring-opacity));
-}
-
-.focus-ring-info {
-  --focus-ring-color: rgba(var(--color-info-rgb), var(--focus-ring-opacity));
-}
-
-.focus-ring-warning {
-  --focus-ring-color: rgba(var(--color-warning-rgb), var(--focus-ring-opacity));
-}
-
-.focus-ring-danger {
-  --focus-ring-color: rgba(var(--color-danger-rgb), var(--focus-ring-opacity));
-}
-
-.focus-ring-contrast {
-  --focus-ring-color: rgba(var(--color-contrast-rgb), var(--focus-ring-opacity));
-}

package/src/utilities/index.css

@@ -0,0 +1,16 @@
+/*!
+ * Semanticus CSS Utilities Bundle v0.9.0 (https://semanticus.design/)
+ *
+ * Atomic utility classes (spacing, colors, flexbox, grid, display, positioning, typography, effects, borders, sizing)
+ *
+ * Original works: see https://github.com/semanticus/semanticus-css/blob/main/NOTICE for copyright and license details
+ *
+ * Modifications: Copyright (c) 2026 Joao Goncalves
+ * Licensed under MIT (https://github.com/semanticus/semanticus-css/blob/main/LICENSE)
+ */
+
+/* Variables */
+@import '../variables/_breakpoints.css';
+
+/* Utilities */
+@import './modules.css';

package/src/utilities/layout/_misc.css

@@ -8,10 +8,8 @@
   display: inline-flex;
   gap: 0.375rem;
   align-items: center;
-  -webkit-text-decoration-color: rgba(var(--color-link-rgb), var(--link-opacity, 0.5));
-  text-decoration-color: rgba(var(--color-link-rgb), var(--link-opacity, 0.5));
+  text-decoration-color: oklch(from var(--color-text) l c h / 0.4);
   text-underline-offset: 0.25em;
-  -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
 }
 .icon-link > .bi {
@@ -31,7 +29,6 @@
   transform: var(--icon-link-transform, translate3d(0.25em, 0, 0));
 }
 
-
 .stretched-link::after {
   position: absolute;
   top: 0;
@@ -45,7 +42,7 @@
 .vr {
   display: inline-block;
   align-self: stretch;
-  width: var(--border-width);
+  width: var(--border-size);
   min-height: 1em;
   background-color: currentcolor;
   opacity: 0.25;

package/src/utilities/layout/{_grid.css → _ratio.css}

@@ -1,22 +1,3 @@
-/**
- * Grid
- * Minimal grid system with auto-layout columns
- */
-.grid {
-  grid-column-gap: var(--grid-column-gap);
-  grid-row-gap: var(--grid-row-gap);
-  display: grid;
-  grid-template-columns: 1fr;
-
-  @media (--breakpoint-sm) {
-    grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
-  }
-
-  & > * {
-    min-width: 0;
-  }
-}
-
 .ratio {
   position: relative;
   width: 100%;

package/src/utilities/modules.css

@@ -13,13 +13,15 @@
 @import './_variables.css';
 
 /* borders */
+@import './borders/_border-radius.css';
 @import './borders/_border-style.css';
 @import './borders/_border-width.css';
-@import './borders/_border-radius.css';
 
 /* colors */
-@import './colors/_background-colors.css';
+@import './colors/_bg-colors.css';
 @import './colors/_border-colors.css';
+@import './colors/_subtle-colors.css';
+@import './colors/_text-bg-colors.css';
 @import './colors/_text-colors.css';
 
 /* display */
@@ -28,13 +30,17 @@
 @import './display/_visibility.css';
 
 /* effects */
+@import './effects/_focus-ring.css';
 @import './effects/_opacity.css';
 @import './effects/_shadows.css';
 @import './effects/_transforms.css';
 
+/* grid */
+@import './_grid.css';
+
 /* layout */
 @import './layout/_flexbox.css';
-@import './layout/_grid.css';
+@import './layout/_ratio.css';
 @import './layout/_misc.css';
 
 /* media */

package/src/utilities/sizing/_width.css

@@ -1,3 +1,7 @@
+.w-10 {
+  width: 10% !important;
+}
+
 .w-25 {
   width: 25% !important;
 }
@@ -18,6 +22,10 @@
   width: 75% !important;
 }
 
+.w-90 {
+  width: 90% !important;
+}
+
 .w-100 {
   width: 100% !important;
 }