Merge pull request #358 from infinum/feature/uic-2-migrations

Fixing a couple of visual glitches

Author: goranalkovic-infinum

website/src/theme/styles.css

@@ -7,11 +7,28 @@
 	inset: 0;
 }
 
-.esd-hide-bg-on-hover.es:bg-violet-50:hover,
-.esd-hide-bg-on-hover:hover .es:bg-violet-50,
-.esd-hide-bg-on-hover.es:bg-gray-50:hover,
-.esd-hide-bg-on-hover:hover .es:bg-gray-50 {
-	--tw-bg-opacity: 0 !important;
+:root {
+	--color-violet-50: oklch(.969 .016 293.756);
+	--color-gray-50: oklch(.985 .002 247.839);
+	--es-spacing: 0.25rem;
+}
+
+.es\:bg-violet-50 {
+	background-color: var(--color-violet-50);
+}
+
+.es\:bg-gray-50 {
+	background-color: var(--color-gray-50);
+}
+
+.esd-hide-bg-on-hover.es\:bg-violet-50:hover,
+.esd-hide-bg-on-hover:hover .es\:bg-violet-50 {
+	background-color: color-mix(in oklab,var(--color-violet-50) 20%,transparent) !important;
+}
+
+.esd-hide-bg-on-hover.es\:bg-gray-50:hover,
+.esd-hide-bg-on-hover:hover .es\:bg-gray-50 {
+	background-color: color-mix(in oklab,var(--color-gray-50) 20%,transparent) !important;
 }
 
 .esd-white-space-pre {
@@ -35,3 +52,30 @@
 	border: 1px solid #D1D5DB !important;
 	border-radius: 0.5rem !important;
 }
+
+.markdown .esd-showcase {
+	--ifm-list-left-padding: 0;
+	--ifm-list-margin: 0;
+	--ifm-list-paragraph-margin: 0;
+
+	ul, li {
+		margin: 0;
+		padding: 0;
+	}
+}
+
+.es:\w-full {
+	width: 100%;
+}
+
+.es:\w-fit {
+	width: fit-content;
+}
+
+.esd-showcase-w {
+	width: 26rem;
+}
+
+.esd-space-v > :not(:last-child) {
+	margin-bottom: 0.625rem !important;
+}

website/ui-components/components/component-showcase.js

@@ -20,16 +20,16 @@ export const ComponentShowcase = ({
 				<div className='es:flex es:font-sans'>
 					<div
 						className={clsx(
-							'es:border es:border-dashed es:border-gray-200 es:p-4 es:rounded-lg es:space-y-2.5 es:shrink-0',
+							'es:border es:border-dashed es:border-gray-200 es:p-4 es:rounded-lg esd-space-v es:shrink-0 esd-showcase',
+							fitWidth ? 'es:w-fit' : 'esd-showcase-w',
 							className
 						)}
-						style={{ width: fitWidth ? 'fit-content' : '24rem'}}
 					>
 						{typeof children === 'function' && children(data, setData)}
 						{typeof children !== 'function' && children}
 					</div>
 
-					<div className='es:space-y-2.5 es:ml-3 es:grow'>
+					<div className='esd-space-v es:ml-3 es:grow'>
 						{preContent && preContent(data, setData, ref)}
 						{resettable && (
 							<Button