npm - @atlaskit/tokens - Versions diffs - 1.4.1 → 1.4.3 - Mend

@atlaskit/tokens 1.4.1 → 1.4.3

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 (172) hide show

package/dist/types-ts4.5/use-theme-observer.d.ts ADDED Viewed

@@ -0,0 +1,15 @@
+import { ActiveThemeState } from './set-global-theme';
+/**
+ * A React hook which returns the current themes and color-mode set on `<html>`.
+ *
+ * @example
+ * ```
+ * const { colorMode, dark, light, spacing, typography } = useThemeObserver();
+ *
+ * // Performing side effects when it changes
+ * useEffect(() => {
+ *   console.log(`The color mode has changed to ${theme.colorMode}`);
+ * }, [theme.colorMode]);
+ * ```
+ */
+export declare const useThemeObserver: () => Partial<ActiveThemeState>;

package/dist/types-ts4.5/utils/color-detection.d.ts ADDED Viewed

@@ -0,0 +1,13 @@
+import { ShadowToken } from '../types';
+export declare const hexToRGBAValues: (hex: string) => {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+};
+/**
+ * Returns a box shadow formatted for CSS from a ShadowToken raw value.
+ *
+ * @param rawShadow - ShadowToken raw value
+ */
+export declare const getBoxShadow: (rawShadow: ShadowToken<string>['value']) => string;

package/dist/types-ts4.5/utils/theme-loading.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import { ThemeIds, ThemeOverrideIds } from '../theme-config';
+export declare const loadAndAppendThemeCss: (themeId: ThemeIds | ThemeOverrideIds) => Promise<void>;
+export declare const loadThemeCss: (themeId: ThemeIds | ThemeOverrideIds) => Promise<string>;

package/dist/types-ts4.5/utils/theme-state-transformer.d.ts ADDED Viewed

@@ -0,0 +1,26 @@
+import type { ThemeState } from '../set-global-theme';
+/**
+ * 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:legacy-light spacing:spacing');
+ * // returns { dark: 'dark', light: 'legacy-light', spacing: 'spacing' }
+ * ```
+ */
+export declare const themeStringToObject: (themeState: string) => Partial<ThemeState>;
+/**
+ * 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: 'legacy-light', spacing: 'spacing' });
+ * // returns 'dark:dark light:legacy-light spacing:spacing'
+ * ```
+ */
+export declare const themeObjectToString: (themeState: Partial<ThemeState>) => string;

package/dist/types-ts4.5/utils/token-ids.d.ts ADDED Viewed

@@ -0,0 +1,41 @@
+/**
+ * Transforms a style dictionary token path to a CSS custom property.
+ *
+ * A css prefix will be prepended and all [default] key words will be omitted
+ * from the path
+ *
+ * @example <caption>Passing a path as an array</caption>
+ * // Returns ds-background-bold
+ * getCSSCustomProperty(['color', 'background', 'bold', '[default]'])
+ *
+ * @example <caption>Passing a path as a string</caption>
+ * // Returns ds-background-bold
+ * getCSSCustomProperty('color.background.bold.[default]')
+ */
+export declare const getCSSCustomProperty: (path: string | string[]) => string;
+/**
+ * Transforms a style dictionary token path to a shorthand token id
+ * These ids will be typically be how tokens are interacted with via typescript and css
+ *
+ * All [default] key words will be omitted from the path
+ *
+ * @example <caption>Passing a path as an array</caption>
+ * // Returns color.background.bold
+ * getTokenId(['color', 'background', 'bold', '[default]'])
+ *
+ * @example <caption>Passing a path as a string</caption>
+ * // Returns color.background.bold
+ * getTokenId('color.background.bold.[default]')
+ */
+export declare const getTokenId: (path: string | string[]) => string;
+/**
+ * Transforms a style dictionary token path to a fully qualified token id
+ * These Ids are intended to be used internal to this package by style-dictionary
+ *
+ * [default] key words will NOT be omitted from the path
+ *
+ * @example <caption>Passing a path as a string</caption>
+ * // Returns color.background.bold.[default]
+ * getFullyQualifiedTokenId(['color', 'background', 'bold', '[default]'])
+ */
+export declare const getFullyQualifiedTokenId: (path: string[]) => string;

package/dist/types-ts4.5/utils/token-order.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+/**
+ * Create specific rules for ordering tokens based on their root path and subpath.
+ */
+export declare const tokenOrder: {
+    path: string;
+    subpaths: string[];
+}[];

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/tokens",
-  "version": "1.4.1",
+  "version": "1.4.3",
   "author": "Atlassian Pty Ltd",
   "description": "Design tokens are the single source of truth to name and store design decisions.",
   "license": "Apache-2.0",
@@ -71,7 +71,7 @@
     "@atlaskit/checkbox": "^12.6.0",
     "@atlaskit/code": "^14.6.0",
     "@atlaskit/docs": "^9.1.0",
-    "@atlaskit/dropdown-menu": "^11.8.0",
+    "@atlaskit/dropdown-menu": "^11.9.0",
     "@atlaskit/ds-explorations": "^2.1.0",
     "@atlaskit/dynamic-table": "^14.9.0",
     "@atlaskit/empty-state": "^7.5.0",