npm - @atlaskit/tokens - Versions diffs - 13.4.0 → 15.0.0 - Mend

@atlaskit/tokens 13.4.0 → 15.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (219) hide show

package/dist/types-ts4.5/index.d.ts DELETED Viewed

@@ -1,19 +0,0 @@
-export { default as themeConfig } from './theme-config';
-export { default as token } from './get-token';
-export { default as getTokenValue } from './get-token-value';
-export { default as setGlobalTheme } from './set-global-theme';
-export { default as enableGlobalTheme } from './enable-global-theme';
-export { default as getThemeStyles } from './get-theme-styles';
-export { default as getThemeHtmlAttrs } from './get-theme-html-attrs';
-export { default as getSSRAutoScript } from './get-ssr-auto-script';
-export { default as useThemeObserver } from './use-theme-observer';
-export { default as ThemeMutationObserver } from './theme-mutation-observer';
-export { default as getGlobalTheme } from './get-global-theme';
-export { themeStringToObject } from './theme-string-to-object';
-export { themeObjectToString } from './theme-object-to-string';
-export { default as themeImportMap } from './artifacts/theme-import-map';
-export type { CSSToken } from './artifacts/token-names';
-export type { ActiveTokens } from './artifacts/types';
-export type { ThemeColorModes, ThemeContrastModes, Themes, ThemeFileNames, ThemeIds, ThemeOptionsSchema, ThemeState, ActiveThemeState, } from './theme-config';
-export type { FontFamilyToken, FontWeightToken, Groups, OpacityToken, PaintToken, RawToken, ShadowToken, SpacingToken, ShapeToken, TypographyToken, MotionToken, } from './types';
-export { COLOR_MODE_ATTRIBUTE, CURRENT_SURFACE_CSS_VAR, SUBTREE_THEME_ATTRIBUTE, THEME_DATA_ATTRIBUTE, } from './constants';

package/dist/types-ts4.5/is-color-mode.d.ts DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import type { ThemeColorModes } from './theme-color-modes';
2	- export declare const isColorMode: (modeId: string) => modeId is ThemeColorModes;

package/dist/types-ts4.5/is-theme-ids.d.ts DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import type { ThemeIds } from './theme-config';
2	- export declare const isThemeIds: (themeId: string) => themeId is ThemeIds;

package/dist/types-ts4.5/is-theme-kind.d.ts DELETED Viewed

@@ -1,11 +0,0 @@
-declare const themeKinds: readonly [
-    "light",
-    "dark",
-    "spacing",
-    "typography",
-    "shape",
-    "motion"
-];
-type ThemeKind = (typeof themeKinds)[number];
-export declare const isThemeKind: (themeKind: string) => themeKind is ThemeKind;
-export {};

package/dist/types-ts4.5/load-custom-theme-styles.d.ts DELETED Viewed

@@ -1,17 +0,0 @@
-import { type ThemeState } from './theme-config';
-/**
- * Synchronously generates and applies custom theme styles to the page.
- *
- * @param {Object<string, string>} themeState The themes and color mode that should be applied.
- * @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
- *
- * @example
- * ```
- * UNSAFE_loadCustomThemeStyles({
- *    colorMode: 'auto',
- *    UNSAFE_themeOptions: { brandColor: '#FF0000' }
- * });
- * ```
- */
-declare const UNSAFE_loadCustomThemeStyles: ({ colorMode, UNSAFE_themeOptions, }?: Partial<ThemeState>) => void;
-export default UNSAFE_loadCustomThemeStyles;

package/dist/types-ts4.5/set-global-theme.d.ts DELETED Viewed

@@ -1,26 +0,0 @@
-import { type UnbindFn } from 'bind-event-listener';
-import { type ThemeIdsWithOverrides, type ThemeState } from './theme-config';
-/**
- * Sets the theme globally at runtime. This updates the `data-theme` and `data-color-mode` attributes on your page's <html> tag.
- *
- * @param {Object<string, string>} themeState The themes and color mode that should be applied.
- * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
- * @param {string} themeState.contrastMode The contrast mode theme to be applied. If set to `auto`, the theme applied will be determined by the OS setting.set to `auto`, the theme applied will be determined by the OS setting.
- * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
- * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
- * @param {string} themeState.motion The motion theme to be applied.
- * @param {string} themeState.shape The shape theme to be applied.
- * @param {string} themeState.spacing The spacing theme to be applied.
- * @param {string} themeState.typography The typography theme to be applied.
- * @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
- * @param {function} themeLoader Callback function used to override the default theme loading functionality.
- *
- * @returns A Promise of an unbind function, that can be used to stop listening for changes to system theme.
- *
- * @example
- * ```
- * setGlobalTheme({colorMode: 'auto', light: 'light', dark: 'dark', spacing: 'spacing'});
- * ```
- */
-declare const setGlobalTheme: (nextThemeState?: Partial<ThemeState> | ((themeState: ThemeState) => ThemeState), themeLoader?: (id: ThemeIdsWithOverrides) => void | Promise<void>) => Promise<UnbindFn>;
-export default setGlobalTheme;

package/dist/types-ts4.5/theme-color-modes.d.ts DELETED Viewed

@@ -1,12 +0,0 @@
-/**
- * Theme modes: The general purpose of a theme.
- * This attr is used to apply the appropriate system-preference option
- * It may also be used as a selector for mode-specific overrides such as light/dark images.
- * The idea is there may exist many color themes, but every theme must either fit into light or dark.
- */
-export declare const themeColorModes: readonly [
-    "light",
-    "dark",
-    "auto"
-];
-export type ThemeColorModes = (typeof themeColorModes)[number];

package/dist/types-ts4.5/theme-config.d.ts DELETED Viewed

@@ -1,121 +0,0 @@
-/**
- * This file contains the source of truth for themes and all associated meta data.
- */
-import type { ThemeColorModes } from './theme-color-modes';
-import { type ThemeIds } from './theme-ids';
-import type { ThemeState } from './theme-state';
-/**
- * Themes: The internal identifier of a theme.
- * These ids are what the actual theme files/folders are called.
- * style-dictionary will attempt to locate these in the file-system.
- */
-export type Themes = 'atlassian-light' | 'atlassian-light-future' | 'atlassian-light-increased-contrast' | 'atlassian-dark' | 'atlassian-dark-future' | 'atlassian-dark-increased-contrast' | 'atlassian-shape' | 'atlassian-spacing' | 'atlassian-typography' | 'atlassian-motion';
-export type ThemeFileNames = Themes;
-/**
- * ThemeOverrides: The internal identifier of a theme override. Which are themes that contain
- * a subset of tokens intended to override an existing theme. These ids are what the actual
- * theme files/folders are called. style-dictionary will attempt to locate these in the file-system.
- * Theme overrides are temporary and there may not be any defined at times.
- */
-export type ThemeOverrides = Themes;
-/**
- * Theme kinds: The type of theme.
- * Some themes are entirely focused on Color, whilst others are purely focused on spacing.
- * In the future other types may be introduced such as typography.
- */
-type ThemeKinds = 'color' | 'spacing' | 'typography' | 'shape' | 'motion';
-export type DataColorModes = Exclude<ThemeColorModes, 'auto'>;
-/**
- * Contrast preferences: The system contrast preference
- */
-declare const themeContrastModes: readonly [
-    "more",
-    "no-preference",
-    "auto"
-];
-export type ThemeContrastModes = (typeof themeContrastModes)[number];
-export type DataContrastModes = 'more' | 'no-preference' | 'auto';
-/**
- * Theme override ids: the equivalent of themeIds for theme overrides.
- * Theme overrides are temporary and there may not be any defined at times.
- */
-declare const themeOverrideIds: readonly [
-];
-export type ThemeOverrideIds = (typeof themeOverrideIds)[number];
-export declare const themeIdsWithOverrides: readonly [
-    'light-increased-contrast',
-    'light',
-    'light-future',
-    'dark',
-    'dark-future',
-    'dark-increased-contrast',
-    'spacing',
-    'shape',
-    'typography',
-    'motion'
-];
-export type ThemeIdsWithOverrides = (typeof themeIdsWithOverrides)[number];
-/**
- * Theme to use a base. This will create the theme as
- * an extension with all token values marked as optional
- * to allow tokens to be overridden as required.
- */
-type ExtensionThemeId = ThemeIds;
-/**
- * Palettes: The set of base tokens a given theme may be populated with.
- * For example: legacy light & dark themes use the "legacyPalette" containing colors from our
- * previous color set.
- */
-export type Palettes = 'defaultPalette' | 'spacingScale' | 'shapePalette' | 'typographyPalette' | 'motionPalette';
-/**
- * ThemeConfig: the source of truth for all theme meta-data.
- * This object should be used whenever interfacing with themes.
- */
-interface ThemeConfig {
-    id: ThemeIds | ThemeOverrideIds;
-    displayName: string;
-    palette: Palettes;
-    attributes: ({
-        type: 'color';
-        mode: DataColorModes;
-    } | {
-        type: Extract<ThemeKinds, 'spacing' | 'typography' | 'shape' | 'motion'>;
-    }) & {
-        /**
-         * @deprecated Use top-level `extends` property instead
-         */
-        extends?: ExtensionThemeId;
-    };
-    /**
-     * Theme to use a base. This will create the theme as
-     * an extension with all token values marked as optional
-     * to allow tokens to be overridden as required.
-     */
-    extends?: ThemeIds;
-    /**
-     * Theme to override. This will cause the theme to only
-     * output css variables which can be imported to temporarily
-     * override existing themes for testing purposes.
-     */
-    override?: ThemeIds;
-    /**
-     * Use when the theme provides an increased contrast
-     * version of another theme. This will cause the theme to be loaded
-     * under the media query `@media (prefers-contrast: more)`.
-     */
-    increasesContrastFor?: ThemeIds;
-}
-declare const themeConfig: Record<Themes | ThemeOverrides, ThemeConfig>;
-/**
- * Represents theme state once mounted to the page
- * (the page doesn't have an "auto" color mode, it's either light or dark)
- */
-export interface ActiveThemeState extends ThemeState {
-    colorMode: DataColorModes;
-}
-export default themeConfig;
-export { themeColorModes, type ThemeColorModes } from './theme-color-modes';
-export { themeIds, type ThemeIds } from './theme-ids';
-export { themeStateDefaults } from './theme-state-defaults';
-export { type ThemeOptionsSchema, type CSSColor } from './theme-options-schema';
-export { type ThemeState } from './theme-state';

package/dist/types-ts4.5/theme-ids.d.ts DELETED Viewed

@@ -1,19 +0,0 @@
-export type ThemeIds = (typeof themeIds)[number];
-/**
- * Theme ids: The value that will be mounted to the DOM as a data attr
- * For example: `data-theme="light:light dark:dark spacing:spacing"
- *
- * These ids must be kebab case
- */
-export declare const themeIds: readonly [
-    "light-increased-contrast",
-    "light",
-    "light-future",
-    "dark",
-    "dark-future",
-    "dark-increased-contrast",
-    "spacing",
-    "shape",
-    "typography",
-    "motion"
-];

package/dist/types-ts4.5/theme-mutation-observer.d.ts DELETED Viewed

@@ -1,25 +0,0 @@
-import { type ActiveThemeState } from './theme-config';
-type ThemeCallback = (theme: Partial<ActiveThemeState>) => unknown;
-/**
- * A MutationObserver which watches the `<html>` element for changes to the theme.
- *
- * In React, use the {@link useThemeObserver `useThemeObserver`} hook instead.
- *
- * @param {function} callback - A callback function which fires when the theme changes.
- *
- * @example
- * ```
- * const observer = new ThemeMutationObserver((theme) => {});
- * observer.observe();
- * ```
- */
-export default class ThemeMutationObserver {
-    legacyObserver: MutationObserver | null;
-    static observer: MutationObserver | null;
-    static callbacks: Set<ThemeCallback>;
-    callback: ThemeCallback;
-    constructor(callback: ThemeCallback);
-    observe(): void;
-    disconnect(): void;
-}
-export {};

package/dist/types-ts4.5/theme-object-to-string.d.ts DELETED Viewed

@@ -1,13 +0,0 @@
-import type { ThemeState } from './theme-state';
-/**
- * Converts a theme object to a string formatted for the `data-theme` HTML attribute.
- *
- * @param {object} themes The themes that should be applied.
- *
- * @example
- * ```
- * themeObjectToString({ dark: 'dark', light: 'light', spacing: 'spacing' });
- * // returns 'dark:dark light:light spacing:spacing'
- * ```
- */
-export declare const themeObjectToString: (themeState: Partial<ThemeState>) => string;

package/dist/types-ts4.5/theme-options-schema.d.ts DELETED Viewed

@@ -1,7 +0,0 @@
-export type CSSColor = `#${string}`;
-/**
- * ThemeOptionsSchema: additional configuration options used to customize Atlassian's themes
- */
-export interface ThemeOptionsSchema {
-    brandColor: CSSColor;
-}

package/dist/types-ts4.5/theme-state-defaults.d.ts DELETED Viewed

@@ -1,14 +0,0 @@
-import type { ThemeState } from './theme-state';
-/**
- * Can't evaluate typography feature flags at the module level,
- * it will always resolve to false when server side rendered or when flags are loaded async.
- */
-interface ThemeStateDefaults extends Omit<ThemeState, 'shape' | 'motion'> {
-    shape: () => ThemeState['shape'];
-    motion: () => ThemeState['motion'];
-}
-/**
- * themeStateDefaults: the default values for ThemeState used by theming utilities
- */
-export declare const themeStateDefaults: ThemeStateDefaults;
-export {};

package/dist/types-ts4.5/theme-state.d.ts DELETED Viewed

@@ -1,17 +0,0 @@
-import type { ThemeColorModes } from './theme-color-modes';
-import type { ThemeContrastModes, ThemeOptionsSchema } from './theme-config';
-import type { ThemeIds } from './theme-ids';
-/**
- * ThemeState: the standard representation of an app's current theme and preferences
- */
-export interface ThemeState {
-    light: Extract<ThemeIds, 'light' | 'light-future' | 'dark' | 'dark-future' | 'light-increased-contrast' | 'dark-increased-contrast'>;
-    dark: Extract<ThemeIds, 'light' | 'light-future' | 'dark' | 'dark-future' | 'light-increased-contrast' | 'dark-increased-contrast'>;
-    colorMode: ThemeColorModes;
-    contrastMode: ThemeContrastModes;
-    shape?: Extract<ThemeIds, 'shape'>;
-    spacing: Extract<ThemeIds, 'spacing'>;
-    typography: Extract<ThemeIds, 'typography'>;
-    motion?: Extract<ThemeIds, 'motion'>;
-    UNSAFE_themeOptions?: ThemeOptionsSchema;
-}

package/dist/types-ts4.5/theme-string-to-object.d.ts DELETED Viewed

@@ -1,14 +0,0 @@
-import type { ThemeState } from './theme-config';
-/**
- * Converts a string that is formatted for the `data-theme` HTML attribute
- * to an object that can be passed to `setGlobalTheme`.
- *
- * @param {string} themes The themes that should be applied.
- *
- * @example
- * ```
- * themeStringToObject('dark:dark light:light spacing:spacing');
- * // returns { dark: 'dark', light: 'light', spacing: 'spacing' }
- * ```
- */
-export declare const themeStringToObject: (themeState: string) => Partial<ThemeState>;