@splendidlabz/styles 2.3.2 → 3.0.0

package/src/Forms/_TextField.scss

@@ -1,116 +0,0 @@
-@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/src/Forms/_Textarea.scss

@@ -1,41 +0,0 @@
-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/src/Forms/_index.scss

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

package/src/Typography/_WritingMode.scss

@@ -1,33 +0,0 @@
-@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/src/Typography/_index.scss

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

package/src/UI/Codepen.scss

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

package/src/UI/Tweet.scss

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

package/src/UI/Youtube.scss

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

package/src/UI/_Breadcrumbs.scss

@@ -1,24 +0,0 @@
-@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/src/UI/_CQChecker.scss

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

package/src/UI/_Callout.scss

@@ -1,31 +0,0 @@
-// --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/src/UI/_Drawer.scss

@@ -1,28 +0,0 @@
-@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/src/UI/_Dropdown.scss

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

package/src/UI/_FancyList.scss

@@ -1,30 +0,0 @@
-@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));
-  }
-}

package/src/UI/_PerspectiveHover.scss

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

package/src/UI/_Popover.scss

@@ -1,25 +0,0 @@
-@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/src/UI/_Resizer.scss

@@ -1,43 +0,0 @@
-@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/src/UI/_Spotlight.scss

@@ -1,42 +0,0 @@
-@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/src/UI/_Status.scss

@@ -1,33 +0,0 @@
-@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/src/UI/_Tabs.scss

@@ -1,112 +0,0 @@
-@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/src/UI/_Textwall.scss

@@ -1,22 +0,0 @@
-.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/src/UI/_index.scss

@@ -1,17 +0,0 @@
-@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';