@once-ui-system/core 1.0.0

package/dist/styles/display.scss

@@ -0,0 +1,211 @@
+.overflow-auto {
+  overflow: auto;
+}
+
+.overflow-x-scroll{
+  overflow-x: scroll;
+}
+
+.overflow-x-auto {
+  overflow-x: auto;
+}
+
+.overflow-y-auto{
+  overflow-y: auto;
+}
+
+.overflow-y-scroll{
+  overflow-y: scroll;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.overflow-scroll{
+  overflow: scroll;
+}
+
+.overflow-x-hidden {
+  overflow-x: hidden;
+}
+
+.overflow-y-hidden{
+  overflow-y: hidden;
+}
+
+.opacity-0 {
+  opacity: 0;
+}
+
+.opacity-10 {
+  opacity: 0.1;
+}
+
+.opacity-20 {
+  opacity: 0.2;
+}
+
+.opacity-30 {
+  opacity: 0.3;
+}
+
+.opacity-40 {
+  opacity: 0.4;
+}
+
+.opacity-50 {
+  opacity: 0.5;
+}
+
+.opacity-60 {
+  opacity: 0.6;
+}
+
+.opacity-70 {
+  opacity: 0.7;
+}
+
+.opacity-80 {
+  opacity: 0.8;
+}
+
+.opacity-90 {
+  opacity: 0.9;
+}
+
+.opacity-100 {
+  opacity: 1;
+}
+
+.z-index--1 {
+  z-index: -1;
+}
+
+.z-index-0 {
+  z-index: 0;
+}
+
+.z-index-1 {
+  z-index: 1;
+}
+
+.z-index-2 {
+  z-index: 2;
+}
+
+.z-index-3 {
+  z-index: 3;
+}
+
+.z-index-4 {
+  z-index: 4;
+}
+
+.z-index-5 {
+  z-index: 5;
+}
+
+.z-index-6 {
+  z-index: 6;
+}
+
+.z-index-7 {
+  z-index: 7;
+}
+
+.z-index-8 {
+  z-index: 8;
+}
+
+.z-index-9 {
+  z-index: 9;
+}
+
+.z-index-10 {
+  z-index: 10;
+}
+
+.transition-micro-short {
+  transition: var(--transition-micro-short);
+}
+
+.transition-micro-medium {
+  transition: var(--transition-micro-medium);
+}
+
+.transition-micro-long {
+  transition: var(--transition-micro-long);
+}
+
+.transition-macro-short {
+  transition: var(--transition-macro-short);
+}
+
+.transition-macro-medium {
+  transition: var(--transition-macro-medium);
+}
+
+.transition-macro-long {
+  transition: var(--transition-macro-long);
+}
+
+.pointer-events-none {
+  pointer-events: none;
+}
+
+.pointer-events-auto {
+  pointer-events: auto;
+}
+
+.pointer-events-all {
+  pointer-events: all;
+}
+
+.cursor-interactive {
+  cursor: var(--cursor-interactive);
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.cursor-default {
+  cursor: default;
+}
+
+.cursor-text {
+  cursor: text;
+}
+
+.cursor-move {
+  cursor: move;
+}
+
+.cursor-not-allowed {
+  cursor: not-allowed;
+}
+
+.cursor-wait {
+  cursor: wait;
+}
+
+.cursor-help {
+  cursor: help;
+}
+
+.cursor-grab {
+  cursor: grab;
+}
+
+.cursor-grabbing {
+  cursor: grabbing;
+}
+
+.cursor-zoom-in {
+  cursor: zoom-in;
+}
+
+.cursor-zoom-out {
+  cursor: zoom-out;
+}

package/dist/styles/flex.scss

@@ -0,0 +1,124 @@
+.justify-start {
+  justify-content: flex-start;
+}
+  
+.justify-center {
+  justify-content: center;
+}
+
+.justify-end {
+  justify-content: flex-end;
+}
+
+.justify-space-between {
+  justify-content: space-between;
+}
+
+.justify-space-around {
+  justify-content: space-around;
+}
+
+.justify-space-evenly {
+  justify-content: space-evenly;
+}
+
+.justify-stretch {
+  justify-content: stretch;
+}
+
+.align-start {
+  align-items: flex-start;
+}
+
+.align-center {
+  align-items: center;
+}
+
+.align-end {
+  align-items: flex-end;
+}
+
+.align-space-between {
+  align-items: space-between;
+}
+
+.align-space-around {
+  align-items: space-around;
+}
+
+.align-space-evenly {
+  align-items: space-evenly;
+}
+
+.align-stretch {
+  align-items: stretch;
+}
+
+.center {
+  align-items: center;
+  justify-content: center;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.flex-nowrap {
+  flex-wrap: nowrap;
+}
+
+.flex-wrap-reverse {
+  flex-wrap: wrap-reverse;
+}
+
+.flex-0 {
+  flex: 0;
+}
+
+.flex-1 {
+  flex: 1;
+}
+
+.flex-2 {
+  flex: 2;
+}
+
+.flex-3 {
+  flex: 3;
+}
+
+.flex-4 {
+  flex: 4;
+}
+
+.flex-5 {
+  flex: 5;
+}
+
+.flex-6 {
+  flex: 6;
+}
+
+.flex-7 {
+  flex: 7;
+}
+
+.flex-8 {
+  flex: 8;
+}
+
+.flex-9 { 
+  flex: 9;
+}
+
+.flex-10 {
+  flex: 10;
+}
+
+.flex-11 {
+  flex: 11;
+}
+
+.flex-12 {
+  flex: 12;
+}

package/dist/styles/global.scss

@@ -0,0 +1,111 @@
+* {
+    box-sizing: border-box;
+    scroll-behavior: smooth;
+}
+
+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);
+    }
+}
+
+blockquote {
+    display: flex;
+    margin: var(--static-space-16) 0;
+    border-radius: var(--radius-m);
+    background: var(--brand-alpha-weak);
+    overflow: hidden;
+    text-wrap: balance;
+    backdrop-filter: blur(var(--static-space-2));
+    border: 1px dashed var(--brand-alpha-medium);
+    max-width: var(--responsive-width-xs);
+    padding: var(--static-space-12) var(--static-space-24) var(--static-space-8) var(--static-space-24);
+    width: 100%;
+
+    span {
+        margin: 0 !important;
+        padding: var(--static-space-16) var(--static-space-24);
+        color: var(--brand-on-background-medium) !important;
+        font-family: var(--font-family-code) !important;
+    }
+}
+
+img {
+    user-select: none;
+}
+
+/* SELECTION */
+::selection {
+    background: var(--neutral-on-background-medium);
+    color: var(--neutral-background-strong);
+}
+
+/* LINK */
+a:not(.button) {
+    color: var(--brand-on-background-medium);
+    text-decoration: none;
+    transition: var(--transition-micro-medium);
+    text-decoration-thickness: 1px;
+    text-underline-offset: 0.25em;
+    text-decoration-color: var(--neutral-border-strong) !important;
+
+    &:hover {
+        text-decoration: none;
+        color: var(--brand-on-background-strong);
+    }
+}
+
+/* SCROLLBAR */
+::-webkit-scrollbar {
+    background: var(--static-transparent);
+    width: var(--static-space-8);
+    height: var(--static-space-8);
+}
+
+::-webkit-scrollbar-track {
+    background: var(--static-transparent);
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--neutral-alpha-medium);
+    transition: var(--transition-micro-medium);
+
+    &:hover {
+        background: var(--neutral-alpha-strong);
+    }
+}
+
+::-webkit-scrollbar-corner {
+    background-color: var(--static-transparent);
+}

package/dist/styles/grid.scss

@@ -0,0 +1,147 @@
+.columns-1 {
+  grid-template-columns: 1fr;
+}
+
+.columns-2 {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.columns-3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.columns-4 {
+  grid-template-columns: repeat(4, 1fr);
+}
+
+.columns-5 {
+  grid-template-columns: repeat(5, 1fr);
+}
+
+.columns-6 {
+  grid-template-columns: repeat(6, 1fr);
+}
+
+.columns-7 {
+  grid-template-columns: repeat(7, 1fr);
+}
+
+.columns-8 {
+  grid-template-columns: repeat(8, 1fr);
+}
+
+.columns-8 {
+  grid-template-columns: repeat(9, 1fr);
+}
+
+.columns-8 {
+  grid-template-columns: repeat(10, 1fr);
+}
+
+.columns-8 {
+  grid-template-columns: repeat(11, 1fr);
+}
+
+.columns-8 {
+  grid-template-columns: repeat(12, 1fr);
+}
+
+@media (--m) {
+  .tablet-columns-1 {
+      grid-template-columns: 1fr;
+  }
+
+  .tablet-columns-2 {
+      grid-template-columns: repeat(2, 1fr);
+  }
+
+  .tablet-columns-3 {
+      grid-template-columns: repeat(3, 1fr);
+  }
+
+  .tablet-columns-4 {
+      grid-template-columns: repeat(4, 1fr);
+  }
+
+  .tablet-columns-5 {
+      grid-template-columns: repeat(5, 1fr);
+  }
+
+  .tablet-columns-6 {
+      grid-template-columns: repeat(6, 1fr);
+  }
+
+  .tablet-columns-7 {
+      grid-template-columns: repeat(7, 1fr);
+  }
+
+  .tablet-columns-8 {
+      grid-template-columns: repeat(8, 1fr);
+  }
+
+  .tablet-columns-8 {
+      grid-template-columns: repeat(9, 1fr);
+  }
+
+  .tablet-columns-8 {
+      grid-template-columns: repeat(10, 1fr);
+  }
+
+  .tablet-columns-8 {
+      grid-template-columns: repeat(11, 1fr);
+  }
+
+  .tablet-columns-8 {
+      grid-template-columns: repeat(12, 1fr);
+  }
+}
+
+@media (--s) {
+  .mobile-columns-1 {
+      grid-template-columns: 1fr;
+  }
+
+  .mobile-columns-2 {
+      grid-template-columns: repeat(2, 1fr);
+  }
+
+  .mobile-columns-3 {
+      grid-template-columns: repeat(3, 1fr);
+  }
+
+  .mobile-columns-4 {
+      grid-template-columns: repeat(4, 1fr);
+  }
+
+  .mobile-columns-5 {
+      grid-template-columns: repeat(5, 1fr);
+  }
+
+  .mobile-columns-6 {
+      grid-template-columns: repeat(6, 1fr);
+  }
+
+  .mobile-columns-7 {
+      grid-template-columns: repeat(7, 1fr);
+  }
+
+  .mobile-columns-8 {
+      grid-template-columns: repeat(8, 1fr);
+  }
+
+  .mobile-columns-8 {
+      grid-template-columns: repeat(9, 1fr);
+  }
+
+  .mobile-columns-8 {
+      grid-template-columns: repeat(10, 1fr);
+  }
+
+  .mobile-columns-8 {
+      grid-template-columns: repeat(11, 1fr);
+  }
+
+  .mobile-columns-8 {
+      grid-template-columns: repeat(12, 1fr);
+  }
+}

package/dist/styles/index.scss

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

package/dist/styles/layout.scss

@@ -0,0 +1,117 @@
+.display-flex {
+    display: flex;
+}
+
+.display-grid {
+    display: grid;
+}
+
+.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 !important;
+}
+
+.m-flex-show {
+    display: none !important;
+}
+
+.s-flex-show {
+    display: none !important;
+}
+
+@media (--l) {
+    .l-flex-hide {
+        display: none !important;
+    }
+
+    .l-flex-show {
+        display: flex !important;
+    }
+
+    .l-flex-column {
+        flex-direction: column !important;
+    }
+
+    .l-flex-row {
+        flex-direction: row !important;
+    }
+
+    .l-flex-column-reverse {
+        flex-direction: column-reverse !important;
+    }
+    
+    .l-flex-row-reverse {
+        flex-direction: row-reverse !important;
+    }
+}
+
+@media (--m) {
+    .m-flex-hide {
+        display: none !important;
+    }
+
+    .m-flex-show {
+        display: flex !important;
+    }
+
+    .m-flex-column {
+        flex-direction: column !important;
+    }
+
+    .m-flex-row {
+        flex-direction: row !important;
+    }
+
+    .m-flex-column-reverse {
+        flex-direction: column-reverse !important;
+    }
+    
+    .m-flex-row-reverse {
+        flex-direction: row-reverse !important;
+    }
+}
+
+@media (--s) {
+    .s-flex-hide {
+        display: none !important;
+    }
+
+    .s-flex-show {
+        display: flex !important;
+    }
+
+    .s-flex-column {
+        flex-direction: column !important;
+    }
+
+    .s-flex-row {
+        flex-direction: row !important;
+    }
+
+    .s-flex-column-reverse {
+        flex-direction: column-reverse !important;
+    }
+    
+    .s-flex-row-reverse {
+        flex-direction: row-reverse !important;
+    }
+}