@awes-io/ui 2.94.1 → 2.96.1

package/CHANGELOG.md

@@ -3,6 +3,42 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.96.1](https://github.com/awes-io/client/compare/@awes-io/ui@2.96.0...@awes-io/ui@2.96.1) (2024-02-17)
+
+
+### Bug Fixes
+
+* updated versions ([72b7aef](https://github.com/awes-io/client/commit/72b7aeffccb6789009703d4008569d4b079be9c8))
+
+
+
+
+
+# [2.96.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.95.0...@awes-io/ui@2.96.0) (2024-02-17)
+
+
+### Features
+
+* some changes in style and logic in mobile menu ([0153aed](https://github.com/awes-io/client/commit/0153aed8c1d68593210f965c532d48581f03a0f2))
+
+
+
+
+
+# [2.95.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.94.1...@awes-io/ui@2.95.0) (2024-02-15)
+
+
+### Features
+
+* add border radius for mobile modal ([23f00cc](https://github.com/awes-io/client/commit/23f00ccaf6970f601b60e57dbc3fd0a54d97cb01))
+* add border radius for more page and new design for bottom bar ([1d236fd](https://github.com/awes-io/client/commit/1d236fd98863837ad879317ec69f1a8bdf924352))
+* add new mono color for dark mobile ([2dcb05c](https://github.com/awes-io/client/commit/2dcb05c40263aabcf808207b08472d4c7103ba61))
+* add width for mobile menu icon ([58268e7](https://github.com/awes-io/client/commit/58268e74230e4e801703d205960460c071dcfe52))
+
+
+
+
+
 ## [2.94.1](https://github.com/awes-io/client/compare/@awes-io/ui@2.94.0...@awes-io/ui@2.94.1) (2024-02-12)
 
 

package/assets/css/components/bottom-bar.css

@@ -3,18 +3,17 @@
     --icon-color-active: var(--c-accent, currentColor);
     @apply bg-surface;
     display: flex;
-    padding-bottom: env(safe-area-inset-bottom, 0);
     box-shadow: none;
     border-top: 1px solid rgba(var(--c-on-surface-rgb), .1);
 
     position: fixed;
     bottom: 0;
-    min-height: 4rem;
+    min-height: 3.5rem;
     width: 100%;
     z-index: 2;
 
     & > * {
-        flex-basis: theme('spacing.20', 5rem);
+        flex-basis: 9rem;
         flex-grow: 1;
         flex-shrink: 1;
     }
@@ -23,8 +22,7 @@
     &:after {
         content: '';
         display: block;
-        flex-basis: 50%;
-        flex-grow: 20;
+        flex-grow: 1;
         flex-shrink: 10;
     }
 }

package/assets/css/components/dropdown.css

@@ -15,7 +15,7 @@
     .aw-select__dropdown {
         box-shadow: 0px 20px 40px rgba(var(--c-overlay-rgb), 0.1);
         border-radius: 10px;
-        min-width: 250px;
+        min-width: 160px;
         border: 1px solid var(--c-mono-900);
     }
 

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

@@ -5,6 +5,7 @@
     align-items: center;
     color: inherit;
     width: 100%;
+    max-width: 144px;
 
     position: relative;
 
@@ -37,10 +38,10 @@
             justify-content: center;
             flex-direction: column;
 
-            padding: 0.515625rem 0.75rem;
+            padding: 0.5rem 0.125rem;
 
-            width: 100%;
             position: relative;
+            max-width: 100%;
         }
     }
 
@@ -107,5 +108,12 @@
                 background-color: var(--c-mono-800);
             }
         }
+
+        &__icon {
+            &-block {
+                padding: 0.515625rem 0.75rem;
+                width: 100%;
+            }
+        }
     }
 }

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

@@ -56,7 +56,7 @@
 
     &--island {
         padding: 1.5rem;
-        border-radius: 1.25rem;
+        border-radius: 0.9375rem;
 
         .aw-mobile-menu-item {
             &__icon-bg {

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

@@ -15,7 +15,7 @@
         list-style: none;
         padding: 0;
         margin: 0;
-        border-radius: 1.25rem;
+        border-radius: 0.9375rem;
     }
 
     li + li .aw-mobile-menu-nav__item--divide {
@@ -37,7 +37,7 @@
 
     li + li .aw-mobile-menu-item--island {
         position: relative;
-        margin-top: 0.125rem;
+        margin-top: 0.25rem;
     }
 }
 

package/assets/css/components/modal.css

@@ -21,6 +21,9 @@ $modal-aside-width-large: 75vw;
 
     &__dialog {
         @apply relative max-w-full mx-auto bg-surface;
+
+        border-top-left-radius: 0.9375rem;
+        border-top-right-radius: 0.9375rem;
     }
 
     &__header {
@@ -120,6 +123,12 @@ $modal-aside-width-large: 75vw;
         }
     }
 
+    &[class*='is-aside'] & {
+        &__dialog {
+            border-radius: 0;
+        }
+    }
+
     &[class*='is-aside'] {
         left: auto;
         min-width: $modal-aside-width;
@@ -220,6 +229,12 @@ $modal-aside-width-large: 75vw;
             width: calc(100% + 4rem);
         }
 
+        &[class*='is-fullscreen'] &, &[class*='is-overlay-aside'] & {
+            &__dialog {
+                border-radius: 0;
+            }
+        }
+
         &:not(.is-aside):not([class*='is-overlay-aside']) &__header {
             @apply items-center justify-center px-8;
         }
@@ -234,7 +249,7 @@ $modal-aside-width-large: 75vw;
 
         &:not(.is-aside):not([class*='is-overlay-aside']) &__title,
         &:not(.is-aside):not([class*='is-overlay-aside']) &__subtitle {
-            @apply text-center;
+            @apply text-center mx-auto;
         }
 
         &:not(.is-aside):not([class*='is-overlay-aside']) &__subtitle {
@@ -352,6 +367,10 @@ $modal-aside-width-large: 75vw;
             max-width: 580px;
         }
 
+        &.is-fullscreen &__dialog, &.is-overlay-aside &__dialog {
+            border-radius: 0;
+        }
+
         &.is-fullscreen &__header {
             @apply pt-16;
         }

package/assets/css/components/more.css

@@ -2,7 +2,7 @@
     @apply bg-page-bg;
     width: 100%;
     min-height: 100vh;
-    padding-bottom: calc(5rem + var(--page-buttons-bottom, 0px));
+    padding-bottom: 9.5rem;
 
     &__profile {
         display: flex;
@@ -11,7 +11,7 @@
         flex-direction: column;
 
         background: var(--c-surface);
-        border-radius: 0 0 0.9375rem 0.9375rem;
+        border-radius: 0.9375rem;
         padding: 1.9375rem 1.5rem 1.5rem;
     }
 

package/assets/css/main.css

@@ -30,6 +30,7 @@
  * Prism highlight
  */
 @import 'prismjs/themes/prism.css';
+
 [data-dark="true"] {
     pre[class*="language-"] {
         background-color: theme('darkTheme.colors.surface');
@@ -43,6 +44,45 @@
         }
     }
 }
+
+@screen lg {
+    :root[data-dark='true'] {
+        --c-surface: #313236;
+
+        --c-page-bg: #1e1e21;
+
+        --c-mono-0: #ffffff;
+        --c-mono-50: #f3f5f7;
+        --c-mono-100: #eaeaeb;
+        --c-mono-200: #d5d5d6;
+        --c-mono-300: #c0c1c2;
+        --c-mono-400: #abacad;
+        --c-mono-500: #979799;
+        --c-mono-600: #828285;
+        --c-mono-700: #6d6d70;
+        --c-mono-800: #46474a;
+        --c-mono-900: #434447;
+        --c-mono-1000: #2e2f33;
+
+        --c-surface-rgb: 49,50,54;
+
+        --c-page-bg-rgb: 30,30,33;
+
+        --c-mono-0-rgb: 255,255,255;
+        --c-mono-50-rgb: 243,245,247;
+        --c-mono-100-rgb: 234,234,235;
+        --c-mono-200-rgb: 213,213,214;
+        --c-mono-300-rgb: 192,193,194;
+        --c-mono-400-rgb: 171,172,173;
+        --c-mono-500-rgb: 151,151,153;
+        --c-mono-600-rgb: 130,130,133;
+        --c-mono-700-rgb: 109,109,112;
+        --c-mono-800-rgb: 70,71,74;
+        --c-mono-900-rgb: 67,68,71;
+        --c-mono-1000-rgb: 46,47,51;
+    }
+}
+
 pre[class*="language-"] {
     margin-top: 0;
     margin-bottom: 0;

package/assets/js/icons/mono.js

@@ -58,7 +58,7 @@ export const ICONS = {
         'M4.58 3h14.85A3.57 3.57 0 0 1 23 6.37v10.66a3.57 3.57 0 0 1-3.37 3.56l-.2.01H4.58a3.57 3.57 0 0 1-3.57-3.37V6.58A3.58 3.58 0 0 1 4.37 3l.2-.01Zm16.77 5.91-8.96 4.72a.82.82 0 0 1-.66.05l-.1-.05-8.98-4.72v8.12a1.92 1.92 0 0 0 1.77 1.91l.16.01h14.85a1.93 1.93 0 0 0 1.92-1.77V8.91Zm-1.92-4.26H4.58a1.93 1.93 0 0 0-1.92 1.77v.63L12 11.97l9.35-4.92v-.47a1.93 1.93 0 0 0-1.76-1.92l-.16-.01Z',
     menu: 'M1 4h22v1.7H1zM1 18.3h22V20H1zM1 11.15h22v1.7H1z',
     'menu-dots':
-        'M6.11 8.23a2.115 2.115 0 0 0 2.28-2.112 2.12 2.12 0 0 0-2.28-2.112 2.116 2.116 0 0 0-1.953 2.112A2.12 2.12 0 0 0 6.11 8.23Zm2.117 9.488A2.12 2.12 0 0 1 6.117 20a2.116 2.116 0 0 1-2.11-2.282 2.119 2.119 0 0 1 2.11-1.954 2.115 2.115 0 0 1 2.11 1.954ZM17.72 8.23A2.115 2.115 0 0 0 20 6.118a2.119 2.119 0 0 0-2.28-2.112 2.116 2.116 0 0 0-1.953 2.112A2.119 2.119 0 0 0 17.72 8.23Zm2.104 9.488a2.122 2.122 0 0 1-1.263 2.105 2.116 2.116 0 0 1-2.958-2.105 2.119 2.119 0 0 1 2.11-1.954 2.115 2.115 0 0 1 2.11 1.954Z',
+        'M4.83 7.33a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm15.34 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM7.83 19.67a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm12.34 3a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z',
     more:
         'M4.5 14.25a2.25 2.25 0 1 0 0-4.5 2.25 2.25 0 0 0 0 4.5ZM12 14.25a2.25 2.25 0 1 0 0-4.5 2.25 2.25 0 0 0 0 4.5ZM19.5 14.25a2.25 2.25 0 1 0 0-4.5 2.25 2.25 0 0 0 0 4.5Z',
     'more-v':
@@ -69,6 +69,8 @@ export const ICONS = {
         'M12 3a1.35 1.35 0 0 1 1.35 1.35v6.3h6.3a1.35 1.35 0 1 1 0 2.7h-6.3v6.3a1.35 1.35 0 1 1-2.7 0v-6.3h-6.3a1.35 1.35 0 0 1 0-2.7h6.3v-6.3A1.35 1.35 0 0 1 12 3Z',
     'plus-circle':
         'M17.7 11.7v.6a.5.5 0 0 1-.6.5h-4.3v4.3a.5.5 0 0 1-.5.6h-.6a.5.5 0 0 1-.5-.6v-4.3H6.9a.5.5 0 0 1-.6-.5v-.6a.5.5 0 0 1 .6-.5h4.3V6.9a.5.5 0 0 1 .5-.6h.6a.5.5 0 0 1 .5.6v4.3h4.3a.5.5 0 0 1 .6.5Zm5.3.3a11 11 0 1 1-22 0 11 11 0 0 1 22 0Zm-1.4 0a9.6 9.6 0 1 0-19.2 0 9.6 9.6 0 0 0 19.2 0Z',
+    'plus-fill-square':
+        'M6 0a6 6 0 0 0-6 6v12a6 6 0 0 0 6 6h12a6 6 0 0 0 6-6V6a6 6 0 0 0-6-6H6Zm6.38 8.56a.54.54 0 0 0-.92.38v2.52H8.94a.54.54 0 0 0 0 1.08h2.52v2.52a.54.54 0 1 0 1.08 0v-2.52h2.52a.54.54 0 1 0 0-1.08h-2.52V8.94a.54.54 0 0 0-.16-.38Z',
     save:
         'M2 5.06A3.06 3.06 0 0 1 5.06 2h11.07a3.61 3.61 0 0 1 2.55 1.06l2.26 2.26C21.62 6 22 6.92 22 7.87v11.07A3.06 3.06 0 0 1 18.94 22H5.06A3.06 3.06 0 0 1 2 18.94V5.06Zm3.06-1.4c-.77 0-1.4.63-1.4 1.4v13.88c0 .77.63 1.4 1.4 1.4h.27V14.5a2.5 2.5 0 0 1 2.5-2.5h8.34a2.5 2.5 0 0 1 2.5 2.5v5.83h.27c.77 0 1.4-.62 1.4-1.39V7.87c0-.51-.21-1-.58-1.37L17.5 4.24a1.94 1.94 0 0 0-1.06-.55v3.03a2.5 2.5 0 0 1-2.5 2.5h-5a2.5 2.5 0 0 1-2.5-2.5V3.67H5.06ZM17 20.34V14.5a.83.83 0 0 0-.83-.83H7.83a.83.83 0 0 0-.83.83v5.83h10ZM8.11 3.67v3.05c0 .46.37.84.83.84h5a.83.83 0 0 0 .84-.84V3.67H8.1Z',
     search:

package/assets/js/styles.js

@@ -1,4 +1,4 @@
-import { keys } from "rambdax"
+import { keys } from 'rambdax'
 
 export const CUSTOM_COLORS = {
     red: '#fa0000',
@@ -115,22 +115,22 @@ export default {
             error: '#FF4931',
             'error-hover': '#E6422C',
 
-            surface: '#313236',
-            'page-bg': '#1E1E21',
+            surface: '#141414',
+            'page-bg': '#010101',
             overlay: 'rgba(0, 0, 0, 0.5)',
 
-            'mono-0': '#fff',
-            'mono-50': '#f3f5f7',
-            'mono-100': '#EAEAEB',
-            'mono-200': '#D5D5D6',
-            'mono-300': '#C0C1C2',
+            'mono-0': '#FFFFFF',
+            'mono-50': '#DBDDDE',
+            'mono-100': '#D3D3D4',
+            'mono-200': '#C0C0C1',
+            'mono-300': '#9A9B9C',
             'mono-400': '#ABACAD',
-            'mono-500': '#979799',
-            'mono-600': '#828285',
-            'mono-700': '#6D6D70',
-            'mono-800': '#46474A',
+            'mono-500': '#88888A',
+            'mono-600': '#757578',
+            'mono-700': '#626265',
+            'mono-800': '#3C3D40',
             'mono-900': '#434447',
-            'mono-1000': '#2E2F33',
+            'mono-1000': '#292A2E',
 
             ...CUSTOM_COLORS_BG_DARK
         },
@@ -169,12 +169,10 @@ const CSS_COLOR_RE = /(#(?:[0-9a-f]{2}){2,4}|#[0-9a-f]{3}|(?:rgba?|hsla?)\((?:\d
 
 export const isCssColor = (color) => CSS_COLOR_RE.test(color)
 
-export const isCustomColor = color => CUSTOM_COLORS_KEYS.includes(color)
+export const isCustomColor = (color) => CUSTOM_COLORS_KEYS.includes(color)
 
 export const toColor = (color) =>
-    isCssColor(color || '')
-        ? color
-        : `var(--c-${(color || '').toLowerCase()})`
+    isCssColor(color || '') ? color : `var(--c-${(color || '').toLowerCase()})`
 
 export const toOnColor = (color) =>
     (color || '').startsWith('#')

package/components/3_organisms/AwBottomBar.vue

@@ -45,9 +45,9 @@ import AwMenuItemIcon from '@AwLayouts/_AwMenuItemIcon.vue'
 
 export const VISIBLE_ITEMS_COUNT = 4
 
-const ICON_SIZE = 28
+const ICON_SIZE = 24
 
-const ACTION_ICON_SIZE = 36
+const ACTION_ICON_SIZE = 40
 
 export default {
     name: 'AwBottomBar',
@@ -123,7 +123,9 @@ export default {
         _pickItemProps(props) {
             return {
                 ...omit('children,listeners', props),
-                size: props.hideText ? ACTION_ICON_SIZE : ICON_SIZE
+                size: props.hideText ? ACTION_ICON_SIZE : ICON_SIZE,
+                icon: props.hideText ? 'awesio/plus-fill-square' : props.icon,
+                class: props.hideText ? 'aw-icon-menu-item--active' : ''
             }
         }
     }

package/components/4_pages/AwPage.vue

@@ -9,7 +9,9 @@
             <slot name="heading" v-bind="{ titleTag, title, breadcrumb }">
                 <AwPageHeadline
                     :style="{
-                        '--page-buttons-bottom': _hideBottomBar ? null : '4rem'
+                        '--page-buttons-bottom': _hideBottomBar
+                            ? null
+                            : '3.5rem'
                     }"
                     :title="_title"
                     :breadcrumb="breadcrumb"
@@ -48,7 +50,7 @@
                 'aw-page__content_fake-fullscreen': isFakeFullscreen
             }"
             :style="{
-                '--page-buttons-bottom': _hideBottomBar ? null : '4rem'
+                '--page-buttons-bottom': _hideBottomBar ? null : '3.5rem'
             }"
         >
             <!-- eslint-disable prettier/prettier -->

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@awes-io/ui",
-    "version": "2.94.1",
+    "version": "2.96.1",
     "description": "User Interface (UI) components",
     "keywords": [
         "ui",
@@ -114,5 +114,5 @@
         "rollup-plugin-visualizer": "^2.6.0",
         "rollup-plugin-vue": "^5.0.1"
     },
-    "gitHead": "83f5cd91ba1e5447dcabd88201f143a656fffc27"
+    "gitHead": "2923cbb7535243156f99d358df5613ba85f9db6e"
 }

package/readme.md

@@ -1 +1 @@
-Awes.io/Ui 424
+Awes.io/Ui 321