CSS

Style components backed by Atlassian Design System design tokens powered by Compiled CSS-in-JS.

Installation

First set up Compiled.

yarn add @atlaskit/css

Update your Compiled config to have importSources point to @atlaskit/css:

{
+  "importSources": ["@atlaskit/css"]
}

Usage

import { css } from '@atlaskit/css';

const basicStyles = css({
    color: 'var(--ds-link)',
});

<div css={basicStyles} />;

@atlaskit/css

0.7.4

Patch Changes

• #103999 9f62ecec4d422 - Update dependencies.

0.7.3

Patch Changes

• Updated dependencies

0.7.2

Patch Changes

• #178053 cb318c8c28c26 - Internal changes to typography.

0.7.1

Patch Changes

• #175552 0384c8ac8996a - Narrow down fontStyle type definition to only allow normal and italic.

0.7.0

Minor Changes

• #168289 5fe404687ca98 - Add a test helper to reduce issues when migrating to Compiled CSS.

  Change dom Node's textContent property to remove Compiled CSS definitions except for Compiled style nodes.

0.6.2

Patch Changes

• #165531 57f451bda8919 - Adds side-effect config to support Compiled css extraction in third-party apps

0.6.1

Patch Changes

• #160054 a85c8b06aad62 - Updates to the 0.5.2-primitives-emotion-to-compiled codemod to group imports from @atlaskit/primitives.

0.6.0

Minor Changes

• #154669 20db78434becd - Bump to the latest version of @compiled/*
• #154669 20db78434becd - Adds the jsx export to allow @atlaskit/css to be used for the JSX Pragma within the Compiled ecosystem.

0.5.3

Patch Changes

• #151036 5fa98b5962048 - Add version prefix to codemod

0.5.2

Patch Changes

• #150360 284490a8c1813 - Add codemod to migrate @atlaskit/primitives from using Emotion APIs towards Compiled.

0.5.1

Patch Changes

• Updated dependencies

0.5.0

Minor Changes

• #138792 59c6812e1be91 - Update the @atlaskit/css schema to include:

  • border and font shorthand token values
  • Background and color -hovered and -pressed tokens are available in the non-psuedo-states for patterns like <div css={[isHovered && hoveredStyles]} />
  • Adds more commonly used media queries

Patch Changes

• Updated dependencies

0.4.0

Minor Changes

• #127511 db30e29344013 - Widening range of react and react-dom peer dependencies from ^16.8.0 || ^17.0.0 || ~18.2.0 to the wider range of ^16.8.0 || ^17.0.0 || ^18.0.0` (where applicable).

  This change has been done to enable usage of `react@18.3as well as to have a consistent peer dependency range forreactandreact-domfor/platform` packages.

Patch Changes

• Updated dependencies

0.3.0

Minor Changes

• #108386 8f3fa9e80b93c - Updated xl breakpoint to be 1768px instead of 1760px (110.5rem instead of 110rem) to match updated design guidance.

0.2.0

Minor Changes

• #111878 223959ef57c80 - Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime is implicitly set to automatic.

0.1.1

Patch Changes

• #107116 9a038f5d3834 - Upgrade dependency @compiled/react to latest version

0.1.0

Minor Changes

• #90242 aff0087405c1 - Add support for React 18 in non-strict mode.

0.0.6

Patch Changes

• #89540 1748b673d90d - DSP-17890 Add media query types to createStrictAPI, just be aware that cascading media queries are not guaranteed to work with Compiled, refer to https://compiledcssinjs.com/docs/atomic-css#selector-specificity

0.0.5

Patch Changes

• #83116 8d4e99057fe0 - Upgrade Typescript from 4.9.5 to 5.4.2

0.0.4

Patch Changes

• #80571 fafdb1dcce96 - Fix bugs in strict CSS typedef.
• #79686 7dc7cf06a8b9 - Bump @compiled/react to v0.17.0

0.0.3

Patch Changes

• #62648 1902f30344b5 - Add a StrictXCSSProp to clarify the loose vs. strict implementation.

0.0.2

Patch Changes

• #63504 a48de33c8536 - Uses codegen'd token schema type definition from the tokens package
• Updated dependencies

0.0.1

Patch Changes

• #58767 6a6dbc5197e8 - Initial commit.