github/React95
1
1
Fork 0
mirror of https://github.com/react95-io/React95.git synced 2026-04-26 03:00:18 -04:00
Code Issues Packages Projects Releases Wiki Activity

using 'createHatchedBackground' fn instead of theme prop

Browse Source
This commit is contained in:
Artur Bien
2020-02-04 21:14:07 +01:00
parent c5c932dc02
commit a8acbd5398
5 changed files with 20 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Button/Button.js
View File

@@ -9,7 +9,8 @@ import {
createWellBorderStyles,
createBoxStyles,
createFlatBoxStyles,
createDisabledTextStyles
createDisabledTextStyles,
createHatchedBackground
} from '../common';
import { blockSizes, fontSizes, padding } from '../common/system';
@@ -64,7 +65,10 @@ const StyledButton = styled.button`
border: none;
${isDisabled && createDisabledTextStyles()}
${active &&
`background-image: ${theme.hatchedBackground};`}
createHatchedBackground({
mainColor: theme.material,
secondaryColor: theme.borderLightest
})}
&:before {
box-sizing: border-box;
content: '';

4
src/components/Checkbox/Checkbox.js
View File

@@ -2,7 +2,7 @@ import React from 'react';
import propTypes from 'prop-types';
import styled, { css } from 'styled-components';
import { createDisabledTextStyles, createCheckeredBackground } from '../common';
import { createDisabledTextStyles, createHatchedBackground } from '../common';
import { padding, fontSizes } from '../common/system';
import useControlledOrUncontrolled from '../common/hooks/useControlledOrUncontrolled';
@@ -103,7 +103,7 @@ const IndeterminateIcon = styled.span.attrs(() => ({
height: 100%;
${({ theme, isDisabled }) =>
createCheckeredBackground({
createHatchedBackground({
mainColor: isDisabled ? theme.checkmarkDisabled : theme.checkmark
})}
background-position: -1px -1px, 1px 1px;

10
src/components/Slider/Slider.js
View File

@@ -6,7 +6,8 @@ import {
createBoxStyles,
createBorderStyles,
createFlatBoxStyles,
createDisabledTextStyles
createDisabledTextStyles,
createHatchedBackground
} from '../common';
import useControlledOrUncontrolled from '../common/hooks/useControlledOrUncontrolled';
import Cutout from '../Cutout/Cutout';
@@ -165,9 +166,10 @@ const Thumb = styled.span`
`}
${({ isDisabled, theme }) =>
isDisabled &&
css`
background-image: ${theme.hatchedBackground};
`}
createHatchedBackground({
mainColor: theme.material,
secondaryColor: theme.borderLightest
})}
`;
const tickHeight = 6;

11
src/components/common/index.js
View File

@@ -16,24 +16,25 @@ export const createBoxStyles = () => css`
color: ${({ theme }) => theme.text};
`;
// TODO for flat box styles add checkered background when disabled (not solid color)
export const createCheckeredBackground = ({
export const createHatchedBackground = ({
mainColor = 'black',
secondaryColor = 'transparent'
}) => css`
background-image: linear-gradient(
45deg,
${mainColor} 25%,
${secondaryColor} 25%,
${secondaryColor} 75%,
transparent 25%,
transparent 75%,
${mainColor} 75%
),
linear-gradient(
45deg,
${mainColor} 25%,
${secondaryColor} 25%,
${secondaryColor} 75%,
transparent 25%,
transparent 75%,
${mainColor} 75%
);
background-color: ${secondaryColor};
background-size: 4px 4px;
background-position: 0 0, 2px 2px;
`;

15
src/components/common/themes.js
View File

@@ -1,9 +1,6 @@
const themes = {};
themes.default = {
hatchedBackground:
'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIElEQVQYV2P8////fwYGBgZGRkZGMI0hABIFAbgEugAAQFQP/QfjEPcAAAAASUVORK5CYII=)',
canvas: '#ffffff',
material: '#ced0cf',
materialDark: '#9a9e9c',
@@ -43,9 +40,6 @@ themes.default = {
};
themes.water = {
hatchedBackground:
'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIElEQVQYV2P8////fwYGBgZGRkZGMI0hABIFAbgEugAAQFQP/QfjEPcAAAAASUVORK5CYII=)',
canvas: '#ffffff',
material: '#ced0cf',
materialDark: '#9a9e9c',
@@ -84,9 +78,6 @@ themes.water = {
};
themes.coldGray = {
hatchedBackground:
'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIElEQVQYV2P8////fwYGBgZGRkZGMI0hABIFAbgEugAAQFQP/QfjEPcAAAAASUVORK5CYII=)',
// background: "#CCF5AC",
// background: "#416165",
background: '#4C6663',
@@ -129,9 +120,6 @@ themes.coldGray = {
};
themes.lilacRoseDark = {
hatchedBackground:
'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIElEQVQYV2P8////fwYGBgZGRkZGMI0hABIFAbgEugAAQFQP/QfjEPcAAAAASUVORK5CYII=)',
background: '#3B3B58',
canvas: '#dab1c7',
@@ -172,9 +160,6 @@ themes.lilacRoseDark = {
};
themes.violetDark = {
hatchedBackground:
'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIElEQVQYV2P8////fwYGBgZGRkZGMI0hABIFAbgEugAAQFQP/QfjEPcAAAAASUVORK5CYII=)',
canvas: '#c47bcc',
material: '#652a6d',
materialDark: '#210e23',