@splendidlabz/styles 4.0.0-alpha.1 → 4.0.0-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splendidlabz/styles",
-  "version": "4.0.0-alpha.1",
+  "version": "4.0.0-beta.3",
   "description": "",
   "type": "module",
   "author": "Zell Liew <zellwk@gmail.com>",
@@ -10,12 +10,8 @@
   ],
   "exports": {
     ".": "./src/styles.css",
-    "./astro": "./src/astro/index.css",
     "./components": "./src/components/index.css",
-    "./addons": "./src/addons/index.css",
-    "./no-tw": "./dist/no-tw/styles.css",
-    "./no-tw/*": "./dist/no-tw/*.css",
-    "./*": "./src/*.css",
+    "./layouts/no-tw": "./dist/no-tw/styles.css",
     "./scripts": "./scripts/index.js"
   },
   "scripts": {
@@ -27,10 +23,10 @@
     "build": "npm run build-styles & npm run build-layouts"
   },
   "dependencies": {
-    "@splendidlabz/utils": "1.5.0-alpha.4"
+    "@splendidlabz/utils": "1.5.0-beta.5"
   },
   "devDependencies": {
-    "@splendidlabz/stylelint-config": "3.0.0-alpha.4",
+    "@splendidlabz/stylelint-config": "3.0.0-beta.5",
     "@tailwindcss/cli": "^4.1.3",
     "lightningcss-cli": "^1.29.3",
     "tailwindcss": "^4.1.3",

package/src/components/astro/fancylist.css

@@ -0,0 +1,28 @@
+@utility fancylist {
+  & {
+    --svg-width: 1em;
+    --svg-height: 1lh;
+    display: grid;
+    grid-template-columns: auto 1fr;
+    column-gap: 0.5em;
+
+    :where(li) {
+      grid-column: 1 / -1;
+      display: grid;
+      grid-template-columns: subgrid;
+
+      /* Positions the Emoji */
+
+      /* This is kind of brute-forced at the moment. */
+      :where(.emoji),
+      > :where(astro-slot, astro-island) > :where(.emoji) {
+        font-size: 0.75em;
+        line-height: 1lh;
+      }
+    }
+  }
+
+  .prose & {
+    margin-left: 0;
+  }
+}

package/src/components/astro/index.css

@@ -0,0 +1,2 @@
+@import './textwall.css';
+@import './fancylist.css';

package/src/{primitives → components/css}/card.css

@@ -1,6 +1,6 @@
 @utility card {
   & {
-    padding: var(--padding, 1rem);
+    padding: var(--padding, 1rlh);
     border: var(--border-width) var(--border-style) var(--border-color);
     border-radius: var(--radius);
   }
@@ -12,8 +12,13 @@
 
     > *,
     :where(astro-slot, astro-island, astro-content) > * {
-      margin: var(--nudge, 0);
-      padding: var(--padding, 1rem);
+      @apply nudge;
+      padding: var(--padding, 1rlh);
+    }
+
+    /* Inner Card Split */
+    > .card-split {
+      border: 0;
     }
 
     &.card-split {

package/src/{primitives → components/css}/indent-list.css

@@ -1,5 +1,5 @@
-@utility indent-list-scaffold {
-  --indent-list-depth: 0;
+@utility indentlist-scaffold {
+  --indentlist-depth: 0;
 
   li li {
     margin-inline-start: var(--indent, 1em);
@@ -35,17 +35,17 @@
   }
 }
 
-@utility indent-list {
-  @apply indent-list-scaffold;
+@utility indentlist {
+  @apply indentlist-scaffold;
 
   li {
     list-style-type: disc;
   }
 }
 
-@utility indent-list-guides {
+@utility indentlist-guides {
   & {
-    @apply indent-list-scaffold;
+    @apply indentlist-scaffold;
 
     li li {
       position: relative;

package/src/{primitives → components/css}/prose.css

@@ -6,21 +6,29 @@
     max-width: 100%;
 
     /* 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, h3),
-    * + :where(astro-island, astro-slot) > :where(:where(h2, h3):first-child) {
-      margin-top: 2lh;
-      scroll-margin-top: 2lh;
+    > * + :where(h2),
+    > * + :where(astro-island, astro-slot) > :where(:where(h2):first-child) {
+      margin-top: 1.5rlh;
+      scroll-margin-top: 1.5rlh;
     }
 
-    * + :where(h4, h5, h6),
-    *
+    > * + :where(h3),
+    > * + :where(astro-island, astro-slot) > :where(:where(h3):first-child) {
+      margin-top: 1rlh;
+      margin-bottom: -0.5rlh;
+      scroll-margin-top: 1rlh;
+    }
+
+    > * + :where(h4, h5, h6),
+    > *
       + :where(astro-island, astro-slot)
       > :where(:where(h4, h5, h6):first-child) {
-      margin-top: 1lh;
-      scroll-margin-top: 2lh;
+      margin-top: 1rlh;
+      margin-bottom: -1rlh;
+      scroll-margin-top: 1rlh;
     }
 
-    :where(ul, ol) {
+    :where(ul) {
       list-style-type: initial;
     }
 

package/src/{effects/stroke.css → components/css/simple-svg.css}

@@ -1,3 +1,13 @@
+/* stylelint-disable declaration-block-no-duplicate-custom-properties */
+
+@utility simple-svg {
+  * {
+    fill: var(--fill-color);
+    stroke: var(--stroke-color); /* Fallback to text color */
+    stroke-width: var(--stroke-width);
+  }
+}
+
 /*********************
  * Stroke *
  * Allows spl-stroke-<length> to create --stroke-width

package/src/{primitives → components/css}/table.css

@@ -47,9 +47,18 @@
 }
 
 @utility table-cell {
-  text-align: left;
-  padding: var(--padding, var(--padding-x, 0.375rem))
-    var(--padding, var(--padding-y, 0.5rem));
+  --cell-padding-x: 0.5rlh;
+  --cell-padding-y: 0.5rlh;
+
+  & {
+    padding-block: var(--cell-padding-y);
+    padding-inline-end: var(--cell-padding-x);
+    text-align: left;
+
+    &:last-child {
+      padding-inline-end: 0;
+    }
+  }
 }
 
 @utility table-center {

package/src/components/css/writing-mode.css

@@ -0,0 +1,41 @@
+@utility writing-normal {
+  writing-mode: horizontal-tb;
+}
+
+@utility writing-rotate-left {
+  & {
+    writing-mode: vertical-rl;
+    text-orientation: sideways;
+
+    /* transform: rotate(180deg); */
+    /* transform: scale(-1, -1); */
+
+    /* // This is the alternative if we don't want to use rotate */
+  }
+}
+
+@utility writing-rotate-right {
+  & {
+    writing-mode: vertical-rl;
+    text-orientation: sideways;
+  }
+}
+
+@utility writing-downwards {
+  & {
+    writing-mode: vertical-lr;
+    text-orientation: upright;
+  }
+}
+
+/* Alias for writing-downwards */
+@utility writing-downards-lr {
+  @apply writing-downwards;
+}
+
+@utility writing-downwards-rl {
+  & {
+    writing-mode: vertical-rl;
+    text-orientation: upright;
+  }
+}

package/src/components/index.css

@@ -1,6 +1,3 @@
-@import './drawer.css';
-@import './accordion.css';
-@import './popover.css';
-@import './modal.css';
-@import './tabs.css';
-@import './browserframe.css';
+@import './css/index.css';
+@import './astro/index.css';
+@import './svelte/index.css';

package/src/components/svelte/breadcrumbs.css

@@ -0,0 +1,31 @@
+/*********************
+ * Breadcrumbs *
+ *********************/
+@utility breadcrumbs {
+  :where(ul, ol) {
+    @apply flow items-center;
+    gap: 0.25em;
+  }
+}
+
+/*********************
+ * Crumb *
+ *********************/
+
+@layer base {
+  .crumb [aria-current] {
+    @apply pigment;
+    --border-radius: 0;
+    --border-color: transparent;
+
+    /* opacity: 0.7; */
+  }
+}
+
+@utility crumb {
+  & {
+    display: flex;
+    align-items: center;
+    gap: inherit;
+  }
+}

package/src/components/{browserframe.css → svelte/browserframe.css}

@@ -31,7 +31,7 @@ dot-3-color */
     flex-flow: row;
     align-items: center;
     gap: var(--dot-gap, 0.5rem);
-    padding: var(--dot-padding, 0.5lh 0.75lh);
+    padding: var(--dot-padding, 0.75rem 1rem);
   }
 
   .frame-dot {
@@ -67,18 +67,18 @@ dot-3-color */
   }
 }
 
-.BrowserFrame-colored {
-  .FrameHeaderDot {
+@utility browserframe-colored {
+  .frame-dot {
     &:first-child {
-      background-color: var(--dot-1-color, #e2544d);
+      --dot-color: var(--dot-1-color, #e2544d);
     }
 
     &:nth-child(2) {
-      background-color: var(--dot-2-color, #d79f27);
+      --dot-color: var(--dot-2-color, #d79f27);
     }
 
     &:last-child {
-      background-color: var(--dot-3-color, #22a936);
+      --dot-color: var(--dot-3-color, #22a936);
     }
   }
 }

package/src/components/svelte/callout.css

@@ -0,0 +1,33 @@
+/*********************
+ * Callout *
+Variables:
+--text-callout-header
+--bg-callout-header
+ *********************/
+
+@utility callout {
+  & {
+    @apply border-scaffold;
+    font-size: 0.85em;
+
+    > * {
+      padding: 1rem;
+    }
+
+    :where(.callout-header) {
+      padding-block: 0.375rem;
+      border-bottom: 1px 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));
+      background: var(--bg-callout-header, var(--bg-color));
+    }
+
+    :where(.callout-content) {
+      border-bottom-left-radius: inherit;
+      border-bottom-right-radius: inherit;
+      color: var(--text-callout-content, var(--text-color));
+      background: var(--bg-callout-content, var(--bg-color));
+    }
+  }
+}

package/src/components/svelte/index.css

@@ -0,0 +1,10 @@
+@import './accordion.css';
+@import './breadcrumbs.css';
+@import './browserframe.css';
+@import './drawer.css';
+@import './modal.css';
+@import './popover.css';
+@import './tabs.css';
+@import './callout.css';
+@import './status.css';
+@import './resizer.css';

package/src/components/svelte/resizer.css

@@ -0,0 +1,44 @@
+@utility resizer {
+  --size: 4px;
+  background-color: var(--bg-color, transparent);
+
+  &:hover {
+    background-color: var(--bg-hover-color, pink);
+  }
+}
+
+@utility resizer-horizontal {
+  cursor: ew-resize;
+  top: 0;
+  bottom: 0;
+  width: var(--size, 4px);
+}
+
+@utility resizer-vertical {
+  cursor: ns-resize;
+  left: 0;
+  right: 0;
+  height: var(--size, 4px);
+}
+
+@utility resizer-bottom {
+  :where([class*='stack']) > & {
+    place-self: end stretch;
+  }
+
+  :where([class*='relative']) > & {
+    position: absolute;
+    bottom: 0;
+  }
+}
+
+@utility resizer-right {
+  :where([class*='stack']) > & {
+    place-self: stretch end;
+  }
+
+  :where([class*='relative']) > & {
+    position: absolute;
+    right: 0;
+  }
+}

package/src/components/svelte/status.css

@@ -0,0 +1,37 @@
+@utility status {
+  & {
+    @apply border-scaffold;
+    margin-top: 1rem;
+    padding: 1rem;
+    color: var(--text-color);
+    background-color: var(--bg-color);
+
+    &:empty {
+      display: none;
+    }
+  }
+}
+
+@utility status-info {
+  & {
+    --border-color: #d1d5db;
+    --bg-color: #f9fafb;
+    --text-color: #111827;
+  }
+}
+
+@utility status-error {
+  & {
+    --border-color: #fca5a5;
+    --bg-color: #fef2f2;
+    --text-color: #b91c1c;
+  }
+}
+
+@utility status-success {
+  & {
+    --border-color: #86efac;
+    --bg-color: #f0fdf4;
+    --text-color: #15803d;
+  }
+}

package/src/components/{tabs.css → svelte/tabs.css}

@@ -8,7 +8,7 @@
 @utility tab {
   & {
     align-items: start;
-    padding: 0.25lh 0.5lh;
+    padding: 0.25rlh 0.5rlh;
     text-align: left;
   }
 
@@ -26,7 +26,7 @@
 
 @utility tabpanel {
   :where(&) {
-    padding: 0.75lh;
+    padding: 1rlh;
   }
 }
 

package/src/effects/gradients.css

@@ -1,6 +1,6 @@
 @property --gradient-angle {
-  syntax: '<angle>';
-  initial-value: 0deg;
+  syntax: '<angle> | to [left | right | top | bottom] | to [top | bottom] [left | right]';
+  initial-value: to bottom;
   inherits: false;
 }
 
@@ -9,7 +9,7 @@
   :root {
     /* --gradient: ; */
     --gradient-alpha: 1;
-    --gradient-angle: 90deg;
+    --gradient-angle: to bottom;
     --gradient-position: center; /* For radial and conic gradients */
     --gradient-shape: ; /* For radial and conic gradients */
     --gradient-size: ; /* For radial gradient */
@@ -36,6 +36,10 @@
   }
 }
 
+@utility linear-gradient {
+  @apply gradient;
+}
+
 @utility radial-gradient {
   & {
     @apply tw-gradient;
@@ -71,17 +75,17 @@
  * Repeating Gradients *
  * Needs more testing
  *********************/
-@utility repeating-gradient {
+@utility repeating-linear-gradient {
   & {
     background-image: repeating-linear-gradient(
       var(--gradient-angle),
-      var(--tw-gradient-stops, var(--gradient))
+      var(--gradient)
     );
 
     @supports (linear-gradient(in oklab)) {
       background-image: repeating-linear-gradient(
         var(--gradient-angle) in var(--color-space) var(--hue-interpolation),
-        var(--tw-gradient-stops, var(--gradient))
+        var(--gradient)
       );
     }
   }

package/src/effects/index.css

@@ -5,4 +5,4 @@
 @import './shadows.css';
 @import './text.css';
 @import './frosted-glass.css';
-@import './stroke.css';
+@import './scrollbars.css';

package/src/{addons → effects}/scrollbars.css

@@ -5,18 +5,22 @@
   --scrollbar-width: auto;
   --scrollbar-size: 14px;
   --scroll-behavior: smooth;
+  --scrollbar-thumb-color-light: #c1c1c1;
+  --scrollbar-track-color-light: #fafafa;
+  --scrollbar-thumb-color-dark: #6b6b6b;
+  --scrollbar-track-color-dark: #2d2d2d;
 }
 
-@layer base {
+@utility scrollbars-on {
   :root {
     @media (prefers-color-scheme: light) {
-      --scrollbar-thumb-color: #c1c1c1;
-      --scrollbar-track-color: #fafafa;
+      --scrollbar-thumb-color: var(--scrollbar-thumb-color-light);
+      --scrollbar-track-color: var(--scrollbar-track-color-light);
     }
 
     @media (prefers-color-scheme: dark) {
-      --scrollbar-thumb-color: #6b6b6b;
-      --scrollbar-track-color: #2d2d2d;
+      --scrollbar-thumb-color: var(--scrollbar-thumb-color-dark);
+      --scrollbar-track-color: var(--scrollbar-track-color-dark);
     }
   }
 
@@ -58,3 +62,19 @@
   --scrollbar-width: none;
   --scrollbar-size: 0;
 }
+
+/* prettier-ignore */
+@utility scrollbar-thumb-* {
+  --scrollbar-thumb-color: --value(--color-*, [color]);
+  --scrollbar-thumb-color: oklch(
+    from --value(--color-*, [color]) l c h / --modifier(integer) %
+  );
+}
+
+/* prettier-ignore */
+@utility scrollbar-track-* {
+  --scrollbar-track-color: --value(--color-*, [color]);
+  --scrollbar-track-color: oklch(
+    from --value(--color-*, [color]) l c h / --modifier(integer) %
+  );
+}

package/src/effects/shadows.css

@@ -38,3 +38,119 @@
     filter: drop-shadow(var(--drop-shadow, var(--drop-shadow-string)));
   }
 }
+
+/* Shadow Functional Utilities */
+@utility sx-* {
+  --shadow-x: --value([length]);
+}
+
+@utility sy-* {
+  --shadow-y: --value([length]);
+}
+
+@utility sb-* {
+  --shadow-blur: --value([length]);
+}
+
+/* prettier-ignore */
+@utility sc-* {
+  --shadow-color: --value(--color-*, [color]);
+  --shadow-color: oklch(from --value(--color-*, [color]) l c h / --modifier(integer)%);
+}
+
+@utility ss-* {
+  --shadow-spread: --value([length]);
+}
+
+@utility sa-* {
+  --shadow-alpha: --value([number]);
+}
+
+@utility sxm-* {
+  --shadow-x-multiple: --value([number]);
+}
+
+@utility sym-* {
+  --shadow-y-multiple: --value([number]);
+}
+
+@utility sbm-* {
+  --shadow-blur-multiple: --value([number]);
+}
+
+/*********************
+ * Text Shadow Utilities *
+ *********************/
+
+@utility tsx-* {
+  --text-shadow-x: --value([length]);
+}
+
+@utility tsy-* {
+  --text-shadow-y: --value([length]);
+}
+
+@utility tsb-* {
+  --text-shadow-blur: --value([length]);
+}
+
+@utility tsc-* {
+  --text-shadow-color: --value(--color- *, [color]);
+  --text-shadow-color: oklch(
+    from --value(--color- *, [color]) l c h / --modifier(integer) %
+  );
+}
+
+@utility tsxm-* {
+  --text-shadow-x-multiple: --value([number]);
+}
+
+@utility tsym-* {
+  --text-shadow-y-multiple: --value([number]);
+}
+
+@utility tsbm-* {
+  --text-shadow-blur-multiple: --value([number]);
+}
+
+/*********************
+ * Drop Shadow Utilities *
+ *********************/
+@utility dsx-* {
+  --drop-shadow-x: --value([length]);
+}
+
+@utility dsy-* {
+  --drop-shadow-y: --value([length]);
+}
+
+@utility dsb-* {
+  --drop-shadow-blur: --value([length]);
+}
+
+@utility dsc-* {
+  --drop-shadow-color: --value(--color- *, [color]);
+  --drop-shadow-color: oklch(
+    from --value(--color- *, [color]) l c h / --modifier(integer) %
+  );
+}
+
+@utility dsa-* {
+  --drop-shadow-alpha: --value([number]);
+}
+
+@utility dsxm-* {
+  --drop-shadow-x-multiple: --value([number]);
+}
+
+@utility dsym-* {
+  --drop-shadow-y-multiple: --value([number]);
+}
+
+@utility dsbm-* {
+  --drop-shadow-blur-multiple: --value([number]);
+}
+
+@utility dsxm-* {
+  --drop-shadow-x-multiple: --value([number]);
+}