Consolide input-transition props as a theme variable

baku89 · Sep 29, 2023 · ec45ead · ec45ead
1 parent 430bd9f
commit ec45ead
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 13 deletions.
diff --git a/src/components/App.vue b/src/components/App.vue
@@ -413,8 +413,8 @@ window.addEventListener('drop', async e => {
 		border-radius 4px
 		padding 0 .6rem
 		-webkit-app-region: no-drag;
-		app-region: no-drag;
-		transition all ease .1s
+		app-region: no-drag
+		hover-transition(border-color)
 
 		&:hover
 			border-color var(--tq-color-primary)

diff --git a/src/tweeq/FloatingPane/FloatingPane.vue b/src/tweeq/FloatingPane/FloatingPane.vue
@@ -142,11 +142,11 @@ onMounted(() => {
 	display grid
 	grid-template-columns 1fr
 	grid-template-rows 1fr
-	transition border-radius .2s ease, border-color .2s ease
+	hover-transition(border-radius, border-color)
 
 	&.minimized
 		width 3rem
-		transition width .2s ease
+		hover-transition(width)
 
 		& > .minimized-title
 			opacity 1
@@ -174,20 +174,20 @@ onMounted(() => {
 
 .resize
 	position absolute
-	transition all .2s ease
+	hover-transition()
 
 	&:before
 		content ''
 		position absolute
 		width 100%
 		height 100%
 		background blue
-		transition all .2s ease
+		hover-transition()
 		opacity 0
 
 	&:hover:before
 			opacity 1
-			transition opacity .2s ease .4s
+			transition opacity var(--tq-hover-transition-duration) ease .1s
 
 .left
 	left 0
@@ -221,11 +221,12 @@ onMounted(() => {
 	transform translate(-50%, -50%)
 	pointer-events none
 	opacity 0
-	transition opacity .2s ease
+	hover-transition(opacity)
+
 .content
 	position relative
 	height 100%
 	overflow	hidden
-	transition opacity .2s ease
+	hover-transition(opacity)
 </style>
 @/tweaq/useAppStorage
diff --git a/src/tweeq/RoundButton/RoundButton.vue b/src/tweeq/RoundButton/RoundButton.vue
@@ -21,6 +21,7 @@ defineProps<Props>()
 </template>
 
 <style lang="stylus" scoped>
+@import '../common.styl'
 
 .RoundButton
 	height 32px
@@ -30,11 +31,11 @@ defineProps<Props>()
 	justify-content center
 	align-items center
 	gap .4em
-	transition all ease .2s
 	width auto
 	padding 0 12px 0 6px
 	background var(--tq-color-primary-container)
 	color var(--md-sys-color-on-primary-container)
+	hover-transition(background, color)
 
 	&:hover
 		background var(--tq-color-primary)

diff --git a/src/tweeq/Tabs/Tabs.vue b/src/tweeq/Tabs/Tabs.vue
@@ -142,6 +142,8 @@ onMounted(() => {
 </template>
 
 <style lang="stylus" scoped>
+@import '../common.styl'
+
 .Tabs
 	display grid
 	gap .5rem
@@ -160,19 +162,26 @@ onMounted(() => {
 
 .tablist-item
 	line-height 2rem
-	padding 0 .4rem
+	padding 2px .4rem 0
 	font-weight bold
 	border-bottom 3px solid transparent
-	transition border-bottom-color .2s ease
+	hover-transition(border-bottom-color)
 
 	&.active
 		border-bottom-color var(--tq-color-text)
 
+		&:hover
+			border-bottom-color var(--tq-color-primary)
+
 .tablist-link
 	text-decoration none
 	color var(--tq-color-text)
 	opacity .4
-	transition opacity .2s ease
+	hover-transition(opacity)
+
+	&:hover
+		color var(--tq-color-primary)
+		opacity 1
 
 	&.active
 		opacity 1

diff --git a/src/tweeq/common.styl b/src/tweeq/common.styl
@@ -6,3 +6,14 @@ pane()
 	border 1px solid var(--tq-color-pane-border)
 	background var(--tq-color-pane)
 	backdrop-filter blur(4px)
+
+hover-transition(prop = all)
+	values = ()
+
+	for p in arguments
+		push(
+			values,
+			p + ' var(--tq-hover-transition-duration) ease'
+		)
+
+	transition unquote(join(',', values))
diff --git a/src/tweeq/useTheme.ts b/src/tweeq/useTheme.ts
@@ -44,6 +44,7 @@ export interface Theme {
 	// UI Metrics
 	paneBorderRadius: string
 	inputHeight: string
+	hoverTransitionDuration: string
 }
 
 const ThemeKey: InjectionKey<Readonly<Ref<Theme>>> = Symbol('tqTheme')
@@ -98,6 +99,7 @@ export function provideTheme(
 
 				paneBorderRadius: '20px',
 				inputHeight: '16px',
+				hoverTransitionDuration: '0.15s',
 			}
 
 			// Promote all as CSS variabbles