Updates to Animation css and README.md

RPDevJesco · Aug 18, 2024 · 73828a4 · 73828a4
1 parent ae1cce4
commit 73828a4
Show file tree

Hide file tree

Showing 27 changed files with 771 additions and 331 deletions.
diff --git a/Documentation/ZephyrJS.md b/Documentation/ZephyrJS.md
diff --git a/Documentation/templates/LayeredCard.md b/Documentation/templates/LayeredCard.md
@@ -0,0 +1,36 @@
+# LayeredCard Component
+
+## Purpose and Use Case
+
+The LayeredCard component is designed to enhance user experience by providing contextual information in an innovative and non-intrusive manner. It reimagines how additional content can be presented alongside primary information, breathing new life into traditional UX design patterns.
+
+### Key Features:
+
+1. **Contextual Information Display**: The component allows for the presentation of supplementary information that directly relates to the main content of the card. This contextual element moves with the user's cursor, providing relevant details based on the area of focus.
+
+2. **Enhanced User Engagement**: By revealing additional information dynamically, the LayeredCard encourages users to explore content more deeply, increasing engagement and information retention.
+
+3. **Space Efficiency**: Instead of cluttering the main view with all available information, the LayeredCard keeps the primary content clean and unobstructed while making supplementary details easily accessible.
+
+4. **Intuitive Interaction**: The popover follows the user's mouse movement, creating a natural and intuitive way to access additional information without the need for clicks or navigation.
+
+5. **Flexible Content Presentation**: Both the main content and the contextual popover can contain rich HTML, allowing for diverse and complex information structures.
+
+### Ideal Use Cases:
+
+- **Product Catalogs**: Displaying additional product details or specifications without cluttering the main product card.
+- **Educational Materials**: Providing definitions, explanations, or additional context for complex topics.
+- **Data Visualization**: Offering detailed information about specific data points in charts or graphs.
+- **Interactive Stories**: Enhancing storytelling by revealing background information or character details.
+- **User Interfaces**: Explaining UI elements or providing quick tips without resorting to lengthy tooltips.
+
+### Design Considerations:
+
+While the LayeredCard component offers exciting possibilities for UX enhancement, it's important to use it judiciously:
+
+1. **Avoid Overuse**: The component should be employed selectively to prevent overwhelming the user with too much dynamic content.
+2. **Ensure Relevance**: The contextual information should always be directly relevant to the main content to maintain a coherent user experience.
+3. **Accessibility**: Consider users who may not be able to use a mouse; ensure that critical information is also accessible through other means.
+4. **Performance**: Be mindful of the content loaded into the popover to maintain smooth performance, especially on mobile devices.
+
+By leveraging the LayeredCard component thoughtfully, designers and developers can create more engaging, informative, and interactive user interfaces that provide a fresh take on content presentation and user interaction.
diff --git a/zephyrcore/zephyr.js b/zephyrcore/zephyr.js
@@ -3,7 +3,7 @@
  * and data binding capabilities.
  */
 export default class ZephyrJS extends HTMLElement {
-    static baseUrl = 'https://cdn.jsdelivr.net/gh/RPDevJesco/ZephyrJS@0.09';
+    static baseUrl = '';
 
     static setBaseUrl(url) {
         ZephyrJS.baseUrl = url.endsWith('/') ? url : url + '/';

diff --git a/zephyrcss/themes/cool-winter-theme.css b/zephyrcss/themes/cool-winter-theme.css
@@ -1,115 +1,82 @@
 [data-theme="cool-winter"] {
-    /* Main palette colors */
-    --primary-color: #2E3A59;    /* Dark navy */
-    --secondary-color: #5D8297;  /* Cool blue */
-    --accent-color: #A8C4E5;     /* Light icy blue */
-    --background-color: #E8F0F9; /* Soft icy blue */
-    --neutral-color: #BCC7D3;    /* Light gray-blue */
-    --secondary-color-light: #DCE5F0; /* Light gray-blue */
-
-    /* Semantic colors */
-    --info-color: #1E90FF;       /* Dodger blue */
-    --info-background: #F0F8FF;  /* Alice blue */
-    --success-color: #32CD32;    /* Lime green */
-    --success-background: #F0FFF0; /* Honeydew */
-    --danger-color: #FF6347;     /* Tomato */
-    --danger-background: #FFE4E1; /* Misty rose */
-    --warning-color: #FFD700;    /* Gold */
-    --warning-background: #FFF8DC; /* Cornsilk */
-
-    /* Text colors */
-    --light-text: #F0F4FA;       /* Very light blue */
-    --dark-text: #1C2C42;        /* Very dark navy */
-
-    /* Component-specific colors */
-    --button-hover-bg: #4682B4;  /* Steel blue */
-    --input-focus-border: #5D8297; /* Adjusted to match the secondary color */
-    --button-click-bg: #1E90FF;  /* Dodger blue */
-
-    /* Typography */
-    --font-family-sans-serif: "Montserrat", "Helvetica Neue", Arial, sans-serif;
-    --font-family-serif: "Merriweather", Georgia, serif;
-    --font-family-monospace: "Fira Code", "Courier New", monospace;
-
-    /* Body styles */
+    /* Main Palette Colors */
+    --primary-color: var(--blue-dark);        /* Dark navy */
+    --secondary-color: var(--blue-light);     /* Cool blue */
+    --accent-color: var(--cyan-light);        /* Light icy blue */
+    --background-color: var(--light-blue);    /* Soft icy blue */
+    --neutral-color: var(--gray-light);       /* Light gray-blue */
+    --secondary-color-light: var(--gray-light); /* Light gray-blue */
+
+    /* Semantic Colors */
+    --info-color: var(--info-color);          /* Dodger blue */
+    --info-background: var(--info-background);/* Alice blue */
+    --success-color: var(--success-color);    /* Lime green */
+    --success-background: var(--success-background); /* Honeydew */
+    --danger-color: var(--danger-color);      /* Tomato */
+    --danger-background: var(--danger-background); /* Misty rose */
+    --warning-color: var(--warning-color);    /* Gold */
+    --warning-background: var(--warning-background); /* Cornsilk */
+
+    /* Text Colors */
+    --light-text: var(--gray-light);          /* Very light blue */
+    --dark-text: var(--gray-dark);            /* Very dark navy */
+
+    /* Component-Specific Colors */
+    --button-hover-bg: var(--teal-dark);      /* Steel blue */
+    --input-focus-border: var(--blue-light);  /* Adjusted to match the secondary color */
+    --button-click-bg: var(--info-color);     /* Dodger blue */
+
+    /* Body Styles */
     --body-bg: var(--background-color);
-    --body-color: #1C2C42;       /* Very dark navy for main text */
+    --body-color: var(--dark-text);           /* Very dark navy for main text */
 
-    /* Link styles */
+    /* Link Styles */
     --link-color: var(--accent-color);
     --link-decoration: none;
-    --link-hover-color: #4682B4; /* Steel blue */
+    --link-hover-color: var(--teal-dark);     /* Steel blue */
 
-    /* Additional theme-specific variables */
+    /* Additional Theme-Specific Variables */
     --header-bg: var(--primary-color);
     --header-color: var(--neutral-color);
     --footer-bg: var(--secondary-color);
     --footer-color: var(--primary-color);
     --button-primary-bg: var(--accent-color);
-    --button-primary-color: white;
-    --card-bg: white;
+    --button-primary-color: var(--white);
+    --card-bg: var(--white);
     --card-border: var(--neutral-color);
 
-    /* Button specific variables */
-    --button-padding: 10px 20px;
-    --button-border-radius: 5px;
-    --button-font-size: 1em;
-    --button-primary-bg-color: var(--accent-color);
+    /* Button Specific Variables */
     --button-disabled-background: var(--neutral-color);
 
-    /* Card specific variables */
+    /* Card Specific Variables */
     --card-box-shadow: var(--shadow-light);
-    --card-padding: 16px;
-    --card-border-radius: 8px;
-    --card-header-font-size: 1.5em;
-    --card-header-margin-bottom: 12px;
-    --card-content-margin-top: 8px;
 
     /* CardGroup Component Variables */
-    --card-group-gap: 1rem;
-    --card-min-width: 250px;
-    --card-border-color: #BCC7D3;
-    --card-header-color: #1C2C42;
-    --card-content-color: #2E3A59;
-    --card-content-font-size: 1rem;
+    --card-border-color: var(--neutral-color);
+    --card-header-color: var(--dark-text);
+    --card-content-color: var(--primary-color);
 
-    /* Input specific variables */
-    --input-margin: 10px 0;
-    --input-padding: 10px;
+    /* Input Specific Variables */
     --input-border: 1px solid var(--neutral-color);
-    --input-border-radius: 4px;
-    --input-font-size: 1rem;
     --input-focus-border-color: var(--secondary-color);
 
-    /* Dropdown specific variables */
-    --dropdown-padding: 10px;
+    /* Dropdown Specific Variables */
     --dropdown-border: 1px solid var(--neutral-color);
-    --dropdown-border-radius: 4px;
-    --dropdown-font-size: 1rem;
     --dropdown-background: var(--background-color);
     --dropdown-arrow: url('data:image/svg+xml;utf8,<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><polygon points="0,0 140,0 70,70" style="fill:%23BCC7D3;"/></svg>');
     --dropdown-focus-border-color: var(--secondary-color);
 
-    /* Modal specific variables */
+    /* Modal Specific Variables */
     --modal-background: var(--background-color);
-    --modal-border-radius: 10px;
     --modal-box-shadow: var(--shadow-dark);
-    --modal-width: 300px;
-    --modal-z-index: 1000;
-    --modal-header-padding: 16px;
     --modal-header-background: var(--primary-color);
     --modal-header-border-color: var(--neutral-color);
-    --modal-header-font-size: 1.25em;
-    --modal-body-padding: 16px;
-    --modal-footer-padding: 16px;
     --modal-footer-background: var(--neutral-color);
     --modal-footer-border-color: var(--neutral-color);
 
-    /* Notification specific variables */
-    --notification-padding: 16px;
+    /* Notification Specific Variables */
     --notification-background: var(--light-text);
     --notification-border-color: var(--primary-color);
-    --notification-font-size: 1em;
     --notification-success-background: var(--success-background);
     --notification-error-background: var(--danger-background);
     --notification-warning-background: var(--warning-background);
@@ -118,29 +85,21 @@
     --notification-warning-text: var(--warning-color);
 
     /* Markdown Editor and Renderer Colors */
-    --markdown-bg: #2E3A59;
-    --markdown-color: #F8F8F2;
-    --markdown-keyword: #A8C4E5;
-    --markdown-string: #32CD32;
-    --markdown-number: #FFD700;
-    --markdown-function: #FF6347;
-    --markdown-comment: #75715E;
-    --markdown-method: #66D9EF;
-    --markdown-tag: #5D8297;
-    --markdown-attribute: #FF6347;
-    --markdown-at-rule: #AF00DB;
-    --markdown-punctuation: #000000;
-    --markdown-property: #FF6347;
-    --markdown-value: #5D8297;
-    --markdown-selector: #1C2C42;
-    --markdown-indentation: #CCCCCC;
+    --markdown-bg: var(--primary-color);
+    --markdown-color: var(--white);
+    --markdown-keyword: var(--accent-color);
+    --markdown-string: var(--success-color);
+    --markdown-number: var(--warning-color);
+    --markdown-function: var(--danger-color);
+    --markdown-comment: var(--gray-dark);
+    --markdown-method: var(--cyan-dark);
+    --markdown-tag: var(--secondary-color);
+    --markdown-attribute: var(--danger-color);
+    --markdown-at-rule: var(--indigo-dark);
+    --markdown-punctuation: var(--black);
+    --markdown-property: var(--danger-color);
+    --markdown-value: var(--secondary-color);
+    --markdown-selector: var(--dark-text);
+    --markdown-indentation: var(--gray-dark-2);
     --markdown-text: var(--markdown-indentation);
-
-    --spacing-none: 0;
-    --spacing-extra-small: 5px;
-    --spacing-small: 10px;
-    --spacing-medium: 16px;
-    --spacing-large: 20px;
-
-    --border-radius: 5px;
 }
diff --git a/zephyrcss/themes/dark-theme.css b/zephyrcss/themes/dark-theme.css
@@ -7,15 +7,15 @@
     --neutral-color: #3C3C3C;    /* Neutral dark gray */
     --secondary-color-light: #3D3D5C; /* Light shade of secondary color */
 
-    /* Semantic colors */
-    --info-color: #2196F3;       /* Bright blue for info */
-    --info-background: #0D47A1;  /* Dark blue for info background */
-    --success-color: #4CAF50;    /* Bright green */
-    --success-background: #1B5E20; /* Dark green for success background */
-    --danger-color: #F44336;     /* Bright red */
-    --danger-background: #B71C1C; /* Dark red for danger background */
-    --warning-color: #FF9800;    /* Bright amber */
-    --warning-background: #E65100; /* Dark amber for warning background */
+    /* Semantic Colors */
+    --info-color: var(--info-color);          /* Dodger blue */
+    --info-background: var(--info-background);/* Alice blue */
+    --success-color: var(--success-color);    /* Lime green */
+    --success-background: var(--success-background); /* Honeydew */
+    --danger-color: var(--danger-color);      /* Tomato */
+    --danger-background: var(--danger-background); /* Misty rose */
+    --warning-color: var(--warning-color);    /* Gold */
+    --warning-background: var(--warning-background); /* Cornsilk */
 
     /* Text colors */
     --light-text: var(--white);      /* White for text on dark backgrounds */

diff --git a/zephyrcss/themes/default.css b/zephyrcss/themes/default.css
@@ -5,11 +5,15 @@
     --accent-color: #A88FAC;
     --neutral-color: #D4B2D8;
 
-    /* Semantic colors */
-    --info-color: #17a2b8;
-    --success-color: #2ECC71;
-    --danger-color: #E74C3C;
-    --warning-color: #F39C12;
+    /* Semantic Colors */
+    --info-color: var(--info-color);          /* Dodger blue */
+    --info-background: var(--info-background);/* Alice blue */
+    --success-color: var(--success-color);    /* Lime green */
+    --success-background: var(--success-background); /* Honeydew */
+    --danger-color: var(--danger-color);      /* Tomato */
+    --danger-background: var(--danger-background); /* Misty rose */
+    --warning-color: var(--warning-color);    /* Gold */
+    --warning-background: var(--warning-background); /* Cornsilk */
 
     /* Typography */
     --font-family-sans-serif: "Montserrat", "Helvetica Neue", Arial, sans-serif;

diff --git a/zephyrcss/themes/elegant-theme.css b/zephyrcss/themes/elegant-theme.css
@@ -7,15 +7,15 @@
     --neutral-color: #BDC3C7;    /* Medium gray */
     --secondary-color-light: #D3DDE6; /* Light gray */
 
-    /* Semantic colors */
-    --info-color: #3498DB;       /* Bright blue */
-    --info-background: #E0F7FA;  /* Light cyan */
-    --success-color: #2ECC71;    /* Bright green */
-    --success-background: #E8F5E9; /* Very light green */
-    --danger-color: #E74C3C;     /* Bright red */
-    --danger-background: #FDEDEC; /* Light red */
-    --warning-color: #F39C12;    /* Bright yellow-orange */
-    --warning-background: #FEF3E6; /* Light yellow */
+    /* Semantic Colors */
+    --info-color: var(--info-color);          /* Dodger blue */
+    --info-background: var(--info-background);/* Alice blue */
+    --success-color: var(--success-color);    /* Lime green */
+    --success-background: var(--success-background); /* Honeydew */
+    --danger-color: var(--danger-color);      /* Tomato */
+    --danger-background: var(--danger-background); /* Misty rose */
+    --warning-color: var(--warning-color);    /* Gold */
+    --warning-background: var(--warning-background); /* Cornsilk */
 
     /* Text colors */
     --light-text: #FFFFFF;       /* White */

diff --git a/zephyrcss/themes/fantasy-theme.css b/zephyrcss/themes/fantasy-theme.css
@@ -7,15 +7,15 @@
     --neutral-color: #C5B3CD;    /* Light lavender */
     --secondary-color-light: #CFC3E1; /* Light lavender shade */
 
-    /* Semantic colors */
-    --info-color: #7B68EE;       /* Medium slate blue */
-    --info-background: #E6E6FA;  /* Lavender */
-    --success-color: #32CD32;    /* Lime green */
-    --success-background: #F0FFF0; /* Honeydew */
-    --danger-color: #FF69B4;     /* Hot pink */
-    --danger-background: #FFF0F5; /* Lavender blush */
-    --warning-color: #FFD700;    /* Gold */
-    --warning-background: #FFF8DC; /* Cornsilk */
+    /* Semantic Colors */
+    --info-color: var(--info-color);          /* Dodger blue */
+    --info-background: var(--info-background);/* Alice blue */
+    --success-color: var(--success-color);    /* Lime green */
+    --success-background: var(--success-background); /* Honeydew */
+    --danger-color: var(--danger-color);      /* Tomato */
+    --danger-background: var(--danger-background); /* Misty rose */
+    --warning-color: var(--warning-color);    /* Gold */
+    --warning-background: var(--warning-background); /* Cornsilk */
 
     /* Text colors */
     --light-text: #F9F2FF;       /* Very light lilac */

diff --git a/zephyrcss/themes/heaven-theme.css b/zephyrcss/themes/heaven-theme.css
@@ -7,15 +7,15 @@
     --neutral-color: #C8E6C9;    /* Soft green */
     --secondary-color-light: #BBDEFB; /* Light blue */
 
-    /* Semantic colors */
-    --info-color: #64B5F6;       /* Light blue */
-    --info-background: #E3F2FD;  /* Light sky blue */
-    --success-color: #81C784;    /* Light green */
-    --success-background: #E8F5E9; /* Light green */
-    --danger-color: #E57373;     /* Light red */
-    --danger-background: #FFEBEE; /* Light red */
-    --warning-color: #FFD54F;    /* Light yellow */
-    --warning-background: #FFF9C4; /* Light yellow */
+    /* Semantic Colors */
+    --info-color: var(--info-color);          /* Dodger blue */
+    --info-background: var(--info-background);/* Alice blue */
+    --success-color: var(--success-color);    /* Lime green */
+    --success-background: var(--success-background); /* Honeydew */
+    --danger-color: var(--danger-color);      /* Tomato */
+    --danger-background: var(--danger-background); /* Misty rose */
+    --warning-color: var(--warning-color);    /* Gold */
+    --warning-background: var(--warning-background); /* Cornsilk */
 
     /* Text colors */
     --light-text: #90CAF9;       /* White */

diff --git a/zephyrcss/themes/hellfire-theme.css b/zephyrcss/themes/hellfire-theme.css
@@ -7,15 +7,15 @@
     --neutral-color: #808080;    /* Medium gray */
     --secondary-color-light: #8B0000; /* Dark red */
 
-    /* Semantic colors */
-    --info-color: #FF6347;       /* Tomato */
-    --info-background: #FFE4E1;  /* Light red */
-    --success-color: #32CD32;    /* Lime green */
-    --success-background: #F0FFF0; /* Honeydew */
-    --danger-color: #DC143C;     /* Crimson */
-    --danger-background: #FFE4E1; /* Light red */
-    --warning-color: #FFD700;    /* Gold */
-    --warning-background: #FFF8DC; /* Light yellow */
+    /* Semantic Colors */
+    --info-color: var(--info-color);          /* Dodger blue */
+    --info-background: var(--info-background);/* Alice blue */
+    --success-color: var(--success-color);    /* Lime green */
+    --success-background: var(--success-background); /* Honeydew */
+    --danger-color: var(--danger-color);      /* Tomato */
+    --danger-background: var(--danger-background); /* Misty rose */
+    --warning-color: var(--warning-color);    /* Gold */
+    --warning-background: var(--warning-background); /* Cornsilk */
 
     /* Text colors */
     --light-text: #FFFFFF;       /* White */