@splendidlabz/styles 2.3.2 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splendidlabz/styles",
-  "version": "2.3.2",
+  "version": "3.0.0",
   "description": "",
   "author": "Zell Liew <zellwk@gmail.com>",
   "files": [
@@ -8,17 +8,31 @@
     "dist"
   ],
   "exports": {
-    ".": "./src/styles.scss",
-    "./*": "./src/*.scss",
-    "./css": "./dist/styles.css",
-    "./css/base": "./dist/Base/index.css",
-    "./css/*": "./dist/*.css"
+    ".": "./src/styles.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",
+    "./scripts": "./src/scripts/index.js",
+    "./scripts/*": "./src/scripts/*.js"
   },
   "scripts": {
-    "build": "sass src:dist",
-    "lint": "stylelint '**/*.{css,scss}' --fix"
+    "lint": "stylelint '**/*.{css,scss}' --fix",
+    "dev": "turbowatch ./turbowatch.ts ",
+    "lightning": "lightningcss --bundle --targets \">= 0.25%\" ./src/styles.css -o dist/styles.css",
+    "build-styles": "npx @tailwindcss/cli -i ./no-tailwind/index.css -o ./dist/no-tw/styles.css",
+    "build-layouts": "npx @tailwindcss/cli -i ./no-tailwind/layouts.css -o ./dist/no-tw/layouts.css",
+    "build": "npm run build-styles & npm run build-layouts"
+  },
+  "dependencies": {
+    "@splendidlabz/utils": "*"
   },
   "devDependencies": {
-    "@splendidlabz/stylelint-config": "*"
+    "@splendidlabz/stylelint-config": "3.0.0",
+    "@tailwindcss/cli": "^4.0.9",
+    "lightningcss-cli": "^1.29.1",
+    "tailwindcss": "^4.0.9",
+    "turbowatch": "^2.29.4"
   }
 }

package/src/addons/index.css

@@ -0,0 +1 @@
+@import './scrollbars.css';

package/src/addons/scrollbars.css

@@ -0,0 +1,60 @@
+/*********************
+ * Custom Scrollbars *
+ *********************/
+@theme {
+  --scrollbar-width: auto;
+  --scrollbar-size: 14px;
+  --scroll-behavior: smooth;
+}
+
+@layer base {
+  :root {
+    @media (prefers-color-scheme: light) {
+      --scrollbar-thumb-color: #c1c1c1;
+      --scrollbar-track-color: #fafafa;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      --scrollbar-thumb-color: #6b6b6b;
+      --scrollbar-track-color: #2d2d2d;
+    }
+  }
+
+  * {
+    scroll-behavior: var(--scroll-behavior);
+    scrollbar-width: var(--scrollbar-width);
+    scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
+
+    /* Works on Chrome, Edge, and Safari */
+    &::-webkit-scrollbar {
+      width: var(--scrollbar-size);
+      height: var(--scrollbar-size);
+    }
+
+    &::-webkit-scrollbar-track {
+      background: var(--scrollbar-track-color);
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border: var(--scrollbar-thumb-radius, 3px) solid
+        var(--scrollbar-track-color);
+      border-radius: 100px;
+      background: var(--scrollbar-thumb-color);
+    }
+  }
+}
+
+@utility scrollbar-auto {
+  --scrollbar-width: auto;
+  --scrollbar-size: 12px;
+}
+
+@utility scrollbar-thin {
+  --scrollbar-width: thin;
+  --scrollbar-size: 12px;
+}
+
+@utility scrollbar-none {
+  --scrollbar-width: none;
+  --scrollbar-size: 0;
+}

package/src/{UI/_Accordion.scss → components/accordion.css}

@@ -1,5 +1,5 @@
-@layer components {
-  .Accordion {
+@layer utilities {
+  .accordion {
     svg {
       transition: var(--transition-values);
       transition-property: var(--transition-props);
@@ -10,24 +10,22 @@
     }
   }
 
-  .AccordionBtn {
+  .accordion-button {
+    @apply padding-scaffold;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    gap: 0.5em;
     width: 100%;
-    padding: 0.75rem;
-    border: 0;
-    text-align: left;
+    max-width: 100%;
 
-    // astro-slot signifies the title, except it's a slot
+    /* astro-slot contains the title */
     &:where(:has(svg + span)),
     &:where(:has(svg + astro-slot)) {
       justify-content: start;
     }
   }
 
-  .AccordionContent {
-    padding: 0.75rem;
+  .accordion-content {
+    @apply padding-scaffold;
   }
 }

package/src/components/drawer.css

@@ -0,0 +1,20 @@
+@layer utilities {
+  .drawer-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 15;
+    background-color: oklch(0% 0 0deg / 50%);
+  }
+
+  /* // Note to self: */
+  /* // Need to create another Class to contain default z-index for Absolute Drawers — so this doesn't show above it. */
+  .drawer-content {
+    position: fixed;
+    overflow-y: auto;
+    z-index: 100;
+  }
+
+  .drawer-close-button {
+    @apply button-icon;
+  }
+}

package/src/components/index.css

@@ -0,0 +1,2 @@
+@import './drawer.css';
+@import './accordion.css';

package/src/effects/elevation.css

@@ -0,0 +1,290 @@
+/* https://www.joshwcomeau.com/css/designing-shadows/ */
+:root {
+  --shadow-x: 0px;
+  --shadow-y: 1px;
+  --shadow-blur: 1px;
+  --shadow-color: rgb(0 0 0);
+  --shadow-alpha: 0.25;
+  --shadow-x-multiple: 2;
+  --shadow-y-multiple: 2;
+  --shadow-blur-multiple: 2;
+}
+
+@utility elevation {
+  & {
+    --sx: var(--shadow-x);
+    --sy: var(--shadow-y);
+    --sb: var(--shadow-blur);
+    --sc: var(--shadow-color);
+    --sa: var(--shadow-alpha);
+    --sx-multiple: var(--shadow-x-multiple);
+    --sy-multiple: var(--shadow-y-multiple);
+    --sb-multiple: var(--shadow-blur-multiple);
+  }
+}
+
+@utility elevation-1 {
+  & {
+    @apply elevation;
+    box-shadow: var(--sx) var(--sy) var(--sb)
+      oklch(from var(--sc) l c h / var(--sa));
+  }
+}
+
+@utility elevation-2 {
+  & {
+    @apply elevation;
+    box-shadow:
+      var(--sx) var(--sy) var(--sb) oklch(from var(--sc) l c h / var(--sa)),
+      calc(var(--sx) * pow(var(--sx-multiple), 1))
+        calc(var(--sy) * pow(var(--sy-multiple), 1))
+        calc(var(--sb) * pow(var(--sb-multiple), 1))
+        oklch(from var(--sc) l c h / var(--sa));
+  }
+}
+
+@utility elevation-3 {
+  & {
+    @apply elevation;
+    box-shadow:
+      var(--sx) var(--sy) var(--sb) oklch(from var(--sc) l c h / var(--sa)),
+      calc(var(--sx) * pow(var(--sx-multiple), 1))
+        calc(var(--sy) * pow(var(--sy-multiple), 1))
+        calc(var(--sb) * pow(var(--sb-multiple), 1))
+        oklch(from var(--sc) l c h / var(--sa)),
+      calc(var(--sx) * pow(var(--sx-multiple), 2))
+        calc(var(--sy) * pow(var(--sy-multiple), 2))
+        calc(var(--sb) * pow(var(--sb-multiple), 2))
+        oklch(from var(--sc) l c h / var(--sa));
+  }
+}
+
+@utility elevation-4 {
+  & {
+    @apply elevation;
+    box-shadow:
+      var(--sx) var(--sy) var(--sb) oklch(from var(--sc) l c h / var(--sa)),
+      calc(var(--sx) * pow(var(--sx-multiple), 1))
+        calc(var(--sy) * pow(var(--sy-multiple), 1))
+        calc(var(--sb) * pow(var(--sb-multiple), 1))
+        oklch(from var(--sc) l c h / var(--sa)),
+      calc(var(--sx) * pow(var(--sx-multiple), 2))
+        calc(var(--sy) * pow(var(--sy-multiple), 2))
+        calc(var(--sb) * pow(var(--sb-multiple), 2))
+        oklch(from var(--sc) l c h / var(--sa)),
+      calc(var(--sx) * pow(var(--sx-multiple), 3))
+        calc(var(--sy) * pow(var(--sy-multiple), 3))
+        calc(var(--sb) * pow(var(--sb-multiple), 3))
+        oklch(from var(--sc) l c h / var(--sa));
+  }
+}
+
+@utility elevation-5 {
+  & {
+    @apply elevation;
+    box-shadow:
+      var(--sx) var(--sy) var(--sb) oklch(from var(--sc) l c h / var(--sa)),
+      calc(var(--sx) * pow(var(--sx-multiple), 1))
+        calc(var(--sy) * pow(var(--sy-multiple), 1))
+        calc(var(--sb) * pow(var(--sb-multiple), 1))
+        oklch(from var(--sc) l c h / var(--sa)),
+      calc(var(--sx) * pow(var(--sx-multiple), 2))
+        calc(var(--sy) * pow(var(--sy-multiple), 2))
+        calc(var(--sb) * pow(var(--sb-multiple), 2))
+        oklch(from var(--sc) l c h / var(--sa)),
+      calc(var(--sx) * pow(var(--sx-multiple), 3))
+        calc(var(--sy) * pow(var(--sy-multiple), 3))
+        calc(var(--sb) * pow(var(--sb-multiple), 3))
+        oklch(from var(--sc) l c h / var(--sa)),
+      calc(var(--sx) * pow(var(--sx-multiple), 4))
+        calc(var(--sy) * pow(var(--sy-multiple), 4))
+        calc(var(--sb) * pow(var(--sb-multiple), 4))
+        oklch(from var(--sc) l c h / var(--sa));
+  }
+}
+
+@utility elevation-6 {
+  & {
+    @apply elevation;
+    box-shadow:
+      var(--sx) var(--sy) var(--sb) oklch(from var(--sc) l c h / var(--sa)),
+      calc(var(--sx) * pow(var(--sx-multiple), 1))
+        calc(var(--sy) * pow(var(--sy-multiple), 1))
+        calc(var(--sb) * pow(var(--sb-multiple), 1))
+        oklch(from var(--sc) l c h / var(--sa)),
+      calc(var(--sx) * pow(var(--sx-multiple), 2))
+        calc(var(--sy) * pow(var(--sy-multiple), 2))
+        calc(var(--sb) * pow(var(--sb-multiple), 2))
+        oklch(from var(--sc) l c h / var(--sa)),
+      calc(var(--sx) * pow(var(--sx-multiple), 3))
+        calc(var(--sy) * pow(var(--sy-multiple), 3))
+        calc(var(--sb) * pow(var(--sb-multiple), 3))
+        oklch(from var(--sc) l c h / var(--sa)),
+      calc(var(--sx) * pow(var(--sx-multiple), 4))
+        calc(var(--sy) * pow(var(--sy-multiple), 4))
+        calc(var(--sb) * pow(var(--sb-multiple), 4))
+        oklch(from var(--sc) l c h / var(--sa)),
+      calc(var(--sx) * pow(var(--sx-multiple), 5))
+        calc(var(--sy) * pow(var(--sy-multiple), 5))
+        calc(var(--sb) * pow(var(--sb-multiple), 5))
+        oklch(from var(--sc) l c h / var(--sa));
+  }
+}
+
+/*********************
+ * Elevation with Drop Shadow *
+ *********************/
+@utility ds-elevation {
+  --sx: var(--drop-shadow-x, var(--shadow-x));
+  --sy: var(--drop-shadow-y, var(--shadow-y));
+  --sb: var(--drop-shadow-blur, var(--shadow-blur));
+  --sc: var(--drop-shadow-color, var(--shadow-color));
+  --sa: var(--drop-shadow-alpha, var(--shadow-alpha));
+  --sx-multiple: var(--drop-shadow-x-multiple, var(--shadow-x-multiple));
+  --sy-multiple: var(--drop-shadow-y-multiple, var(--shadow-y-multiple));
+  --sb-multiple: var(--drop-shadow-blur-multiple, var(--shadow-blur-multiple));
+}
+
+@utility ds-elevation-1 {
+  & {
+    @apply ds-elevation;
+    filter: drop-shadow(
+      var(--sx) var(--sy) var(--sb) oklch(from var(--sc) l c h / var(--sa))
+    );
+  }
+}
+
+@utility ds-elevation-2 {
+  & {
+    @apply ds-elevation;
+    filter: drop-shadow(
+        var(--sx) var(--sy) var(--sb) oklch(from var(--sc) l c h / var(--sa))
+      )
+      drop-shadow(
+        calc(var(--sx) * pow(var(--sx-multiple), 1))
+          calc(var(--sy) * pow(var(--sy-multiple), 1))
+          calc(var(--sb) * pow(var(--sb-multiple), 1))
+          oklch(from var(--sc) l c h / var(--sa))
+      );
+  }
+}
+
+@utility ds-elevation-3 {
+  & {
+    @apply ds-elevation;
+    filter: drop-shadow(
+        var(--sx) var(--sy) var(--sb) oklch(from var(--sc) l c h / var(--sa))
+      )
+      drop-shadow(
+        calc(var(--sx) * pow(var(--sx-multiple), 1))
+          calc(var(--sy) * pow(var(--sy-multiple), 1))
+          calc(var(--sb) * pow(var(--sb-multiple), 1))
+          oklch(from var(--sc) l c h / var(--sa))
+      )
+      drop-shadow(
+        calc(var(--sx) * pow(var(--sx-multiple), 2))
+          calc(var(--sy) * pow(var(--sy-multiple), 2))
+          calc(var(--sb) * pow(var(--sb-multiple), 2))
+          oklch(from var(--sc) l c h / var(--sa))
+      );
+  }
+}
+
+@utility ds-elevation-4 {
+  & {
+    @apply ds-elevation;
+    filter: drop-shadow(
+        var(--sx) var(--sy) var(--sb) oklch(from var(--sc) l c h / var(--sa))
+      )
+      drop-shadow(
+        calc(var(--sx) * pow(var(--sx-multiple), 1))
+          calc(var(--sy) * pow(var(--sy-multiple), 1))
+          calc(var(--sb) * pow(var(--sb-multiple), 1))
+          oklch(from var(--sc) l c h / var(--sa))
+      )
+      drop-shadow(
+        calc(var(--sx) * pow(var(--sx-multiple), 2))
+          calc(var(--sy) * pow(var(--sy-multiple), 2))
+          calc(var(--sb) * pow(var(--sb-multiple), 2))
+          oklch(from var(--sc) l c h / var(--sa))
+      )
+      drop-shadow(
+        calc(var(--sx) * pow(var(--sx-multiple), 3))
+          calc(var(--sy) * pow(var(--sy-multiple), 3))
+          calc(var(--sb) * pow(var(--sb-multiple), 3))
+          oklch(from var(--sc) l c h / var(--sa))
+      );
+  }
+}
+
+@utility ds-elevation-5 {
+  & {
+    @apply ds-elevation;
+    filter: drop-shadow(
+        var(--sx) var(--sy) var(--sb) oklch(from var(--sc) l c h / var(--sa))
+      )
+      drop-shadow(
+        calc(var(--sx) * pow(var(--sx-multiple), 1))
+          calc(var(--sy) * pow(var(--sy-multiple), 1))
+          calc(var(--sb) * pow(var(--sb-multiple), 1))
+          oklch(from var(--sc) l c h / var(--sa))
+      )
+      drop-shadow(
+        calc(var(--sx) * pow(var(--sx-multiple), 2))
+          calc(var(--sy) * pow(var(--sy-multiple), 2))
+          calc(var(--sb) * pow(var(--sb-multiple), 2))
+          oklch(from var(--sc) l c h / var(--sa))
+      )
+      drop-shadow(
+        calc(var(--sx) * pow(var(--sx-multiple), 3))
+          calc(var(--sy) * pow(var(--sy-multiple), 3))
+          calc(var(--sb) * pow(var(--sb-multiple), 3))
+          oklch(from var(--sc) l c h / var(--sa))
+      )
+      drop-shadow(
+        calc(var(--sx) * pow(var(--sx-multiple), 4))
+          calc(var(--sy) * pow(var(--sy-multiple), 4))
+          calc(var(--sb) * pow(var(--sb-multiple), 4))
+          oklch(from var(--sc) l c h / var(--sa))
+      );
+  }
+}
+
+@utility ds-elevation-6 {
+  & {
+    @apply ds-elevation;
+    filter: drop-shadow(
+        var(--sx) var(--sy) var(--sb) oklch(from var(--sc) l c h / var(--sa))
+      )
+      drop-shadow(
+        calc(var(--sx) * pow(var(--sx-multiple), 1))
+          calc(var(--sy) * pow(var(--sy-multiple), 1))
+          calc(var(--sb) * pow(var(--sb-multiple), 1))
+          oklch(from var(--sc) l c h / var(--sa))
+      )
+      drop-shadow(
+        calc(var(--sx) * pow(var(--sx-multiple), 2))
+          calc(var(--sy) * pow(var(--sy-multiple), 2))
+          calc(var(--sb) * pow(var(--sb-multiple), 2))
+          oklch(from var(--sc) l c h / var(--sa))
+      )
+      drop-shadow(
+        calc(var(--sx) * pow(var(--sx-multiple), 3))
+          calc(var(--sy) * pow(var(--sy-multiple), 3))
+          calc(var(--sb) * pow(var(--sb-multiple), 3))
+          oklch(from var(--sc) l c h / var(--sa))
+      )
+      drop-shadow(
+        calc(var(--sx) * pow(var(--sx-multiple), 4))
+          calc(var(--sy) * pow(var(--sy-multiple), 4))
+          calc(var(--sb) * pow(var(--sb-multiple), 4))
+          oklch(from var(--sc) l c h / var(--sa))
+      )
+      drop-shadow(
+        calc(var(--sx) * pow(var(--sx-multiple), 5))
+          calc(var(--sy) * pow(var(--sy-multiple), 5))
+          calc(var(--sb) * pow(var(--sb-multiple), 5))
+          oklch(from var(--sc) l c h / var(--sa))
+      );
+  }
+}

package/src/effects/frosted-glass.css

@@ -0,0 +1,42 @@
+/* @theme {
+  --refraction: 5rem;
+} */
+
+@utility frosted-glass {
+  & {
+    position: relative;
+    backdrop-filter: blur(16px);
+    border: inherit;
+  }
+}
+
+/* Use this as a sibling element in stack */
+@utility frosted-glass-advanced {
+  & {
+    pointer-events: none;
+    margin: calc(var(--refraction) * -1);
+    padding: var(--refraction);
+
+    /* Using position absolute is another way */
+    /* position: absolute; */
+    /* inset: calc(var(--refraction) * -1); */ /* z-index: -1; */
+    /* width: calc(100% + var(--refraction) * 2); */
+    /* height: calc(100% + var(--refraction) * 2); */
+    border-radius: inherit;
+    backdrop-filter: blur(16px);
+    mask-image:
+      linear-gradient(
+        to bottom,
+        transparent 0% var(--refraction),
+        black var(--refraction) calc(100% - var(--refraction)),
+        transparent calc(100% - var(--refraction)) 100%
+      ),
+      linear-gradient(
+        to right,
+        transparent 0% var(--refraction),
+        black var(--refraction) calc(100% - var(--refraction)),
+        transparent calc(100% - var(--refraction)) 100%
+      );
+    mask-composite: intersect;
+  }
+}

package/src/effects/gradients.css

@@ -0,0 +1,107 @@
+/* Gradient Defaults */
+@layer base {
+  :root {
+    /* --gradient: ; */
+    --gradient-alpha: 1;
+    --gradient-angle: 90deg;
+    --gradient-position: center; /* For radial and conic gradients */
+    --gradient-shape: ; /* For radial and conic gradients */
+    --gradient-size: ; /* For radial gradient */
+    --color-space: oklab;
+    --hue-interpolation: ;
+  }
+}
+
+/* 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),
+    var(--tw-gradient-to) var(--tw-gradient-to-position);
+}
+
+@utility gradient {
+  & {
+    @apply tw-gradient;
+    background-image: linear-gradient(
+      var(--gradient-angle),
+      var(--gradient, var(--tw-gradient))
+    );
+
+    @supports (linear-gradient(in oklab)) {
+      background: linear-gradient(
+        var(--gradient-angle) in var(--color-space) var(--hue-interpolation),
+        var(--gradient, var(--tw-gradient))
+      );
+    }
+  }
+}
+
+@utility radial-gradient {
+  & {
+    @apply tw-gradient;
+    background-image: radial-gradient(
+      var(--gradient-shape) var(--gradient-size) at var(--gradient-position),
+      var(--tw-gradient-stops, var(--gradient))
+    );
+  }
+}
+
+@utility conic-gradient {
+  & {
+    @apply tw-gradient;
+    background-image: conic-gradient(
+      from var(--gradient-angle) at var(--gradient-position),
+      var(--tw-gradient-stops, var(--gradient))
+    );
+  }
+}
+
+@utility text-gradient {
+  & {
+    display: inline-flex;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+
+    /* Allows multiline gradients in Safari */
+    box-decoration-break: clone;
+  }
+}
+
+/*********************
+ * Repeating Gradients *
+ * Needs more testing
+ *********************/
+@utility repeating-gradient {
+  & {
+    background-image: repeating-linear-gradient(
+      var(--gradient-angle),
+      var(--tw-gradient-stops, 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))
+      );
+    }
+  }
+}
+
+@utility repeating-radial-gradient {
+  & {
+    background-image: repeating-radial-gradient(
+      var(--gradient-shape) var(--gradient-size) at var(--gradient-position),
+      var(--tw-gradient-stops, var(--gradient))
+    );
+  }
+}
+
+@utility repeating-conic-gradient {
+  & {
+    background-image: repeating-conic-gradient(
+      from var(--gradient-angle) at var(--gradient-position),
+      var(--tw-gradient-stops, var(--gradient))
+    );
+  }
+}

package/src/effects/highlight.css

@@ -0,0 +1,13 @@
+/* .highlight-underline {
+} */
+
+@utility highlight-bg {
+  & {
+    /* line-height: 1; */
+    background-image: linear-gradient(
+      transparent 0 var(--highlight-start, 0),
+      var(--highlight-color) var(--highlight-start, 0) var(--highlight-end, 1em),
+      transparent var(--highlight-end, 1em)
+    );
+  }
+}

package/src/effects/index.css

@@ -0,0 +1,6 @@
+@import './elevation.css';
+@import './gradients.css';
+@import './highlight.css';
+@import './shadows.css';
+@import './text-outline.css';
+@import './frosted-glass.css';

package/src/effects/inner-border.css

@@ -0,0 +1,18 @@
+/* From https://css-tip.com/inner-border/  */
+/* Needs testing */
+@utility inner-border {
+  & {
+    --offset: 20px; /* offset of the border */
+    --border-width: 5px; /* border thickness */
+    mask:
+      conic-gradient(#000 0 0) no-repeat 50% /
+        calc(100% - 2 * (var(--offset) + var(--border-width)))
+        calc(100% - 2 * (var(--offset) + var(--border-width))),
+      conic-gradient(
+          from 90deg at var(--offset) var(--offset),
+          #0000 25%,
+          #000 0
+        )
+        0 0 / calc(100% - var(--offset)) calc(100% - var(--offset));
+  }
+}