Minor fixes

CHANGELOG.md

@@ -1,6 +1,9 @@
 # CHANGELOG
 
 
+## 1.10.3
+- Fix CSS variable mismatch for  `Sidebar`
+
 ## 1.10.1
 - Tweak theme values for icons and text inside `InputField`
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "fictoan-react",
-    "version": "1.10.2",
+    "version": "1.10.3",
     "private": false,
     "description": "A full-featured, designer-friendly, yet performant framework with plain-English props and focus on rapid iteration.",
     "repository": {

src/components/Sidebar/SidebarItem/sidebar-item.css

@@ -52,15 +52,15 @@
         position : relative;
 
         &::after {
+            position         : absolute;
             content          : "";
             display          : block;
-            position         : absolute;
             pointer-events   : none;
             right            : 6px;
             height           : 8px;
             width            : 8px;
             border-radius    : 50%;
-            background-color : var(--sidebar-item-has-alert-bg);
+            background-color : var(--sidebar-item-alert-bg);
         }
     }
 

src/components/Toast/ToastItem/ToastItem.tsx

@@ -1,10 +1,16 @@
+// FRAMEWORK ===========================================================================================================
 import React, { useState, useEffect } from "react";
 
+// FICTOAN =============================================================================================================
 import { Element } from "../../Element/Element";
-import { CommonAndHTMLProps } from "../../Element/constants";
 
+// STYLES ==============================================================================================================
 import "./toast-item.css";
 
+// TYPES ===============================================================================================================
+import { CommonAndHTMLProps } from "../../Element/constants";
+
+
 // prettier-ignore
 export interface ToastItemCustomProps {
     showWhen         ? : boolean;
@@ -16,6 +22,7 @@ export type ToastItemElementType = HTMLDivElement;
 export type ToastItemProps = Omit<CommonAndHTMLProps<ToastItemElementType>, keyof ToastItemCustomProps> &
     ToastItemCustomProps;
 
+// COMPONENT ///////////////////////////////////////////////////////////////////////////////////////////////////////////
 export const ToastItem = React.forwardRef(
     ({ showWhen, children, secondsToShowFor, closeWhen, ...props }: ToastItemProps, ref: React.Ref<ToastItemElementType>) => {
         let classNames: string[]          = [];

src/components/Typography/Heading.tsx

@@ -1,6 +1,10 @@
+// FRAMEWORK ===========================================================================================================
 import React from "react";
 
+// FICTOAN =============================================================================================================
 import { Element } from "../Element";
+
+// TYPES ===============================================================================================================
 import { CommonAndHTMLProps, WeightTypes } from "../Element/constants";
 
 // prettier-ignore
@@ -14,6 +18,7 @@ interface HeadingBaseProps {
 export type HeadingElementType = HTMLHeadingElement;
 export type HeadingProps = Omit<CommonAndHTMLProps<HeadingElementType>, keyof HeadingBaseProps> & HeadingBaseProps;
 
+// COMPONENT ///////////////////////////////////////////////////////////////////////////////////////////////////////////
 const Heading = React.forwardRef(
     ({ fontStyle = "sans-serif", weight, align, ...props }: HeadingProps, ref: React.Ref<HeadingElementType>) => {
         let classNames = [];

src/scripts/generateColourClasses.js

@@ -1,4 +1,4 @@
-// src/scripts/generateColourClasses.js
+// Keeping this file as JS because TS was throwing errors in the build
 import fs from "fs";
 import path from "path";
 import { fileURLToPath } from "url";

src/styles/theme.css

@@ -504,7 +504,7 @@
     --sidebar-item-text-scale                : 100%;
     --sidebar-item-text-weight               : 600;
 
-    --sidebar-item-has-alert-bg              : var(--red);
+    --sidebar-item-alert-bg              : var(--red);
 
     --sidebar-footer-height                  : 40px;
     --sidebar-footer-bg                      : var(--white);
@@ -574,6 +574,7 @@
 }
 
 /* TEXT ///////////////////////////////////////////////////////////////////// */
+/* To compute fluid font sizes based on screen size */
 :root {
     --screen-width-min : 320;
     --screen-width-max : 1600;