@splendidlabz/styles 4.2.2 → 4.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splendidlabz/styles",
-  "version": "4.2.2",
+  "version": "4.3.1",
   "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",
@@ -23,7 +24,7 @@
     "build": "npm run build-styles & npm run build-layouts"
   },
   "dependencies": {
-    "@splendidlabz/utils": "1.8.1"
+    "@splendidlabz/utils": "*"
   },
   "devDependencies": {
     "@splendidlabz/stylelint-config": "3.1.1",

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/indent-list.css

@@ -44,47 +44,46 @@
 }
 
 @utility indentlist-guides {
-  & {
-    @apply indentlist-scaffold;
+  @apply indentlist-scaffold;
+
+  li {
+    position: relative;
+    margin-block: 0;
+    margin-inline-start: 0;
+    padding-inline-start: var(--indent, 1em);
+    list-style-type: none;
 
-    li {
+    a {
       position: relative;
-      margin-inline-start: 0;
-      margin-block: 0;
+      margin-inline-start: calc(var(--indent, 1em) * -2);
       padding-inline-start: var(--indent, 1em);
+    }
+
+    li::before,
+    a::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      width: var(--guide-width, 1px);
+      background-color: var(--guide-color, transparent);
+    }
+
+    a:hover::before {
+      background-color: var(--guide-hover-color, var(--guide-color));
+    }
 
-      a {
-        position: relative;
-        margin-inline-start: calc(var(--indent, 1em) * -2);
-        padding-inline-start: var(--indent, 1em);
-      }
-
-      &::before,
-      a::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        width: var(--guide-width, 1px);
-        background-color: var(--guide-color, transparent);
-      }
-
-      a:hover::before {
-        background-color: var(--guide-hover-color, var(--guide-color));
-      }
-
-      a:focus::before {
-        background-color: var(
-          --guide-focus-color,
-          var(--guide-hover-color, var(--guide-color))
-        );
-      }
+    a:focus::before {
+      background-color: var(
+        --guide-focus-color,
+        var(--guide-hover-color, var(--guide-color))
+      );
     }
   }
 
   li li a {
-    margin-inline-start: calc(var(--indent, 1em) * -3);
+    margin-inline-start: calc(var(--indent, 1em) * -2);
   }
 }
 

package/src/components/css/index.css

@@ -3,6 +3,7 @@
 @import './hero-heading.css';
 @import './indent-list.css';
 @import './prose.css';
+@import './prose-div.css';
 @import './shapes.css';
 @import './simple-svg.css';
 @import './table.css';

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

@@ -0,0 +1,78 @@
+/* Same as prose (as much as possible), but without flexbox */
+@utility prose-div {
+  & {
+    max-width: 100%;
+
+    > * + * {
+      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: 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: 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),
+    > * + :where(astro-island, astro-slot) > :where(h4, h5, h6):first-child {
+      margin-top: calc(var(--spacing) * 4);
+      margin-bottom: calc(var(--spacing) * -4);
+      scroll-margin-top: calc(var(--spacing) * 4);
+    }
+
+    :where(ul) {
+      list-style-type: initial;
+    }
+
+    /* Basic list styles */
+    :where(ul, ol),
+    > :where(astro-island, astro-slot) :where(ul, ol) {
+      list-style-position: outside;
+      margin-left: 2em;
+
+      :where(ul, ol) {
+        margin-left: 0;
+        padding-left: 2em;
+      }
+
+      li {
+        font-variant-numeric: lining-nums;
+      }
+
+      li + li {
+        margin-top: calc(var(--spacing));
+      }
+
+      li:has(li) + li {
+        margin-top: calc(var(--spacing) * 2);
+      }
+
+      li > :where(ul, ol) {
+        margin-top: calc(var(--spacing));
+      }
+    }
+
+    :where(a) {
+      text-decoration: underline;
+    }
+
+    > img,
+    figure img {
+      border: 1px solid oklch(90% 0 0deg);
+      border-radius: var(--radius);
+    }
+
+    &.fancylist,
+    & .fancylist {
+      padding-left: 0;
+    }
+  }
+}

package/src/components/css/table.css

@@ -52,9 +52,9 @@
     padding-inline-end: var(--cell-padding-x, 0.5rlh);
     text-align: left;
 
-    &:last-child {
+    /* &:last-child {
       padding-inline-end: 0;
-    }
+    } */
   }
 }
 

package/src/components/svelte/accordion.css

@@ -46,7 +46,7 @@
 }
 
 @utility accordion-content {
-  @apply padding-scaffold;
+  /* @apply padding-scaffold; */
 
   &:not(.accordion-stack &) {
     padding-top: 0;

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;
@@ -15,6 +16,7 @@
     border-start-start-radius: 0;
     border-end-start-radius: 0;
   }
+
   &.fixed-rightfull {
     border-start-end-radius: 0;
     border-end-end-radius: 0;

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/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),
@@ -29,13 +28,20 @@
 @utility gradient {
   & {
     @apply tw-gradient;
-    background: linear-gradient(
+    background-image: linear-gradient(
       var(--gradient-angle) in var(--color-space) var(--hue-interpolation),
       var(--gradient, var(--tw-gradient))
     );
   }
 }
 
+@function --linear-gradient(--gradient) {
+  result: linear-gradient(
+    var(--gradient-angle) in var(--color-space) var(--hue-interpolation),
+    var(--gradient)
+  );
+}
+
 @utility linear-gradient {
   @apply gradient;
 }
@@ -62,6 +68,7 @@
 
 @utility text-gradient {
   & {
+    @apply gradient;
     display: inline-flex;
     -webkit-text-fill-color: transparent;
     background-clip: text;
@@ -108,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/macro/grid.css

@@ -33,14 +33,15 @@
   & {
     display: grid;
     gap: var(--gap-y, var(--gap)) var(--gap-x, var(--gap));
-    /* width: 100%; */
+    width: 100%;
+    max-width: 100%;
 
     > *,
     > *:where(.contents) > *,
     > *:where(astro-island, astro-slot) > * {
       grid-column: var(--colstart) / var(--colend, span var(--span));
       grid-row: var(--rowstart) / var(--rowend, span var(--rowspan));
-      /* width: 100%; */
+      max-width: 100%;
     }
   }
 }
@@ -85,11 +86,9 @@
       minmax(0, var(--content-width, 1fr))
       minmax(0, var(--end-width, var(--side-width, 0.25fr)));
     gap: var(--gap-y, var(--gap)) var(--gap-x, var(--gap));
-    max-width: 100%;
 
     > * {
       grid-column: 2 / -2;
-      max-width: 100%;
     }
 
     > .breakout-small {

package/src/layouts/macro/wrap.css

@@ -2,5 +2,5 @@
  * Wrap *
  *********************/
 @utility wrap {
-  padding-inline: var(--wrap-padding, 1rlh);
+  padding-inline: var(--wrap-padding, calc(var(--spacing) * 4));
 }

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/layouts/position/edge.css

@@ -353,7 +353,7 @@
   --tx: -50%;
   --ty: 0%;
   --_tx: calc(var(--tx) * -1);
-  --_ty: calc(var(--ty) * -1);
+  --_ty: calc(var(--ty));
 }
 
 @utility edge-adjust-righttop-start {

package/src/layouts/shell/shell-grid.css

@@ -1,34 +1,18 @@
-/* // Potential improvements fro flexibility with Style Queries or CSS IF in the future. */
+/* Potential improvements for flexibility with Style Queries or CSS IF in the future. */
 @utility shell-grid {
+  @apply shell-body;
+
   & {
-    display: grid;
-    grid-template-columns:
-      minmax(0, var(--lsb-width, auto))
-      minmax(0, 1fr);
-    gap: var(--gap, 0);
+    /* Seems to be ok to use inherit too? Test it out. If that's ok, remove this and just use shell-body */
+    /* height: inherit;  */
     height: 100dvh;
   }
 
-  &:has(> header) {
+  &:has(> .header) {
     grid-template-rows: auto 1fr;
   }
 
-  &:has(> .right-sidebar) {
-    grid-template-columns:
-      minmax(0, var(--lsb-width, auto))
-      minmax(0, var(--content-width, 1fr))
-      minmax(0, var(--rsb-width, auto));
-  }
-
-  & > :is(header, footer, .full) {
+  & > :is(.header, .footer, .full) {
     grid-column: 1 / -1;
   }
-
-  > .left-sidebar,
-  > .right-sidebar,
-  > .content {
-    overflow: auto;
-    grid-column-end: span var(--span, 1);
-    height: auto;
-  }
 }

package/src/layouts/shell/shell-simple.css

@@ -13,3 +13,29 @@
     }
   }
 }
+
+@utility shell-body {
+  & {
+    display: grid;
+    grid-template-columns:
+      minmax(0, var(--lsb-width, auto))
+      minmax(0, 1fr);
+    gap: var(--gap, 0);
+    height: inherit;
+  }
+
+  &:has(> .right-sidebar) {
+    grid-template-columns:
+      minmax(0, var(--lsb-width, auto))
+      minmax(0, var(--content-width, 1fr))
+      minmax(0, var(--rsb-width, auto));
+  }
+
+  > .left-sidebar,
+  > .right-sidebar,
+  > .content {
+    overflow: auto;
+    grid-column-end: span var(--span, 1);
+    height: auto;
+  }
+}

package/src/tools/color.css

@@ -1,4 +1,4 @@
 /* Returns a color with alpha value */
-@function --color(--color, --alpha) {
+@function --alpha(--color, --alpha) {
   result: oklch(from var(--color) l c h / var(--alpha));
 }

package/src/tools/object.css

@@ -1,7 +1,5 @@
+/* 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%;
   object-fit: cover;

package/src/tools/pigment.css

@@ -98,14 +98,8 @@ Usage with the Fill System
 
 @utility pigment-active-svg-scaffold {
   &:active {
-    --_fc: var(--fill-active-color, var(--fill-color, transparent));
-    --_sc: var(
-      --stroke-active-color,
-      var(
-        --text-active-color,
-        var(--stroke-color, var(--text-color, currentcolor))
-      )
-    );
+    --_fc: var(--fill-active-color, var(--fill-color, revert-layer));
+    --_sc: var(--stroke-active-color, var(--_tc));
   }
 }
 
@@ -129,14 +123,8 @@ Usage with the Fill System
   &[aria-selected='true'],
   &[aria-pressed='true'],
   &[aria-expanded='true'] {
-    --_fc: var(--fill-selected-color, var(--fill-color, transparent));
-    --_sc: var(
-      --stroke-selected-color,
-      var(
-        --text-selected-color,
-        var(--stroke-color, var(--text-color, currentcolor))
-      )
-    );
+    --_fc: var(--fill-selected-color, var(--fill-color, revert-layer));
+    --_sc: var(--stroke-selected-color, var(--_tc));
   }
 }
 

package/src/tools/scaffolds.css

@@ -22,9 +22,9 @@
   --radius: calc(var(--spacing) * --value(integer));
 }
 
-@utility rounded-* {
+/* @utility rounded-* {
   border-radius: calc(var(--spacing) --value(integer));
-}
+} */
 
 @utility rounded-t-* {
   border-top-left-radius: calc(var(--spacing) --value(integer));

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,18 @@
+@property --font-weight {
+  syntax: '<integer> | auto';
+  initial-value: 400;
+  inherits: true;
+}
+
+/* 
+@property --font-opsz {
+  syntax: '<integer> | auto';
+  initial-value: 25;
+  inherits: true;
+}
+
+@property --font-width {
+  syntax: '<integer> | auto';
+  initial-value: 100;
+  inherits: true;
+} */

package/src/variable-font.js

@@ -0,0 +1,88 @@
+// Variable Font Support.
+// Used for Adobe Fonts... because they mess up font weight
+// Seems to be a problem... maybe can build a Youtube Video or TikTok video?
+// To be used together with Splendid Type for the best effects. Can be used directly with CSS though.
+
+import plugin from 'tailwindcss/plugin'
+
+export const variableFont = plugin(config => {
+  const { matchUtilities, theme } = config
+
+  // Font Weight
+  // Use wght
+  matchUtilities(
+    {
+      'font-weight': value => ({ '--font-weight': value }),
+    },
+    {
+      values: theme('fontWeight'),
+    },
+  )
+
+  matchUtilities({
+    // Standard axes
+    'font-width': value => ({ '--font-width': value }), // wdth
+    'font-stretch': value => ({ '--font-width': value }), // wdth
+    'font-slant': value => ({ '--font-slant': value }), // slnt
+    'font-opsz': value => ({ '--font-optical-size': value }), // opsz
+    'font-contrast': value => ({ '--font-contrast': value }), // CNTR
+
+    // Parametric Axes
+    'font-thick-stroke': value => ({ '--font-thick-stroke': value }), // XOPQ
+    'font-thin-stroke': value => ({ '--font-thin-stroke': value }), // YOPQ
+    'font-counter-width': value => ({ '--font-counter-width': value }), // XTRA
+    'font-uppercase-height': value => ({ '--font-uppercase-height': value }), // YTUC
+    'font-lowercase-height': value => ({ '--font-lowercase-height': value }), // YTLC
+    'font-ascender-height': value => ({ '--font-ascender-height': value }), // YTAS
+    'font-descender-depth': value => ({ '--font-descender-depth': value }), // YTDE
+    'font-figure-height': value => ({ '--font-figure-height': value }), // YTFI
+  })
+})
+
+export function fontVariationSettings({
+  // Standard axes
+  weight,
+  width,
+  slant,
+  italics,
+  opticalSize,
+  contrast,
+
+  // Parametric Axes
+  thickStroke,
+  thinStroke,
+  counterWidth,
+  uppercaseHeight,
+  lowercaseHeight,
+  ascenderHeight,
+  descenderDepth,
+  figureHeight,
+} = {}) {
+  const ret = []
+
+  // Standard axes
+  if (weight) ret.push(`"wght" var(--font-weight, ${weight})`)
+  if (width) ret.push(`"wdth" var(--font-width, ${width})`)
+  if (slant) ret.push(`"slnt" var(--font-slant, ${slant})`)
+  if (italics) ret.push(`"ital" var(--font-italics, ${italics})`)
+  if (opticalSize) ret.push(`"opsz" var(--font-optical-size, ${opticalSize})`)
+  if (contrast) ret.push(`"CNTR" var(--font-contrast, ${contrast})`)
+
+  // Parametric Axes
+  if (thickStroke) ret.push(`"XOPQ" var(--font-thick-stroke, ${thickStroke})`)
+  if (thinStroke) ret.push(`"YOPQ" var(--font-counter-width, ${thinStroke})`)
+  if (counterWidth)
+    ret.push(`"XTRA" var(--font-counter-width, ${counterWidth})`)
+  if (uppercaseHeight)
+    ret.push(`"YTUC" var(--font-uppercase-height, ${uppercaseHeight})`)
+  if (lowercaseHeight)
+    ret.push(`"YTLC" var(--font-lowercase-height, ${lowercaseHeight})`)
+  if (ascenderHeight)
+    ret.push(`"YTAS" var(--font-ascender-height, ${ascenderHeight})`)
+  if (descenderDepth)
+    ret.push(`"YTDE" var(--font-descender-depth, ${descenderDepth})`)
+  if (figureHeight)
+    ret.push(`"YTFI" var(--font-figure-height, ${figureHeight})`)
+
+  return ret.join(', ')
+}