@splendidlabz/styles 2.2.0

package/Forms/_Range.scss

@@ -0,0 +1,101 @@
+// WIP. Not included.
+// Simple - https://codepen.io/ibaslogic/pen/oNQMWrM
+// Simple 2 - https://stackblitz.com/edit/multi-range-slider?file=src%2Fstyle.css,src%2Fcomponents%2FmultiRangeSlider%2FMultiRangeSlider.js
+// Complex but more real - https://codepen.io/vsync/pen/mdEJMLv
+// Ana tudor collection - https://codepen.io/collection/DgYaMj/?cursor=eyJwYWdlIjo4fQ==
+@layer components {
+}
+
+input[type='range'] {
+  appearance: none;
+  width: 100%;
+
+  /* New additions */
+  height: 6px;
+  border-radius: 15px;
+  outline: none;
+  background: #ccc;
+  cursor: pointer;
+}
+
+/* Thumb: webkit */
+input[type='range']::-webkit-slider-thumb {
+  /* removing default appearance */
+  appearance: none;
+  width: 15px;
+
+  /* creating a custom design */
+  height: 15px;
+  border: none;
+  border-radius: 50%;
+  background-color: #f50;
+
+  /* box-shadow: -407px 0 0 400px #f50; emove this line */
+  transition: 0.2s ease-in-out;
+}
+
+/* Thumb: Firefox */
+input[type='range']::-moz-range-thumb {
+  width: 15px;
+  height: 15px;
+  border: none;
+  border-radius: 50%;
+  background-color: #f50;
+
+  /* box-shadow: -407px 0 0 400px #f50; emove this line */
+  transition: 0.2s ease-in-out;
+}
+
+/* Hover, active & focus Thumb: Webkit */
+
+input[type='range']::-webkit-slider-thumb:hover {
+  box-shadow: 0 0 0 10px rgb(255 85 0 / 10%);
+}
+
+input[type='range']:active::-webkit-slider-thumb {
+  box-shadow: 0 0 0 13px rgb(255 85 0 / 20%);
+}
+
+input[type='range']:focus::-webkit-slider-thumb {
+  box-shadow: 0 0 0 13px rgb(255 85 0 / 20%);
+}
+
+/* Hover, active & focus Thumb: Firfox */
+
+input[type='range']::-moz-range-thumb:hover {
+  box-shadow: 0 0 0 10px rgb(255 85 0 / 10%);
+}
+
+input[type='range']:active::-moz-range-thumb {
+  box-shadow: 0 0 0 13px rgb(255 85 0 / 20%);
+}
+
+input[type='range']:focus::-moz-range-thumb {
+  box-shadow: 0 0 0 13px rgb(255 85 0 / 20%);
+}
+
+/* =============
+Adding tick marks
+========================= */
+.range-slider {
+  flex: 1;
+}
+
+.sliderticks {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 10px;
+}
+
+.sliderticks span {
+  display: flex;
+  justify-content: center;
+  width: 1px;
+  height: 10px;
+  line-height: 40px;
+  background: #d3d3d3;
+}
+
+/* =============
+End tick marks
+========================= */

package/Forms/_Select.scss

@@ -0,0 +1,114 @@
+@layer components {
+  .Select {
+    :where(select) {
+      appearance: none;
+      color: var(--text-color);
+      background: var(--bg-color);
+
+      &:hover {
+        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 {
+        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)))
+              )
+            )
+          );
+        }
+      }
+    }
+
+    :where(select[multiple]),
+    :where(select[multiple]:focus) {
+      overflow: auto;
+      padding: 0;
+
+      :where(option) {
+        padding: 0.375em 0.75em;
+        color: var(--text-color);
+        background-image: linear-gradient(
+          0deg,
+          var(--bg-color) 0%,
+          var(--bg-color) 100%
+        );
+      }
+
+      :where(option:hover) {
+        color: var(--text-hover-color, var(--text-color));
+        background-image: linear-gradient(
+          0deg,
+          var(--bg-hover-color, var(--bg-color)) 0%,
+          var(--bg-hover-color, var(--bg-color)) 100%
+        );
+      }
+
+      :where(option:focus) {
+        color: var(
+          --text-focus-color,
+          var(--text-hover-color, var(--text-color))
+        );
+
+        background-image: linear-gradient(
+          0deg,
+          var(--bg-focus-color, var(--bg-hover-color, var(--bg-color))) 0%,
+          var(--bg-focus-color, var(--bg-hover-color, var(--bg-color))) 100%
+        );
+      }
+
+      :where(option:checked) {
+        color: var(--text-selected-color);
+        background-image: linear-gradient(
+          0deg,
+          var(--bg-selected-color,) 0%,
+          var(--bg-selected-color,) 100%
+        );
+      }
+    }
+  }
+}
+
+// The :selected state of the options is fairly customizable in Chrome, somewhat in Firefox, and not at all in Safari. See the CodePen demo for a section that can be uncommented to preview this.

package/Forms/_Switch.scss

@@ -0,0 +1,66 @@
+@layer components {
+  // ========================
+  // Switches
+  // Inspiration: https://tailwindui.com/components/application-ui/forms/toggles
+  // Variables Used
+  // --transition-values
+
+  // Local Variables
+  // --height
+  // --aspectRatio
+  // --gap
+  // --toggleFill: white;
+  // --bg-color: #aaa;
+  // --onStateBg: teal;
+  // ========================
+  // Border-width must have a unit here for this to work.
+  .Switch {
+    --width: 3.5em;
+    --height: 1.2em;
+    --inner-margin: 0.2em;
+
+    display: inline-flex;
+
+    input[type='checkbox'] {
+      appearance: none;
+      display: grid;
+      align-items: center;
+      width: var(--width);
+      padding: 0;
+      border-width: var(--border-width, 1px);
+      border-style: var(--border-style, solid);
+      border-color: var(--border-color, black);
+      border-radius: var(--height);
+      background-color: var(--bg-color, #eee);
+      transition: background-color var(--transition-values);
+    }
+
+    input[type='checkbox']:checked {
+      background-color: var(--bg-color, teal);
+    }
+
+    // This is the part that moves
+    input[type='checkbox']::before {
+      --translateX: calc(
+        var(--width) - var(--height) - var(--inner-margin) * 2 - var(
+            --border-width,
+            1px
+          ) * 2
+      );
+
+      content: '';
+      box-sizing: content-box;
+      width: var(--height);
+      height: var(--height);
+      margin: var(--inner-margin);
+      border-radius: 50%;
+      background-color: white;
+      box-shadow: var(--shadow);
+      transition: transform var(--transition-values);
+    }
+
+    input[type='checkbox']:checked::before {
+      transform: translateX(var(--translateX));
+    }
+  }
+}

package/Forms/_TextField.scss

@@ -0,0 +1,116 @@
+@layer components {
+  // Applies to TextInput, Textarea and Select
+  :where(.TextField) {
+    --padding: 0.5rem 0.75rem;
+
+    > * {
+      display: block;
+    }
+
+    :where(.Label) {
+      color: var(--text-color, inherit);
+    }
+
+    :where(.Hint) {
+      opacity: 0.5;
+    }
+
+    :where(.Error) {
+      color: red;
+    }
+  }
+
+  * + .InputGroup {
+    margin-top: 0.25rem;
+  }
+
+  .InputGroup {
+    border-width: var(--border-width);
+    border-color: var(--border-color);
+    border-radius: var(--radius);
+
+    // Allow all inner items to use the same padding values
+    > *,
+    > :where(astro-slot, astro-content, astro-island) > * {
+      padding: var(--padding);
+    }
+
+    // Allows focus outline to wrap around input when it's used standalone without before and after elements
+    > :where(.Field) {
+      border-radius: inherit;
+    }
+  }
+
+  .InputGroup:not(.Stack) {
+    display: flex;
+
+    // Before elements
+    // -------------------
+    > *:has(~ :where(.Field)),
+    > *:has(~ :where(.Field)):where(astro-slot, astro-content, astro-island)
+      > * {
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      border-width: 0;
+      border-radius: 0;
+      border-start-start-radius: calc(var(--radius) - var(--border-width));
+      border-end-start-radius: calc(var(--radius) - var(--border-width));
+
+      // The input
+      & + :where(.Field) {
+        border-start-start-radius: 0;
+        border-end-start-radius: 0;
+      }
+    }
+
+    // After elements
+    // ------------------
+    > :where(.Field) ~ *,
+    > :where(.Field) ~ *:where(astro-slot, astro-content, astro-island) > * {
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      border-width: 0;
+      border-radius: 0;
+      border-start-end-radius: calc(var(--radius) - var(--border-width));
+      border-end-end-radius: calc(var(--radius) - var(--border-width));
+    }
+
+    // The input
+    > :where(.Field:has(~ *)) {
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
+    }
+
+    // Raise position for nicer focus
+    > * {
+      position: relative;
+
+      &:focus,
+      &:focus-visible {
+        z-index: 2;
+      }
+    }
+  }
+
+  // Use this when you want the button or arrow to be floating over the input element. When doing this, make sure you set a minimum width for the input! (or InputGroup)
+  .InputGroup.Stack {
+    // Before elements
+    // -------------------
+    *:has(~ :where(.Field)),
+    *:has(~ :where(.Field)):where(astro-slot, astro-content, astro-island) > * {
+      z-index: 2;
+      display: flex;
+      place-self: center start;
+    }
+
+    // After elements
+    // ------------------
+    :where(.Field) ~ *,
+    :where(.Field) ~ *:where(astro-slot, astro-content, astro-island) > * {
+      display: flex;
+      place-self: center end;
+    }
+  }
+}

package/Forms/_Textarea.scss

@@ -0,0 +1,41 @@
+textarea {
+  min-height: 9em;
+  resize: vertical;
+}
+
+@layer components {
+  .Textarea {
+    // Field is used in TextField for padding and border-radius. We use this to prevent reworking those styles
+    .Stack.Field {
+      display: grid; // Field has display block. This enforces grid again.
+      padding: 0;
+    }
+
+    .Field {
+      padding: var(--padding);
+    }
+
+    textarea {
+      border-radius: inherit;
+    }
+
+    .Replica {
+      // This is how textarea text behaves
+      white-space: pre-wrap;
+      // Hidden from view, clicks, and screen readers
+      visibility: hidden;
+
+      &::after {
+        content: attr(data-replicated-value);
+      }
+    }
+  }
+
+  .Textarea-autogrow {
+    textarea {
+      // Prevents user from resizing so it doesn't screw up the auto resizing
+      resize: none;
+      overflow: hidden;
+    }
+  }
+}

package/Forms/_index.scss

@@ -0,0 +1,10 @@
+@use 'FormBase';
+
+// Components
+@use 'Button';
+@use 'TextField';
+@use 'Textarea';
+@use 'FormControls';
+@use 'Select';
+@use 'Combobox';
+@use 'Switch';

package/Typography/_WritingMode.scss

@@ -0,0 +1,33 @@
+@layer components {
+  // Prevents the whole text from rotating like a noob
+  [class*='Writing'] {
+    transition: none;
+  }
+
+  .Writing-normal {
+    writing-mode: horizontal-tb;
+  }
+
+  .Writing-rotateLeft {
+    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 (though I'm not sure if there is a specific reason why.
+  }
+
+  .Writing-rotateRight {
+    writing-mode: vertical-rl;
+    text-orientation: sideways;
+  }
+
+  .Writing-downwards,
+  .Writing-downwards-lr {
+    writing-mode: vertical-lr;
+    text-orientation: upright;
+  }
+
+  .Writing-downwards-rl {
+    writing-mode: vertical-rl;
+    text-orientation: upright;
+  }
+}

package/Typography/_index.scss

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

package/UI/Codepen.scss

@@ -0,0 +1,11 @@
+@layer components {
+  .Codepen {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-sizing: border-box;
+    margin: 1em 0;
+    padding: 1em;
+    border: 2px solid;
+  }
+}

package/UI/Tweet.scss

@@ -0,0 +1,5 @@
+@layer components {
+  .Tweet .twitter-tweet {
+    margin: 0 !important;
+  }
+}

package/UI/Youtube.scss

@@ -0,0 +1,13 @@
+@layer components {
+  .Youtube,
+  .Vimeo {
+    div {
+      aspect-ratio: 16/9;
+    }
+
+    iframe {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}

package/UI/_Accordion.scss

@@ -0,0 +1,33 @@
+@layer components {
+  .Accordion {
+    svg {
+      transition: var(--transition-values);
+      transition-property: var(--transition-props);
+    }
+
+    :where([aria-expanded='true'] svg) {
+      transform: rotate(90deg);
+    }
+  }
+
+  .AccordionBtn {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 0.5em;
+    width: 100%;
+    padding: 0.75rem;
+    border: 0;
+    text-align: left;
+
+    // astro-slot signifies the title, except it's a slot
+    &:where(:has(svg + span)),
+    &:where(:has(svg + astro-slot)) {
+      justify-content: start;
+    }
+  }
+
+  .AccordionContent {
+    padding: 0.75rem;
+  }
+}

package/UI/_Breadcrumbs.scss

@@ -0,0 +1,24 @@
+@layer components {
+  .Breadcrumbs {
+    --gap: 0.2em;
+    font-size: 0.8rem;
+
+    ul,
+    ol {
+      display: flex;
+      flex-flow: row wrap;
+      align-items: center;
+      gap: var(--gap);
+    }
+
+    .Crumb {
+      display: flex;
+      align-items: center;
+      gap: var(--gap);
+
+      [aria-current] {
+        opacity: 0.7;
+      }
+    }
+  }
+}

package/UI/_CQChecker.scss

@@ -0,0 +1,16 @@
+.CQCheckerGrid {
+  display: flex;
+  flex-flow: row wrap;
+  grid-auto-flow: dense;
+
+  padding: 1rem;
+
+  > * {
+    margin: 0.5rem;
+  }
+}
+
+.size {
+  font-size: 0.8rem;
+  color: #666;
+}

package/UI/_Callout.scss

@@ -0,0 +1,31 @@
+// --text-callout-header
+// --bg-callout-header
+// Changing font: Just use .CalloutHeader + fontFamily
+
+@layer components {
+  .Callout {
+    border: var(--border-width) var(--border-style) var(--border-color);
+    border-radius: var(--radius);
+    font-size: 0.85em;
+
+    > * {
+      padding: 0.85rem;
+    }
+
+    :where(.CalloutHeader) {
+      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(.CalloutContent) {
+      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/UI/_Drawer.scss

@@ -0,0 +1,28 @@
+@layer components {
+  [class*='DrawerBackdrop'] {
+    position: fixed;
+    inset: 0;
+    z-index: 100;
+    background-color: oklch(0% 0 0deg / 50%);
+  }
+
+  .DrawerBackdrop-blur {
+    transition-property: background, backdrop-filter;
+    backdrop-filter: blur(8px);
+  }
+
+  // Note to self:
+  // Need to create another Class to contain default z-index for Absolute Drawers — so this doesn't show above it.
+  .DrawerContent {
+    position: fixed;
+    overflow-y: auto;
+    z-index: 100;
+    padding: 1rem;
+    color: var(--text-color);
+    background-color: var(--bg-color);
+  }
+
+  .DrawerCloseButton {
+    padding: 0.5rem;
+  }
+}

package/UI/_Dropdown.scss

@@ -0,0 +1,14 @@
+@layer components {
+  .DropdownTrigger {
+    gap: 0.25em;
+
+    svg {
+      flex-shrink: 0;
+      transition: transform var(--transition-values);
+    }
+
+    &[aria-expanded='true'] svg {
+      transform: rotate(-180deg);
+    }
+  }
+}

package/UI/_FancyList.scss

@@ -0,0 +1,30 @@
+@layer components {
+  .FancyList {
+    --svg-width: 1em;
+    --svg-height: 1lh;
+
+    display: grid;
+    grid-template-columns: auto 1fr;
+    column-gap: var(--gap, 0.5em);
+
+    :where(li) {
+      grid-column: 1 / -1;
+      display: grid;
+      grid-template-columns: subgrid;
+      // align-items: center; // Items are not aligned center so multi-row lists work.
+
+      // 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;
+      }
+    }
+  }
+
+  // Balance with other list styles in .Prose
+  .Prose > :where(.FancyList) {
+    margin-left: calc(2em - var(--svg-width, 1em) - var(--gap, 0.5em));
+  }
+}