@splendidlabz/styles 2.3.2 → 3.0.0

package/src/Utilities/_Shapes.scss

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

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

package/src/Variables/_Globals.scss

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

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

package/src/_Animations.scss

@@ -1,18 +0,0 @@
-[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/src/_Fill.scss

@@ -1,314 +0,0 @@
-// 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;
-  }
-}

package/src/styles.scss

@@ -1,12 +0,0 @@
-// Components
-@use 'Variables';
-@use 'Base';
-@use 'Fill';
-@use 'Forms';
-@use 'Components';
-@use 'UI';
-@use 'Effects';
-@use 'Animations';
-@use 'Utilities';
-@use 'Typography';
-@use 'utils';

package/src/utils/_index.scss

@@ -1,3 +0,0 @@
-@forward 'functions/fns';
-@forward 'functions/fonts';
-@forward 'mixins';

package/src/utils/functions/_fns.scss

@@ -1,77 +0,0 @@
-@use 'sass:math';
-@use 'sass:string';
-
-/// Remove the unit of a length
-/// @param {Number} $number - Number to remove unit from
-/// @return {Number} - Unitless number
-@function stripUnit($number) {
-  @if type-of($number) == 'number' and not unitless($number) {
-    @return math.div($number, ($number * 0 + 1));
-  }
-
-  @return $number;
-}
-
-/// toUppercase
-/// @param [string] $string
-/// @return [string]
-@function toUppercase($string) {
-  @return string.to-upper-case(str-slice($string, 1, 1)) + str-slice($string, 2);
-}
-
-/// toLowercase
-/// @param [string] $string
-/// @return [string]
-@function toLowercase($string) {
-  @return string.to-lower-case(str-slice($string, 1, 1)) + str-slice($string, 2);
-}
-
-/// Capitalize each word in string
-/// @param [string] $string
-/// @return [string]
-@function str-ucwords($string) {
-  $progress: $string;
-  $result: '';
-  $running: true;
-
-  @while $running {
-    $index: str-index($progress, ' ');
-
-    @if $index {
-      $result: $result + capitalize(str-slice($progress, 1, $index));
-      $progress: str-slice($progress, ($index + 1));
-    } @else {
-      $running: false;
-    }
-  }
-
-  @return capitalize($result) + capitalize($progress);
-}
-
-/// toCamel
-/// @param [string] $string
-/// @return [string]
-@function toCamel($string) {
-  $progress: $string;
-  $result: '';
-  $exclude: ' ', '-', '–', '—', '_', ',', ';', ':', '.';
-
-  @while str-length($progress) > 0 {
-    $char: str-slice($progress, 1, 1);
-
-    @if contain($exclude, $char) {
-      $progress: capitalize(str-slice($progress, 2, 2)) +
-        str-slice($progress, 3);
-    } @else {
-      $result: $result + $char;
-      $progress: str-slice($progress, 2);
-    }
-  }
-
-  @return $result;
-}
-
-/// toSeconds (for transitions and animations)
-@function toSeconds($value) {
-  @return calc(stripUnit($value) * 1s);
-}

package/src/utils/functions/_fonts.scss

@@ -1,114 +0,0 @@
-@use 'sass:map';
-@use 'fns';
-
-/// Convert a pixel value to rem
-/// @param {Number} $value - Pixel value
-/// @return {String} - Rem value
-@function toRem($value) {
-  $value: fns.stripUnit($value);
-
-  @return calc($value / 16) * 1rem;
-}
-
-/// Fluid type function
-/// @param {Number} $minBp - Minimum breakpoint
-/// @param {Number} $maxBp - Maximum breakpoint
-/// @param {Number} $minFontSize - Minimum font size
-/// @param {Number} $maxFontSize - Maximum font size
-/// @return {String} - Fluid type CSS
-@function fluidType(
-  $minBp: 400px,
-  $maxBp: 1200px,
-  $minFontSize: 16px,
-  $maxFontSize: 20px
-) {
-  $min: toRem($minFontSize);
-  $max: toRem($maxFontSize);
-  $fontSizeDifference: fns.stripUnit($maxFontSize - $minFontSize);
-  $bpDifference: fns.stripUnit($maxBp - $minBp);
-
-  // https://css-tricks.com/snippets/css/fluid-typography/
-  $fluid: calc(
-    $min + $fontSizeDifference * ((100vw - #{$minBp}) / $bpDifference)
-  );
-
-  @return clamp($min, calc(#{$fluid}), $max);
-}
-
-// $fontSizeMap: (
-//   1: 10,
-//   2: 11,
-//   3: 12,
-//   4: 14,
-//   5: 16,
-//   6: 18,
-//   7: 21,
-//   8: 24,
-//   9: 28,
-//   10: 36,
-//   11: 42,
-//   12: 48,
-//   13: 54,
-//   14: 60,
-//   15: 72,
-// );
-// $baseStep: 7 !default;
-// $fontMap: (
-//   primary: (
-//     font: (
-//       sans-serif,
-//     ),
-//   ),
-//   text: (
-//     font: (
-//       serif,
-//     ),
-//   ),
-//   code: (
-//     font: (
-//       'Fira Mono',
-//       monospace,
-//     ),
-//   ),
-//   stylish: (
-//     font: 'Boston Skyline',
-//     sizedifference: calc(1 / 1.333),
-//   ),
-// );
-
-// /// Get a font size
-// /// @param {Number} $step - Font size step
-// /// @param {String} $font - Font name
-// /// @return {String} - Font size
-// /// @require {Map} $fontSizeMap - Map of font size steps to font sizes
-// /// @require {Map} $fontMap - Map of font names to font families
-// @function fontStep($step, $font: 'primary') {
-//   $desiredSize: map.get($fontSizeMap, $step);
-//   $baseSize: map.get($fontSizeMap, $baseStep);
-//   $value: calc($desiredSize / $baseSize);
-
-//   @if $font == 'primary' {
-//     @return $value * 1rem;
-//   }
-
-//   $sizeDifference: map.get($fontMap, $font, 'sizeDifference');
-
-//   @return $value * $sizeDifference * 1rem;
-// }
-
-// /// Get a font family
-// /// @param {String} $font - Font name
-// /// @return {String} - Font family
-// /// @require {Map} $fontMap - Map of font names to font families
-// @function fontFamily($font) {
-//   @return map.get($fontMap, $font, 'font');
-// }
-
-// /// Calculates the rhythm value
-// /// @param {Number} $multiple - Multiple of the rhythm unit
-// /// @return {String} - Rhythm value
-// @function rhythm($multiple) {
-//   $rhythmUnit: var(--rhythmUnit, 1);
-
-//   @return calc($multiple * $rhythmUnit * 1rem);
-// }