@splendidlabz/styles 3.0.0 → 4.0.0-alpha.1

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@splendidlabz/styles",
-  "version": "3.0.0",
+  "version": "4.0.0-alpha.1",
   "description": "",
+  "type": "module",
   "author": "Zell Liew <zellwk@gmail.com>",
   "files": [
     "src",
@@ -9,13 +10,13 @@
   ],
   "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",
-    "./scripts": "./src/scripts/index.js",
-    "./scripts/*": "./src/scripts/*.js"
+    "./scripts": "./scripts/index.js"
   },
   "scripts": {
     "lint": "stylelint '**/*.{css,scss}' --fix",
@@ -26,13 +27,13 @@
     "build": "npm run build-styles & npm run build-layouts"
   },
   "dependencies": {
-    "@splendidlabz/utils": "*"
+    "@splendidlabz/utils": "1.5.0-alpha.4"
   },
   "devDependencies": {
-    "@splendidlabz/stylelint-config": "3.0.0",
-    "@tailwindcss/cli": "^4.0.9",
-    "lightningcss-cli": "^1.29.1",
-    "tailwindcss": "^4.0.9",
+    "@splendidlabz/stylelint-config": "3.0.0-alpha.4",
+    "@tailwindcss/cli": "^4.1.3",
+    "lightningcss-cli": "^1.29.3",
+    "tailwindcss": "^4.1.3",
     "turbowatch": "^2.29.4"
   }
 }

package/src/animation/animation.css

@@ -0,0 +1,14 @@
+@utility animation {
+  & {
+    --_duration: var(--animation-duration, var(--transition-duration));
+    --_delay: var(--animation-delay, var(--transition-delay));
+    --_easing: var(--animation-easing, var(--transition-easing));
+    --_direction: var(--animation-direction, normal);
+    --_play-state: var(--animation-play-state, running);
+    --_fill-mode: var(--animation-fill-mode, none);
+    --_iteration-count: var(--animation-iteration-count, 1);
+    animation: var(--animation-name) var(--_duration) var(--_delay)
+      var(--_easing) var(--_direction) var(--_play-state) var(--_fill-mode)
+      var(--_iteration-count);
+  }
+}

package/src/animation/fly.css

@@ -0,0 +1,74 @@
+@keyframes fly {
+  from {
+    opacity: var(--from-opacity, 0);
+    transform: translate(var(--from-x, 0), var(--from-y, 0));
+  }
+
+  to {
+    opacity: var(--to-opacity, 1);
+    transform: translate(var(--to-x, 0), var(--to-y, 0));
+  }
+}
+
+@utility animation-fly {
+  & {
+    @apply animation;
+    --animation-name: fly;
+  }
+}
+
+@utility animation-fly-in-left {
+  @apply animation-fly;
+  --from-x: -100%;
+  --to-x: 0;
+}
+
+@utility animation-fly-in-right {
+  @apply animation-fly;
+  --from-x: 100%;
+  --to-x: 0;
+}
+
+@utility animation-fly-in-top {
+  @apply animation-fly;
+  --from-y: -100%;
+  --to-y: 0;
+}
+
+@utility animation-fly-in-bottom {
+  @apply animation-fly;
+  --from-y: 100%;
+  --to-y: 0;
+}
+
+@utility animation-fly-out-left {
+  @apply animation-fly;
+  --from-x: 0;
+  --to-x: -100%;
+  --from-opacity: 1;
+  --to-opacity: 0;
+}
+
+@utility animation-fly-out-right {
+  @apply animation-fly;
+  --from-x: 0;
+  --to-x: 100%;
+  --from-opacity: 1;
+  --to-opacity: 0;
+}
+
+@utility animation-fly-out-top {
+  @apply animation-fly;
+  --from-y: 0;
+  --to-y: -100%;
+  --from-opacity: 1;
+  --to-opacity: 0;
+}
+
+@utility animation-fly-out-bottom {
+  @apply animation-fly;
+  --from-y: 0;
+  --to-y: 100%;
+  --from-opacity: 1;
+  --to-opacity: 0;
+}

package/src/animation/index.css

@@ -0,0 +1,2 @@
+@import './animation.css';
+@import './fly.css';

package/src/astro/index.css

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

package/src/astro/textwall.css

@@ -0,0 +1,26 @@
+@utility textwall {
+  /* Used to create the boundary boxes for the content */
+  .textwall-dimensions {
+    aspect-ratio: 4/3;
+    max-height: 75dvh;
+  }
+
+  /* Rotates the content to create the textwall effect */
+  /* Negative margins allow for the content to overflow the boundary boxes */
+  .textwall-content {
+    position: absolute;
+    inset: 0;
+    margin: -25%;
+    transform: rotate(var(--rotation, -25deg));
+  }
+
+  /* Prevent pointer blocks by massive boundary images */
+  [class*='textwall-boundary'] {
+    pointer-events: none;
+  }
+
+  /* Prevent pixel rounding errors */
+  .textwall-boundary-after {
+    bottom: -1px;
+  }
+}

package/src/components/accordion.css

@@ -1,31 +1,37 @@
-@layer utilities {
-  .accordion {
-    svg {
-      transition: var(--transition-values);
-      transition-property: var(--transition-props);
-    }
+@utility accordion {
+  svg {
+    transition: var(--transition-values);
+    transition-property: var(--transition-props);
+  }
 
-    :where([aria-expanded='true'] svg) {
-      transform: rotate(90deg);
-    }
+  :where([aria-expanded='true'] svg) {
+    transform: rotate(90deg);
   }
+}
 
-  .accordion-button {
+@utility accordion-button {
+  & {
     @apply padding-scaffold;
     display: flex;
     justify-content: space-between;
-    align-items: center;
+    align-items: start;
+    gap: var(--gap);
     width: 100%;
     max-width: 100%;
+    text-align: left;
+
+    > svg {
+      width: 1em;
+      height: 1lh;
+    }
 
-    /* astro-slot contains the title */
     &:where(:has(svg + span)),
     &:where(:has(svg + astro-slot)) {
       justify-content: start;
     }
   }
+}
 
-  .accordion-content {
-    @apply padding-scaffold;
-  }
+@utility accordion-content {
+  padding: 1rem;
 }

package/src/components/browserframe.css

@@ -0,0 +1,84 @@
+/* Variables
+radius
+bg-frame-header.
+bg-frame-content. 
+border-width
+border-frame-header
+border-frame-content
+border-color
+
+dot-size
+dot-gap
+dot-color
+dot-1-color
+dot-2-color
+dot-3-color */
+
+@utility browserframe {
+  .frame-header {
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+    border: var(--border-width, 1px) solid
+      var(--border-frame-header, var(--border-color));
+    border-bottom: 0;
+    border-radius: var(--radius) var(--radius) 0 0;
+    background: var(--bg-frame-header);
+  }
+
+  .frame-dots {
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+    gap: var(--dot-gap, 0.5rem);
+    padding: var(--dot-padding, 0.5lh 0.75lh);
+  }
+
+  .frame-dot {
+    width: var(--dot-size, 0.7rem);
+    height: var(--dot-size, 0.7rem);
+
+    circle {
+      fill: var(--dot-color, #424242);
+    }
+  }
+
+  .frame-tabs {
+    overflow: hidden;
+    align-self: end;
+    padding-top: 0.5rem;
+
+    .tablist {
+      gap: 0.25lh;
+      padding-inline: calc(var(--outline-width) * 2);
+    }
+  }
+
+  .frame-content {
+    border: var(--border-width, 1px) solid
+      var(--border-frame-content, var(--border-color));
+    border-radius: 0 0 var(--radius) var(--radius);
+    background: var(--bg-frame-content);
+
+    > :where(.background) svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+.BrowserFrame-colored {
+  .FrameHeaderDot {
+    &:first-child {
+      background-color: var(--dot-1-color, #e2544d);
+    }
+
+    &:nth-child(2) {
+      background-color: var(--dot-2-color, #d79f27);
+    }
+
+    &:last-child {
+      background-color: var(--dot-3-color, #22a936);
+    }
+  }
+}

package/src/components/drawer.css

@@ -1,20 +1,26 @@
-@layer utilities {
-  .drawer-backdrop {
-    position: fixed;
-    inset: 0;
-    z-index: 15;
-    background-color: oklch(0% 0 0deg / 50%);
-  }
+/* @utility backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 200;
+  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;
-  }
+/* // 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;
+}
 
-  .drawer-close-button {
-    @apply button-icon;
-  }
+@utility drawer-close-button {
+  @apply button-icon;
 }
+
+/* Attributes */
+/* open -> nonmodal. Needs for dialog to be visible */
+
+/* Methods */
+/* showmodal -> modal */
+/* show -> non-modal */
+/* close -> close */
+/* Focus on first item otherwise */

package/src/components/index.css

@@ -1,2 +1,6 @@
 @import './drawer.css';
 @import './accordion.css';
+@import './popover.css';
+@import './modal.css';
+@import './tabs.css';
+@import './browserframe.css';

package/src/components/modal.css

@@ -0,0 +1,62 @@
+@layer base {
+  /* Prevent scroll when modal is open */
+  html:has(.modal) {
+    @apply transition-scaffold;
+    --transition-props: overflow;
+    transition-duration: 300ms;
+  }
+
+  html:has(.modal[open]) {
+    overflow: hidden;
+    transition-delay: 0s;
+  }
+
+  .modal:not([open]) {
+    pointer-events: none;
+    opacity: 0;
+  }
+
+  /* Position fixed and some inset has been automatically applied */
+
+  /* Base/Closing Style */
+  .modal {
+    @apply border-scaffold;
+    margin: auto;
+    padding: 1lh;
+    color: var(--text-color);
+    background: var(--bg-color);
+  }
+
+  .modal::backdrop {
+    backdrop-filter: blur(0);
+  }
+
+  .modal,
+  .modal::backdrop {
+    @apply transition-scaffold;
+    --transition-duration: 300ms;
+    --transition-easing: ease-in;
+    opacity: 0;
+    transition-property: var(--transition-props);
+  }
+
+  /* Opened Style */
+  .modal[open],
+  .modal[open]::backdrop {
+    --transition-easing: ease-out;
+    opacity: 1;
+  }
+
+  .modal[open]::backdrop {
+    backdrop-filter: blur(var(--blur, 6px));
+    background: var(--backdrop-bg, oklch(0% 0 0deg / 50%));
+  }
+
+  @starting-style {
+    .modal[open],
+    .modal[open]::backdrop {
+      backdrop-filter: blur(0);
+      opacity: 0;
+    }
+  }
+}

package/src/components/popover.css

@@ -0,0 +1,38 @@
+@layer base {
+  [popover] {
+    @apply border-scaffold;
+    @apply transition-scaffold;
+    --transition-duration: 300ms;
+    --transition-easing: ease-out;
+    position: absolute;
+    max-width: 100%;
+    padding: 1rem;
+    color: var(--text-color);
+    background: var(--bg-color);
+    opacity: 0;
+  }
+
+  [popover]:popover-open {
+    --transition-easing: ease-in;
+    opacity: 1;
+  }
+
+  @starting-style {
+    [popover]:popover-open {
+      opacity: 0;
+    }
+  }
+
+  /* All modals should use `dialog` element with the `modal` class. */
+  /* They should not use [popover] dialogs with backdrops are modals — it only gives the right affordance this way. */
+
+  [popover]::backdrop {
+    pointer-events: none;
+    opacity: 0;
+  }
+
+  [popover] > .content,
+  .popover-content {
+    overflow: auto;
+  }
+}

package/src/components/tabs.css

@@ -0,0 +1,111 @@
+@utility tablist {
+  & {
+    display: flex;
+    gap: 0.5lh;
+  }
+}
+
+@utility tab {
+  & {
+    align-items: start;
+    padding: 0.25lh 0.5lh;
+    text-align: left;
+  }
+
+  &[aria-selected] {
+    z-index: 2;
+  }
+}
+
+@utility tabpanels {
+  & {
+    @apply border-scaffold;
+    position: relative;
+  }
+}
+
+@utility tabpanel {
+  :where(&) {
+    padding: 0.75lh;
+  }
+}
+
+/*********************
+ * Variations *
+ *********************/
+@utility tablist-underline {
+  gap: 0;
+
+  .tab {
+    border-width: 0;
+    border-radius: 0;
+  }
+
+  &.tablist-top .tab {
+    border-bottom-width: var(--border-width);
+  }
+
+  &.tablist-left .tab {
+    border-right-width: var(--border-width);
+  }
+
+  &.tablist-right .tab {
+    border-left-width: var(--border-width);
+  }
+}
+
+@utility tablist-tab {
+  .tab {
+    position: relative;
+    z-index: 1;
+  }
+
+  &.tablist-top :where(.tab) {
+    top: var(--border-width);
+    border-bottom: 0;
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  &.tablist-left :where(.tab) {
+    right: var(--border-width);
+    border-right: 0;
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  &.tablist-right :where(.tab) {
+    left: var(--border-width);
+    border-left: 0;
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+}
+
+@utility tablist-top {
+  --scrollbar-width: none;
+  --scrollbar-size: 0px;
+  max-width: 100%;
+}
+
+@layer components {
+  /*********************
+   * Tab placements *
+   *********************/
+
+  /* Top */
+
+  /* Left and Right */
+  :is(.tablist-left, .tablist-right) {
+    display: flex;
+    flex-flow: column nowrap;
+
+    :where(.tab) {
+      align-self: stretch;
+    }
+  }
+
+  .tablist-right {
+    order: 2;
+  }
+}