@v1nt1248/3nclient-lib 0.2.69 → 0.2.71

package/package.json

@@ -2,7 +2,7 @@
   "name": "@v1nt1248/3nclient-lib",
   "license": "AGPL-3.0-or-later",
   "author": "v1nt1248",
-  "version": "0.2.69",
+  "version": "0.2.71",
   "description": "Library for 3NWeb clients",
   "type": "module",
   "files": [

package/src/components/ui3n-button/ui3n-button.vue

@@ -233,7 +233,7 @@
   }
 
   .icon {
-    --ui3n-button-icon-bg-color: hsl(from var(--ui3n-button-bg-color-custom) h s calc(l - 10));
+    --ui3n-button-icon-bg-color: oklch(from var(--ui3n-button-bg-color-custom) calc(l - 0.1) c h);
 
     background: var(--ui3n-button-bg-color-custom);
     color: var(--ui3n-button-text-color-custom);
@@ -256,7 +256,7 @@
     }
 
     &:focus {
-      outline: 1px solid hsl(from var(--ui3n-button-icon-bg-color) h s calc(l - 10));
+      outline: 1px solid oklch(from var(--ui3n-button-icon-bg-color) calc(l - 0.1) c h);
     }
 
     &[disabled] {
@@ -266,7 +266,7 @@
   }
 
   .custom {
-    --ui3n-button-custom-bg-color: hsl(from var(--ui3n-button-bg-color-custom) h s calc(l - 10));
+    --ui3n-button-custom-bg-color: oklch(from var(--ui3n-button-bg-color-custom) calc(l - 0.1) c h);
 
     background: var(--ui3n-button-bg-color-custom);
     color: var(--ui3n-button-text-color-custom);
@@ -276,7 +276,7 @@
     }
 
     &:focus {
-      outline: 1px solid hsl(from var(--ui3n-button-custom-bg-color) h s calc(l - 10));
+      outline: 1px solid oklch(from var(--ui3n-button-custom-bg-color) calc(l - 0.1) c h);
     }
 
     &[disabled] {

package/src/components/ui3n-checkbox/ui3n-checkbox.vue

@@ -238,17 +238,17 @@
     background-color: var(--ui3n-checkbox-color);
 
     &:hover {
-      border-color: hsl(from var(--ui3n-checkbox-color) h s calc(l - 10));
-      background-color: hsl(from var(--ui3n-checkbox-color) h s calc(l - 10));
-      @include mixins.ripple(hsl(from var(--ui3n-checkbox-color) h s calc(l - 10)));
+      border-color: oklch(from var(--ui3n-checkbox-color) calc(l - 0.1) c h);
+      background-color: oklch(from var(--ui3n-checkbox-color) calc(l - 0.1) c h);
+      @include mixins.ripple(oklch(from var(--ui3n-checkbox-color) calc(l - 0.1) c h));
     }
   }
 
   .unfilled {
     &:hover {
-      border-color: hsl(from var(--ui3n-checkbox-color) h s calc(l - 10));
-      background-color: hsl(from transparent h s calc(l - 10));
-      @include mixins.ripple(hsl(from transparent h s calc(l - 10)));
+      border-color: oklch(from var(--ui3n-checkbox-color) calc(l - 0.1) c h);
+      background-color: oklch(from transparent calc(l - 0.1) c h);
+      @include mixins.ripple(oklch(from transparent calc(l - 0.1) c h));
     }
   }
 

package/src/components/ui3n-icon/ui3n-icon.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, onMounted, useTemplateRef, watch } from 'vue';
+import { computed } from 'vue';
 import type { Ui3nIconEmits, Ui3nIconProps } from './types';
 
 const props = withDefaults(
@@ -12,8 +12,6 @@ const props = withDefaults(
 );
 const emits = defineEmits<Ui3nIconEmits>();
 
-const iconEl = useTemplateRef('icon');
-
 const widthVal = computed(() => props.size || props.width || 16);
 const heightVal = computed(() => props.size || props.height || 16);
 const widthCss = computed(() => `${widthVal.value}px`);
@@ -35,29 +33,12 @@ const iconStyle = computed(() => {
 function onClick(ev: Event) {
   emits('click', ev);
 }
-
-onMounted(() => {
-  if (iconEl.value) {
-    iconEl.value.classList.add(`ui3n-icon__${props.icon}`);
-  }
-});
-
-watch(
-  () => props.icon,
-  (val, oldVal) => {
-    if (val && val !== oldVal) {
-      iconEl.value?.classList.remove(`ui3n-icon__${oldVal}`);
-      iconEl.value?.classList.add(`ui3n-icon__${val}`);
-    }
-  }
-)
 </script>
 
 <template>
   <div
-    ref="icon"
-    class="ui3n-icon"
-    :class="$style.icon"
+    :class="$style.ui3nIcon"
+    :data-icon="icon"
     :title="title"
     :style="iconStyle"
     @click="onClick"
@@ -65,9 +46,10 @@ watch(
 </template>
 
 <style lang="scss" module>
-.icon {
+.ui3nIcon {
   --ui3n-icon-color: v-bind(color);
 
+  display: block;
   min-width: v-bind(widthCss);
   width: v-bind(widthCss);
   max-width: v-bind(widthCss);
@@ -76,6 +58,10 @@ watch(
   max-height: v-bind(heightCss);
   flex-grow: 0;
   flex-shrink: 0;
+  background-color: currentcolor;
   color: var(--ui3n-icon-color);
+  mask-image: var(--svg);
+  mask-repeat: no-repeat;
+  mask-size: 100% 100%;
 }
 </style>

package/src/components/ui3n-radio-group/ui3n-radio.vue

@@ -223,8 +223,8 @@
 
     &:hover {
       cursor: pointer;
-      background-color: hsl(from transparent h s calc(l - 10));
-      @include mixins.ripple(hsl(from transparent h s calc(l - 10)));
+      background-color: oklch(from transparent calc(l - 0.1) c h);
+      @include mixins.ripple(oklch(from transparent calc(l - 0.1) c h));
     }
   }
 

package/src/components/ui3n-slider/ui3n-slider.vue

@@ -343,36 +343,6 @@
     z-index: 3;
   }
 
-  //.pointer {
-  //  position: absolute;
-  //  top: 0;
-  //  width: var(--ui3n-slider-thumb-size);
-  //  height: var(--ui3n-slider-thumb-size);
-  //  border-radius: 50%;
-  //  background-color: var(--ui3n-slider-thumb-color);
-  //  cursor: pointer;
-  //  touch-action: none;
-  //  z-index: 3;
-  //
-  //  &:hover {
-  //    background-color: hsl(from var(--ui3n-slider-thumb-color) h s calc(l + 5));
-  //  }
-  //
-  //  &.selected::before {
-  //    position: absolute;
-  //    content: '';
-  //    width: calc(var(--ui3n-slider-thumb-size) * 2);
-  //    height: calc(var(--ui3n-slider-thumb-size) * 2);
-  //    left: 50%;
-  //    top: 50%;
-  //    transform: translate(-50%, -50%);
-  //    border-radius: 50%;
-  //    opacity: 0.2;
-  //    transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
-  //    background-color: var(--ui3n-slider-thumb-color);
-  //  }
-  //}
-
   .pointer {
     position: relative;
     width: 100%;
@@ -383,7 +353,7 @@
     z-index: 5;
 
     &:hover {
-      background-color: hsl(from var(--ui3n-slider-thumb-color) h s calc(l + 5));
+      background-color: oklch(from var(--ui3n-slider-thumb-color) calc(l + 0.1) c h);
     }
 
     &.selected::before {