utils#COLORS TypeScript Examples

The following examples show how to use utils#COLORS. 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: Header.styles.tsx    From frontend-v1 with GNU Affero General Public License v3.0 6 votes vote down vote up 
MobileItem = styled.li`
  padding: 12px 20px;
  background-color: var(--color-white);
  transition: background-color 100ms linear;

  &:not(:last-of-type) {
    border-bottom: 1px solid hsla(${COLORS.gray[500]} / 0.1);
  }
  &[aria-selected="true"] {
    color: var(--color-gray-200);
  }
  &:hover:not([aria-selected="true"]) {
    background-color: var(--color-gray-100);
  }

  &:first-of-type {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
  &:last-of-type {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
  }
`
Example #2
Source File: Pool.tsx    From frontend-v1 with GNU Affero General Public License v3.0 6 votes vote down vote up 
LoadingPositionWrapper = styled.div`
  background-color: hsla(${COLORS.gray[500]} / 0.2);
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  padding: 16px;
  border-radius: 5px;
  min-height: 64px;
  margin-top: 20px;
`
Example #3
Source File: About.tsx    From frontend-v1 with GNU Affero General Public License v3.0 6 votes vote down vote up 
Footer = styled.footer`
  display: flex;
  align-items: center;
  margin-top: auto;
  padding: 35px 0;
  color: hsla(${COLORS.white} / 0.5);
  @media ${QUERIES.tabletAndUp} {
    border-top: 1px solid currentColor;
  }
`
Example #4
Source File: Tabs.styled.tsx    From frontend-v1 with GNU Affero General Public License v3.0 6 votes vote down vote up 
TabListItem = styled.li`
  flex-grow: 1;
  list-style: none;
  background-color: hsla(${COLORS.gray[500]} / 0.25);
  text-align: center;
  padding: 16px 0;
  width: 50%;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  transition: background-color 100ms linear, opacity 100ms linear;
  cursor: pointer;
  &:last-of-type {
    margin-left: 4px;
  }

  &.tab-active {
    background-color: var(--color-gray);
    cursor: default;
  }

  &:not(.tab-active):hover {
    background-color: hsla(${COLORS.gray[500]} / 0.3);
  }
`
Example #5
Source File: SendAction.styles.ts    From frontend-v1 with GNU Affero General Public License v3.0 6 votes vote down vote up 
InfoContainer = styled.div`
  padding: 10px 15px;
  background-color: hsla(${COLORS.gray[500]} / 0.75);
  border-radius: 5px;
  font-size: ${14 / 16}rem;
  line-height: ${17 / 16}rem;
  font-weight: 400;
  color: var(--color-white-transparent);
`
Example #6
Source File: PoolSelection.styles.ts    From frontend-v1 with GNU Affero General Public License v3.0 6 votes vote down vote up 
Item = motion(styled.li`
  padding: 15px 10px 10px;
  display: flex;
  gap: 10px;
  cursor: pointer;
  background-color: var(--color-white);
  color: var(--color-gray);
  transition: background-color 100ms linear;
  &:first-of-type {
    border-radius: calc(var(--radius) / 4) calc(var(--radius) / 4) 0 0;
  }

  &:last-of-type {
    border-radius: 0 0 calc(var(--radius) / 4) calc(var(--radius) / 4);
  }

  &:hover {
    background-color: var(--color-gray-100);
  }

  & > div:last-of-type {
    margin-left: auto;
    color: hsla(${COLORS.gray[500]} / 0.5);
  }
`)
Example #7
Source File: Layout.tsx    From frontend-v1 with GNU Affero General Public License v3.0 6 votes vote down vote up 
Link = styled.a`
  text-decoration: none;
  transition: color 100ms linear;
  color: hsla(${COLORS.white} / 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  font-size: ${14 / 16}rem;
  opacity: 0.75;

  &:not(:last-of-type) {
    margin-right: 45px;
  }

  &:hover {
    color: var(--color-white);
    opacity: 1;
  }
`
Example #8
Source File: BaseButton.tsx    From frontend-v1 with GNU Affero General Public License v3.0 6 votes vote down vote up 
PrimaryButton = styled(BaseButton)`
  position: relative;
  background-color: var(--color-primary);
  color: var(--color-gray);
  &:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    border-radius: var(--radius);
    box-shadow: 0 0 16px hsla(${COLORS.primary[500]} / 0.55);
    transition: opacity 0.2s;
  }
  &:hover:not(:disabled) {
    &:after {
      opacity: 1;
    }
  }
`
Example #9
Source File: Header.styles.tsx    From frontend-v1 with GNU Affero General Public License v3.0 6 votes vote down vote up 
Item = styled.li`
  flex: 1 0 165px;
  background-color: inherit;
  color: var(--color-gray);
  text-transform: capitalize;
  cursor: pointer;
  &[aria-selected="true"] {
    color: var(--color-white);
    background-color: var(--color-gray);
    font-weight: bold;
  }
  &:hover:not([aria-selected="true"]) {
    color: hsla(${COLORS.gray[500]} / 0.5);
  }
`
Example #10
Source File: GlobalStyles.tsx    From frontend-v1 with GNU Affero General Public License v3.0 6 votes vote down vote up 
variables = css`
  :root {
    /* COLORS */
    --color-gray: hsl(${COLORS.gray[500]});
    --color-gray-300: hsla(${COLORS.gray[300]});
    --color-gray-200: hsla(${COLORS.gray[200]});
    --color-gray-100: hsla(${COLORS.gray[100]});
    --color-white: hsl(${COLORS.white});
    --color-black: hsl(${COLORS.black});
    --color-primary: hsl(${COLORS.primary[500]});
    --color-primary-dark: hsl(${COLORS.primary[700]});
    --color-secondary: hsl(${COLORS.secondary[500]});
    --color-error: hsl(${COLORS.error[500]});
    --color-error-light: hsl(${COLORS.error[300]});
    --color-uma-red: hsl(${COLORS.umaRed});
    --color-purple: hsl(${COLORS.purple});
    --color-primary-transparent: hsla(${COLORS.primary[500]} / 0.4);
    --color-black-transparent: hsla(${COLORS.black} / 0.75);
    --color-white-transparent: hsla(${COLORS.white} / 0.75);
    --color-gray-transparent: rgba(45, 46, 51, 0.1);
    --color-banner: hsla(${COLORS.banner});
    /*
    Silence the warning about missing Reach Dialog styles
  */
    --reach-dialog: 1;

    /* 
    Keep a consistent width between the middle section and the headers
  */
    --central-content: 500px;
    --header-height: 60px;
    @media ${QUERIES.tabletAndUp} {
      --header-height: 100px;
    }
  }
`
Example #11
Source File: Dialog.styles.tsx    From frontend-v1 with GNU Affero General Public License v3.0 6 votes vote down vote up 
Overlay = styled(DialogOverlay)`
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: hsla(${COLORS.gray[500]} / 0.9);
  display: flex;
  justify-content: center;
  align-items: flex-start;
`
Example #12
Source File: CoinSelection.styles.ts    From frontend-v1 with GNU Affero General Public License v3.0 6 votes vote down vote up 
Menu = styled.ul<MenuProps>`
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  padding-top: 10px;
  transform: translateY(50%);
  box-shadow: ${({ isOpen }) =>
    isOpen ? `0px 160px 8px 8px hsla(${COLORS.gray[500]} / 0.2)` : "none"};
  list-style: none;
  display: flex;
  flex-direction: column;
  z-index: 1;
  outline: none;
  pointer-events: ${({ isOpen }) => (isOpen ? "auto" : "none")};
  @media ${QUERIES.tabletAndUp} {
    transform: translateY(100%);
  }
`
Example #13
Source File: ChainSelection.styles.tsx    From frontend-v1 with GNU Affero General Public License v3.0 6 votes vote down vote up 
Menu = styled.ul<MenuProps>`
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  padding-top: 10px;
  transform: translateY(100%);
  box-shadow: 0px 160px 8px 8px hsla(${COLORS.gray[500]} / 0.2);
  list-style: none;
  display: ${(props) => (props.isOpen ? "flex" : "none")};
  pointer-events: ${(props) => (props.isOpen ? "all" : "none")};
  outline: none;
  flex-direction: column;
  z-index: 10000;
  width: 95%;
  margin: 0 auto;
`
Example #14
Source File: BaseButton.tsx    From frontend-v1 with GNU Affero General Public License v3.0 6 votes vote down vote up 
SecondaryButton = styled(BaseButton)`
  position: relative;
  background-color: var(--color-gray);
  color: var(--color-white);
  &:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    border-radius: var(--radius);
    box-shadow: 0 0 16px hsla(${COLORS.gray[500]} / 0.55);
    transition: opacity 0.2s;
  }
  &:hover:not(:disabled) {
    &:after {
      opacity: 1;
    }
  }
`
Example #15
Source File: MobileMenu.tsx    From frontend-v1 with GNU Affero General Public License v3.0 5 votes vote down vote up 
Overlay = styled(DialogOverlay)`
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  bottom: 0;
  background-color: hsla(${COLORS.gray[500]} / 0.9);
`
Example #16
Source File: Layout.tsx    From frontend-v1 with GNU Affero General Public License v3.0 5 votes vote down vote up 
Main = styled.main`
  min-height: 100%;
  grid-column: 2;
  box-shadow: 0 0 120px hsla(${COLORS.primary[500]} / 0.25);
  clip-path: inset(0px -160px 0px -160px);
`
Example #17
Source File: CoinSelection.styles.ts    From frontend-v1 with GNU Affero General Public License v3.0 5 votes vote down vote up 
Item = motion(styled.li`
  padding: 15px 10px 10px;
  display: flex;
  gap: 10px;
  cursor: pointer;
  background-color: var(--color-white);
  color: var(--color-gray);
  transition: background-color 100ms linear;
  &:first-of-type {
    border-radius: calc(var(--radius) / 4) calc(var(--radius) / 4) 0 0;
  }

  &:last-of-type {
    border-radius: 0 0 calc(var(--radius) / 4) calc(var(--radius) / 4);
  }

  &:hover {
    background-color: var(--color-gray-100);
  }

  & > div:last-of-type {
    margin-left: auto;
    color: hsla(${COLORS.gray[500]} / 0.5);
  }
`)