clairity.css 0.5.2 → 0.5.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b6d8450ea6efd04150ba9ba0d7cbf8f042a57f01375d42969821910c41eced9e
-  data.tar.gz: b023d0b8143602eb6f9510874877d076b1289b5bbe30fad603e3b673a963754e
+  metadata.gz: 9b971433592736999ac6b4a0d8582933732270c80b4070acdda13c5f8605a39b
+  data.tar.gz: 40e328586eb1ace8bef06e26c5edb42edfc58f81f1051c4953e558ef6bb72e5c
 SHA512:
-  metadata.gz: c78096833deca59cac5dddf196c86046a614aedc5aba2ee39137030cedc3107822a881cb718aca48676fb730ecb3f6764a504bec637cce4f177d616d9a77454b
-  data.tar.gz: 0ed09492c2dcf8bb79feaa6482d0d04bd086ceb44fe24bd4054d1000bc217a38860b5b42e0ce3477fcbcf3a7b77747a681f98fec076dbdaf529b0b89d02343a6
+  metadata.gz: e7bda8d9aa7125fcac95be2a1e93b2ce5362420d54c9983e6e05d253150d74ff291a3c353623f4e778aaac211f11ea38edfb3226846e85764d66a697fdc55623
+  data.tar.gz: 1542e062d10024764fb8410f755d1d3dcccf85b6c0e4c88e2a0c8349a37c0f49327fa02c8615fcc8f2f01bc8fc969158808ae5134ed04e9f3edfbf1f041d2d97

data/CHANGELOG.md

@@ -29,6 +29,15 @@ This section is for recording changes committed since the last release.
 ### Security
 
 
+## [v0.5.3] - 20230706
+
+### Added
+
+* [classes.css]: added `.avatar` class for avatar images, which are typically round
+* [classes.css]: added `.bordered` class for putting a `currentColor` border around an element
+* [icons.css]: added `--i-id`, `--i-id-badge-2`, and `--i-users` icons and the associated icon classes in [classes.css]
+
+
 ## [v0.5.2] - 20230628
 
 ### Added
@@ -729,7 +738,8 @@ After a number of diversions, including developing a (as yet unreleased) Jekyll
 - `palette.css` - separate out the color scheme into its own css file
 
 
-[unreleased]: https://github.com/clairity/clairity.css/compare/v0.5.2...HEAD
+[unreleased]: https://github.com/clairity/clairity.css/compare/v0.5.3...HEAD
+[v0.5.3]: https://github.com/clairity/clairity.css/compare/v0.5.2...v0.5.3
 [v0.5.2]: https://github.com/clairity/clairity.css/compare/v0.5.1...v0.5.2
 [v0.5.1]: https://github.com/clairity/clairity.css/compare/v0.5.0...v0.5.1
 [v0.5.0]: https://github.com/clairity/clairity.css/compare/v0.4.0...v0.5.0

data/lib/assets/css/clairity/classes.css

@@ -2,13 +2,15 @@
 CLASSES - Here is where we first deviate from the classless CSS directive. We'll
           add alternate styles for many elements and groups of elements here, 
           but none of these will rise to the level of full-on components. Those 
-          will be the next layer of the CSS hierarchy.
-
+          will be the next layer of the CSS hierarchy. These class styles will
+          still aim to be semantic rather than utilitarian, with the latter 
+          deferred to utilities.css, further down the css stack.
+          
           We'll generally aim for [0010] specificity here, as that's the default
           specificity of a single class, which can be overridden in later styles
           using just a single class. Exceptions will be marked with their
           specificity, as usual.
-
+          
           Note that class names can start with a number in HTML5, but css
           selectors can't. For a workaround (used with the .100vw class), see
   https://benfrain.com/when-and-where-you-can-use-numbers-in-id-and-class-names/
@@ -141,6 +143,12 @@ CLASSES - Here is where we first deviate from the classless CSS directive. We'll
 // .......................................................................... */
 .dual-aside { grid-column: 2 / -2; }
 
+.bordered {
+  border:                 var(--solid) currentColor;
+  border-radius:          var(--radius);
+  padding:                var(--xs);
+}
+
 
 /* -----------------------------------------------------------------------------
 //  #breaks - #br #wbr #hr - line breaks and the horizontal rule
@@ -162,9 +170,15 @@ CLASSES - Here is where we first deviate from the classless CSS directive. We'll
 
 
 /* -----------------------------------------------------------------------------
-//  #icons - helper classes for icons                           - EXPERIMENTAL
+//  #media / #embedded - elements that add multimedia to a page
 // -------------------------------------------------------------------------- */
 
+.avatar  { border-radius: var(--circle); }
+
+
+/*  #icons - helper classes for icons                           - EXPERIMENTAL
+// ........................................................................... */
+
 /* for inserting an icon using the background-blend-mode technique */
 .icon {
   display:                inline-block;
@@ -189,6 +203,8 @@ CLASSES - Here is where we first deviate from the classless CSS directive. We'll
 .i-dash         { --icon: var(--i-dash);          }
 .i-edit         { --icon: var(--i-edit);          }
 .i-home-edit    { --icon: var(--i-home-edit);     }
+.i-id           { --icon: var(--i-id);            }
+.i-id-badge-2   { --icon: var(--i-id-badge-2);    }
 .i-key          { --icon: var(--i-key);           }
 .i-mail         { --icon: var(--i-mail);          }
 .i-mail-check   { --icon: var(--i-mail-check);    }
@@ -202,6 +218,7 @@ CLASSES - Here is where we first deviate from the classless CSS directive. We'll
 .i-user-circle  { --icon: var(--i-user-circle);   }
 .i-user-edit    { --icon: var(--i-user-edit);     }
 .i-user-off     { --icon: var(--i-user-off);      }
+.i-users        { --icon: var(--i-users);         }
 
 /* removes a ::before or ::after icon                     - [0011] specificity
 // ........................................................................... */

data/lib/assets/css/clairity/icons.css

@@ -29,6 +29,8 @@
   --i-file:               url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><title>file</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M14 3v4a1 1 0 0 0 1 1h4' /><path d='M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z' /></svg>");
   --i-file-download:      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><title>file download</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M14 3v4a1 1 0 0 0 1 1h4' /><path d='M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z' /><path d='M12 17v-6' /><path d='M9.5 14.5l2.5 2.5l2.5 -2.5' /></svg>");
   --i-home-edit:          url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><title>home edit</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M9 21v-6a2 2 0 0 1 2 -2h2c.645 0 1.218 .305 1.584 .78' /><path d='M20.004 11.004l-8.004 -8.004l-9 9h2v7a2 2 0 0 0 2 2h4' /><path d='M18.42 15.61a2.1 2.1 0 0 1 2.97 2.97l-3.39 3.42h-3v-3l3.42 -3.39z' /></svg>");
+  --i-id:                 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><title>id</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M3 4m0 3a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v10a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3z' /><path d='M9 10m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0' /><path d='M15 8l2 0' /><path d='M15 12l2 0' /><path d='M7 16l10 0' /></svg>");
+  --i-id-badge-2:         url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><title>id badge 2</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M7 12h3v4h-3z' /><path d='M10 6h-6a1 1 0 0 0 -1 1v12a1 1 0 0 0 1 1h16a1 1 0 0 0 1 -1v-12a1 1 0 0 0 -1 -1h-6' /><path d='M10 3m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v3a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z' /><path d='M14 16h2' /><path d='M14 12h4' /></svg>");
   --i-key:                url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><title>key</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M16.555 3.843l3.602 3.602a2.877 2.877 0 0 1 0 4.069l-2.643 2.643a2.877 2.877 0 0 1 -4.069 0l-.301 -.301l-6.558 6.558a2 2 0 0 1 -1.239 .578l-.175 .008h-1.172a1 1 0 0 1 -.993 -.883l-.007 -.117v-1.172a2 2 0 0 1 .467 -1.284l.119 -.13l.414 -.414h2v-2h2v-2l2.144 -2.144l-.301 -.301a2.877 2.877 0 0 1 0 -4.069l2.643 -2.643a2.877 2.877 0 0 1 4.069 0z' /><path d='M15 9h.01' /></svg>");
   --i-lock:               url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><title>lock</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><rect x='5' y='11' width='14' height='10' rx='2' /><circle cx='12' cy='16' r='1' /><path d='M8 11v-4a4 4 0 0 1 8 0v4' /></svg>");
   --i-mail:               url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><title>mail</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><rect x='3' y='5' width='18' height='14' rx='2' /><polyline points='3 7 12 13 21 7' /></svg>");
@@ -46,4 +48,5 @@
   --i-user-circle:        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><title>user circle</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><circle cx='12' cy='12' r='9' /><circle cx='12' cy='10' r='3' /><path d='M6.168 18.849a4 4 0 0 1 3.832 -2.849h4a4 4 0 0 1 3.834 2.855' /></svg>");
   --i-user-edit:          url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><title>user edit</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0' /><path d='M6 21v-2a4 4 0 0 1 4 -4h3.5' /><path d='M18.42 15.61a2.1 2.1 0 0 1 2.97 2.97l-3.39 3.42h-3v-3l3.42 -3.39z' /></svg>");
   --i-user-off:           url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><title>disable</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M14.274 10.291a4 4 0 1 0 -5.554 -5.58m-.548 3.453a4.01 4.01 0 0 0 2.62 2.65' /><path d='M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 1.147 .167m2.685 2.681a4 4 0 0 1 .168 1.152v2' /><line x1='3' y1='3' x2='21' y2='21' /></svg>");
+  --i-users:              url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><title>users</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M9 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0' /><path d='M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2' /><path d='M16 3.13a4 4 0 0 1 0 7.75' /><path d='M21 21v-2a4 4 0 0 0 -3 -3.85' /></svg>");
 }

data/lib/clairity.css/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module ClairityCss
-  VERSION = '0.5.2'
+  VERSION = '0.5.3'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: clairity.css
 version: !ruby/object:Gem::Version
-  version: 0.5.2
+  version: 0.5.3
 platform: ruby
 authors:
 - clairity
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-06-28 00:00:00.000000000 Z
+date: 2023-07-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties
@@ -122,7 +122,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.4.14
+rubygems_version: 3.4.15
 signing_key:
 specification_version: 4
 summary: clairity.css is a simple, semantic classless CSS framework and future HTML-first