Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@kalamazoo/theme

stevenselcuk471Apache-2.01.0.1TypeScript support: included

The Atlaskit theme framework

atlaskit, css, theme, react, ui

readme

Theme

The Atlaskit theme framework, helpers and the ADG color palette.

Installation

yarn add @kalamazoo/theme

Usage

Detailed docs and example usage can be found here.

changelog

@kalamazoo/theme

9.4.0

Minor Changes

  • [minor]429925f854:

    Adds skeleton color. Import and use like:

    import { skeleton } from '@kalamazoo/theme';

skeleton(); // '#F4F5F7'

9.3.0

Minor Changes

  • [minor]f9c291923c:

    Corrects the type exports for typography, colors, elevation and layers. If you were doing any dynamic code it may break you. Refer to the upgrade guide for help upgrading.

Patch Changes

  • [patch]3c0f6feee5:

    Fixes types property in package json to point to the correct location.

9.2.8

Patch Changes

9.2.7

Patch Changes

  • [patch]c3dc8235f2:

    Preventing circular dep within theme

9.2.6

Patch Changes

  • [patch]d222c2b987:

    Theme has been converted to Typescript. Typescript consumers will now get static type safety. Flow types are no longer provided.

    Breaking

    ** getTokens props changes ** When defining the value function passed into a ThemeProvider, the getTokens parameter cannot be called without props; if no props are provided an empty object {} must be passed in:

    <CustomTheme.Provider
  value={t => ({ ...t(), backgroundColor: '#333'})}
>

    becomes:

    <CustomTheme.Provider
  value={t => ({ ...t({}), backgroundColor: '#333'})}
>

    ** Color palette changes ** Color palettes have been moved into their own file. Users will need to update imports from this:

    import { colors } from '@kalamazoo/theme';

colors.colorPalette('8');

    to this:

    import { colorPalette } from '@kalamazoo/theme';

colorPalette.colorPalette('8');

    or for multi entry-point users:

    import * as colors from '@kalamazoo/theme/colors';

colors.colorPalette('8');

    to this:

    import * as colorPalettes from '@kalamazoo/theme/color-palette';

colorPalettes.colorPalette('8');

9.2.5

Patch Changes

  • [patch]2119c45dfc:

    Add missing Theme/GlobalThemeTokens to constants.d.ts

9.2.4

Patch Changes

  • [patch]35d2229b2a:

    Adding missing license to packages and update to Copyright 2019 Atlassian Pty Ltd.

9.2.3

Patch Changes

  • [patch]decd6fceea:

    ED-5137 added heading anchor link

    Values for heading sizes(h100 - h900) are exported as part of typography. Places need to calculate heights for heading can use those values to calculate.

9.2.2

Patch Changes

  • [patch]8d0f37c23e:

    @kalamazoo/avatar has been converted to Typescript. Typescript consumers will now get static type safety. Flow types are no longer provided. No API or behavioural changes.

9.2.1

Patch Changes

  • [patch]94620ae46a:

    Updating the temporary ts definition file for Theme.

9.2.0

Minor Changes

9.1.6

Patch Changes

  • [patch]097b696613:

    Components now depend on TS 3.6 internally, in order to fix an issue with TS resolving non-relative imports as relative imports

9.1.5

Patch Changes

9.1.4

Patch Changes

  • [patch]9eceb8379f:

    Moves typescript declaration files to the root of theme

9.1.3

Patch Changes

  • [patch]de35ce8c67:

    Updates component maintainers

9.1.2

Patch Changes

  • [patch]c6ad66d326:

    The types property in package.json now points to the correct file"

9.1.1

Patch Changes

  • [patch]4615439434:

    index.ts will now be ignored when publishing to npm

9.1.0

  • [minor]70862830d6:

    • Checkbox has been converted to Typescript. Typescript consumers will now get static type safety. Flow types are no longer provided. No API or behavioural changes.

9.0.3

9.0.2

9.0.1

  • [patch]d5f0e7d767:

    • Adds missing type def to typings for the /component.ts entrypoint

9.0.0

  • [major]7c17b35107:

    • Updates react and react-dom peer dependencies to react@^16.8.0 and react-dom@^16.8.0. To use this package, please ensure you use at least this version of react and react-dom.

8.1.9

  • [patch]e0e3fabf8e:

    • Change button to use theme's multiple entry points. This should reduce the bundle size of button

8.1.8

  • [patch]453838d3c5:

    • Removes an import which referes to the old entry point of this component. Bundle size should now be slightly smaller

8.1.7

  • [patch]9c0b4744be:

    • Crucial bugfix: Fixes problem where default theme was undefined in production builds. This caused styles to not be applied to components.

8.1.6

8.1.5

8.1.4

  • [patch]4368278bb4:

    • Added components entry point allowing consumers to pull in just what they need out of theme (smaller bundle sizes!)
    import { N500, N0 } from '@kalamazoo/theme/colors';
import { focusRing } from '@kalamazoo/theme/constants';
import { withTheme } from '@kalamazoo/theme/components';

8.1.3

  • [patch]b4732a178b:

    • Fixing incorrect z-index for navigation-next and inline dialog

8.1.2

  • [patch]0f17bb7c20:

    • Theme TypeScript annotations are now exported as a module declaration.

8.1.1

  • [patch]7fe933beaa:

    • Adds missing typescript annotations

8.1.0

  • [minor]a561af5fc6:

    • Theme now exports top-level type definition for TS users

8.0.2

  • [patch]5150860405:

    • Updates Theme.Context prop type definiton

8.0.1

8.0.0

  • [major]76299208e6:

    • Drop ES5 from all the flow modules

    Dropping CJS support in all @atlaskit packages

    As a breaking change, all @atlaskit packages will be dropping cjs distributions and will only distribute esm. This means all distributed code will be transpiled, but will still contain import and export declarations.

    The major reason for doing this is to allow us to support multiple entry points in packages, e.g:

    import colors from `@kalamazoo/theme/colors`;

    Previously this was sort of possible for consumers by doing something like:

    import colors from `@kalamazoo/theme/dist/esm/colors`;

    This has a couple of issues. 1, it treats the file system as API making internal refactors harder, we have to worry about how consumers might be using things that aren't actually supposed to be used. 2. We are unable to do this internally in @atlaskit packages. This leads to lots of packages bundling all of theme, just to use a single color, especially in situations where tree shaking fails.

    To support being able to use multiple entrypoints internally, we unfortunately cannot have multiple distributions as they would need to have very different imports from of their own internal dependencies.

    ES Modules are widely supported by all modern bundlers and can be worked around in node environments.

    We may choose to revisit this solution in the future if we find any unintended condequences, but we see this as a pretty sane path forward which should lead to some major bundle size decreases, saner API's and simpler package architecture.

    Please reach out to #fabric-build (if in Atlassian) or create an issue in Design System Support (for external) if you have any questions or queries about this.

7.0.5

7.0.4

  • [patch]1a98f74:

    • Added the missing unit to box-shadow for focus ring styles

7.0.3

  • [patch]899fac7:

    • added the focus ring and no focus ring styles

7.0.2

  • [patch]ca16fa9:

    • Add SSR support to media components

7.0.1

7.0.0

  • [major]d13242d:

    • Change API to experimental theming API to namespace component themes into separate contexts and make theming simpler. Update all dependant components.

6.2.1

6.2.0

  • [minor] Add smallFontSize as an export to theme 3469f64

6.1.1

  • [patch] Adds missing implicit @babel/runtime dependency b71751b

6.1.0

  • [minor] Adds new theming API to Avatar and AvatarItem components 79dd93f

6.0.4

  • [patch] Added assistive styles from util-shared-styles dc563c1

6.0.3

  • [patch] fixed font-size and font-weight of h100 in theme to 11px and 700 respectively 9742864

6.0.2

  • [patch] Adds sideEffects: false to allow proper tree shaking b5d6d04

6.0.0

5.1.3

5.1.2

5.1.1

5.1.0

  • [minor] Add new components (Consumer, Provider, Reset and Theme) and deprecate old APIs. New components are marked as experimenta so they may change. Deprecated components can still be used until experimental APIs are finalised. cd799a5
  • [none] Updated dependencies cd799a5

5.0.0

4.1.0

  • [minor] Added elevations to the Theme package and updated visual styles for the field-range component. dbd8de7
  • [none] Updated dependencies dbd8de7

4.0.5

  • [patch] Align ADG, Website and AK dd295bf
  • [none] Updated dependencies dd295bf

4.0.4

4.0.3

4.0.2

4.0.1

4.0.0

3.2.2

3.2.1

  • [patch] Add Consolas to our font family 62bacf6
  • [none] Updated dependencies 62bacf6

3.2.0

  • [minor] Add color palette to theme - Jira Porfolio 72ab054

3.1.1

  • [patch] releasing all compo that depends on theme 86a82d2
  • [patch] Re-release to fix changes merged with @kalamazoo/form baa3c20

3.1.0

  • [minor] Added ability to specify an object as the badge appearance. Added an Appearance export to theme so that we can use strings and objects for appearance theming." 6e89615

3.0.0

  • [major] Bump to React 16.3. 4251858

2.4.1

  • [patch] Re-releasing due to potentially broken babel release 9ed0bba

2.4.0

  • [minor] Update styled-components dependency to support versions 1.4.6 - 3 ceccf30

2.3.4

2.3.3

  • [patch] Packages Flow types for elements components 3111e74

2.3.2

  • [patch] added a new layer tooltip 2215bc7

2.3.1

  • [patch] Resolved low hanging flow errors in field-base field-text comment icon item and website, $ 007de27

2.3.0

  • [minor] Add React 16 support. 12ea6e4

2.2.4

  • [patch] moved theme to new atlaskit repo a25b940
  • [patch] moved theme to new atlaskit repo a25b940

2.2.3 (2017-10-27)

  • bug fix; triggering storybooks (87e7247)
  • bug fix; removed unused dependency on util-shared-styles from the Theme component (253d8fc)

2.2.2 (2017-10-26)

  • bug fix; fix to rebuild stories (793b2a7)

2.2.1 (2017-10-22)

  • bug fix; update styled components dep and react peerDep (5539ada)

2.2.0 (2017-09-27)

  • feature; export "layers" from theme (15aebe6)

2.1.0 (2017-09-13)

2.0.1 (2017-08-11)

  • bug fix; Add placeholder color to theme (ba023fb)

2.0.0

  • Initial Release