@bagelink/vue 1.4.81 → 1.4.87

package/src/components/Btn.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { IconType, ThemeType } from '@bagelink/vue'
+import type { IconType, ExtendedThemeType } from '@bagelink/vue'
 import type { SetupContext } from 'vue'
 import { Icon, Loading, useModal } from '@bagelink/vue'
 import { useSlots, ref, onMounted, onUnmounted } from 'vue'
@@ -12,12 +12,13 @@ const props = withDefaults(
 		iconEnd?: IconType
 		iconSize?: number | string
 		iconMobileSize?: number | string
-		color?: ThemeType
-		theme?: ThemeType
+		color?: ExtendedThemeType
+		theme?: ExtendedThemeType
 		flat?: boolean
 		border?: boolean
 		outline?: boolean
 		thin?: boolean
+		size?: 'xs' | 's' | 'm' | 'l' | 'xl'
 		type?: 'button' | 'submit' | 'reset'
 		loading?: boolean
 		role?: string
@@ -110,41 +111,29 @@ const slots: SetupContext['slots'] = useSlots()
 </script>
 
 <template>
-	<component
-		:is="isComponent" v-ripple="ripple" v-bind="bind" :disabled="disabled" class="bgl_btn" :class="{
-			'bgl_btn-icon': icon && !slots.default && !value,
-			thin,
-			round,
-			'bgl_btn_flat': flat,
-			'bgl_btn-border': border || outline,
-			[`bgl_btn-${color}`]: color,
-			[`bgl_btn-${theme}`]: theme,
-		}" :tabindex="disabled ? -1 : 0" @click.stop="handleClick" @keydown.enter="handleClick" @keydown.space="handleClick"
-	>
-		<Loading v-if="loading" class="h-100p" size="15" />
-		<div v-else class="bgl_btn-flex">
-			<Icon
-				v-if="icon" :icon="icon" class="transition-400" :size="iconSizeComputed"
-				:mobile-size="iconMobileSize"
-			/>
-			<slot />
-			<template v-if="!slots.default && value">
-				{{ value }}
-			</template>
-			<Icon
-				v-if="iconEnd" :icon="iconEnd" class="transition-400" :size="iconSizeComputed"
-				:mobile-size="iconMobileSize"
-			/>
-		</div>
-	</component>
+<component :is="isComponent" v-ripple="ripple" v-bind="bind" :disabled="disabled" class="bgl_btn" :class="{
+	'bgl_btn-icon': icon && !slots.default && !value,
+	thin,
+	round,
+	'bgl_btn_flat': flat,
+	'bgl_btn-border': border || outline,
+	[`bgl_btn-${color}`]: color,
+	[`bgl_btn-${theme}`]: theme,
+}" :tabindex="disabled ? -1 : 0" @click.stop="handleClick" @keydown.enter="handleClick" @keydown.space="handleClick">
+	<Loading v-if="loading" class="h-100p" size="15" />
+	<div v-else class="bgl_btn-flex">
+		<Icon v-if="icon" :icon="icon" class="transition-400" :size="iconSizeComputed" :mobile-size="iconMobileSize" />
+		<slot />
+		<template v-if="!slots.default && value">
+			{{ value }}
+		</template>
+		<Icon v-if="iconEnd" :icon="iconEnd" class="transition-400" :size="iconSizeComputed" :mobile-size="iconMobileSize" />
+	</div>
+</component>
 </template>
 
 <style scoped>
-.bgl_btn {
-	--btn-bg: var(--bgl-primary);
-	--btn-color: var(--bgl-light-text);
-	--btn-flat-color: var(--bgl-text-color);
-}
+@import '../styles/btnColors.css';
 
 .bgl_btn-green {
 	--btn-bg: var(--bgl-green);
@@ -258,12 +247,12 @@ a {
 
 .bgl_btn_flat:hover:not(:disabled),
 .bgl_btn-icon.bgl_btn_flat:hover:not(:disabled) {
-	background: var(--bgl-gray-20);
+	background: var(--bgl-gray-tint);
 }
 
 .bgl_btn.bgl_btn_flat:active:not(:disabled),
 .bgl_btn-icon.bgl_btn_flat:active:not(:disabled) {
-	background: var(--bgl-gray-40);
+	background: var(--bgl-gray-tint-dark);
 }
 
 .bgl_btn.thin {

package/src/components/Card.vue

@@ -87,7 +87,7 @@ const is = $computed(() => {
 }
 
 .bgl_card.gray {
-	background: var(--bgl-gray-20);
+	background: var(--bgl-gray-tint);
 }
 
 .bgl_card.border {

package/src/components/Pill.vue

@@ -55,17 +55,212 @@ function getThemeColors(theme: Partial<typeof computedDefaultColors>): typeof co
 	}
 }
 
-const themes: Partial<Record<ThemeType, typeof computedDefaultColors>> = {
-	'red': getThemeColors({ backgroundColor: 'var(--bgl-red)' }),
-	'white': getThemeColors({ backgroundColor: 'var(--bgl-white)', color: 'var(--bgl-black)' }),
-	'black': getThemeColors({ backgroundColor: 'var(--bgl-black)', color: 'var(--bgl-white)' }),
+const themes: Partial<Record<string, typeof computedDefaultColors>> = {
+	// Base Colors
+	'blue': getThemeColors({ backgroundColor: 'var(--bgl-blue)', color: 'var(--bgl-white)' }),
 	'green': getThemeColors({ backgroundColor: 'var(--bgl-green)', color: 'var(--bgl-white)' }),
-	'primary': getThemeColors({ backgroundColor: 'var(--bgl-primary)', color: 'var(--bgl-white)' }),
+	'red': getThemeColors({ backgroundColor: 'var(--bgl-red)', color: 'var(--bgl-white)' }),
 	'yellow': getThemeColors({ backgroundColor: 'var(--bgl-yellow)', color: 'var(--bgl-black)' }),
-	'gray': getThemeColors({ backgroundColor: 'var(--bgl-gray-light)', color: 'var(--bgl-black)' }),
+	'purple': getThemeColors({ backgroundColor: 'var(--bgl-purple)', color: 'var(--bgl-white)' }),
+	'brown': getThemeColors({ backgroundColor: 'var(--bgl-brown)', color: 'var(--bgl-white)' }),
+	'orange': getThemeColors({ backgroundColor: 'var(--bgl-orange)', color: 'var(--bgl-white)' }),
+	'turquoise': getThemeColors({ backgroundColor: 'var(--bgl-turquoise)', color: 'var(--bgl-white)' }),
+	'gray': getThemeColors({ backgroundColor: 'var(--bgl-gray)', color: 'var(--bgl-white)' }),
+	'black': getThemeColors({ backgroundColor: 'var(--bgl-black)', color: 'var(--bgl-white)' }),
+	'pink': getThemeColors({ backgroundColor: 'var(--bgl-pink)', color: 'var(--bgl-white)' }),
+
+	// System Colors
+	'primary': getThemeColors({ backgroundColor: 'var(--bgl-primary)', color: 'var(--bgl-white)' }),
+	'white': getThemeColors({ backgroundColor: 'var(--bgl-white)', color: 'var(--bgl-black)' }),
+
+	// 10% tints (lightest)
+	'blue-10': getThemeColors({ backgroundColor: 'var(--bgl-blue-10)', color: 'var(--bgl-blue)' }),
+	'green-10': getThemeColors({ backgroundColor: 'var(--bgl-green-10)', color: 'var(--bgl-green)' }),
+	'red-10': getThemeColors({ backgroundColor: 'var(--bgl-red-10)', color: 'var(--bgl-red)' }),
+	'yellow-10': getThemeColors({ backgroundColor: 'var(--bgl-yellow-10)', color: 'var(--bgl-yellow)' }),
+	'purple-10': getThemeColors({ backgroundColor: 'var(--bgl-purple-10)', color: 'var(--bgl-purple)' }),
+	'brown-10': getThemeColors({ backgroundColor: 'var(--bgl-brown-10)', color: 'var(--bgl-brown)' }),
+	'orange-10': getThemeColors({ backgroundColor: 'var(--bgl-orange-10)', color: 'var(--bgl-orange)' }),
+	'turquoise-10': getThemeColors({ backgroundColor: 'var(--bgl-turquoise-10)', color: 'var(--bgl-turquoise)' }),
+	'gray-10': getThemeColors({ backgroundColor: 'var(--bgl-gray-10)', color: 'var(--bgl-black)' }),
+	'black-10': getThemeColors({ backgroundColor: 'var(--bgl-black-10)', color: 'var(--bgl-black)' }),
+	'pink-10': getThemeColors({ backgroundColor: 'var(--bgl-pink-10)', color: 'var(--bgl-pink)' }),
+
+	// 20% tints
+	'blue-20': getThemeColors({ backgroundColor: 'var(--bgl-blue-20)', color: 'var(--bgl-blue)' }),
+	'green-20': getThemeColors({ backgroundColor: 'var(--bgl-green-20)', color: 'var(--bgl-green)' }),
+	'red-20': getThemeColors({ backgroundColor: 'var(--bgl-red-20)', color: 'var(--bgl-red)' }),
+	'yellow-20': getThemeColors({ backgroundColor: 'var(--bgl-yellow-20)', color: 'var(--bgl-yellow)' }),
+	'purple-20': getThemeColors({ backgroundColor: 'var(--bgl-purple-20)', color: 'var(--bgl-purple)' }),
+	'brown-20': getThemeColors({ backgroundColor: 'var(--bgl-brown-20)', color: 'var(--bgl-brown)' }),
+	'orange-20': getThemeColors({ backgroundColor: 'var(--bgl-orange-20)', color: 'var(--bgl-orange)' }),
+	'turquoise-20': getThemeColors({ backgroundColor: 'var(--bgl-turquoise-20)', color: 'var(--bgl-turquoise)' }),
+	'gray-20': getThemeColors({ backgroundColor: 'var(--bgl-gray-20)', color: 'var(--bgl-black)' }),
+	'black-20': getThemeColors({ backgroundColor: 'var(--bgl-black-20)', color: 'var(--bgl-black)' }),
+	'pink-20': getThemeColors({ backgroundColor: 'var(--bgl-pink-20)', color: 'var(--bgl-pink)' }),
+	// 30% tints
+	'blue-30': getThemeColors({ backgroundColor: 'var(--bgl-blue-30)', color: 'var(--bgl-blue)' }),
+	'green-30': getThemeColors({ backgroundColor: 'var(--bgl-green-30)', color: 'var(--bgl-black)' }),
+	'red-30': getThemeColors({ backgroundColor: 'var(--bgl-red-30)', color: 'var(--bgl-red)' }),
+	'yellow-30': getThemeColors({ backgroundColor: 'var(--bgl-yellow-30)', color: 'var(--bgl-black)' }),
+	'purple-30': getThemeColors({ backgroundColor: 'var(--bgl-purple-30)', color: 'var(--bgl-purple)' }),
+	'brown-30': getThemeColors({ backgroundColor: 'var(--bgl-brown-30)', color: 'var(--bgl-black)' }),
+	'orange-30': getThemeColors({ backgroundColor: 'var(--bgl-orange-30)', color: 'var(--bgl-orange)' }),
+	'turquoise-30': getThemeColors({ backgroundColor: 'var(--bgl-turquoise-30)', color: 'var(--bgl-black)' }),
+	'gray-30': getThemeColors({ backgroundColor: 'var(--bgl-gray-30)', color: 'var(--bgl-black)' }),
+	'black-30': getThemeColors({ backgroundColor: 'var(--bgl-black-30)', color: 'var(--bgl-black)' }),
+	'pink-30': getThemeColors({ backgroundColor: 'var(--bgl-pink-30)', color: 'var(--bgl-pink)' }),
+	// 40% tints
+	'blue-40': getThemeColors({ backgroundColor: 'var(--bgl-blue-40)', color: 'var(--bgl-blue)' }),
+	'green-40': getThemeColors({ backgroundColor: 'var(--bgl-green-40)', color: 'var(--bgl-black)' }),
+	'red-40': getThemeColors({ backgroundColor: 'var(--bgl-red-40)', color: 'var(--bgl-black)' }),
+	'yellow-40': getThemeColors({ backgroundColor: 'var(--bgl-yellow-40)', color: 'var(--bgl-black)' }),
+	'purple-40': getThemeColors({ backgroundColor: 'var(--bgl-purple-40)', color: 'var(--bgl-black)' }),
+	'brown-40': getThemeColors({ backgroundColor: 'var(--bgl-brown-40)', color: 'var(--bgl-black)' }),
+	'orange-40': getThemeColors({ backgroundColor: 'var(--bgl-orange-40)', color: 'var(--bgl-black)' }),
+	'turquoise-40': getThemeColors({ backgroundColor: 'var(--bgl-turquoise-40)', color: 'var(--bgl-black)' }),
+	'gray-40': getThemeColors({ backgroundColor: 'var(--bgl-gray-40)', color: 'var(--bgl-black)' }),
+	'black-40': getThemeColors({ backgroundColor: 'var(--bgl-black-40)', color: 'var(--bgl-black)' }),
+	'pink-40': getThemeColors({ backgroundColor: 'var(--bgl-pink-40)', color: 'var(--bgl-black)' }),
+	// 50% tints
+	'blue-50': getThemeColors({ backgroundColor: 'var(--bgl-blue-50)', color: 'var(--bgl-black)' }),
+	'green-50': getThemeColors({ backgroundColor: 'var(--bgl-green-50)', color: 'var(--bgl-black)' }),
+	'red-50': getThemeColors({ backgroundColor: 'var(--bgl-red-50)', color: 'var(--bgl-black)' }),
+	'yellow-50': getThemeColors({ backgroundColor: 'var(--bgl-yellow-50)', color: 'var(--bgl-black)' }),
+	'purple-50': getThemeColors({ backgroundColor: 'var(--bgl-purple-50)', color: 'var(--bgl-black)' }),
+	'brown-50': getThemeColors({ backgroundColor: 'var(--bgl-brown-50)', color: 'var(--bgl-black)' }),
+	'orange-50': getThemeColors({ backgroundColor: 'var(--bgl-orange-50)', color: 'var(--bgl-black)' }),
+	'turquoise-50': getThemeColors({ backgroundColor: 'var(--bgl-turquoise-50)', color: 'var(--bgl-black)' }),
+	'gray-50': getThemeColors({ backgroundColor: 'var(--bgl-gray-50)', color: 'var(--bgl-black)' }),
+	'black-50': getThemeColors({ backgroundColor: 'var(--bgl-black-50)', color: 'var(--bgl-black)' }),
+	'pink-50': getThemeColors({ backgroundColor: 'var(--bgl-pink-50)', color: 'var(--bgl-black)' }),
+	// 60% tints
+	'blue-60': getThemeColors({ backgroundColor: 'var(--bgl-blue-60)', color: 'var(--bgl-white)' }),
+	'green-60': getThemeColors({ backgroundColor: 'var(--bgl-green-60)', color: 'var(--bgl-white)' }),
+	'red-60': getThemeColors({ backgroundColor: 'var(--bgl-red-60)', color: 'var(--bgl-white)' }),
+	'yellow-60': getThemeColors({ backgroundColor: 'var(--bgl-yellow-60)', color: 'var(--bgl-black)' }),
+	'purple-60': getThemeColors({ backgroundColor: 'var(--bgl-purple-60)', color: 'var(--bgl-white)' }),
+	'brown-60': getThemeColors({ backgroundColor: 'var(--bgl-brown-60)', color: 'var(--bgl-white)' }),
+	'orange-60': getThemeColors({ backgroundColor: 'var(--bgl-orange-60)', color: 'var(--bgl-white)' }),
+	'turquoise-60': getThemeColors({ backgroundColor: 'var(--bgl-turquoise-60)', color: 'var(--bgl-black)' }),
+	'gray-60': getThemeColors({ backgroundColor: 'var(--bgl-gray-60)', color: 'var(--bgl-black)' }),
+	'black-60': getThemeColors({ backgroundColor: 'var(--bgl-black-60)', color: 'var(--bgl-white)' }),
+	'pink-60': getThemeColors({ backgroundColor: 'var(--bgl-pink-60)', color: 'var(--bgl-white)' }),
+
+	// 70% tints
+	'blue-70': getThemeColors({ backgroundColor: 'var(--bgl-blue-70)', color: 'var(--bgl-white)' }),
+	'green-70': getThemeColors({ backgroundColor: 'var(--bgl-green-70)', color: 'var(--bgl-white)' }),
+	'red-70': getThemeColors({ backgroundColor: 'var(--bgl-red-70)', color: 'var(--bgl-white)' }),
+	'yellow-70': getThemeColors({ backgroundColor: 'var(--bgl-yellow-70)', color: 'var(--bgl-white)' }),
+	'purple-70': getThemeColors({ backgroundColor: 'var(--bgl-purple-70)', color: 'var(--bgl-white)' }),
+	'brown-70': getThemeColors({ backgroundColor: 'var(--bgl-brown-70)', color: 'var(--bgl-white)' }),
+	'orange-70': getThemeColors({ backgroundColor: 'var(--bgl-orange-70)', color: 'var(--bgl-white)' }),
+	'turquoise-70': getThemeColors({ backgroundColor: 'var(--bgl-turquoise-70)', color: 'var(--bgl-black)' }),
+	'gray-70': getThemeColors({ backgroundColor: 'var(--bgl-gray-70)', color: 'var(--bgl-white)' }),
+	'black-70': getThemeColors({ backgroundColor: 'var(--bgl-black-70)', color: 'var(--bgl-white)' }),
+	'pink-70': getThemeColors({ backgroundColor: 'var(--bgl-pink-70)', color: 'var(--bgl-white)' }),
+
+	// 80% tints
+	'blue-80': getThemeColors({ backgroundColor: 'var(--bgl-blue-80)', color: 'var(--bgl-white)' }),
+	'green-80': getThemeColors({ backgroundColor: 'var(--bgl-green-80)', color: 'var(--bgl-white)' }),
+	'red-80': getThemeColors({ backgroundColor: 'var(--bgl-red-80)', color: 'var(--bgl-white)' }),
+	'yellow-80': getThemeColors({ backgroundColor: 'var(--bgl-yellow-80)', color: 'var(--bgl-white)' }),
+	'purple-80': getThemeColors({ backgroundColor: 'var(--bgl-purple-80)', color: 'var(--bgl-white)' }),
+	'brown-80': getThemeColors({ backgroundColor: 'var(--bgl-brown-80)', color: 'var(--bgl-white)' }),
+	'orange-80': getThemeColors({ backgroundColor: 'var(--bgl-orange-80)', color: 'var(--bgl-white)' }),
+	'turquoise-80': getThemeColors({ backgroundColor: 'var(--bgl-turquoise-80)', color: 'var(--bgl-black)' }),
+	'gray-80': getThemeColors({ backgroundColor: 'var(--bgl-gray-80)', color: 'var(--bgl-black)' }),
+	'black-80': getThemeColors({ backgroundColor: 'var(--bgl-black-80)', color: 'var(--bgl-white)' }),
+	'pink-80': getThemeColors({ backgroundColor: 'var(--bgl-pink-80)', color: 'var(--bgl-white)' }),
+
+	// 90% tints
+	'blue-90': getThemeColors({ backgroundColor: 'var(--bgl-blue-90)', color: 'var(--bgl-white)' }),
+	'green-90': getThemeColors({ backgroundColor: 'var(--bgl-green-90)', color: 'var(--bgl-white)' }),
+	'red-90': getThemeColors({ backgroundColor: 'var(--bgl-red-90)', color: 'var(--bgl-white)' }),
+	'yellow-90': getThemeColors({ backgroundColor: 'var(--bgl-yellow-90)', color: 'var(--bgl-white)' }),
+	'purple-90': getThemeColors({ backgroundColor: 'var(--bgl-purple-90)', color: 'var(--bgl-white)' }),
+	'brown-90': getThemeColors({ backgroundColor: 'var(--bgl-brown-90)', color: 'var(--bgl-white)' }),
+	'orange-90': getThemeColors({ backgroundColor: 'var(--bgl-orange-90)', color: 'var(--bgl-white)' }),
+	'turquoise-90': getThemeColors({ backgroundColor: 'var(--bgl-turquoise-90)', color: 'var(--bgl-white)' }),
+	'gray-90': getThemeColors({ backgroundColor: 'var(--bgl-gray-90)', color: 'var(--bgl-white)' }),
+	'black-90': getThemeColors({ backgroundColor: 'var(--bgl-black-90)', color: 'var(--bgl-white)' }),
+	'pink-90': getThemeColors({ backgroundColor: 'var(--bgl-pink-90)', color: 'var(--bgl-white)' }),
+
+	// 100% tints
+	'blue-100': getThemeColors({ backgroundColor: 'var(--bgl-blue-100)', color: 'var(--bgl-white)' }),
+	'green-100': getThemeColors({ backgroundColor: 'var(--bgl-green-100)', color: 'var(--bgl-white)' }),
+	'red-100': getThemeColors({ backgroundColor: 'var(--bgl-red-100)', color: 'var(--bgl-white)' }),
+	'yellow-100': getThemeColors({ backgroundColor: 'var(--bgl-yellow-100)', color: 'var(--bgl-white)' }),
+	'purple-100': getThemeColors({ backgroundColor: 'var(--bgl-purple-100)', color: 'var(--bgl-white)' }),
+	'brown-100': getThemeColors({ backgroundColor: 'var(--bgl-brown-100)', color: 'var(--bgl-white)' }),
+	'orange-100': getThemeColors({ backgroundColor: 'var(--bgl-orange-100)', color: 'var(--bgl-white)' }),
+	'turquoise-100': getThemeColors({ backgroundColor: 'var(--bgl-turquoise-100)', color: 'var(--bgl-white)' }),
+	'gray-100': getThemeColors({ backgroundColor: 'var(--bgl-gray-100)', color: 'var(--bgl-white)' }),
+	'black-100': getThemeColors({ backgroundColor: 'var(--bgl-black-100)', color: 'var(--bgl-white)' }),
+	'pink-100': getThemeColors({ backgroundColor: 'var(--bgl-pink-100)', color: 'var(--bgl-white)' }),
+
+	// 110% tints
+	'blue-110': getThemeColors({ backgroundColor: 'var(--bgl-blue-110)', color: 'var(--bgl-white)' }),
+	'green-110': getThemeColors({ backgroundColor: 'var(--bgl-green-110)', color: 'var(--bgl-white)' }),
+	'red-110': getThemeColors({ backgroundColor: 'var(--bgl-red-110)', color: 'var(--bgl-white)' }),
+	'yellow-110': getThemeColors({ backgroundColor: 'var(--bgl-yellow-110)', color: 'var(--bgl-white)' }),
+	'purple-110': getThemeColors({ backgroundColor: 'var(--bgl-purple-110)', color: 'var(--bgl-white)' }),
+	'brown-110': getThemeColors({ backgroundColor: 'var(--bgl-brown-110)', color: 'var(--bgl-white)' }),
+	'orange-110': getThemeColors({ backgroundColor: 'var(--bgl-orange-110)', color: 'var(--bgl-white)' }),
+	'turquoise-110': getThemeColors({ backgroundColor: 'var(--bgl-turquoise-110)', color: 'var(--bgl-white)' }),
+	'gray-110': getThemeColors({ backgroundColor: 'var(--bgl-gray-110)', color: 'var(--bgl-white)' }),
+	'black-110': getThemeColors({ backgroundColor: 'var(--bgl-black-110)', color: 'var(--bgl-white)' }),
+	'pink-110': getThemeColors({ backgroundColor: 'var(--bgl-pink-110)', color: 'var(--bgl-white)' }),
+
+	// 120% tints
+	'blue-120': getThemeColors({ backgroundColor: 'var(--bgl-blue-120)', color: 'var(--bgl-white)' }),
+	'green-120': getThemeColors({ backgroundColor: 'var(--bgl-green-120)', color: 'var(--bgl-white)' }),
+	'red-120': getThemeColors({ backgroundColor: 'var(--bgl-red-120)', color: 'var(--bgl-white)' }),
+	'yellow-120': getThemeColors({ backgroundColor: 'var(--bgl-yellow-120)', color: 'var(--bgl-white)' }),
+	'purple-120': getThemeColors({ backgroundColor: 'var(--bgl-purple-120)', color: 'var(--bgl-white)' }),
+	'brown-120': getThemeColors({ backgroundColor: 'var(--bgl-brown-120)', color: 'var(--bgl-white)' }),
+	'orange-120': getThemeColors({ backgroundColor: 'var(--bgl-orange-120)', color: 'var(--bgl-white)' }),
+	'turquoise-120': getThemeColors({ backgroundColor: 'var(--bgl-turquoise-120)', color: 'var(--bgl-white)' }),
+	'gray-120': getThemeColors({ backgroundColor: 'var(--bgl-gray-120)', color: 'var(--bgl-white)' }),
+	'black-120': getThemeColors({ backgroundColor: 'var(--bgl-black-120)', color: 'var(--bgl-white)' }),
+	'pink-120': getThemeColors({ backgroundColor: 'var(--bgl-pink-120)', color: 'var(--bgl-white)' }),
+
+	// 130% tints
+	'blue-130': getThemeColors({ backgroundColor: 'var(--bgl-blue-130)', color: 'var(--bgl-white)' }),
+	'green-130': getThemeColors({ backgroundColor: 'var(--bgl-green-130)', color: 'var(--bgl-white)' }),
+	'red-130': getThemeColors({ backgroundColor: 'var(--bgl-red-130)', color: 'var(--bgl-white)' }),
+	'yellow-130': getThemeColors({ backgroundColor: 'var(--bgl-yellow-130)', color: 'var(--bgl-white)' }),
+	'purple-130': getThemeColors({ backgroundColor: 'var(--bgl-purple-130)', color: 'var(--bgl-white)' }),
+	'brown-130': getThemeColors({ backgroundColor: 'var(--bgl-brown-130)', color: 'var(--bgl-white)' }),
+	'orange-130': getThemeColors({ backgroundColor: 'var(--bgl-orange-130)', color: 'var(--bgl-white)' }),
+	'turquoise-130': getThemeColors({ backgroundColor: 'var(--bgl-turquoise-130)', color: 'var(--bgl-white)' }),
+	'gray-130': getThemeColors({ backgroundColor: 'var(--bgl-gray-130)', color: 'var(--bgl-white)' }),
+	'black-130': getThemeColors({ backgroundColor: 'var(--bgl-black-130)', color: 'var(--bgl-white)' }),
+	'pink-130': getThemeColors({ backgroundColor: 'var(--bgl-pink-130)', color: 'var(--bgl-white)' }),
+
+
+	// Legacy light variants (mapped to 20% tints)
+	'blue-light': getThemeColors({ backgroundColor: 'var(--bgl-blue-light)', color: 'var(--bgl-blue)' }),
+	'green-light': getThemeColors({ backgroundColor: 'var(--bgl-green-light)', color: 'var(--bgl-green)' }),
+	'red-light': getThemeColors({ backgroundColor: 'var(--bgl-red-light)', color: 'var(--bgl-red)' }),
+	'yellow-light': getThemeColors({ backgroundColor: 'var(--bgl-yellow-light)', color: 'var(--bgl-black)' }),
+	'purple-light': getThemeColors({ backgroundColor: 'var(--bgl-purple-light)', color: 'var(--bgl-purple)' }),
+	'brown-light': getThemeColors({ backgroundColor: 'var(--bgl-brown-light)', color: 'var(--bgl-brown)' }),
+	'orange-light': getThemeColors({ backgroundColor: 'var(--bgl-orange-light)', color: 'var(--bgl-orange)' }),
+	'turquoise-light': getThemeColors({ backgroundColor: 'var(--bgl-turquoise-light)', color: 'var(--bgl-black)' }),
+	'pink-light': getThemeColors({ backgroundColor: 'var(--bgl-pink-light)', color: 'var(--bgl-pink)' }),
+	'gray-light': getThemeColors({ backgroundColor: 'var(--bgl-gray-light)', color: 'var(--bgl-black)' }),
+	'primary-light': getThemeColors({ backgroundColor: 'var(--bgl-primary-light)', color: 'var(--bgl-primary)' }),
+
+	// Legacy tint variants
+	'blue-tint': getThemeColors({ backgroundColor: 'var(--bgl-blue-tint)', color: 'var(--bgl-blue)' }),
+	'red-tint': getThemeColors({ backgroundColor: 'var(--bgl-red-tint)', color: 'var(--bgl-red)' }),
+	'primary-tint': getThemeColors({ backgroundColor: 'var(--bgl-primary-tint)', color: 'var(--bgl-white)' }),
+	'black-tint': getThemeColors({ backgroundColor: 'var(--bgl-black-tint)', color: 'var(--bgl-white)' }),
+
+	// Special variants
+	'blue-dark': getThemeColors({ backgroundColor: 'var(--bgl-blue-dark)', color: 'var(--bgl-white)' }),
 	'light': getThemeColors({ backgroundColor: 'var(--bgl-primary-light)', color: 'var(--bgl-primary)' }),
-	'gray-light': getThemeColors({ backgroundColor: 'var(--bgl-gray-light)', color: 'var(--bgl-gray)' }),
-	'blue': getThemeColors({}),
 }
 
 const cumputedTextColor = $computed(

package/src/components/dataTable/DataTable.vue

@@ -302,7 +302,7 @@ th {
 
 .col.check .bgl_icon-font {
 	border-radius: 100%;
-	background: var(--bgl-blue-20);
+	background: var(--bgl-blue-tint);
 	color: var(--bgl-primary);
 	width: 20px;
 	height: 20px;

package/src/components/form/inputs/DatePicker.vue

@@ -310,7 +310,7 @@ function selectDate(date: Date | null) {
 
 <template>
 	<div class="ltr flex gap-075 m_flex-wrap calendar-container justify-content-center h-100p">
-		<div class="calendar-section m_border-none pe-05 m_p-0">
+		<div class="calendar-section m_border-none px-05 m_p-0">
 			<div class="flex space-between pb-1">
 				<template v-if="currentView === 'days'">
 					<Btn flat thin icon="chevron_left" @click="previousMonth" />

package/src/components/form/inputs/SelectInput.vue

@@ -331,7 +331,7 @@ onMounted(() => {
 }
 
 .selectinput-option:hover, .highlight {
-	background: var(--bgl-gray-20);
+	background: var(--bgl-gray-tint);
 }
 .isEmpty p {
 	opacity: 0.3;