@awes-io/ui 2.74.0 → 2.74.1

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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/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,18 @@
     }
 }
 
-:root[data-dark="true"] {
+:root[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);
-            }
+            } */
         }
     }
 }

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/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/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/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.74.1",
     "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": "3cf0338e986c43e59e3ed03b1b4e1440a931ffa6"
 }