mirror of https://github.com/mifi/lossless-cut
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
50 lines
1.4 KiB
JavaScript
50 lines
1.4 KiB
JavaScript
import { defaultTheme } from 'evergreen-ui';
|
|
|
|
|
|
function colorKeyForIntent(intent) {
|
|
if (intent === 'danger') return 'var(--red12)';
|
|
if (intent === 'success') return 'var(--green12)';
|
|
return 'var(--gray12)';
|
|
}
|
|
|
|
function borderColorForIntent(intent, isHover) {
|
|
if (intent === 'danger') return isHover ? 'var(--red8)' : 'var(--red7)';
|
|
if (intent === 'success') return isHover ? 'var(--green8)' : 'var(--green7)';
|
|
return 'var(--gray7)';
|
|
}
|
|
|
|
export default {
|
|
...defaultTheme,
|
|
components: {
|
|
...defaultTheme.components,
|
|
Button: {
|
|
...defaultTheme.components.Button,
|
|
appearances: {
|
|
...defaultTheme.components.Button.appearances,
|
|
default: {
|
|
...defaultTheme.components.Button.appearances.default,
|
|
backgroundColor: 'var(--gray3)',
|
|
|
|
// https://github.com/segmentio/evergreen/blob/master/src/themes/default/components/button.js
|
|
border: (theme, props) => `1px solid ${borderColorForIntent(props.intent)}`,
|
|
color: (theme, props) => props.color || colorKeyForIntent(props.intent),
|
|
|
|
_hover: {
|
|
backgroundColor: 'var(--gray4)',
|
|
},
|
|
_active: {
|
|
backgroundColor: 'var(--gray5)',
|
|
},
|
|
_focus: {
|
|
backgroundColor: 'var(--gray5)',
|
|
boxShadow: '0 0 0 1px var(--gray8)',
|
|
},
|
|
disabled: {
|
|
opacity: 0.5,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
};
|