@studio-helga/once-ui-core 1.7.8

package/dist/styles/color.scss

@@ -0,0 +1,183 @@
+  /****************************/
+ /*          COLOR           */
+/****************************/
+
+/* NEUTRAL */
+.color-inherit {
+    color: inherit;
+}
+
+/* NEUTRAL */
+.neutral-on-background-weak {
+    color: var(--neutral-on-background-weak);
+}
+
+.neutral-on-background-medium {
+    color: var(--neutral-on-background-medium);
+}
+
+.neutral-on-background-strong {
+    color: var(--neutral-on-background-strong);
+}
+
+.neutral-on-solid-weak {
+    color: var(--neutral-on-solid-weak);
+}
+
+.neutral-on-solid-medium {
+    color: var(--neutral-on-solid-medium);
+}
+
+.neutral-on-solid-strong {
+    color: var(--neutral-on-solid-strong);
+}
+
+/* BRAND */
+.brand-on-background-weak {
+    color: var(--brand-on-background-weak);
+}
+
+.brand-on-background-medium {
+    color: var(--brand-on-background-medium);
+}
+
+.brand-on-background-strong {
+    color: var(--brand-on-background-strong);
+}
+
+.brand-on-solid-weak {
+    color: var(--brand-on-solid-weak);
+}
+
+.brand-on-solid-medium {
+    color: var(--brand-on-solid-medium);
+}
+
+.brand-on-solid-strong {
+    color: var(--brand-on-solid-strong);
+}
+
+/* ACCENT */
+.accent-on-background-weak {
+    color: var(--accent-on-background-weak);
+}
+
+.accent-on-background-medium {
+    color: var(--accent-on-background-medium);
+}
+
+.accent-on-background-strong {
+    color: var(--accent-on-background-strong);
+}
+
+.accent-on-solid-weak {
+    color: var(--accent-on-solid-weak);
+}
+
+.accent-on-solid-medium {
+    color: var(--accent-on-solid-medium);
+}
+
+.accent-on-solid-strong {
+    color: var(--accent-on-solid-strong);
+}
+
+/* INFO */
+.info-on-background-weak {
+    color: var(--info-on-background-weak);
+}
+
+.info-on-background-medium {
+    color: var(--info-on-background-medium);
+}
+
+.info-on-background-strong {
+    color: var(--info-on-background-strong);
+}
+
+.info-on-solid-weak {
+    color: var(--info-on-solid-weak);
+}
+
+.info-on-solid-medium {
+    color: var(--info-on-solid-medium);
+}
+
+.info-on-solid-strong {
+    color: var(--info-on-solid-strong);
+}
+
+/* DANGER */
+.danger-on-background-weak {
+    color: var(--danger-on-background-weak);
+}
+
+.danger-on-background-medium {
+    color: var(--danger-on-background-medium);
+}
+
+.danger-on-background-strong {
+    color: var(--danger-on-background-strong);
+}
+
+.danger-on-solid-weak {
+    color: var(--danger-on-solid-weak);
+}
+
+.danger-on-solid-medium {
+    color: var(--danger-on-solid-medium);
+}
+
+.danger-on-solid-strong {
+    color: var(--danger-on-solid-strong);
+}
+
+/* WARNING */
+.warning-on-background-weak {
+    color: var(--warning-on-background-weak);
+}
+
+.warning-on-background-medium {
+    color: var(--warning-on-background-medium);
+}
+
+.warning-on-background-strong {
+    color: var(--warning-on-background-strong);
+}
+
+.warning-on-solid-weak {
+    color: var(--warning-on-solid-weak);
+}
+
+.warning-on-solid-medium {
+    color: var(--warning-on-solid-medium);
+}
+
+.warning-on-solid-strong {
+    color: var(--warning-on-solid-strong);
+}
+
+/* SUCCESS */
+.success-on-background-weak {
+    color: var(--success-on-background-weak);
+}
+
+.success-on-background-medium {
+    color: var(--success-on-background-medium);
+}
+
+.success-on-background-strong {
+    color: var(--success-on-background-strong);
+}
+
+.success-on-solid-weak {
+    color: var(--success-on-solid-weak);
+}
+
+.success-on-solid-medium {
+    color: var(--success-on-solid-medium);
+}
+
+.success-on-solid-strong {
+    color: var(--success-on-solid-strong);
+}

package/dist/styles/display.scss

@@ -0,0 +1,391 @@
+@use "../styles/breakpoints.scss" as breakpoints;
+
+.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;
+}
+
+.scrollbar-minimal {
+  &::-webkit-scrollbar {
+      background: var(--static-transparent);
+      width: var(--static-space-4);
+      height: var(--static-space-4);
+  }
+
+  &::-webkit-scrollbar-track {
+      background: var(--static-transparent);
+  }
+
+  &::-webkit-scrollbar-thumb {
+      background: var(--neutral-alpha-medium);
+      transition: var(--transition-micro-medium);
+      border-radius: var(--radius-full);
+
+      &:hover {
+          background: var(--neutral-alpha-strong);
+      }
+  }
+
+  &::-webkit-scrollbar-corner {
+      background-color: var(--static-transparent);
+  }
+}
+
+@include breakpoints.l {
+  .l-overflow-auto {
+    overflow: auto;
+  }
+  
+  .l-overflow-x-scroll{
+    overflow-x: scroll;
+  }
+  
+  .l-overflow-x-auto {
+    overflow-x: auto;
+  }
+  
+  .l-overflow-y-auto{
+    overflow-y: auto;
+  }
+  
+  .l-overflow-y-scroll{
+    overflow-y: scroll;
+  }
+  
+  .l-overflow-hidden {
+    overflow: hidden;
+  }
+  
+  .l-overflow-scroll{
+    overflow: scroll;
+  }
+  
+  .l-overflow-x-hidden {
+    overflow-x: hidden;
+  }
+  
+  .l-overflow-y-hidden{
+    overflow-y: hidden;
+  }
+}
+
+@include breakpoints.m {
+  .m-overflow-auto {
+    overflow: auto;
+  }
+  
+  .m-overflow-x-scroll{
+    overflow-x: scroll;
+  }
+  
+  .m-overflow-x-auto {
+    overflow-x: auto;
+  }
+  
+  .m-overflow-y-auto{
+    overflow-y: auto;
+  }
+  
+  .m-overflow-y-scroll{
+    overflow-y: scroll;
+  }
+  
+  .m-overflow-hidden {
+    overflow: hidden;
+  }
+  
+  .m-overflow-scroll{
+    overflow: scroll;
+  }
+  
+  .m-overflow-x-hidden {
+    overflow-x: hidden;
+  }
+  
+  .m-overflow-y-hidden{
+    overflow-y: hidden;
+  }
+}
+
+@include breakpoints.s {
+  .s-overflow-auto {
+    overflow: auto;
+  }
+  
+  .s-overflow-x-scroll{
+    overflow-x: scroll;
+  }
+  
+  .s-overflow-x-auto {
+    overflow-x: auto;
+  }
+  
+  .s-overflow-y-auto{
+    overflow-y: auto;
+  }
+  
+  .s-overflow-y-scroll{
+    overflow-y: scroll;
+  }
+  
+  .s-overflow-hidden {
+    overflow: hidden;
+  }
+  
+  .s-overflow-scroll{
+    overflow: scroll;
+  }
+  
+  .s-overflow-x-hidden {
+    overflow-x: hidden;
+  }
+  
+  .s-overflow-y-hidden{
+    overflow-y: hidden;
+  }
+}
+
+@include breakpoints.xs {
+  .xs-overflow-auto {
+    overflow: auto;
+  }
+
+  .xs-overflow-x-scroll{
+    overflow-x: scroll;
+  }
+
+  .xs-overflow-x-auto {
+    overflow-x: auto;
+  }
+
+  .xs-overflow-y-auto{
+    overflow-y: auto;
+  }
+
+  .xs-overflow-y-scroll{
+    overflow-y: scroll;
+  }
+
+  .xs-overflow-hidden {
+    overflow: hidden;
+  }
+
+  .xs-overflow-scroll{
+    overflow: scroll;
+  }
+
+  .xs-overflow-x-hidden {
+    overflow-x: hidden;
+  }
+
+  .xs-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;
+}