@splendidlabz/styles 2.2.0

package/UI/_PerspectiveHover.scss

@@ -0,0 +1,9 @@
+@layer components {
+  .PerspectiveHover {
+    --sensitivity: 3;
+    --perspective: 1000px;
+    position: relative;
+    will-change: transform;
+    transition: transform 0.25s ease-in-out;
+  }
+}

package/UI/_Popover.scss

@@ -0,0 +1,25 @@
+@layer components {
+  // Change popover default styles to include shadow instead of background color.
+  .PopoverContent {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 100;
+    max-width: 100%;
+    padding: 0.75em;
+    border: var(--border-width) solid var(--border-color);
+    border-radius: var(--radius);
+    background-color: var(--bg-color);
+  }
+
+  .PopoverArrow {
+    position: absolute;
+    aspect-ratio: 1;
+    border-top-width: inherit;
+    border-left-width: inherit;
+    border-style: inherit;
+    border-color: inherit;
+    border-radius: 2px 0 0;
+    background-color: inherit;
+  }
+}

package/UI/_Resizer.scss

@@ -0,0 +1,43 @@
+@layer components {
+  .Resizer {
+    --size: 4px;
+    background-color: var(--bg-color, transparent);
+
+    &:hover {
+      background-color: var(--bg-hover-color, pink);
+    }
+  }
+
+  .Resizer-horizontal {
+    cursor: ew-resize;
+    top: 0;
+    bottom: 0;
+    width: var(--size, 4px);
+  }
+
+  .Resizer-vertical {
+    cursor: ns-resize;
+    left: 0;
+    right: 0;
+    height: var(--size, 4px);
+  }
+
+  // See Resizer.svelte for comment on why top and left are commneted out.
+  // prettier-ignore
+  .Stack {
+    // .Resizer-top { place-self: start stretch; }
+    .Resizer-bottom { place-self: end stretch; }
+    // .Resizer-left { place-self: stretch start; }
+    .Resizer-right { place-self: stretch end; }
+  }
+
+  // prettier-ignore
+  .relative, 
+  .Relative {
+    .Resizer { position: absolute; }
+    // .Resizer-top { top: 0; }
+    .Resizer-bottom { bottom: 0; }
+    // .Resizer-left { left: 0; }
+    .Resizer-right { right: 0; }
+  }
+}

package/UI/_Spotlight.scss

@@ -0,0 +1,42 @@
+@layer components {
+  .Spotlight {
+    --size: 25em;
+    --gradient: hsl(0deg 0% 50% / 30%), transparent;
+    --gradient-shape: circle;
+    --gradient-size: closest-side;
+
+    overflow: hidden;
+    position: relative;
+
+    // Lifts content up so spotlight will be behind content
+    > * {
+      position: relative;
+      z-index: 2;
+      background-clip: text;
+    }
+
+    &::after {
+      content: '';
+      pointer-events: none;
+      position: absolute;
+      top: calc(var(--y) * 1px);
+      left: calc(var(--x) * 1px);
+      z-index: 1;
+      width: var(--size);
+      height: var(--size);
+      background-image: radial-gradient(
+        var(--gradient-shape) var(--gradient-size) at var(--gradient-position),
+        var(--tw-gradient-stops, var(--gradient))
+      );
+
+      opacity: 0;
+      transform: translate(-50%, -50%);
+      transition: var(--transition-values);
+      transition-property: opacity;
+    }
+
+    &[active]::after {
+      opacity: 1;
+    }
+  }
+}

package/UI/_Status.scss

@@ -0,0 +1,33 @@
+@layer components {
+  .Status {
+    margin-top: 1rem;
+    padding: 1rem;
+    border-width: var(--border-width, 1px);
+    border-color: var(--border-color);
+    border-radius: var(--radius);
+    color: var(--text-color);
+    background-color: var(--bg-color);
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  .Status-info {
+    --border-color: #d1d5db;
+    --bg-color: #f9fafb;
+    --text-color: #111827;
+  }
+
+  .Status-error {
+    --border-color: #fca5a5;
+    --bg-color: #fef2f2;
+    --text-color: #b91c1c;
+  }
+
+  .Status-success {
+    --border-color: #86efac;
+    --bg-color: #f0fdf4;
+    --text-color: #15803d;
+  }
+}

package/UI/_Tabs.scss

@@ -0,0 +1,112 @@
+@layer components {
+  .Tablist {
+    display: flex;
+    gap: 0.5em;
+  }
+
+  .Tab {
+    position: relative;
+    z-index: 1;
+    padding: 0.5rem 1rem;
+    border-color: var(--border-color);
+    background-color: var(--bg-color);
+    text-align: left;
+  }
+
+  .Tab[aria-selected] {
+    z-index: 2;
+    border-color: var(--border-selected-color, var(--border-color));
+    background-color: var(--bg-selected-color);
+  }
+
+  .Tabpanels {
+    position: relative;
+    max-width: 100%;
+    border: var(--border-width, 1px) solid var(--border-color, black);
+  }
+
+  .Tabpanel {
+    max-width: 100%;
+    padding: 1rem;
+    transition: var(--transition-values);
+    transition-property: var(--transition-props);
+  }
+
+  // ========================
+  // Tab Placements
+  // ========================
+  // Top
+  .Tablist-top {
+    --scrollbar-width: none;
+    --scrollbar-size: 0px;
+    max-width: 100%;
+  }
+
+  // Left and Right
+  :is(.Tablist-left, .Tablist-right) {
+    display: flex;
+    flex-flow: column nowrap;
+
+    :where(.Tab) {
+      align-self: stretch;
+    }
+  }
+
+  .Tablist-right {
+    order: 2;
+  }
+
+  // ========================
+  // Tab Styles
+  // ========================
+  :where(.Tablist-underline) {
+    gap: 0;
+
+    .Tab {
+      border-width: 0;
+      border-radius: 0;
+    }
+
+    &.Tablist-top :where(.Tab) {
+      top: var(--border-width, 1px);
+      border-bottom-width: var(--border-width, 1px);
+    }
+
+    &.Tablist-left :where(.Tab) {
+      left: var(--border-width, 1px);
+      border-right-width: var(--border-width, 1px);
+    }
+
+    &.Tablist-right :where(.Tab) {
+      right: var(--border-width, 1px);
+      border-left-width: var(--border-width, 1px);
+    }
+  }
+
+  :where(.Tablist-tab) {
+    .Tab {
+      position: relative;
+    }
+
+    &.Tablist-top :where(.Tab) {
+      top: var(--border-width, 1px);
+      border-bottom: 0;
+      border-end-start-radius: 0;
+      border-end-end-radius: 0;
+    }
+
+    &.Tablist-left :where(.Tab) {
+      right: var(--border-width, 1px);
+      border-right: 0;
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
+    }
+
+    &.Tablist-right :where(.Tab) {
+      left: var(--border-width, 1px);
+      border-left: 0;
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
+    }
+  }
+}

package/UI/_Textwall.scss

@@ -0,0 +1,22 @@
+.Textwall {
+  .TextwallDimensions {
+    aspect-ratio: 4/3;
+    max-height: 75dvh;
+  }
+
+  .TextwallContent {
+    position: absolute;
+    inset: -150%;
+    transform: rotate(var(--rotation, -15deg));
+  }
+
+  // Prevent pointer blocks by massive boundary images
+  [class*='TextwallBoundary'] {
+    pointer-events: none;
+  }
+
+  // Prevent pixel rounding errors
+  .TextwallBoundary-after {
+    bottom: -1px;
+  }
+}

package/UI/_index.scss

@@ -0,0 +1,17 @@
+@use 'Accordion';
+@use 'Breadcrumbs';
+@use 'Callout';
+@use 'Drawer';
+@use 'Dropdown';
+@use 'FancyList';
+@use 'PerspectiveHover';
+@use 'Popover';
+@use 'Resizer';
+@use 'Spotlight';
+@use 'Status';
+@use 'Tabs';
+@use 'Textwall';
+@use 'Youtube';
+@use 'Codepen.scss';
+@use 'Tweet.scss';
+@use 'CQChecker';

package/Utilities/_Shapes.scss

@@ -0,0 +1,20 @@
+@layer utilities {
+  .Square {
+    width: var(--size);
+    height: var(--size);
+  }
+
+  .Circle {
+    width: var(--size);
+    height: var(--size);
+    border-radius: 50%;
+  }
+
+  .RoundRect {
+    border-radius: var(--radius, 8px);
+  }
+
+  .Pill {
+    border-radius: 100em;
+  }
+}

package/Utilities/_index.scss

@@ -0,0 +1 @@
+@use 'Shapes';

package/Variables/_Globals.scss

@@ -0,0 +1,33 @@
+// Root variables for users to customize
+:root {
+  // Typography Variables
+  --leading: 1.5;
+
+  // Global Theming Variables
+  --border-width: 1px;
+  --border-style: solid;
+  --border-color: black;
+  --radius: 0.5rem;
+
+  // Transition
+  --transition-duration: 250ms;
+  --transition-delay: 0ms;
+  --transition-easing: ease-in-out;
+
+  // Tables
+  --alt-row-color: transparent;
+
+  // Outline
+  --outline-width: 4px;
+  --outline-style: solid;
+  --outline-color: oklch(61.52% 0.178 257.59deg);
+  --outline-offset: 0px;
+}
+
+// Placing these on every element for usage
+* {
+  --transition-values: var(--transition-duration) var(--transition-delay)
+    var(--transition-easing);
+  --transition-props: background, color, border, outline, opacity, gap, fill,
+    opacity, stroke, transform;
+}

package/Variables/_index.scss

@@ -0,0 +1 @@
+@use 'Globals';

package/_Animations.scss

@@ -0,0 +1,18 @@
+[class*='Animate'] {
+  animation: var(--animation-string);
+  animation-play-state: running;
+}
+
+.Animate-floating {
+  animation: floating 4s ease-in-out infinite alternate;
+}
+
+@keyframes floating {
+  0% {
+    transform: translateY(var(--ty, -8px));
+  }
+
+  100% {
+    transform: translateY(var(--ty, 8px));
+  }
+}

package/_Fill.scss

@@ -0,0 +1,314 @@
+// Use splendidFills plugin to generate colours with the Fill system.
+// Usage with the Fill System
+// --bg-color
+// --bg-hover-color
+// --bg-focus-color
+// --bg-active-color
+// --bg-selected-color
+// --text-color
+// --text-hover-color
+// --text-focus-color
+// --text-active-color
+// --text-selected-color
+// --border-color
+// --border-hover-color
+// --border-focus-color
+// --border-active-color
+// --border-selected-color
+// --stroke-color
+// --stroke-hover-color
+// --stroke-focus-color
+// --stroke-active-color
+//
+// The following can only be applied if Shadow, TextShadow, and DropShadow are used together with the class.
+// Decide if we are gonna keep these... because there's a problem with transitions
+// --shadow-color
+// --shadow-hover-color
+// --shadow-focus-color
+// --shadow-active-color
+// --shadow-selected-color
+// --text-shadow-color
+// --text-shadow-hover-color
+// --text-shadow-focus-color
+// --text-shadow-active-color
+// --text-shadow-selected-color
+// --box-shadow-color
+// --box-shadow-hover-color
+// --box-shadow-focus-color
+// --box-shadow-active-color
+// --box-shadow-selected-color
+
+@layer components {
+  .Fill,
+  [class*='Fill'] {
+    border-color: var(--border-color);
+    color: var(--text-color);
+    background-color: var(--bg-color);
+    transition: var(--transition-values);
+    transition-property: var(--transition-props);
+
+    :where(svg path) {
+      fill: var(--fill-color, var(--text-color));
+      stroke: var(--stroke-color, var(--text-color)); // Fallback to text color
+      transition: var(--transition-values);
+      transition-property: var(--transition-props);
+    }
+
+    &:hover {
+      --shadow-color: var(--shadow-hover-color, var(--shadow-color));
+      --text-shadow-color: var(
+        --text-shadow-hover-color,
+        var(--text-shadow-color)
+      );
+      --drop-shadow-color: var(
+        --drop-shadow-hover-color,
+        var(--drop-shadow-color)
+      );
+
+      border-color: var(--border-hover-color, var(--border-color));
+      color: var(--text-hover-color, var(--text-color));
+      background-color: var(--bg-hover-color, var(--bg-color));
+
+      :where(svg path) {
+        fill: var(
+          --fill-hover-color,
+          var(--text-hover-color, var(--fill-color, var(--text-color)))
+        );
+        stroke: var(
+          --stroke-hover-color,
+          var(--text-hover-color, var(--stroke-color, var(--text-color)))
+        );
+      }
+    }
+
+    // Fallback to hover color
+    &:focus {
+      --shadow-color: var(
+        --shadow-focus-color,
+        var(--shadow-hover-color, var(--shadow-color))
+      );
+      --text-shadow-color: var(
+        --text-shadow-focus-color,
+        var(--text-shadow-hover-color, var(--text-shadow-color))
+      );
+      --drop-shadow-color: var(
+        --drop-shadow-focus-color,
+        var(--drop-shadow-hover-color, var(--drop-shadow-color))
+      );
+
+      border-color: var(
+        --border-focus-color,
+        var(--border-hover-color, var(--border-color))
+      );
+      color: var(
+        --text-focus-color,
+        var(--text-hover-color, var(--text-color))
+      );
+      background-color: var(
+        --bg-focus-color,
+        var(--bg-hover-color, var(--bg-color))
+      );
+
+      :where(svg path) {
+        fill: var(
+          --fill-focus-color,
+          var(
+            --text-focus-color,
+            var(
+              --fill-hover-color,
+              var(--text-hover-color, var(--fill-color, var(--text-color)))
+            )
+          )
+        );
+        stroke: var(
+          --stroke-focus-color,
+          var(
+            --text-focus-color,
+            var(
+              --stroke-hover-color,
+              var(--text-hover-color, var(--stroke-color, var(--text-color)))
+            )
+          )
+        );
+      }
+    }
+
+    // Fallback to hover color
+    &:active {
+      --shadow-color: var(
+        --shadow-active-color,
+        var(--shadow-hover-color, var(--shadow-color))
+      );
+      --text-shadow-color: var(
+        --text-shadow-active-color,
+        var(--text-shadow-hover-color, var(--text-shadow-color))
+      );
+      --drop-shadow-color: var(
+        --drop-shadow-active-color,
+        var(--drop-shadow-hover-color, var(--drop-shadow-color))
+      );
+
+      border-color: var(
+        --border-active-color,
+        var(--border-hover-color, var(--border-color))
+      );
+      color: var(
+        --text-active-color,
+        var(--text-hover-color, var(--text-color))
+      );
+      background-color: var(
+        --bg-active-color,
+        var(--bg-hover-color, var(--bg-color))
+      );
+
+      :where(svg path) {
+        fill: var(
+          --fill-active-color,
+          var(
+            --text-active-color,
+            var(
+              --fill-hover-color,
+              var(--text-hover-color, var(--fill-color, var(--text-color)))
+            )
+          )
+        );
+        stroke: var(
+          --stroke-active-color,
+          var(
+            --text-active-color,
+            var(
+              --stroke-hover-color,
+              var(--text-hover-color, var(--stroke-color, var(--text-color)))
+            )
+          )
+        );
+      }
+    }
+
+    // Fallback to hover color
+    &.selected,
+    &.checked,
+    &[aria-current],
+    &[aria-selected],
+    &[aria-expanded='true'] {
+      --shadow-color: var(
+        --shadow-selected-color,
+        var(--shadow-hover-color, var(--shadow-color))
+      );
+      --text-shadow-color: var(
+        --text-shadow-selected-color,
+        var(--text-shadow-hover-color, var(--text-shadow-color))
+      );
+      --drop-shadow-color: var(
+        --drop-shadow-selected-color,
+        var(--drop-shadow-hover-color, var(--drop-shadow-color))
+      );
+
+      border-color: var(
+        --border-selected-color,
+        var(--border-hover-color, var(--border-color))
+      );
+      color: var(
+        --text-selected-color,
+        var(--text-hover-color, var(--text-color))
+      );
+      background-color: var(
+        --bg-selected-color,
+        var(--bg-hover-color, var(--bg-color))
+      );
+
+      :where(svg path) {
+        fill: var(
+          --fill-selected-color,
+          var(
+            --text-selected-color,
+            var(
+              --fill-hover-color,
+              var(--text-hover-color, var(--fill-color, var(--text-color)))
+            )
+          )
+        );
+        stroke: var(
+          --stroke-selected-color,
+          var(
+            --text-selected-color,
+            var(
+              --stroke-hover-color,
+              var(--text-hover-color, var(--stroke-color, var(--text-color)))
+            )
+          )
+        );
+      }
+    }
+
+    .disabled,
+    [disabled] {
+      --shadow-color: var(--shadow-hover-color, var(--shadow-color));
+      --text-shadow-color: var(
+        --text-shadow-hover-color,
+        var(--text-shadow-color)
+      );
+      --drop-shadow-color: var(
+        --drop-shadow-hover-color,
+        var(--drop-shadow-color)
+      );
+
+      border-color: var(--border-hover-color, var(--border-color));
+      color: var(--text-hover-color, var(--text-color));
+      background-color: var(--bg-hover-color, var(--bg-color));
+
+      :where(svg path) {
+        fill: var(
+          --fill-hover-color,
+          var(--text-hover-color, var(--fill-color, var(--text-color)))
+        );
+        stroke: var(
+          --stroke-hover-color,
+          var(--text-hover-color, var(--stroke-color, var(--text-color)))
+        );
+      }
+    }
+  }
+
+  // ========================
+  // Default values for Fill System
+  // ========================
+  :where([class*='Fill'][class*='-outline']) {
+    --bg-color: transparent;
+  }
+
+  :where([class*='Fill'][class*='-ghost']) {
+    --bg-color: transparent;
+    --border-color: transparent;
+  }
+
+  // Text only, no background or border
+  :where([class*='Fill'][class*='-text']) {
+    --bg-color: transparent;
+    --bg-hover-color: transparent;
+    --bg-active-color: transparent;
+    --border-color: transparent;
+    --border-hover-color: transparent;
+    --border-active-color: transparent;
+  }
+
+  // Removes all interactive colours
+  [class*='Fill'][class*='not-interactive'],
+  [class*='Fill'][class*='notInteractive'] {
+    --bg-hover-color: inherit;
+    --bg-active-color: inherit;
+    --bg-selected-color: inherit;
+    --border-hover-color: inherit;
+    --border-active-color: inherit;
+    --border-selected-color: inherit;
+    --text-hover-color: inherit;
+    --text-active-color: inherit;
+    --text-selected-color: inherit;
+    --fill-hover-color: inherit;
+    --fill-active-color: inherit;
+    --fill-selected-color: inherit;
+    --stroke-hover-color: inherit;
+    --stroke-active-color: inherit;
+    --stroke-selected-color: inherit;
+  }
+}