@splendidlabz/styles 2.2.0

package/Effects/_Gradients.scss

@@ -0,0 +1,88 @@
+// Gradient Defaults
+@layer components {
+  :root {
+    --gradient-shape: ;
+    --gradient-size: ;
+    --angle: 90deg;
+    --gradient-position: center;
+    --color-space: oklab;
+    --hue-interpolation: ;
+    --gradient: ;
+    --gradient-alpha: 1;
+  }
+}
+
+@layer utilities {
+  // Gradient utilities
+  .gradient {
+    background-image: linear-gradient(
+      var(--angle),
+      var(--tw-gradient-stops, var(--gradient))
+    );
+
+    @supports (linear-gradient(in oklab)) {
+      background: linear-gradient(
+        var(--angle) in var(--color-space) var(--hue-interpolation),
+        var(--tw-gradient-stops, var(--gradient))
+      );
+    }
+  }
+
+  .radial-gradient {
+    background-image: radial-gradient(
+      var(--gradient-shape) var(--gradient-size) at var(--gradient-position),
+      var(--tw-gradient-stops, var(--gradient))
+    );
+  }
+
+  .conic-gradient {
+    background-image: conic-gradient(
+      from var(--angle) at var(--gradient-position),
+      var(--tw-gradient-stops, var(--gradient))
+    );
+  }
+
+  // ========================
+  // Repeating gradients
+  // Needs testing
+  // ========================
+  .repeating-gradient {
+    background-image: repeating-linear-gradient(
+      var(--angle),
+      var(--tw-gradient-stops, var(--gradient))
+    );
+
+    @supports (linear-gradient(in oklab)) {
+      background-image: repeating-linear-gradient(
+        var(--angle) in var(--color-space) var(--hue-interpolation),
+        var(--tw-gradient-stops, var(--gradient))
+      );
+    }
+  }
+
+  .repeating-radial-gradient {
+    // Example
+    // --gradient: black, black 5px, white 5px, white 10px;
+    background-image: repeating-radial-gradient(
+      var(--gradient-shape) var(--gradient-size) at var(--gradient-position),
+      var(--tw-gradient-stops, var(--gradient))
+    );
+  }
+
+  .repeating-conic-gradient {
+    // Example
+    // --gradient: red 0%, yellow 15%, red 33%;
+    background-image: repeating-conic-gradient(
+      from var(--angle) at var(--gradient-position),
+      var(--tw-gradient-stops, var(--gradient))
+    );
+  }
+
+  .text-gradient {
+    display: inline-flex;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    // Allows multiline gradients in Safari
+    box-decoration-break: clone;
+  }
+}

package/Effects/_Shadows.scss

@@ -0,0 +1,51 @@
+// Shadow defaults
+// --shadow-x: 0;
+// --shadow-y: 0;
+// --shadow-blur: 0;
+// --shadow-spread: 0;
+// --shadow-color: transparent;
+// --text-shadow-x: 0;
+// --text-shadow-y: 0;
+// --text-shadow-blur: 0;
+// --text-shadow-color: transparent;
+// --drop-shadow-x: 0;
+// --drop-shadow-y: 0;
+// --drop-shadow-blur: 0;
+// --drop-shadow-color: transparent;
+
+@layer utilities {
+  .Shadow {
+    --shadow-string: var(--shadow-x, 0) var(--shadow-y, 0) var(--shadow-blur, 0)
+      var(--shadow-spread, 0) var(--shadow-color, var(--tw-shadow-color));
+    box-shadow: var(--shadow, var(--shadow-string));
+  }
+
+  .Textshadow {
+    --text-shadow-string: var(--text-shadow-x, 0) var(--text-shadow-y, 0)
+      var(--text-shadow-blur, 0) var(--text-shadow-color);
+    text-shadow: var(--text-shadow, var(--text-shadow-string));
+  }
+
+  .Dropshadow {
+    --drop-shadow-string: var(--drop-shadow-x, 0) var(--drop-shadow-y, 0)
+      var(--drop-shadow-blur, 0) var(--drop-shadow-color);
+
+    filter: drop-shadow(var(--drop-shadow, var(--drop-shadow-string)));
+  }
+
+  // .text-shadow {
+  //   --drop-shadow-blur: 4px;
+  //   --drop-shadow-color: black;
+  //   filter: drop-shadow(0 0 var(--drop-shadow-blur) var(--drop-shadow-color));
+  // }
+
+  // Once stabilized, add to Tailwind config
+  // .text-glow {
+  //   --drop-shadow-blur: 1px;
+  //   --drop-shadow-color: currentcolor;
+  //   filter: drop-shadow(
+  //     var(--drop-shadow-x) var(--drop-shadow-y) var(--drop-shadow-blur)
+  //       var(--drop-shadow-color)
+  //   );
+  // }
+}

package/Effects/_SpecialShadows.scss

@@ -0,0 +1,45 @@
+@use 'sass:math';
+@use 'sass:list';
+
+// Calculate Shadow
+// Inspiration from https://www.joshwcomeau.com/css/designing-shadows/
+@function Shadow(
+  $elevation: 1,
+  $shadowLength: 2,
+  $lightAngle: 0deg,
+  $blurMultiplier: 1.3
+) {
+  $offset: math.pow($elevation, 1.1) * $shadowLength;
+  $x: $offset * math.sin($lightAngle) * -1px;
+  $y: $offset * math.cos($lightAngle) * 1px;
+  $blur: $offset * $blurMultiplier * 1px;
+  $spread: $blur * -0.125;
+
+  @return $x $y $blur $spread var(--shadow-color);
+}
+
+@mixin Shadow($elevation: 1, $lightAngle: 0deg, $shadowLength: 2) {
+  box-shadow: Shadow(
+    $elevation: $elevation,
+    $shadowLength: $shadowLength,
+    $lightAngle: $lightAngle
+  );
+}
+
+@mixin StackedShadow($elevation: 1, $lightAngle: 0deg, $shadowLength: 2) {
+  $shadow: ();
+
+  @for $i from 1 through $elevation {
+    $shadow: list.append(
+      $shadow,
+      Shadow(
+        $elevation: $i,
+        $shadowLength: $shadowLength,
+        $lightAngle: $lightAngle,
+      ),
+      $separator: 'comma'
+    );
+  }
+
+  box-shadow: $shadow;
+}

package/Effects/_Text-Outline.scss

@@ -0,0 +1,25 @@
+@layer components {
+  .Text-stroke {
+    @supports (-webkit-text-stroke-width: 1px) {
+      // font-size: calc(1em - var(--stroke-width, 0.1em) / 2);
+      -webkit-text-stroke-width: var(--stroke-width, 0.1em);
+      -webkit-text-stroke-color: var(--stroke-color);
+      paint-order: stroke fill;
+    }
+  }
+
+  // Extends Text-stroke
+  // Sets color to background color and stroke to actual color you want for the stroke
+  .Text-outline {
+    color: var(--stroke-color); // fallback
+
+    @supports (-webkit-text-stroke-width: 1px) {
+      font-size: calc(1em - var(--stroke-width, 0.1em) / 2);
+      color: var(--bg-color);
+      -webkit-text-stroke-width: var(--stroke-width, 2px);
+      // We cannot use currentcolor because current color is set to --bg-color. That's why we need a --stroke variable
+      -webkit-text-stroke-color: var(--stroke-color);
+      paint-order: stroke fill;
+    }
+  }
+}

package/Effects/_index.scss

@@ -0,0 +1,12 @@
+// ========================
+// Effects
+// ========================
+// Make your components nicer by introducing Shadows, Gradients, and other Effects. These effects can be applied to any component.
+// Most of these are still experimental at this point
+@use 'Elevation';
+@use 'Glow';
+@use 'Gradients';
+@use 'Shadows';
+@use 'SpecialShadows';
+@use 'Text-Outline';
+@use 'Backdrop';

package/Experimental/_SimplePricingPlan.scss

@@ -0,0 +1,141 @@
+// ========================
+// Plan
+// ========================
+.PlanLayout {
+  display: grid;
+  align-content: center;
+  gap: 1rem;
+
+  // We only create a 3-column layout after 1000px width
+  @media (width >= 1000px) {
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(3, auto);
+
+    > * {
+      grid-row: 1/-1;
+      grid-template-rows: subgrid;
+    }
+  }
+}
+
+.Plan {
+  --border-width: 4px;
+  --radius: 1rem;
+  --border-color: #ccc;
+  --bg-color: white;
+  --bg-color-darker: #fafafa;
+
+  display: grid;
+  gap: inherit;
+  padding: 1.5rem 1rem;
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius);
+  color: color(mine);
+  background-color: var(--bg-color);
+
+  svg path {
+    fill: color(mine);
+  }
+
+  // Plans have a different style below 1000px breakpoint
+  // We're using breakpoints because container queries don't work with subgrid
+  // Oh! But why don't we try after a certain amount then container queries? 🤔
+  @media (550px <= width < 1000px) {
+    grid-template-columns: 1.5fr 1fr;
+
+    .Plan-body {
+      grid-column: 2;
+      grid-row: span 2;
+      display: flex;
+      flex-flow: column;
+      justify-content: center;
+      margin: -1rem -0.5rem;
+      padding-inline: inherit;
+      border: 1px solid var(--border-color);
+      border-radius: calc(var(--radius) - 0.5rem);
+      background-color: var(--bg-color-darker);
+      place-self: stretch stretch;
+    }
+
+    &:hover .Plan-body,
+    &:focus .Plan-body {
+      background-color: var(--bg-color-darker-hover);
+    }
+  }
+
+  @media (width >= 1000px) or (width < 550px) {
+    .Plan-header {
+      text-align: center;
+    }
+  }
+}
+
+.Plan:not(.Plan--Recommended) {
+  &:hover,
+  &:focus {
+    --border-color: #99c48e;
+    --bg-color: #f8fff6;
+    --bg-color-darker: #f8fff6;
+    --bg-color-darker-hover: #ebf7e7;
+  }
+}
+
+.Plan-recommended {
+  position: absolute;
+  font-size: 0.6rem;
+  text-transform: uppercase;
+  background-color: var(--recommended-background-color);
+
+  @media (width <= 550px) {
+    transform: translateX(-50%);
+  }
+
+  // Show as a pill
+  @media (width < 1000px) {
+    top: calc(-0.5rem - 0.5lh + 2px); // Padding, line height and borders
+    display: inline-block;
+    margin-bottom: -1.5rem;
+    padding: 0.25rem 0.5rem;
+    border: 3px solid var(--border-color);
+    border-radius: 2em;
+    font-weight: 700;
+    letter-spacing: 0.05em;
+  }
+
+  // Show recommended above plan
+  @media (width >=1000px) {
+    position: absolute;
+    top: 0;
+    left: calc(-1 * var(--border-width));
+    right: calc(-1 * var(--border-width));
+    padding: 0.5rem;
+    border: var(--border-width) solid var(--border-color);
+    border-top-left-radius: var(--radius);
+    border-top-right-radius: var(--radius);
+    font-weight: bold;
+    letter-spacing: 0.075em;
+    transform: translateY(-100%);
+    text-align: center;
+  }
+}
+
+// ========================
+// Accents for plans
+// ========================
+.Plan--Recommended {
+  --border-color: #7198c8;
+  --recommended-background-color: #c5e2ff;
+  --bg-color: #edf6ff;
+  --bg-color-darker: #e1f0ff;
+  --bg-color-darker-hover: #d4e7fb;
+
+  &:hover,
+  &:focus {
+    background-color: #e7f3ff;
+  }
+
+  @media (width >= 1000px) {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+}

package/Forms/_Button.scss

@@ -0,0 +1,106 @@
+// ========================
+// Reset Button and base styles
+// ========================
+@layer components {
+  button,
+  [class*='Button'] {
+    flex-shrink: 0; // Prevents button from shrinking when used in flex elements
+    // align-self: start; // Prevents buttons from expanding to 100% size when used in flex elements. Specify align-self:stretch to expand to full width. This is problematic in Horizontal flow.
+    justify-content: center;
+    padding: 0.25em 1em;
+    border-width: var(--border-width, 1px);
+    border-color: var(--border-color);
+    border-radius: var(--radius);
+    font: var(--input-font, inherit);
+    color: var(--text-color, currentColor);
+    background-color: var(--bg-color, #eee);
+    text-decoration: none !important;
+    transition: var(--transition-values);
+    transition-property: var(--transition-props);
+    cursor: pointer;
+
+    * {
+      pointer-events: none;
+    }
+
+    svg path {
+      transition: var(--transition-values);
+      transition-property: var(--transition-props);
+    }
+
+    // Ruleset here is the same as .Fill.
+    // We are duplicating because CSS doesn't have Tailwind's @apply functionality.
+    &: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));
+    }
+
+    // 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))
+      );
+    }
+
+    // Fallback to hover color
+    &:active {
+      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))
+      );
+    }
+
+    // Fallback to hover color
+    &.selected,
+    &[aria-selected],
+    &[aria-expanded='true'] {
+      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))
+      );
+    }
+  }
+
+  // ========================
+  // Base Splendid Labz Buttons
+  // ========================
+  [class*='Button'] {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5em;
+  }
+}
+
+// For using Icons as the button content
+@layer components {
+  .Button-icon {
+    padding: var(--padding, 0.5em);
+    line-height: 1;
+  }
+}

package/Forms/_Combobox.scss

@@ -0,0 +1,49 @@
+.ListboxPopover {
+  padding: 0;
+  border: 0;
+}
+
+[role='listbox'] {
+  max-height: 15rem; // Default value. Specify as you wish in CSS
+  overflow-y: auto;
+
+  [role='option'] {
+    cursor: pointer; // Ensures cursor stays as pointer even when hovering over text
+    > * {
+      pointer-events: none;
+    }
+  }
+
+  [aria-selected='true'] {
+    background: var(--bg-selected-color, pink);
+  }
+}
+
+// @layer components {
+.AutocompleteOptions {
+  .ComboboxMatchedString {
+    font-weight: bold;
+  }
+}
+
+// Needs fixing again.
+// Transition for AutocompleteLoader and AutocompleteEmpty. Relies on :empty state and @starting-style for transitions.
+.AutocompleteLoader,
+.AutocompleteEmpty {
+  transition: var(--transition);
+  transition-property: var(--transition-props), display;
+  transition-behavior: allow-discrete;
+
+  @starting-style {
+    opacity: 0;
+  }
+
+  &:empty {
+    display: none;
+    opacity: 0;
+  }
+}
+
+.TimepickerOptions .Listbox li {
+  padding: 0.5rem 1rem;
+}

package/Forms/_FormBase.scss

@@ -0,0 +1,43 @@
+@layer components {
+  // Text based inputs
+  input:where(
+      [type='text'],
+      [type='search'],
+      [type='email'],
+      [type='password'],
+      [type='tel'],
+      [type='url']
+    ),
+  textarea,
+  select,
+  .Field {
+    display: block;
+    width: 100%;
+    border-radius: inherit;
+    font: inherit;
+    font-family: var(--input-font, inherit);
+    color: var(--text-color, currentColor);
+    background-color: var(--bg-color, transparent);
+  }
+
+  // Friendly password dots
+  // See https://pqina.nl/blog/styling-password-field-dots/
+  input[type='password'] {
+    font-family: Verdana, sans-serif;
+    letter-spacing: 0.125em;
+  }
+
+  .disabled,
+  .readonly,
+  [disabled],
+  [readonly] {
+    opacity: 0.5; // Super simple way. Styles can be improved.
+    &:where(input) {
+      cursor: not-allowed;
+    }
+
+    &:focus-visible {
+      outline-color: transparent;
+    }
+  }
+}

package/Forms/_FormControls.scss

@@ -0,0 +1,95 @@
+// ========================
+// Checkboxes and Radios
+// ========================
+@layer components {
+  .Legend + * {
+    margin-top: 0.25rem;
+  }
+
+  .Radio,
+  .Checkbox {
+    display: flex;
+    align-items: center;
+    gap: var(--gap, 0.5em);
+
+    :where(&) + :where(&) {
+      margin-top: 0.125em;
+    }
+
+    // For both checkbox and radios
+    > :where(.Checkmark, .Radiomark) {
+      display: grid;
+      place-items: center;
+
+      > * {
+        grid-column: 1;
+        grid-row: 1;
+      }
+
+      > input {
+        appearance: none;
+        display: grid;
+        place-content: center;
+        width: var(--width, var(--size, 1em));
+        height: var(--height, var(--size, 1em));
+        margin: 0;
+        padding: 0;
+        border: var(--border-width, 1px) var(--border-style, solid)
+          var(--border-color, black);
+        font: inherit;
+        background-color: var(--bg-color, transparent);
+      }
+
+      svg {
+        pointer-events: none;
+        width: 0.85em;
+        height: 0.85em;
+        fill: var(--fill-color, none);
+        transform: scale(0);
+        transition: transform var(--transition-values);
+
+        path {
+          stroke: var(--stroke-color, pink);
+        }
+      }
+    }
+
+    :where(.Checkmark, .Radiomark) ~ .TextInput {
+      display: none;
+    }
+
+    :where(.Checkmark:has(:checked), .Radiomark:has(:checked)) ~ .TextInput {
+      display: block;
+    }
+
+    // Checkboxes
+    :where(input[type='checkbox']) {
+      border-radius: var(--checkbox-radius, 0.25em);
+    }
+
+    // SVG
+    :where(input:checked) ~ svg {
+      transform: scale(1);
+    }
+
+    // Radios only
+    :where(input[type='radio']) {
+      border-radius: 50%;
+    }
+
+    // Default radio
+    :where(.radio) {
+      pointer-events: none;
+      width: 0.5em;
+      height: 0.5em;
+      border-radius: 50%;
+      background-color: var(--stroke-color, pink);
+      transform: scale(0);
+      transition: transform var(--transition-values);
+    }
+
+    :where(input[type='radio']:checked ~ .radio) {
+      transform: scale(1);
+    }
+  }
+}