polished#rgba TypeScript Examples

The following examples show how to use polished#rgba. 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: FilesystemBrowser.tsx    From flood with GNU General Public License v3.0 6 votes vote down vote up 
listItemActiveStyle = css({
  color: saturate(0.1, darken(0.15, foregroundColor)),
  background: rgba(foregroundColor, 0.1),
  button: {
    ':focus': {
      outline: 'none',
      WebkitTapHighlightColor: 'transparent',
    },
  },
})
Example #2
Source File: theme.ts    From nextclade with MIT License 6 votes vote down vote up 
shadows = {
  light: `1px 1px 1px 1px ${rgba(gray600, 0.2)}`,
  slight: `1px 1px 1px 1px ${rgba(gray700, 0.25)}`,
  medium: `2px 2px 3px 3px ${rgba(gray900, 0.25)}`,
  filter: {
    slight: `1px 1px 1px ${rgba(gray700, 0.25)}`,
    medium: `2px 2px 3px ${rgba(gray900, 0.33)}`,
  },
}
Example #3
Source File: theme.ts    From nextclade with MIT License 6 votes vote down vote up 
uploadZone = {
  'background': {
    normal: basicColors.transparent,
    accept: rgba(themeColors.success, 0.25),
    reject: rgba(themeColors.danger, 0.25),
    hover: basicColors.transparent,
  },
  'color': {
    normal: basicColors.gray700,
    accept: themeColors.success,
    reject: themeColors.danger,
    hover: basicColors.gray900,
  },
  'border': {
    normal: `4px ${rgba(basicColors.gray500, 0.75)} dashed`,
    accept: `4px ${rgba(themeColors.success, 0.75)} dashed`,
    reject: `4px ${rgba(themeColors.danger, 0.75)} dashed`,
    hover: `4px ${rgba(basicColors.gray550, 0.75)} dashed`,
  },
  'box-shadow': {
    normal: 'none',
    accept: uploadZoneBxoShadow,
    reject: uploadZoneBxoShadow,
    hover: uploadZoneBxoShadow,
  },
}
Example #4
Source File: ChartDraggableTargetContainer.tsx    From datart with Apache License 2.0 6 votes vote down vote up 
StyledContainer = styled.div<{
  isOver: boolean;
  canDrop: boolean;
}>`
  padding: ${SPACE_SM};
  color: ${p => p.theme.textColorLight};
  text-align: center;
  background-color: ${props =>
    props.canDrop
      ? rgba(props.theme.success, 0.25)
      : props.isOver
      ? rgba(props.theme.error, 0.25)
      : props.theme.emphasisBackground};
  border-radius: ${BORDER_RADIUS};

  .draggable-element:last-child {
    margin-bottom: 0;
  }
`
Example #5
Source File: themes.ts    From datart with Apache License 2.0 6 votes vote down vote up 
lightTheme = {
  bodyBackground: G10,
  componentBackground: WHITE,
  emphasisBackground: G20,
  highlightBackground: G30,
  textColor: G90,
  textColorSnd: G80,
  textColorLight: G60,
  textColorDisabled: G50,
  iconColorHover: rgba(BLACK, 0.75),
  borderColorBase: G40,
  borderColorEmphasis: G30,
  borderColorSplit: G20,
  shadow1: `0 1px 3px 0 ${rgba(lighten(0.15, BLACK), 0.1)}`,
  shadow2: `0 4px 16px 0 ${rgba(lighten(0.15, BLACK), 0.12)}`,
  shadow3: `0 12px 32px 0 ${rgba(lighten(0.15, BLACK), 0.16)}`,
  shadowSider: `0px 0 32px 0px ${rgba(G70, 0.075)}`,
  shadowBlock: `0px 0 32px 0px ${rgba(G70, 0.025)}`,
  ...common,
}
Example #6
Source File: themes.ts    From datart with Apache License 2.0 6 votes vote down vote up 
darkTheme: Theme = {
  bodyBackground: BLACK,
  componentBackground: DG10,
  emphasisBackground: DG20,
  highlightBackground: DG30,
  textColor: DG90,
  textColorSnd: DG80,
  textColorLight: DG60,
  textColorDisabled: DG50,
  iconColorHover: DG70,
  borderColorBase: DG40,
  borderColorEmphasis: DG30,
  borderColorSplit: DG20,
  shadow1: `0 1px 5px 0 ${rgba(BLACK, 0.1)}`,
  shadow2: `0 6px 18px 0 ${rgba(BLACK, 0.4)}`,
  shadow3: `0 10px 32px 0 ${rgba(BLACK, 0.54)}`,
  shadowSider: 'none',
  shadowBlock: 'none',
  ...common,
}
Example #7
Source File: index.tsx    From metaflow-ui with Apache License 2.0 5 votes vote down vote up 
borderColor = {
  light: rgba(0, 0, 0, 0.125),
  normal: '#d0d0d0',
  mid: rgba(0, 0, 0, 0.2),
  dark: rgba(0, 0, 0, 0.35),
}
Example #8
Source File: GeneMapTable.tsx    From nextclade with MIT License 5 votes vote down vote up 
GeneMapTableContent = styled(Table)`
  overflow-y: scroll;
  box-shadow: 1px -2px 2px 2px ${rgba('#212529', 0.25)};
`
Example #9
Source File: ResultsTableStyle.tsx    From nextclade with MIT License 5 votes vote down vote up 
TableRow = styled.div<{ backgroundColor?: string }>`
  display: flex;
  align-items: stretch;
  background-color: ${(props) => props.backgroundColor};
  box-shadow: 1px 2px 2px 2px ${rgba('#212529', 0.25)};
`
Example #10
Source File: theme.ts    From nextclade with MIT License 5 votes vote down vote up 
uploadZoneBxoShadow = `1px 1px 3px 3px ${rgba(gray700, 0.25)}`
Example #11
Source File: theme.ts    From nextclade with MIT License 5 votes vote down vote up 
filePicker = {
  minHeight: '200px',
  borderRadius: '5px',
  border: {
    normal: `4px ${rgba(basicColors.gray500, 0.33)} solid`,
  },
}