baseui/card/styled-components.js

A React Component library implementing the Base design language

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Title = exports.Thumbnail = exports.Root = exports.HeaderImage = exports.Contents = exports.Body = exports.Action = void 0;
var _styles = require("../styles");
/*
Copyright (c) Uber Technologies, Inc.

This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/

// eslint-disable-next-line @typescript-eslint/no-unused-vars

const Action = exports.Action = (0, _styles.styled)('div', ({
  $theme
}) => ({
  ...$theme.typography.LabelMedium
}));
Action.displayName = "Action";
Action.displayName = 'Action';
const Body = exports.Body = (0, _styles.styled)('div', ({
  $theme
}) => ({
  marginBottom: $theme.sizing.scale600,
  color: $theme.colors.contentPrimary,
  ...$theme.typography.ParagraphMedium
}));
Body.displayName = "Body";
Body.displayName = 'Body';
const Contents = exports.Contents = (0, _styles.styled)('div', ({
  $theme
}) => ({
  marginLeft: $theme.sizing.scale600,
  marginTop: $theme.sizing.scale600,
  marginRight: $theme.sizing.scale600,
  marginBottom: $theme.sizing.scale600
}));
Contents.displayName = "Contents";
Contents.displayName = 'Contents';
const HeaderImage = exports.HeaderImage = (0, _styles.styled)('img', ({
  $theme
}) => ({
  borderTopLeftRadius: $theme.borders.surfaceBorderRadius,
  borderTopRightRadius: $theme.borders.surfaceBorderRadius,
  objectFit: 'contain',
  maxWidth: '100%'
}));
HeaderImage.displayName = "HeaderImage";
HeaderImage.displayName = 'HeaderImage';

// by using the section tag, we can keep the h1 for the title
// https://html.spec.whatwg.org/multipage/sections.html#headings-and-sections
const Root = exports.Root = (0, _styles.styled)('section', ({
  $theme
}) => ({
  borderLeftWidth: '2px',
  borderTopWidth: '2px',
  borderRightWidth: '2px',
  borderBottomWidth: '2px',
  borderLeftStyle: 'solid',
  borderTopStyle: 'solid',
  borderRightStyle: 'solid',
  borderBottomStyle: 'solid',
  borderLeftColor: $theme.colors.borderOpaque,
  borderRightColor: $theme.colors.borderOpaque,
  borderTopColor: $theme.colors.borderOpaque,
  borderBottomColor: $theme.colors.borderOpaque,
  borderTopLeftRadius: $theme.borders.radius400,
  borderTopRightRadius: $theme.borders.radius400,
  borderBottomLeftRadius: $theme.borders.radius400,
  borderBottomRightRadius: $theme.borders.radius400,
  backgroundColor: $theme.colors.backgroundPrimary,
  overflow: 'hidden'
}));
Root.displayName = "Root";
Root.displayName = 'Root';
const Thumbnail = exports.Thumbnail = (0, _styles.styled)('img', ({
  $theme
}) => ({
  float: 'right',
  height: $theme.sizing.scale2400,
  width: $theme.sizing.scale2400,
  objectFit: 'cover',
  borderTopLeftRadius: $theme.borders.surfaceBorderRadius,
  borderTopRightRadius: $theme.borders.surfaceBorderRadius,
  borderBottomLeftRadius: $theme.borders.surfaceBorderRadius,
  borderBottomRightRadius: $theme.borders.surfaceBorderRadius,
  ...(0, _styles.expandBorderStyles)($theme.borders.border200),
  margin: `0 0 ${$theme.sizing.scale500} ${$theme.sizing.scale500}`
}));
Thumbnail.displayName = "Thumbnail";
Thumbnail.displayName = 'Thumbnail';
const Title = exports.Title = (0, _styles.styled)('h1', ({
  $theme
}) => ({
  ...$theme.typography.HeadingSmall,
  color: $theme.colors.contentPrimary,
  marginLeft: 0,
  marginTop: 0,
  marginRight: 0,
  marginBottom: $theme.sizing.scale500,
  paddingLeft: 0,
  paddingTop: 0,
  paddingRight: 0,
  paddingBottom: 0
}));
Title.displayName = "Title";
Title.displayName = 'Title';