Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@apollo/brand
Advanced tools
This repo contains a basic set of tokens that represent Apollo's brand colors and typographic styles. It also exposes our logotype and symbol logos as SVGs.
Readme
This repo contains a basic set of tokens that represent Apollo's brand colors and typographic styles. It also exposes our logotype and symbol logos as SVGs.
yarn add @apollo/brand
Import colors
and/or typography
from the @apollo/brand
package and access design system tokens by drilling into the objects' properties. For a reference of all the available tokens and styles, please refer to the Design System 2.0 document in Figma.
The colors
export contains two children: primitives
and tokens
.
primitives
are palettes named as their color, i.e., orange
, purple
, black
, etc. They each feature a series of numeric shades. For most palettes, they range from 100
to 500
in increments of 100.
tokens
are semantically-named colors with variants for light and dark modes. Their names describe the context that they should be used. For example, colors.tokens.border.warning.base
should be used as the border color for an element that displays a warning.
The base
property at the end of the token above refers to the light mode variant. If this color was being used in dark mode, you would access colors.tokens.border.warning.dark
. Every semantic token features base
and dark
variants.
The typography
export also contains primitives
and tokens
!
The primitives include named font weights, i.e., normal
, medium
mapped to their numerical values (400, 500, etc.), and named font sizes that map to numerical font size and line height combinations.
tokens
is an object that maps named font variants to the following CSS properties:
fontSize
lineHeight
fontFamily
fontWeight
This package also exposes the Apollo logos as plain SVG files. Depending on your website implementation, you may be able to import them and use them as image URLs, or transform them into React components using a tool like SVGR.
import { ReactComponent as Symbol } from "@apollo/brand/logos/symbol.svg";
const MyComponent = () => {
return (
// SVGR magic 🪄
<Symbol
style={{
fill: 'red'
}}
/>
);
};
import { colors, typography } from "@apollo/brand";
import logotype from "@apollo/brand/logos/logotype.svg";
const MyComponent = () => {
return (
<>
<img src={logotype} alt="Apollo logo" />
<h1
style={{
...typography.tokens["3xl"],
color: colors.tokens.text.primary.base,
backgroundColor: colors.primitives.navy[100]
}}
>
Welcome to Apollo
</h1>
</>
);
};
FAQs
This repo contains a basic set of tokens that represent Apollo's brand colors and typographic styles. It also exposes our logotype and symbol logos as SVGs.
The npm package @apollo/brand receives a total of 924 weekly downloads. As such, @apollo/brand popularity was classified as not popular.
We found that @apollo/brand demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.