@splendidlabz/styles 4.3.2 → 4.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splendidlabz/styles",
-  "version": "4.3.2",
+  "version": "4.4.0",
   "description": "",
   "type": "module",
   "author": "Zell Liew <zellwk@gmail.com>",

package/src/components/css/card.css

@@ -54,14 +54,14 @@
 
   > :where(:first-child) {
     border-radius: 0;
-    border-top-left-radius: var(--radius);
-    border-bottom-left-radius: var(--radius);
+    border-top-left-radius: calc(var(--radius) - var(--border-width));
+    border-bottom-left-radius: calc(var(--radius) - var(--border-width));
   }
 
   > :where(:last-child) {
     border-radius: 0;
-    border-top-right-radius: var(--radius);
-    border-bottom-right-radius: var(--radius);
+    border-top-right-radius: calc(var(--radius) - var(--border-width));
+    border-bottom-right-radius: calc(var(--radius) - var(--border-width));
   }
 }
 
@@ -79,14 +79,14 @@
     border-style: var(--border-style);
   }
 
-  > :first-child {
-    border-top-left-radius: var(--radius);
-    border-top-right-radius: var(--radius);
+  > :where(:first-child) {
+    border-top-left-radius: calc(var(--radius) - var(--border-width));
+    border-top-right-radius: calc(var(--radius) - var(--border-width));
   }
 
-  > :last-child {
-    border-bottom-left-radius: var(--radius);
-    border-bottom-right-radius: var(--radius);
+  > :where(:last-child) {
+    border-bottom-left-radius: calc(var(--radius) - var(--border-width));
+    border-bottom-right-radius: calc(var(--radius) - var(--border-width));
   }
 }
 

package/src/components/css/prose.css

@@ -74,3 +74,8 @@
     }
   }
 }
+
+@utility prose-tight {
+  @apply prose;
+  gap: 1em;
+}

package/src/components/css/simple-svg.css

@@ -4,7 +4,7 @@
   * {
     fill: var(--fill-color);
     stroke: var(--stroke-color); /* Fallback to text color */
-    stroke-width: var(--stroke-width);
+    stroke-width: var(--stroke-width, revert-layer);
   }
 }
 

package/src/components/svelte/callout.css

@@ -16,7 +16,8 @@ Variables:
 
     :where(.callout-header) {
       padding-block: 0.375rem;
-      border-bottom: 1px solid var(--divider-color, var(--border-color));
+      border-bottom: var(--border-width) solid
+        var(--divider-color, var(--border-color));
       border-top-left-radius: inherit;
       border-top-right-radius: inherit;
       color: var(--text-callout-header, var(--text-color));

package/src/components/svelte/status.css

@@ -1,7 +1,6 @@
 @utility status {
   & {
     @apply border-scaffold;
-    margin-top: 1rem;
     padding: 1rem;
     color: var(--text-color);
     background-color: var(--bg-color);

package/src/effects/scrollbars.css

@@ -13,22 +13,27 @@
 
 @utility scrollbars-on {
   @layer base {
-    :root {
+    & {
       @media (prefers-color-scheme: light) {
-        --scrollbar-thumb-color: var(--scrollbar-thumb-color-light);
-        --scrollbar-track-color: var(--scrollbar-track-color-light);
+        --_thumb-fallback-color: var(--scrollbar-thumb-color-light);
+        --_track-fallback-color: var(--scrollbar-track-color-light);
       }
 
       @media (prefers-color-scheme: dark) {
-        --scrollbar-thumb-color: var(--scrollbar-thumb-color-dark);
-        --scrollbar-track-color: var(--scrollbar-track-color-dark);
+        --_thumb-fallback-color: var(--scrollbar-thumb-color-dark);
+        --_track-fallback-color: var(--scrollbar-track-color-dark);
       }
     }
 
+    &,
     * {
       scroll-behavior: var(--scroll-behavior);
       scrollbar-width: var(--scrollbar-width);
-      scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
+      scrollbar-color: var(
+          --scrollbar-thumb-color,
+          var(--_thumb-fallback-color)
+        )
+        var(--scrollbar-track-color, var(--_track-fallback-color));
 
       /* Works on Chrome, Edge, and Safari */
       &::-webkit-scrollbar {

package/src/generic/anchors-and-buttons.css

@@ -49,6 +49,7 @@
   }
 
   a:where(:not(.button)) {
+    @apply pigment-without-border;
     --bg-color: transparent;
     --border-color: transparent;
   }

package/src/generic/form.css

@@ -54,7 +54,7 @@
     }
   }
 
-  /* This is for honeypot */
+  /* Honeypot */
   .form-field-helper {
     display: none !important;
   }

package/src/layouts/macro/grid.css

@@ -67,12 +67,12 @@
   @apply grid-scaffold;
   grid-template-columns:
     repeat(calc(var(--cols) - 1), minmax(0, 1fr))
-    minmax(0, auto);
+    minmax(0, var(--sbw, auto));
 }
 
 @utility grid-auto-fr {
   @apply grid-scaffold;
-  grid-template-columns: minmax(0, auto) repeat(
+  grid-template-columns: minmax(0, var(--sbw, auto)) repeat(
       calc(var(--cols) - 1),
       minmax(0, 1fr)
     );

package/src/layouts/position/nudge.css

@@ -74,17 +74,17 @@
  * Functional Utilities *
  *********************/
 @utility nudge-* {
-  --nudge: --value([length]);
+  --nudge: --value([*]);
   --nudge: calc(var(--spacing) * --value(integer));
 }
 
 @utility nudge-x-* {
-  --nudge-x: --value([length]);
+  --nudge-x: --value([*]);
   --nudge-x: calc(var(--spacing) * --value(integer));
 }
 
 @utility nudge-y-* {
-  --nudge-y: --value([length]);
+  --nudge-y: --value([*]);
   --nudge-y: calc(var(--spacing) * --value(integer));
 }
 

package/src/tools/pigment.css

@@ -31,7 +31,6 @@ Usage with the Fill System
  *********************/
 @utility pigment-scaffold {
   & {
-    @apply border-scaffold;
     @apply transition-scaffold;
     --_bgc: var(--bg-color);
     --_tc: var(--text-color, currentcolor);
@@ -132,7 +131,16 @@ Usage with the Fill System
  * Actual pigment utility *
  *********************/
 
+@utility pigment-without-border {
+  @apply pigment-scaffold;
+  @apply pigment-hover-scaffold;
+  @apply pigment-focus-scaffold;
+  @apply pigment-active-scaffold;
+  @apply pigment-selected-scaffold;
+}
+
 @utility pigment {
+  @apply border-scaffold;
   @apply pigment-scaffold;
   @apply pigment-hover-scaffold;
   @apply pigment-focus-scaffold;
@@ -149,6 +157,7 @@ Usage with the Fill System
 }
 
 @utility pigment-with-svg {
+  @apply border-scaffold;
   @apply pigment-scaffold;
   @apply pigment-svg-scaffold;
   @apply pigment-hover-scaffold;

package/src/tools/transitions.css

@@ -13,7 +13,7 @@
       var(--transition-easing);
     --transition-props:
       background, border, color, display, fill, opacity, outline, stroke,
-      transform;
+      transform, translate, scale, rotate, skew, perspective;
     transition: var(--transition-values);
     transition-property: var(--transition-props);
   }
@@ -24,8 +24,8 @@
     @apply transition-scaffold;
     --transition-props:
       backdrop-filter, background, border, color, display, fill, filter, gap,
-      opacity, outline, overlay, stroke, transform;
-    transition-behavior: allow-discrete;
+      opacity, outline, overlay, stroke, transform, translate, scale, rotate,
+      skew, perspective;
   }
 }
 

package/src/variables/font.css

@@ -27,7 +27,6 @@
   --text-21: 6.75rem;   /* 108px */
   --text-22: 7.5rem;    /* 120px */
 
-
   /* EM Values */
   --text-1e: 0.625em;   /* 10px */
   --text-2e: 0.6875em;  /* 11px */

package/src/variables/radius.css

@@ -2,7 +2,9 @@
  *********************/
 @theme {
   --radius-0.5: calc(var(--spacing) * 0.5);
+  --radius-0.75r: calc(var(--radius) * 0.75);
   --radius-1: calc(var(--spacing) * 1);
+  --radius-1.25: calc(var(--spacing) * 1.25);
   --radius-1.5: calc(var(--spacing) * 1.5);
   --radius-2: calc(var(--spacing) * 2);
   --radius-2.5: calc(var(--spacing) * 2.5);