feat(libs/ui): c-btn--pop button variant

sveltevietnam · Apr 10, 2024 · cfa118a · cfa118a
1 parent 4ee2a3a
commit cfa118a
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 48 deletions.
diff --git a/.changeset/good-fireants-warn.md b/.changeset/good-fireants-warn.md
@@ -0,0 +1,5 @@
+---
+'@sveltevietnam/ui': minor
+---
+
+add `c-btn-pop` variant, inpsired by viam.com
diff --git a/libs/ui/src/css/core/components/c-btn.css b/libs/ui/src/css/core/components/c-btn.css
@@ -1,7 +1,7 @@
 /* FIXME `:has` is enough, but Firefox has not yet added support for `:has`. When they do, please remove `.c-btn--with-icon` site-wide */
 @custom-selector :--with-icon :has(:is(img, svg)), .c-btn--with-icon;
-@custom-selector :--default :not(.c-btn--outlined, .c-btn--text), .c-btn--default;
-@custom-selector :--text .c-btn--text;
+@custom-selector :--default :not(.c-btn--outlined, .c-btn--pop), .c-btn--default;
+@custom-selector :--pop .c-btn--pop;
 @custom-selector :--outlined .c-btn--outlined;
 @custom-selector :--loading [data-loading]:not([data-loading='false']);
 @custom-selector :--disabled [disabled]:not([disabled='false']);
@@ -12,10 +12,13 @@
 	align-items: center;
 	justify-content: center;
 
-	min-height: 40px;
-	padding: 8px 16px;
+	min-height: theme('spacing.10');
+	padding: theme('spacing.2') theme('spacing.4');
 
-	border-radius: 4px;
+	&:disabled {
+		cursor: not-allowed;
+		background-color: theme('colors.bg.200');
+	}
 
 	&:where(:--with-icon) {
 		grid-template-columns: auto auto;
@@ -31,62 +34,50 @@
 		background-color: theme('colors.fg.DEFAULT');
 		transition: background-color 250ms theme('transitionTimingFunction.DEFAULT');
 
-		/* TODO: Need to discuss about interaction styling */
-		&:hover:not(:--disabled) {
+		&:hover:where(:not(:--disabled)) {
 			background-color: theme('colors.fg.100');
 		}
 
-		&:--disabled {
-			color: theme('colors.white');
-			background-color: theme('colors.neutral.500');
+		&:active {
+			background-color: theme('colors.fg.200');
 		}
 	}
 
-	&:where(:--outlined) {
-		border: 1px solid theme('colors.fg.DEFAULT');
-		transition: background-color 250ms theme('transitionTimingFunction.DEFAULT');
+	&:where(:--pop) {
+		background-color: theme('colors.bg.DEFAULT');
+		border: 1px solid currentcolor;
+		box-shadow: 4px 4px theme('colors.fg.DEFAULT');
+
+		transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
+		transition-duration: 180ms;
+		transition-property: box-shadow, transform;
 
-		&:hover:not(:--disabled) {
-			background-color: theme('colors.outline.DEFAULT');
+		&:hover:where(:not(:--disabled)) {
+			transform: translate(-2px, -2px);
+			box-shadow: 6px 6px theme('colors.fg.DEFAULT');
 		}
 
-		&:--disabled {
-			color: theme('colors.white');
-			background-color: theme('colors.neutral.500');
+		&:active {
+			transform: translate(0, 0);
+			box-shadow: 4px 4px theme('colors.fg.DEFAULT');
 		}
 	}
 
-	&:where(:--text) {
-		position: relative;
-		padding: 0 0 4px;
-		font-weight: 500;
-
-		&::after {
-			content: '';
-
-			position: absolute;
-			bottom: 0;
-			left: 0;
-			transform-origin: right center;
-			transform: scaleX(0);
-
-			display: block;
-
-			width: 100%;
-			height: 1px;
-
-			background-color: theme('colors.outline.200');
+	&:where(:--outlined) {
+		background-color: theme('colors.bg.DEFAULT');
+		border: 1px solid theme('colors.fg.DEFAULT');
+		transition: background-color 250ms theme('transitionTimingFunction.DEFAULT');
 
-			transition: transform 250ms theme('transitionTimingFunction.DEFAULT');
+		&:hover:where(:not(:--disabled)) {
+			background-color: theme('colors.bg.100');
 		}
 
-		&:hover::after {
-			transform-origin: left center;
-			transform: scaleX(1);
+		&:active {
+			background-color: theme('colors.bg.200');
 		}
 	}
 
-	&:where(:not(:--text):--loading) {
+	&:where(:--loading) {
 		position: relative;
 		overflow: hidden;
 

diff --git a/sites/www/src/lib/components/MailRegistrationForm/MailRegistrationForm.svelte b/sites/www/src/lib/components/MailRegistrationForm/MailRegistrationForm.svelte
@@ -134,7 +134,7 @@
 		{#if $errors.turnstile?.length}
 			<p class="error">{$errors.turnstile[0]}</p>
 		{/if}
-		<button type="submit" class="c-btn w-full" data-loading={$delayed}>
+		<button type="submit" class="c-btn c-btn--pop w-full" data-loading={$delayed}>
 			{t.cta}
 		</button>
 	</div>

diff --git a/sites/www/src/lib/modals/QRCode/QRCode.svelte b/sites/www/src/lib/modals/QRCode/QRCode.svelte
@@ -84,7 +84,7 @@
 >
 	<div aria-disabled class="c-backdrop" transition:fade={{ duration: 150 }}></div>
 	<div
-		class="relative rounded bg-bg p-6 tb:p-8"
+		class="relative bg-bg p-6 tb:p-8"
 		use:clickoutside={{ limit: { parent: container } }}
 		on:clickoutside={clickOutside}
 		transition:fly={{ duration: 200, y: 20 }}

diff --git a/sites/www/src/lib/modals/Settings/Settings.svelte b/sites/www/src/lib/modals/Settings/Settings.svelte
@@ -74,7 +74,7 @@
 >
 	<div aria-disabled class="c-backdrop" transition:fade={{ duration: 200 }} />
 	<div
-		class="burder-outline relative max-h-[96dvh] max-w-[min(1200px,100dvw)] overflow-auto rounded bg-bg"
+		class="burder-outline relative max-h-[96dvh] max-w-[min(1200px,100dvw)] overflow-auto bg-bg"
 		use:clickoutside={{ limit: { parent: container } }}
 		on:clickoutside={clickOutside}
 		transition:fly={{ duration: 200, y: 50 }}

diff --git a/sites/www/src/routes/(localized)/events/+page.svelte b/sites/www/src/routes/(localized)/events/+page.svelte
@@ -164,7 +164,9 @@
 							{tComponent.actions.sponsor.whyNeedSponsor}
 						</a>
 					</p>
-					<a href={$routes.sponsor.path} class="c-btn mt-4">{tComponent.actions.sponsor.cta}</a>
+					<a href={$routes.sponsor.path} class="c-btn c-btn--pop mt-4"
+						>{tComponent.actions.sponsor.cta}</a
+					>
 				</section>
 				<p
 					class="self-center justify-self-center text-center sp:w-8/12 pc:col-span-3"

diff --git a/sites/www/src/routes/(localized)/jobs/+page.svelte b/sites/www/src/routes/(localized)/jobs/+page.svelte
@@ -86,7 +86,7 @@
 							{t.actions.recruiter.whyNeedSponsor}
 						</a>
 					</p>
-					<a href={$routes.sponsor.path} class="c-btn mt-4">{t.actions.recruiter.cta}</a>
+					<a href={$routes.sponsor.path} class="c-btn c-btn--pop mt-4">{t.actions.recruiter.cta}</a>
 				</section>
 				<section class="c-card-action" use:intersect id="mail">
 					<h3 class="c-text-h3 font-medium">{t.actions.candidate.title}</h3>