@once-ui-system/core 1.0.0

package/dist/styles/border.scss

@@ -0,0 +1,484 @@
+  /****************************/
+ /*           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-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-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-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-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-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-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-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);
+}
+
+
+
+  /****************************/
+ /*           STYLE          */
+/****************************/
+
+.border-solid {
+    border-style: solid;
+}
+
+.border-dashed {
+    border-style: dashed;
+}
+
+.border-1 {
+    border-width: 1px;
+}
+
+.border-2 {
+    border-width: 2px;
+}
+
+.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;
+}
+
+  /****************************/
+ /*           COLOR          */
+/****************************/
+
+/* PAGE */
+.surface-border {
+    border-color: var(--surface-border);
+}
+
+.transparent-border {
+    border-color: var(--static-transparent);
+}
+
+/* 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,3 @@
+@custom-media --s (max-width: 768px);
+@custom-media --m (max-width: 1024px);
+@custom-media --l (max-width: 1440px);

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);
+}