@studio-helga/once-ui-core 1.7.8

package/dist/styles/border.scss

@@ -0,0 +1,546 @@
+  /****************************/
+ /*           RADIUS         */
+/****************************/
+
+.radius-none {
+    border-radius: none;
+}
+
+.radius-xl {
+    border-radius: var(--radius-xl);
+}
+
+.radius-xl-4 {
+    border-radius: var(--radius-xl-nest-4);
+}
+
+.radius-xl-8 {
+    border-radius: var(--radius-xl-nest-8);
+}
+
+.radius-l {
+    border-radius: var(--radius-l);
+}
+
+.radius-l-4 {
+    border-radius: var(--radius-l-nest-4);
+}
+
+.radius-l-8 {
+    border-radius: var(--radius-l-nest-8);
+}
+
+.radius-m {
+    border-radius: var(--radius-m);
+}
+
+.radius-m-4 {
+    border-radius: var(--radius-m-nest-4);
+}
+
+.radius-m-8 {
+    border-radius: var(--radius-m-nest-8);
+}
+
+.radius-s {
+    border-radius: var(--radius-s);
+}
+
+.radius-s-4 {
+    border-radius: var(--radius-s-nest-4);
+}
+
+.radius-s-8 {
+    border-radius: var(--radius-s-nest-8);
+}
+
+.radius-xs {
+    border-radius: var(--radius-xs);
+}
+
+.radius-xs-4 {
+    border-radius: var(--radius-xs-nest-4);
+}
+
+.radius-xs-8 {
+    border-radius: var(--radius-xs-nest-8);
+}
+
+.radius-full {
+    border-radius: var(--radius-full);
+}
+
+.radius-xs-top {
+    border-top-right-radius: var(--radius-xs);
+    border-top-left-radius: var(--radius-xs);
+}
+
+.radius-s-top {
+    border-top-right-radius: var(--radius-s);
+    border-top-left-radius: var(--radius-s);
+}
+
+.radius-m-top {
+    border-top-right-radius: var(--radius-m);
+    border-top-left-radius: var(--radius-m);
+}
+
+.radius-l-top {
+    border-top-right-radius: var(--radius-l);
+    border-top-left-radius: var(--radius-l);
+}
+
+.radius-xl-top {
+    border-top-right-radius: var(--radius-xl);
+    border-top-left-radius: var(--radius-xl);
+}
+
+.radius-full-top {
+    border-top-left-radius: var(--radius-full);
+    border-top-right-radius: var(--radius-full);
+}
+
+.radius-xs-right {
+    border-bottom-right-radius: var(--radius-xs);
+    border-top-right-radius: var(--radius-xs);
+}
+
+.radius-s-right {
+    border-bottom-right-radius: var(--radius-s);
+    border-top-right-radius: var(--radius-s);
+}
+
+.radius-m-right {
+    border-bottom-right-radius: var(--radius-m);
+    border-top-right-radius: var(--radius-m);
+}
+
+.radius-l-right {
+    border-bottom-right-radius: var(--radius-l);
+    border-top-right-radius: var(--radius-l);
+}
+
+.radius-xl-right {
+    border-bottom-right-radius: var(--radius-xl);
+    border-top-right-radius: var(--radius-xl);
+}
+
+.radius-full-right {
+    border-bottom-right-radius: var(--radius-full);
+    border-top-right-radius: var(--radius-full);
+}
+
+.radius-xs-bottom {
+    border-bottom-right-radius: var(--radius-xs);
+    border-bottom-left-radius: var(--radius-xs);
+}
+
+.radius-s-bottom {
+    border-bottom-right-radius: var(--radius-s);
+    border-bottom-left-radius: var(--radius-s);
+}
+
+.radius-m-bottom {
+    border-bottom-right-radius: var(--radius-m);
+    border-bottom-left-radius: var(--radius-m);
+}
+
+.radius-l-bottom {
+    border-bottom-right-radius: var(--radius-l);
+    border-bottom-left-radius: var(--radius-l);
+}
+
+.radius-xl-bottom {
+    border-bottom-right-radius: var(--radius-xl);
+    border-bottom-left-radius: var(--radius-xl);
+}
+
+.radius-full-bottom {
+    border-bottom-left-radius: var(--radius-full);
+    border-bottom-right-radius: var(--radius-full);
+}
+
+.radius-xs-left {
+    border-bottom-left-radius: var(--radius-xs);
+    border-top-left-radius: var(--radius-xs);
+}
+
+.radius-s-left {
+    border-bottom-left-radius: var(--radius-s);
+    border-top-left-radius: var(--radius-s);
+}
+
+.radius-m-left {
+    border-bottom-left-radius: var(--radius-m);
+    border-top-left-radius: var(--radius-m);
+}
+
+.radius-l-left {
+    border-bottom-left-radius: var(--radius-l);
+    border-top-left-radius: var(--radius-l);
+}
+
+.radius-xl-left {
+    border-bottom-left-radius: var(--radius-xl);
+    border-top-left-radius: var(--radius-xl);
+}
+
+.radius-full-left {
+    border-bottom-left-radius: var(--radius-full);
+    border-top-left-radius: var(--radius-full);
+}
+
+.radius-xs-top-left {
+    border-top-left-radius: var(--radius-xs);
+}
+
+.radius-s-top-left {
+    border-top-left-radius: var(--radius-s);
+}
+
+.radius-m-top-left {
+    border-top-left-radius: var(--radius-m);
+}
+
+.radius-l-top-left {
+    border-top-left-radius: var(--radius-l);
+}
+
+.radius-xl-top-left {
+    border-top-left-radius: var(--radius-xl);
+}
+
+.radius-full-top-left {
+    border-top-left-radius: var(--radius-full);
+}
+
+.radius-xs-top-right {
+    border-top-right-radius: var(--radius-xs);
+}
+
+.radius-s-top-right {
+    border-top-right-radius: var(--radius-s);
+}
+
+.radius-m-top-right {
+    border-top-right-radius: var(--radius-m);
+}
+
+.radius-l-top-right {
+    border-top-right-radius: var(--radius-l);
+}
+
+.radius-xl-top-right {
+    border-top-right-radius: var(--radius-xl);
+}
+
+.radius-full-top-right {
+    border-top-right-radius: var(--radius-full);
+}
+
+.radius-xs-bottom-right {
+    border-bottom-right-radius: var(--radius-xs);
+}
+
+.radius-s-bottom-right {
+    border-bottom-right-radius: var(--radius-s);
+}
+
+.radius-m-bottom-right {
+    border-bottom-right-radius: var(--radius-m);
+}
+
+.radius-l-bottom-right {
+    border-bottom-right-radius: var(--radius-l);
+}
+
+.radius-xl-bottom-right {
+    border-bottom-right-radius: var(--radius-xl);
+}
+
+.radius-full-bottom-right {
+    border-bottom-right-radius: var(--radius-full);
+}
+
+.radius-xs-bottom-left {
+    border-bottom-left-radius: var(--radius-xs);
+}
+
+.radius-s-bottom-left {
+    border-bottom-left-radius: var(--radius-s);
+}
+
+.radius-m-bottom-left {
+    border-bottom-left-radius: var(--radius-m);
+}
+
+.radius-l-bottom-left {
+    border-bottom-left-radius: var(--radius-l);
+}
+
+.radius-xl-bottom-left {
+    border-bottom-left-radius: var(--radius-xl);
+}
+
+.radius-full-bottom-left {
+    border-bottom-left-radius: var(--radius-full);
+}
+
+
+
+  /****************************/
+ /*           STYLE          */
+/****************************/
+
+.border-solid {
+    border-style: solid;
+}
+
+.border-dashed {
+    border-style: dashed;
+}
+
+.border-1 {
+    border-width: 1px;
+}
+
+.border-2 {
+    border-width: 2px;
+}
+
+.border-4 {
+    border-width: 4px;
+}
+
+.border-6 {
+    border-width: 6px;
+}
+
+.border-8 {
+    border-width: 8px;
+}
+
+.border-reset {
+    border-top-width: 0;
+    border-right-width: 0;
+    border-bottom-width: 0;
+    border-left-width: 0; 
+}
+
+.border-top-1 {
+    border-top-width: 1px;
+}
+
+.border-bottom-1 {
+    border-bottom-width: 1px;
+}
+
+.border-left-1 {
+    border-left-width: 1px;
+}
+
+.border-right-1 {
+    border-right-width: 1px;
+}
+
+.border-x-1 {
+    border-left-width: 1px;
+    border-right-width: 1px;
+}
+
+.border-y-1 {
+    border-top-width: 1px;
+    border-bottom-width: 1px;
+}
+
+  /****************************/
+ /*           COLOR          */
+/****************************/
+
+/* PAGE */
+.surface-border {
+    border-color: var(--surface-border);
+}
+
+.transparent-border {
+    border-color: var(--static-transparent);
+}
+
+.default-border {
+    border-color: var(--default-border);
+}
+
+/* NEUTRAL */
+.neutral-border-weak {
+    border-color: var(--neutral-border-weak);
+}
+
+.neutral-border-medium {
+    border-color: var(--neutral-border-medium);
+}
+
+.neutral-border-strong {
+    border-color: var(--neutral-border-strong);
+}
+
+.neutral-border-alpha-weak {
+    border-color: var(--neutral-alpha-weak);
+}
+
+.neutral-border-alpha-medium {
+    border-color: var(--neutral-alpha-medium);
+}
+
+.neutral-border-alpha-strong {
+    border-color: var(--neutral-alpha-strong);
+}
+
+/* BRAND */
+.brand-border-weak {
+    border-color: var(--brand-border-weak);
+}
+
+.brand-border-medium {
+    border-color: var(--brand-border-medium);
+}
+
+.brand-border-strong {
+    border-color: var(--brand-border-strong);
+}
+
+.brand-border-alpha-weak {
+    border-color: var(--brand-alpha-weak);
+}
+
+.brand-border-alpha-medium {
+    border-color: var(--brand-alpha-medium);
+}
+
+.brand-border-alpha-strong {
+    border-color: var(--brand-alpha-strong);
+}
+
+/* ACCENT */
+.accent-border-weak {
+    border-color: var(--accent-border-weak);
+}
+
+.accent-border-medium {
+    border-color: var(--accent-border-medium);
+}
+
+.accent-border-strong {
+    border-color: var(--accent-border-strong);
+}
+
+.accent-border-alpha-weak {
+    border-color: var(--accent-alpha-weak);
+}
+
+.accent-border-alpha-medium {
+    border-color: var(--accent-alpha-medium);
+}
+
+.accent-border-alpha-strong {
+    border-color: var(--accent-alpha-strong);
+}
+
+/* INFO */
+.info-border-weak {
+    border-color: var(--info-border-weak);
+}
+
+.info-border-medium {
+    border-color: var(--info-border-medium);
+}
+
+.info-border-strong {
+    border-color: var(--info-border-strong);
+}
+
+.info-border-alpha-weak {
+    border-color: var(--info-alpha-weak);
+}
+
+.info-border-alpha-medium {
+    border-color: var(--info-alpha-medium);
+}
+
+.info-border-alpha-strong {
+    border-color: var(--info-alpha-strong);
+}
+
+/* DANGER */
+.danger-border-weak {
+    border-color: var(--danger-border-weak);
+}
+
+.danger-border-medium {
+    border-color: var(--danger-border-medium);
+}
+
+.danger-border-strong {
+    border-color: var(--danger-border-strong);
+}
+
+.danger-border-alpha-weak {
+    border-color: var(--danger-alpha-weak);
+}
+
+.danger-border-alpha-medium {
+    border-color: var(--danger-alpha-medium);
+}
+
+.danger-border-alpha-strong {
+    border-color: var(--danger-alpha-strong);
+}
+
+/* WARNING */
+.warning-border-weak {
+    border-color: var(--warning-border-weak);
+}
+
+.warning-border-medium {
+    border-color: var(--warning-border-medium);
+}
+
+.warning-border-strong {
+    border-color: var(--warning-border-strong);
+}
+
+.warning-border-alpha-weak {
+    border-color: var(--warning-alpha-weak);
+}
+
+.warning-border-alpha-medium {
+    border-color: var(--warning-alpha-medium);
+}
+
+.warning-border-alpha-strong {
+    border-color: var(--warning-alpha-strong);
+}
+
+/* SUCCESS */
+.success-border-weak {
+    border-color: var(--success-border-weak);
+}
+
+.success-border-medium {
+    border-color: var(--success-border-medium);
+}
+
+.success-border-strong {
+    border-color: var(--success-border-strong);
+}
+
+.success-border-alpha-weak {
+    border-color: var(--success-alpha-weak);
+}
+
+.success-border-alpha-medium {
+    border-color: var(--success-alpha-medium);
+}
+
+.success-border-alpha-strong {
+    border-color: var(--success-alpha-strong);
+}

package/dist/styles/breakpoints.scss

@@ -0,0 +1,28 @@
+$breakpoint-xs: 480px;
+$breakpoint-s: 768px;
+$breakpoint-m: 1024px;
+$breakpoint-l: 1440px;
+
+@mixin xs {
+  @media (max-width: #{$breakpoint-xs}) {
+    @content;
+  }
+}
+
+@mixin s {
+  @media (max-width: #{$breakpoint-s}) {
+    @content;
+  }
+}
+
+@mixin m {
+  @media (max-width: #{$breakpoint-m}) {
+    @content;
+  }
+}
+
+@mixin l {
+  @media (max-width: #{$breakpoint-l}) {
+    @content;
+  }
+}