@anyblades/blades 3.1.0-beta.5 → 3.1.0-beta.7

package/css/layered/layout/columns.css

@@ -1,30 +1,10 @@
 @layer blades {
-/*\3c !--section:docs-->
-
-`.columns` automatically creates columns with at least 30 characters each:
-
-<article class="columns">
-  <p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p>
-</article>
-
-The smaller the font size, the more columns will be created:
-
-<article class="columns" style="font-size: 65%">
-  <p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
-</article>
-
-Useful for tables of contents and long lists.
-
-\3c !--section:code-->
-```css */
 .columns {
-  -moz-columns: 25ch auto;
-  columns: 25ch auto; /* common container 65ch / 25ch => 2 columns max, with a buffer for list paddings */
-}
-/* Avoid breaking inside elements, such as nested lists */
-.columns > * {
-    -moz-column-break-inside: avoid;
+  columns: 25ch auto;
+
+  & > * {
     break-inside: avoid;
   }
+}
 
 }

package/css/layered/layout/container.css

@@ -1,39 +1,39 @@
 @layer blades {
-/**
- * Container
- */
-.container,
-.container-fluid {
+.container, .container-fluid {
   width: 100%;
-  margin-right: auto;
-  margin-left: auto;
   padding-right: var(--pico-spacing);
   padding-left: var(--pico-spacing);
+  margin-left: auto;
+  margin-right: auto;
 }
 
-@media (min-width: 576px) {
+@media (width >= 576px) {
   .container {
     max-width: 510px;
-    padding-right: 0;
     padding-left: 0;
+    padding-right: 0;
   }
 }
-@media (min-width: 768px) {
+
+@media (width >= 768px) {
   .container {
     max-width: 700px;
   }
 }
-@media (min-width: 1024px) {
+
+@media (width >= 1024px) {
   .container {
     max-width: 950px;
   }
 }
-@media (min-width: 1280px) {
+
+@media (width >= 1280px) {
   .container {
     max-width: 1200px;
   }
 }
-@media (min-width: 1536px) {
+
+@media (width >= 1536px) {
   .container {
     max-width: 1450px;
   }

package/css/layered/layout/document.css

@@ -1,23 +1,15 @@
 @layer blades {
-/**
- * Document
- * Content-box & Responsive typography
- */
-*,
-*::before,
-*::after {
+*, :before, :after {
   box-sizing: border-box;
   background-repeat: no-repeat;
 }
 
-::before,
-::after {
+:before, :after {
   text-decoration: inherit;
   vertical-align: inherit;
 }
 
-:where(:scope),
-:where(:host) {
+:where(:scope), :where(:host) {
   -webkit-tap-highlight-color: transparent;
   -webkit-text-size-adjust: 100%;
   -moz-text-size-adjust: 100%;
@@ -29,7 +21,7 @@
   line-height: var(--pico-line-height);
   font-family: var(--pico-font-family);
   text-underline-offset: var(--pico-text-underline-offset);
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   overflow-wrap: break-word;
   -moz-tab-size: 4;
   -o-tab-size: 4;

package/css/layered/layout/grid.css

@@ -1,22 +1,20 @@
 @layer blades {
-/**
- * Grid
- * Minimal grid system with auto-layout columns
- */
 .grid {
   grid-column-gap: var(--pico-grid-column-gap);
   grid-row-gap: var(--pico-grid-row-gap);
-  display: grid;
   grid-template-columns: 1fr;
+  display: grid;
 }
-@media (min-width: 768px) {
+
+@media (width >= 768px) {
   .grid {
     grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
   }
 }
-.grid > *:not(.does-not-exist) {
+
+.grid > :not(.does-not-exist) {
   min-width: 0;
-  margin-bottom: 0; /* https://github.com/picocss/pico/issues/738 */
+  margin-bottom: 0;
 }
 
 }

package/css/layered/layout/landmarks.css

@@ -1,11 +1,5 @@
 @layer blades {
-/**
- * Landmarks
- * Included in pico.css and blades.ninja.css; not in blades.css
- */
-body > header,
-body > main,
-body > footer {
+body > header, body > main, body > footer {
   padding-block: var(--pico-block-spacing-vertical);
 }
 

package/css/layered/layout/overflow-auto.css

@@ -1,7 +1,4 @@
 @layer blades {
-/**
- * Overflow auto
- */
 .overflow-auto {
   overflow: auto;
 }

package/css/layered/layout/section.css

@@ -1,7 +1,4 @@
 @layer blades {
-/**
- * Section
- */
 section {
   margin-bottom: var(--pico-block-spacing-vertical);
 }

package/css/layered/layout.css

@@ -1,23 +1,15 @@
 @layer blades {
-/**
- * Document
- * Content-box & Responsive typography
- */
-*,
-*::before,
-*::after {
+*, :before, :after {
   box-sizing: border-box;
   background-repeat: no-repeat;
 }
 
-::before,
-::after {
+:before, :after {
   text-decoration: inherit;
   vertical-align: inherit;
 }
 
-:where(:scope),
-:where(:host) {
+:where(:scope), :where(:host) {
   -webkit-tap-highlight-color: transparent;
   -webkit-text-size-adjust: 100%;
   -moz-text-size-adjust: 100%;
@@ -29,7 +21,7 @@
   line-height: var(--pico-line-height);
   font-family: var(--pico-font-family);
   text-underline-offset: var(--pico-text-underline-offset);
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   overflow-wrap: break-word;
   -moz-tab-size: 4;
   -o-tab-size: 4;
@@ -45,73 +37,68 @@ main {
   display: block;
 }
 
-/**
- * Section
- */
 section {
   margin-bottom: var(--pico-block-spacing-vertical);
 }
-/**
- * Container
- */
-.container,
-.container-fluid {
+
+.container, .container-fluid {
   width: 100%;
-  margin-right: auto;
-  margin-left: auto;
   padding-right: var(--pico-spacing);
   padding-left: var(--pico-spacing);
+  margin-left: auto;
+  margin-right: auto;
 }
 
-@media (min-width: 576px) {
+@media (width >= 576px) {
   .container {
     max-width: 510px;
-    padding-right: 0;
     padding-left: 0;
+    padding-right: 0;
   }
 }
-@media (min-width: 768px) {
+
+@media (width >= 768px) {
   .container {
     max-width: 700px;
   }
 }
-@media (min-width: 1024px) {
+
+@media (width >= 1024px) {
   .container {
     max-width: 950px;
   }
 }
-@media (min-width: 1280px) {
+
+@media (width >= 1280px) {
   .container {
     max-width: 1200px;
   }
 }
-@media (min-width: 1536px) {
+
+@media (width >= 1536px) {
   .container {
     max-width: 1450px;
   }
 }
-/**
- * Grid
- * Minimal grid system with auto-layout columns
- */
+
 .grid {
   grid-column-gap: var(--pico-grid-column-gap);
   grid-row-gap: var(--pico-grid-row-gap);
-  display: grid;
   grid-template-columns: 1fr;
+  display: grid;
 }
-@media (min-width: 768px) {
+
+@media (width >= 768px) {
   .grid {
     grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
   }
 }
-.grid > *:not(.does-not-exist) {
+
+.grid > :not(.does-not-exist) {
   min-width: 0;
-  margin-bottom: 0; /* https://github.com/picocss/pico/issues/738 */
+  margin-bottom: 0;
 }
-/**
- * Overflow auto
- */
+
 .overflow-auto {
   overflow: auto;
 }

package/css/layered/utilities.css

@@ -1,13 +1,9 @@
 @layer blades {
-/**
- * Accessibility & User interaction
- */
 [aria-controls] {
   cursor: pointer;
 }
 
-[aria-disabled="true"],
-[disabled] {
+[aria-disabled="true"], [disabled] {
   cursor: not-allowed;
 }
 
@@ -15,20 +11,15 @@
   direction: rtl;
 }
 
-/**
- * Reduce Motion Features
- */
 @media (prefers-reduced-motion: reduce) {
-  *:not([aria-busy="true"]):not(.unreduce-motion),
-  :not([aria-busy="true"])::before,
-  :not([aria-busy="true"])::after {
+  :not([aria-busy="true"]):not(.unreduce-motion), :not([aria-busy="true"]):before, :not([aria-busy="true"]):after {
     background-attachment: initial !important;
-    animation-duration: 1ms !important;
-    animation-delay: -1ms !important;
-    animation-iteration-count: 1 !important;
     scroll-behavior: auto !important;
-    transition-delay: 0s !important;
     transition-duration: 0s !important;
+    transition-delay: 0s !important;
+    animation-duration: 1ms !important;
+    animation-iteration-count: 1 !important;
+    animation-delay: -1ms !important;
   }
 }
 

package/css/layered/variables-blades.css

@@ -1,23 +1,11 @@
 @layer blades {
-:scope,
-:host {
-  /**
-   * Design Tokens !!! NAMING NOT FINALIZED YET !!!
-   * `--in-pico: *` props below are for reference only (not to be used)
-   */
+:scope, :host {
   --blades-token-primary: var(--pico-primary, dodgerblue);
-  --in-pico: #01aaff;
-  --blades-token-secondary: var(--pico-secondary, lightslategray);
   --in-pico: #969eaf;
-
-  /**
-   * Inherited Variables
-   */
-  --blades-timeline-border-color: color-mix(
-    in srgb,
+  --blades-token-secondary: var(--pico-secondary, lightslategray);
+  --blades-timeline-border-color: color-mix(in srgb,
     var(--blades-token-secondary) 50%,
-    transparent
-  );
+    transparent);
 }
 
 }