orcs-design-system/es/components/Header/Header.styles.js

TeamForm's Design System, aka: ORCS

import styled from "styled-components";
import { space, layout } from "styled-system";
import css from "@styled-system/css";
import { themeGet } from "@styled-system/theme-get";
import Box from "../Box";
import Flex from "../Flex";
export const Bar = /*#__PURE__*/styled("header").attrs(props => ({
  "data-testid": props.dataTestId
})).withConfig({
  displayName: "Bar",
  componentId: "sc-xs8ba0-0"
})(props => ({
  height: themeGet("appScale.newNavBarSize")(props)
}), css({
  width: "100%",
  zIndex: 12,
  position: "sticky",
  top: "0",
  display: "flex",
  alignItems: "center",
  bg: "white",
  gap: "r",
  px: "r"
}), space);
export const AppName = /*#__PURE__*/styled("div").withConfig({
  displayName: "AppName",
  componentId: "sc-xs8ba0-1"
})(props => css({
  background: "transparent",
  width: "fit-content",
  display: "flex",
  alignItems: "center",
  gap: ["0", "0", "0", "r"],
  height: themeGet("appScale.sideNavSize")(props),
  fontSize: themeGet("fontSizes.1")(props),
  fontWeight: themeGet("fontWeights.2")(props),
  color: themeGet("colors.greyDarkest")(props),
  img: {
    display: "block",
    height: themeGet("appScale.navBarLogoSize")(props),
    maxHeight: themeGet("appScale.navBarLogoSize")(props),
    width: "auto"
  },
  svg: {
    display: "block",
    height: themeGet("appScale.navBarLogoSize")(props),
    maxHeight: themeGet("appScale.navBarLogoSize")(props),
    width: "auto"
  },
  a: {
    display: "block",
    fontSize: themeGet("fontSizes.1")(props),
    fontWeight: themeGet("fontWeights.2")(props),
    color: themeGet("colors.greyDarkest")(props)
  }
}), space);
export const Separator = /*#__PURE__*/styled(Box).withConfig({
  displayName: "Separator",
  componentId: "sc-xs8ba0-2"
})(props => css({
  width: "1px",
  height: "75%",
  bg: themeGet("colors.greyLight")(props)
}), space);
export const SearchContainer = /*#__PURE__*/styled("div").withConfig({
  displayName: "SearchContainer",
  componentId: "sc-xs8ba0-3"
})(props => css({
  maxWidth: "550px",
  marginLeft: "auto",
  height: themeGet("appScale.sideNavSize")(props),
  flex: "1 1 auto",
  borderRadius: themeGet("radii.2")(props)
}), space, layout);
export const UserMenuToggle = /*#__PURE__*/styled("button").withConfig({
  displayName: "UserMenuToggle",
  componentId: "sc-xs8ba0-4"
})(props => css({
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  padding: "0",
  border: "none",
  cursor: "pointer",
  appearance: "none",
  bg: "transparent",
  color: themeGet("colors.greyDark")(props),
  fontSize: themeGet("fontSizes.1")(props),
  fontWeight: themeGet("fontWeights.2")(props),
  "&:focus, &:hover": {
    outline: "none",
    ".avatar-border": {
      borderColor: themeGet("colors.primaryLight")(props)
    },
    ".icon-container": {
      background: themeGet("colors.primaryLight")(props)
    }
  }
}));
export const AvatarBorder = /*#__PURE__*/styled(Box).withConfig({
  displayName: "AvatarBorder",
  componentId: "sc-xs8ba0-5"
})(props => css({
  transition: themeGet("transition.transitionDefault")(props),
  border: "solid 2px transparent",
  borderColor: themeGet("colors.greyDark")(props)
}));
export const UserMenuContainer = /*#__PURE__*/styled(Box).withConfig({
  displayName: "UserMenuContainer",
  componentId: "sc-xs8ba0-6"
})(css({
  position: "relative"
}));
export const IconContainer = /*#__PURE__*/styled(Flex).withConfig({
  displayName: "IconContainer",
  componentId: "sc-xs8ba0-7"
})(props => css({
  position: "absolute",
  bottom: "0",
  right: "0",
  height: "15px",
  width: "15px",
  background: themeGet("colors.greyDark")(props),
  transition: themeGet("transition.transitionDefault")(props)
}));
export const UserMenuContent = /*#__PURE__*/styled(Flex).withConfig({
  displayName: "UserMenuContent",
  componentId: "sc-xs8ba0-8"
})(props => css({
  position: "absolute",
  top: "calc(100% + 8px)",
  right: "0",
  zIndex: themeGet("zIndices.2")(props),
  opacity: props.isOpen ? 1 : 0,
  transform: props.isOpen ? "translateY(0)" : "translateY(-10px)",
  pointerEvents: props.isOpen ? "all" : "none",
  transition: "opacity 0.3s ease, transform 0.3s ease"
}));
export const AiButton = /*#__PURE__*/styled("button").withConfig({
  displayName: "AiButton",
  componentId: "sc-xs8ba0-9"
})(props => css({
  background: themeGet("colors.white")(props),
  border: "solid 2px transparent",
  display: "flex",
  flex: "0 0 auto",
  alignItems: "center",
  justifyContent: "center",
  appearance: "none",
  textDecoration: "none",
  textAlign: "center",
  cursor: "pointer",
  borderRadius: "50%",
  width: "calc(".concat(themeGet("avatarScale.navBarAvatarSize")(props), " + 4px)"),
  height: "calc(".concat(themeGet("avatarScale.navBarAvatarSize")(props), " + 4px)"),
  padding: "1px 4px 0 0",
  transition: themeGet("transition.transitionDefault")(props),
  "&:hover, &:focus": {
    background: themeGet("colors.primaryLightest")(props),
    borderColor: themeGet("colors.primaryLighter")(props),
    outline: "none"
  }
}));