mosuk-ui 1.0.2 → 1.0.3

package/styles/utilities/actions/button/[size]/size.css

@@ -0,0 +1,354 @@
+@utility button-3xs {
+    height: calc(var(--spacing, 0.25rem) * 4);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: calc(var(--spacing, 0.25rem) * 1.125);
+
+    font-size: var(--text-3xs, 0.5rem);
+    text-wrap: nowrap;
+
+    padding-left: calc(var(--spacing, 0.25rem) * 2);
+    padding-right: calc(var(--spacing, 0.25rem) * 2);
+    border-radius: calc(infinity * 1px);
+    outline: none;
+
+    cursor: pointer;
+
+    transition: all 200ms ease-in-out;
+
+    & svg {
+        width: calc(var(--spacing, 0.25rem) * 2);
+        height: calc(var(--spacing, 0.25rem) * 2);
+        min-width: calc(var(--spacing, 0.25rem) * 2);
+        min-height: calc(var(--spacing, 0.25rem) * 2);
+
+        transition: all 200ms ease-in-out;
+    }
+
+    &:not(:hover) {
+        transition: all 600ms ease-in-out;
+
+        & svg {
+            transition: all 600ms ease-in-out;
+        }
+    }
+}
+
+@utility button-2xs {
+    height: calc(var(--spacing, 0.25rem) * 5);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: calc(var(--spacing, 0.25rem) * 1.25);
+
+    font-size: var(--text-3xs, 0.5rem);
+    text-wrap: nowrap;
+
+    padding-left: calc(var(--spacing, 0.25rem) * 2.5);
+    padding-right: calc(var(--spacing, 0.25rem) * 2.5);
+    border-radius: calc(infinity * 1px);
+    outline: none;
+
+    cursor: pointer;
+
+    transition: all 200ms ease-in-out;
+
+    & svg {
+        width: calc(var(--spacing, 0.25rem) * 2);
+        height: calc(var(--spacing, 0.25rem) * 2);
+        min-width: calc(var(--spacing, 0.25rem) * 2);
+        min-height: calc(var(--spacing, 0.25rem) * 2);
+
+        transition: all 200ms ease-in-out;
+    }
+
+    &:not(:hover) {
+        transition: all 600ms ease-in-out;
+
+        & svg {
+            transition: all 600ms ease-in-out;
+        }
+    }
+}
+
+@utility button-xs {
+    height: calc(var(--spacing, 0.25rem) * 6);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: calc(var(--spacing, 0.25rem) * 1.5);
+
+    font-size: var(--text-3xs, 0.5rem);
+    text-wrap: nowrap;
+
+    padding-left: calc(var(--spacing, 0.25rem) * 2.75);
+    padding-right: calc(var(--spacing, 0.25rem) * 2.75);
+    border-radius: calc(infinity * 1px);
+    outline: none;
+
+    cursor: pointer;
+
+    transition: all 200ms ease-in-out;
+
+    & svg {
+        width: calc(var(--spacing, 0.25rem) * 2.5);
+        height: calc(var(--spacing, 0.25rem) * 2.5);
+        min-width: calc(var(--spacing, 0.25rem) * 2.5);
+        min-height: calc(var(--spacing, 0.25rem) * 2.5);
+
+        margin-bottom: 1px;
+
+        transition: all 200ms ease-in-out;
+    }
+
+    &:not(:hover) {
+        transition: all 600ms ease-in-out;
+
+        & svg {
+            transition: all 600ms ease-in-out;
+        }
+    }
+}
+
+@utility button-sm {
+    height: calc(var(--spacing, 0.25rem) * 7);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: calc(var(--spacing, 0.25rem) * 1.75);
+
+    font-size: var(--text-2xs, 0.625rem);
+    text-wrap: nowrap;
+
+    padding-left: calc(var(--spacing, 0.25rem) * 3);
+    padding-right: calc(var(--spacing, 0.25rem) * 3);
+    border-radius: calc(infinity * 1px);
+    outline: none;
+
+    cursor: pointer;
+
+    transition: all 200ms ease-in-out;
+
+    & svg {
+        width: calc(var(--spacing, 0.25rem) * 3);
+        height: calc(var(--spacing, 0.25rem) * 3);
+        min-width: calc(var(--spacing, 0.25rem) * 3);
+        min-height: calc(var(--spacing, 0.25rem) * 3);
+
+        transition: all 200ms ease-in-out;
+    }
+
+    &:not(:hover) {
+        transition: all 600ms ease-in-out;
+
+        & svg {
+            transition: all 600ms ease-in-out;
+        }
+    }
+}
+
+@utility button-base {
+    height: calc(var(--spacing, 0.25rem) * 8);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: calc(var(--spacing, 0.25rem) * 2);
+
+    font-size: var(--text-xs, 0.75rem);
+    text-wrap: nowrap;
+
+    padding-left: calc(var(--spacing, 0.25rem) * 4);
+    padding-right: calc(var(--spacing, 0.25rem) * 4);
+    border-radius: calc(infinity * 1px);
+    outline: none;
+
+    cursor: pointer;
+
+    transition: all 200ms ease-in-out;
+
+    & svg {
+        width: calc(var(--spacing, 0.25rem) * 3.5);
+        height: calc(var(--spacing, 0.25rem) * 3.5);
+        min-width: calc(var(--spacing, 0.25rem) * 3.5);
+        min-height: calc(var(--spacing, 0.25rem) * 3.5);
+
+        transition: all 200ms ease-in-out;
+    }
+
+    &:not(:hover) {
+        transition: all 600ms ease-in-out;
+
+        & svg {
+            transition: all 600ms ease-in-out;
+        }
+    }
+}
+
+@utility button-md {
+    height: calc(var(--spacing, 0.25rem) * 9);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: calc(var(--spacing, 0.25rem) * 2);
+
+    font-size: 0.7875rem;
+    text-wrap: nowrap;
+
+    padding-left: calc(var(--spacing, 0.25rem) * 5);
+    padding-right: calc(var(--spacing, 0.25rem) * 5);
+    border-radius: calc(infinity * 1px);
+    outline: none;
+
+    cursor: pointer;
+
+    transition: all 200ms ease-in-out;
+
+    & svg {
+        width: calc(var(--spacing, 0.25rem) * 4);
+        height: calc(var(--spacing, 0.25rem) * 4);
+        min-width: calc(var(--spacing, 0.25rem) * 4);
+        min-height: calc(var(--spacing, 0.25rem) * 4);
+
+        margin-bottom: 1px;
+
+        transition: all 200ms ease-in-out;
+    }
+
+    &:not(:hover) {
+        transition: all 600ms ease-in-out;
+
+        & svg {
+            transition: all 600ms ease-in-out;
+        }
+    }
+}
+
+@utility button-lg {
+    height: calc(var(--spacing, 0.25rem) * 10);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: calc(var(--spacing, 0.25rem) * 2);
+
+    font-size: var(--text-sm, 0.875rem);
+    font-weight: 500;
+    text-wrap: nowrap;
+
+    padding-left: calc(var(--spacing, 0.25rem) * 5);
+    padding-right: calc(var(--spacing, 0.25rem) * 5);
+    border-radius: calc(infinity * 1px);
+    outline: none;
+
+    cursor: pointer;
+
+    transition: all 200ms ease-in-out;
+
+    & svg {
+        width: calc(var(--spacing, 0.25rem) * 4.5);
+        height: calc(var(--spacing, 0.25rem) * 4.5);
+        min-width: calc(var(--spacing, 0.25rem) * 4.5);
+        min-height: calc(var(--spacing, 0.25rem) * 4.5);
+
+        margin-bottom: 1px;
+
+        transition: all 200ms ease-in-out;
+    }
+
+    &:not(:hover) {
+        transition: all 600ms ease-in-out;
+
+        & svg {
+            transition: all 600ms ease-in-out;
+        }
+    }
+}
+
+@utility button-xl {
+    height: calc(var(--spacing, 0.25rem) * 11);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: calc(var(--spacing, 0.25rem) * 2.5);
+
+    font-size: var(--text-sm, 0.875rem);
+    font-weight: 500;
+    text-wrap: nowrap;
+
+    padding-left: calc(var(--spacing, 0.25rem) * 6);
+    padding-right: calc(var(--spacing, 0.25rem) * 6);
+    border-radius: calc(infinity * 1px);
+    outline: none;
+
+    cursor: pointer;
+
+    transition: all 200ms ease-in-out;
+
+    & svg {
+        width: calc(var(--spacing, 0.25rem) * 5);
+        height: calc(var(--spacing, 0.25rem) * 5);
+        min-width: calc(var(--spacing, 0.25rem) * 5);
+        min-height: calc(var(--spacing, 0.25rem) * 5);
+
+        margin-bottom: 1px;
+
+        transition: all 200ms ease-in-out;
+    }
+
+    &:not(:hover) {
+        transition: all 600ms ease-in-out;
+
+        & svg {
+            transition: all 600ms ease-in-out;
+        }
+    }
+}
+
+@utility button-2xl {
+    height: calc(var(--spacing, 0.25rem) * 12);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: calc(var(--spacing, 0.25rem) * 2.5);
+
+    font-size: var(--text-base, 1rem);
+    font-weight: 500;
+    text-wrap: nowrap;
+
+    padding-left: calc(var(--spacing, 0.25rem) * 6);
+    padding-right: calc(var(--spacing, 0.25rem) * 6);
+    border-radius: calc(infinity * 1px);
+    outline: none;
+
+    cursor: pointer;
+
+    transition: all 200ms ease-in-out;
+
+    & svg {
+        width: calc(var(--spacing, 0.25rem) * 5.5);
+        height: calc(var(--spacing, 0.25rem) * 5.5);
+        min-width: calc(var(--spacing, 0.25rem) * 5.5);
+        min-height: calc(var(--spacing, 0.25rem) * 5.5);
+
+        margin-bottom: 1px;
+
+        transition: all 200ms ease-in-out;
+    }
+
+    &:not(:hover) {
+        transition: all 600ms ease-in-out;
+
+        & svg {
+            transition: all 600ms ease-in-out;
+        }
+    }
+}

package/styles/utilities/actions/button/style.css

@@ -0,0 +1,6 @@
+@import './[size]/size.css';
+
+@import './[color]/fill.css';
+@import './[color]/glass.css';
+@import './[color]/transparent.css';
+@import './[color]/outline.css';