@semanticus/semanticus-css 0.9.0 → 1.0.0

package/src/utilities/colors/_text-colors.css

@@ -1,461 +1,84 @@
-.link-primary {
-  color: rgba(var(--color-primary-rgb), var(--link-opacity, 1)) !important;
-  -webkit-text-decoration-color: rgba(var(--color-primary-rgb), var(--link-underline-opacity, 1)) !important;
-  text-decoration-color: rgba(var(--color-primary-rgb), var(--link-underline-opacity, 1)) !important;
-}
-.link-primary:hover, .link-primary:focus {
-  color: rgba(var(--color-primary-emphasis-rgb), var(--link-opacity, 1)) !important;
-  -webkit-text-decoration-color: rgba(var(--color-primary-emphasis-rgb), var(--link-underline-opacity, 1)) !important;
-  text-decoration-color: rgba(var(--color-primary-emphasis-rgb), var(--link-underline-opacity, 1)) !important;
-}
-
-.link-secondary {
-  color: rgba(var(--color-secondary-rgb), var(--link-opacity, 1)) !important;
-  -webkit-text-decoration-color: rgba(var(--color-secondary-rgb), var(--link-underline-opacity, 1)) !important;
-  text-decoration-color: rgba(var(--color-secondary-rgb), var(--link-underline-opacity, 1)) !important;
-}
-.link-secondary:hover, .link-secondary:focus {
-  color: rgba(var(--color-secondary-emphasis-rgb), var(--link-opacity, 1)) !important;
-  -webkit-text-decoration-color: rgba(var(--color-secondary-emphasis-rgb), var(--link-underline-opacity, 1)) !important;
-  text-decoration-color: rgba(var(--color-secondary-emphasis-rgb), var(--link-underline-opacity, 1)) !important;
-}
-
-.link-success {
-  color: rgba(var(--color-success-rgb), var(--link-opacity, 1)) !important;
-  -webkit-text-decoration-color: rgba(var(--color-success-rgb), var(--link-underline-opacity, 1)) !important;
-  text-decoration-color: rgba(var(--color-success-rgb), var(--link-underline-opacity, 1)) !important;
-}
-.link-success:hover, .link-success:focus {
-  color: rgba(var(--color-success-emphasis-rgb), var(--link-opacity, 1)) !important;
-  -webkit-text-decoration-color: rgba(var(--color-success-emphasis-rgb), var(--link-underline-opacity, 1)) !important;
-  text-decoration-color: rgba(var(--color-success-emphasis-rgb), var(--link-underline-opacity, 1)) !important;
-}
-
-.link-info {
-  color: rgba(var(--color-info-rgb), var(--link-opacity, 1)) !important;
-  -webkit-text-decoration-color: rgba(var(--color-info-rgb), var(--link-underline-opacity, 1)) !important;
-  text-decoration-color: rgba(var(--color-info-rgb), var(--link-underline-opacity, 1)) !important;
-}
-.link-info:hover, .link-info:focus {
-  color: rgba(var(--color-info-emphasis-rgb), var(--link-opacity, 1)) !important;
-  -webkit-text-decoration-color: rgba(var(--color-info-emphasis-rgb), var(--link-underline-opacity, 1)) !important;
-  text-decoration-color: rgba(var(--color-info-emphasis-rgb), var(--link-underline-opacity, 1)) !important;
-}
+.text-reset {
+  --color-text-opacity: 100%;
 
-.link-warning {
-  color: rgba(var(--color-warning-rgb), var(--link-opacity, 1)) !important;
-  -webkit-text-decoration-color: rgba(var(--color-warning-rgb), var(--link-underline-opacity, 1)) !important;
-  text-decoration-color: rgba(var(--color-warning-rgb), var(--link-underline-opacity, 1)) !important;
-}
-.link-warning:hover, .link-warning:focus {
-  color: rgba(var(--color-warning-emphasis-rgb), var(--link-opacity, 1)) !important;
-  -webkit-text-decoration-color: rgba(var(--color-warning-emphasis-rgb), var(--link-underline-opacity, 1)) !important;
-  text-decoration-color: rgba(var(--color-warning-emphasis-rgb), var(--link-underline-opacity, 1)) !important;
+  color: inherit !important;
 }
 
-.link-danger {
-  color: rgba(var(--color-danger-rgb), var(--link-opacity, 1)) !important;
-  -webkit-text-decoration-color: rgba(var(--color-danger-rgb), var(--link-underline-opacity, 1)) !important;
-  text-decoration-color: rgba(var(--color-danger-rgb), var(--link-underline-opacity, 1)) !important;
-}
-.link-danger:hover, .link-danger:focus {
-  color: rgba(var(--color-danger-emphasis-rgb), var(--link-opacity, 1)) !important;
-  -webkit-text-decoration-color: rgba(var(--color-danger-emphasis-rgb), var(--link-underline-opacity, 1)) !important;
-  text-decoration-color: rgba(var(--color-danger-emphasis-rgb), var(--link-underline-opacity, 1)) !important;
+.text-body {
+  color: oklch(from var(--color-text) l c h / var(--color-text-opacity)) !important;
 }
 
-.link-contrast {
-  color: rgba(var(--color-contrast-rgb), var(--link-opacity, 1)) !important;
-  -webkit-text-decoration-color: rgba(var(--color-contrast-rgb), var(--link-underline-opacity, 1)) !important;
-  text-decoration-color: rgba(var(--color-contrast-rgb), var(--link-underline-opacity, 1)) !important;
-}
-.link-contrast:hover, .link-contrast:focus {
-  color: rgba(var(--color-contrast-emphasis-rgb), var(--link-opacity, 1)) !important;
-  -webkit-text-decoration-color: rgba(var(--color-contrast-emphasis-rgb), var(--link-underline-opacity, 1)) !important;
-  text-decoration-color: rgba(var(--color-contrast-emphasis-rgb), var(--link-underline-opacity, 1)) !important;
-}
+.text-muted {
+  --color-text: var(--color-text-muted);
 
-.link-body-emphasis {
-  color: rgba(var(--color-emphasis-rgb), var(--link-opacity, 1)) !important;
-  -webkit-text-decoration-color: rgba(var(--color-emphasis-rgb), var(--link-underline-opacity, 1)) !important;
-  text-decoration-color: rgba(var(--color-emphasis-rgb), var(--link-underline-opacity, 1)) !important;
-}
-.link-body-emphasis:hover, .link-body-emphasis:focus {
-  color: rgba(var(--color-emphasis-rgb), var(--link-opacity, 0.75)) !important;
-  -webkit-text-decoration-color: rgba(var(--color-emphasis-rgb), var(--link-underline-opacity, 0.75)) !important;
-  text-decoration-color: rgba(var(--color-emphasis-rgb), var(--link-underline-opacity, 0.75)) !important;
+  color: var(--color-text) !important;
 }
 
 .text-primary {
-  --text-opacity: 1;
-  --color-text: rgba(var(--color-primary-rgb), var(--text-opacity)) !important;
-  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
+  --color-text: oklch(from var(--color-primary-text) l c h / var(--color-text-opacity));
+  --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
 
   color: var(--color-text) !important;
 }
 
 .text-secondary {
-  --text-opacity: 1;
-  --color-text: rgba(var(--color-secondary-rgb), var(--text-opacity)) !important;
-  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
-
-  color: var(--color-text) !important;
-}
-
-.text-success {
-  --text-opacity: 1;
-  --color-text: rgba(var(--color-success-rgb), var(--text-opacity)) !important;
-  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
-
-  color: var(--color-text) !important;
-}
-
-.text-info {
-  --text-opacity: 1;
-  --color-text: rgba(var(--color-info-rgb), var(--text-opacity)) !important;
-  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
-
-  color: var(--color-text) !important;
-}
-
-.text-warning {
-  --text-opacity: 1;
-  --color-text: rgba(var(--color-warning-rgb), var(--text-opacity)) !important;
-  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
-
-  color: var(--color-text) !important;
-}
-
-.text-danger {
-  --text-opacity: 1;
-  --color-text: rgba(var(--color-danger-rgb), var(--text-opacity)) !important;
-  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
+  --color-text: oklch(from var(--color-secondary-text) l c h / var(--color-text-opacity));
+  --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
 
   color: var(--color-text) !important;
 }
 
 .text-contrast {
-  --text-opacity: 1;
-  --color-text: rgba(var(--color-contrast-rgb), var(--text-opacity)) !important;
-  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
+  --color-text: oklch(from var(--color-contrast-text) l c h / var(--color-text-opacity));
+  --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
 
   color: var(--color-text) !important;
 }
 
-.text-body {
-  --text-opacity: 1;
-  --color-text: rgba(var(--color-body-rgb), var(--text-opacity)) !important;
-  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
+.text-success {
+  --color-text: oklch(from var(--color-success-text) l c h / var(--color-text-opacity));
+  --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
 
   color: var(--color-text) !important;
 }
 
-.text-muted {
-  --text-opacity: 1;
-  --color-text: var(--color-text-muted) !important;
-  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
+.text-info {
+  --color-text: oklch(from var(--color-info-text) l c h / var(--color-text-opacity));
+  --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
 
   color: var(--color-text) !important;
 }
 
-.text-body-secondary {
-  --text-opacity: 1;
-  --color-text: var(--secondary-color) !important;
-  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
+.text-warning {
+  --color-text: oklch(from var(--color-warning-text) l c h / var(--color-text-opacity));
+  --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
 
   color: var(--color-text) !important;
 }
 
-.text-body-emphasis {
-  --text-opacity: 1;
-  --color-text: var(--emphasis-color) !important;
-  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
+.text-danger {
+  --color-text: oklch(from var(--color-danger-text) l c h / var(--color-text-opacity));
+  --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
 
   color: var(--color-text) !important;
 }
 
-.text-reset {
-  --text-opacity: 1;
-
-  color: inherit !important;
+.text-opacity-10 {
+  --color-text-opacity: 10%;
 }
 
 .text-opacity-25 {
-  --text-opacity: 0.25;
+  --color-text-opacity: 25%;
 }
 
 .text-opacity-50 {
-  --text-opacity: 0.5;
+  --color-text-opacity: 50%;
 }
 
 .text-opacity-75 {
-  --text-opacity: 0.75;
+  --color-text-opacity: 75%;
 }
 
 .text-opacity-100 {
-  --text-opacity: 1;
-}
-
-.text-primary-emphasis {
-  --color-text: rgb(var(--color-primary-emphasis-rgb)) !important;
-  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
-
-  color: var(--color-text) !important;
-}
-
-.text-secondary-emphasis {
-  --color-text: rgb(var(--color-secondary-emphasis-rgb)) !important;
-  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
-
-  color: var(--color-text) !important;
-}
-
-.text-success-emphasis {
-  --color-text: rgb(var(--color-success-emphasis-rgb)) !important;
-  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
-
-  color: var(--color-text) !important;
-}
-
-.text-info-emphasis {
-  --color-text: rgb(var(--color-info-emphasis-rgb)) !important;
-  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
-
-  color: var(--color-text) !important;
-}
-
-.text-warning-emphasis {
-  --color-text: rgb(var(--color-warning-emphasis-rgb)) !important;
-  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
-
-  color: var(--color-text) !important;
-}
-
-.text-danger-emphasis {
-  --color-text: rgb(var(--color-danger-emphasis-rgb)) !important;
-  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
-
-  color: var(--color-text) !important;
-}
-
-.text-contrast-emphasis {
-  --color-text: rgb(var(--color-contrast-emphasis-rgb)) !important;
-  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
-
-  color: var(--color-text) !important;
-}
-
-.link-opacity-10 {
-  --link-opacity: 0.1;
-}
-
-.link-opacity-10-hover:hover {
-  --link-opacity: 0.1;
-}
-
-.link-opacity-25 {
-  --link-opacity: 0.25;
-}
-
-.link-opacity-25-hover:hover {
-  --link-opacity: 0.25;
-}
-
-.link-opacity-50 {
-  --link-opacity: 0.5;
-}
-
-.link-opacity-50-hover:hover {
-  --link-opacity: 0.5;
-}
-
-.link-opacity-75 {
-  --link-opacity: 0.75;
-}
-
-.link-opacity-75-hover:hover {
-  --link-opacity: 0.75;
-}
-
-.link-opacity-100 {
-  --link-opacity: 1;
-}
-
-.link-opacity-100-hover:hover {
-  --link-opacity: 1;
-}
-
-.link-offset-1 {
-  text-underline-offset: 0.125em !important;
-}
-
-.link-offset-1-hover:hover {
-  text-underline-offset: 0.125em !important;
-}
-
-.link-offset-2 {
-  text-underline-offset: 0.25em !important;
-}
-
-.link-offset-2-hover:hover {
-  text-underline-offset: 0.25em !important;
-}
-
-.link-offset-3 {
-  text-underline-offset: 0.375em !important;
-}
-
-.link-offset-3-hover:hover {
-  text-underline-offset: 0.375em !important;
-}
-
-.link-underline-primary {
-  --link-underline-opacity: 1;
-
-  -webkit-text-decoration-color: rgba(var(--color-primary-rgb), var(--link-underline-opacity)) !important;
-  text-decoration-color: rgba(var(--color-primary-rgb), var(--link-underline-opacity)) !important;
-}
-
-.link-underline-secondary {
-  --link-underline-opacity: 1;
-
-  -webkit-text-decoration-color: rgba(var(--color-secondary-rgb), var(--link-underline-opacity)) !important;
-  text-decoration-color: rgba(var(--color-secondary-rgb), var(--link-underline-opacity)) !important;
-}
-
-.link-underline-success {
-  --link-underline-opacity: 1;
-
-  -webkit-text-decoration-color: rgba(var(--color-success-rgb), var(--link-underline-opacity)) !important;
-  text-decoration-color: rgba(var(--color-success-rgb), var(--link-underline-opacity)) !important;
-}
-
-.link-underline-info {
-  --link-underline-opacity: 1;
-
-  -webkit-text-decoration-color: rgba(var(--color-info-rgb), var(--link-underline-opacity)) !important;
-  text-decoration-color: rgba(var(--color-info-rgb), var(--link-underline-opacity)) !important;
-}
-
-.link-underline-warning {
-  --link-underline-opacity: 1;
-
-  -webkit-text-decoration-color: rgba(var(--color-warning-rgb), var(--link-underline-opacity)) !important;
-  text-decoration-color: rgba(var(--color-warning-rgb), var(--link-underline-opacity)) !important;
-}
-
-.link-underline-danger {
-  --link-underline-opacity: 1;
-
-  -webkit-text-decoration-color: rgba(var(--color-danger-rgb), var(--link-underline-opacity)) !important;
-  text-decoration-color: rgba(var(--color-danger-rgb), var(--link-underline-opacity)) !important;
-}
-
-.link-underline-contrast {
-  --link-underline-opacity: 1;
-
-  -webkit-text-decoration-color: rgba(var(--color-contrast-rgb), var(--link-underline-opacity)) !important;
-  text-decoration-color: rgba(var(--color-contrast-rgb), var(--link-underline-opacity)) !important;
-}
-
-.link-underline {
-  --link-underline-opacity: 1;
-
-  -webkit-text-decoration-color: rgba(var(--color-link-rgb), var(--link-underline-opacity, 1)) !important;
-  text-decoration-color: rgba(var(--color-link-rgb), var(--link-underline-opacity, 1)) !important;
-}
-
-.link-underline-opacity-0 {
-  --link-underline-opacity: 0;
-}
-
-.link-underline-opacity-0-hover:hover {
-  --link-underline-opacity: 0;
-}
-
-.link-underline-opacity-10 {
-  --link-underline-opacity: 0.1;
-}
-
-.link-underline-opacity-10-hover:hover {
-  --link-underline-opacity: 0.1;
-}
-
-.link-underline-opacity-25 {
-  --link-underline-opacity: 0.25;
-}
-
-.link-underline-opacity-25-hover:hover {
-  --link-underline-opacity: 0.25;
-}
-
-.link-underline-opacity-50 {
-  --link-underline-opacity: 0.5;
-}
-
-.link-underline-opacity-50-hover:hover {
-  --link-underline-opacity: 0.5;
-}
-
-.link-underline-opacity-75 {
-  --link-underline-opacity: 0.75;
-}
-
-.link-underline-opacity-75-hover:hover {
-  --link-underline-opacity: 0.75;
-}
-
-.link-underline-opacity-100 {
-  --link-underline-opacity: 1;
-}
-
-.link-underline-opacity-100-hover:hover {
-  --link-underline-opacity: 1;
-}
-
-/* Dark mode: headings should be lighter than text color (mix in white) */
-@media (prefers-color-scheme: dark) {
-  .text-primary,
-  .text-secondary,
-  .text-success,
-  .text-info,
-  .text-warning,
-  .text-danger,
-  .text-contrast,
-  .text-body,
-  .text-muted,
-  .text-body-secondary,
-  .text-body-emphasis,
-  .text-primary-emphasis,
-  .text-secondary-emphasis,
-  .text-success-emphasis,
-  .text-info-emphasis,
-  .text-warning-emphasis,
-  .text-danger-emphasis,
-  .text-contrast-emphasis {
-    --color-heading-base: color-mix(in srgb, var(--color-text), white 75%);
-  }
-}
-
-[data-theme="dark"] {
-  .text-primary,
-  .text-secondary,
-  .text-success,
-  .text-info,
-  .text-warning,
-  .text-danger,
-  .text-contrast,
-  .text-body,
-  .text-muted,
-  .text-body-secondary,
-  .text-body-emphasis,
-  .text-primary-emphasis,
-  .text-secondary-emphasis,
-  .text-success-emphasis,
-  .text-info-emphasis,
-  .text-warning-emphasis,
-  .text-danger-emphasis,
-  .text-contrast-emphasis {
-    --color-heading-base: color-mix(in srgb, var(--color-text), white 75%);
-  }
+  --color-text-opacity: 100%;
 }

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;
 }