feat(design): create skeleton state UI (#2206)

libs/design/scss/state/_index.scss

@@ -0,0 +1 @@
+@forward 'skeleton/mixins';

libs/design/scss/state/skeleton/_mixins.scss

@@ -0,0 +1,41 @@
+@use '../../core';
+@use '../../theming';
+
+@mixin daff-skeleton-theme($theme) {
+	$gray: core.daff-map-deep-get($theme, 'core.gray');
+	$base: core.daff-map-deep-get($theme, 'core.base');
+
+	.daff-skeleton {
+		&::before,
+		::before {
+			background: theming.daff-illuminate($base, $gray, 2);
+		}
+
+		@keyframes loading {
+			from {
+				opacity: 0.5;
+			}
+			to {
+				opacity: 1;
+			}
+		}
+	}
+}
+
+@mixin skeleton-screen($width, $height) {
+	display: flex;
+
+	&::before {
+		animation-name: loading;
+		animation-duration: 1500ms;
+		animation-timing-function: linear;
+		animation-iteration-count: infinite;
+		animation-direction: alternate;
+		content: '';
+		height: $height;
+		width: $width;
+		position: absolute;
+		top: 0;
+		left: 0;
+	}
+}

libs/design/scss/theme.scss

@@ -38,6 +38,7 @@
 @use '../src/molecules/paginator/paginator-theme' as paginator;
 @use '../src/molecules/sidebar/sidebar/sidebar-theme' as sidebar;
 @use '../src/molecules/sidebar/sidebar-viewport/sidebar-viewport-theme' as sidebar-viewport;
+@use '../scss/state/skeleton/mixins' as skeleton;
 
 //
 // Generates the styles of a @daffodil/design theme.
@@ -52,6 +53,9 @@
 	// CSS variables
 	@include variables.daff-theme-css-variables($theme);
 
+	// Mixins
+	@include skeleton.daff-skeleton-theme($theme);
+
 	// Atoms
 	@include button.daff-button-theme($theme);
 	@include error-message.daff-error-message-theme($theme);

libs/design/scss/utilities.scss

@@ -19,3 +19,4 @@
 @forward 'layout';
 @forward 'interactions';
 @forward 'accessibility';
+@forward 'state';