@angelscmf/front 1.0.28 → 1.0.30

package/sass/_AngelsHTMLElements.scss

@@ -1,244 +1,244 @@
-    /**
-    *  Angels' CMF HTML Elements styles.
-    *  
-    *  @version 2025-07-31
-    *    * Adds `a` styles.
-    *    * Adds `button` styles.
-    *    * Adds `h1.a-h1` styles.
-    *    * Adds `h2.a-h2` styles.
-    *    * Adds `h3.a-h3` styles.
-    *    * Adds `h4.a-h4` styles.
-    *    * Adds `h5.a-h5` styles.
-    *    * Adds `h6.a-h6` styles.
-    *    * Adds `input` styles.
-    *    * Adds `p` styles.
-    *    * Adds `table.a-table` styles.
-    *    * Adds `table.a-table td` styles.
-    *    * Adds `textarea` styles.
-    */
-
-    @use "AngelsVariables";
-
-    * {
-        box-sizing: border-box;
-    }
-
-    [hidden] {
-        // Hidden tags should be hidden always.
-        display: none !important;
-    }
-
-    :root {
-        --a-link-textColor: #551c74;
-        --a-link-hoverTextColor: #8F54B0;
-    }
-
-    a {
-        color: var(--a-link-textColor);
-
-        &:hover {
-            color: var(--a-link-hoverTextColor);
-        }
-
-        &:focus {
-            box-shadow: var(--a-focusBoxShadow);
-            outline-color: var(--a-focusOutlineColor);
-        }
-    }
-
-    :root {
-        --a-button-background: #fff;
-        --a-button-color: #8F54B0;
-        /* 1/2em */
-        --a-button-gap: var(--a-halfSize);
-        /* 2em */
-        --a-button-minHeight: var(--a-doubleSize);
-        --a-button-paddingLeft: var(--a-baseSize);
-        --a-button-paddingRight: var(--a-baseSize);
-        --a-button-paddingTop: var(--a-halfSize);
-        --a-button-paddingBottom: var(--a-halfSize);
-        --a-button-borderColor: #8F54B0;
-        --a-button-borderStyle: outset;
-        --a-button-borderWidth: 2px;
-        --a-button-hoverBackground: #551C74;
-        --a-button-hoverTextColor: #fff;
-    }
-
-    button {
-        align-items: center;
-        background: var(--a-button-background);
-        border-radius: var(--a-borderRadius);
-        border-color: var(--a-button-borderColor);
-        border-style: var(--a-button-borderStyle);
-        border-width: var(--a-button-borderWidth);
-        color: var(--a-button-color);
-        display: inline-flex;
-        gap: var(--a-button-gap);
-        min-height: var(--a-button-minHeight);
-        padding-left: calc(var(--a-button-paddingLeft) - var(--a-button-borderWidth));
-        padding-right: calc(var(--a-button-paddingRight) - var(--a-button-borderWidth));
-        padding-top: calc(var(--a-button-paddingTop) - var(--a-button-borderWidth));
-        padding-bottom: calc(var(--a-button-paddingBottom) - var(--a-button-borderWidth));
-        transition: all 0.3s ease;
-
-        &:enabled {
-            cursor: pointer;
-        }
-
-        &:hover {
-            background: var(--a-button-hoverBackground);
-            color: var(--a-button-hoverTextColor);
-        }
-    }
-
-    :root {
-        --a-submit-background: #8F54B0;
-        --a-submit-borderColor: #551C74;
-        --a-submit-borderWidth: 2px;
-        --a-submit-color: #fff;
-        --a-submit-hoverBackground: #551C74;
-        --a-submit-hoverTextColor: #fff;
-    }
-
-    button[type=submit] {
-        background: var(--a-submit-background);
-        border-color: var(--a-submit-borderColor);
-        border-width: var(--a-submit-borderWidth);
-        color: var(--a-submit-color);
-
-        &:hover {
-            background: var(--a-submit-hoverBackground);
-            color: var(--a-submit-hoverTextColor);
-        }
-    }
-
-    :root {
-        --a-headers-color: orangered;
-        --a-headers-lineHeight: 2;
-    }
-
-    :root {
-        --a-header1-color: var(--a-headers-color);
-        --a-header1-lineHeight: var(--a-headers-lineHeight);
-        --a-header1-margin: 0;
-        --a-header1-size: #{AngelsVariables.$aFontSize + 6};
-    }
-
-    h1,
-    h1.a-h1 {
-        color: var(--a-header1-color);
-        font-size: var(--a-header1-size);
-        font-weight: normal;
-        line-height: var(--a-header1-lineHeight);
-        margin: var(--a-header1-margin);
-        padding: 0;
-    }
-
-    :root {
-        --a-header2-color: var(--a-headers-color);
-        --a-header2-lineHeight: var(--a-headers-lineHeight);
-        --a-header2-margin: 0;
-        --a-header2-size: #{AngelsVariables.$aFontSize + 5};
-    }
-
-    h2,
-    h2.a-h2 {
-        color: var(--a-header2-color);
-        font-size: var(--a-header2-size);
-        font-weight: normal;
-        letter-spacing: 2px;
-        line-height: var(--a-header2-lineHeight);
-        margin: var(--a-header2-margin);
-        padding: 0;
-    }
-
-    :root {
-        --a-header3-color: var(--a-headers-color);
-        --a-header3-lineHeight: var(--a-headers-lineHeight);
-        --a-header3-margin: 0;
-        --a-header3-size: #{AngelsVariables.$aFontSize + 4};
-    }
-
-    h3,
-    h3.a-h3 {
-        color: var(--a-header3-color);
-        font-size: var(--a-header3-size);
-        font-weight: normal;
-        letter-spacing: 2px;
-        line-height: var(--a-header3-lineHeight);
-        margin: var(--a-header3-margin);
-        padding: 0;
-    }
-
-    :root {
-        --a-header4-color: var(--a-headers-color);
-        --a-header4-lineHeight: var(--a-headers-lineHeight);
-        --a-header4-margin: 0;
-        --a-header4-size: #{AngelsVariables.$aFontSize + 3};
-    }
-
-    h4,
-    h4.a-h4 {
-        color: var(--a-header4-color);
-        font-size: var(--a-header4-size);
-        font-weight: normal;
-        letter-spacing: 2px;
-        line-height: var(--a-header4-lineHeight);
-        margin: var(--a-header4-margin);
-        padding: 0;
-    }
-
-    :root {
-        --a-header5-color: var(--a-headers-color);
-        --a-header5-lineHeight: var(--a-headers-lineHeight);
-        --a-header5-margin: 0;
-        --a-header5-size: #{AngelsVariables.$aFontSize + 2};
-    }
-
-    h5,
-    h5.a-h5 {
-        color: var(--a-header5-color);
-        font-size: var(--a-header5-size);
-        font-weight: normal;
-        letter-spacing: 2px;
-        line-height: var(--a-header5-lineHeight);
-        margin: var(--a-header5-margin);
-        padding: 0;
-    }
-
-    :root {
-        --a-header6-color: var(--a-headers-color);
-        --a-header6-lineHeight: var(--a-headers-lineHeight);
-        --a-header6-margin: 0;
-        --a-header6-size: #{AngelsVariables.$aFontSize + 1};
-    }
-
-    h6,
-    h6.a-h6 {
-        color: var(--a-header6-color);
-        font-size: var(--a-header6-size);
-        font-weight: normal;
-        letter-spacing: 2px;
-        line-height: var(--a-header6-lineHeight);
-        margin: var(--a-header6-margin);
-        padding: 0;
-    }
-
-    input {
-        border-radius: var(--a-borderRadius);
-    }
-
-    p {
-        text-align: justify;
-    }
-
-    table.a-table {
-
-        td {
-            padding: .1em var(--a-halfSize);
-        }
-    }
-
-    textarea {
-        border-radius: var(--a-borderRadius);
-    }
+/**
+*  Angels' CMF HTML Elements styles.
+*  
+*  @version 2025-07-31
+*    * Adds `a` styles.
+*    * Adds `button` styles.
+*    * Adds `h1.a-h1` styles.
+*    * Adds `h2.a-h2` styles.
+*    * Adds `h3.a-h3` styles.
+*    * Adds `h4.a-h4` styles.
+*    * Adds `h5.a-h5` styles.
+*    * Adds `h6.a-h6` styles.
+*    * Adds `input` styles.
+*    * Adds `p` styles.
+*    * Adds `table.a-table` styles.
+*    * Adds `table.a-table td` styles.
+*    * Adds `textarea` styles.
+*/
+
+@use "AngelsVariables";
+
+* {
+    box-sizing: border-box;
+}
+
+[hidden] {
+    // Hidden tags should be hidden always.
+    display: none !important;
+}
+
+:root {
+    --a-link-textColor: #551c74;
+    --a-link-hoverTextColor: #8F54B0;
+}
+
+a {
+    color: var(--a-link-textColor);
+
+    &:hover {
+        color: var(--a-link-hoverTextColor);
+    }
+
+    &:focus {
+        box-shadow: var(--a-focusBoxShadow);
+        outline-color: var(--a-focusOutlineColor);
+    }
+}
+
+:root {
+    --a-button-background: #fff;
+    --a-button-color: #8F54B0;
+    /* 1/2em */
+    --a-button-gap: var(--a-halfSize);
+    /* 2em */
+    --a-button-minHeight: var(--a-doubleSize);
+    --a-button-paddingLeft: var(--a-baseSize);
+    --a-button-paddingRight: var(--a-baseSize);
+    --a-button-paddingTop: var(--a-halfSize);
+    --a-button-paddingBottom: var(--a-halfSize);
+    --a-button-borderColor: #8F54B0;
+    --a-button-borderStyle: outset;
+    --a-button-borderWidth: 2px;
+    --a-button-hoverBackground: #551C74;
+    --a-button-hoverTextColor: #fff;
+}
+
+button {
+    align-items: center;
+    background: var(--a-button-background);
+    border-radius: var(--a-borderRadius);
+    border-color: var(--a-button-borderColor);
+    border-style: var(--a-button-borderStyle);
+    border-width: var(--a-button-borderWidth);
+    color: var(--a-button-color);
+    display: inline-flex;
+    gap: var(--a-button-gap);
+    min-height: var(--a-button-minHeight);
+    padding-left: calc(var(--a-button-paddingLeft) - var(--a-button-borderWidth));
+    padding-right: calc(var(--a-button-paddingRight) - var(--a-button-borderWidth));
+    padding-top: calc(var(--a-button-paddingTop) - var(--a-button-borderWidth));
+    padding-bottom: calc(var(--a-button-paddingBottom) - var(--a-button-borderWidth));
+    transition: all 0.3s ease;
+
+    &:enabled {
+        cursor: pointer;
+    }
+
+    &:hover {
+        background: var(--a-button-hoverBackground);
+        color: var(--a-button-hoverTextColor);
+    }
+}
+
+:root {
+    --a-submit-background: #8F54B0;
+    --a-submit-borderColor: #551C74;
+    --a-submit-borderWidth: 2px;
+    --a-submit-color: #fff;
+    --a-submit-hoverBackground: #551C74;
+    --a-submit-hoverTextColor: #fff;
+}
+
+button[type=submit] {
+    background: var(--a-submit-background);
+    border-color: var(--a-submit-borderColor);
+    border-width: var(--a-submit-borderWidth);
+    color: var(--a-submit-color);
+
+    &:hover {
+        background: var(--a-submit-hoverBackground);
+        color: var(--a-submit-hoverTextColor);
+    }
+}
+
+:root {
+    --a-headers-color: orangered;
+    --a-headers-lineHeight: 2;
+}
+
+:root {
+    --a-header1-color: var(--a-headers-color);
+    --a-header1-lineHeight: var(--a-headers-lineHeight);
+    --a-header1-margin: 0;
+    --a-header1-size: #{AngelsVariables.$aFontSize + 6};
+}
+
+h1,
+h1.a-h1 {
+    color: var(--a-header1-color);
+    font-size: var(--a-header1-size);
+    font-weight: normal;
+    line-height: var(--a-header1-lineHeight);
+    margin: var(--a-header1-margin);
+    padding: 0;
+}
+
+:root {
+    --a-header2-color: var(--a-headers-color);
+    --a-header2-lineHeight: var(--a-headers-lineHeight);
+    --a-header2-margin: 0;
+    --a-header2-size: #{AngelsVariables.$aFontSize + 5};
+}
+
+h2,
+h2.a-h2 {
+    color: var(--a-header2-color);
+    font-size: var(--a-header2-size);
+    font-weight: normal;
+    letter-spacing: 2px;
+    line-height: var(--a-header2-lineHeight);
+    margin: var(--a-header2-margin);
+    padding: 0;
+}
+
+:root {
+    --a-header3-color: var(--a-headers-color);
+    --a-header3-lineHeight: var(--a-headers-lineHeight);
+    --a-header3-margin: 0;
+    --a-header3-size: #{AngelsVariables.$aFontSize + 4};
+}
+
+h3,
+h3.a-h3 {
+    color: var(--a-header3-color);
+    font-size: var(--a-header3-size);
+    font-weight: normal;
+    letter-spacing: 2px;
+    line-height: var(--a-header3-lineHeight);
+    margin: var(--a-header3-margin);
+    padding: 0;
+}
+
+:root {
+    --a-header4-color: var(--a-headers-color);
+    --a-header4-lineHeight: var(--a-headers-lineHeight);
+    --a-header4-margin: 0;
+    --a-header4-size: #{AngelsVariables.$aFontSize + 3};
+}
+
+h4,
+h4.a-h4 {
+    color: var(--a-header4-color);
+    font-size: var(--a-header4-size);
+    font-weight: normal;
+    letter-spacing: 2px;
+    line-height: var(--a-header4-lineHeight);
+    margin: var(--a-header4-margin);
+    padding: 0;
+}
+
+:root {
+    --a-header5-color: var(--a-headers-color);
+    --a-header5-lineHeight: var(--a-headers-lineHeight);
+    --a-header5-margin: 0;
+    --a-header5-size: #{AngelsVariables.$aFontSize + 2};
+}
+
+h5,
+h5.a-h5 {
+    color: var(--a-header5-color);
+    font-size: var(--a-header5-size);
+    font-weight: normal;
+    letter-spacing: 2px;
+    line-height: var(--a-header5-lineHeight);
+    margin: var(--a-header5-margin);
+    padding: 0;
+}
+
+:root {
+    --a-header6-color: var(--a-headers-color);
+    --a-header6-lineHeight: var(--a-headers-lineHeight);
+    --a-header6-margin: 0;
+    --a-header6-size: #{AngelsVariables.$aFontSize + 1};
+}
+
+h6,
+h6.a-h6 {
+    color: var(--a-header6-color);
+    font-size: var(--a-header6-size);
+    font-weight: normal;
+    letter-spacing: 2px;
+    line-height: var(--a-header6-lineHeight);
+    margin: var(--a-header6-margin);
+    padding: 0;
+}
+
+input {
+    border-radius: var(--a-borderRadius);
+}
+
+p {
+    text-align: justify;
+}
+
+table.a-table {
+
+    td {
+        padding: .1em var(--a-halfSize);
+    }
+}
+
+textarea {
+    border-radius: var(--a-borderRadius);
+}

package/sass/_AngelsPageLayout.scss

@@ -18,10 +18,6 @@ html {
     min-height: 100vh;
 }
 
-:root {
-    --a-backgroundColor: #{AngelsVariables.$aMainBackgroundColor};
-}
-
 body {
     background-color: var(--a-backgroundColor);
     color: var(--a-textColor);

package/sass/_AngelsTheme.scss

@@ -1,6 +1,8 @@
 /**
  *  Angels' CMF Theme Custom Variables
  *
+ *  @version 2025-11-16 Adds --a-backgroundColor variable as #FFF4E6.
+ *  @version 2025-11-16 Adds --a-backgroundColorSecondary variable as #FFE9CD.
  *  @version 2025-05-18
  *      * --a-header1-size based on Angels_ThemeVariables.$aFontSize
  *      * --a-header2-size based on Angels_ThemeVariables.$aFontSize
@@ -10,32 +12,62 @@
  *      * --a-header6-size based on Angels_ThemeVariables.$aFontSize
  */
 
+@use "sass:math";
 @use "AngelsVariables";
 
+/**
+ *  Theme Colours
+ */
+:root {
+
+    /**
+     *  Background colour for the all page.
+     */
+    --a-backgroundColor: #FFF4E6;
+
+    /**
+     *  Background colour for the some parts like headers, footers, borders.
+     */
+    --a-backgroundColorSecondary: #FFE9CD;
+}
+
+
 :root {
-    // 1/2em = 8px;
-    --a-halfSize: 8px;
-    // 1em = 16px;
-    --a-baseSize: 16px;
-    // 2em = 32px;
-    --a-doubleSize: 32px;
-    // 4em = 64px;
-    --a-4xSize: 64px;
+    // --a-halfSize: 8px; // 0.5em = 8px; by default 16px font size
+    --a-halfSize: #{math.round(math.div(AngelsVariables.$aFontSize, 2))};
+    // --a-baseSize: 16px; // 1em = 16px; by default 16px font size
+    --a-baseSize: #{AngelsVariables.$aFontSize};
+    // --a-doubleSize: 32px; // 2em = 32px; by default 16px font size
+    --a-doubleSize: #{AngelsVariables.$aFontSize * 2};
+    // --a-fourxSize: 64px; // 4em = 64px; by default 16px font size
+    --a-fourxSize: #{AngelsVariables.$aFontSize * 4};
+    // --a-lineSize: 24px; // 1.5em = 24px; by default 16px font size
+    --a-lineSize: #{AngelsVariables.$aFontSize * 1.5};
+    // --a-lineSizeHalf: 12px; // 0.5em = 12px; by default 16px font size
+    --a-lineSizeHalf: #{math.round(math.div(AngelsVariables.$aFontSize, 2)) * 1.5};
+    // --a-lineSizeQuarter: 6px; // 0.25em = 6px; by default 16px font size
+    --a-lineSizeQuarter: #{math.round(math.div(AngelsVariables.$aFontSize, 4)) * 1.5};
 }
 
 :root {
-    /* --a-borderRadius: 4px = 1em/4 = 16px/4 */
-    --a-borderRadius: 4px;
+    // --a-borderRadius: 6px;
+    --a-borderRadius: var(--a-lineSizeQuarter);
     --a-fontFamily: Verdana, Arial, Helvetica, sans-serif;
-    --a-fontSize: 16px;
-    --a-lineHeight: 24px;
-    --a-lineHeightHalf: 12px;
-    --a-lineHeightQuarter: 6px;
+    // --a-fontSize: 16px;
+    --a-fontSize: var(--a-baseSize);
+    // --a-lineHeight: 24px;
+    --a-lineHeight: var(--a-lineSize);
+    // --a-lineHeightHalf: 12px;
+    --a-lineHeightHalf: var(--a-lineSizeHalf);
+    // --a-lineHeightQuarter: 6px;
+    --a-lineHeightQuarter: var(--a-lineSizeQuarter);
     --a-note-color: palevioletred;
     --a-textColor: #4B2E2E;
 }
 
 :root {
-    --a-focusBoxShadow: 0 0 10px #551c74;
+    --a-focusBoxColor: #551c74;
+    --a-focusBoxSize: 10px;
+    --a-focusBoxShadow: 0 0 var(--a-focusBoxSize) var(--a-focusBoxColor);
     --a-focusOutlineColor: #8f54b0;
 }

package/sass/_AngelsVariables.scss

@@ -5,9 +5,6 @@
 /**
  * Colour variables
  */
-
-$aMainBackgroundColor: #FFF4E6;
-$aSecondBackgroundColor: #ffe9cd;
 $aSecondColor: #02172c;
 
 /**
@@ -28,7 +25,7 @@ $a-tablet-max-width: 767.98px;
 $a-laptop-min-width: 768px;
 $a-laptop-max-width: 1023.98px;
 $a-desktop-min-width: 1024px;
-$a-desktop-max-width: 1366.98px;
+$a-desktop-max-width: 1365.98px;
 $a-large-min-width: 1367px;
 $a-large-max-width: 1919.98px;
 $a-extra-min-width: 1920px;

package/sass/angelsMessages/_AngelsAlert.scss

@@ -1,39 +1,50 @@
 :root {
-    --a-alert-space: var(--a-lineHeightHalf);
-    --a-alert-spaceHalf: var(--a-lineHeightQuarter);
+    --a-alert-space: var(--a-lineSizeHalf);
+    --a-alert-spaceHalf: var(--a-lineSizeQuarter);
     --a-alert-borderColor: #b71c1c;
     --a-alert-background: #ffe6e6;
     --a-alert-color: #d90429;
 }
 
+a-alert {
+    display: block;
+}
+
 a-alert,
+a-state.a-alert,
 div.a-alert,
-p.a-alert {
-    display: block;
+p.a-alert,
+unknown {
+    border-left: 4px solid var(--a-alert-borderColor);
+    border-radius: var(--a-borderRadius);
     padding: var(--a-alert-space);
 }
 
 a-brick.a-alert,
 a.a-alert,
-span.a-alert {
-    padding: 0 var(--a-alert-spaceHalf);
+span.a-alert,
+unknown {
+    border-radius: var(--a-borderRadius);
+    padding-left: var(--a-alert-spaceHalf);
+    padding-right: var(--a-alert-spaceHalf);
 }
 
 ul.a-alert {
-    list-style-type: disc;
-    padding-top: var(--a-alert-space);
-    padding-bottom: var(--a-alert-space);
+    border-radius: var(--a-borderRadius);
+    border-left: 4px solid var(--a-alert-borderColor);
 }
 
 a-alert,
 .a-alert {
     background: var(--a-alert-background);
-    border-left: 4px solid var(--a-alert-borderColor);
     color: var(--a-alert-color);
-    border-radius: var(--a-borderRadius);
-    position: relative;
 
     &:empty {
         display: none;
     }
+}
+
+a-table.a-alert,
+.a-table.a-alert {
+    --a-table-backgroundColor: var(--a-alert-background)
 }