polished#tint TypeScript Examples

The following examples show how to use polished#tint. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.

Example #1

Source File: InlineMessage.destructive.tsx From design-system with Apache License 2.0

6 votes

InlineMessageDestructive = styled(InlineMessage).attrs({
	className: 'c-inline-message--destructive',
	icon: 'talend-error',
})`
	--c-inline-message--icon-color: ${({ theme }) => theme.colors?.destructiveColor[500]};
	--c-inline-message-background: ${({ withBackground, theme }) =>
		withBackground && tint(0.95, theme.colors?.destructiveColor[500])};
	--c-inline-message-box-shadow: ${({ withBackground, theme }) =>
		withBackground && `0 1px 2px ${tint(0.75, theme.colors?.destructiveColor[500])}`};
`

Example #2

Source File: InlineMessage.information.tsx From design-system with Apache License 2.0

6 votes

InlineMessageInformation = styled(InlineMessage).attrs({
	className: 'c-inline-message--information',
	icon: 'talend-info-circle',
})`
	--c-inline-message--icon-color: ${({ theme }) => theme.colors?.informationColor[500]};
	--c-inline-message-background: ${({ withBackground, theme }) =>
		withBackground && tint(0.95, theme.colors?.informationColor[500])};
	--c-inline-message-box-shadow: ${({ withBackground, theme }) =>
		withBackground && `0 1px 2px ${tint(0.75, theme.colors?.informationColor[500])}`};
`

Example #3

Source File: InlineMessage.success.tsx From design-system with Apache License 2.0

6 votes

InlineMessageSuccess = styled(InlineMessage).attrs({
	className: 'c-inline-message--success',
	icon: 'talend-check-circle',
})`
	--c-inline-message--icon-color: ${({ theme }) => theme.colors?.successColor[500]};
	--c-inline-message-background: ${({ withBackground, theme }) =>
		withBackground && tint(0.95, theme.colors?.successColor[500])};
	--c-inline-message-box-shadow: ${({ withBackground, theme }) =>
		withBackground && `0 1px 2px ${tint(0.75, theme.colors?.successColor[500])}`};
`

Example #4

Source File: InlineMessage.warning.tsx From design-system with Apache License 2.0

6 votes

InlineMessageWarning = styled(InlineMessage).attrs({
	className: 'c-inline-message--warning',
	icon: 'talend-warning',
})`
	--c-inline-message--icon-color: ${({ theme }) => theme.colors?.warningColor[500]};
	--c-inline-message-background: ${({ withBackground, theme }) =>
		withBackground && tint(0.95, theme.colors?.warningColor[500])};
	--c-inline-message-box-shadow: ${({ withBackground, theme }) =>
		withBackground && `0 1px 2px ${tint(0.75, theme.colors?.warningColor[500])}`};
`

Example #5

Source File: Menu.Reversed.tsx From design-system with Apache License 2.0

6 votes

ReversedMenu = styled(Menu).attrs({
	className: 'c-menu--reversed',
})`
	color: ${tokens.colors.gray[700]};
	background: ${tokens.colors.gray[50]};

	${S.MenuItem} {
		&:hover {
			background: ${tint(0.9, tokens.colors.gray[900])};
		}

		&:active {
			background: ${tint(0.8, tokens.colors.gray[900])};
		}
	}
`

Example #6

Source File: colors.tokens.ts From design-system with Apache License 2.0

6 votes

function getColorSwatch(color: string): ColorSwatch {
	return {
		900: shade(0.8, color),
		800: shade(0.6, color),
		700: shade(0.4, color),
		600: shade(0.2, color),
		500: color,
		400: tint(0.2, color),
		300: tint(0.4, color),
		200: tint(0.6, color),
		100: tint(0.8, color),
	};
}

Example #7

Source File: colors.tokens.ts From design-system with Apache License 2.0

6 votes

grayscale = {
	gray: {
		900: black,
		800: tint(0.1, black),
		700: tint(0.2, black),
		600: tint(0.3, black),
		500: tint(0.4, black),
		400: tint(0.5, black),
		300: tint(0.6, black),
		200: tint(0.7, black),
		100: tint(0.8, black),
		75: tint(0.9, black),
		50: tint(0.95, black),
		0: tint(1, black),
	},
}

Example #8

Source File: Input.File.tsx From design-system with Apache License 2.0

4 votes

FileField = styled.div`
	width: 100%;

	.input {
		&,
		&::-webkit-file-upload-button {
			height: 100%;
			width: 100%;
			cursor: pointer;
		}

		&--filled {
			pointer-events: none;
		}

		&:focus + .input-file__text {
			border: 2px solid ${({ theme }) => theme.colors.inputFocusBorderColor};
			border-radius: ${tokens.radii.inputBorderRadius};
			outline: 0.3rem solid ${({ theme }) => theme.colors.focusColor[500]};
		}
	}

	.input-file {
		position: relative;
		border: 1px dashed ${({ theme }) => theme.colors.inputBorderColor};
		border-radius: ${tokens.radii.inputBorderRadius};

		&:hover {
			border-color: ${({ theme }) => theme.colors.inputHoverBorderColor};

			.text__icon {
				fill: ${({ theme }) => theme.colors.inputHoverBorderColor};
			}
		}

		&--dragging {
			background: ${({ theme }) => tint(0.95, theme.colors.activeColor[500])};
			border: 2px dashed ${({ theme }) => theme.colors.activeColor[500]};

			.text__icon {
				fill: ${({ theme }) => theme.colors.activeColor[500]};
			}
		}

		&__text,
		&__preview,
		&__input {
			min-height: ${tokens.sizes.xxl};
		}

		&__input {
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			opacity: ${tokens.opacity.transparent};
		}
	}

	.text {
		display: flex;
		align-items: center;
		justify-content: center;
		color: ${({ theme }) => theme.colors.inputPlaceholderColor};

		&__icon {
			position: static;
			margin: 0 1rem;
			width: ${tokens.sizes.l};
			color: ${({ theme }) => theme.colors.textColor};
		}
	}

	.preview {
		display: flex;
		align-items: baseline;
		padding: 0 1rem;

		&__list {
			margin: 0;
			padding: 0;
			list-style: none;

			&-item {
				color: ${({ theme }) => theme.colors.inputColor};
			}
		}

		&__button {
			position: static;
			margin-left: auto;
			display: flex;
			justify-content: center;
			align-items: center;
			min-height: ${tokens.sizes.xxl};
			border: none;

			svg {
				position: static;
				width: ${tokens.sizes.l};
				color: ${({ theme }) => theme.colors.textColor};
			}

			&:hover {
				svg path {
					fill: ${({ theme }) => shade(0.25, theme.colors.activeColor[500])};
				}
			}
		}
	}
`