@awes-io/ui 2.86.0 → 2.87.0

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

@@ -21,6 +21,9 @@
     }
 
     .aw-button {
+        min-width: 3rem;
+        padding: 0;
+
         .aw-button__text {
             display: none;
         }
@@ -36,6 +39,9 @@
         }
 
         .aw-button {
+            min-width: 6.25rem;
+            padding: 0.5625rem 1rem;
+
             .aw-button__text {
                 display: flex;
             }

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

@@ -69,7 +69,7 @@
 }
 
 /* Color modifiers */
-@each $color in (success, warning, error) {
+@each $color in (error) {
     .aw-dropdown-button_$(color) {
         color: var(--c-$(color));
 

package/assets/css/components/filter-month.css

@@ -21,4 +21,21 @@
     & &__label {
         @apply text-xs text-mono-400;
     }
+
+    &__btn {
+        border-width: 1px;
+        border-style: solid;
+        border-color: theme('borderColor.default');
+        padding: 0.5rem 0.75rem;
+
+        svg {
+            opacity: 0.4;
+        }
+
+        &:hover {
+            svg {
+                opacity: 0.9;
+            }
+        }
+    }
 }

package/assets/css/components/page-menu-buttons.css

@@ -28,11 +28,11 @@
         }
 
         .aw-button-fixed {
-            min-width: 3.5rem;
-            min-height: 3.5rem;
+            min-width: 3rem;
+            height: 3rem;
             padding-left: 1rem;
             padding-right: 1rem;
-            border-radius: 0.9375rem;
+            border-radius: 0.625rem;
         }
 
         .aw-button {

package/assets/css/components/square-icon-button.css

@@ -0,0 +1,69 @@
+.aw-square-icon-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    border-radius: 0.625rem;
+
+    width: 3rem;
+    height: 3rem;
+
+    &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+        user-select: none !important;
+    }
+
+    &:not([disabled]):active {
+        transform: translateY(1px);
+    }
+
+    svg {
+        fill: var(--c-mono-400);
+    }
+
+    &:not(:disabled):hover {
+        svg {
+            fill: var(--c-mono-100);
+        }
+    }
+
+    &--color-mono-900 {
+        background: var(--c-mono-900);
+
+        &:not(:disabled):hover {
+            background: var(--c-mono-800);
+        }
+    }
+
+    &--color-mono-800 {
+        background: var(--c-mono-800);
+
+        &:not(:disabled):hover {
+            background: var(--c-mono-700);
+        }
+    }
+
+    &--color-mono-700 {
+        background: var(--c-mono-700);
+
+        &:not(:disabled):hover {
+            background: var(--c-mono-600);
+        }
+    }
+
+    &--color-mono-600 {
+        background: var(--c-mono-600);
+
+        &:not(:disabled):hover {
+            background: var(--c-mono-500);
+        }
+    }
+}
+
+@screen lg {
+    .aw-square-icon-button {
+        width: 2.5rem;
+        height: 2.5rem;
+    }
+}

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

@@ -57,7 +57,7 @@
         display: flex;
         align-items: center;
 
-        padding: 1rem;
+        padding: 0.4375rem 1rem;
         color: var(--c-on-surface);
         border-bottom-width: 1px;
 
@@ -66,8 +66,8 @@
         }
 
         &-text {
-            font-size: 1rem;
-            line-height: 1.3125rem;
+            font-size: 0.875rem;
+            line-height: 1.5rem;
             font-weight: 400;
         }
 
@@ -99,20 +99,20 @@
 
     &__nav-item {
         @apply bg-surface;
-        padding: 1rem;
+        padding: 0.5rem 1rem;
         display: flex;
         align-items: center;
         width: 100%;
 
-        font-size: 1rem;
-        line-height: 1.3125rem;
+        font-size: 0.875rem;
+        line-height: 1.5rem;
         font-weight: 400;
 
         white-space: nowrap;
 
         svg {
-            width: 1.5rem;
-            height: 1.5rem;
+            width: 1rem;
+            height: 1rem;
             flex: none;
         }
 

package/assets/css/typography.css

@@ -114,7 +114,7 @@
         font-size: 1em;
     }
 
-    code {
+    code:where(:not([class*="language-"])) {
         @apply text-error bg-error bg-opacity-20;
         padding: 0.125em 0.25em;
         border-radius: theme('borderRadius.sm', 0);
@@ -158,6 +158,18 @@
         outline: theme('focusOutline');
     }
 
+    .link:disabled,
+    .link[disabled] {
+        @apply text-mono-400;
+        cursor: not-allowed;
+
+        &:hover,
+        &:focus {
+            text-decoration: none;
+            outline: none;
+        }
+    }
+
     abbr[title] {
         border-bottom: none;
         text-decoration: underline;

package/assets/js/styles.js

@@ -27,15 +27,15 @@ export const CUSTOM_COLORS_BG_LIGHT = {
 }
 
 export const CUSTOM_COLORS_BG_DARK = {
-    red: '#5F2A26',
-    peach: '#4C2113',
-    yellow: '#4C3200',
-    magenta: '#490120',
-    purple: '#271147',
-    'light-blue': '#044964',
-    blue: '#242C4A',
-    green: '#114907',
-    lime: '#313900',
+    red: '#791a1f',
+    peach: '#7c3118',
+    yellow: '#7c4a15',
+    magenta: '#551c3b',
+    purple: '#3e2069',
+    'light-blue': '#164c7e',
+    blue: '#1c2755',
+    green: '#306317',
+    lime: '#3e4f13',
     grey: '#060709',
     'light-grey': '#434447'
 }
@@ -49,7 +49,8 @@ export default {
             info: '#1d6ec5',
             notify: '#ffc230',
             warning: '#fc8800',
-            error: '#e9555b',
+            error: '#FF4931',
+            'error-hover': '#E6422C',
 
             surface: '#fff',
             'page-bg': '#F3F5F7',
@@ -109,7 +110,8 @@ export default {
             info: '#4a7fe4',
             notify: '#ffc230',
             warning: '#fc8800',
-            error: '#e9555b',
+            error: '#FF4931',
+            'error-hover': '#E6422C',
 
             surface: '#313236',
             'page-bg': '#1E1E21',

package/components/1_atoms/AwDropdown.vue

@@ -54,9 +54,8 @@
             <!-- close button -->
             <slot v-if="isMobile" name="close">
                 <AwButton
-                    theme="ghost"
                     :text="$t('Close')"
-                    color="surface"
+                    color="mono"
                     size="lg"
                     class="aw-dropdown__close"
                     @click.stop="visible = false"

package/components/1_atoms/AwDropdownButton.vue

@@ -38,17 +38,14 @@ export default {
          * @type {Object}
          */
         color: {
-            /* 'default' / 'success' / 'warning' / 'danger' / 'info' */
+            /* 'default' / 'error'  */
             type: String,
             /* 'default' */
             default: 'default',
             validator(color) {
                 return [
                     'aw-dropdown-button_default',
-                    'aw-dropdown-button_success',
-                    'aw-dropdown-button_warning',
-                    'aw-dropdown-button_error',
-                    'aw-dropdown-button_info'
+                    'aw-dropdown-button_error'
                 ].includes(`aw-dropdown-button_${color}`)
             }
         },

package/components/2_molecules/AwButton.vue

@@ -2,13 +2,12 @@
     <component
         :is="_linkComponent"
         class="aw-button"
-        :class="classes"
+        :class="[classes, contentClass]"
         :disabled="isDisabled"
+        :aria-label="$attrs['aria-label'] || text || null"
         v-bind="_linkAttrs"
         v-on="$listeners"
     >
-        <span class="aw-button__overlay"></span>
-
         <AwIconSystemColor
             v-if="loading"
             class="aw-button__loader"
@@ -16,70 +15,50 @@
         />
 
         <span
-            class="aw-button__content"
-            :class="[
-                {
-                    'aw-button__content_sm': size === 'sm',
-                    'aw-button__content_md': size === 'md',
-                    'aw-button__content_lg': size === 'lg',
-                    'aw-button__content_no-text': mobileTextHidden
-                },
-                contentClass
-            ]"
-            tabindex="-1"
+            v-else-if="locked"
+            class="aw-button__lock"
+            v-tooltip="lockedTooltip"
         >
-            <slot name="icon" v-bind="{ icon, iconSize }">
+            <span>
+                <AwIconSystemMono name="lock" />
+            </span>
+        </span>
+
+        <template v-else>
+            <slot name="icon" v-bind="{ icon }">
                 <AwIcon
                     v-if="icon"
+                    class="aw-button__icon-left"
+                    :class="{ 'mr-2': text }"
                     :name="icon"
-                    class="flex-shrink-0"
-                    :size="iconSize"
+                    :size="16"
                 />
             </slot>
 
-            <span
-                class="aw-button__text"
-                :class="{
-                    'hidden lg:block': mobileTextHidden,
-                    'sr-only': (theme === 'icon' || theme === 'circle') && icon,
-                    'ml-2': icon && isContentAdded,
-                    'mr-2': iconRight && isContentAdded
-                }"
-            >
-                <slot>{{ text }}</slot>
-            </span>
+            <slot v-if="!hideText">
+                <span class="aw-button__text">
+                    {{ text }}
+                </span>
+            </slot>
 
-            <slot name="icon-right" v-bind="{ iconRight, iconSize }">
+            <slot name="iconRight" v-bind="{ iconRight }">
                 <AwIcon
                     v-if="iconRight"
+                    class="aw-button__icon-right"
+                    :class="{ 'ml-2': text }"
                     :name="iconRight"
-                    class="flex-shrink-0"
-                    :size="iconSize"
+                    :size="16"
                 />
             </slot>
-        </span>
-
-        <span v-if="locked" class="aw-button__lock" v-tooltip="lockedTooltip">
-            <span>
-                <AwIconSystemMono name="lock" />
-            </span>
-        </span>
+        </template>
     </component>
 </template>
 
 <script>
 import AwLink from '@AwAtoms/AwLink.vue'
-import { pathOr } from 'rambdax'
 import { AwButton as _config } from '@AwConfig'
 import { conf } from '@AwUtils/component'
 
-const iconSizes = {
-    xs: 10,
-    sm: 12,
-    md: 14,
-    lg: 16
-}
-
 export default {
     name: 'AwButton',
 
@@ -96,7 +75,7 @@ export default {
             }
         },
 
-        // Background color of button. Possible values: 'info', 'success', 'warning', 'error', 'surface'
+        // Background color of button. Possible values: 'accent', 'error', 'mono', 'dark'
         color: {
             type: String,
             default() {
@@ -104,7 +83,7 @@ export default {
             }
         },
 
-        // Possible values: outline, ghost
+        // Possible values: solid, outline, icon
         theme: {
             type: String,
             default() {
@@ -136,11 +115,6 @@ export default {
             default: ''
         },
 
-        // Active state
-        active: Boolean,
-
-        mobileTextHidden: Boolean,
-
         // Show lock icon and disable button
         locked: Boolean,
 
@@ -148,27 +122,23 @@ export default {
         lockedTooltip: {
             type: String,
             default: ''
-        }
-    },
+        },
 
-    data() {
-        return {
-            isPressed: false
-        }
+        hideText: Boolean
     },
 
     computed: {
         classes() {
             return [
                 {
-                    'is-active': this.active,
-                    'is-loading': this.loading,
-                    'aw-button_sm': this.size === 'sm',
-                    'aw-button_md': this.size === 'md',
-                    'aw-button_lg': this.size === 'lg'
+                    'aw-button--size-sm': this.size === 'sm',
+                    'aw-button--size-md': this.size === 'md',
+                    'aw-button--size-lg': this.size === 'lg',
+                    'aw-button--loading': this.loading,
+                    'aw-button--square': this.hideText
                 },
-                `color-${this.color || 'default'}`,
-                this.theme && `theme-${this.theme}`
+                `aw-button--color-${this.color || 'green'}`,
+                `aw-button--theme-${this.theme || 'solid'}`
             ]
         },
 
@@ -179,21 +149,6 @@ export default {
                 this.loading ||
                 this.locked
             )
-        },
-
-        isContentAdded() {
-            return this.text || this.$scopedSlots.default
-        },
-
-        // loadingText() {
-        //     return (
-        //         (isType('String', this.loading) && this.loading) ||
-        //         this.$t('Loading...')
-        //     )
-        // },
-
-        iconSize() {
-            return pathOr(12, this.size, iconSizes)
         }
     },
 

package/components/2_molecules/AwIsland/AwIsland.vue

@@ -42,7 +42,9 @@
                     class="aw-island__description"
                 >
                     <slot name="description" v-bind="{ isOpened, toggle }">
-                        <AwDescription tag="div">{{ description }}</AwDescription>
+                        <AwDescription tag="div">{{
+                            description
+                        }}</AwDescription>
                     </slot>
                 </div>
 
@@ -101,8 +103,7 @@
                             <template v-else>
                                 <AwButton
                                     text="Reset"
-                                    color="default"
-                                    theme="ghost"
+                                    color="mono"
                                     :disabled="model.saving"
                                     @click="reset"
                                 />

package/components/2_molecules/AwSelect.vue

@@ -54,13 +54,15 @@
                 <AwButton
                     v-if="_isCreateButton"
                     v-show="!isEditing"
-                    theme="icon"
                     type="button"
+                    theme="icon"
                     @click="_onAddClick"
                 >
-                    <slot name="create-icon">
-                        <AwIconSystemMono name="add-circle" size="20" />
-                    </slot>
+                    <template #icon>
+                        <slot name="create-icon">
+                            <AwIconSystemMono name="add-circle" size="20" />
+                        </slot>
+                    </template>
                 </AwButton>
 
                 <AwButton
@@ -73,11 +75,11 @@
                     <AwIconSystemMono name="close" />
                 </AwButton>
                 <AwButton
-                    :size="$attrs.size || 'md'"
                     tabindex="-1"
-                    theme="icon"
                     type="button"
                     class="h-full"
+                    theme="icon"
+                    :size="$attrs.size || 'md'"
                     @click="searchable ? toggleDropdown() : null"
                 >
                     <AwIconSystemColor
@@ -86,6 +88,7 @@
                         name="spinner"
                         class="h-5 w-5"
                     />
+
                     <AwIconSystemMono
                         v-if="
                             !isLoading &&
@@ -150,9 +153,9 @@
                         <AwIconSystemMono name="close" />
                     </AwButton>
                     <AwButton
-                        :size="$attrs.size || 'md'"
                         tabindex="-1"
                         theme="icon"
+                        :size="$attrs.size || 'md'"
                         class="h-full"
                         @click="searchable ? toggleDropdown() : null"
                     >

package/components/2_molecules/AwSquareIconButton.vue

@@ -0,0 +1,52 @@
+<template>
+    <component
+        class="aw-square-icon-button"
+        :class="classes"
+        :is="_linkComponent"
+        :disabled="isDisabled"
+        v-bind="_linkAttrs"
+        v-on="$listeners"
+    >
+        <slot>
+            <AwIcon :name="icon" :size="iconSize" />
+        </slot>
+    </component>
+</template>
+
+<script>
+import AwLink from '@AwAtoms/AwLink.vue'
+
+export default {
+    name: 'AwSquareIconButton',
+
+    extends: AwLink,
+
+    props: {
+        icon: {
+            type: String,
+            default: 'close'
+        },
+
+        iconSize: {
+            type: [String, Number],
+            default: 16
+        },
+
+        // Possible values: mono-900, mono-800, mono-700, mono-600
+        color: {
+            type: String,
+            default: 'mono-900'
+        }
+    },
+
+    computed: {
+        classes() {
+            return [`aw-square-icon-button--color-${this.color || 'mono-900'}`]
+        },
+
+        isDisabled() {
+            return this.$attrs.disabled === true || this.$attrs.disabled === ''
+        }
+    }
+}
+</script>

package/components/2_molecules/AwTabNav.vue

@@ -8,9 +8,14 @@
                 [`${_cssClasses.base}--without-min-with`]: modifiers.includes(
                     'without-min-with'
                 ),
-                [`${_cssClasses.base}--fullwidth`]: modifiers.includes(
-                    'fullwidth'
-                )
+                [`${_cssClasses.base}--expand`]:
+                    (modifiers.includes('expand') ||
+                        !modifiers.includes('always-small')) &&
+                    !modifiers.includes('without-min-with'),
+                [`${_cssClasses.base}--fullwidth`]:
+                    modifiers.includes('fullwidth') &&
+                    !modifiers.includes('always-small') &&
+                    !modifiers.includes('without-min-with')
             }
         ]"
         @resized="scrollToActive(false)"

package/components/3_organisms/AwAddressBlock.vue

@@ -15,9 +15,8 @@
             <!-- Address info -->
             <AwAccordionFold :show="hasAddress">
                 <div class="flex justify-end relative w-full">
-                    <AwButton
+                    <AwSquareIconButton
                         icon="edit"
-                        theme="circle"
                         class="edit-button"
                         @click="openModal(null)"
                     />
@@ -175,11 +174,7 @@
                         @click="saveAddress"
                     />
 
-                    <AwButton
-                        color="default"
-                        theme="ghost"
-                        @click="resetAddress"
-                    >
+                    <AwButton color="mono" @click="resetAddress">
                         <span class="text-dark-blue">
                             {{ $t('Cancel') }}
                         </span>
@@ -193,6 +188,7 @@
 <script>
 import { clone } from 'rambdax'
 import { makePreventableEventMock } from '@AwUtils/events'
+import AwSquareIconButton from '../2_molecules/AwSquareIconButton.vue'
 
 const BASE = {
     description: null,
@@ -216,6 +212,7 @@ const BASE = {
 
 export default {
     name: 'AwAddressBlock',
+    components: { AwSquareIconButton },
 
     props: {
         model: {

package/components/3_organisms/AwCodeSnippet.vue

@@ -46,7 +46,8 @@ export default {
                         staticClass: 'absolute top-0 right-0 mr-4 mt-4',
                         props: {
                             size: 'sm',
-                            color: 'surface'
+                            color: 'mono',
+                            theme: 'outline'
                         },
                         on: {
                             click: () => copyFn(props.code)