enhanced the tooltip to have a width of max-content and a max width of 250px. This will allow for the tooltips to not always be 250px wide even when the tooltip is short.

Added the ghost buttons from discussion #29
2025-04-24 10:26:13 -04:00 · 2025-01-13 21:02:05 -05:00 · 2025-01-13 21:02:05 -05:00 · eb1304a8e4
commit eb1304a8e4
parent f8fbce367b
262 changed files with 2039 additions and 646 deletions
--- a/docs/index.html
+++ b/docs/index.html
@ -106,7 +106,7 @@
 					<div class="grid" style="justify-items: center;">
 						<!--
 							For the light / dark mode switch toggle, you need the following:
-							V. 2.2.3 (will be released soon) - you can see the changed in the scss/forms/checkbox-radio-switch.scss
+							V. 2.2.3 or newer - you can see the changed in the scss/forms/checkbox-radio-switch.scss
 							<input name="color-mode-toggle" type="checkbox" role="switch">
 							That name="color-mode-toggle" is important
 							And then you'll need the js located at: js/SwitchColorMode.js
@ -197,6 +197,7 @@
 								<li><a href="#tabs">Tabs [role=tablist]</a></li>
 								<li><a href="#hamburger-menu">Hamburger Menu</a></li>
 								<li><a href="#tooltip">Tooltip</a></li>
+								<li><a href="#ghost-btn">Ghost Buttons</a></li>
 								<li><a href="#floating-labels">Floating Labels [role=form]</a></li>
 								<li><a href="#validation">Validation</a></li>
 								<li><a href="#group">Group</a></li>
@ -222,7 +223,7 @@
 			<main class="col-12 col-md-9 col-lg-10">
 				<article>
 					<header>
-						<h2>Yohns PicoCSS Fork v2.2.3</h2>
+						<h2>Yohns PicoCSS Fork v2.2.4</h2>
 						<p class="mb-0">Not in npm yet, but will be soon.</p>
 					</header>
 					<p>I've merged some open pull requests from the <a href="https://github.com/picocss/pico">original Pico</a>
@ -529,9 +530,35 @@
 						so that is why this example has the input field with the tooltip on the <code
 							data-tooltip="I do not think there is a way to set the width on the tool tip and have it auto break? Lets see..">&lt;label&gt;</code>
 						wrapper.</p>
+					<p>We also want the <span data-tooltip="short">tooltip width</span> to not be huge when the tooltip is short.</p>
 				</article>
 				<!-- /Tooltip -->
 				<hr>
+				<article id="ghost-btn">
+					<header>
+						<h2>Ghost Buttons</h2>
+					</header>
+					<p>Ghost buttons are buttons that have a transparent background and border.
+						They are often used as secondary buttons to indicate a less important action.</p>
+					<p>Ghost buttons are created by adding the <code>.ghost</code> class to a button</p>
+					<p><code>.ghost</code> will work on all <code>&lt;button&gt;</code>, <code>[type="button"]</code>, <code>[type="submit"]</code>, <code>[type="reset"]</code>, and <code>[role="button"]</code> elements.</p>
+					<div class="grid">
+						<button type="button" class="ghost">Ghost Button</button>
+						<button type="button" class="ghost secondary">Secondary Ghost Button</button>
+						<button type="button" class="ghost contrast">Contrast Ghost Button</button>
+					</div>
+
+					<hr>
+					<details>
+						<summary>Show the code:</summary>
+						<div>
+							<pre><code class="language-html">&lt;button type="button" class="ghost"&gt;Ghost Button&lt;/button&gt;
+&lt;button type="button" class="ghost secondary"&gt;Secondary Ghost Button&lt;/button&gt;
+&lt;button type="button" class="ghost contrast"&gt;Contrast Ghost Button&lt;/button&gt;</code></pre>
+						</div>
+					</details>
+				</article>
+				<hr>
 				<!-- Floating Labels -->
 				<article id="floating-labels">
 					<header>
@ -1498,7 +1525,7 @@
 			function changeTheme(newTheme) {
 				const linkElement = document.getElementById('theme-color-ss');
 				if (linkElement) {
-					linkElement.setAttribute('href', 'https://cdn.jsdelivr.net/gh/Yohn/PicoCSS@2.2.3/css/pico.' + newTheme + '.min.css');
+					linkElement.setAttribute('href', 'https://cdn.jsdelivr.net/gh/Yohn/PicoCSS@2.2.4/css/pico.' + newTheme + '.min.css');
 				}
 			}

--- a/docs/pico.colors.min.css
+++ b/docs/pico.colors.min.css
--- a/docs/pico.css
+++ b/docs/pico.css
@ -1,6 +1,6 @@
@charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.2.3 (https://github.com/Yohn/PicoCSS)
+ * Pico CSS ✨ v2.2.4 (https://github.com/Yohn/PicoCSS)
 * Copyright 2019-2025 - Licensed under MIT
 */
 /**
@ -232,18 +232,18 @@ nav details.dropdown summary:focus-visible {
  color-scheme: light;
  --pico-background-color: #fff;
  --pico-color: #373c44;
-  --pico-text-selection-color: rgba(116, 139, 248, 0.25);
+  --pico-text-selection-color: rgba(71, 164, 23, 0.25);
  --pico-muted-color: #646b79;
  --pico-muted-border-color: rgb(231, 234, 239.5);
-  --pico-primary: #2060df;
-  --pico-primary-background: #2060df;
+  --pico-primary: #33790f;
+  --pico-primary-background: #398712;
  --pico-primary-border: var(--pico-primary-background);
-  --pico-primary-underline: rgba(32, 96, 223, 0.5);
-  --pico-primary-hover: #184eb8;
-  --pico-primary-hover-background: #1d59d0;
+  --pico-primary-underline: rgba(51, 121, 15, 0.5);
+  --pico-primary-hover: #265e09;
+  --pico-primary-hover-background: #33790f;
  --pico-primary-hover-border: var(--pico-primary-hover-background);
  --pico-primary-hover-underline: var(--pico-primary-hover);
-  --pico-primary-focus: rgba(116, 139, 248, 0.5);
+  --pico-primary-focus: rgba(71, 164, 23, 0.5);
  --pico-primary-inverse: #fff;
  --pico-secondary: #5d6b89;
  --pico-secondary-background: #525f7a;
@ -387,18 +387,18 @@ nav details.dropdown summary:focus-visible {
    color-scheme: dark;
    --pico-background-color: rgb(19, 22.5, 30.5);
    --pico-color: #c2c7d0;
-    --pico-text-selection-color: rgba(137, 153, 249, 0.1875);
+    --pico-text-selection-color: rgba(78, 179, 27, 0.1875);
    --pico-muted-color: #7b8495;
    --pico-muted-border-color: #202632;
-    --pico-primary: #8999f9;
-    --pico-primary-background: #2060df;
+    --pico-primary: #4eb31b;
+    --pico-primary-background: #398712;
    --pico-primary-border: var(--pico-primary-background);
-    --pico-primary-underline: rgba(137, 153, 249, 0.5);
-    --pico-primary-hover: #aeb5fb;
-    --pico-primary-hover-background: #3c71f7;
+    --pico-primary-underline: rgba(78, 179, 27, 0.5);
+    --pico-primary-hover: #5dd121;
+    --pico-primary-hover-background: #409614;
    --pico-primary-hover-border: var(--pico-primary-hover-background);
    --pico-primary-hover-underline: var(--pico-primary-hover);
-    --pico-primary-focus: rgba(137, 153, 249, 0.375);
+    --pico-primary-focus: rgba(78, 179, 27, 0.375);
    --pico-primary-inverse: #fff;
    --pico-secondary: #969eaf;
    --pico-secondary-background: #525f7a;
@ -542,18 +542,18 @@ nav details.dropdown summary:focus-visible {
  color-scheme: dark;
  --pico-background-color: rgb(19, 22.5, 30.5);
  --pico-color: #c2c7d0;
-  --pico-text-selection-color: rgba(137, 153, 249, 0.1875);
+  --pico-text-selection-color: rgba(78, 179, 27, 0.1875);
  --pico-muted-color: #7b8495;
  --pico-muted-border-color: #202632;
-  --pico-primary: #8999f9;
-  --pico-primary-background: #2060df;
+  --pico-primary: #4eb31b;
+  --pico-primary-background: #398712;
  --pico-primary-border: var(--pico-primary-background);
-  --pico-primary-underline: rgba(137, 153, 249, 0.5);
-  --pico-primary-hover: #aeb5fb;
-  --pico-primary-hover-background: #3c71f7;
+  --pico-primary-underline: rgba(78, 179, 27, 0.5);
+  --pico-primary-hover: #5dd121;
+  --pico-primary-hover-background: #409614;
  --pico-primary-hover-border: var(--pico-primary-hover-background);
  --pico-primary-hover-underline: var(--pico-primary-hover);
-  --pico-primary-focus: rgba(137, 153, 249, 0.375);
+  --pico-primary-focus: rgba(78, 179, 27, 0.375);
  --pico-primary-inverse: #fff;
  --pico-secondary: #969eaf;
  --pico-secondary-background: #525f7a;
@ -1694,6 +1694,34 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
  pointer-events: none;
 }

+/* Base ghost button style */
+:is(button, [type=button], [type=submit], [type=reset], [role=button]).ghost {
+  --pico-background-color: transparent;
+  --pico-border-color: transparent;
+  --pico-color: var(--pico-primary);
+}
+:is(button, [type=button], [type=submit], [type=reset], [role=button]).ghost:is(:hover, :focus, :active, [aria-current]:not([aria-current=false])) {
+  --pico-background-color: transparent;
+  --pico-border-color: transparent;
+  --pico-color: var(--pico-primary-hover);
+}
+
+/* Secondary ghost button */
+:is(button, [type=button], [type=submit], [type=reset], [role=button]).ghost.secondary {
+  --pico-color: var(--pico-secondary);
+}
+:is(button, [type=button], [type=submit], [type=reset], [role=button]).ghost.secondary:is(:hover, :focus, :active, [aria-current]:not([aria-current=false])) {
+  --pico-color: var(--pico-secondary-hover);
+}
+
+/* Contrast ghost button */
+:is(button, [type=button], [type=submit], [type=reset], [role=button]).ghost.contrast {
+  --pico-color: var(--pico-contrast);
+}
+:is(button, [type=button], [type=submit], [type=reset], [role=button]).ghost.contrast:is(:hover, :focus, :active, [aria-current]:not([aria-current=false])) {
+  --pico-color: var(--pico-contrast-hover);
+}
+
 /**
 * Table
 */
@ -4122,7 +4150,8 @@ progress::-moz-progress-bar {
  position: absolute;
  bottom: 100%;
  left: 50%;
-  width: 250px;
+  width: -moz-max-content;
+  width: max-content;
  max-width: 250px;
  padding: 0.25rem 0.5rem;
  overflow: hidden;
--- a/docs/pico.min.css
+++ b/docs/pico.min.css