@awes-io/ui 2.74.1 → 2.76.0

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.76.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.75.0...@awes-io/ui@2.76.0) (2023-10-25)
+
+
+### Features
+
+* add square classes for cropper and avatar ([ed653b7](https://github.com/awes-io/client/commit/ed653b722f898234636cac914b26f6b40a10e240))
+* aw-page-single component added ([10f90ee](https://github.com/awes-io/client/commit/10f90eecfe17e2942dd1562c32f3c90626cfb0c3))
+
+
+
+
+
+# [2.75.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.74.1...@awes-io/ui@2.75.0) (2023-10-12)
+
+
+### Features
+
+* change style for alert, button nav and change menu logic ([62f96d8](https://github.com/awes-io/client/commit/62f96d84af39dee2bd1e5569451cb57901d262fa))
+* partial dark theme support ([b3d1a9b](https://github.com/awes-io/client/commit/b3d1a9bbb009bf6a447f6ee748d9165450f33dbe))
+
+
+
+
+
 ## [2.74.1](https://github.com/awes-io/client/compare/@awes-io/ui@2.74.0...@awes-io/ui@2.74.1) (2023-10-11)
 
 

package/assets/css/components/_index.css

@@ -31,6 +31,7 @@
 @import './context-menu.css';
 @import './description.css';
 @import './download-link.css';
+@import './empty-container.css';
 
 @import './dropdown.css';
 @import './dropdown-button.css';
@@ -65,7 +66,10 @@
 @import './page.css';
 @import './page-modal.css';
 @import './page-menu-buttons.css';
+@import './page-header.css';
 @import './page-headline.css';
+@import './page-single.css';
+@import './progress.css';
 
 @import './modal.css';
 @import './model-edit.css';

package/assets/css/components/alert.css

@@ -34,9 +34,17 @@
         font-size: 0.875rem;
 
         .aw-icon,
-        a {
+        a, button {
             color: var(--aw-alert-on-color);
         }
+
+        a, button {
+            white-space: nowrap;
+        }
+
+        a {
+            text-decoration: underline;
+        }
     }
 
     &--title-start {

package/assets/css/components/avatar.css

@@ -13,6 +13,14 @@
     min-height: var(--ui-avatar-size, 2.25rem);
     border-radius: var(--ui-avatar-size, 2.25rem);
 
+    &--square {
+        border-radius: 20%;
+
+        &.aw-avatar > * {
+            border-radius: 20%;
+        }
+    }
+
     & > * {
         grid-row: 1 / -1;
         grid-column: 1 / -1;
@@ -27,7 +35,6 @@
     }
 
     & > :not(img):not(&__no-img-icon) {
-        @apply bg-mono-400 text-on-overlay;
         text-align: center;
         font-size: var(--ui-avatar-font-size);
     }

package/assets/css/components/birthday-picker.css

@@ -1,9 +1,15 @@
 .aw-birthday-picker {
+    .aw-select__dropdown {
+        min-width: auto;
+    }
+
     &__wrap {
-        @apply border rounded bg-surface justify-between;
+        @apply border bg-surface justify-between;
         display: flex;
         align-items: center;
         text-align: center;
+        border-radius: 0.625rem;
+        margin-top: 0.5rem;
         transition: 200ms border-color;
 
         &.has-error {
@@ -23,6 +29,10 @@
         border-radius: 0;
         flex: 1 1 auto;
 
+        input {
+            border-radius: 0.5rem;
+        }
+
         & + & {
             @apply border-l;
             border-top-left-radius: 0;

package/assets/css/components/button-nav.css

@@ -1,7 +1,6 @@
 .aw-button-nav {
     display: inline-flex;
     font-size: theme('fontSize.sm');
-    @apply bg-mono-900;
     border: none;
     border-radius: 0.625rem;
 
@@ -22,6 +21,8 @@
     }
 
     &__toggler {
+        @apply bg-mono-800;
+
         position: relative;
         flex-shrink: 0;
         padding: 0;
@@ -52,10 +53,9 @@
     }
 
     &__toggler > span {
-        padding: 1.125rem 1.25rem;
+        padding: 0.875rem 1.25rem;
         width: 100%;
         border-radius: 0.5rem;
-        min-height: 2.75rem;
     }
 
     &__toggler:focus, &__toggler > span:focus {
@@ -118,7 +118,6 @@
 
             & > span {
                   border-radius: 0.5rem;
-                  min-height: 2.5rem;
             }
         }
     }
@@ -153,9 +152,8 @@
             }
 
             & > span {
-                min-height: 2.25rem;
                 border-radius: 0.5rem;
-                padding: 0.875rem 1.25rem;
+                padding: 0.625rem 1.25rem;
             }
         }
 
@@ -165,7 +163,6 @@
 
                 & > span {
                       border-radius: 0.5rem;
-                      min-height: 2.25rem;
                 }
             }
         }

package/assets/css/components/button.css

@@ -31,7 +31,7 @@
         justify-content: center;
         width: 100%;
         transition: 100ms opacity;
-        font-size: 14px;
+        font-size: 0.875rem;
         line-height: 1.125rem;
 
         &:focus {
@@ -82,6 +82,7 @@
     &:focus > &__content {
         /* opacity: 0.15; */
         outline: theme('focusOutline', 'none');
+        height: 100%;
     }
 
     /**
@@ -117,13 +118,10 @@
     }
 
     &__content_md {
-        @apply px-4 text-sm leading-4;
+        @apply p-4 text-sm leading-4;
 
-        padding-top: 1rem;
-        padding-bottom: 1rem;
         min-width: 3rem;
         min-height: 3rem;
-        height: 100%;
     }
 
     &.theme-icon &__content_md,
@@ -505,7 +503,7 @@
     }
 }
 
-:root[data-dark='true'] {
+[data-dark='true'] {
     .aw-button {
         &.theme-ghost.color-default .aw-button__overlay {
             display: none;
@@ -521,6 +519,22 @@
     }
 }
 
+[data-dark='false'] {
+    .aw-button {
+        &.theme-ghost.color-default .aw-button__overlay {
+            display: block;
+        }
+
+        &.theme-ghost.color-default {
+            box-shadow: none;
+
+            /* &:hover {
+                background: var(--c-mono-200);
+            } */
+        }
+    }
+}
+
 .aw-button.theme-solid,
 .aw-button .aw-button__overlay,
 .aw-button.theme-circle,
@@ -538,6 +552,10 @@
     box-shadow: none;
 }
 
+.aw-button.color-default .aw-icon {
+    @apply text-mono-400;
+}
+
 @screen lg {
     .aw-button.aw-button_md.theme-solid,
     .aw-button.aw-button_md .aw-button__overlay,
@@ -550,8 +568,7 @@
     }
 
     .aw-button__content_md {
-        padding-top: 0.75rem;
-        padding-bottom: 0.75rem;
+        padding: 0.75rem;
         min-width: 2.5rem;
         min-height: 2.5rem;
     }

package/assets/css/components/cropper.css

@@ -5,6 +5,14 @@
     margin-left: auto;
     margin-right: auto;
 
+    &.aw-cropper--square {
+        .croppie-container {
+            .cr-viewport {
+                border-radius: 20%;
+            }
+        }
+    }
+
     &__croppie {
         position: relative;
     }

package/assets/css/components/empty-container.css

@@ -0,0 +1,8 @@
+.aw-empty-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.5rem;
+
+    padding: 1.5rem 0;
+}

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

@@ -12,7 +12,7 @@
         .aw-icon-menu-item {
             &__icon,
             &__text {
-              color: var(--c-mono-100);
+                color: var(--c-mono-100);
             }
         }
     }
@@ -21,44 +21,46 @@
         .aw-icon-menu-item {
             &__icon,
             &__text {
-                 color: var(--c-mono-100);
+                color: var(--c-mono-100);
             }
         }
     }
 
     &__icon {
-         display: block;
-         color: var(--c-mono-300);
-         transition: 60ms color;
+        display: block;
+        color: var(--c-mono-300);
+        transition: 60ms color;
 
-         &-block {
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              flex-direction: column;
+        &-block {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
 
-              padding: 0.75rem;
+            padding: 0.75rem;
 
-              width: 100%;
-              position: relative;
-         }
+            width: 100%;
+            position: relative;
+        }
     }
 
     &__text {
-         display: block;
+        display: block;
+
+        font-size: 0.5rem;
+        font-weight: 400;
+        line-height: 0.58625rem;
+        color: var(--c-mono-300);
+        transition: 60ms color;
 
-         font-size: 0.5625rem;
-         font-weight: 400;
-         line-height: 0.625rem;
-         color: var(--c-mono-400);
-         transition: 60ms color;
+        text-align: center;
 
-         text-align: center;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        width: 100%;
 
-         white-space: nowrap;
-         text-overflow: ellipsis;
-         overflow: hidden;
-         width: 100%;
+        margin-top: 0.25rem;
     }
 
     &__icon-badge {
@@ -88,38 +90,38 @@
     .aw-icon-menu-item {
         &--active {
             &:before {
-                 border-radius: 0.625rem;
-                 position: absolute;
-                 top: 50%;
-                 left: 50%;
-                 transform: translate(-50%, -50%);
-                 width: 3.5rem;
-                 height: 2.875rem;
-                 content: '';
-                 background-color: var(--c-mono-800);
+                border-radius: 0.625rem;
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                width: 3.5rem;
+                height: 2.875rem;
+                content: '';
+                background-color: var(--c-mono-800);
             }
         }
     }
 
-    :root[data-dark="true"] {
+    [data-dark='true'] {
         .aw-icon-menu-item {
             &--active {
                 &:before {
-                     background-color: rgba(var(--c-mono-700-rgb), 0.5);
+                    background-color: rgba(var(--c-mono-700-rgb), 0.5);
                 }
             }
         }
     }
 }
 
-:root[data-dark="true"] {
+[data-dark='true'] {
     .aw-icon-menu-item {
         &:hover {
             .aw-icon-menu-item {
                 &__icon,
                 &__text {
-                     color: rgba(var(--c-on-surface-rgb), 0.9)
-                 }
+                    color: rgba(var(--c-on-surface-rgb), 0.9);
+                }
             }
         }
 
@@ -127,17 +129,17 @@
             .aw-icon-menu-item {
                 &__icon,
                 &__text {
-                     color: rgba(var(--c-on-surface-rgb), 0.9)
-                 }
+                    color: rgba(var(--c-on-surface-rgb), 0.9);
+                }
             }
         }
 
         &__icon {
-            color: rgba(var(--c-on-surface-rgb), 0.8)
+            color: rgba(var(--c-on-surface-rgb), 0.8);
         }
 
         &__text {
-             color: var(--c-mono-400);
+            color: var(--c-mono-400);
         }
     }
 }

package/assets/css/components/main.css

@@ -8,9 +8,9 @@
 
 @screen lg {
     :root {
-        --header-padding-bottom: 1.5rem;
-        --header-padding-top: calc(env(safe-area-inset-top, 0px) + var(--header-padding-bottom, 1.5rem));
+        --header-padding-bottom: 1rem;
+        --header-padding-top: calc(env(safe-area-inset-top, 0px) + var(--header-padding-bottom, 1rem));
         --header-padding: var(--header-padding-top) var(--header-padding-horizontal) var(--header-padding-bottom);
-        --header-height: calc(env(safe-area-inset-top, 0px) + 5.5rem);
+        --header-height: calc(env(safe-area-inset-top, 0px) + 4.5rem);
     }
 }

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

@@ -68,6 +68,8 @@
 
         .aw-avatar {
             --ui-avatar-size: 2.5rem !important;
+            --ui-avatar-font-size: 0.875rem !important;
+            font-weight: 900;
         }
 
         &-name {

package/assets/css/components/nav.css

@@ -66,7 +66,7 @@
                 margin-left: 5px;
                 margin-top: -3px;
                 border-radius: 50%;
-                background-color: var(--c-accent, green);
+                background-color: var(--c-mono-100, green);
 
                 position: absolute;
                 left: theme('spacing.8');

package/assets/css/components/page-header.css

@@ -0,0 +1,61 @@
+.aw-page-header {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: var(--header-padding-top) 1.5rem var(--header-padding-bottom);
+    height: var(--header-height);
+
+    position: relative;
+
+    .aw-progress {
+        position: absolute;
+        bottom: 2px;
+        left: 0;
+    }
+
+    &--primary {
+        @apply bg-surface;
+    }
+
+    &__title {
+        @apply font-body;
+
+        flex: 1 0 50%;
+
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+
+        margin: 0;
+
+        font-size: 0.875rem;
+        line-height: 1.4285;
+        font-weight: 700;
+        text-align: center;
+    }
+
+    &__breadcrumbs,
+    &__buttons {
+        flex: 1 1 25%;
+
+        display: flex;
+        gap: 1rem;
+    }
+
+    &__buttons {
+        justify-content: flex-end;
+    }
+}
+
+@screen lg {
+    .aw-page-header {
+        padding-left: 2.5rem;
+        padding-right: 2.5rem;
+
+        &__title {
+            font-size: 1.25rem;
+            line-height: 1.2;
+        }
+    }
+}

package/assets/css/components/page-headline.css

@@ -108,27 +108,27 @@
         }
 
         &__back {
-             border-radius: 0.625rem;
-             width: 2.5rem;
-             height: 2.5rem;
+            border-radius: 0.625rem;
+            width: 2.5rem;
+            height: 2.5rem;
         }
     }
 }
 
-:root[data-dark="false"] {
+[data-dark='false'] {
     .aw-page-headline {
         &__back {
-             background: var(--c-mono-800);
-             color: var(--c-on-mono-800);
+            background: var(--c-mono-800);
+            color: var(--c-on-mono-800);
 
             &:hover {
-                 background: var(--c-mono-700);
+                background: var(--c-mono-700);
             }
         }
     }
 }
 
-:root[data-dark="true"] {
+[data-dark='true'] {
     .aw-page-headline {
         &__back {
             background: var(--c-mono-800);