@awes-io/ui 2.103.0 → 2.106.2

package/CHANGELOG.md

@@ -3,6 +3,62 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.106.2](https://github.com/awes-io/client/compare/@awes-io/ui@2.106.1...@awes-io/ui@2.106.2) (2024-07-04)
+
+
+### Bug Fixes
+
+* **action-card:** header styles collision resolved ([0611bff](https://github.com/awes-io/client/commit/0611bff2f0ee3dac7be12f8b208718d4ceaf8bcd))
+
+
+
+
+
+## [2.106.1](https://github.com/awes-io/client/compare/@awes-io/ui@2.106.0...@awes-io/ui@2.106.1) (2024-06-25)
+
+
+### Bug Fixes
+
+* release fix ([eca0996](https://github.com/awes-io/client/commit/eca0996771eef7d2485f49547a4702412960d149))
+
+
+
+
+
+# [2.106.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.105.0...@awes-io/ui@2.106.0) (2024-06-25)
+
+
+### Features
+
+* release fix ([8e65368](https://github.com/awes-io/client/commit/8e65368607baadd1fb9b18f86050c9715ab059d1))
+
+
+
+
+
+# [2.105.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.104.0...@awes-io/ui@2.105.0) (2024-06-25)
+
+
+### Features
+
+* release fix ([7b2983f](https://github.com/awes-io/client/commit/7b2983f7bb52f7a89c826c5be58cd2197531a10d))
+
+
+
+
+
+# [2.104.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.103.0...@awes-io/ui@2.104.0) (2024-06-25)
+
+
+### Features
+
+* change style for switcher ([fc3d772](https://github.com/awes-io/client/commit/fc3d772943889dbd28a750ba59006fbe1b13a190))
+* refactoring style for aw alert ([7d16355](https://github.com/awes-io/client/commit/7d1635537803558800ab1741ce997d9a463d7146))
+
+
+
+
+
 # [2.103.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.102.2...@awes-io/ui@2.103.0) (2024-05-22)
 
 

package/assets/css/components/action-card.css

@@ -13,7 +13,7 @@
         display: flex;
         align-items: center;
         gap: 1rem;
-        padding: 0 1rem 1rem;
+        padding: 0 1rem 1rem 1rem;
         min-width: 0;
         overflow: hidden;
     }
@@ -21,6 +21,7 @@
     &__title {
         font-size: 1rem;
         line-height: 1.5;
+        font-weight: bold;
 
         margin-top: 0;
         margin-bottom: 0;

package/assets/css/components/alert.css

@@ -1,17 +1,18 @@
 .aw-alert {
-    padding: 1rem 1.5rem;
+    padding: 0.875rem 1.375rem;
     border-radius: 0.625rem;
-    background: var(--aw-alert-bg);
+    border: 0.125rem dashed var(--aw-alert-color);
 
     &__icon {
         margin-right: 0.625rem;
+        color: var(--aw-alert-color);
     }
 
     .aw-description {
-        color: var(--aw-alert-on-color);
+        color: var(--c-on-surface);
 
         a {
-            color: var(--aw-alert-on-color);
+            color: var(--c-on-surface);
         }
     }
 
@@ -20,6 +21,7 @@
         margin: 0;
 
         &-text {
+            font-weight: 700;
             margin-top: 0.125rem;
         }
     }
@@ -28,14 +30,16 @@
         display: flex;
 
         align-items: center;
-        margin-left: 2.125rem;
+        margin-left: 1.75rem;
         margin-top: 0.5rem;
 
         font-size: 0.875rem;
+        line-height: 1.125rem;
+        font-weight: 700;
 
         :where(:is(a, button):not(.aw-button)) {
-            --btn-color: var(--aw-alert-on-color);
-            color: var(--aw-alert-on-color);
+            --btn-color: var(--aw-alert-color);
+            color: var(--aw-alert-color);
         }
 
         :where(:is(a, button):not(.aw-button)) {
@@ -44,6 +48,9 @@
 
         a,
         button {
+            font-size: 0.875rem;
+            line-height: 1.125rem;
+            font-weight: 700;
             white-space: nowrap;
         }
     }
@@ -55,7 +62,7 @@
     }
 
     &--color-default {
-        border: 1px solid var(--c-mono-800);
+        border: 0.125rem dashed var(--c-mono-800);
     }
 }
 

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

@@ -126,7 +126,7 @@
             color: var(--c-overlay, '#000');
             /* background-color: currentColor; */
             border-radius: 50%;
-            box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
+            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
             transition: 120ms transform, 120ms background-color;
             z-index: 1;
             padding: 4px;
@@ -145,7 +145,7 @@
         @apply bg-mono-800;
 
         .aw-switch-field__switch-circle {
-            @apply bg-mono-600;
+            background-color: var(--c-on-overlay, '#fff');
         }
 
         .aw-switch-field__switch-icon {
@@ -196,76 +196,80 @@
         }
 
         .aw-switch-field__switch {
-            width: 32px;
-            height: 18px;
+            width: 28px;
+            height: 16px;
 
             &-circle {
-                width: 14px;
-                height: 14px;
+                width: 12px;
+                height: 12px;
                 margin: 2px;
             }
         }
 
         .aw-switch-field__label {
-            padding-top: 0.125rem;
+            padding-top: 0;
         }
     }
 
     &--md {
         .aw-switch-field__element:checked ~ .aw-switch-field__switch {
             .aw-switch-field__switch-circle {
-                transform: translateX(130%);
+                transform: translateX(108%);
             }
         }
 
         .aw-switch-field__switch {
-            width: 48px;
-            height: 24px;
+            width: 37px;
+            height: 20px;
 
             &-circle {
-                width: 18px;
-                height: 18px;
-                margin: 3px;
+                width: 16px;
+                height: 16px;
+                margin: 2px;
             }
 
             &-icon--on {
-                left: 10px;
+                left: 5px;
             }
 
             &-icon--off {
-                right: 10px;
+                right: 5px;
             }
         }
+
+        .aw-switch-field__label {
+            padding-top: 1px;
+        }
     }
 
     &--lg {
         .aw-switch-field__element:checked ~ .aw-switch-field__switch {
             .aw-switch-field__switch-circle {
-                transform: translateX(150%);
+                transform: translateX(100%);
             }
         }
 
         .aw-switch-field__switch {
-            width: 76px;
-            height: 34px;
+            width: 60px;
+            height: 32px;
 
             &-circle {
                 width: 28px;
                 height: 28px;
-                margin: 3px;
+                margin: 2px;
             }
 
             &-icon--on {
-                left: 12px;
+                left: 4px;
             }
 
             &-icon--off {
-                right: 12px;
+                right: 4px;
             }
         }
 
         .aw-switch-field__label {
-            padding-top: 0.625rem;
+            padding-top: 0.5rem;
         }
     }
 
@@ -273,9 +277,9 @@
      * Label styles
      */
     &__label {
-        padding-top: 0.275rem;
-        font-size: 0.875rem;
-        line-height: 1.5;
+        padding-top: 0.3125rem;
+        font-size: 1rem;
+        line-height: 1.5rem;
     }
 
     &__element + &__label {

package/assets/css/main.css

@@ -1,5 +1,6 @@
 /**
  * Tailwind reset and base styles
+ *
  */
 /* @import 'tailwindcss/base'; */
 

package/components/1_atoms/AwActionCard.vue

@@ -3,12 +3,12 @@
         <div class="aw-action-card__header">
             <slot name="before-title"></slot>
 
-            <AwHeadline
+            <div
                 class="aw-action-card__title"
                 :class="{ truncate: !fullTitle }"
             >
                 {{ title }}
-            </AwHeadline>
+            </div>
 
             <slot name="after-title">
                 <AwButton

package/components/1_atoms/AwSwitcher.vue

@@ -147,11 +147,11 @@ export default {
         },
 
         _onIcon() {
-            return this.icon || (this.size === 'lg' ? 'on' : 'check')
+            return this.icon
         },
 
         _offIcon() {
-            return this.icon || (this.size === 'lg' ? 'off' : 'close')
+            return this.icon
         },
 
         onSystemIcon() {
@@ -163,7 +163,7 @@ export default {
         },
 
         iconSize() {
-            return this.size === 'lg' ? 26 : 12
+            return this.size === 'lg' ? 22 : 12
         },
 
         _color() {
@@ -192,7 +192,8 @@ export default {
         _onPointerDown($event) {
             // const hasTooltip = !!this.errorText /* blocks switcher */
 
-            if (this.startPos !== null || this.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

@@ -30,7 +30,7 @@
 </template>
 
 <script>
-import { toColor, toOnColor } from '@AwUtils/styles'
+import { toOnColor } from '@AwUtils/styles'
 
 export default {
     name: 'AwAlert',
@@ -46,11 +46,6 @@ export default {
             default: 'default'
         },
 
-        onColor: {
-            type: String,
-            default: ''
-        },
-
         iconColor: {
             type: String,
             default: ''
@@ -73,12 +68,7 @@ export default {
 
         styleVariables() {
             return {
-                '--aw-alert-bg': this.isCustomColor
-                    ? toColor(this.color)
-                    : null,
-                '--aw-alert-on-color': this.onColor
-                    ? toColor(this.onColor)
-                    : this.isCustomColor
+                '--aw-alert-color': this.isCustomColor
                     ? toOnColor(this.color)
                     : null
             }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@awes-io/ui",
-    "version": "2.103.0",
+    "version": "2.106.2",
     "description": "User Interface (UI) components",
     "keywords": [
         "ui",
@@ -114,5 +114,5 @@
         "rollup-plugin-visualizer": "^2.6.0",
         "rollup-plugin-vue": "^5.0.1"
     },
-    "gitHead": "f53b33277dcf6e194c034d7544b7c46c2cba58de"
+    "gitHead": "d4ad064bd0bcf792d1be7322f0d7f9f0c27a5f0c"
 }