Switch to container queries and a few other things

tachyons-css · Aug 12, 2023 · 25e557f · 25e557f
1 parent f1e1fbf
commit 25e557f
Show file tree

Hide file tree

Showing 57 changed files with 1,583 additions and 1,390 deletions.
diff --git a/src/_align-content.css b/src/_align-content.css
@@ -18,23 +18,23 @@
 .content-around  { align-content: space-around; }
 .content-stretch { align-content: stretch; }
 
-@media (--breakpoint-small) {
+@container (min-width:30em) {
   .content-start-s { align-content: flex-start; }
   .content-end-s { align-content: flex-end; }
   .content-center-s { align-content: center; }
   .content-between-s { align-content: space-between; }
   .content-around-s { align-content: space-around; }
   .content-stretch-s { align-content: stretch; }
 }
-@media (--breakpoint-medium) {
+@container (min-width:48em) {
   .content-start-m { align-content: flex-start; }
   .content-end-m { align-content: flex-end; }
   .content-center-m { align-content: center; }
   .content-between-m { align-content: space-between; }
   .content-around-m { align-content: space-around; }
   .content-stretch-m { align-content: stretch; }
 }
-@media (--breakpoint-large) {
+@container (min-width:64em) {
   .content-start-l { align-content: flex-start; }
   .content-end-l { align-content: flex-end; }
   .content-center-l { align-content: center; }

diff --git a/src/_align-items.css b/src/_align-items.css
@@ -15,23 +15,23 @@
 .items-baseline { align-items: baseline; }
 .items-stretch  { align-items: stretch; }
 
-@media (--breakpoint-small) {
+@container (min-width:30em) {
   .items-start-s    { align-items: flex-start; }
   .items-end-s   { align-items: flex-end; }
   .items-center-s   { align-items: center; }
   .items-baseline-s { align-items: baseline; }
   .items-stretch-s  { align-items: stretch; }
 }
 
-@media (--breakpoint-medium) {
+@container (min-width:48em) {
   .items-start-m    { align-items: flex-start; }
   .items-end-m   { align-items: flex-end; }
   .items-center-m   { align-items: center; }
   .items-baseline-m { align-items: baseline; }
   .items-stretch-m  { align-items: stretch; }
 }
 
-@media (--breakpoint-large) {
+@container (min-width:64em) {
   .items-start-l    { align-items: flex-start; }
   .items-end-l   { align-items: flex-end; }
   .items-center-l   { align-items: center; }

diff --git a/src/_align-self.css b/src/_align-self.css
@@ -15,15 +15,15 @@
 .self-baseline { align-self: baseline; }
 .self-stretch  { align-self: stretch; }
 
-@media (--breakpoint-small) {
+@container (min-width:30em) {
   .self-start-s { align-self: flex-start; }
   .self-end-s { align-self: flex-end; }
   .self-center-s { align-self: center; }
   .self-baseline-s { align-self: baseline; }
   .self-stretch-s { align-self: stretch; }
 }
 
-@media (--breakpoint-medium) {
+@container (min-width:48em) {
   .self-start-m { align-self: flex-start; }
   .self-end-m { align-self: flex-end; }
   .self-center-m { align-self: center; }
@@ -32,7 +32,7 @@
 
 }
 
-@media (--breakpoint-large) {
+@container (min-width:64em) {
   .self-start-l { align-self: flex-start; }
   .self-end-l { align-self: flex-end; }
   .self-center-l { align-self: center; }

diff --git a/src/_aspect-ratios.css b/src/_aspect-ratios.css
@@ -25,7 +25,7 @@
 .aspect-ratio-1x1 {  aspect-ratio: 1 / 1; }
 
 
-@media (--breakpoint-small){
+@container (min-width:30em){
   .aspect-ratio-16x9-s { aspect-ratio: 16 / 9; }
   .aspect-ratio-9x16-s { aspect-ratio: 9 / 16; }
 
@@ -45,7 +45,7 @@
   .aspect-ratio-1x1-s { aspect-ratio: 1 / 1; }
 }
 
-@media (--breakpoint-medium){
+@container (min-width:48em){
   .aspect-ratio-16x9-m { aspect-ratio: 16 / 9; }
   .aspect-ratio-9x16-m { aspect-ratio: 9 / 16; }
 
@@ -65,7 +65,7 @@
   .aspect-ratio-1x1-m { aspect-ratio: 1 / 1; }
 }
 
-@media (--breakpoint-large){
+@container (min-width:64em){
   .aspect-ratio-16x9-l { aspect-ratio: 16 / 9; }
   .aspect-ratio-9x16-l { aspect-ratio: 9 / 16; }
 

diff --git a/src/_background-position.css b/src/_background-position.css
@@ -44,7 +44,7 @@
   background-position: center left;   
 }
 
-@media (--breakpoint-small) {
+@container (min-width:30em) {
   .bg-center-s { 
     background-repeat: no-repeat;
     background-position: center center; 
@@ -71,7 +71,7 @@
   }
 }
 
-@media (--breakpoint-medium) {
+@container (min-width:48em) {
   .bg-center-m { 
     background-repeat: no-repeat;
     background-position: center center; 
@@ -98,7 +98,7 @@
   }
 }
 
-@media (--breakpoint-large) {
+@container (min-width:64em) {
   .bg-center-l { 
     background-repeat: no-repeat;
     background-position: center center; 

diff --git a/src/_background-size.css b/src/_background-size.css
@@ -15,20 +15,52 @@
   on an html element.
 */
 
-  .cover { background-size: cover!important; }
+  .cover   { background-size: cover!important; }
   .contain { background-size: contain!important; }
+  .bg1     { background-size: 4px; }
+  .bg2     { background-size: 8px; }
+  .bg3     { background-size: 16px; }
+  .bg4     { background-size: 32px; }
+  .bg5     { background-size: 64px; }
+  .bg-100  { background-size: 100%; }
+  .bg-150  { background-size: 150%; }
+  .bg-200  { background-size: 200%; }
 
-@media (--breakpoint-small) {
+@container (min-width:30em) {
   .cover-s { background-size: cover!important; }
   .contain-s { background-size: contain!important; }
+  .bg1-s     { background-size: 4px; }
+  .bg2-s     { background-size: 8px; }
+  .bg3-s     { background-size: 16px; }
+  .bg4-s     { background-size: 32px; }
+  .bg5-s     { background-size: 64px; }
+  .bg-100-s { background-size: 100%; }
+  .bg-150-s { background-size: 150%; }
+  .bg-200-s { background-size: 200%; }
 }
 
-@media (--breakpoint-medium) {
+@container (min-width:48em) {
   .cover-m { background-size: cover!important; }
   .contain-m { background-size: contain!important; }
+  .bg1-m     { background-size: 4px; }
+  .bg2-m     { background-size: 8px; }
+  .bg3-m     { background-size: 16px; }
+  .bg4-m     { background-size: 32px; }
+  .bg5-m     { background-size: 64px; }
+  .bg-100-m { background-size: 100%; }
+  .bg-150-m { background-size: 150%; }
+  .bg-200-m { background-size: 200%; }
 }
 
-@media (--breakpoint-large) {
+@container (min-width:64em) {
   .cover-l { background-size: cover!important; }
   .contain-l { background-size: contain!important; }
+  .bg1-l     { background-size: 4px; }
+  .bg2-l     { background-size: 8px; }
+  .bg3-l     { background-size: 16px; }
+  .bg4-l     { background-size: 32px; }
+  .bg5-l     { background-size: 64px; }
+  .bg-100-l { background-size: 100%; }
+  .bg-150-l { background-size: 150%; }
+  .bg-200-l { background-size: 200%; }
 }
diff --git a/src/_border-colors.css b/src/_border-colors.css
@@ -19,6 +19,8 @@
 */
 
 .b--color { border-color: var(--border-color, gray); }
+.b--light { border-color: var(--overlay-tint-2, gray); }
+.b--dark { border-color: var(--overlay-shadow-9, gray); }
 .b--transparent { border-color: transparent; }
 .b--current { border-color: currentColor; }
 .b--inherit { border-color: inherit; }

diff --git a/src/_border-radius.css b/src/_border-radius.css
@@ -27,7 +27,7 @@
 
 */
 
-  .br  {        border-radius: var(--border-radius, 6px); }
+  .br-primary  {        border-radius: var(--border-radius, 6px); }
   .br0 {        border-radius: var(--border-radius-0, 0); }
   .br1 {        border-radius: var(--border-radius-1, 4px); }
   .br2 {        border-radius: var(--border-radius-2, 6px); }
@@ -61,8 +61,8 @@
   .br-initial { border-radius: initial; }
   .br-unset { border-radius: unset; }
 
-@media (--breakpoint-small) {
-  .br-s  {          border-radius: var(--border-radius, 6px); }
+@container (min-width:30em) {
+  .br-primary-s  {          border-radius: var(--border-radius, 6px); }
   .br0-s {        border-radius: var(--border-radius-0, 0); }
   .br1-s {        border-radius: var(--border-radius-1, 4px); }
   .br2-s {        border-radius: var(--border-radius-2, 6px); }
@@ -96,8 +96,8 @@
   .br-unset-s { border-radius: unset; }
 }
 
-@media (--breakpoint-medium) {
-  .br-m  {        border-radius: var(--border-radius, 6px); }
+@container (min-width:48em) {
+  .br-primary-m  {        border-radius: var(--border-radius, 6px); }
   .br0-m {        border-radius: var(--border-radius-0, 0); }
   .br1-m {        border-radius: var(--border-radius-1, 4px); }
   .br2-m {        border-radius: var(--border-radius-2, 6px); }
@@ -131,8 +131,8 @@
   .br-unset-m { border-radius: unset; }
 }
 
-@media (--breakpoint-large) {
-  .br-l  {        border-radius: var(--border-radius, 6px); }
+@container (min-width:64em) {
+  .br-primary-l { border-radius: var(--border-radius, 6px); }
   .br0-l {        border-radius: var(--border-radius-0, 0); }
   .br1-l {        border-radius: var(--border-radius-1, 4px); }
   .br2-l {        border-radius: var(--border-radius-2, 6px); }

diff --git a/src/_border-style.css b/src/_border-style.css
@@ -26,21 +26,21 @@
 .b--solid {  border-style: solid; }
 .b--none {   border-style: none; }
 
-@media (--breakpoint-small) {
+@container (min-width:30em) {
   .b--dotted-s { border-style: dotted; }
   .b--dashed-s { border-style: dashed; }
   .b--solid-s {  border-style: solid; }
   .b--none-s {   border-style: none; }
 }
 
-@media (--breakpoint-medium) {
+@container (min-width:48em) {
   .b--dotted-m { border-style: dotted; }
   .b--dashed-m { border-style: dashed; }
   .b--solid-m {  border-style: solid; }
   .b--none-m {   border-style: none; }
 }
 
-@media (--breakpoint-large) {
+@container (min-width:64em) {
   .b--dotted-l { border-style: dotted; }
   .b--dashed-l { border-style: dashed; }
   .b--solid-l {  border-style: solid; }

diff --git a/src/_border-widths.css b/src/_border-widths.css
@@ -35,7 +35,7 @@
 .bb-0 { border-bottom-width: 0; }
 .bl-0 { border-left-width: 0; }
 
-@media (--breakpoint-small) {
+@container (min-width:30em) {
   .bw-s  { border-width: var(--border-width,1px); }
   .bw0-s { border-width: var(--border-width-0,0); }
   .bw1-s { border-width: var(--border-width-1,1px); }
@@ -49,7 +49,7 @@
   .bl-0-s { border-left-width: 0; }
 }
 
-@media (--breakpoint-medium) {
+@container (min-width:48em) {
   .bw-m  { border-width: var(--border-width,1px); }
   .bw0-m { border-width: var(--border-width-0,0); }
   .bw1-m { border-width: var(--border-width-1,1px); }
@@ -63,7 +63,7 @@
   .bl-0-m { border-left-width: 0; }
 }
 
-@media (--breakpoint-large) {
+@container (min-width:64em) {
   .bw-l  { border-width: var(--border-width,1px); }
   .bw0-l { border-width: var(--border-width-0,0); }
   .bw1-l { border-width: var(--border-width-1,1px); }

diff --git a/src/_borders.css b/src/_borders.css
@@ -29,7 +29,7 @@
   .bn { border-style: none; border-width: 0; }
 
 
-@media (--breakpoint-small) {
+@container (min-width:30em) {
   .ba-s { border-style: solid; border-width: var(--border-width, 1px); }
   .bt-s { border-top-style: solid; border-top-width: var(--border-width, 1px); }
   .br-s { border-right-style: solid; border-right-width: var(--border-width, 1px); }
@@ -38,7 +38,7 @@
   .bn-s { border-style: none; border-width: 0; }
 }
 
-@media (--breakpoint-medium) {
+@container (min-width:48em) {
   .ba-m { border-style: solid; border-width: var(--border-width, 1px); }
   .bt-m { border-top-style: solid; border-top-width: var(--border-width, 1px); }
   .br-m { border-right-style: solid; border-right-width: var(--border-width, 1px); }
@@ -47,7 +47,7 @@
   .bn-m { border-style: none; border-width: 0; }
 }
 
-@media (--breakpoint-large) {
+@container (min-width:64em) {
   .ba-l { border-style: solid; border-width: var(--border-width, 1px); }
   .bt-l { border-top-style: solid; border-top-width: var(--border-width, 1px); }
   .br-l { border-right-style: solid; border-right-width: var(--border-width, 1px); }

diff --git a/src/_coordinates.css b/src/_coordinates.css
@@ -50,15 +50,9 @@
 .bottom--2 { bottom: calc(var(--size, 1rem) * -2); }
 .left--2   { left:   calc(var(--size, 1rem) * -2); }
 
+.inset-0 { inset: 0; }
 
-.absolute--fill {
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-
-@media (--breakpoint-small) {
+@container (min-width:30em) {
   .top-0-s     { top:   0; }
   .left-0-s    { left:  0; }
   .right-0-s   { right: 0; }
@@ -79,15 +73,10 @@
   .right--2-s  { right:  calc(var(--size, 1rem) * -2); }
   .bottom--2-s { bottom: calc(var(--size, 1rem) * -2); }
   .left--2-s   { left:   calc(var(--size, 1rem) * -2); }
-  .absolute--fill-s {
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
+  .inset-0-s { inset: 0; }
 }
 
-@media (--breakpoint-medium) {
+@container (min-width:48em) {
   .top-0-m     { top:   0; }
   .left-0-m    { left:  0; }
   .right-0-m   { right: 0; }
@@ -108,15 +97,10 @@
   .right--2-m  { right:  calc(var(--size, 1rem) * -2); }
   .bottom--2-m { bottom: calc(var(--size, 1rem) * -2); }
   .left--2-m   { left:   calc(var(--size, 1rem) * -2); }
-  .absolute--fill-m {
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
+  .inset-0-m { inset: 0; }
 }
 
-@media (--breakpoint-large) {
+@container (min-width:64em) {
   .top-0-l     { top:   0; }
   .left-0-l    { left:  0; }
   .right-0-l   { right: 0; }
@@ -137,10 +121,5 @@
   .right--2-l  { right:  calc(var(--size, 1rem) * -2); }
   .bottom--2-l { bottom: calc(var(--size, 1rem) * -2); }
   .left--2-l   { left:   calc(var(--size, 1rem) * -2); }
-  .absolute--fill-l {
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
+  .inset-0-l { inset: 0; }
 }