@splendidlabz/styles 2.3.2 → 3.0.0

package/src/Base/_Transition.scss

@@ -1,8 +0,0 @@
-// Prepares every element for transition
-// This doesn't work and creates a lot of problems
-// @layer components {
-//   * {
-//     transition: none var(--transition-values);
-//     transition-property: var(--transition-props);
-//   }
-// }

package/src/Base/_index.scss

@@ -1,4 +0,0 @@
-@use 'Accessibility';
-@use 'Base';
-@use 'Focus';
-@use 'Transition';

package/src/Components/_Box.scss

@@ -1,9 +0,0 @@
-@layer components {
-  .Box {
-    // overflow: hidden;
-    padding: 1rem;
-    border: var(--border-width, 1px) var(--border-style, solid)
-      var(--border-color, black);
-    border-radius: var(--radius, 0.5em);
-  }
-}

package/src/Components/_BrowserFrame.scss

@@ -1,89 +0,0 @@
-// radius
-// bg-frame-header. NEED FALLBACK COLOR
-// bg-frame-content. NEED FALLBACK COLOR
-// 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
-
-@layer components {
-  :where([class*='BrowserFrame']) {
-    .FrameHeader {
-      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);
-    }
-
-    .FrameHeaderDots {
-      display: flex;
-      flex-flow: row;
-      align-items: center;
-      gap: var(--dot-gap, 0.5rem);
-      padding: 0.75rem 1rem;
-    }
-
-    .FrameHeaderDot {
-      width: var(--dot-size, 0.7rem);
-      height: var(--dot-size, 0.7rem);
-      border-radius: 50%;
-      background-color: var(--dot-color, #424242);
-    }
-
-    .FrameHeaderTabs {
-      overflow: hidden;
-      align-self: end;
-      padding-top: 0.5rem;
-
-      .Tablist {
-        gap: 0.25rem;
-        padding-inline: calc(var(--outline-width) * 2);
-      }
-    }
-
-    .FrameContent {
-      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(.Content) {
-        // overflow: auto;
-        padding: 1rem;
-      }
-
-      > :where(.Background) svg {
-        width: 100%;
-        height: 100%;
-      }
-    }
-  }
-
-  // Colored dots
-  .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/_Figure.scss

@@ -1,5 +0,0 @@
-figcaption {
-  margin-block: 0.5em;
-  font-size: 0.8em;
-  text-align: center;
-}

package/src/Components/_List.scss

@@ -1,19 +0,0 @@
-@layer components {
-  // Not sure what is used for now... might be able to delete.
-  .List {
-    margin-left: 1em;
-    list-style-position: outside;
-
-    > :where(ul, ol) {
-      padding-left: 1em;
-    }
-  }
-
-  ul[class~='List'] {
-    list-style-type: disc;
-  }
-
-  ol[class='List'] {
-    list-style: decimal;
-  }
-}

package/src/Components/_Scrollbars.scss

@@ -1,40 +0,0 @@
-// Custom Scrollbars
-:root {
-  --scrollbar-width: thin;
-  --scrollbar-size: 12px;
-  color-scheme: dark light;
-
-  @media (prefers-color-scheme: light) {
-    --scrollbar-thumb-color: #c1c1c1;
-    --scrollbar-track-color: #fafafa;
-  }
-
-  @media (prefers-color-scheme: dark) {
-    --scrollbar-thumb-color: #6b6b6b;
-    --scrollbar-track-color: #2d2d2d;
-  }
-}
-
-@layer components {
-  * {
-    scroll-behavior: var(--scroll-behavior, smooth);
-    scrollbar-width: var(--scrollbar-width, auto);
-    scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
-
-    /* Works on Chrome, Edge, and Safari */
-    &::-webkit-scrollbar {
-      width: var(--scrollbar-size);
-      height: var(--scrollbar-size);
-    }
-
-    &::-webkit-scrollbar-track {
-      background: var(--scrollbar-track-color);
-    }
-
-    &::-webkit-scrollbar-thumb {
-      border: 3px solid var(--scrollbar-track-color);
-      border-radius: 100px;
-      background-color: var(--scrollbar-thumb-color);
-    }
-  }
-}

package/src/Components/_SimpleSVG.scss

@@ -1,9 +0,0 @@
-@layer components {
-  .SimpleSVG {
-    :where(path) {
-      fill: var(--fill-color);
-      stroke: var(--stroke-color); // Fallback to text color
-      stroke-width: var(--stroke-width);
-    }
-  }
-}

package/src/Components/_index.scss

@@ -1,12 +0,0 @@
-// ========================
-// Components
-// ========================
-// These can be used without JavaScript
-
-@use 'Box';
-@use 'Scrollbars';
-@use 'BrowserFrame';
-@use 'List';
-@use 'Prose';
-@use 'Figure';
-@use 'SimpleSVG';

package/src/Effects/_Backdrop.scss

@@ -1,4 +0,0 @@
-.Backdrop-blur {
-  transition-property: backdrop-filter;
-  backdrop-filter: blur(var(--blur, 8px));
-}

package/src/Effects/_Elevation.scss

@@ -1,92 +0,0 @@
-@use './SpecialShadows' as *;
-
-@layer components {
-  @for $i from 1 through 6 {
-    .elevation-#{$i} {
-      --shadow-color: rgb(0 0 0 / 8%);
-
-      @include StackedShadow($elevation: $i);
-    }
-  }
-
-  .tw-elevation {
-    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
-  }
-
-  .tw-elevation-2 {
-    box-shadow:
-      0 1px 3px 0 rgb(0 0 0 / 10%),
-      0 1px 2px -1px rgb(0 0 0 / 10%);
-  }
-
-  .tw-elevation-3 {
-    box-shadow:
-      0 4px 6px -1px rgb(0 0 0 / 10%),
-      0 2px 4px -2px rgb(0 0 0 / 10%);
-  }
-
-  .tw-elevation-4 {
-    box-shadow:
-      0 10px 15px -3px rgb(0 0 0 / 10%),
-      0 4px 6px -4px rgb(0 0 0 / 10%);
-  }
-
-  .tw-elevation-5 {
-    box-shadow:
-      0 20px 25px -5px rgb(0 0 0 / 10%),
-      0 8px 10px -6px rgb(0 0 0 / 10%);
-  }
-
-  .tw-elevation-6 {
-    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 25%);
-  }
-
-  .mui-elevation-1 {
-    box-shadow:
-      0 2px 1px -1px rgb(0 0 0 / 20%),
-      0 1px 1px 0 rgb(0 0 0 / 14%),
-      0 1px 3px 0 rgb(0 0 0 / 12%);
-  }
-
-  .mui-elevation-2 {
-    box-shadow:
-      0 3px 1px -2px rgb(0 0 0 / 20%),
-      0 2px 2px 0 rgb(0 0 0 / 14%),
-      0 1px 5px 0 rgb(0 0 0 / 12%);
-  }
-
-  .mui-elevation-3 {
-    box-shadow:
-      0 3px 3px -2px rgb(0 0 0 / 20%),
-      0 3px 4px 0 rgb(0 0 0 / 14%),
-      0 1px 8px 0 rgb(0 0 0 / 12%);
-  }
-
-  .mui-elevation-4 {
-    box-shadow:
-      0 2px 4px -1px rgb(0 0 0 / 20%),
-      0 4px 5px 0 rgb(0 0 0 / 14%),
-      0 1px 10px 0 rgb(0 0 0 / 12%);
-  }
-
-  .mui-elevation-5 {
-    box-shadow:
-      0 3px 5px -1px rgb(0 0 0 / 20%),
-      0 5px 8px 0 rgb(0 0 0 / 14%),
-      0 1px 14px 0 rgb(0 0 0 / 12%);
-  }
-
-  .mui-elevation-6 {
-    box-shadow:
-      0 3px 5px -1px rgb(0 0 0 / 20%),
-      0 6px 10px 0 rgb(0 0 0 / 14%),
-      0 1px 18px 0 rgb(0 0 0 / 12%);
-  }
-
-  .mui-elevation-7 {
-    box-shadow:
-      0 4px 5px -2px rgb(0 0 0 / 20%),
-      0 7px 10px 1px rgb(0 0 0 / 14%),
-      0 2px 16px 1px rgb(0 0 0 / 12%);
-  }
-}

package/src/Effects/_Glow.scss

@@ -1,51 +0,0 @@
-// Not ready. May be removing this in favour of shadow instead.
-@layer components {
-  .glow {
-    --shadow-x: 0;
-    --shadow-y: 0;
-    --shadow-blur: 0.5em;
-    --shadow-spread: 0.25em;
-    --shadow-alpha: 0.5;
-
-    position: relative;
-
-    > * {
-      position: relative;
-      z-index: 1;
-    }
-
-    &:hover,
-    &:focus {
-      --shadow-alpha: 1;
-    }
-
-    &::before {
-      content: '';
-      position: absolute;
-      // Required if parent element is inline-block.
-      // Not required if parent element is inline-flex
-      top: calc(var(--border-width, 0px) * -1);
-      left: calc(var(--border-width, 0px) * -1);
-      box-sizing: content-box;
-      width: 100%;
-      height: 100%;
-      border: inherit;
-      border-radius: inherit;
-      box-shadow: var(--shadow-x) var(--shadow-y) var(--shadow-blur)
-        var(--shadow-spread) var(--shadow-color);
-      opacity: var(--shadow-alpha);
-      transition: var(--transition-values);
-      transition-property: opacity;
-    }
-  }
-
-  .glow-2 {
-    --shadow-blur: 1em;
-    --shadow-spread: 0.375em;
-  }
-
-  .glow-3 {
-    --shadow-blur: 1.5em;
-    --shadow-spread: 0.5em;
-  }
-}

package/src/Effects/_Gradients.scss

@@ -1,88 +0,0 @@
-// 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/src/Effects/_Shadows.scss

@@ -1,51 +0,0 @@
-// 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/src/Effects/_SpecialShadows.scss

@@ -1,45 +0,0 @@
-@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/src/Effects/_Text-Outline.scss

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

@@ -1,12 +0,0 @@
-// ========================
-// 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';