@community-release/nx-ui 0.0.74 → 0.0.75

package/dist/runtime/components/map/location/nearest.vue

@@ -115,15 +115,15 @@
 <style lang="less">
 @import url(../../styles/mixins.less);
 
-@com-height: var(--ui-input-height-default);
+@com-height: var(--ui-input-height-m);
 
-@com-border-radius-default: var(--ui-border-radius-default);
-@com-space-default: var(--ui-space-default);
-@com-space-mini: var(--ui-space-mini);
-@com-space-micro: var(--ui-space-micro);
+@com-border-radius-m: var(--ui-border-radius-m);
+@com-space-m: var(--ui-space-m);
+@com-space-xs: var(--ui-space-xs);
+@com-space-2xs: var(--ui-space-2xs);
 
-@com-text-medium: var(--ui-text-medium);
-@com-text-small: var(--ui-text-small);
+@com-text-l: var(--ui-text-l);
+@com-text-s: var(--ui-text-s);
 
 @com-color-bg: var(--ui-color-bg);
 @com-color-primary: var(--ui-color-primary);
@@ -134,7 +134,7 @@
 .component-ui-map-location-nearest {
 	height: @com-height;
 	background: @com-color-bg;
-	border-radius: @com-border-radius-default;
+	border-radius: @com-border-radius-m;
 
 	position: relative;
 	display: flex;
@@ -144,7 +144,7 @@
 		position: relative;
 		flex: 0 0 38px;
 		line-height: @com-height;
-		font-size: @com-text-medium;
+		font-size: @com-text-l;
 		color: @com-color-primary;
 
 		.component-ui-loading {
@@ -168,10 +168,10 @@
 
 	.label {
 		display: flex;
-		padding-right: @com-space-micro;
+		padding-right: @com-space-2xs;
 		align-items: center;
 		line-height: 1.1;
-		font-size: @com-text-small;
+		font-size: @com-text-s;
 
 		span {
 			.mix-multiline-text-overflow(2);

package/dist/runtime/components/map/zoom.vue

@@ -1,9 +1,9 @@
 <template>
 	<div class="component-ui-map-zoom">
 		<div class="prepend"><slot /></div>
-		<ui-button @click="store.zoomIn" class="plus" color="gray" block variant="flat" size="small" shape="square">+</ui-button>
+		<ui-button @click="store.zoomIn" class="plus" color="gray" block variant="flat" size="s" shape="square">+</ui-button>
 		<div class="separator"></div>
-		<ui-button @click="store.zoomOut" class="minus" color="gray" block variant="flat" size="small" shape="square">-</ui-button>
+		<ui-button @click="store.zoomOut" class="minus" color="gray" block variant="flat" size="s" shape="square">-</ui-button>
 	</div>
 </template>
 
@@ -12,12 +12,12 @@ const props = defineProps(['store']);
 </script>
 
 <style lang="less">
-@com-width: var(--ui-input-height-default);
-@com-border-radius-default: var(--ui-border-radius-default);
+@com-width: var(--ui-input-height-m);
+@com-border-radius-m: var(--ui-border-radius-m);
 
 // Padding
 @com-map-padding: var(--ui-map-padding);
-@com-space-mini: var(--ui-space-mini);
+@com-space-xs: var(--ui-space-xs);
 
 // Colors
 @com-color-surface: var(--ui-color-surface);
@@ -27,7 +27,7 @@ const props = defineProps(['store']);
 @com-bs-1: var(--ui-bs-1);
 
 // Font-size
-@com-text-large: var(--ui-text-large);
+@com-text-2xl: var(--ui-text-2xl);
 
 .component-ui-map-zoom {
 	position: absolute;
@@ -39,29 +39,29 @@ const props = defineProps(['store']);
 
 	background: @com-color-surface;
 	box-shadow: @com-bs-1;
-	border-radius: @com-border-radius-default;
+	border-radius: @com-border-radius-m;
 
 	.prepend {
 		position: absolute;
 		bottom: 100%;
 		left: 0;
 		right: 0;
-		margin-bottom: @com-space-mini;
+		margin-bottom: @com-space-xs;
 	}
 
 	.component-ui-button {
 		height: @com-width;
-		font-size: @com-text-large;
+		font-size: @com-text-2xl;
 	}
 
 	.component-ui-button.plus .button-bg {
-		border-top-left-radius: @com-border-radius-default;
-		border-top-right-radius: @com-border-radius-default;
+		border-top-left-radius: @com-border-radius-m;
+		border-top-right-radius: @com-border-radius-m;
 	}
 
 	.component-ui-button.minus .button-bg {
-		border-bottom-left-radius: @com-border-radius-default;
-		border-bottom-right-radius: @com-border-radius-default;
+		border-bottom-left-radius: @com-border-radius-m;
+		border-bottom-right-radius: @com-border-radius-m;
 	}
 
 	.separator {

package/dist/runtime/components/notice/index.vue

@@ -24,7 +24,7 @@ const { items } = storeToRefs(store);
 </script>
 
 <style lang="less">
-@com-space-default: var(--ui-space-default);
+@com-space-m: var(--ui-space-m);
 
 .list-enter-active,
 .list-leave-active {
@@ -47,9 +47,9 @@ const { items } = storeToRefs(store);
 .component-ui-notice {
 	transform: translateX(-50%);
 	position: fixed;
-	bottom: @com-space-default;
+	bottom: @com-space-m;
 	left: 50%;
-	padding: 0 @com-space-default;
+	padding: 0 @com-space-m;
 
 	width: 500px;
 	max-width: 100%;

package/dist/runtime/components/notice/notice-item.vue

@@ -34,16 +34,16 @@
 </script>
 
 <style lang="less">
-@com-border-radius-default: var(--ui-border-radius-default);
+@com-border-radius-m: var(--ui-border-radius-m);
 
 @com-color-secondary: var(--ui-color-secondary);
 @com-color-border: var(--ui-color-border);
 @com-color-surface: var(--ui-color-surface);
 @com-color-header-text: var(--ui-color-header-text);
-@com-color-gray-text: var(--ui-color-gray-text);
+@com-color-muted-text: var(--ui-color-muted-text);
 
-@com-space-medium: var(--ui-space-medium);
-@com-space-mini: var(--ui-space-mini);
+@com-space-l: var(--ui-space-l);
+@com-space-xs: var(--ui-space-xs);
 
 @com-bs-2: var(--ui-bs-2);
 
@@ -64,11 +64,11 @@
 	transition: all 0.5s ease;
 
 	position: relative;
-	margin-top: @com-space-mini;
-	padding: @com-space-medium;
+	margin-top: @com-space-xs;
+	padding: @com-space-l;
 
 	border: 1px solid @com-color-border;
-	border-radius: @com-border-radius-default;
+	border-radius: @com-border-radius-m;
 	background: @com-color-surface;
 	box-shadow: @com-bs-2;
 
@@ -105,7 +105,7 @@
 			transform-origin: 50%;
 			
 			fill: none;
-			stroke: @com-color-gray-text;
+			stroke: @com-color-muted-text;
 			stroke: @com-color-secondary;
 			stroke-width: 1px;
 

package/dist/runtime/components/radio.vue

@@ -95,15 +95,15 @@
 	@com-color-error: var(--ui-color-error);
 	@com-color-text: var(--ui-color-text);
 	@com-color-header-text: var(--ui-color-header-text);
-	@com-color-gray-text: var(--ui-color-gray-text);
+	@com-color-muted-text: var(--ui-color-muted-text);
 	
-	@com-input-height: var(--ui-input-height-default);
+	@com-input-height: var(--ui-input-height-m);
 
-	@com-text-default: var(--ui-text-default);
-	@com-text-medium: var(--ui-text-medium);
-	@com-text-small: var(--ui-text-small);
+	@com-text-m: var(--ui-text-m);
+	@com-text-l: var(--ui-text-l);
+	@com-text-s: var(--ui-text-s);
 
-	@com-space-micro: var(--ui-space-micro);
+	@com-space-2xs: var(--ui-space-2xs);
 
 	@com-ani-time: var(--ui-ani-time);
 
@@ -121,7 +121,7 @@
 		
 		height: @com-input-height;
 		line-height: @com-input-height;
-		font-size: @com-text-default;
+		font-size: @com-text-m;
 		font-weight: 500;
 		color: @com-color-text;
 
@@ -153,7 +153,7 @@
 			font-size: 10px;
 
 			border-radius: 50%;
-			border: 1px solid @com-color-gray-text;
+			border: 1px solid @com-color-muted-text;
 
 			color: @com-color-text-on-primar;
 

package/dist/runtime/components/select.vue

@@ -184,17 +184,17 @@ onMounted(() => {
 <style lang="less">
 @import (less) './styles/components.less';
 
-@com-space-micro: var(--ui-space-micro);
-@com-input-height-default: var(--ui-input-height-default);
+@com-space-2xs: var(--ui-space-2xs);
+@com-input-height-m: var(--ui-input-height-m);
 
 @com-font-header: var(--ui-font-header);
 @com-value-font-weight: @ui-select-value-font-weight;
 
-@com-text-default: var(--ui-text-default);
-@com-text-small: var(--ui-text-small);
+@com-text-m: var(--ui-text-m);
+@com-text-s: var(--ui-text-s);
 
 @com-color-text: var(--ui-color-text);
-@com-color-gray-text: var(--ui-color-gray-text);
+@com-color-muted-text: var(--ui-color-muted-text);
 @com-color-header-text: var(--ui-color-header-text);
 @com-color-primary: var(--ui-color-primary);
 @com-color-surface: @ui-select-background-color;
@@ -202,7 +202,7 @@ onMounted(() => {
 @com-color-border: var(--ui-color-border-bolder);
 @com-color-error: var(--ui-color-error);
 
-@com-border-radius-default: var(--ui-border-radius-default);
+@com-border-radius-m: var(--ui-border-radius-m);
 @com-bs-1: var(--ui-bs-1);
 
 // Ally
@@ -211,7 +211,7 @@ onMounted(() => {
 .component-ui-select {
 	position: relative;
 	text-align: left;
-	font-size: @com-text-default;
+	font-size: @com-text-m;
 	line-height: 1.1;
 
 	.wrapper {
@@ -221,7 +221,7 @@ onMounted(() => {
 			opacity: 0;
 			padding-right: 45px;
 			padding-left: 10px;
-			height: @com-input-height-default;
+			height: @com-input-height-m;
 			width: 100%;
 
 			cursor: pointer;
@@ -248,7 +248,7 @@ onMounted(() => {
 		height: 100%;
 
 		border: 1px solid @com-color-border;
-		border-radius: @com-border-radius-default;
+		border-radius: @com-border-radius-m;
 
 		cursor: pointer;
 

package/dist/runtime/components/spoiler.vue

@@ -53,18 +53,18 @@
 
 <style lang="less">
 .component-ui-spoiler {
-	@com-space-micro: var(--ui-space-micro);
+	@com-space-2xs: var(--ui-space-2xs);
 	@com-ani-ease: var(--ui-ani-ease);
 	@com-ani-time: var(--ui-ani-time);
 	@com-color-primary-text: var(--ui-color-primary-text);
 	@com-font-weight-medium: var(--ui-font-weight-medium);
 
 	> .title {
-		margin-left: calc(@com-space-micro * -1);
+		margin-left: calc(@com-space-2xs * -1);
 	}
 
 	> .title {
-		padding-inline: @com-space-micro;
+		padding-inline: @com-space-2xs;
 
 		.button-content .slot-default {
 			padding-inline: 0;

package/dist/runtime/components/styles/components.less

@@ -1,9 +1,9 @@
-@ui-accordion-title-font-size: var(--ui-text-medium);
-@ui-accordion-text-font-size: var(--ui-text-default);
-@ui-button-border-radius: var(--ui-input-height-large);
+@ui-accordion-title-font-size: var(--ui-text-l);
+@ui-accordion-text-font-size: var(--ui-text-m);
+@ui-button-border-radius: var(--ui-input-height-2xl);
 @ui-map-user-position-color: var(--color-primary);
 @ui-select-value-font-weight: var(--ui-font-weight-medium);
 @ui-select-background-color: var(--ui-color-surface);
 @ui-input-background-color: var(--ui-color-bg);
 @ui-typeahead-input-list-bg: var(--ui-color-bg);
-@ui-typeahead-input-list-border-radius: var(--ui-border-radius-small);
+@ui-typeahead-input-list-border-radius: var(--ui-border-radius-s);

package/dist/runtime/components/text-spoiler.vue

@@ -66,14 +66,14 @@ function handleClick() {
 
 <style lang="less">
 .component-ui-text-spoiler {
-	@com-space-mini: var(--ui-space-mini);
+	@com-space-xs: var(--ui-space-xs);
 	@com-ani-ease: var(--ui-ani-ease);
 	@com-ani-time: var(--ui-ani-time);
 	@com-color-primary-text: var(--ui-color-primary-text);
 	@com-font-weight-medium: var(--ui-font-weight-medium);
 
 	> .title {
-		padding-top: @com-space-mini;
+		padding-top: @com-space-xs;
 
 		color: @com-color-primary-text;
 		font-weight: @com-font-weight-medium;

package/dist/runtime/components/textarea/index.vue

@@ -106,28 +106,28 @@
 @com-ani-ease: var(--ui-ani-ease);
 
 // Border radius
-@com-border-radius-default: var(--ui-border-radius-default);
-@com-border-radius-default-big: var(--ui-border-radius-big);
+@com-border-radius-m: var(--ui-border-radius-m);
+@com-border-radius-l: var(--ui-border-radius-l);
 
 // Colors
 @com-color-primary: var(--ui-color-primary);
 @com-color-bg: var(--ui-color-bg);
 @com-color-border-bolder: var(--ui-color-border-bolder);
 @com-color-header-text: var(--ui-color-header-text);
-@com-color-gray-text: var(--ui-color-gray-text);
+@com-color-muted-text: var(--ui-color-muted-text);
 @com-color-error: var(--ui-color-error);
 
 // Padding
-@com-space-default: var(--ui-space-default);
-@com-space-mini: var(--ui-space-mini);
-@com-space-small: var(--ui-space-small);
+@com-space-m: var(--ui-space-m);
+@com-space-xs: var(--ui-space-xs);
+@com-space-s: var(--ui-space-s);
 
 // Font
 @com-font-text: var(--ui-font-text);
 
 // Text size
-@com-text-default: var(--ui-text-default);
-@com-text-small: var(--ui-text-small);
+@com-text-m: var(--ui-text-m);
+@com-text-s: var(--ui-text-s);
 
 // Ally
 @com-outline: var(--ui-outline);
@@ -140,16 +140,16 @@
 		box-sizing: border-box;
 		
 		display: block;
-		padding: @com-space-mini;
+		padding: @com-space-xs;
 		width: 100%;
 		height: 100px;
 		
 		font-family: @com-font-text;
-		font-size: @com-text-default;
+		font-size: @com-text-m;
 		color: @com-color-header-text;
 
 		border: 1px solid @com-color-border-bolder;
-		border-radius: @com-border-radius-default;
+		border-radius: @com-border-radius-m;
 		background:  @com-color-bg;
 	}
 
@@ -160,7 +160,7 @@
 
 	// Shapes
 	&.tag-shape-round-square textarea {
-		border-radius: @com-border-radius-default-big;
+		border-radius: @com-border-radius-l;
 	}
 	&.tag-shape-square textarea {
 		border-radius: 0;

package/dist/runtime/components/tooltip.vue

@@ -63,15 +63,15 @@
 @com-ani-time: var(--ui-ani-time);
 @com-ani-ease: var(--ui-ani-ease);
 
-@com-space-small: var(--ui-space-small);
-@com-space-mini: var(--ui-space-mini);
+@com-space-s: var(--ui-space-s);
+@com-space-xs: var(--ui-space-xs);
 
-@com-text-default: var(--ui-text-default);
-@com-text-small: var(--ui-text-small);
+@com-text-m: var(--ui-text-m);
+@com-text-s: var(--ui-text-s);
 
 @com-color-border-bolder: var(--ui-color-border-bolder);
 
-@com-border-radius-default: var(--ui-border-radius-default);
+@com-border-radius-m: var(--ui-border-radius-m);
 @com-bs-1: var(--ui-bs-1);
 
 .component-ui-tooltip {
@@ -83,13 +83,13 @@
 	opacity: 0;
 	visibility: hidden;
 	position: absolute;
-	padding: @com-space-mini;
+	padding: @com-space-xs;
 	min-width: 200px;
 	line-height: 1.3;
-	font-size: @com-text-default;
+	font-size: @com-text-m;
 	color: var(--ui-tooltip-text-color);
 	background: var(--ui-tooltip-bg);
-	border-radius: @com-border-radius-default;
+	border-radius: @com-border-radius-m;
 	border: 1px solid @com-color-border-bolder;
 	box-shadow: @com-bs-1;
 
@@ -103,7 +103,7 @@
 	}
 
 	&.tag-location-top {
-		transform: translate3d(-50%, calc(@com-space-small * -1), 0);
+		transform: translate3d(-50%, calc(@com-space-s * -1), 0);
 		bottom: 100%;
 		left: 50%;
 
@@ -117,7 +117,7 @@
 	}
 
 	&.tag-location-left {
-		transform: translate3d(calc(@com-space-small * -1), -50%, 0);
+		transform: translate3d(calc(@com-space-s * -1), -50%, 0);
 		top: 50%;
 		right: 100%;
 

package/dist/runtime/components/typeahead-input/index.vue

@@ -13,6 +13,7 @@
 				:required="required"
 				:disabled="disabled"
 				:placeholder="placeholder"
+				:size="size"
 				@input="handleInputTyping"
 				@focus="handleInputFocus(true)"
 				@blur="handleInputFocus(false)"
@@ -27,6 +28,7 @@
 						variant="flat" 
 						shape="square"
 						:color="color" 
+						:size="size"
 
 						@click.stop="toggleList(true)"
 						@keydown.down.prevent="selectFirstListItem"
@@ -43,7 +45,8 @@
 					<ui-button 
 						variant="flat" 
 						shape="square"
-						:color="color" 
+						:color="color"
+						:size="size" 
 
 						@click.stop="emit('update:modelValue', '')"
 
@@ -54,7 +57,7 @@
 					</ui-button>
 				</template>
 			</ui-input>
-			<ui-button shape="default" :disabled="disabled" :color="color">{{ dictionary['submit'] }}</ui-button>
+			<ui-button shape="default" :disabled="disabled" :color="color" :size="size">{{ dictionary['submit'] }}</ui-button>
 		</div>
 
 		<Teleport to="body">
@@ -134,7 +137,7 @@
 		},
 		size: {
 			type: String,
-			default: 'medium'
+			default: 'm'
 		},
 		dictionary: {
 			type: Object,
@@ -463,17 +466,17 @@
 <style lang="less">
 @import '../styles/components.less';
 
-@com-text-small: var(--ui-text-small);
+@com-text-s: var(--ui-text-s);
 
-@com-input-height-default: var(--ui-input-height-default);
+@com-input-height-m: var(--ui-input-height-m);
 
 @com-color-primary:  var(--ui-color-primary);
 @com-color-text-on-primary: var(--ui-color-text-on-primary);
 @com-color-surface: @ui-typeahead-input-list-bg;
 @com-color-border: var(--ui-color-border);
 
-@com-space-mini: var(--ui-space-mini);
-@com-space-micro: var(--ui-space-micro);
+@com-space-xs: var(--ui-space-xs);
+@com-space-2xs: var(--ui-space-2xs);
 
 @com-border-radius: @ui-typeahead-input-list-border-radius;
 
@@ -491,19 +494,19 @@
 
 .component-ui-typeahead-input-grid {
 	display: flex;
-	gap: @com-space-micro;
+	gap: @com-space-2xs;
 
 	> .component-ui-input { flex: 1; }
 	> .component-ui-button {
 		flex: 0 0 auto;
-		padding: 0 @com-space-micro;
+		padding: 0 @com-space-2xs;
 	}
 
 	.component-ui-input .component-ui-button {
 		padding: 0;
-		width: @com-input-height-default;
+		width: @com-input-height-m;
 		height: 100%;
-		font-size: @com-text-small;
+		font-size: @com-text-s;
 
 		.slot-default {
 			position: relative;
@@ -538,7 +541,7 @@
 	}
 
 	li {
-		padding: @com-space-micro @com-space-mini;
+		padding: @com-space-2xs @com-space-xs;
 		cursor: pointer;
 
 		&:hover,
@@ -550,11 +553,11 @@
 
 	.component-ui-typeahead-input-list--header {
 		text-align: center;
-		padding: @com-space-mini;
+		padding: @com-space-xs;
 	}
 
 	.component-ui-typeahead-input-list--footer {
-		padding: @com-space-mini;
+		padding: @com-space-xs;
 	}
 }
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@community-release/nx-ui",
-	"version": "0.0.74",
+	"version": "0.0.75",
 	"packageManager": "pnpm@10.14.0",
 	"description": "nx-ui - Nuxt UI library",
 	"repository": {