ply-css 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CLAUDE.md +176 -0
- package/LICENSE +22 -0
- package/PLY.md +646 -0
- package/README.md +170 -0
- package/dist/css/ply-core.css +6175 -0
- package/dist/css/ply-core.min.css +1 -0
- package/dist/css/ply-essentials.min.css +1 -0
- package/dist/css/ply-helpers.min.css +1 -0
- package/dist/css/ply.css +7429 -0
- package/dist/css/ply.min.css +1 -0
- package/dist/css/styles.css +7432 -0
- package/dist/css/styles.min.css +1 -0
- package/llms-full.txt +834 -0
- package/llms.txt +34 -0
- package/package.json +70 -0
- package/ply-classes.json +2625 -0
- package/snippets/accessible-drag-and-drop.html +122 -0
- package/snippets/card.html +58 -0
- package/snippets/contact-form.html +49 -0
- package/snippets/custom-theme.html +280 -0
- package/snippets/dashboard.html +77 -0
- package/snippets/data-table.html +64 -0
- package/snippets/login-page.html +45 -0
- package/snippets/navbar-page.html +39 -0
- package/snippets/notifications.html +63 -0
- package/snippets/pricing-cards.html +95 -0
- package/snippets/responsive-header.html +98 -0
- package/snippets/starter-page.html +782 -0
- package/snippets/two-column-layout.html +40 -0
- package/src/scss/_ply-core-components.scss +32 -0
- package/src/scss/_ply.scss +47 -0
- package/src/scss/components/_accordion.scss +73 -0
- package/src/scss/components/_alignments.scss +64 -0
- package/src/scss/components/_autocomplete.scss +28 -0
- package/src/scss/components/_blocks-responsive.scss +30 -0
- package/src/scss/components/_blocks.scss +39 -0
- package/src/scss/components/_buttons.scss +452 -0
- package/src/scss/components/_colors.scss +447 -0
- package/src/scss/components/_container-queries.scss +35 -0
- package/src/scss/components/_cursors.scss +24 -0
- package/src/scss/components/_dialog-patterns.scss +176 -0
- package/src/scss/components/_dropdown.scss +68 -0
- package/src/scss/components/_filterbox.scss +57 -0
- package/src/scss/components/_flexible-embed.scss +19 -0
- package/src/scss/components/_forms.scss +450 -0
- package/src/scss/components/_grid.scss +210 -0
- package/src/scss/components/_helpers-core.scss +357 -0
- package/src/scss/components/_helpers.scss +466 -0
- package/src/scss/components/_labels.scss +105 -0
- package/src/scss/components/_livesearch.scss +233 -0
- package/src/scss/components/_loader.scss +24 -0
- package/src/scss/components/_media-queries.scss +9 -0
- package/src/scss/components/_mixins.scss +387 -0
- package/src/scss/components/_modal.scss +73 -0
- package/src/scss/components/_multi-step-form.scss +190 -0
- package/src/scss/components/_navigation-responsive.scss +63 -0
- package/src/scss/components/_navigation.scss +592 -0
- package/src/scss/components/_notifications.scss +185 -0
- package/src/scss/components/_prettyprint.scss +86 -0
- package/src/scss/components/_print.scss +74 -0
- package/src/scss/components/_progress.scss +32 -0
- package/src/scss/components/_reset.scss +365 -0
- package/src/scss/components/_rtl.scss +213 -0
- package/src/scss/components/_table-interactive.scss +110 -0
- package/src/scss/components/_tables.scss +52 -0
- package/src/scss/components/_themes.scss +6 -0
- package/src/scss/components/_tooltip.scss +35 -0
- package/src/scss/components/_typography.scss +565 -0
- package/src/scss/components/_upload.scss +19 -0
- package/src/scss/components/_variables.scss +129 -0
- package/src/scss/ply-core.scss +1 -0
- package/src/scss/ply-essentials.scss +15 -0
- package/src/scss/ply-helpers.scss +11 -0
- package/src/scss/ply-iso.scss +1 -0
- package/src/scss/styles.scss +9 -0
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Accessible Drag-and-Drop — ply</title>
|
|
7
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ply-css@1/dist/css/ply.min.css">
|
|
8
|
+
<style>
|
|
9
|
+
[role="option"] {
|
|
10
|
+
padding: 0.75rem 1rem;
|
|
11
|
+
border: 2px solid var(--ply-border-color);
|
|
12
|
+
border-radius: 0.375rem;
|
|
13
|
+
margin-bottom: 0.5rem;
|
|
14
|
+
background: var(--ply-bg-surface);
|
|
15
|
+
cursor: default;
|
|
16
|
+
list-style: none;
|
|
17
|
+
}
|
|
18
|
+
[role="option"]:focus-visible {
|
|
19
|
+
outline: 2px solid var(--ply-color-link);
|
|
20
|
+
outline-offset: 2px;
|
|
21
|
+
}
|
|
22
|
+
[aria-grabbed="true"] {
|
|
23
|
+
border-color: var(--ply-color-link);
|
|
24
|
+
background: var(--ply-bg-muted);
|
|
25
|
+
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
|
|
26
|
+
}
|
|
27
|
+
</style>
|
|
28
|
+
</head>
|
|
29
|
+
<body>
|
|
30
|
+
<a href="#main" class="skip-link">Skip to main content</a>
|
|
31
|
+
<main id="main" class="units-container padding-top-extra">
|
|
32
|
+
<h1>Accessible Drag-and-Drop</h1>
|
|
33
|
+
<p class="text-secondary">Reorder items using keyboard or mouse. Keyboard: <kbd>Tab</kbd> to the list, <kbd>Space</kbd> to grab, <kbd>↑</kbd><kbd>↓</kbd> to move, <kbd>Enter</kbd> to drop, <kbd>Escape</kbd> to cancel.</p>
|
|
34
|
+
|
|
35
|
+
<div class="sr-only" aria-live="assertive" id="dnd-status"></div>
|
|
36
|
+
|
|
37
|
+
<ul role="listbox" aria-label="Sortable tasks" id="sortable-list" style="padding: 0;">
|
|
38
|
+
<li role="option" tabindex="0" aria-grabbed="false" data-index="0">Review pull request</li>
|
|
39
|
+
<li role="option" tabindex="-1" aria-grabbed="false" data-index="1">Update documentation</li>
|
|
40
|
+
<li role="option" tabindex="-1" aria-grabbed="false" data-index="2">Fix navigation bug</li>
|
|
41
|
+
<li role="option" tabindex="-1" aria-grabbed="false" data-index="3">Write unit tests</li>
|
|
42
|
+
<li role="option" tabindex="-1" aria-grabbed="false" data-index="4">Deploy to staging</li>
|
|
43
|
+
</ul>
|
|
44
|
+
</main>
|
|
45
|
+
|
|
46
|
+
<script>
|
|
47
|
+
const list = document.getElementById('sortable-list');
|
|
48
|
+
const status = document.getElementById('dnd-status');
|
|
49
|
+
let grabbed = null;
|
|
50
|
+
|
|
51
|
+
function announce(msg) { status.textContent = msg; }
|
|
52
|
+
|
|
53
|
+
function focusItem(item) {
|
|
54
|
+
list.querySelectorAll('[role="option"]').forEach(i => i.tabIndex = -1);
|
|
55
|
+
item.tabIndex = 0;
|
|
56
|
+
item.focus();
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
list.addEventListener('keydown', (e) => {
|
|
60
|
+
const item = e.target;
|
|
61
|
+
if (item.getAttribute('role') !== 'option') return;
|
|
62
|
+
|
|
63
|
+
switch (e.key) {
|
|
64
|
+
case ' ':
|
|
65
|
+
e.preventDefault();
|
|
66
|
+
if (!grabbed) {
|
|
67
|
+
grabbed = item;
|
|
68
|
+
item.setAttribute('aria-grabbed', 'true');
|
|
69
|
+
announce(`Grabbed ${item.textContent}. Use arrow keys to move, Enter to drop, Escape to cancel.`);
|
|
70
|
+
}
|
|
71
|
+
break;
|
|
72
|
+
|
|
73
|
+
case 'ArrowDown':
|
|
74
|
+
e.preventDefault();
|
|
75
|
+
if (grabbed) {
|
|
76
|
+
const next = grabbed.nextElementSibling;
|
|
77
|
+
if (next) {
|
|
78
|
+
list.insertBefore(next, grabbed);
|
|
79
|
+
announce(`Moved ${grabbed.textContent} down to position ${[...list.children].indexOf(grabbed) + 1} of ${list.children.length}.`);
|
|
80
|
+
}
|
|
81
|
+
} else {
|
|
82
|
+
const nextItem = item.nextElementSibling;
|
|
83
|
+
if (nextItem) focusItem(nextItem);
|
|
84
|
+
}
|
|
85
|
+
break;
|
|
86
|
+
|
|
87
|
+
case 'ArrowUp':
|
|
88
|
+
e.preventDefault();
|
|
89
|
+
if (grabbed) {
|
|
90
|
+
const prev = grabbed.previousElementSibling;
|
|
91
|
+
if (prev) {
|
|
92
|
+
list.insertBefore(grabbed, prev);
|
|
93
|
+
announce(`Moved ${grabbed.textContent} up to position ${[...list.children].indexOf(grabbed) + 1} of ${list.children.length}.`);
|
|
94
|
+
}
|
|
95
|
+
} else {
|
|
96
|
+
const prevItem = item.previousElementSibling;
|
|
97
|
+
if (prevItem) focusItem(prevItem);
|
|
98
|
+
}
|
|
99
|
+
break;
|
|
100
|
+
|
|
101
|
+
case 'Enter':
|
|
102
|
+
if (grabbed) {
|
|
103
|
+
e.preventDefault();
|
|
104
|
+
grabbed.setAttribute('aria-grabbed', 'false');
|
|
105
|
+
announce(`Dropped ${grabbed.textContent} at position ${[...list.children].indexOf(grabbed) + 1} of ${list.children.length}.`);
|
|
106
|
+
grabbed = null;
|
|
107
|
+
}
|
|
108
|
+
break;
|
|
109
|
+
|
|
110
|
+
case 'Escape':
|
|
111
|
+
if (grabbed) {
|
|
112
|
+
e.preventDefault();
|
|
113
|
+
grabbed.setAttribute('aria-grabbed', 'false');
|
|
114
|
+
announce('Reorder cancelled.');
|
|
115
|
+
grabbed = null;
|
|
116
|
+
}
|
|
117
|
+
break;
|
|
118
|
+
}
|
|
119
|
+
});
|
|
120
|
+
</script>
|
|
121
|
+
</body>
|
|
122
|
+
</html>
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Cards - Ply</title>
|
|
7
|
+
<link rel="stylesheet" href="../dist/css/ply.min.css">
|
|
8
|
+
<style>
|
|
9
|
+
.card {
|
|
10
|
+
border: 1px solid var(--ply-border-color, #e0e0e0);
|
|
11
|
+
border-radius: 4px;
|
|
12
|
+
padding: 1.5rem;
|
|
13
|
+
}
|
|
14
|
+
.card h3 {
|
|
15
|
+
margin-top: 0;
|
|
16
|
+
}
|
|
17
|
+
</style>
|
|
18
|
+
</head>
|
|
19
|
+
<body>
|
|
20
|
+
<div class="units-container">
|
|
21
|
+
<h1>Cards</h1>
|
|
22
|
+
<div class="units-row">
|
|
23
|
+
<div class="unit-33 tablet-unit-100">
|
|
24
|
+
<article class="card" aria-labelledby="card-1-title">
|
|
25
|
+
<h3 id="card-1-title">Design</h3>
|
|
26
|
+
<p>
|
|
27
|
+
Clean, Swiss-modernist aesthetics with purposeful whitespace and
|
|
28
|
+
strong typographic hierarchy.
|
|
29
|
+
</p>
|
|
30
|
+
<a href="#design" class="btn btn-blue" role="button">Learn More</a>
|
|
31
|
+
</article>
|
|
32
|
+
</div>
|
|
33
|
+
|
|
34
|
+
<div class="unit-33 tablet-unit-100">
|
|
35
|
+
<article class="card" aria-labelledby="card-2-title">
|
|
36
|
+
<h3 id="card-2-title">Development</h3>
|
|
37
|
+
<p>
|
|
38
|
+
A lightweight flexbox grid, responsive utilities, and zero
|
|
39
|
+
JavaScript dependencies for fast builds.
|
|
40
|
+
</p>
|
|
41
|
+
<a href="#development" class="btn btn-blue" role="button">Learn More</a>
|
|
42
|
+
</article>
|
|
43
|
+
</div>
|
|
44
|
+
|
|
45
|
+
<div class="unit-33 tablet-unit-100">
|
|
46
|
+
<article class="card" aria-labelledby="card-3-title">
|
|
47
|
+
<h3 id="card-3-title">Deployment</h3>
|
|
48
|
+
<p>
|
|
49
|
+
Available via CDN or npm. Drop it into any project and start
|
|
50
|
+
building responsive layouts immediately.
|
|
51
|
+
</p>
|
|
52
|
+
<a href="#deployment" class="btn btn-blue" role="button">Learn More</a>
|
|
53
|
+
</article>
|
|
54
|
+
</div>
|
|
55
|
+
</div>
|
|
56
|
+
</div>
|
|
57
|
+
</body>
|
|
58
|
+
</html>
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Contact Form - Ply</title>
|
|
7
|
+
<link rel="stylesheet" href="../dist/css/ply.min.css">
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<div class="units-container">
|
|
11
|
+
<div class="units-row">
|
|
12
|
+
<div class="unit-50 tablet-unit-100 unit-centered">
|
|
13
|
+
<h1>Contact Us</h1>
|
|
14
|
+
<form class="form" action="#" method="post" aria-label="Contact form">
|
|
15
|
+
<fieldset>
|
|
16
|
+
<label for="contact-name">
|
|
17
|
+
Name
|
|
18
|
+
<input type="text" id="contact-name" name="name" placeholder="Your full name" required aria-required="true">
|
|
19
|
+
</label>
|
|
20
|
+
|
|
21
|
+
<label for="contact-email">
|
|
22
|
+
Email
|
|
23
|
+
<input type="email" id="contact-email" name="email" placeholder="you@example.com" required aria-required="true">
|
|
24
|
+
</label>
|
|
25
|
+
|
|
26
|
+
<label for="contact-subject">
|
|
27
|
+
Subject
|
|
28
|
+
<select id="contact-subject" name="subject" required aria-required="true">
|
|
29
|
+
<option value="" disabled selected>Select a subject</option>
|
|
30
|
+
<option value="general">General Inquiry</option>
|
|
31
|
+
<option value="support">Support</option>
|
|
32
|
+
<option value="feedback">Feedback</option>
|
|
33
|
+
<option value="other">Other</option>
|
|
34
|
+
</select>
|
|
35
|
+
</label>
|
|
36
|
+
|
|
37
|
+
<label for="contact-message">
|
|
38
|
+
Message
|
|
39
|
+
<textarea id="contact-message" name="message" rows="5" placeholder="How can we help?" required aria-required="true"></textarea>
|
|
40
|
+
</label>
|
|
41
|
+
|
|
42
|
+
<button type="submit" class="btn btn-blue">Send Message</button>
|
|
43
|
+
</fieldset>
|
|
44
|
+
</form>
|
|
45
|
+
</div>
|
|
46
|
+
</div>
|
|
47
|
+
</div>
|
|
48
|
+
</body>
|
|
49
|
+
</html>
|
|
@@ -0,0 +1,280 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en" data-theme="midnight">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>ply — Custom Theme Example</title>
|
|
7
|
+
<link rel="stylesheet" href="../dist/css/ply.min.css">
|
|
8
|
+
<style>
|
|
9
|
+
/*
|
|
10
|
+
Custom Theme: Midnight
|
|
11
|
+
Override --ply-* custom properties on [data-theme="your-name"].
|
|
12
|
+
Set data-theme on <html> to activate.
|
|
13
|
+
|
|
14
|
+
Auto dark mode only fires when no data-theme is set,
|
|
15
|
+
so custom themes won't have dark styles applied over them.
|
|
16
|
+
|
|
17
|
+
You only need to override the tokens you want to change.
|
|
18
|
+
Everything else falls back to the light theme defaults.
|
|
19
|
+
For a dark theme, override all tokens to avoid light fallbacks.
|
|
20
|
+
|
|
21
|
+
Typography is also themeable:
|
|
22
|
+
--ply-font-body, --ply-font-heading, --ply-font-mono
|
|
23
|
+
*/
|
|
24
|
+
[data-theme="midnight"] {
|
|
25
|
+
/* Background */
|
|
26
|
+
--ply-bg-body: #0f172a;
|
|
27
|
+
--ply-bg-surface: #1e293b;
|
|
28
|
+
--ply-bg-surface-alt: #1e293b;
|
|
29
|
+
--ply-bg-muted: #334155;
|
|
30
|
+
|
|
31
|
+
/* Text */
|
|
32
|
+
--ply-color-body: #e2e8f0;
|
|
33
|
+
--ply-color-headings: #f1f5f9;
|
|
34
|
+
--ply-color-secondary: #94a3b8;
|
|
35
|
+
--ply-color-muted: #64748b;
|
|
36
|
+
--ply-color-placeholder: #475569;
|
|
37
|
+
--ply-color-text-inverse: #0f172a;
|
|
38
|
+
|
|
39
|
+
/* Borders */
|
|
40
|
+
--ply-border-color: #334155;
|
|
41
|
+
--ply-border-strong: #475569;
|
|
42
|
+
|
|
43
|
+
/* Interactive */
|
|
44
|
+
--ply-color-link: #60a5fa;
|
|
45
|
+
--ply-color-link-hover: #93c5fd;
|
|
46
|
+
--ply-color-focus: #3b82f6;
|
|
47
|
+
|
|
48
|
+
/* Fields */
|
|
49
|
+
--ply-color-field-bg: #1e293b;
|
|
50
|
+
--ply-color-input-border: #475569;
|
|
51
|
+
--ply-color-input-bg: #1e293b;
|
|
52
|
+
|
|
53
|
+
/* Code */
|
|
54
|
+
--ply-color-code-bg: #1e293b;
|
|
55
|
+
--ply-color-code-border: #334155;
|
|
56
|
+
|
|
57
|
+
/* Tables */
|
|
58
|
+
--ply-color-table-border: #334155;
|
|
59
|
+
--ply-color-table-stripped: #162032;
|
|
60
|
+
--ply-color-table-hovered: #253349;
|
|
61
|
+
|
|
62
|
+
/* Buttons */
|
|
63
|
+
--ply-btn-default-bg: #3b82f6;
|
|
64
|
+
--ply-btn-default-hover: #2563eb;
|
|
65
|
+
|
|
66
|
+
/* Navigation */
|
|
67
|
+
--ply-nav-bg: #0f172a;
|
|
68
|
+
--ply-nav-color: #e2e8f0;
|
|
69
|
+
--ply-nav-border: #e2e8f0;
|
|
70
|
+
--ply-nav-hover: #253349;
|
|
71
|
+
--ply-nav-active-color: #64748b;
|
|
72
|
+
|
|
73
|
+
/* Layers / Elevation */
|
|
74
|
+
--ply-layer-0: #0f172a;
|
|
75
|
+
--ply-layer-1: #1e293b;
|
|
76
|
+
--ply-layer-2: #334155;
|
|
77
|
+
--ply-layer-3: #475569;
|
|
78
|
+
--ply-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.3);
|
|
79
|
+
--ply-shadow-2: 0 2px 8px rgba(0, 0, 0, 0.4);
|
|
80
|
+
--ply-shadow-3: 0 4px 24px rgba(0, 0, 0, 0.5);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
/*
|
|
84
|
+
Custom Theme: Warm
|
|
85
|
+
A light theme with cream/earthy tones.
|
|
86
|
+
*/
|
|
87
|
+
[data-theme="warm"] {
|
|
88
|
+
/* Background */
|
|
89
|
+
--ply-bg-body: #faf8f5;
|
|
90
|
+
--ply-bg-surface: #ffffff;
|
|
91
|
+
--ply-bg-surface-alt: #f5f0ea;
|
|
92
|
+
--ply-bg-muted: #e8e0d6;
|
|
93
|
+
|
|
94
|
+
/* Text */
|
|
95
|
+
--ply-color-body: #292524;
|
|
96
|
+
--ply-color-headings: #1c1917;
|
|
97
|
+
--ply-color-secondary: #57534e;
|
|
98
|
+
--ply-color-muted: #78716c;
|
|
99
|
+
--ply-color-placeholder: #a8a29e;
|
|
100
|
+
--ply-color-text-inverse: #fafaf9;
|
|
101
|
+
|
|
102
|
+
/* Borders */
|
|
103
|
+
--ply-border-color: #d6d3d1;
|
|
104
|
+
--ply-border-strong: #a8a29e;
|
|
105
|
+
|
|
106
|
+
/* Interactive */
|
|
107
|
+
--ply-color-link: #b45309;
|
|
108
|
+
--ply-color-link-hover: #92400e;
|
|
109
|
+
--ply-color-focus: #d97706;
|
|
110
|
+
|
|
111
|
+
/* Fields */
|
|
112
|
+
--ply-color-field-bg: #f5f0ea;
|
|
113
|
+
--ply-color-input-border: #a8a29e;
|
|
114
|
+
--ply-color-input-bg: #faf8f5;
|
|
115
|
+
|
|
116
|
+
/* Code */
|
|
117
|
+
--ply-color-code-bg: #f5f0ea;
|
|
118
|
+
--ply-color-code-border: #d6d3d1;
|
|
119
|
+
|
|
120
|
+
/* Tables */
|
|
121
|
+
--ply-color-table-border: #d6d3d1;
|
|
122
|
+
--ply-color-table-stripped: #faf8f5;
|
|
123
|
+
--ply-color-table-hovered: #f0ebe4;
|
|
124
|
+
|
|
125
|
+
/* Buttons */
|
|
126
|
+
--ply-btn-default-bg: #292524;
|
|
127
|
+
--ply-btn-default-hover: #44403c;
|
|
128
|
+
|
|
129
|
+
/* Navigation */
|
|
130
|
+
--ply-nav-bg: #faf8f5;
|
|
131
|
+
--ply-nav-color: #292524;
|
|
132
|
+
--ply-nav-border: #292524;
|
|
133
|
+
--ply-nav-hover: #f0ebe4;
|
|
134
|
+
--ply-nav-active-color: #78716c;
|
|
135
|
+
|
|
136
|
+
/* Layers / Elevation */
|
|
137
|
+
--ply-layer-0: #faf8f5;
|
|
138
|
+
--ply-layer-1: #f5f0ea;
|
|
139
|
+
--ply-layer-2: #e8e0d6;
|
|
140
|
+
--ply-layer-3: #d6d3d1;
|
|
141
|
+
--ply-shadow-1: 0 1px 3px rgba(41, 37, 36, 0.06);
|
|
142
|
+
--ply-shadow-2: 0 2px 8px rgba(41, 37, 36, 0.08);
|
|
143
|
+
--ply-shadow-3: 0 4px 24px rgba(41, 37, 36, 0.1);
|
|
144
|
+
}
|
|
145
|
+
</style>
|
|
146
|
+
</head>
|
|
147
|
+
<body>
|
|
148
|
+
<a href="#main" class="skip-link">Skip to main content</a>
|
|
149
|
+
|
|
150
|
+
<nav class="navbar">
|
|
151
|
+
<ul>
|
|
152
|
+
<li class="active"><a href="#">ply — Custom Theme</a></li>
|
|
153
|
+
<li style="margin-left: auto;">
|
|
154
|
+
<select
|
|
155
|
+
class="select-outlined"
|
|
156
|
+
aria-label="Choose theme"
|
|
157
|
+
style="font-size:0.85rem; padding:0.35rem 2rem 0.35rem 0.5rem;"
|
|
158
|
+
onchange="document.documentElement.setAttribute('data-theme', this.value)"
|
|
159
|
+
>
|
|
160
|
+
<option value="light">Light (default)</option>
|
|
161
|
+
<option value="dark">Dark (built-in)</option>
|
|
162
|
+
<option value="midnight" selected>Midnight (custom)</option>
|
|
163
|
+
<option value="warm">Warm (custom)</option>
|
|
164
|
+
</select>
|
|
165
|
+
</li>
|
|
166
|
+
</ul>
|
|
167
|
+
</nav>
|
|
168
|
+
|
|
169
|
+
<div class="units-container">
|
|
170
|
+
<main id="main">
|
|
171
|
+
<h1>Custom Theming</h1>
|
|
172
|
+
<p>ply's theming system is CSS custom properties. Override <code>--ply-*</code> tokens in a <code>[data-theme="your-name"]</code> block, then set that attribute on <code><html></code>. No Sass, no build step, no JavaScript framework.</p>
|
|
173
|
+
|
|
174
|
+
<h2>How it works</h2>
|
|
175
|
+
<pre><code><!-- 1. Define your theme in CSS -->
|
|
176
|
+
<style>
|
|
177
|
+
[data-theme="brand"] {
|
|
178
|
+
--ply-bg-body: #fefce8;
|
|
179
|
+
--ply-color-body: #1a1a1a;
|
|
180
|
+
--ply-color-link: #b45309;
|
|
181
|
+
/* ... override as many tokens as you need */
|
|
182
|
+
}
|
|
183
|
+
</style>
|
|
184
|
+
|
|
185
|
+
<!-- 2. Activate it -->
|
|
186
|
+
<html data-theme="brand">
|
|
187
|
+
|
|
188
|
+
<!-- 3. Or switch at runtime -->
|
|
189
|
+
<script>
|
|
190
|
+
document.documentElement.setAttribute('data-theme', 'brand');
|
|
191
|
+
</script></code></pre>
|
|
192
|
+
|
|
193
|
+
<h2>Components adapt automatically</h2>
|
|
194
|
+
<div class="units-row">
|
|
195
|
+
<div class="unit-50 tablet-unit-100">
|
|
196
|
+
<div class="alert alert-blue">
|
|
197
|
+
<span class="alert-content">Info alert — adapts to your theme colors.</span>
|
|
198
|
+
</div>
|
|
199
|
+
<div class="alert alert-green">
|
|
200
|
+
<span class="alert-content">Success alert.</span>
|
|
201
|
+
</div>
|
|
202
|
+
<div class="alert alert-ghost alert-red">
|
|
203
|
+
<span class="alert-content">Ghost alert — transparent background.</span>
|
|
204
|
+
</div>
|
|
205
|
+
</div>
|
|
206
|
+
<div class="unit-50 tablet-unit-100">
|
|
207
|
+
<button class="btn">Default</button>
|
|
208
|
+
<button class="btn btn-blue">Blue</button>
|
|
209
|
+
<button class="btn btn-outline">Outline</button>
|
|
210
|
+
<div class="margin-top">
|
|
211
|
+
<form class="form" onsubmit="return false;">
|
|
212
|
+
<label>
|
|
213
|
+
Text input
|
|
214
|
+
<input type="text" placeholder="Themed input...">
|
|
215
|
+
</label>
|
|
216
|
+
</form>
|
|
217
|
+
</div>
|
|
218
|
+
</div>
|
|
219
|
+
</div>
|
|
220
|
+
|
|
221
|
+
<h2>Elevation adapts too</h2>
|
|
222
|
+
<div class="units-row">
|
|
223
|
+
<div class="unit-25 tablet-unit-50 phone-unit-100">
|
|
224
|
+
<div class="layer-0 padding border-radius margin-bottom">
|
|
225
|
+
<strong>Layer 0</strong>
|
|
226
|
+
</div>
|
|
227
|
+
</div>
|
|
228
|
+
<div class="unit-25 tablet-unit-50 phone-unit-100">
|
|
229
|
+
<div class="layer-1 padding border-radius margin-bottom">
|
|
230
|
+
<strong>Layer 1</strong>
|
|
231
|
+
</div>
|
|
232
|
+
</div>
|
|
233
|
+
<div class="unit-25 tablet-unit-50 phone-unit-100">
|
|
234
|
+
<div class="layer-2 padding border-radius margin-bottom">
|
|
235
|
+
<strong>Layer 2</strong>
|
|
236
|
+
</div>
|
|
237
|
+
</div>
|
|
238
|
+
<div class="unit-25 tablet-unit-50 phone-unit-100">
|
|
239
|
+
<div class="layer-3 padding border-radius margin-bottom">
|
|
240
|
+
<strong>Layer 3</strong>
|
|
241
|
+
</div>
|
|
242
|
+
</div>
|
|
243
|
+
</div>
|
|
244
|
+
|
|
245
|
+
<h2>Available tokens</h2>
|
|
246
|
+
<table class="table-stripped">
|
|
247
|
+
<thead>
|
|
248
|
+
<tr><th>Token</th><th>Purpose</th></tr>
|
|
249
|
+
</thead>
|
|
250
|
+
<tbody>
|
|
251
|
+
<tr><td><code>--ply-bg-body</code></td><td>Page background</td></tr>
|
|
252
|
+
<tr><td><code>--ply-bg-surface</code></td><td>Card/panel background</td></tr>
|
|
253
|
+
<tr><td><code>--ply-bg-surface-alt</code></td><td>Alternating surface</td></tr>
|
|
254
|
+
<tr><td><code>--ply-bg-muted</code></td><td>Muted/disabled background</td></tr>
|
|
255
|
+
<tr><td><code>--ply-color-body</code></td><td>Primary text</td></tr>
|
|
256
|
+
<tr><td><code>--ply-color-headings</code></td><td>Heading text</td></tr>
|
|
257
|
+
<tr><td><code>--ply-color-secondary</code></td><td>Secondary text</td></tr>
|
|
258
|
+
<tr><td><code>--ply-color-muted</code></td><td>Muted/placeholder text</td></tr>
|
|
259
|
+
<tr><td><code>--ply-color-text-inverse</code></td><td>Text on dark buttons</td></tr>
|
|
260
|
+
<tr><td><code>--ply-border-color</code></td><td>Default borders</td></tr>
|
|
261
|
+
<tr><td><code>--ply-border-strong</code></td><td>Prominent borders</td></tr>
|
|
262
|
+
<tr><td><code>--ply-color-link</code></td><td>Link color</td></tr>
|
|
263
|
+
<tr><td><code>--ply-color-link-hover</code></td><td>Link hover</td></tr>
|
|
264
|
+
<tr><td><code>--ply-color-focus</code></td><td>Focus ring</td></tr>
|
|
265
|
+
<tr><td><code>--ply-color-input-bg</code></td><td>Input background</td></tr>
|
|
266
|
+
<tr><td><code>--ply-color-input-border</code></td><td>Input border</td></tr>
|
|
267
|
+
<tr><td><code>--ply-btn-default-bg</code></td><td>Default button background</td></tr>
|
|
268
|
+
<tr><td><code>--ply-btn-default-hover</code></td><td>Default button hover</td></tr>
|
|
269
|
+
<tr><td><code>--ply-nav-bg</code></td><td>Navigation background</td></tr>
|
|
270
|
+
<tr><td><code>--ply-nav-color</code></td><td>Navigation text</td></tr>
|
|
271
|
+
<tr><td><code>--ply-layer-0</code> to <code>--ply-layer-3</code></td><td>Elevation backgrounds</td></tr>
|
|
272
|
+
<tr><td><code>--ply-shadow-1</code> to <code>--ply-shadow-3</code></td><td>Elevation shadows</td></tr>
|
|
273
|
+
</tbody>
|
|
274
|
+
</table>
|
|
275
|
+
|
|
276
|
+
</main>
|
|
277
|
+
</div>
|
|
278
|
+
|
|
279
|
+
</body>
|
|
280
|
+
</html>
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Dashboard - Ply</title>
|
|
7
|
+
<link rel="stylesheet" href="../dist/css/ply.min.css">
|
|
8
|
+
<style>
|
|
9
|
+
.stat-card {
|
|
10
|
+
border: 1px solid var(--ply-border-color, #e0e0e0);
|
|
11
|
+
border-radius: 4px;
|
|
12
|
+
padding: 1.5rem;
|
|
13
|
+
text-align: center;
|
|
14
|
+
}
|
|
15
|
+
.stat-card .stat-value {
|
|
16
|
+
font-size: 2rem;
|
|
17
|
+
font-weight: 700;
|
|
18
|
+
line-height: 1.2;
|
|
19
|
+
}
|
|
20
|
+
.stat-card .stat-label {
|
|
21
|
+
font-size: 0.875rem;
|
|
22
|
+
color: var(--ply-color-muted, #6f6f6f);
|
|
23
|
+
}
|
|
24
|
+
</style>
|
|
25
|
+
</head>
|
|
26
|
+
<body>
|
|
27
|
+
<a href="#main" class="skip-link">Skip to main content</a>
|
|
28
|
+
<nav class="navbar" aria-label="Main navigation">
|
|
29
|
+
<ul role="menubar">
|
|
30
|
+
<li class="active" role="none"><a href="#dashboard" role="menuitem" aria-current="page">Dashboard</a></li>
|
|
31
|
+
<li role="none"><a href="#analytics" role="menuitem">Analytics</a></li>
|
|
32
|
+
<li role="none"><a href="#users" role="menuitem">Users</a></li>
|
|
33
|
+
<li role="none"><a href="#settings" role="menuitem">Settings</a></li>
|
|
34
|
+
</ul>
|
|
35
|
+
</nav>
|
|
36
|
+
|
|
37
|
+
<div class="units-container">
|
|
38
|
+
<div class="units-row">
|
|
39
|
+
<aside class="unit-20 tablet-unit-100" aria-label="Dashboard sidebar">
|
|
40
|
+
<nav class="nav-stacked" aria-label="Sidebar navigation">
|
|
41
|
+
<ul>
|
|
42
|
+
<li class="active"><a href="#overview">Overview</a></li>
|
|
43
|
+
<li><a href="#revenue">Revenue</a></li>
|
|
44
|
+
<li><a href="#customers">Customers</a></li>
|
|
45
|
+
<li><a href="#products">Products</a></li>
|
|
46
|
+
<li><a href="#reports">Reports</a></li>
|
|
47
|
+
</ul>
|
|
48
|
+
</nav>
|
|
49
|
+
</aside>
|
|
50
|
+
|
|
51
|
+
<main id="main" class="unit-80 tablet-unit-100">
|
|
52
|
+
<h1>Overview</h1>
|
|
53
|
+
<div class="units-row">
|
|
54
|
+
<div class="unit-33 tablet-unit-100">
|
|
55
|
+
<article class="stat-card" aria-label="Total users statistic">
|
|
56
|
+
<div class="stat-value">12,842</div>
|
|
57
|
+
<div class="stat-label">Total Users</div>
|
|
58
|
+
</article>
|
|
59
|
+
</div>
|
|
60
|
+
<div class="unit-33 tablet-unit-100">
|
|
61
|
+
<article class="stat-card" aria-label="Revenue statistic">
|
|
62
|
+
<div class="stat-value">$48,390</div>
|
|
63
|
+
<div class="stat-label">Revenue (MTD)</div>
|
|
64
|
+
</article>
|
|
65
|
+
</div>
|
|
66
|
+
<div class="unit-33 tablet-unit-100">
|
|
67
|
+
<article class="stat-card" aria-label="Conversion rate statistic">
|
|
68
|
+
<div class="stat-value">3.24%</div>
|
|
69
|
+
<div class="stat-label">Conversion Rate</div>
|
|
70
|
+
</article>
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
73
|
+
</main>
|
|
74
|
+
</div>
|
|
75
|
+
</div>
|
|
76
|
+
</body>
|
|
77
|
+
</html>
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Data Table - Ply</title>
|
|
7
|
+
<link rel="stylesheet" href="../dist/css/ply.min.css">
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<div class="units-container">
|
|
11
|
+
<h1>Project Data</h1>
|
|
12
|
+
<div class="table-container" role="region" aria-label="Project data table" tabindex="0">
|
|
13
|
+
<table class="table-stroked table-hovered" aria-label="Projects">
|
|
14
|
+
<thead>
|
|
15
|
+
<tr>
|
|
16
|
+
<th scope="col">ID</th>
|
|
17
|
+
<th scope="col">Project</th>
|
|
18
|
+
<th scope="col">Status</th>
|
|
19
|
+
<th scope="col">Lead</th>
|
|
20
|
+
<th scope="col">Due Date</th>
|
|
21
|
+
</tr>
|
|
22
|
+
</thead>
|
|
23
|
+
<tbody>
|
|
24
|
+
<tr>
|
|
25
|
+
<td>001</td>
|
|
26
|
+
<td>Website Redesign</td>
|
|
27
|
+
<td>In Progress</td>
|
|
28
|
+
<td>Alice Martin</td>
|
|
29
|
+
<td>2026-04-15</td>
|
|
30
|
+
</tr>
|
|
31
|
+
<tr>
|
|
32
|
+
<td>002</td>
|
|
33
|
+
<td>Mobile App v2</td>
|
|
34
|
+
<td>Planning</td>
|
|
35
|
+
<td>Brian Cho</td>
|
|
36
|
+
<td>2026-06-01</td>
|
|
37
|
+
</tr>
|
|
38
|
+
<tr>
|
|
39
|
+
<td>003</td>
|
|
40
|
+
<td>API Migration</td>
|
|
41
|
+
<td>Complete</td>
|
|
42
|
+
<td>Carla Reyes</td>
|
|
43
|
+
<td>2026-03-01</td>
|
|
44
|
+
</tr>
|
|
45
|
+
<tr>
|
|
46
|
+
<td>004</td>
|
|
47
|
+
<td>Design System</td>
|
|
48
|
+
<td>In Progress</td>
|
|
49
|
+
<td>David Okonkwo</td>
|
|
50
|
+
<td>2026-05-20</td>
|
|
51
|
+
</tr>
|
|
52
|
+
<tr>
|
|
53
|
+
<td>005</td>
|
|
54
|
+
<td>Analytics Dashboard</td>
|
|
55
|
+
<td>Review</td>
|
|
56
|
+
<td>Elena Vasquez</td>
|
|
57
|
+
<td>2026-04-30</td>
|
|
58
|
+
</tr>
|
|
59
|
+
</tbody>
|
|
60
|
+
</table>
|
|
61
|
+
</div>
|
|
62
|
+
</div>
|
|
63
|
+
</body>
|
|
64
|
+
</html>
|