Update styles to render properly upon use, use Text hook, mod global css styles

Author: hane-smitter

CHANGELOG.md

@@ -48,9 +48,9 @@
 - Fix text display on `FourSquare` loader.
 - Remove duplicated `d-i-b` css class and add `rli-d-i-b` as a global style.
 
-# --next-version-
+# 0.1.0
 
-- Add new indicator `GlidingBlink`.
+- New indicators `GlidingBlink`, `Twist`, `Pulse` & `Slab`.
 - Centralize default _vars_.
 - Fine tune `Atom` and `Commet` indicators.
 - Code refactor.

package-lock.json

@@ -1,7 +1,7 @@
 {
 	"name": "react-loading-indicators",
-	"version": "0.0.11",
-	"description": "A collection of loading indicators for your application",
+	"version": "0.1.0",
+	"description": "Simply elegant light-weight loading indicators for react applications",
 	"scripts": {
 		"prebuild": "rm -rf dist",
 		"build": "rollup -c",

package.json

@@ -25,12 +25,12 @@ export default [
 			}
 		],
 		plugins: [
-			peerDepsExternal(),
-			resolve(),
-			commonjs(),
-			typescript({ tsconfig: "./tsconfig.json" }),
-			postcss({ plugins: [autoprefixer] }),
-			terser()
+			peerDepsExternal(), // Prevents Rollup from bundling the peer dependencies we've defined in package.json (react and react-dom)
+			resolve(), // Efficiently bundles third party dependencies we've installed and use in node_modules
+			commonjs(), //  Enables transpilation into CommonJS (CJS) format
+			typescript({ tsconfig: "./tsconfig.json" }), // Transpiles our TypeScript code into JavaScript
+			postcss({ plugins: [autoprefixer] }), // Transforms our Sass -> into CSS -> into JS tokens; for injection in style tags of HTML
+			terser() // Minify the Rollup bundle
 		]
 	},
 	{

rollup.config.js

@@ -1,3 +1,3 @@
-import "./scss_globals/global.scss";
+import "./scss/global.scss";
 export * from "./indicators";
 export { default } from "./indicators";

src/index.ts

@@ -4,9 +4,9 @@
 $defaultColorRedChannel: color.red(defaults.$defaultColor);
 $defaultColorGreenChannel: color.green(defaults.$defaultColor);
 $defaultColorBlueChannel: color.blue(defaults.$defaultColor);
-$spinAtomDuration: 2.5s;
+$spinAtomDuration: 2.1s;
 $spinAtomPathDuration: 8s;
-$colorInversionDegree: 255; // 0 - 255
+$colorInversionDegree: 200; // 0 - 255
 
 .atom-bounding-box {
   --color-r: #{$defaultColorRedChannel};
@@ -16,13 +16,14 @@ $colorInversionDegree: 255; // 0 - 255
   font-size: defaults.$fontSizer;
   position: relative;
   color: rgb(var(--color-r), var(--color-g), var(--color-b));
+  text-align: unset;
 
   // Create stacking context
   isolation: isolate;
 
   .atom-loader {
-    $box-width: 4em;
-    $box-height: 4em;
+    $box-width: 5em;
+    $box-height: 5em;
 
     // create stacking context + relative positioning
     position: relative;
@@ -32,7 +33,6 @@ $colorInversionDegree: 255; // 0 - 255
     height: $box-height;
     transform: perspective(500px) rotateX(-24deg) rotateY(20deg) rotateZ(30deg);
     transform-style: preserve-3d;
-    // color: $defaultColor;
 
     & .inner {
       width: 100%;
@@ -57,19 +57,24 @@ $colorInversionDegree: 255; // 0 - 255
         animation: rotateDisc3 $spinAtomPathDuration linear infinite;
       }
 
+      $disc-border-width: 0.3em;
       & .disc {
         position: absolute;
-        width: 100%;
-        height: 98%;
+        // width: 100%;
+        // height: 98%;
         border-radius: 50%;
-        border: 0.3em solid var(--disc-color, currentColor);
+        border: $disc-border-width solid var(--disc-color, currentColor);
         display: inline-block;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 2%;
       }
 
       & .disc.nucleus-holder {
-        width: $box-width;
-        height: $box-height;
-        border: 0.3em solid transparent;
+        // width: $box-width;
+        // height: $box-height;
+        border: $disc-border-width solid transparent;
 
         & .nucleus {
           $nucleus-dimension: 0.8em;
@@ -125,13 +130,18 @@ $colorInversionDegree: 255; // 0 - 255
   }
 }
 
-@keyframes spinAtom {
+/* @keyframes spin-atom {
   0% {
     transform: rotateX(360deg) rotateY(0deg);
   }
   100% {
     transform: rotateX(0deg) rotateY(360deg);
   }
+} */
+@keyframes spinAtom {
+  to {
+    transform: rotate(1turn);
+  }
 }
 
 @keyframes rotateDisc2 {

src/indicators/Atom/Atom.scss

@@ -38,20 +38,20 @@
       left: 0;
       width: 100%;
       height: 100%;
-      animation: spinAtom var(--spinAtom-duration) linear infinite;
+      animation: spinAtom2 var(--spinAtom2-duration) linear infinite;
 
       &:has(.electron) {
         animation-direction: reverse;
       }
 
       &.orbit-holder-1 {
-        --spinAtom-duration: 2s;
+        --spinAtom2-duration: 2s;
       }
       &.orbit-holder-2 {
-        --spinAtom-duration: 2.5s;
+        --spinAtom2-duration: 2.5s;
       }
       &.orbit-holder-3 {
-        --spinAtom-duration: 2s;
+        --spinAtom2-duration: 2s;
       }
 
       .orbit {
@@ -99,7 +99,7 @@
   }
 }
 
-@keyframes spinAtom {
+@keyframes spinAtom2 {
   to {
     transform: rotate(1turn);
   }

src/indicators/Atom2/Atom.scss

@@ -1,15 +1,20 @@
+@use "sass:math";
+@use "sass:meta";
+
 @use "../../scss/variables" as defaults;
 
-$spinCommetDuration: 1.8s;
+$spinCommetDuration: 1.4s;
 $bolus-size: 0.4667em;
 $commet-path-width: 0.2em;
 
 @function stripUnit($value) {
-    @if type-of($value) == "number" and not unitless($value) {
-        @return $value / ($value * 0 + 1);
+    @if meta.type-of($value) != "number" {
+        @error "The type( `#{meta.type-of($value)}` ) is Invalid. Provide a number instead.";
+    } @else if meta.type-of($value) == "number" and not math.is-unitless($value) {
+        @return math.div($value, ($value * 0 + 1));
     }
 
-    @return $number;
+    @return $value;
 }
 
 @function diffRatio($borderWidth, $bolusSize) {
@@ -31,8 +36,8 @@ $commet-path-width: 0.2em;
     box-sizing: border-box;
 
     .commet-loader {
-        width: 4em;
-        height: 4em;
+        width: 5em;
+        height: 5em;
         color: defaults.$defaultColor;
         display: flex;
         align-items: center;

src/indicators/Commet/Commet.scss

@@ -3,6 +3,7 @@ import React from "react";
 import { CommetProps } from "./Commet.types";
 import "./Commet.scss";
 import useFontsizeMapper from "../../hooks/useFontsizeMapper";
+import Text from "../../utils/Text";
 
 const Commet = (props: CommetProps) => {
 	// Styles
@@ -40,21 +41,11 @@ const Commet = (props: CommetProps) => {
 					...styles
 				}}
 			>
-				<span
-					className="rli-d-i-b rli-text-format commet-text"
-					style={{
-						...(props?.textColor && {
-							color: props?.textColor,
-							mixBlendMode: "unset"
-						})
-					}}
-				>
-					{props?.text
-						? typeof props?.text === "string" && props?.text.length
-							? props?.text
-							: "loading"
-						: null}
-				</span>
+				<Text
+					className="commet-text"
+					text={props?.text}
+					textColor={props?.textColor}
+				/>
 
 				<span className="rli-d-i-b ring-wrapper ring1">
 					<span className="rli-d-i-b ring "></span>

src/indicators/Commet/Commet.tsx

@@ -95,7 +95,7 @@ $glideAnimDuration: 2s;
       transform: translateX(-50%);
       color: currentColor;
       font-size: 0.7em;
-      font-weight: 600;
+      // font-weight: 600;
     }
 
     &:after {