@awes-io/ui 2.94.1 → 2.95.0

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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

@@ -9,12 +9,12 @@
 
     position: fixed;
     bottom: 0;
-    min-height: 4rem;
+    min-height: 4.5rem;
     width: 100%;
     z-index: 2;
 
     & > * {
-        flex-basis: theme('spacing.20', 5rem);
+        flex-basis: theme('spacing.16', 4rem);
         flex-grow: 1;
         flex-shrink: 1;
     }

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

@@ -24,6 +24,18 @@
                 color: var(--c-mono-100);
             }
         }
+
+        &:before {
+            border-radius: 0.625rem;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 3.5rem;
+            height: 3rem;
+            content: '';
+            background-color: var(--c-mono-800);
+        }
     }
 
     &__icon {
@@ -39,7 +51,7 @@
 
             padding: 0.515625rem 0.75rem;
 
-            width: 100%;
+            width: 4.5rem;
             position: relative;
         }
     }
@@ -96,15 +108,14 @@
 
         &--active {
             &:before {
-                border-radius: 0.625rem;
-                position: absolute;
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%, -50%);
                 width: 4rem;
                 height: 3.0625rem;
-                content: '';
-                background-color: var(--c-mono-800);
+            }
+        }
+
+        &__icon {
+            &-block {
+                width: 100%;
             }
         }
     }

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/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,7 +45,7 @@ import AwMenuItemIcon from '@AwLayouts/_AwMenuItemIcon.vue'
 
 export const VISIBLE_ITEMS_COUNT = 4
 
-const ICON_SIZE = 28
+const ICON_SIZE = 18
 
 const ACTION_ICON_SIZE = 36
 

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
+                            : '4.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 : '4.5rem'
             }"
         >
             <!-- eslint-disable prettier/prettier -->

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@awes-io/ui",
-    "version": "2.94.1",
+    "version": "2.95.0",
     "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": "5370f6445c32f26d9f569f4d5e1109caebbb9e1a"
 }