@atlaskit/tokens 1.11.3 → 1.13.0

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/figma/atlassian-dark.json

@@ -1279,6 +1279,33 @@
       },
       "value": "#CCE0FF"
     },
+    "Dark/color.background.brand.subtlest": {
+      "attributes": {
+        "group": "paint",
+        "state": "active",
+        "introduced": "1.13.0",
+        "description": "Use for the background of elements used to reinforce our brand, but with less emphasis."
+      },
+      "value": "#092957"
+    },
+    "Dark/color.background.brand.subtlest.hovered": {
+      "attributes": {
+        "group": "paint",
+        "state": "active",
+        "introduced": "1.13.0",
+        "description": "Hovered state of color.background.brand.subtlest."
+      },
+      "value": "#09326C"
+    },
+    "Dark/color.background.brand.subtlest.pressed": {
+      "attributes": {
+        "group": "paint",
+        "state": "active",
+        "introduced": "1.13.0",
+        "description": "Pressed state of color.background.brand.subtlest"
+      },
+      "value": "#0055CC"
+    },
     "Dark/color.background.brand.bold": {
       "attributes": {
         "group": "paint",
@@ -1293,7 +1320,7 @@
         "group": "paint",
         "state": "active",
         "introduced": "0.6.0",
-        "description": "Hovered state of color.background.brand.bold"
+        "description": "Hovered state of color.background.brand.bold."
       },
       "value": "#85B8FF"
     },
@@ -1302,10 +1329,37 @@
         "group": "paint",
         "state": "active",
         "introduced": "0.6.0",
-        "description": "Pressed state of color.background.brand.bold"
+        "description": "Pressed state of color.background.brand.bold."
       },
       "value": "#CCE0FF"
     },
+    "Dark/color.background.brand.boldest": {
+      "attributes": {
+        "group": "paint",
+        "state": "active",
+        "introduced": "1.13.0",
+        "description": "Use for the background of elements used to reinforce our brand, that need to stand out a lot."
+      },
+      "value": "#E9F2FF"
+    },
+    "Dark/color.background.brand.boldest.hovered": {
+      "attributes": {
+        "group": "paint",
+        "state": "active",
+        "introduced": "1.13.0",
+        "description": "Hovered state of color.background.brand.boldest."
+      },
+      "value": "#CCE0FF"
+    },
+    "Dark/color.background.brand.boldest.pressed": {
+      "attributes": {
+        "group": "paint",
+        "state": "active",
+        "introduced": "1.13.0",
+        "description": "Pressed state of color.background.brand.boldest."
+      },
+      "value": "#85B8FF"
+    },
     "Dark/color.background.danger": {
       "attributes": {
         "group": "paint",

package/figma/atlassian-legacy-dark.json

@@ -1279,6 +1279,33 @@
       },
       "value": "#0747A6"
     },
+    "Legacy dark/color.background.brand.subtlest": {
+      "attributes": {
+        "group": "paint",
+        "state": "active",
+        "introduced": "1.13.0",
+        "description": "Use for the background of elements used to reinforce our brand, but with less emphasis."
+      },
+      "value": "#0747A6"
+    },
+    "Legacy dark/color.background.brand.subtlest.hovered": {
+      "attributes": {
+        "group": "paint",
+        "state": "active",
+        "introduced": "1.13.0",
+        "description": "Hovered state of color.background.brand.subtlest."
+      },
+      "value": "#0052CC"
+    },
+    "Legacy dark/color.background.brand.subtlest.pressed": {
+      "attributes": {
+        "group": "paint",
+        "state": "active",
+        "introduced": "1.13.0",
+        "description": "Pressed state of color.background.brand.subtlest"
+      },
+      "value": "#0747A6"
+    },
     "Legacy dark/color.background.brand.bold": {
       "attributes": {
         "group": "paint",
@@ -1293,7 +1320,7 @@
         "group": "paint",
         "state": "active",
         "introduced": "0.6.0",
-        "description": "Hovered state of color.background.brand.bold"
+        "description": "Hovered state of color.background.brand.bold."
       },
       "value": "#0065FF"
     },
@@ -1302,10 +1329,37 @@
         "group": "paint",
         "state": "active",
         "introduced": "0.6.0",
-        "description": "Pressed state of color.background.brand.bold"
+        "description": "Pressed state of color.background.brand.bold."
       },
       "value": "#0747A6"
     },
+    "Legacy dark/color.background.brand.boldest": {
+      "attributes": {
+        "group": "paint",
+        "state": "active",
+        "introduced": "1.13.0",
+        "description": "Use for the background of elements used to reinforce our brand, that need to stand out a lot."
+      },
+      "value": "#B3D4FF"
+    },
+    "Legacy dark/color.background.brand.boldest.hovered": {
+      "attributes": {
+        "group": "paint",
+        "state": "active",
+        "introduced": "1.13.0",
+        "description": "Hovered state of color.background.brand.boldest."
+      },
+      "value": "#DEEBFF"
+    },
+    "Legacy dark/color.background.brand.boldest.pressed": {
+      "attributes": {
+        "group": "paint",
+        "state": "active",
+        "introduced": "1.13.0",
+        "description": "Pressed state of color.background.brand.boldest."
+      },
+      "value": "#4C9AFF"
+    },
     "Legacy dark/color.background.danger": {
       "attributes": {
         "group": "paint",

package/figma/atlassian-legacy-light.json

@@ -1279,6 +1279,33 @@
       },
       "value": "#0052CC"
     },
+    "Legacy light/color.background.brand.subtlest": {
+      "attributes": {
+        "group": "paint",
+        "state": "active",
+        "introduced": "1.13.0",
+        "description": "Use for the background of elements used to reinforce our brand, but with less emphasis."
+      },
+      "value": "#B3D4FF"
+    },
+    "Legacy light/color.background.brand.subtlest.hovered": {
+      "attributes": {
+        "group": "paint",
+        "state": "active",
+        "introduced": "1.13.0",
+        "description": "Hovered state of color.background.brand.subtlest."
+      },
+      "value": "#DEEBFF"
+    },
+    "Legacy light/color.background.brand.subtlest.pressed": {
+      "attributes": {
+        "group": "paint",
+        "state": "active",
+        "introduced": "1.13.0",
+        "description": "Pressed state of color.background.brand.subtlest"
+      },
+      "value": "#4C9AFF"
+    },
     "Legacy light/color.background.brand.bold": {
       "attributes": {
         "group": "paint",
@@ -1293,7 +1320,7 @@
         "group": "paint",
         "state": "active",
         "introduced": "0.6.0",
-        "description": "Hovered state of color.background.brand.bold"
+        "description": "Hovered state of color.background.brand.bold."
       },
       "value": "#0065FF"
     },
@@ -1302,7 +1329,34 @@
         "group": "paint",
         "state": "active",
         "introduced": "0.6.0",
-        "description": "Pressed state of color.background.brand.bold"
+        "description": "Pressed state of color.background.brand.bold."
+      },
+      "value": "#0747A6"
+    },
+    "Legacy light/color.background.brand.boldest": {
+      "attributes": {
+        "group": "paint",
+        "state": "active",
+        "introduced": "1.13.0",
+        "description": "Use for the background of elements used to reinforce our brand, that need to stand out a lot."
+      },
+      "value": "#0747A6"
+    },
+    "Legacy light/color.background.brand.boldest.hovered": {
+      "attributes": {
+        "group": "paint",
+        "state": "active",
+        "introduced": "1.13.0",
+        "description": "Hovered state of color.background.brand.boldest."
+      },
+      "value": "#0052CC"
+    },
+    "Legacy light/color.background.brand.boldest.pressed": {
+      "attributes": {
+        "group": "paint",
+        "state": "active",
+        "introduced": "1.13.0",
+        "description": "Pressed state of color.background.brand.boldest."
       },
       "value": "#0747A6"
     },

package/figma/atlassian-light.json

@@ -1279,6 +1279,33 @@
       },
       "value": "#09326C"
     },
+    "Light/color.background.brand.subtlest": {
+      "attributes": {
+        "group": "paint",
+        "state": "active",
+        "introduced": "1.13.0",
+        "description": "Use for the background of elements used to reinforce our brand, but with less emphasis."
+      },
+      "value": "#E9F2FF"
+    },
+    "Light/color.background.brand.subtlest.hovered": {
+      "attributes": {
+        "group": "paint",
+        "state": "active",
+        "introduced": "1.13.0",
+        "description": "Hovered state of color.background.brand.subtlest."
+      },
+      "value": "#CCE0FF"
+    },
+    "Light/color.background.brand.subtlest.pressed": {
+      "attributes": {
+        "group": "paint",
+        "state": "active",
+        "introduced": "1.13.0",
+        "description": "Pressed state of color.background.brand.subtlest"
+      },
+      "value": "#85B8FF"
+    },
     "Light/color.background.brand.bold": {
       "attributes": {
         "group": "paint",
@@ -1293,7 +1320,7 @@
         "group": "paint",
         "state": "active",
         "introduced": "0.6.0",
-        "description": "Hovered state of color.background.brand.bold"
+        "description": "Hovered state of color.background.brand.bold."
       },
       "value": "#0055CC"
     },
@@ -1302,10 +1329,37 @@
         "group": "paint",
         "state": "active",
         "introduced": "0.6.0",
-        "description": "Pressed state of color.background.brand.bold"
+        "description": "Pressed state of color.background.brand.bold."
       },
       "value": "#09326C"
     },
+    "Light/color.background.brand.boldest": {
+      "attributes": {
+        "group": "paint",
+        "state": "active",
+        "introduced": "1.13.0",
+        "description": "Use for the background of elements used to reinforce our brand, that need to stand out a lot."
+      },
+      "value": "#092957"
+    },
+    "Light/color.background.brand.boldest.hovered": {
+      "attributes": {
+        "group": "paint",
+        "state": "active",
+        "introduced": "1.13.0",
+        "description": "Hovered state of color.background.brand.boldest."
+      },
+      "value": "#09326C"
+    },
+    "Light/color.background.brand.boldest.pressed": {
+      "attributes": {
+        "group": "paint",
+        "state": "active",
+        "introduced": "1.13.0",
+        "description": "Pressed state of color.background.brand.boldest."
+      },
+      "value": "#0055CC"
+    },
     "Light/color.background.danger": {
       "attributes": {
         "group": "paint",

package/package.json

@@ -1,57 +1,36 @@
 {
   "name": "@atlaskit/tokens",
-  "version": "1.11.3",
-  "author": "Atlassian Pty Ltd",
+  "version": "1.13.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",
     "check-clean-git": "git diff --exit-code -- packages/design-system/tokens/ || (echo 'tokens are out of date, run yarn build tokens' && false)",
-    "codegen-tokens": "ts-node --project $(npx repo-root)/tsconfig.node.json ./scripts/style-dictionary/build"
+    "codegen-tokens": "ts-node --project $(npx repo-root)/tsconfig.node.json ./scripts/style-dictionary/build && cd $(npx repo-root)/packages/design-system/primitives && yarn codegen-styles"
   },
   "dependencies": {
     "@atlaskit/ds-lib": "^2.2.0",
@@ -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"