Skip to content

Commit 73828a4

Browse files
RPDevJescoRPDevJesco
committed
Updates to Animation css and README.md
1 parent ae1cce4 commit 73828a4

27 files changed

+771
-331
lines changed

‎Documentation/ZephyrJS.md‎

Whitespace-only changes.

‎Documentation/templates/LayeredCard.md‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# LayeredCard Component
2+
3+
## Purpose and Use Case
4+
5+
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.
6+
7+
### Key Features:
8+
9+
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.
10+
11+
2. **Enhanced User Engagement**: By revealing additional information dynamically, the LayeredCard encourages users to explore content more deeply, increasing engagement and information retention.
12+
13+
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.
14+
15+
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.
16+
17+
5. **Flexible Content Presentation**: Both the main content and the contextual popover can contain rich HTML, allowing for diverse and complex information structures.
18+
19+
### Ideal Use Cases:
20+
21+
- **Product Catalogs**: Displaying additional product details or specifications without cluttering the main product card.
22+
- **Educational Materials**: Providing definitions, explanations, or additional context for complex topics.
23+
- **Data Visualization**: Offering detailed information about specific data points in charts or graphs.
24+
- **Interactive Stories**: Enhancing storytelling by revealing background information or character details.
25+
- **User Interfaces**: Explaining UI elements or providing quick tips without resorting to lengthy tooltips.
26+
27+
### Design Considerations:
28+
29+
While the LayeredCard component offers exciting possibilities for UX enhancement, it's important to use it judiciously:
30+
31+
1. **Avoid Overuse**: The component should be employed selectively to prevent overwhelming the user with too much dynamic content.
32+
2. **Ensure Relevance**: The contextual information should always be directly relevant to the main content to maintain a coherent user experience.
33+
3. **Accessibility**: Consider users who may not be able to use a mouse; ensure that critical information is also accessible through other means.
34+
4. **Performance**: Be mindful of the content loaded into the popover to maintain smooth performance, especially on mobile devices.
35+
36+
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.

‎zephyrcore/zephyr.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* and data binding capabilities.
44
*/
55
export default class ZephyrJS extends HTMLElement {
6-
static baseUrl = 'https://cdn.jsdelivr.net/gh/RPDevJesco/ZephyrJS@0.09';
6+
static baseUrl = '';
77

88
static setBaseUrl(url) {
99
ZephyrJS.baseUrl = url.endsWith('/') ? url : url + '/';

‎zephyrcss/themes/cool-winter-theme.css‎

Lines changed: 59 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -1,115 +1,82 @@
11
[data-theme="cool-winter"] {
2-
/* Main palette colors */
3-
--primary-color: #2E3A59; /* Dark navy */
4-
--secondary-color: #5D8297; /* Cool blue */
5-
--accent-color: #A8C4E5; /* Light icy blue */
6-
--background-color: #E8F0F9; /* Soft icy blue */
7-
--neutral-color: #BCC7D3; /* Light gray-blue */
8-
--secondary-color-light: #DCE5F0; /* Light gray-blue */
9-
10-
/* Semantic colors */
11-
--info-color: #1E90FF; /* Dodger blue */
12-
--info-background: #F0F8FF; /* Alice blue */
13-
--success-color: #32CD32; /* Lime green */
14-
--success-background: #F0FFF0; /* Honeydew */
15-
--danger-color: #FF6347; /* Tomato */
16-
--danger-background: #FFE4E1; /* Misty rose */
17-
--warning-color: #FFD700; /* Gold */
18-
--warning-background: #FFF8DC; /* Cornsilk */
19-
20-
/* Text colors */
21-
--light-text: #F0F4FA; /* Very light blue */
22-
--dark-text: #1C2C42; /* Very dark navy */
23-
24-
/* Component-specific colors */
25-
--button-hover-bg: #4682B4; /* Steel blue */
26-
--input-focus-border: #5D8297; /* Adjusted to match the secondary color */
27-
--button-click-bg: #1E90FF; /* Dodger blue */
28-
29-
/* Typography */
30-
--font-family-sans-serif: "Montserrat", "Helvetica Neue", Arial, sans-serif;
31-
--font-family-serif: "Merriweather", Georgia, serif;
32-
--font-family-monospace: "Fira Code", "Courier New", monospace;
33-
34-
/* Body styles */
2+
/* Main Palette Colors */
3+
--primary-color: var(--blue-dark); /* Dark navy */
4+
--secondary-color: var(--blue-light); /* Cool blue */
5+
--accent-color: var(--cyan-light); /* Light icy blue */
6+
--background-color: var(--light-blue); /* Soft icy blue */
7+
--neutral-color: var(--gray-light); /* Light gray-blue */
8+
--secondary-color-light: var(--gray-light); /* Light gray-blue */
9+
10+
/* Semantic Colors */
11+
--info-color: var(--info-color); /* Dodger blue */
12+
--info-background: var(--info-background);/* Alice blue */
13+
--success-color: var(--success-color); /* Lime green */
14+
--success-background: var(--success-background); /* Honeydew */
15+
--danger-color: var(--danger-color); /* Tomato */
16+
--danger-background: var(--danger-background); /* Misty rose */
17+
--warning-color: var(--warning-color); /* Gold */
18+
--warning-background: var(--warning-background); /* Cornsilk */
19+
20+
/* Text Colors */
21+
--light-text: var(--gray-light); /* Very light blue */
22+
--dark-text: var(--gray-dark); /* Very dark navy */
23+
24+
/* Component-Specific Colors */
25+
--button-hover-bg: var(--teal-dark); /* Steel blue */
26+
--input-focus-border: var(--blue-light); /* Adjusted to match the secondary color */
27+
--button-click-bg: var(--info-color); /* Dodger blue */
28+
29+
/* Body Styles */
3530
--body-bg: var(--background-color);
36-
--body-color: #1C2C42; /* Very dark navy for main text */
31+
--body-color: var(--dark-text); /* Very dark navy for main text */
3732

38-
/* Link styles */
33+
/* Link Styles */
3934
--link-color: var(--accent-color);
4035
--link-decoration: none;
41-
--link-hover-color: #4682B4; /* Steel blue */
36+
--link-hover-color: var(--teal-dark); /* Steel blue */
4237

43-
/* Additional theme-specific variables */
38+
/* Additional Theme-Specific Variables */
4439
--header-bg: var(--primary-color);
4540
--header-color: var(--neutral-color);
4641
--footer-bg: var(--secondary-color);
4742
--footer-color: var(--primary-color);
4843
--button-primary-bg: var(--accent-color);
49-
--button-primary-color: white;
50-
--card-bg: white;
44+
--button-primary-color: var(--white);
45+
--card-bg: var(--white);
5146
--card-border: var(--neutral-color);
5247

53-
/* Button specific variables */
54-
--button-padding: 10px 20px;
55-
--button-border-radius: 5px;
56-
--button-font-size: 1em;
57-
--button-primary-bg-color: var(--accent-color);
48+
/* Button Specific Variables */
5849
--button-disabled-background: var(--neutral-color);
5950

60-
/* Card specific variables */
51+
/* Card Specific Variables */
6152
--card-box-shadow: var(--shadow-light);
62-
--card-padding: 16px;
63-
--card-border-radius: 8px;
64-
--card-header-font-size: 1.5em;
65-
--card-header-margin-bottom: 12px;
66-
--card-content-margin-top: 8px;
6753

6854
/* CardGroup Component Variables */
69-
--card-group-gap: 1rem;
70-
--card-min-width: 250px;
71-
--card-border-color: #BCC7D3;
72-
--card-header-color: #1C2C42;
73-
--card-content-color: #2E3A59;
74-
--card-content-font-size: 1rem;
55+
--card-border-color: var(--neutral-color);
56+
--card-header-color: var(--dark-text);
57+
--card-content-color: var(--primary-color);
7558

76-
/* Input specific variables */
77-
--input-margin: 10px 0;
78-
--input-padding: 10px;
59+
/* Input Specific Variables */
7960
--input-border: 1px solid var(--neutral-color);
80-
--input-border-radius: 4px;
81-
--input-font-size: 1rem;
8261
--input-focus-border-color: var(--secondary-color);
8362

84-
/* Dropdown specific variables */
85-
--dropdown-padding: 10px;
63+
/* Dropdown Specific Variables */
8664
--dropdown-border: 1px solid var(--neutral-color);
87-
--dropdown-border-radius: 4px;
88-
--dropdown-font-size: 1rem;
8965
--dropdown-background: var(--background-color);
9066
--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>');
9167
--dropdown-focus-border-color: var(--secondary-color);
9268

93-
/* Modal specific variables */
69+
/* Modal Specific Variables */
9470
--modal-background: var(--background-color);
95-
--modal-border-radius: 10px;
9671
--modal-box-shadow: var(--shadow-dark);
97-
--modal-width: 300px;
98-
--modal-z-index: 1000;
99-
--modal-header-padding: 16px;
10072
--modal-header-background: var(--primary-color);
10173
--modal-header-border-color: var(--neutral-color);
102-
--modal-header-font-size: 1.25em;
103-
--modal-body-padding: 16px;
104-
--modal-footer-padding: 16px;
10574
--modal-footer-background: var(--neutral-color);
10675
--modal-footer-border-color: var(--neutral-color);
10776

108-
/* Notification specific variables */
109-
--notification-padding: 16px;
77+
/* Notification Specific Variables */
11078
--notification-background: var(--light-text);
11179
--notification-border-color: var(--primary-color);
112-
--notification-font-size: 1em;
11380
--notification-success-background: var(--success-background);
11481
--notification-error-background: var(--danger-background);
11582
--notification-warning-background: var(--warning-background);
@@ -118,29 +85,21 @@
11885
--notification-warning-text: var(--warning-color);
11986

12087
/* Markdown Editor and Renderer Colors */
121-
--markdown-bg: #2E3A59;
122-
--markdown-color: #F8F8F2;
123-
--markdown-keyword: #A8C4E5;
124-
--markdown-string: #32CD32;
125-
--markdown-number: #FFD700;
126-
--markdown-function: #FF6347;
127-
--markdown-comment: #75715E;
128-
--markdown-method: #66D9EF;
129-
--markdown-tag: #5D8297;
130-
--markdown-attribute: #FF6347;
131-
--markdown-at-rule: #AF00DB;
132-
--markdown-punctuation: #000000;
133-
--markdown-property: #FF6347;
134-
--markdown-value: #5D8297;
135-
--markdown-selector: #1C2C42;
136-
--markdown-indentation: #CCCCCC;
88+
--markdown-bg: var(--primary-color);
89+
--markdown-color: var(--white);
90+
--markdown-keyword: var(--accent-color);
91+
--markdown-string: var(--success-color);
92+
--markdown-number: var(--warning-color);
93+
--markdown-function: var(--danger-color);
94+
--markdown-comment: var(--gray-dark);
95+
--markdown-method: var(--cyan-dark);
96+
--markdown-tag: var(--secondary-color);
97+
--markdown-attribute: var(--danger-color);
98+
--markdown-at-rule: var(--indigo-dark);
99+
--markdown-punctuation: var(--black);
100+
--markdown-property: var(--danger-color);
101+
--markdown-value: var(--secondary-color);
102+
--markdown-selector: var(--dark-text);
103+
--markdown-indentation: var(--gray-dark-2);
137104
--markdown-text: var(--markdown-indentation);
138-
139-
--spacing-none: 0;
140-
--spacing-extra-small: 5px;
141-
--spacing-small: 10px;
142-
--spacing-medium: 16px;
143-
--spacing-large: 20px;
144-
145-
--border-radius: 5px;
146105
}

‎zephyrcss/themes/dark-theme.css‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,15 @@
77
--neutral-color: #3C3C3C; /* Neutral dark gray */
88
--secondary-color-light: #3D3D5C; /* Light shade of secondary color */
99

10-
/* Semantic colors */
11-
--info-color: #2196F3; /* Bright blue for info */
12-
--info-background: #0D47A1; /* Dark blue for info background */
13-
--success-color: #4CAF50; /* Bright green */
14-
--success-background: #1B5E20; /* Dark green for success background */
15-
--danger-color: #F44336; /* Bright red */
16-
--danger-background: #B71C1C; /* Dark red for danger background */
17-
--warning-color: #FF9800; /* Bright amber */
18-
--warning-background: #E65100; /* Dark amber for warning background */
10+
/* Semantic Colors */
11+
--info-color: var(--info-color); /* Dodger blue */
12+
--info-background: var(--info-background);/* Alice blue */
13+
--success-color: var(--success-color); /* Lime green */
14+
--success-background: var(--success-background); /* Honeydew */
15+
--danger-color: var(--danger-color); /* Tomato */
16+
--danger-background: var(--danger-background); /* Misty rose */
17+
--warning-color: var(--warning-color); /* Gold */
18+
--warning-background: var(--warning-background); /* Cornsilk */
1919

2020
/* Text colors */
2121
--light-text: var(--white); /* White for text on dark backgrounds */

‎zephyrcss/themes/default.css‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,15 @@
55
--accent-color: #A88FAC;
66
--neutral-color: #D4B2D8;
77

8-
/* Semantic colors */
9-
--info-color: #17a2b8;
10-
--success-color: #2ECC71;
11-
--danger-color: #E74C3C;
12-
--warning-color: #F39C12;
8+
/* Semantic Colors */
9+
--info-color: var(--info-color); /* Dodger blue */
10+
--info-background: var(--info-background);/* Alice blue */
11+
--success-color: var(--success-color); /* Lime green */
12+
--success-background: var(--success-background); /* Honeydew */
13+
--danger-color: var(--danger-color); /* Tomato */
14+
--danger-background: var(--danger-background); /* Misty rose */
15+
--warning-color: var(--warning-color); /* Gold */
16+
--warning-background: var(--warning-background); /* Cornsilk */
1317

1418
/* Typography */
1519
--font-family-sans-serif: "Montserrat", "Helvetica Neue", Arial, sans-serif;

‎zephyrcss/themes/elegant-theme.css‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,15 @@
77
--neutral-color: #BDC3C7; /* Medium gray */
88
--secondary-color-light: #D3DDE6; /* Light gray */
99

10-
/* Semantic colors */
11-
--info-color: #3498DB; /* Bright blue */
12-
--info-background: #E0F7FA; /* Light cyan */
13-
--success-color: #2ECC71; /* Bright green */
14-
--success-background: #E8F5E9; /* Very light green */
15-
--danger-color: #E74C3C; /* Bright red */
16-
--danger-background: #FDEDEC; /* Light red */
17-
--warning-color: #F39C12; /* Bright yellow-orange */
18-
--warning-background: #FEF3E6; /* Light yellow */
10+
/* Semantic Colors */
11+
--info-color: var(--info-color); /* Dodger blue */
12+
--info-background: var(--info-background);/* Alice blue */
13+
--success-color: var(--success-color); /* Lime green */
14+
--success-background: var(--success-background); /* Honeydew */
15+
--danger-color: var(--danger-color); /* Tomato */
16+
--danger-background: var(--danger-background); /* Misty rose */
17+
--warning-color: var(--warning-color); /* Gold */
18+
--warning-background: var(--warning-background); /* Cornsilk */
1919

2020
/* Text colors */
2121
--light-text: #FFFFFF; /* White */

‎zephyrcss/themes/fantasy-theme.css‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,15 @@
77
--neutral-color: #C5B3CD; /* Light lavender */
88
--secondary-color-light: #CFC3E1; /* Light lavender shade */
99

10-
/* Semantic colors */
11-
--info-color: #7B68EE; /* Medium slate blue */
12-
--info-background: #E6E6FA; /* Lavender */
13-
--success-color: #32CD32; /* Lime green */
14-
--success-background: #F0FFF0; /* Honeydew */
15-
--danger-color: #FF69B4; /* Hot pink */
16-
--danger-background: #FFF0F5; /* Lavender blush */
17-
--warning-color: #FFD700; /* Gold */
18-
--warning-background: #FFF8DC; /* Cornsilk */
10+
/* Semantic Colors */
11+
--info-color: var(--info-color); /* Dodger blue */
12+
--info-background: var(--info-background);/* Alice blue */
13+
--success-color: var(--success-color); /* Lime green */
14+
--success-background: var(--success-background); /* Honeydew */
15+
--danger-color: var(--danger-color); /* Tomato */
16+
--danger-background: var(--danger-background); /* Misty rose */
17+
--warning-color: var(--warning-color); /* Gold */
18+
--warning-background: var(--warning-background); /* Cornsilk */
1919

2020
/* Text colors */
2121
--light-text: #F9F2FF; /* Very light lilac */

‎zephyrcss/themes/heaven-theme.css‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,15 @@
77
--neutral-color: #C8E6C9; /* Soft green */
88
--secondary-color-light: #BBDEFB; /* Light blue */
99

10-
/* Semantic colors */
11-
--info-color: #64B5F6; /* Light blue */
12-
--info-background: #E3F2FD; /* Light sky blue */
13-
--success-color: #81C784; /* Light green */
14-
--success-background: #E8F5E9; /* Light green */
15-
--danger-color: #E57373; /* Light red */
16-
--danger-background: #FFEBEE; /* Light red */
17-
--warning-color: #FFD54F; /* Light yellow */
18-
--warning-background: #FFF9C4; /* Light yellow */
10+
/* Semantic Colors */
11+
--info-color: var(--info-color); /* Dodger blue */
12+
--info-background: var(--info-background);/* Alice blue */
13+
--success-color: var(--success-color); /* Lime green */
14+
--success-background: var(--success-background); /* Honeydew */
15+
--danger-color: var(--danger-color); /* Tomato */
16+
--danger-background: var(--danger-background); /* Misty rose */
17+
--warning-color: var(--warning-color); /* Gold */
18+
--warning-background: var(--warning-background); /* Cornsilk */
1919

2020
/* Text colors */
2121
--light-text: #90CAF9; /* White */

‎zephyrcss/themes/hellfire-theme.css‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,15 @@
77
--neutral-color: #808080; /* Medium gray */
88
--secondary-color-light: #8B0000; /* Dark red */
99

10-
/* Semantic colors */
11-
--info-color: #FF6347; /* Tomato */
12-
--info-background: #FFE4E1; /* Light red */
13-
--success-color: #32CD32; /* Lime green */
14-
--success-background: #F0FFF0; /* Honeydew */
15-
--danger-color: #DC143C; /* Crimson */
16-
--danger-background: #FFE4E1; /* Light red */
17-
--warning-color: #FFD700; /* Gold */
18-
--warning-background: #FFF8DC; /* Light yellow */
10+
/* Semantic Colors */
11+
--info-color: var(--info-color); /* Dodger blue */
12+
--info-background: var(--info-background);/* Alice blue */
13+
--success-color: var(--success-color); /* Lime green */
14+
--success-background: var(--success-background); /* Honeydew */
15+
--danger-color: var(--danger-color); /* Tomato */
16+
--danger-background: var(--danger-background); /* Misty rose */
17+
--warning-color: var(--warning-color); /* Gold */
18+
--warning-background: var(--warning-background); /* Cornsilk */
1919

2020
/* Text colors */
2121
--light-text: #FFFFFF; /* White */

0 commit comments

Comments
 (0)