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
picocss · Jan 14, 2025 · eb1304a · eb1304a
1 parent f8fbce3
commit eb1304a
Show file tree

Hide file tree

Showing 262 changed files with 2,039 additions and 646 deletions.
diff --git a/README.md b/README.md
@@ -77,7 +77,7 @@ There are 4 ways to get started with pico.css:
 Alternatively, you can use [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@yohns/picocss) to link pico.css.
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yohns/[email protected].3/css/pico.min.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yohns/[email protected].4/css/pico.min.css" />
 ```
 
 ### Install with NPM
@@ -135,7 +135,7 @@ Use the default `.classless` version if you need centered viewports:
 ```html
 <link
   rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/@yohns/[email protected].3/css/pico.classless.min.css"
+  href="https://cdn.jsdelivr.net/npm/@yohns/[email protected].4/css/pico.classless.min.css"
 />
 ```
 
@@ -144,7 +144,7 @@ Or use the `.fluid.classless` version if you need a fluid container:
 ```html
 <link
   rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/@yohns/[email protected].3/css/pico.fluid.classless.min.css"
+  href="https://cdn.jsdelivr.net/npm/@yohns/[email protected].4/css/pico.fluid.classless.min.css"
 />
 ```
 
@@ -159,7 +159,7 @@ Then just write pure HTML, and it should look great:
     <meta name="color-scheme" content="light dark" />
     <link
       rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/@yohns/[email protected].3/css/pico.classless.min.css"
+      href="https://cdn.jsdelivr.net/npm/@yohns/[email protected].4/css/pico.classless.min.css"
     />
     <title>Hello, world!</title>
   </head>

diff --git a/css/pico.amber.css b/css/pico.amber.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
  */
 /**
@@ -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;

diff --git a/css/pico.amber.min.css b/css/pico.amber.min.css
diff --git a/css/pico.azure.css b/css/pico.azure.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
  */
 /**
@@ -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;

diff --git a/css/pico.azure.min.css b/css/pico.azure.min.css
diff --git a/css/pico.blue.css b/css/pico.blue.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
  */
 /**
@@ -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;

diff --git a/css/pico.blue.min.css b/css/pico.blue.min.css
diff --git a/css/pico.classless.amber.css b/css/pico.classless.amber.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
  */
 /**
@@ -3172,7 +3172,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;

diff --git a/css/pico.classless.amber.min.css b/css/pico.classless.amber.min.css
diff --git a/css/pico.classless.azure.css b/css/pico.classless.azure.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
  */
 /**
@@ -3172,7 +3172,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;

diff --git a/css/pico.classless.azure.min.css b/css/pico.classless.azure.min.css
diff --git a/css/pico.classless.blue.css b/css/pico.classless.blue.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
  */
 /**
@@ -3172,7 +3172,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;

diff --git a/css/pico.classless.blue.min.css b/css/pico.classless.blue.min.css
diff --git a/css/pico.classless.conditional.amber.css b/css/pico.classless.conditional.amber.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
  */
 /**
@@ -3172,7 +3172,8 @@ body:has(dialog[open]) {
   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;

diff --git a/css/pico.classless.conditional.amber.min.css b/css/pico.classless.conditional.amber.min.css
diff --git a/css/pico.classless.conditional.azure.css b/css/pico.classless.conditional.azure.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
  */
 /**
@@ -3172,7 +3172,8 @@ body:has(dialog[open]) {
   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;

diff --git a/css/pico.classless.conditional.azure.min.css b/css/pico.classless.conditional.azure.min.css
diff --git a/css/pico.classless.conditional.blue.css b/css/pico.classless.conditional.blue.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
  */
 /**
@@ -3172,7 +3172,8 @@ body:has(dialog[open]) {
   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;

diff --git a/css/pico.classless.conditional.blue.min.css b/css/pico.classless.conditional.blue.min.css
diff --git a/css/pico.classless.conditional.cyan.css b/css/pico.classless.conditional.cyan.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
  */
 /**
@@ -3172,7 +3172,8 @@ body:has(dialog[open]) {
   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;

diff --git a/css/pico.classless.conditional.cyan.min.css b/css/pico.classless.conditional.cyan.min.css
diff --git a/css/pico.classless.conditional.fuchsia.css b/css/pico.classless.conditional.fuchsia.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
  */
 /**
@@ -3172,7 +3172,8 @@ body:has(dialog[open]) {
   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;

diff --git a/css/pico.classless.conditional.fuchsia.min.css b/css/pico.classless.conditional.fuchsia.min.css
diff --git a/css/pico.classless.conditional.green.css b/css/pico.classless.conditional.green.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
  */
 /**
@@ -3172,7 +3172,8 @@ body:has(dialog[open]) {
   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;

diff --git a/css/pico.classless.conditional.green.min.css b/css/pico.classless.conditional.green.min.css
diff --git a/css/pico.classless.conditional.grey.css b/css/pico.classless.conditional.grey.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
  */
 /**
@@ -3172,7 +3172,8 @@ body:has(dialog[open]) {
   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;

diff --git a/css/pico.classless.conditional.grey.min.css b/css/pico.classless.conditional.grey.min.css
diff --git a/css/pico.classless.conditional.indigo.css b/css/pico.classless.conditional.indigo.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
  */
 /**
@@ -3172,7 +3172,8 @@ body:has(dialog[open]) {
   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;

diff --git a/css/pico.classless.conditional.indigo.min.css b/css/pico.classless.conditional.indigo.min.css