@anyblades/blades 3.1.0-beta.4 → 3.1.0-beta.6

package/css/layered/layout/columns.css

@@ -0,0 +1,10 @@
+@layer blades {
+.columns {
+  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

@@ -0,0 +1,11 @@
+@layer blades {
+:scope, :host {
+  --blades-token-primary: var(--pico-primary, dodgerblue);
+  --in-pico: #969eaf;
+  --blades-token-secondary: var(--pico-secondary, lightslategray);
+  --blades-timeline-border-color: color-mix(in srgb,
+    var(--blades-token-secondary) 50%,
+    transparent);
+}
+
+}