@splendidlabz/styles 4.3.0 → 4.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splendidlabz/styles",
-  "version": "4.3.0",
+  "version": "4.3.2",
   "description": "",
   "type": "module",
   "author": "Zell Liew <zellwk@gmail.com>",
@@ -12,7 +12,8 @@
     ".": "./src/styles.css",
     "./components": "./src/components/index.css",
     "./layouts/no-tw": "./dist/no-tw/styles.css",
-    "./scripts": "./scripts/index.js"
+    "./scripts": "./scripts/index.js",
+    "./scripts/*": "./scripts/*.js"
   },
   "scripts": {
     "lint": "stylelint '**/*.{css,scss}' --fix",

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

@@ -24,8 +24,6 @@
       @apply padding-scaffold;
       --fallback-padding: 1rlh;
 
-      /* @apply inner-radius; */
-
       /* Raise for nicer focus ring */
       &:focus-visible {
         z-index: 2;

package/src/components/css/prose-div.css

@@ -4,21 +4,21 @@
     max-width: 100%;
 
     > * + * {
-      margin-block: 1lh;
+      margin-top: calc(var(--spacing) * 4);
     }
 
     /* Using padding instead of margin, so #targets will leave some whitespace above when scrolling to the component. (We can also use scroll-margin-top + margin-top... but this is simpler). */
     > * + :where(h2),
     > * + :where(astro-island, astro-slot) > :where(h2):first-child {
-      margin-top: calc(var(--spacing) * 6);
-      scroll-margin-top: calc(var(--spacing) * 6);
+      margin-top: var(--h2-margin-top, calc(var(--spacing) * 6));
+      scroll-margin-top: var(--h2-margin-top, calc(var(--spacing) * 6));
     }
 
     > * + :where(h3),
     > * + :where(astro-island, astro-slot) > :where(h3):first-child {
-      margin-top: calc(var(--spacing) * 4);
-      margin-bottom: calc(var(--spacing) * -2);
-      scroll-margin-top: calc(var(--spacing) * 4);
+      margin-top: var(--h3-margin-top, calc(var(--spacing) * 4));
+      margin-bottom: var(--h3-margin-bottom, calc(var(--spacing) * -2));
+      scroll-margin-top: var(--h3-margin-top, calc(var(--spacing) * 4));
     }
 
     > * + :where(h4, h5, h6),

package/src/components/css/prose.css

@@ -62,14 +62,14 @@
       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;
     }
   }

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;
   }
 }
 
@@ -52,9 +49,9 @@
     padding-inline-end: var(--cell-padding-x, 0.5rlh);
     text-align: left;
 
-    &:last-child {
+    /* &:last-child {
       padding-inline-end: 0;
-    }
+    } */
   }
 }
 
@@ -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/drawer.css

@@ -7,6 +7,7 @@
 
 /* // Note to self: */
 /* // Need to create another Class to contain default z-index for Absolute Drawers — so this doesn't show above it. */
+
 @utility drawer-content {
   overflow-y: auto;
   z-index: 100;

package/src/components/svelte/modal.css

@@ -2,7 +2,7 @@
   /* Prevent scroll when modal is open */
   html:has(.modal-content) {
     @apply transition-scaffold;
-    --transition-props: overflow;
+    transition-property: overflow;
     transition-duration: 300ms;
   }
 
@@ -20,11 +20,7 @@
 
   /* Base/Closing Style */
   .modal-content {
-    /* @apply border-scaffold; */
     margin: auto;
-    padding: 1lh;
-    color: var(--text-color);
-    background: var(--bg-color, white);
   }
 
   .modal-content::backdrop {
@@ -34,17 +30,16 @@
   .modal-content,
   .modal-content::backdrop {
     @apply transition-scaffold-extended;
-    --transition-duration: 300ms;
-    --transition-easing: ease-in;
     opacity: 0;
-    transition-property: var(--transition-props);
+    transition-duration: 300ms;
+    transition-timing-function: ease-in;
   }
 
   /* Opened Style */
   .modal-content[open],
   .modal-content[open]::backdrop {
-    --transition-easing: ease-out;
     opacity: 1;
+    transition-timing-function: ease-out;
   }
 
   .modal-content[open]::backdrop {

package/src/components/svelte/popover.css

@@ -2,14 +2,13 @@
   [popover] {
     @apply border-scaffold;
     @apply transition-scaffold-extended;
-    --transition-duration: 300ms;
-    --transition-easing: ease-out;
     position: absolute;
     max-width: 100%;
-    padding: 1rem;
     color: var(--text-color);
     background: var(--bg-color, white);
     opacity: 0;
+    transition-duration: 300ms;
+    transition-timing-function: ease-out;
   }
 
   [popover]:not(:popover-open) {
@@ -17,8 +16,8 @@
   }
 
   [popover]:popover-open {
-    --transition-easing: ease-in;
     opacity: 1;
+    transition-timing-function: ease-in;
   }
 
   @starting-style {

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/gradients.css

@@ -19,7 +19,6 @@
 }
 
 /* These don't work in Tailwind 4 and we need to adjust them */
-
 @utility tw-gradient {
   --tw-gradient:
     var(--tw-gradient-from) var(--tw-gradient-from-position),
@@ -116,3 +115,18 @@
     );
   }
 }
+
+/*********************
+ * Functional Utiliites for Gradients *
+ *********************/
+@utility gradient-angle-* {
+  --gradient-angle: --value([angle]);
+}
+
+/* @utility gradient-position-* {
+  --gradient-position: --value([position]);
+}
+
+@utility gradient-shape-* {
+  --gradient-shape: --value([shape]);
+} */

package/src/layouts/micro/micro.css

@@ -17,7 +17,8 @@
   flex-wrap: nowrap;
   gap: var(--gap-y, var(--gap)) var(--gap-x, var(--gap));
 
-  > .spacer {
+  > .spacer,
+  > :where(.contents) > .spacer {
     margin-inline-start: auto;
   }
 }

package/src/tools/object.css

@@ -1,9 +1,6 @@
-/* Temp rework. Have to really figure this one out first... */
+/* Object doesn't work correctly in Safari unless height is given. https://stackoverflow.com/questions/60192601/object-fit-cover-not-working-correctly-on-safari */
 @utility object-background {
-  /* position: absolute;
-  inset: 0;
-  z-index: -1;
   width: 100%;
-  height: 100%; */
+  height: 100%;
   object-fit: cover;
 }

package/src/tools/transitions.css

@@ -1,3 +1,9 @@
+/* @property --transition-props {
+  syntax: '<string>';
+  inherits: false;
+  initial-value: '';
+} */
+
 /*********************
  * Default transition properties and values *
  *********************/

package/src/type/font.css

@@ -0,0 +1,22 @@
+@property --font-weight {
+  syntax: '<integer> | auto';
+  initial-value: 400;
+  inherits: true;
+}
+
+@property --font-slant {
+  syntax: '<integer> | auto';
+  initial-value: 0;
+  inherits: true;
+}
+
+@property --font-opsz {
+  syntax: '<integer> | auto';
+  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';