[UIK-5667][skeleton, spin-container, spin] redesign

playground/entries/Spin.tsx

@@ -20,9 +20,9 @@ type AdditionalJSXProps = {
 };
 export type SpinJSXProps = JSXProps<NSSpin.Props> & AdditionalJSXProps;
 
-const margins = {
-  xs: 1,
-  s: 1,
+const gaps = {
+  xs: 1.5,
+  s: 1.5,
   m: 2,
   l: 2,
   xl: 4,
@@ -32,10 +32,10 @@ const margins = {
 const textSize: { [key in SpinJSXProps['size']]: NSText.Props['size'] } = {
   xs: 200,
   s: 200,
-  m: 300,
+  m: 200,
   l: 300,
-  xl: 200,
-  xxl: 200,
+  xl: 300,
+  xxl: 300,
 };
 
 const textPlacement: { [key in SpinJSXProps['textPlacement']]: NSFlex.Props['direction'] } = {
@@ -46,7 +46,7 @@ const textPlacement: { [key in SpinJSXProps['textPlacement']]: NSFlex.Props['dir
 function getJSX(props: SpinJSXProps) {
   return props.text.length
     ? (
-        <Flex alignItems='center' gap={margins[props.size]} direction={textPlacement[props.textPlacement]}>
+        <Flex alignItems='center' gap={gaps[props.size]} direction={textPlacement[props.textPlacement]}>
           <Spin size={props.size} theme={props.theme} />
           <Text size={textSize[props.size]} color='text-secondary'>
             {props.text}

semcore/skeleton/src/Skeleton.tsx

@@ -10,11 +10,6 @@ import type { NSSkeleton } from './Skeleton.type';
 import style from './style/skeleton.shadow.css';
 import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
 
-const MAP_COLOR_THEME = {
-  dark: 'rgba(255, 255, 255, 0.3)',
-  invert: 'rgba(224, 225, 233, 0.8)',
-};
-
 class SkeletonRoot extends Component<
   Intergalactic.InternalTypings.InferComponentProps<NSSkeleton.RenderComponent>,
   typeof SkeletonRoot.enhance,
@@ -62,7 +57,7 @@ class SkeletonSVG extends Component<
   static style = style;
 
   static defaultProps = {
-    theme: 'invert',
+    theme: 'default',
     duration: 2000,
   } as const;
 
@@ -98,16 +93,6 @@ class SkeletonSVG extends Component<
     }
   }
 
-  setContext() {
-    const { theme } = this.asProps;
-
-    if (!theme) return {};
-
-    return {
-      gradientUrl: MAP_COLOR_THEME[theme],
-    };
-  }
-
   render() {
     const { Children, styles, uid, theme, duration } = this.asProps;
     const SSkeletonSVG = Root;

semcore/skeleton/src/Skeleton.type.ts

@@ -15,9 +15,9 @@ declare namespace NSSkeleton {
     duration?: string | number;
     /**
      * Skeleton theme
-     * @default invert
+     * @default default
      */
-    theme?: 'dark' | 'invert';
+    theme?: 'default' | 'invert';
     /** Specifies the locale for i18n support */
     locale?: string;
     /**
@@ -26,12 +26,9 @@ declare namespace NSSkeleton {
      */
     observeParentSize?: boolean;
   };
-  type Ctx = {
-    gradientUrl: string;
-  };
 
   type DefaultProps = {
-    theme?: 'invert';
+    theme: 'default';
     duration: 2000;
   };
 
@@ -48,18 +45,16 @@ declare namespace NSSkeleton {
     type Component = Intergalactic.Component<'rect', Props>;
   }
 
-  type RenderComponent = Intergalactic.Component<'div', Props, Ctx>;
+  type RenderComponent = Intergalactic.Component<'div', Props>;
 
-  type Component = Intergalactic.Component<'svg', Props, Ctx> & {
+  type Component = Intergalactic.Component<'svg', Props> & {
     Text: Text.Component;
   };
 }
 
 /** @deprecated It will be removed in v19. */
 export type SkeletonProps = NSSkeleton.Props;
 /** @deprecated It will be removed in v19. */
-export type SkeletonCtx = NSSkeleton.Ctx;
-/** @deprecated It will be removed in v19. */
 export type SkeletonTextProps = NSSkeleton.Text.Props;
 
 export type { NSSkeleton };

semcore/skeleton/src/style/chart.shadow.css

@@ -1,17 +1,18 @@
 SChartSkeleton {
   height: 200px;
   width: 100%;
-  background-image: var(--bgPattern);
+  mask-image: var(--bgPattern);
+  background-color: var(--intergalactic-skeleton-bg, oklch(0.94 0.002 180));
 }
 
 SChartSkeleton[bgPosition] {
-  background-position: var(--bgPosition);
+  mask-position: var(--bgPosition);
 }
 
 SChartSkeleton[bgSize] {
-  background-size: var(--bgSize);
+  mask-size: var(--bgSize);
 }
 
 SChartSkeleton[bgRepeat] {
-  background-repeat: var(--bgRepeat);
-}
+  mask-repeat: var(--bgRepeat);
+}

semcore/skeleton/src/style/skeleton.shadow.css

@@ -20,11 +20,11 @@ SSkeleton {
   }
 }
 
-SSkeletonSVG[theme='invert'] {
+SSkeletonSVG[theme='default'] {
   fill: var(--intergalactic-skeleton-bg, oklch(0.94 0.002 180));
 }
 
-SSkeletonSVG[theme='dark'] {
+SSkeletonSVG[theme='invert'] {
   fill: var(--intergalactic-skeleton-bg-invert, oklch(0.5 0.004 147.4));
 }
 
@@ -36,4 +36,4 @@ SText {
   SSkeleton {
     animation-name: none;
   }
-}
+}