@awes-io/ui 2.87.0 → 2.88.0

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.88.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.87.0...@awes-io/ui@2.88.0) (2023-12-26)
+
+
+### Features
+
+* buttons components refactored ([6a94a81](https://github.com/awes-io/client/commit/6a94a81e5fa78b56222f10cca3e02ffe5e734320))
+* change style in menu items ([1bad6e8](https://github.com/awes-io/client/commit/1bad6e845bf637c18774e29c44093129a212190f))
+
+
+
+
+
 # [2.87.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.86.0...@awes-io/ui@2.87.0) (2023-12-13)
 
 

package/assets/css/components/_index.css

@@ -14,9 +14,7 @@
 @import './badge.css';
 @import './birthday-picker.css';
 @import './button.css';
-@import './button-fixed.css';
 @import './button-nav.css';
-@import './square-icon-button.css';
 @import './dock.css';
 @import './title.css';
 @import './file.css';
@@ -77,6 +75,7 @@
 @import './progress.css';
 
 @import './modal.css';
+@import './modal-buttons.css';
 @import './model-edit.css';
 
 @import './table.css';

package/assets/css/components/alert.css

@@ -33,21 +33,18 @@
 
         font-size: 0.875rem;
 
-        .aw-icon,
-        a, button {
+        :where(:is(a, button):not(.aw-button)) {
+            --btn-color: var(--aw-alert-on-color);
             color: var(--aw-alert-on-color);
         }
 
-        a, button {
-            white-space: nowrap;
-        }
-
-        a {
+        :where(:is(a, button):not(.aw-button)) {
             text-decoration: underline;
         }
 
-        a:hover {
-            color: color-mix(in srgb, var(--aw-alert-on-color) 90%, var(--c-mono-0));
+        a,
+        button {
+            white-space: nowrap;
         }
     }
 

package/assets/css/components/button.css

@@ -2,240 +2,328 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    position: relative;
-    text-align: center;
     vertical-align: middle;
+    gap: 0.5rem;
+
+    color: var(--btn-color);
+    background-color: var(--btn-bg-color);
+    border: var(--btn-border-width, 2px) solid
+        var(--btn-border-color, var(--btn-bg-color));
+    border-radius: var(--btn-radius, 0.625rem);
+
+    min-height: var(--btn-size, 3rem);
+    min-width: var(--btn-min-width, var(--btn-size, 3rem));
+    padding: var(--btn-padding-y, 0.375rem) var(--btn-padding-x, 0.375rem);
+
+    font-size: 1rem;
+    line-height: 1.125rem;
+    font-weight: 400;
+    text-align: center;
+    text-decoration: none;
+
+    position: relative;
+
+    transition: 100ms background-color, 100ms border-color;
+
+    &__icon-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+
+        font-size: 1rem;
+        color: var(--icon-color, currentColor);
+
+        &--highlighted {
+            width: 2.5rem;
+            height: 2.5rem;
+            border-radius: calc(
+                var(--btn-radius, 0.625rem) - var(--btn-padding-y, 0.375rem)
+            );
+
+            background-color: color-mix(
+                in srgb,
+                var(--icon-color, var(--btn-color)) 15%,
+                rgba(255, 255, 255, 0)
+            );
+            /* background-color: color-mix(in srgb, var(--btn-bg-color) 85%, var(--icon-color, var(--btn-color))); */
+        }
+
+        &--highlighted:where(&--left) {
+            transform: translateX(
+                calc(
+                    var(--btn-padding-y, 0.375rem) -
+                        var(--btn-padding-x, 0.5rem)
+                )
+            );
+        }
+
+        &--highlighted:where(&--right) {
+            transform: translateX(
+                calc(
+                    var(--btn-padding-x, 0.5rem) -
+                        var(--btn-padding-y, 0.375rem)
+                )
+            );
+        }
+
+        &--placeholder {
+            width: 2.5rem;
+            flex-shrink: 999999;
+        }
+    }
+
+    &__loader {
+        height: 0.5rem;
+        width: auto;
+        max-width: 80%;
+
+        fill: var(--icon-color, var(--btn-color));
+
+        position: absolute;
+        top: 50%;
+        left: 50%;
+
+        transform: translate(-50%, -50%);
+    }
+
+    &__lock {
+        display: flex;
+        align-items: center;
+        justify-content: center;
 
-    border-radius: 0.625rem;
-    border-width: 0.125rem;
-    border-style: solid;
-    transition: 100ms background, 100ms border-color;
+        position: absolute;
+        inset: 0;
+    }
+
+    &__lock span {
+        background-color: var(--c-surface);
+        color: var(--c-on-surface);
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 50%;
+
+        padding: 0.32em;
+        font-size: 1.2em;
+    }
 
     &:disabled {
-        opacity: 0.5;
         cursor: not-allowed;
         user-select: none !important;
     }
 
-    &:not([disabled]):active {
+    &:where(:not(:disabled)):active {
         transform: translateY(1px);
     }
 
-    &--size-sm {
-        padding: 0.25rem 0.5rem;
-        min-width: 5rem;
+    &--with-text:where(:not(&--auto-width)) {
+        --btn-min-width: 5rem;
+        --btn-padding-x: 1rem;
+    }
 
-        font-size: 1rem;
-        line-height: 1.125rem;
-        font-weight: 400;
-        height: 2rem;
+    &--with-text:where(&--size-md:not(&--auto-width)) {
+        --btn-min-width: 6.25rem;
     }
 
-    &--size-md {
-        padding: 0.8125rem 1rem;
-        min-width: 7rem;
+    &--with-text:where(&--size-lg:not(&--auto-width)) {
+        --btn-min-width: 7rem;
+    }
 
-        font-size: 1rem;
-        line-height: 1.125rem;
-        font-weight: 400;
-        height: 3rem;
+    &--size-xs {
+        --btn-size: 2rem;
+        --btn-padding-x: 0.375rem;
+
+        line-height: 1;
+    }
+
+    &--size-sm {
+        --btn-size: 2.5rem;
+    }
+
+    &--size-md {
+        --btn-size: 3rem;
     }
 
     &--size-lg {
-        padding: 1.0625rem 1rem;
-        min-width: 7rem;
+        --btn-size: 3.5rem;
+    }
 
-        font-size: 1rem;
-        line-height: 1.125rem;
-        font-weight: 400;
-        height: 3.5rem;
+    &--with-text {
+        --btn-padding-x: 1rem;
     }
 
-    &--square:where(&--size-sm) {
-        padding: 0.25rem;
-        min-width: 2rem;
+    &--with-text:where(&--size-xs) {
+        --btn-padding-x: 0.75rem;
     }
 
-    &--square:where(&--size-md) {
-        padding: 0.8125rem;
-        min-width: 3rem;
+    &--color-accent:where(&--theme-solid) {
+        --btn-bg-color: var(--c-accent);
+        --btn-color: var(--c-on-accent);
+        --btn-bg-hover: var(--c-accent-hover);
     }
 
-    &--square:where(&--size-lg) {
-        padding: 1.0625rem;
-        min-width: 3.5rem;
+    &--color-error:where(&--theme-solid) {
+        --btn-bg-color: var(--c-error);
+        --btn-color: var(--c-on-error);
+        --btn-bg-hover: var(--c-error-hover);
     }
 
-    &--theme-solid {
-        &.aw-button--color-accent {
-            background: var(--c-accent);
-            border-color: var(--c-accent);
-            color: var(--c-surface);
-
-            &:not(:disabled):hover {
-                background: var(--c-accent-hover);
-                border-color: var(--c-accent-hover);
-            }
-        }
+    &--color-dark:where(&--theme-solid) {
+        --btn-bg-color: var(--c-mono-100);
+        --btn-color: var(--c-on-mono-100);
+        --btn-bg-hover: var(--c-mono-0);
+    }
 
-        &.aw-button--color-error {
-            background: var(--c-error);
-            border-color: var(--c-error);
-            color: var(--c-surface);
+    &--color-mono-light:where(&--theme-solid) {
+        --btn-bg-color: var(--c-mono-900);
+        --btn-color: var(--c-on-mono-900);
+        --btn-bg-hover: var(--c-mono-800);
+        --icon-color: var(--c-mono-400);
+    }
 
-            &:not(:disabled):hover {
-                background: var(--c-error-hover);
-                border-color: var(--c-error-hover);
-            }
-        }
+    &--color-mono:where(&--theme-solid) {
+        --btn-bg-color: var(--c-mono-800);
+        --btn-color: var(--c-on-mono-800);
+        --btn-bg-hover: var(--c-mono-700);
+        --icon-color: var(--c-mono-400);
+    }
 
-        &.aw-button--color-mono {
-            background: var(--c-mono-800);
-            border-color: var(--c-mono-800);
-            color: var(--c-on-surface);
+    &--color-mono-dark:where(&--theme-solid) {
+        --btn-bg-color: var(--c-mono-700);
+        --btn-color: var(--c-on-mono-700);
+        --btn-bg-hover: var(--c-mono-600);
+        --icon-color: var(--c-mono-400);
+    }
 
-            &:not(:disabled):hover {
-                background: var(--c-mono-700);
-                border-color: var(--c-mono-700);
-            }
+    &--color-mono-darker:where(&--theme-solid) {
+        --btn-bg-color: var(--c-mono-600);
+        --btn-color: var(--c-on-mono-600);
+        --btn-bg-hover: var(--c-mono-500);
+        --icon-color: var(--c-mono-400);
+    }
 
-            .aw-button__icon-left, .aw-button__icon-right {
-                color: var(--c-mono-400);
-            }
-        }
+    &--theme-outline {
+        --btn-bg-color: transparent;
+        --btn-color: var(--c-mono-100);
+        --btn-border-color: var(--c-mono-800);
+        --icon-color: var(--c-mono-400);
+        --btn-border-hover-fallback: var(--c-mono-700);
+    }
 
-        &.aw-button--color-dark {
-            background: var(--c-mono-100);
-            border-color: var(--c-mono-100);
-            color: var(--c-surface);
+    &--theme-outline:where(:not(:disabled)):hover {
+        border-color: var(--btn-border-hover, var(--btn-border-hover-fallback));
+    }
 
-            &:not(:disabled):hover {
-                background: var(--c-mono-0);
-                border-color: var(--c-mono-0);
-            }
-        }
+    &--theme-outline:where(:not(&--loading, &--locked)):disabled {
+        --btn-color: var(--c-mono-400);
     }
 
-    &--theme-outline {
-        border-color: var(--c-mono-800);
-        color: var(--c-on-surface);
+    &--theme-solid {
+        --btn-border-width: 0;
+        --btn-bg-hover-fallback: color-mix(
+            in srgb,
+            var(--btn-bg-color) 90%,
+            rgb(var(--c-overlay-rgb))
+        );
+    }
 
-        &:not(:disabled):hover {
-            border-color: var(--c-mono-700);
-        }
+    &--theme-solid:where(:not(:disabled)):hover {
+        background-color: var(--btn-bg-hover, var(--btn-bg-hover-fallback));
+        border-color: var(--btn-bg-hover, var(--btn-bg-hover-fallback));
+    }
 
-        .aw-button__icon-left, .aw-button__icon-right {
-            color: var(--c-mono-400);
-        }
+    &--theme-solid:where(:is(&--color-mono, &--color-mono-light, &--color-mono-dark):not(&--with-text):not(:disabled)):hover {
+        --icon-color: var(--c-mono-100);
+    }
+
+    &--theme-solid:where(:not(&--loading, &--locked)):disabled {
+        --btn-bg-color: var(--c-mono-800);
+        --btn-color: var(--c-mono-400);
     }
 
     &--theme-icon {
-        @apply opacity-40;
-        border: 0;
+        opacity: 0.4;
 
-        &:not(:disabled):hover {
-            @apply opacity-90;
+        &:where(:not(:disabled)):hover {
+            opacity: 0.9;
         }
+    }
 
-        &.aw-button--size-md {
-            width: 2.5rem;
-            height: 2.5rem;
-            min-width: 0;
-            padding: 0;
-        }
+    &--theme-icon,
+    &:where(:not(&--with-text)) {
+        --btn-min-width: var(--btn-size);
+        flex-shrink: 0;
 
-        &.aw-button--size-lg {
-            width: 3.125rem;
-            height: 3.125rem;
-            min-width: 0;
-            padding: 0;
+        &:active {
+            transform: none;
         }
     }
 
     &--loading {
-        @apply opacity-50;
+        color: transparent;
+
         cursor: wait !important;
         user-select: none !important;
 
-        svg,
-        rect {
-            fill: currentColor;
+        &:disabled {
+            opacity: 1;
         }
     }
 
-    &__icon {
-        &-left {
-            fill: currentColor;
-        }
-
-        &-right {
-            fill: currentColor;
-        }
+    &--loading &__icon-wrapper {
+        color: transparent;
+        background-color: transparent;
     }
 
-    &__loader {
-        @apply absolute h-2;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        max-width: 80%;
+    &--icon-highlighted {
+        /* gap: 1rem; */
+        justify-content: space-between;
     }
+}
 
-    &__lock {
-        display: flex;
-        align-items: center;
-        justify-content: center;
+@screen lg {
+    .aw-button {
+        &--size-md {
+            --btn-size: 2.5rem;
+        }
 
-        position: absolute;
-        inset: 0;
+        &--size-xs,
+        &--size-sm,
+        &--size-md {
+            font-size: 0.875rem;
+        }
     }
+}
 
-    &__lock span {
-        background-color: var(--c-surface);
-        color: var(--c-on-surface);
+.aw-buttons-group {
+    display: inline-flex;
+    gap: 1px;
 
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-radius: 50%;
+    :not(:first-child) {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
 
-        padding: 0.32em;
-        font-size: 1.2em;
+    :not(:last-child) {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
     }
-}
 
-[data-dark='true'] {
-    .aw-button {
-        &--theme-solid {
-            &.aw-button--color-accent {
-                color: var(--c-on-surface);
-            }
-
-            &.aw-button--color-error {
-                color: var(--c-on-surface);
-            }
-        }
+    & > :active {
+        transform: none;
     }
-}
 
-@screen lg {
-    .aw-button {
-        &--size-md {
-            padding: 0.5625rem 1rem;
-            min-width: 6.25rem;
-            height: 2.5rem;
-        }
+    &--collapsed {
+        gap: 0;
 
-        &--square:where(&--size-md) {
-            padding: 0.5625rem;
-            min-width: 2.5rem;
+        & > * + * {
+            margin-left: -2px;
         }
 
-        &--size-sm,
-        &--size-md {
-            font-size: 0.875rem;
-            line-height: 1.125rem;
-            font-weight: 400;
+        & > :hover {
+            z-index: 1;
         }
     }
 }

package/assets/css/components/context-menu.css

@@ -4,47 +4,4 @@
         margin: 0;
         padding: 0;
     }
-
-    &--highlight {
-        .aw-button.theme-icon {
-            background: var(--c-mono-800);
-            border-radius: 50%;
-            width: 32px;
-            height: 32px;
-
-            .aw-button__content_md {
-                width: 32px;
-                height: 32px;
-                padding: 8px;
-            }
-        }
-    }
-
-    .aw-button {
-        min-width: 3rem;
-        padding: 0;
-
-        .aw-button__text {
-            display: none;
-        }
-    }
-}
-
-@screen lg {
-    .aw-context-menu {
-        &--text {
-            .aw-icon {
-                margin-right: 0.5rem;
-            }
-        }
-
-        .aw-button {
-            min-width: 6.25rem;
-            padding: 0.5625rem 1rem;
-
-            .aw-button__text {
-                display: flex;
-            }
-        }
-    }
 }

package/assets/css/components/mobile-menu-item.css

@@ -4,7 +4,7 @@
     display: flex;
     align-items: center;
     width: 100%;
-    padding: 1.5rem;
+    padding: 1rem 1.5rem;
 
     &:hover,
     &:focus {

package/assets/css/components/mobile-menu.css

@@ -112,7 +112,7 @@
         align-items: center;
         position: relative;
 
-        padding: 1.5rem;
+        padding: 0.8125rem 1.5rem;
 
         &-icon {
             margin-right: 1rem;

package/assets/css/components/modal-buttons.css

@@ -0,0 +1,17 @@
+.aw-modal-buttons {
+    display: flex;
+    align-items: center;
+    flex-direction: row-reverse;
+    gap: 1rem;
+
+    width: 100%;
+
+    &__button--equal {
+        flex: 1 1 100%;
+    }
+
+    &--mobile {
+        flex-direction: column;
+        align-items: stretch;
+    }
+}

package/assets/css/components/modal.css

@@ -56,25 +56,6 @@ $modal-aside-width-large: 75vw;
         padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 7rem);
     }
 
-    &__back,
-    &__close {
-        @apply flex-shrink-0 flex justify-center items-center;
-        height: $button-height;
-        width: $button-height;
-        line-height: $button-height - $gap;
-        opacity: 0.5;
-        transition: 200ms opacity;
-
-        > svg {
-            display: inline-block;
-            vertical-align: middle;
-        }
-
-        &:hover {
-            opacity: 1;
-        }
-    }
-
     &__close {
         margin-left: auto;
         width: 3rem;