@once-ui-system/core 1.3.14 → 1.4.0

package/dist/styles/flex.scss

@@ -1,3 +1,41 @@
+@use "../styles/breakpoints.scss" as breakpoints;
+
+.display-flex {
+  display: flex;
+}
+
+.display-inline-flex {
+  display: inline-flex;
+}
+
+.flex-column {
+  flex-direction: column;
+}
+
+.flex-row {
+  flex-direction: row;
+}
+
+.flex-column-reverse {
+  flex-direction: column-reverse;
+}
+
+.flex-row-reverse {
+  flex-direction: row-reverse;
+}
+
+.l-flex-show {
+  display: none;
+}
+
+.m-flex-show {
+  display: none;
+}
+
+.s-flex-show {
+  display: none;
+}
+
 .justify-start {
   justify-content: flex-start;
 }
@@ -10,15 +48,15 @@
   justify-content: flex-end;
 }
 
-.justify-space-between {
+.justify-between {
   justify-content: space-between;
 }
 
-.justify-space-around {
+.justify-around {
   justify-content: space-around;
 }
 
-.justify-space-evenly {
+.justify-even {
   justify-content: space-evenly;
 }
 
@@ -38,15 +76,15 @@
   align-items: flex-end;
 }
 
-.align-space-between {
+.align-between {
   align-items: space-between;
 }
 
-.align-space-around {
+.align-around {
   align-items: space-around;
 }
 
-.align-space-evenly {
+.align-even {
   align-items: space-evenly;
 }
 
@@ -121,4 +159,265 @@
 
 .flex-12 {
   flex: 12;
+}
+
+@include breakpoints.l {
+  .l-flex-hide {
+      display: none;
+  }
+
+  .l-flex-show {
+      display: flex;
+  }
+
+  .l-flex-column {
+      flex-direction: column;
+  }
+
+  .l-flex-row {
+      flex-direction: row;
+  }
+
+  .l-flex-column-reverse {
+      flex-direction: column-reverse;
+  }
+  
+  .l-flex-row-reverse {
+      flex-direction: row-reverse;
+  }
+
+  .l-justify-start {
+    justify-content: flex-start;
+  }
+    
+  .l-justify-center {
+    justify-content: center;
+  }
+  
+  .l-justify-end {
+    justify-content: flex-end;
+  }
+  
+  .l-justify-between {
+    justify-content: space-between;
+  }
+  
+  .l-justify-around {
+    justify-content: space-around;
+  }
+  
+  .l-justify-even {
+    justify-content: space-evenly;
+  }
+  
+  .l-justify-stretch {
+    justify-content: stretch;
+  }
+  
+  .l-align-start {
+    align-items: flex-start;
+  }
+  
+  .l-align-center {
+    align-items: center;
+  }
+  
+  .l-align-end {
+    align-items: flex-end;
+  }
+  
+  .l-align-between {
+    align-items: space-between;
+  }
+  
+  .l-align-around {
+    align-items: space-around;
+  }
+  
+  .l-align-even {
+    align-items: space-evenly;
+  }
+  
+  .l-align-stretch {
+    align-items: stretch;
+  }
+  
+  .l-center {
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+@include breakpoints.m {
+  .m-flex-hide {
+      display: none;
+  }
+
+  .m-flex-show {
+      display: flex;
+  }
+
+  .m-flex-column {
+      flex-direction: column;
+  }
+
+  .m-flex-row {
+      flex-direction: row;
+  }
+
+  .m-flex-column-reverse {
+      flex-direction: column-reverse;
+  }
+  
+  .m-flex-row-reverse {
+      flex-direction: row-reverse;
+  }
+
+  .m-justify-start {
+    justify-content: flex-start;
+  }
+    
+  .m-justify-center {
+    justify-content: center;
+  }
+  
+  .m-justify-end {
+    justify-content: flex-end;
+  }
+  
+  .m-justify-between {
+    justify-content: space-between;
+  }
+  
+  .m-justify-around {
+    justify-content: space-around;
+  }
+  
+  .m-justify-even {
+    justify-content: space-evenly;
+  }
+  
+  .m-justify-stretch {
+    justify-content: stretch;
+  }
+  
+  .m-align-start {
+    align-items: flex-start;
+  }
+  
+  .m-align-center {
+    align-items: center;
+  }
+  
+  .m-align-end {
+    align-items: flex-end;
+  }
+  
+  .m-align-between {
+    align-items: space-between;
+  }
+  
+  .m-align-around {
+    align-items: space-around;
+  }
+  
+  .m-align-even {
+    align-items: space-evenly;
+  }
+  
+  .m-align-stretch {
+    align-items: stretch;
+  }
+  
+  .m-center {
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+@include breakpoints.s {
+  .s-flex-hide {
+      display: none;
+  }
+
+  .s-flex-show {
+      display: flex;
+  }
+
+  .s-flex-column {
+      flex-direction: column;
+  }
+
+  .s-flex-row {
+      flex-direction: row;
+  }
+
+  .s-flex-column-reverse {
+      flex-direction: column-reverse;
+  }
+  
+  .s-flex-row-reverse {
+      flex-direction: row-reverse;
+  }
+  
+  .s-justify-start {
+    justify-content: flex-start;
+  }
+    
+  .s-justify-center {
+    justify-content: center;
+  }
+  
+  .s-justify-end {
+    justify-content: flex-end;
+  }
+  
+  .s-justify-between {
+    justify-content: space-between;
+  }
+  
+  .s-justify-around {
+    justify-content: space-around;
+  }
+  
+  .s-justify-even {
+    justify-content: space-evenly;
+  }
+  
+  .s-justify-stretch {
+    justify-content: stretch;
+  }
+  
+  .s-align-start {
+    align-items: flex-start;
+  }
+  
+  .s-align-center {
+    align-items: center;
+  }
+  
+  .s-align-end {
+    align-items: flex-end;
+  }
+  
+  .s-align-between {
+    align-items: space-between;
+  }
+  
+  .s-align-around {
+    align-items: space-around;
+  }
+  
+  .s-align-even {
+    align-items: space-evenly;
+  }
+  
+  .s-align-stretch {
+    align-items: stretch;
+  }
+  
+  .s-center {
+    align-items: center;
+    justify-content: center;
+  }
 }

package/dist/styles/global.scss

@@ -7,39 +7,6 @@ h1, h2, h3, h4, h5, h6 {
     scroll-margin-top: var(--static-space-80);
 }
 
-ul, ol {
-    margin: 0;
-    width: 100%;
-}
-
-ul {
-    padding: 0 0 0 var(--static-space-20);
-
-    li {
-        padding-left: var(--static-space-8);
-    }
-}
-
-ol {
-    padding: 0 0 0 var(--static-space-20);
-
-    li {
-        padding-left: var(--static-space-16);
-    }
-}
-
-li {
-    padding: 0;
-    line-height: 175%;
-    font-size: inherit;
-    color: inherit;
-    margin-bottom: var(--static-space-12);
-
-    &::marker {
-        color: var(--brand-on-background-weak);
-    }
-}
-
 img {
     user-select: none;
 }

package/dist/styles/grid.scss

@@ -1,5 +1,9 @@
 @use "../styles/breakpoints.scss" as breakpoints;
 
+.display-grid {
+  display: grid;
+}
+
 .columns-1 {
   grid-template-columns: 1fr;
 }
@@ -48,102 +52,184 @@
   grid-template-columns: repeat(12, 1fr);
 }
 
+.grid-hide {
+  display: none;
+}
+
+.grid-show {
+  display: grid;
+}
+
+@include breakpoints.l {
+  .l-columns-1 {
+      grid-template-columns: 1fr;
+  }
+
+  .l-columns-2 {
+      grid-template-columns: repeat(2, 1fr);
+  }
+
+  .l-columns-3 {
+      grid-template-columns: repeat(3, 1fr);
+  }
+
+  .l-columns-4 {
+      grid-template-columns: repeat(4, 1fr);
+  }
+
+  .l-columns-5 {
+      grid-template-columns: repeat(5, 1fr);
+  }
+
+  .l-columns-6 {
+      grid-template-columns: repeat(6, 1fr);
+  }
+
+  .l-columns-7 {
+      grid-template-columns: repeat(7, 1fr);
+  }
+
+  .l-columns-8 {
+      grid-template-columns: repeat(8, 1fr);
+  }
+
+  .l-columns-9 {
+      grid-template-columns: repeat(9, 1fr);
+  }
+
+  .l-columns-10 {
+      grid-template-columns: repeat(10, 1fr);
+  }
+
+  .l-columns-11 {
+      grid-template-columns: repeat(11, 1fr);
+  }
+
+  .l-columns-12 {
+      grid-template-columns: repeat(12, 1fr);
+  }
+
+  .l-grid-hide {
+    display: none;
+  }
+
+  .l-grid-show {
+    display: grid;
+  }
+}
+
 @include breakpoints.m {
-  .tablet-columns-1 {
+  .m-columns-1 {
       grid-template-columns: 1fr;
   }
 
-  .tablet-columns-2 {
+  .m-columns-2 {
       grid-template-columns: repeat(2, 1fr);
   }
 
-  .tablet-columns-3 {
+  .m-columns-3 {
       grid-template-columns: repeat(3, 1fr);
   }
 
-  .tablet-columns-4 {
+  .m-columns-4 {
       grid-template-columns: repeat(4, 1fr);
   }
 
-  .tablet-columns-5 {
+  .m-columns-5 {
       grid-template-columns: repeat(5, 1fr);
   }
 
-  .tablet-columns-6 {
+  .m-columns-6 {
       grid-template-columns: repeat(6, 1fr);
   }
 
-  .tablet-columns-7 {
+  .m-columns-7 {
       grid-template-columns: repeat(7, 1fr);
   }
 
-  .tablet-columns-8 {
+  .m-columns-8 {
       grid-template-columns: repeat(8, 1fr);
   }
 
-  .tablet-columns-9 {
+  .m-columns-9 {
       grid-template-columns: repeat(9, 1fr);
   }
 
-  .tablet-columns-10 {
+  .m-columns-10 {
       grid-template-columns: repeat(10, 1fr);
   }
 
-  .tablet-columns-11 {
+  .m-columns-11 {
       grid-template-columns: repeat(11, 1fr);
   }
 
-  .tablet-columns-12 {
+  .m-columns-12 {
       grid-template-columns: repeat(12, 1fr);
   }
+
+  .m-grid-hide {
+    display: none;
+  }
+
+  .m-grid-show {
+    display: grid;
+  }
 }
 
 @include breakpoints.s {
-  .mobile-columns-1 {
+  .s-columns-1 {
       grid-template-columns: 1fr;
   }
 
-  .mobile-columns-2 {
+  .s-columns-2 {
       grid-template-columns: repeat(2, 1fr);
   }
 
-  .mobile-columns-3 {
+  .s-columns-3 {
       grid-template-columns: repeat(3, 1fr);
   }
 
-  .mobile-columns-4 {
+  .s-columns-4 {
       grid-template-columns: repeat(4, 1fr);
   }
 
-  .mobile-columns-5 {
+  .s-columns-5 {
       grid-template-columns: repeat(5, 1fr);
   }
 
-  .mobile-columns-6 {
+  .s-columns-6 {
       grid-template-columns: repeat(6, 1fr);
   }
 
-  .mobile-columns-7 {
+  .s-columns-7 {
       grid-template-columns: repeat(7, 1fr);
   }
 
-  .mobile-columns-8 {
+  .s-columns-8 {
       grid-template-columns: repeat(8, 1fr);
   }
 
-  .mobile-columns-9 {
+  .s-columns-9 {
       grid-template-columns: repeat(9, 1fr);
   }
 
-  .mobile-columns-10 {
+  .s-columns-10 {
       grid-template-columns: repeat(10, 1fr);
   }
 
-  .mobile-columns-11 {
+  .s-columns-11 {
       grid-template-columns: repeat(11, 1fr);
   }
 
-  .mobile-columns-12 {
+  .s-columns-12 {
       grid-template-columns: repeat(12, 1fr);
   }
+
+  .s-grid-hide {
+    display: none;
+  }
+
+  .s-grid-show {
+    display: grid;
+  }
 }

package/dist/styles/index.scss

@@ -1,15 +1,14 @@
-@use "./breakpoints.scss";
-@use "./spacing.scss";
-@use "./border.scss";
-@use "./color.scss";
-@use "./background.scss";
-@use "./typography.scss";
-@use "./global.scss";
-@use "./layout.scss";
-@use "./shadow.scss";
-@use "./size.scss";
-@use "./display.scss";
-@use "./position.scss";
-@use "./grid.scss";
-@use "./flex.scss";
+@use "./breakpoints.scss";
+@use "./spacing.scss";
+@use "./border.scss";
+@use "./color.scss";
+@use "./background.scss";
+@use "./typography.scss";
+@use "./global.scss";
+@use "./shadow.scss";
+@use "./size.scss";
+@use "./display.scss";
+@use "./position.scss";
+@use "./grid.scss";
+@use "./flex.scss";
 @use "./utilities.scss";