@awes-io/ui 2.74.0 → 2.75.0

package/CHANGELOG.md

@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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)
+
+
+### Bug Fixes
+
+* dark colors tuned ([cfbbe41](https://github.com/awes-io/client/commit/cfbbe41edcb1fdfd91a78cbdca645f451cceb38f))
+
+
+
+
+
 # [2.74.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.73.1...@awes-io/ui@2.74.0) (2023-10-10)
 
 

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/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

@@ -52,10 +52,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 +117,6 @@
 
             & > span {
                   border-radius: 0.5rem;
-                  min-height: 2.5rem;
             }
         }
     }
@@ -153,9 +151,8 @@
             }
 
             & > span {
-                min-height: 2.25rem;
                 border-radius: 0.5rem;
-                padding: 0.875rem 1.25rem;
+                padding: 0.625rem 1.25rem;
             }
         }
 
@@ -165,7 +162,6 @@
 
                 & > span {
                       border-radius: 0.5rem;
-                      min-height: 2.25rem;
                 }
             }
         }

package/assets/css/components/button.css

@@ -155,8 +155,8 @@
     }
 
     &.theme-circle .aw-button__content {
-         width: 3.5rem;
-         height: 3.5rem;
+        width: 3.5rem;
+        height: 3.5rem;
     }
 
     /* Mobile hidden text */
@@ -269,6 +269,7 @@
 
         &:hover {
             background: var(--c-mono-700);
+            color: var(--c-on-mono-700);
         }
 
         .aw-button__overlay {
@@ -300,15 +301,14 @@
     }
 
     /* Outline */
-    &.theme-outline.color-mono:not(:disabled):hover,
-    &.theme-outline.color-mono.is-loading:disabled {
-        @apply border-mono-600;
+    &.theme-outline.color-default:not(:disabled) .aw-button__overlay {
+        @apply border-surface text-surface;
     }
 
-    &.theme-outline.color-mono:not(:disabled):hover > &__content,
+    /* &.theme-outline.color-mono:not(:disabled):hover > &__content,
     &.theme-outline.color-mono.is-loading:disabled {
         @apply text-on-mono-600;
-    }
+    } */
 }
 
 /**
@@ -323,11 +323,11 @@
         }
 
         &.add-tag-button {
-             font-size: 10px;
-             min-width: 20px;
-             min-height: 20px;
-             border-radius: 5px;
-             line-height: 16px;
+            font-size: 10px;
+            min-width: 20px;
+            min-height: 20px;
+            border-radius: 5px;
+            line-height: 16px;
 
             .aw-button__content {
                 @apply px-0;
@@ -382,12 +382,12 @@
                 border-color: var(--c-mono-400);
 
                 &:disabled {
-                     border-color: var(--c-mono-800);
+                    border-color: var(--c-mono-800);
                 }
             }
 
             &:not(:disabled):hover {
-                 border-color: var(--c-mono-400);
+                border-color: var(--c-mono-400);
             }
 
             .aw-button__content {
@@ -466,7 +466,7 @@
     }
 
     &.theme-circle,
-    &.theme-circle > &__overlay  {
+    &.theme-circle > &__overlay {
         border-radius: 50%;
     }
 }
@@ -505,16 +505,34 @@
     }
 }
 
-:root[data-dark="true"] {
+[data-dark='true'] {
     .aw-button {
+        &.theme-ghost.color-default .aw-button__overlay {
+            display: none;
+        }
+
         &.theme-ghost.color-default {
-            background: var(--c-mono-800);
             box-shadow: 0 0 0 1px rgba(var(--c-on-surface-rgb), 0.1) inset;
-            color: var(--c-on-mono-800);
 
-            &:hover {
+            /* &:hover {
                 background: var(--c-mono-200);
-            }
+            } */
+        }
+    }
+}
+
+[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);
+            } */
         }
     }
 }

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,44 @@
         .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.5625rem;
-         font-weight: 400;
-         line-height: 0.625rem;
-         color: var(--c-mono-400);
-         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%;
     }
 
     &__icon-badge {
@@ -88,38 +88,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 +127,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/layout-menu.css

@@ -18,7 +18,7 @@
 
     &__menu,
     &__secondary-menu {
-        --icon-color: var(--c-on-brand);
+        --icon-color: var(--c-on-surface);
         --icon-color-active: var(--c-accent);
         display: flex;
         flex-direction: column;
@@ -55,7 +55,7 @@
         @apply bg-surface;
         width: 230px;
         max-height: 100vh;
-        border-left: 1px solid var(--c-mono-900);
+        border-left: 2px solid var(--c-mono-900);
 
         grid-column: 2;
         grid-row: 1 / 6;

package/assets/css/components/layout.css

@@ -94,7 +94,7 @@
     }
 
     &__header {
-        @apply flex items-center bg-surface top-0 z-20 bg-brand py-3 order-first;
+        @apply flex items-center top-0 z-20 bg-surface py-3 order-first;
         min-height: theme('spacing.16');
         transition: 200ms box-shadow;
     }
@@ -150,9 +150,7 @@
 }
 
 @screen lg {
-
     .layout {
-
         &&--default,
         &&--simple {
             @apply flex min-h-screen;
@@ -186,7 +184,7 @@
         }
 
         &&--simple &__header {
-            @apply bg-brand;
+            @apply bg-surface;
         }
 
         &&--frame-left &__frame {

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/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);

package/assets/css/components/select.css

@@ -91,6 +91,9 @@
     }
 
     &__mobile-input {
+        position: sticky;
+        top: 0;
+        
         &.opened,
         & .aw-text-field__element {
             border-bottom-left-radius: 0;

package/assets/css/components/switch-field.css

@@ -1,5 +1,5 @@
 .aw-switch-field {
-    @apply relative py-1;
+    @apply flex relative py-1;
 
     &__element {
         @apply bg-surface border;
@@ -7,8 +7,8 @@
         cursor: pointer;
         appearance: none;
         vertical-align: middle;
-        width: theme('spacing.5', 1.25rem);
-        height: theme('spacing.5', 1.25rem);
+        width: theme('spacing.8', 2rem);
+        height: theme('spacing.8', 2rem);
         /* border: 1px solid theme('colors.muted');
         color: theme('colors.secondary', blue);
         background: theme('colors.white', white); */
@@ -17,7 +17,7 @@
         box-shadow: none;
 
         &:checked {
-            @apply bg-success;
+            @apply bg-accent;
             border-color: inherit;
             background-size: 100% 100%;
         }
@@ -32,26 +32,38 @@
         } */
     }
 
-
     /**
      * Checkbox
      */
 
     &.is-checkbox &__element {
-        border-radius: theme('borderRadius.default', 0.25rem);
+        border-radius: theme('spacing.2', 0.5rem);
         flex-shrink: 0;
 
+        background-size: 20px 20px;
+        background-position: center;
+        background-repeat: no-repeat;
+
+        &:disabled {
+            @apply bg-mono-900;
+        }
+
         &:checked {
-            background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' width='20' height='20' fill='none'%3E%3Cpath fill='%23fff' d='m7 13.8-3-3.1a.8.8 0 0 0-1.3 1.1l3.8 3.8a.8.8 0 0 0 1.2 0l9.1-9.2a.8.8 0 0 0-1.1-1.2L7 13.8Z'/%3E%3C/svg%3E");
         }
 
-        &--partial {
-            &:checked {
-                 background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 22 22' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4.77765 11.5553H17.2224C17.4286 11.5553 17.6264 11.4734 17.7722 11.3275C17.9181 11.1817 18 10.9839 18 10.7776C18 10.5714 17.9181 10.3736 17.7722 10.2278C17.6264 10.0819 17.4286 10 17.2224 10H4.77765C4.5714 10 4.37361 10.0819 4.22777 10.2278C4.08193 10.3736 4 10.5714 4 10.7776C4 10.9839 4.08193 11.1817 4.22777 11.3275C4.37361 11.4734 4.5714 11.5553 4.77765 11.5553V11.5553Z'/%3e%3c/svg%3e");
-             }
+        &:checked:disabled {
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' width='20' height='20' fill='none'%3E%3Cpath fill='%23838587' d='m7 13.8-3-3.1a.8.8 0 0 0-1.3 1.1l3.8 3.8a.8.8 0 0 0 1.2 0l9.1-9.2a.8.8 0 0 0-1.1-1.2L7 13.8Z'/%3E%3C/svg%3E");
         }
-    }
 
+        &--partial:checked {
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3E%3Cpath fill='%23fff' d='M3.3 10.8h13.4a.8.8 0 0 0 0-1.6H3.3a.8.8 0 1 0 0 1.6Z'/%3E%3C/svg%3E");
+        }
+
+        &--partial:checked:disabled {
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3E%3Cpath fill='%23838587' d='M3.3 10.8h13.4a.8.8 0 0 0 0-1.6H3.3a.8.8 0 1 0 0 1.6Z'/%3E%3C/svg%3E");
+        }
+    }
 
     /**
      * Radio
@@ -65,14 +77,13 @@
         }
     }
 
-
     /**
      * Switcher
      */
 
     &.is-switcher {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
     }
 
     &.is-switcher &__label {
@@ -82,7 +93,7 @@
     &__switch {
         @apply bg-mono-600 relative;
         flex-shrink: 0;
-        margin: 0.25rem 0;
+        margin: 0.15rem 0;
         cursor: pointer;
         order: -1;
         border-radius: 90px;
@@ -93,7 +104,7 @@
             color: var(--c-on-overlay, '#fff');
             top: 50%;
             transform: translateY(-50%);
-            transition: opacity .15s ease;
+            transition: opacity 0.15s ease;
         }
 
         &-circle {
@@ -115,11 +126,17 @@
         outline: theme('focusOutline');
     }
 
-    &.is-switcher &__element:not(:checked) ~ &__switch .aw-switch-field__switch-icon--on {
+    &.is-switcher
+        &__element:not(:checked)
+        ~ &__switch
+        .aw-switch-field__switch-icon--on {
         opacity: 0;
     }
 
-    &.is-switcher &__element:checked ~ &__switch .aw-switch-field__switch-icon--off {
+    &.is-switcher
+        &__element:checked
+        ~ &__switch
+        .aw-switch-field__switch-icon--off {
         opacity: 0;
     }
 
@@ -197,17 +214,21 @@
         }
     }
 
-
     /**
      * Label styles
      */
+    &__label {
+        padding-top: 0.275rem;
+        font-size: 0.875rem;
+        line-height: 1.5;
+    }
+
     &__element + &__label {
-        padding-left: theme('spacing.2', 0.5rem);
+        padding-left: theme('spacing.4', 1rem);
         cursor: pointer;
         vertical-align: middle;
     }
 
-
     /**
      * Error styles
      */
@@ -220,7 +241,6 @@
         @apply border border-error;
     }
 
-
     /**
      * Disabled style
      */
@@ -229,7 +249,15 @@
     &__element[disabled] + &__label {
         cursor: not-allowed;
         user-select: none;
-        opacity: .5;
+        /* opacity: 0.5; */
+    }
+
+    &__element[disabled] + &__label {
+        @apply text-mono-400;
+    }
+
+    &__element[disabled] + &__label a {
+        pointer-events: none;
     }
 
     &.is-switcher &__element[disabled] ~ &__switch {

package/assets/css/components/table.css

@@ -4,6 +4,18 @@
     margin-left: calc(-1 * var(--container-padding));
     margin-right: calc(-1 * var(--container-padding));
 
+    &--without-top-radius {
+        @apply rounded-t-none;
+
+        .aw-table__scroller {
+            @apply rounded-t-none;
+        }
+
+        .aw-table-builder__empty-filter-container, .aw-table-builder__empty-container {
+            @apply rounded-t-none;
+        }
+    }
+
     &--desktop {
         margin-left: 0;
         margin-right: 0;
@@ -36,8 +48,8 @@
     }
 
     &__head > tr {
-         @apply bg-surface;
-         border-bottom: 0;
+        @apply bg-surface;
+        border-bottom: 0;
     }
 
     &__scroller {
@@ -47,15 +59,31 @@
         border-radius: 15px;
 
         background:
-            /* Shadow covers */
-            linear-gradient(90deg, var(--c-surface) 30%, rgba(var(--c-surface-rgb),0)),
-            linear-gradient(90deg, rgba(var(--c-surface-rgb),0), var(--c-surface) 70%) 100% 0,
-
+            /* Shadow covers */ linear-gradient(
+                90deg,
+                var(--c-surface) 30%,
+                rgba(var(--c-surface-rgb), 0)
+            ),
+            linear-gradient(
+                    90deg,
+                    rgba(var(--c-surface-rgb), 0),
+                    var(--c-surface) 70%
+                )
+                100% 0,
             /* Shadows */
-            linear-gradient(90deg, rgba(var(--c-overlay-rgb),0.1) 30%, rgba(var(--c-overlay-rgb),0)),
-            linear-gradient(90deg, rgba(var(--c-overlay-rgb),0), rgba(var(--c-overlay-rgb),0.1) 70%) 100% 0;
-
-            /* radial-gradient(farthest-side at 0 50%, rgba(var(--c-overlay-rgb),.3), rgba(var(--c-overlay-rgb),0)),
+                linear-gradient(
+                    90deg,
+                    rgba(var(--c-overlay-rgb), 0.1) 30%,
+                    rgba(var(--c-overlay-rgb), 0)
+                ),
+            linear-gradient(
+                    90deg,
+                    rgba(var(--c-overlay-rgb), 0),
+                    rgba(var(--c-overlay-rgb), 0.1) 70%
+                )
+                100% 0;
+
+        /* radial-gradient(farthest-side at 0 50%, rgba(var(--c-overlay-rgb),.3), rgba(var(--c-overlay-rgb),0)),
             radial-gradient(farthest-side at 100% 50%, rgba(var(--c-overlay-rgb),.3), rgba(var(--c-overlay-rgb),0)) 100% 0; */
         background-repeat: no-repeat;
         background-color: var(--c-surface);
@@ -82,9 +110,9 @@
             cursor: pointer;
 
             &:hover {
-                 background-color: unset;
-                 opacity: 1;
-                 color: var(--c-success);
+                background-color: unset;
+                opacity: 1;
+                color: var(--c-success);
             }
         }
     }
@@ -201,7 +229,7 @@
     }
 }
 
-:root[data-dark="false"] {
+[data-dark='false'] {
     .aw-table {
         &__head-date {
             @apply text-mono-300;
@@ -209,10 +237,10 @@
     }
 }
 
-:root[data-dark="true"] {
+[data-dark='true'] {
     .aw-table {
         &__head-date {
-             @apply opacity-70;
+            @apply opacity-70;
         }
     }
 }
@@ -228,17 +256,5 @@
                 border-color: var(--c-mono-800);
             }
         }
-
-        &--without-top-radius {
-             @apply rounded-t-none;
-
-            .aw-table__scroller {
-                @apply rounded-t-none;
-            }
-
-            .aw-table-builder__empty-filter-container, .aw-table-builder__empty-container {
-                @apply rounded-t-none;
-            }
-        }
     }
 }

package/assets/css/components/tags.css

@@ -7,7 +7,9 @@
 
     border-radius: 9999px;
     padding: theme('spacing.1', 0.25rem) theme('spacing.2', 0.5rem);
-    min-width: calc(theme('spacing.2', 0.5rem) + theme('fontSize.xs', 0.625rem));
+    min-width: calc(
+        theme('spacing.2', 0.5rem) + theme('fontSize.xs', 0.625rem)
+    );
 
     text-align: center;
     font-size: theme('fontSize.xs', 0.625rem);
@@ -15,7 +17,7 @@
     font-weight: 700;
     line-height: 1;
     white-space: nowrap;
-    text-shadow: 1px 1px 1px rgba(var(--c-overlay-rgb, 0,0,0), 0.1);
+    text-shadow: 1px 1px 1px rgba(var(--c-overlay-rgb, 0, 0, 0), 0.1);
 
     &--clickable {
         &:focus:not(:focus-visible) {
@@ -28,10 +30,10 @@
     }
 }
 
-:root[data-dark="true"] {
+[data-dark='true'] {
     .aw-tag {
         &__button {
-             color: var(--c-on-surface);
+            color: var(--c-on-surface);
         }
     }
 }

package/assets/css/components/text-field.css

@@ -5,28 +5,43 @@
     background-color: var(--c-surface);
     border-radius: 0.625rem;
 
+    padding-top: 0.1875rem;
+    padding-bottom: 0.1875rem;
+
+    &.aw-search {
+        padding-top: 0;
+        padding-bottom: 0;
+    }
+
+    input:autofill {
+        background-image: none;
+    }
+
     &:focus-within {
         @apply border-mono-400;
     }
 
     & > div:first-child:not(.aw-tooltip),
     & > span:first-child:not(.aw-tooltip) {
-        border-top-left-radius: 0.625rem;
-        border-bottom-left-radius: 0.625rem;
+        border-top-left-radius: calc(0.625rem - 1px);
+        border-bottom-left-radius: calc(0.625rem - 1px);
     }
 
     & > div:last-child {
-        border-top-right-radius: 0.625rem;
-        border-bottom-right-radius: 0.625rem;
+        border-top-right-radius: calc(0.625rem - 1px);
+        border-bottom-right-radius: calc(0.625rem - 1px);
     }
 
     &.has-label::before {
-        border-radius: 0.625rem;
+        border-radius: calc(0.625rem - 1px);
     }
 
     &__prefix,
     &__postfix {
         @apply bg-mono-800 flex items-center whitespace-no-wrap;
+
+        margin-top: -0.1875rem;
+        margin-bottom: -0.1875rem;
     }
 
     &__prefix {
@@ -179,6 +194,10 @@
         background-color: var(--c-surface, inherit);
     }
 
+    &.is-textarea.has-label.is-disabled:before {
+        @apply bg-mono-900;
+    }
+
     &.is-hidden {
         display: none;
     }
@@ -204,16 +223,16 @@
         }
 
         &:not([readonly]):focus::placeholder {
-            opacity: 0.5;
+            @apply text-mono-400;
         }
     }
 
     &.is-filled &__element::placeholder {
-        opacity: 0.5;
+        @apply text-mono-400;
     }
 
     &__label {
-        @apply absolute opacity-50 truncate;
+        @apply absolute text-mono-400 truncate;
         max-width: calc(100% - 0.75rem);
         left: theme('spacing.3', 0.75rem);
         top: theme('spacing.3', 0.75rem);
@@ -292,12 +311,14 @@
 
     &__element[disabled],
     &__element[disabled] + &__label {
+        @apply bg-mono-900 text-mono-400;
         cursor: not-allowed;
         user-select: none;
-        opacity: 0.5;
     }
 
     &.is-disabled {
+        @apply bg-mono-900;
+
         pointer-events: none;
     }
 
@@ -307,7 +328,7 @@
 }
 
 .is-disabled .aw-text-field__fake-input {
-    opacity: 0.5;
+    @apply bg-mono-900 text-mono-400;
 }
 
 @keyframes autoFillStart {

package/assets/css/components/tooltip.css

@@ -54,7 +54,7 @@
     }
 }
 
-:where(:root[data-dark='true']) .aw-tooltip {
+:where([data-dark='true']) .aw-tooltip {
     background-color: var(--c-surface);
     color: rgba(var(--c-on-surface-rgb), 0.9);
 }

package/assets/js/styles.js

@@ -1,8 +1,48 @@
+export const CUSTOM_COLORS = {
+    red: '#fa0000',
+    peach: '#ff6f41',
+    yellow: '#ffa800',
+    magenta: '#f4056c',
+    purple: '#8338ec',
+    'light-blue': '#0ab7fa',
+    blue: '#2d67ff',
+    green: '#2bb611',
+    lime: '#a4bf00',
+    grey: '#565656',
+    'light-grey': '#8b9aab'
+}
+
+export const CUSTOM_COLORS_BG_LIGHT = {
+    red: '#fed9d9',
+    peach: '#ffe9e3',
+    yellow: '#fff2d9',
+    magenta: '#fddae9',
+    purple: '#ece1fc',
+    'light-blue': '#daf4fe',
+    blue: '#e0e8ff',
+    green: '#ddefd9',
+    lime: '#f1f5d9',
+    grey: '#eceded',
+    'light-grey': '#ecf0f5'
+}
+
+export const CUSTOM_COLORS_BG_DARK = {
+    red: '#431c1c',
+    peach: '#33160d',
+    yellow: '#3a2e17',
+    magenta: '#310116',
+    purple: '#271147',
+    'light-blue': '#022532',
+    blue: '#202b49',
+    green: '#24331b',
+    lime: '#212600',
+    grey: '#060709',
+    'light-grey': '#2c2e34'
+}
+
 export default {
     default: {
         colors: {
-            brand: '#ffffff',
-            'brand-tuned': '#ffffff',
             accent: '#56af40',
             success: '#56af40',
             info: '#1d6ec5',
@@ -28,21 +68,10 @@ export default {
             'mono-900': '#f3f5f7',
             'mono-1000': '#fff',
 
-            red: '#fed9d9',
-            peach: '#ffe9e3',
-            yellow: '#fff2d9',
-            magenta: '#fddae9',
-            purple: '#ece1fc',
-            'light-blue': '#daf4fe',
-            blue: '#e0e8ff',
-            green: '#ddefd9',
-            lime: '#f1f5d9',
-            grey: '#eceded',
-            'light-grey': '#ecf0f5'
+            ...CUSTOM_COLORS_BG_LIGHT
         },
 
         onColors: {
-            brand: '#383868',
             accent: '#fff',
             success: '#fff',
             info: '#fff',
@@ -63,28 +92,16 @@ export default {
             'mono-400': '#fff',
             'mono-500': '#fff',
             'mono-600': '#333',
-            'mono-700': '#333',
-            'mono-800': '#333',
+            'mono-700': '#14171d',
+            'mono-800': '#14171d',
             'mono-900': '#383868',
             'mono-1000': '#333',
 
-            red: '#fa0000',
-            peach: '#ff6f41',
-            yellow: '#ffa800',
-            magenta: '#f4056c',
-            purple: '#8338ec',
-            'light-blue': '#0ab7fa',
-            blue: '#2d67ff',
-            green: '#2bb611',
-            lime: '#a4bf00',
-            grey: '#565656',
-            'light-grey': '#8b9aab'
+            ...CUSTOM_COLORS
         }
     },
     dark: {
         colors: {
-            brand: '#1e1e1e',
-            'brand-tuned': '#1e1e1e',
             accent: '#56af40',
             success: '#56af40',
             info: '#4a7fe4',
@@ -110,21 +127,10 @@ export default {
             'mono-900': '#383838',
             'mono-1000': '#313236',
 
-            red: '#431c1c',
-            peach: '#33160d',
-            yellow: '#3a2e17',
-            magenta: '#310116',
-            purple: '#271147',
-            'light-blue': '#022532',
-            blue: '#202b49',
-            green: '#24331b',
-            lime: '#212600',
-            grey: '#060709',
-            'light-grey': '#2c2e34'
+            ...CUSTOM_COLORS_BG_DARK
         },
 
         onColors: {
-            brand: '#fff',
             accent: '#fff',
             success: '#fff',
             info: '#fff',
@@ -132,35 +138,25 @@ export default {
             warning: '#333',
             error: '#fff',
 
-            surface: '#fff',
-            'page-bg': '#fff',
+            surface: '#e7eaed',
+            'page-bg': '#e7eaed',
             overlay: '#fff',
             link: '#fff',
 
-            'mono-0': '#1e1e1e',
-            'mono-50': '#1e1e1e',
-            'mono-100': '#1e1e1e',
-            'mono-200': '#1e1e1e',
-            'mono-300': '#1e1e1e',
-            'mono-400': '#1e1e1e',
-            'mono-500': '#1e1e1e',
-            'mono-600': '#fff',
-            'mono-700': '#fff',
-            'mono-800': '#fff',
-            'mono-900': '#fff',
-            'mono-1000': '#fff',
-
-            red: '#fa0000',
-            peach: '#ff6f41',
-            yellow: '#ffa800',
-            magenta: '#f4056c',
-            purple: '#8338ec',
-            'light-blue': '#0ab7fa',
-            blue: '#2d67ff',
-            green: '#2bb611',
-            lime: '#a4bf00',
-            grey: '#565656',
-            'light-grey': '#8b9aab'
+            'mono-0': '#313236',
+            'mono-50': '#313236',
+            'mono-100': '#313236',
+            'mono-200': '#313236',
+            'mono-300': '#313236',
+            'mono-400': '#313236',
+            'mono-500': '#313236',
+            'mono-600': '#313236',
+            'mono-700': '#838587',
+            'mono-800': '#838587',
+            'mono-900': '#e7eaed',
+            'mono-1000': '#e7eaed',
+
+            ...CUSTOM_COLORS
         }
     }
 }

package/components/1_atoms/AwSwitcher.vue

@@ -190,12 +190,9 @@ export default {
 
     methods: {
         _onPointerDown($event) {
-            const isDisabled =
-                Object.keys(this.$attrs).includes('disabled') &&
-                this.$attrs.disabled
             // const hasTooltip = !!this.errorText /* blocks switcher */
 
-            if (this.startPos !== null || isDisabled /* || hasTooltip */) return
+            if (this.startPos !== null || this.isDisabled /* || hasTooltip */) return
 
             this.startPos = $event.screenX
             this.isTouch = $event.type === 'touchstart'

package/components/2_molecules/AwAlert.vue

@@ -13,7 +13,7 @@
                         :style="{
                             color: iconColor ? `var(--c-${iconColor})` : null
                         }"
-                        size="24"
+                        size="16"
                     />
                 </slot>
             </span>

package/components/2_molecules/AwBadge.vue

@@ -54,7 +54,7 @@ export default {
         // Badge background color
         color: {
             type: String,
-            default: 'brand'
+            default: 'page-bg'
         },
 
         // When set to `true`, badge will hide if text is empty or 0

package/components/5_layouts/_AwMobileMenu.vue

@@ -196,6 +196,7 @@
                 v-show="submenuOpened"
                 :title="text"
                 :items="children"
+                all-divides
                 :badge="badge"
                 class="aw-mobile-menu__menu"
             />

package/components/5_layouts/_AwMobileMenuNav.vue

@@ -20,7 +20,7 @@
                             item.class,
                             {
                                 'aw-mobile-menu-nav__item--divide':
-                                    item.isDivide && i !== items.length - 1
+                                    (item.isDivide || allDivides) && i
                             }
                         ]"
                         :href="_getChildrenCount(item) ? null : item.href"
@@ -72,7 +72,9 @@ export default {
         badge: {
             type: Object,
             default: null
-        }
+        },
+
+        allDivides: Boolean
     },
 
     inject: {

package/docs/aw-badge.md

@@ -14,7 +14,7 @@ title: Badge
 |---|---|---|---|---|
 |text|Text inside badge|`String` /  `Number`|`false`|-|
 |icon|Icon name inside badge. See AwIcon component for available names|`String`|`false`|-|
-|color|Badge background color|`String`|`false`|brand|
+|color|Badge background color|`String`|`false`|page-bg|
 |hideIfEmpty|When set to `true`, badge will hide if text is empty or 0|`Boolean`|`false`|-|
 
 <!-- @vuese:AwBadge:props:end -->

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@awes-io/ui",
-    "version": "2.74.0",
+    "version": "2.75.0",
     "description": "User Interface (UI) components",
     "keywords": [
         "ui",
@@ -112,5 +112,5 @@
         "rollup-plugin-visualizer": "^2.6.0",
         "rollup-plugin-vue": "^5.0.1"
     },
-    "gitHead": "fb3404c7bd68d6380cb1bf4e5fc357aa7bdc9bfd"
+    "gitHead": "f06e4e7b83c40ecd59abd6f4249b00ce89d8a7b5"
 }

package/tailwind/colors.js

@@ -42,7 +42,7 @@ module.exports = function({ addComponents, addUtilities, e, theme, variants }) {
         getRootVars(cssRoot)(value, 'on-' + key)
     )
 
-    addComponents({ ':root': cssRoot })
+    addComponents({ ':root, [data-dark="false"]': cssRoot })
 
     _.forEach(darkColors, getRootVars(darkThemeCssRoot))
 
@@ -50,7 +50,7 @@ module.exports = function({ addComponents, addUtilities, e, theme, variants }) {
         getRootVars(darkThemeCssRoot)(value, 'on-' + key)
     )
 
-    addComponents({ ':root[data-dark="true"]': darkThemeCssRoot })
+    addComponents({ '[data-dark="true"]': darkThemeCssRoot })
 
     /*
      * Add background colors