@splendidlabz/styles 2.2.0

package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@splendidlabz/styles",
+  "version": "2.2.0",
+  "description": "",
+  "author": "Zell Liew <zellwk@gmail.com>",
+  "exports": {
+    ".": "./styles.scss"
+  },
+  "scripts": {
+    "lint": "stylelint '**/*.{css,scss}' --fix"
+  },
+  "dependencies": {
+    "@splendidlabz/layouts": "*"
+  },
+  "devDependencies": {
+    "@splendidlabz/stylelint-config": "*"
+  }
+}

package/styles.scss

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

package/utils/_index.scss

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

package/utils/_mixins.scss

@@ -0,0 +1,6 @@
+@mixin wrap-words {
+  hyphens: auto;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  word-wrap: break-word;
+}

package/utils/functions/_fns.scss

@@ -0,0 +1,77 @@
+@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/utils/functions/_fonts.scss

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