@splendidlabz/styles 4.3.1 → 4.4.0

package/package.json

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

package/src/components/astro/fancylist.css

@@ -16,7 +16,6 @@
       column-gap: inherit;
 
       /* Positions the Emoji */
-
       /* This is kind of brute-forced at the moment. */
       :where(.emoji),
       > :where(astro-slot, astro-island) > :where(.emoji) {

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

@@ -62,15 +62,20 @@
       text-decoration: underline;
     }
 
-    > img,
-    figure img {
+    :where(> img),
+    :where(> figure img) {
       border: 1px solid oklch(90% 0 0deg);
       border-radius: var(--radius);
     }
 
-    &.fancylist,
-    & .fancylist {
+    :where(.fancylist) {
+      margin-left: 1em;
       padding-left: 0;
     }
   }
 }
+
+@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/css/table.css

@@ -4,10 +4,7 @@
 @utility table-scaffold {
   & {
     width: 100%;
-
-    /* font: inherit; Not sure if needed? */
-    font-variant-numeric: lining-nums tabular-nums slashed-zero
-      diagonal-fractions;
+    font-variant-numeric: lining-nums tabular-nums slashed-zero;
   }
 }
 
@@ -111,7 +108,7 @@ table {
   }
 
   &:not(:has(thead)) tr {
-    tr:nth-child(2n + 3) {
+    &:nth-child(2n + 3) {
       background-color: var(--alt-row-color);
     }
   }
@@ -122,7 +119,6 @@ table {
   }
 
   /* Row Headers */
-
   /* Not adding border-right because it's a bit too much if table-layout is auto */
   th:where([scope='group'], [scope='row']) {
     @apply table-header-column;

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/frosted-glass.css

@@ -7,7 +7,6 @@
     @apply transition-scaffold-extended;
     position: relative;
     backdrop-filter: blur(var(--blur, 16px));
-    border: inherit;
   }
 }
 

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/type/font.css

@@ -4,15 +4,19 @@
   inherits: true;
 }
 
-/* 
-@property --font-opsz {
+@property --font-slant {
   syntax: '<integer> | auto';
-  initial-value: 25;
+  initial-value: 0;
   inherits: true;
 }
 
-@property --font-width {
+@property --font-opsz {
   syntax: '<integer> | auto';
-  initial-value: 100;
+  initial-value: 25;
   inherits: true;
-} */
+}
+
+@utility font-weight-* {
+  --font-weight: --value([integer]);
+  font-weight: var(--font-weight);
+}

package/src/type/index.css

@@ -1,3 +1,4 @@
 @import './font-position.css';
 @import './text-relative.css';
 @import './text-edge.css';
+@import './font.css';

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