@atlaskit/tokens 1.11.3 → 1.12.0

package/dist/types-ts4.5/utils/hct-color-utils/color-utils.d.ts

@@ -0,0 +1,131 @@
+/**
+ * Below lines are copied from @material/material-color-utilities.
+ * Do not modify it.
+ */
+/**
+ * Converts a color from RGB components to ARGB format.
+ */
+export declare function argbFromRgb(red: number, green: number, blue: number): number;
+/**
+ * Converts a color from linear RGB components to ARGB format.
+ */
+export declare function argbFromLinrgb(linrgb: number[]): number;
+/**
+ * Returns the alpha component of a color in ARGB format.
+ */
+export declare function alphaFromArgb(argb: number): number;
+/**
+ * Returns the red component of a color in ARGB format.
+ */
+export declare function redFromArgb(argb: number): number;
+/**
+ * Returns the green component of a color in ARGB format.
+ */
+export declare function greenFromArgb(argb: number): number;
+/**
+ * Returns the blue component of a color in ARGB format.
+ */
+export declare function blueFromArgb(argb: number): number;
+/**
+ * Returns whether a color in ARGB format is opaque.
+ */
+export declare function isOpaque(argb: number): boolean;
+/**
+ * Converts a color from ARGB to XYZ.
+ */
+export declare function argbFromXyz(x: number, y: number, z: number): number;
+/**
+ * Converts a color from XYZ to ARGB.
+ */
+export declare function xyzFromArgb(argb: number): number[];
+/**
+ * Converts an L* value to an ARGB representation.
+ *
+ * @param lstar L* in L*a*b*
+ * @return ARGB representation of grayscale color with lightness
+ * matching L*
+ */
+export declare function argbFromLstar(lstar: number): number;
+/**
+ * Computes the L* value of a color in ARGB representation.
+ *
+ * @param argb ARGB representation of a color
+ * @return L*, from L*a*b*, coordinate of the color
+ */
+export declare function lstarFromArgb(argb: number): number;
+/**
+ * Converts an L* value to a Y value.
+ *
+ * L* in L*a*b* and Y in XYZ measure the same quantity, luminance.
+ *
+ * L* measures perceptual luminance, a linear scale. Y in XYZ
+ * measures relative luminance, a logarithmic scale.
+ *
+ * @param lstar L* in L*a*b*
+ * @return Y in XYZ
+ */
+export declare function yFromLstar(lstar: number): number;
+/**
+ * Converts a Y value to an L* value.
+ *
+ * L* in L*a*b* and Y in XYZ measure the same quantity, luminance.
+ *
+ * L* measures perceptual luminance, a linear scale. Y in XYZ
+ * measures relative luminance, a logarithmic scale.
+ *
+ * @param y Y in XYZ
+ * @return L* in L*a*b*
+ */
+export declare function lstarFromY(y: number): number;
+/**
+ * Linearizes an RGB component.
+ *
+ * @param rgbComponent 0 <= rgb_component <= 255, represents R/G/B
+ * channel
+ * @return 0.0 <= output <= 100.0, color channel converted to
+ * linear RGB space
+ */
+export declare function linearized(rgbComponent: number): number;
+/**
+ * Delinearizes an RGB component.
+ *
+ * @param rgbComponent 0.0 <= rgb_component <= 100.0, represents
+ * linear R/G/B channel
+ * @return 0 <= output <= 255, color channel converted to regular
+ * RGB space
+ */
+export declare function delinearized(rgbComponent: number): number;
+/**
+ * Returns the standard white point; white on a sunny day.
+ *
+ * @return The white point
+ */
+export declare function whitePointD65(): number[];
+/**
+ * RGBA component
+ *
+ * @param r Red value should be between 0-255
+ * @param g Green value should be between 0-255
+ * @param b Blue value should be between 0-255
+ * @param a Alpha value should be between 0-255
+ */
+export interface Rgba {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+}
+/**
+ * Return RGBA from a given int32 color
+ *
+ * @param argb ARGB representation of a int32 color.
+ * @return RGBA representation of a int32 color.
+ */
+export declare function rgbaFromArgb(argb: number): Rgba;
+/**
+ * Return int32 color from a given RGBA component
+ *
+ * @param rgba RGBA representation of a int32 color.
+ * @returns ARGB representation of a int32 color.
+ */
+export declare function argbFromRgba({ r, g, b, a }: Rgba): number;

package/dist/types-ts4.5/utils/hct-color-utils/contrast.d.ts

@@ -0,0 +1,78 @@
+/**
+ * Below lines are copied from @material/material-color-utilities.
+ * Do not modify it.
+ */
+/**
+ * Utility methods for calculating contrast given two colors, or calculating a
+ * color given one color and a contrast ratio.
+ *
+ * Contrast ratio is calculated using XYZ's Y. When linearized to match human
+ * perception, Y becomes HCT's tone and L*a*b*'s' L*. Informally, this is the
+ * lightness of a color.
+ *
+ * Methods refer to tone, T in the the HCT color space.
+ * Tone is equivalent to L* in the L*a*b* color space, or L in the LCH color
+ * space.
+ */
+export declare class Contrast {
+    /**
+     * Returns a contrast ratio, which ranges from 1 to 21.
+     *
+     * @param toneA Tone between 0 and 100. Values outside will be clamped.
+     * @param toneB Tone between 0 and 100. Values outside will be clamped.
+     */
+    static ratioOfTones(toneA: number, toneB: number): number;
+    static ratioOfYs(y1: number, y2: number): number;
+    /**
+     * Returns a tone >= tone parameter that ensures ratio parameter.
+     * Return value is between 0 and 100.
+     * Returns -1 if ratio cannot be achieved with tone parameter.
+     *
+     * @param tone Tone return value must contrast with.
+     * Range is 0 to 100. Invalid values will result in -1 being returned.
+     * @param ratio Contrast ratio of return value and tone.
+     * Range is 1 to 21, invalid values have undefined behavior.
+     */
+    static lighter(tone: number, ratio: number): number;
+    /**
+     * Returns a tone <= tone parameter that ensures ratio parameter.
+     * Return value is between 0 and 100.
+     * Returns -1 if ratio cannot be achieved with tone parameter.
+     *
+     * @param tone Tone return value must contrast with.
+     * Range is 0 to 100. Invalid values will result in -1 being returned.
+     * @param ratio Contrast ratio of return value and tone.
+     * Range is 1 to 21, invalid values have undefined behavior.
+     */
+    static darker(tone: number, ratio: number): number;
+    /**
+     * Returns a tone >= tone parameter that ensures ratio parameter.
+     * Return value is between 0 and 100.
+     * Returns 100 if ratio cannot be achieved with tone parameter.
+     *
+     * This method is unsafe because the returned value is guaranteed to be in
+     * bounds for tone, i.e. between 0 and 100. However, that value may not reach
+     * the ratio with tone. For example, there is no color lighter than T100.
+     *
+     * @param tone Tone return value must contrast with.
+     * Range is 0 to 100. Invalid values will result in 100 being returned.
+     * @param ratio Desired contrast ratio of return value and tone parameter.
+     * Range is 1 to 21, invalid values have undefined behavior.
+     */
+    static lighterUnsafe(tone: number, ratio: number): number;
+    /**
+     * Returns a tone >= tone parameter that ensures ratio parameter.
+     * Return value is between 0 and 100.
+     * Returns 100 if ratio cannot be achieved with tone parameter.
+     *
+     * This method is unsafe because the returned value is guaranteed to be in
+     * bounds for tone, i.e. between 0 and 100. However, that value may not reach
+     * the [ratio with [tone]. For example, there is no color darker than T0.
+     *
+     * @param tone Tone return value must contrast with.
+     * Range is 0 to 100. Invalid values will result in 0 being returned.
+     * @param ratio Desired contrast ratio of return value and tone parameter.
+     * Range is 1 to 21, invalid values have undefined behavior.
+     */
+    static darkerUnsafe(tone: number, ratio: number): number;
+}

package/dist/types-ts4.5/utils/hct-color-utils/hct.d.ts

@@ -0,0 +1,137 @@
+/**
+ * Below lines are copied from @material/material-color-utilities.
+ * Do not modify it.
+ */
+/**
+ * A color system built using CAM16 hue and chroma, and L* from
+ * L*a*b*.
+ *
+ * Using L* creates a link between the color system, contrast, and thus
+ * accessibility. Contrast ratio depends on relative luminance, or Y in the XYZ
+ * color space. L*, or perceptual luminance can be calculated from Y.
+ *
+ * Unlike Y, L* is linear to human perception, allowing trivial creation of
+ * accurate color tones.
+ *
+ * Unlike contrast ratio, measuring contrast in L* is linear, and simple to
+ * calculate. A difference of 40 in HCT tone guarantees a contrast ratio >= 3.0,
+ * and a difference of 50 guarantees a contrast ratio >= 4.5.
+ */
+/**
+ * HCT, hue, chroma, and tone. A color system that provides a perceptually
+ * accurate color measurement system that can also accurately render what colors
+ * will appear as in different lighting environments.
+ */
+export declare class Hct {
+    private argb;
+    /**
+     * @param hue 0 <= hue < 360; invalid values are corrected.
+     * @param chroma 0 <= chroma < ?; Informally, colorfulness. The color
+     *     returned may be lower than the requested chroma. Chroma has a different
+     *     maximum for any given hue and tone.
+     * @param tone 0 <= tone <= 100; invalid values are corrected.
+     * @return HCT representation of a color in default viewing conditions.
+     */
+    internalHue: number;
+    internalChroma: number;
+    internalTone: number;
+    static from(hue: number, chroma: number, tone: number): Hct;
+    /**
+     * @param argb ARGB representation of a color.
+     * @return HCT representation of a color in default viewing conditions
+     */
+    static fromInt(argb: number): Hct;
+    toInt(): number;
+    /**
+     * A number, in degrees, representing ex. red, orange, yellow, etc.
+     * Ranges from 0 <= hue < 360.
+     */
+    get hue(): number;
+    /**
+     * @param newHue 0 <= newHue < 360; invalid values are corrected.
+     * Chroma may decrease because chroma has a different maximum for any given
+     * hue and tone.
+     */
+    set hue(newHue: number);
+    get chroma(): number;
+    /**
+     * @param newChroma 0 <= newChroma < ?
+     * Chroma may decrease because chroma has a different maximum for any given
+     * hue and tone.
+     */
+    set chroma(newChroma: number);
+    /**
+     * Lightness. Ranges from 0 to 100.
+     */
+    get tone(): number;
+    /**
+     * @param newTone 0 <= newTone <= 100; invalid valids are corrected.
+     * Chroma may decrease because chroma has a different maximum for any given
+     * hue and tone.
+     */
+    set tone(newTone: number);
+    private constructor();
+    private setInternalState;
+    /**
+     * Translates a color into different [ViewingConditions].
+     *
+     * Colors change appearance. They look different with lights on versus off,
+     * the same color, as in hex code, on white looks different when on black.
+     * This is called color relativity, most famously explicated by Josef Albers
+     * in Interaction of Color.
+     *
+     * In color science, color appearance models can account for this and
+     * calculate the appearance of a color in different settings. HCT is based on
+     * CAM16, a color appearance model, and uses it to make these calculations.
+     *
+     * See [ViewingConditions.make] for parameters affecting color appearance.
+     */
+    inViewingConditions(vc: ViewingConditions): Hct;
+}
+export declare class ViewingConditions {
+    n: number;
+    aw: number;
+    nbb: number;
+    ncb: number;
+    c: number;
+    nc: number;
+    rgbD: number[];
+    fl: number;
+    fLRoot: number;
+    z: number;
+    /**
+     * sRGB-like viewing conditions.
+     */
+    static DEFAULT: ViewingConditions;
+    /**
+     * Create ViewingConditions from a simple, physically relevant, set of
+     * parameters.
+     *
+     * @param whitePoint White point, measured in the XYZ color space.
+     *     default = D65, or sunny day afternoon
+     * @param adaptingLuminance The luminance of the adapting field. Informally,
+     *     how bright it is in the room where the color is viewed. Can be
+     *     calculated from lux by multiplying lux by 0.0586. default = 11.72,
+     *     or 200 lux.
+     * @param backgroundLstar The lightness of the area surrounding the color.
+     *     measured by L* in L*a*b*. default = 50.0
+     * @param surround A general description of the lighting surrounding the
+     *     color. 0 is pitch dark, like watching a movie in a theater. 1.0 is a
+     *     dimly light room, like watching TV at home at night. 2.0 means there
+     *     is no difference between the lighting on the color and around it.
+     *     default = 2.0
+     * @param discountingIlluminant Whether the eye accounts for the tint of the
+     *     ambient lighting, such as knowing an apple is still red in green light.
+     *     default = false, the eye does not perform this process on
+     *       self-luminous objects like displays.
+     */
+    static make(whitePoint?: number[], adaptingLuminance?: number, backgroundLstar?: number, surround?: number, discountingIlluminant?: boolean): ViewingConditions;
+    /**
+     * Parameters are intermediate values of the CAM16 conversion process. Their
+     * names are shorthand for technical color science terminology, this class
+     * would not benefit from documenting them individually. A brief overview
+     * is available in the CAM16 specification, and a complete overview requires
+     * a color science textbook, such as Fairchild's Color Appearance Models.
+     */
+    private constructor();
+}

package/dist/types-ts4.5/utils/hct-color-utils/index.d.ts

@@ -0,0 +1,3 @@
+export { Hct } from './hct';
+export { Contrast } from './contrast';
+export { argbFromRgba, rgbaFromArgb } from './color-utils';

package/dist/types-ts4.5/utils/hct-color-utils/math-utils.d.ts

@@ -0,0 +1,86 @@
+/**
+ * Below lines are copied from @material/material-color-utilities.
+ * Do not modify it.
+ */
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Utility methods for mathematical operations.
+ */
+/**
+ * The signum function.
+ *
+ * @return 1 if num > 0, -1 if num < 0, and 0 if num = 0
+ */
+export declare function signum(num: number): number;
+/**
+ * The linear interpolation function.
+ *
+ * @return start if amount = 0 and stop if amount = 1
+ */
+export declare function lerp(start: number, stop: number, amount: number): number;
+/**
+ * Clamps an integer between two integers.
+ *
+ * @return input when min <= input <= max, and either min or max
+ * otherwise.
+ */
+export declare function clampInt(min: number, max: number, input: number): number;
+/**
+ * Clamps an integer between two floating-point numbers.
+ *
+ * @return input when min <= input <= max, and either min or max
+ * otherwise.
+ */
+export declare function clampDouble(min: number, max: number, input: number): number;
+/**
+ * Sanitizes a degree measure as an integer.
+ *
+ * @return a degree measure between 0 (inclusive) and 360
+ * (exclusive).
+ */
+export declare function sanitizeDegreesInt(degrees: number): number;
+/**
+ * Sanitizes a degree measure as a floating-point number.
+ *
+ * @return a degree measure between 0.0 (inclusive) and 360.0
+ * (exclusive).
+ */
+export declare function sanitizeDegreesDouble(degrees: number): number;
+/**
+ * Sign of direction change needed to travel from one angle to
+ * another.
+ *
+ * For angles that are 180 degrees apart from each other, both
+ * directions have the same travel distance, so either direction is
+ * shortest. The value 1.0 is returned in this case.
+ *
+ * @param from The angle travel starts from, in degrees.
+ * @param to The angle travel ends at, in degrees.
+ * @return -1 if decreasing from leads to the shortest travel
+ * distance, 1 if increasing from leads to the shortest travel
+ * distance.
+ */
+export declare function rotationDirection(from: number, to: number): number;
+/**
+ * Distance of two points on a circle, represented using degrees.
+ */
+export declare function differenceDegrees(a: number, b: number): number;
+/**
+ * Multiplies a 1x3 row vector with a 3x3 matrix.
+ */
+export declare function matrixMultiply(row: number[], matrix: number[][]): number[];

package/package.json

@@ -1,52 +1,31 @@
 {
   "name": "@atlaskit/tokens",
-  "version": "1.11.3",
-  "author": "Atlassian Pty Ltd",
+  "version": "1.12.0",
   "description": "Design tokens are the single source of truth to name and store design decisions.",
-  "license": "Apache-2.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
-  "atlassian": {
-    "team": "Design System Team",
-    "releaseModel": "continuous",
-    "productPushConsumption": [
-      "jira"
-    ],
-    "website": {
-      "name": "Design tokens",
-      "category": "Libraries"
-    }
-  },
   "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
+  "author": "Atlassian Pty Ltd",
+  "license": "Apache-2.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
-  "typesVersions": {
-    ">=4.5 <4.9": {
-      "*": [
-        "dist/types-ts4.5/*",
-        "dist/types-ts4.5/index.d.ts"
-      ]
-    }
-  },
   "sideEffects": [
     "**/*.css"
   ],
   "atlaskit:src": "src/index.tsx",
-  "af:exports": {
-    ".": "./src/index.tsx",
-    "./figma/atlassian-light.json": "./figma/atlassian-light.json",
-    "./figma/atlassian-dark.json": "./figma/atlassian-dark.json",
-    "./palettes-raw": "./src/entry-points/palettes-raw.tsx",
-    "./tokens-raw": "./src/entry-points/tokens-raw.tsx",
-    "./token-ids": "./src/entry-points/token-ids.tsx",
-    "./token-names": "./src/entry-points/token-names.tsx",
-    "./token-order": "./src/entry-points/token-order.tsx",
-    "./token-default-values": "./src/entry-points/token-default-values.tsx",
-    "./rename-mapping": "./src/entry-points/rename-mapping.tsx",
-    "./babel-plugin": "./src/entry-points/babel-plugin.tsx"
+  "atlassian": {
+    "team": "Design System Team",
+    "productPushConsumption": [
+      "jira"
+    ],
+    "releaseModel": "continuous",
+    "website": {
+      "name": "Design tokens",
+      "category": "Libraries"
+    }
   },
   "scripts": {
     "ak-postbuild": "(cd $(npx repo-root) && yarn build @atlassian/codegen -d cjs,esm,es2019) && yarn workspace @atlaskit/tokens codegen-tokens && yarn workspace @atlaskit/tokens check-clean-git",
@@ -66,6 +45,7 @@
   },
   "devDependencies": {
     "@af/accessibility-testing": "*",
+    "@af/visual-regression": "*",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@atlassian/codegen": "^0.1.0",
@@ -77,9 +57,7 @@
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.4.3",
-    "@types/chroma-js": "^2.4.0",
     "@types/chrome": "^0.0.171",
-    "chroma-js": "^2.4.2",
     "color-blend": "^4.0.0",
     "copy-webpack-plugin": "^6.4.0",
     "echarts": "^5.4.1",
@@ -110,6 +88,27 @@
       ]
     }
   },
+  "typesVersions": {
+    ">=4.5 <4.9": {
+      "*": [
+        "dist/types-ts4.5/*",
+        "dist/types-ts4.5/index.d.ts"
+      ]
+    }
+  },
+  "af:exports": {
+    ".": "./src/index.tsx",
+    "./figma/atlassian-light.json": "./figma/atlassian-light.json",
+    "./figma/atlassian-dark.json": "./figma/atlassian-dark.json",
+    "./palettes-raw": "./src/entry-points/palettes-raw.tsx",
+    "./tokens-raw": "./src/entry-points/tokens-raw.tsx",
+    "./token-ids": "./src/entry-points/token-ids.tsx",
+    "./token-names": "./src/entry-points/token-names.tsx",
+    "./token-order": "./src/entry-points/token-order.tsx",
+    "./token-default-values": "./src/entry-points/token-default-values.tsx",
+    "./rename-mapping": "./src/entry-points/rename-mapping.tsx",
+    "./babel-plugin": "./src/entry-points/babel-plugin.tsx"
+  },
   "platform-feature-flags": {
     "platform.design-system-team.border-checkbox_nyoiu": {
       "type": "boolean"

package/report.api.md

@@ -535,6 +535,9 @@ const baseSpacingTokens: {
   };
 };
 
+// @public (undocumented)
+type CSSColor = HEX;
+
 // @public (undocumented)
 export type CSSToken = CSSTokenMap[keyof CSSTokenMap];
 
@@ -887,6 +890,12 @@ type CSSTokenMap = {
   'font.lineHeight.600': 'var(--ds-font-lineHeight-600)';
 };
 
+// @public (undocumented)
+export interface CustomBrandSchema {
+  // (undocumented)
+  brandColor: CSSColor;
+}
+
 // @public (undocumented)
 type DataColorModes = Exclude<ThemeColorModes, 'auto'>;
 
@@ -960,6 +969,7 @@ export const getThemeHtmlAttrs: ({
   shape,
   spacing,
   typography,
+  UNSAFE_themeOptions,
 }?: Partial<ThemeState>) => Record<string, string>;
 
 // @public
@@ -988,6 +998,9 @@ export type Groups =
   | 'spacing'
   | 'typography';
 
+// @public (undocumented)
+type HEX = `#${string}`;
+
 // @public
 type InternalTokenIds =
   | 'border.radius.050'
@@ -1357,7 +1370,15 @@ type Replacement = InternalTokenIds | InternalTokenIds[];
 
 // @public
 export const setGlobalTheme: (
-  { colorMode, dark, light, shape, spacing, typography }?: Partial<ThemeState>,
+  {
+    colorMode,
+    dark,
+    light,
+    shape,
+    spacing,
+    typography,
+    UNSAFE_themeOptions,
+  }?: Partial<ThemeState>,
   themeLoader?:
     | ((id: ThemeIdsWithOverrides) => Promise<void> | void)
     | undefined,
@@ -1511,6 +1532,8 @@ export interface ThemeState {
   spacing?: Extract<ThemeIds, 'spacing'>;
   // (undocumented)
   typography?: Extract<ThemeIds, 'typography'>;
+  // (undocumented)
+  UNSAFE_themeOptions?: CustomBrandSchema;
 }
 
 // @public