@wordpress/components 36.1.0 → 37.0.1-next.v.202607070741.0

package/src/surface/styles.ts

@@ -1,139 +0,0 @@
-/**
- * External dependencies
- */
-import { css } from '@emotion/react';
-
-/**
- * Internal dependencies
- */
-import { CONFIG, COLORS } from '../utils';
-import type { SurfaceVariant, SurfaceProps } from './types';
-
-export const Surface = css`
-	background-color: ${ CONFIG.surfaceColor };
-	color: ${ COLORS.gray[ 900 ] };
-	position: relative;
-`;
-
-export const background = css`
-	background-color: ${ CONFIG.surfaceBackgroundColor };
-`;
-
-export function getBorders( {
-	borderBottom,
-	borderLeft,
-	borderRight,
-	borderTop,
-}: Pick<
-	SurfaceProps,
-	'borderBottom' | 'borderLeft' | 'borderRight' | 'borderTop'
-> ) {
-	const borderStyle = `1px solid ${ CONFIG.surfaceBorderColor }`;
-
-	return css( {
-		borderBottom: borderBottom ? borderStyle : undefined,
-		borderLeft: borderLeft ? borderStyle : undefined,
-		borderRight: borderRight ? borderStyle : undefined,
-		borderTop: borderTop ? borderStyle : undefined,
-	} );
-}
-
-export const primary = css``;
-
-export const secondary = css`
-	background: ${ CONFIG.surfaceBackgroundTintColor };
-`;
-
-export const tertiary = css`
-	background: ${ CONFIG.surfaceBackgroundTertiaryColor };
-`;
-
-const customBackgroundSize = ( surfaceBackgroundSize: string ) =>
-	[ surfaceBackgroundSize, surfaceBackgroundSize ].join( ' ' );
-
-const dottedBackground1 = ( surfaceBackgroundSizeDotted: string ) =>
-	[
-		'90deg',
-		[ CONFIG.surfaceBackgroundColor, surfaceBackgroundSizeDotted ].join(
-			' '
-		),
-		'transparent 1%',
-	].join( ',' );
-
-const dottedBackground2 = ( surfaceBackgroundSizeDotted: string ) =>
-	[
-		[ CONFIG.surfaceBackgroundColor, surfaceBackgroundSizeDotted ].join(
-			' '
-		),
-		'transparent 1%',
-	].join( ',' );
-
-const dottedBackgroundCombined = ( surfaceBackgroundSizeDotted: string ) =>
-	[
-		`linear-gradient( ${ dottedBackground1(
-			surfaceBackgroundSizeDotted
-		) } ) center`,
-		`linear-gradient( ${ dottedBackground2(
-			surfaceBackgroundSizeDotted
-		) } ) center`,
-		CONFIG.surfaceBorderBoldColor,
-	].join( ',' );
-
-export const getDotted = (
-	surfaceBackgroundSize: string,
-	surfaceBackgroundSizeDotted: string
-) => css`
-	background: ${ dottedBackgroundCombined( surfaceBackgroundSizeDotted ) };
-	background-size: ${ customBackgroundSize( surfaceBackgroundSize ) };
-`;
-
-const gridBackground1 = [
-	`${ CONFIG.surfaceBorderSubtleColor } 1px`,
-	'transparent 1px',
-].join( ',' );
-
-const gridBackground2 = [
-	'90deg',
-	`${ CONFIG.surfaceBorderSubtleColor } 1px`,
-	'transparent 1px',
-].join( ',' );
-
-const gridBackgroundCombined = [
-	`linear-gradient( ${ gridBackground1 } )`,
-	`linear-gradient( ${ gridBackground2 } )`,
-].join( ',' );
-
-export const getGrid = ( surfaceBackgroundSize: string ) => {
-	return css`
-		background: ${ CONFIG.surfaceBackgroundColor };
-		background-image: ${ gridBackgroundCombined };
-		background-size: ${ customBackgroundSize( surfaceBackgroundSize ) };
-	`;
-};
-
-export const getVariant = (
-	variant: SurfaceVariant,
-	surfaceBackgroundSize: string,
-	surfaceBackgroundSizeDotted: string
-) => {
-	switch ( variant ) {
-		case 'dotted': {
-			return getDotted(
-				surfaceBackgroundSize,
-				surfaceBackgroundSizeDotted
-			);
-		}
-		case 'grid': {
-			return getGrid( surfaceBackgroundSize );
-		}
-		case 'primary': {
-			return primary;
-		}
-		case 'secondary': {
-			return secondary;
-		}
-		case 'tertiary': {
-			return tertiary;
-		}
-	}
-};

package/src/surface/test/__snapshots__/index.tsx.snap

@@ -1,104 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`props should render borderBottom 1`] = `
-Snapshot Diff:
-- First value
-+ Second value
-
-@@ -1,8 +1,8 @@
-  <div>
-    <div
--     class="components-surface css-1921uc5-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
-+     class="components-surface css-o6qg0g-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
-      data-wp-c16t="true"
-      data-wp-component="Surface"
-    >
-      Surface
-    </div>
-`;
-
-exports[`props should render borderLeft 1`] = `
-Snapshot Diff:
-- First value
-+ Second value
-
-@@ -1,8 +1,8 @@
-  <div>
-    <div
--     class="components-surface css-i25gtk-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
-+     class="components-surface css-o6qg0g-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
-      data-wp-c16t="true"
-      data-wp-component="Surface"
-    >
-      Surface
-    </div>
-`;
-
-exports[`props should render borderRight 1`] = `
-Snapshot Diff:
-- First value
-+ Second value
-
-@@ -1,8 +1,8 @@
-  <div>
-    <div
--     class="components-surface css-1pd05xm-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
-+     class="components-surface css-o6qg0g-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
-      data-wp-c16t="true"
-      data-wp-component="Surface"
-    >
-      Surface
-    </div>
-`;
-
-exports[`props should render borderTop 1`] = `
-Snapshot Diff:
-- First value
-+ Second value
-
-@@ -1,8 +1,8 @@
-  <div>
-    <div
--     class="components-surface css-y3blhg-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
-+     class="components-surface css-o6qg0g-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
-      data-wp-c16t="true"
-      data-wp-component="Surface"
-    >
-      Surface
-    </div>
-`;
-
-exports[`props should render correctly 1`] = `
-.emotion-0 {
-  background-color: #fff;
-  color: #1e1e1e;
-  position: relative;
-}
-
-<div>
-  <div
-    class="components-surface emotion-0 emotion-1"
-    data-wp-c16t="true"
-    data-wp-component="Surface"
-  >
-    Surface
-  </div>
-</div>
-`;
-
-exports[`props should render variants 1`] = `
-Snapshot Diff:
-- First value
-+ Second value
-
-@@ -1,8 +1,8 @@
-  <div>
-    <div
--     class="components-surface css-15um7qp-PolymorphicDiv-Surface-getBorders-secondary e19lxcc00"
-+     class="components-surface css-o6qg0g-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
-      data-wp-c16t="true"
-      data-wp-component="Surface"
-    >
-      Surface
-    </div>
-`;

package/src/theme/styles.ts

@@ -1,35 +0,0 @@
-/**
- * External dependencies
- */
-import styled from '@emotion/styled';
-import { css } from '@emotion/react';
-
-/**
- * Internal dependencies
- */
-import type { ThemeOutputValues } from './types';
-
-export const colorVariables = ( { colors }: ThemeOutputValues ) => {
-	const shades = Object.entries( colors.gray || {} )
-		.map( ( [ k, v ] ) => `--wp-components-color-gray-${ k }: ${ v };` )
-		.join( '' );
-
-	return [
-		css`
-			--wp-components-color-accent: ${ colors.accent };
-			--wp-components-color-accent-darker-10: ${ colors.accentDarker10 };
-			--wp-components-color-accent-darker-20: ${ colors.accentDarker20 };
-			--wp-components-color-accent-inverted: ${ colors.accentInverted };
-
-			--wp-components-color-background: ${ colors.background };
-			--wp-components-color-foreground: ${ colors.foreground };
-			--wp-components-color-foreground-inverted: ${ colors.foregroundInverted };
-
-			${ shades }
-		`,
-	];
-};
-
-export const Wrapper = styled.div`
-	color: var( --wp-components-color-foreground, currentColor );
-`;

package/src/truncate/styles.ts

@@ -1,11 +0,0 @@
-/**
- * External dependencies
- */
-import { css } from '@emotion/react';
-
-export const Truncate = css`
-	display: block;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-`;