@atlaskit/tokens 1.11.2 → 1.12.0

package/dist/esm/utils/hct-color-utils/index.js

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

package/dist/esm/utils/hct-color-utils/math-utils.js

@@ -0,0 +1,145 @@
+/**
+ * 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.
+ */
+
+// This file is automatically generated. Do not modify it.
+
+/**
+ * Utility methods for mathematical operations.
+ */
+
+/**
+ * The signum function.
+ *
+ * @return 1 if num > 0, -1 if num < 0, and 0 if num = 0
+ */
+export function signum(num) {
+  if (num < 0) {
+    return -1;
+  } else if (num === 0) {
+    return 0;
+  } else {
+    return 1;
+  }
+}
+
+/**
+ * The linear interpolation function.
+ *
+ * @return start if amount = 0 and stop if amount = 1
+ */
+export function lerp(start, stop, amount) {
+  return (1.0 - amount) * start + amount * stop;
+}
+
+/**
+ * Clamps an integer between two integers.
+ *
+ * @return input when min <= input <= max, and either min or max
+ * otherwise.
+ */
+export function clampInt(min, max, input) {
+  if (input < min) {
+    return min;
+  } else if (input > max) {
+    return max;
+  }
+  return input;
+}
+
+/**
+ * Clamps an integer between two floating-point numbers.
+ *
+ * @return input when min <= input <= max, and either min or max
+ * otherwise.
+ */
+export function clampDouble(min, max, input) {
+  if (input < min) {
+    return min;
+  } else if (input > max) {
+    return max;
+  }
+  return input;
+}
+
+/**
+ * Sanitizes a degree measure as an integer.
+ *
+ * @return a degree measure between 0 (inclusive) and 360
+ * (exclusive).
+ */
+export function sanitizeDegreesInt(degrees) {
+  degrees = degrees % 360;
+  if (degrees < 0) {
+    degrees = degrees + 360;
+  }
+  return degrees;
+}
+
+/**
+ * Sanitizes a degree measure as a floating-point number.
+ *
+ * @return a degree measure between 0.0 (inclusive) and 360.0
+ * (exclusive).
+ */
+export function sanitizeDegreesDouble(degrees) {
+  degrees = degrees % 360.0;
+  if (degrees < 0) {
+    degrees = degrees + 360.0;
+  }
+  return degrees;
+}
+
+/**
+ * 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 function rotationDirection(from, to) {
+  var increasingDifference = sanitizeDegreesDouble(to - from);
+  return increasingDifference <= 180.0 ? 1.0 : -1.0;
+}
+
+/**
+ * Distance of two points on a circle, represented using degrees.
+ */
+export function differenceDegrees(a, b) {
+  return 180.0 - Math.abs(Math.abs(a - b) - 180.0);
+}
+
+/**
+ * Multiplies a 1x3 row vector with a 3x3 matrix.
+ */
+export function matrixMultiply(row, matrix) {
+  var a = row[0] * matrix[0][0] + row[1] * matrix[0][1] + row[2] * matrix[0][2];
+  var b = row[0] * matrix[1][0] + row[1] * matrix[1][1] + row[2] * matrix[1][2];
+  var c = row[0] * matrix[2][0] + row[1] * matrix[2][1] + row[2] * matrix[2][2];
+  return [a, b, c];
+}

package/dist/esm/utils/theme-loading.js

@@ -1,14 +1,14 @@
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import themeImportMap from '../artifacts/theme-import-map';
-import { THEME_DATA_ATTRIBUTE } from '../constants';
+import { CUSTOM_THEME_ATTRIBUTE, THEME_DATA_ATTRIBUTE } from '../constants';
 export var loadAndAppendThemeCss = /*#__PURE__*/function () {
   var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(themeId) {
     var themeCss, style;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
-          if (!document.head.querySelector("style[".concat(THEME_DATA_ATTRIBUTE, "=\"").concat(themeId, "\"]"))) {
+          if (!document.head.querySelector("style[".concat(THEME_DATA_ATTRIBUTE, "=\"").concat(themeId, "\"]:not([").concat(CUSTOM_THEME_ATTRIBUTE, "])"))) {
             _context.next = 2;
             break;
           }

package/dist/esm/utils/theme-state-transformer.js

@@ -60,6 +60,6 @@ export var themeObjectToString = function themeObjectToString(themeState) {
     var _ref4 = _slicedToArray(_ref3, 2),
       kind = _ref4[0],
       id = _ref4[1];
-    return (kind === 'colorMode' || isThemeKind(kind)) && (isThemeIds(id) || isColorMode(id)) ? themeString + "".concat(themeString ? ' ' : '') + "".concat(kind, ":").concat(id) : themeString;
+    return (kind === 'colorMode' || isThemeKind(kind)) && typeof id === 'string' && (isThemeIds(id) || isColorMode(id)) ? themeString + "".concat(themeString ? ' ' : '') + "".concat(kind, ":").concat(id) : themeString;
   }, '');
 };

package/dist/esm/version.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/tokens",
-	"version": "1.11.2",
+	"version": "1.12.0",
 	"sideEffects": [
 		"**/*.css"
 	]

package/dist/types/artifacts/atlassian-dark-token-value-for-contrast-check.d.ts

@@ -0,0 +1,17 @@
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ *
+ * Token names mapped to their values, used for contrast checking when generating custom themes
+ *
+ * @codegen <<SignedSource::1ddd5cd744975e8df5a191332ec8a42c>>
+ * @codegenCommand yarn build tokens
+ */
+declare const tokenValues: {
+    readonly 'color.text.brand': "#579DFF";
+    readonly 'elevation.surface.overlay': "#282E33";
+    readonly 'color.text.selected': "#579DFF";
+    readonly 'color.background.selected': "#092957";
+    readonly 'color.border.brand': "#579DFF";
+    readonly 'color.chart.brand': "#388BFF";
+};
+export default tokenValues;

package/dist/types/artifacts/atlassian-light-token-value-for-contrast-check.d.ts

@@ -0,0 +1,17 @@
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ *
+ * Token names mapped to their values, used for contrast checking when generating custom themes
+ *
+ * @codegen <<SignedSource::b59877585fad151840dbf6c212c56e34>>
+ * @codegenCommand yarn build tokens
+ */
+declare const tokenValues: {
+    readonly 'color.text.brand': "#0C66E4";
+    readonly 'elevation.surface.sunken': "#F7F8F9";
+    readonly 'color.text.selected': "#0C66E4";
+    readonly 'color.background.selected': "#E9F2FF";
+    readonly 'color.border.brand': "#0C66E4";
+    readonly 'color.chart.brand': "#1D7AFC";
+};
+export default tokenValues;

package/dist/types/artifacts/themes/atlassian-dark-new-input-border.d.ts

@@ -1,7 +1,7 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::b255ff03ae4f781bb3016003a111bed0>>
+ * @codegen <<SignedSource::cadad94754b78a066c340ab42eca9721>>
  * @codegenCommand yarn build tokens
  */
-declare const _default: "\nhtml[data-color-mode=\"light\"][data-theme~=\"light:dark\"],\nhtml[data-color-mode=\"dark\"][data-theme~=\"dark:dark\"] {\n  color-scheme: dark;\n  --ds-border-input: #596773;\n}\n";
+declare const _default: "\nhtml[data-color-mode=\"light\"][data-theme~=\"light:dark\"],\nhtml[data-color-mode=\"dark\"][data-theme~=\"dark:dark\"] {\n  color-scheme: dark;\n  --ds-border-input: #738496;\n}\n";
 export default _default;

package/dist/types/artifacts/tokens-raw/atlassian-dark-new-input-border.d.ts

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::2c7e6a36e75ad8b32981cc4bbaa378db>>
+ * @codegen <<SignedSource::a87638614efbe4415e8ffd370dd4ce76>>
  * @codegenCommand yarn build tokens
  */
 declare const tokens: {

package/dist/types/constants.d.ts

@@ -1,5 +1,6 @@
 export declare const THEME_DATA_ATTRIBUTE = "data-theme";
 export declare const COLOR_MODE_ATTRIBUTE = "data-color-mode";
+export declare const CUSTOM_THEME_ATTRIBUTE = "data-custom-theme";
 export declare const DEFAULT_THEME = "light";
 export declare const CSS_PREFIX = "ds";
 export declare const CSS_VAR_FULL: string[];

package/dist/types/custom-theme.d.ts

@@ -0,0 +1,30 @@
+import { ThemeState, ThemeStyles } from './set-global-theme';
+export declare const CUSTOM_STYLE_ELEMENTS_SIZE_THRESHOLD = 10;
+type HEX = `#${string}`;
+export type CSSColor = HEX;
+export interface CustomBrandSchema {
+    brandColor: CSSColor;
+}
+/**
+ *
+ * @param themeSchema The schema of available themes
+ * @returns a string with the CSS for the custom theme
+ */
+/**
+ * Takes a color mode and custom branding options, and returns an array of objects for use in applying custom styles to the document head.
+ * Only supplies the color themes necessary for initial render, based on the current themeState. I.e. if in light mode, dark mode themes are not returned.
+ *
+ * @param {Object<string, string>} themeState The themes and color mode that should be applied.
+ * @param {string} themeState.colorMode Determines which color theme is applied
+ * @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
+ *
+ * @returns A Promise of an object array, containing theme IDs, data-attributes to attach to the theme, and the theme CSS.
+ * If an error is encountered while loading themes, the themes array will be empty.
+ */
+export declare function getCustomThemeStyles(themeState: Partial<ThemeState> & {
+    UNSAFE_themeOptions: CustomBrandSchema;
+}): Promise<ThemeStyles[]>;
+export declare function loadAndAppendCustomThemeCss(themeState: Partial<ThemeState> & {
+    UNSAFE_themeOptions: CustomBrandSchema;
+}): Promise<void>;
+export {};

package/dist/types/index.d.ts

@@ -6,6 +6,7 @@ export type { CSSToken } from './artifacts/token-names';
 export type { ActiveTokens } from './artifacts/types';
 export type { ThemeColorModes, Themes, ThemeIds } from './theme-config';
 export type { Groups, OpacityToken, PaintToken, RawToken, ShadowToken, SpacingToken, ShapeToken, } from './types';
+export type { CustomBrandSchema } from './custom-theme';
 export { default as themeConfig } from './theme-config';
 export { useThemeObserver } from './use-theme-observer';
 export { ThemeMutationObserver } from './theme-mutation-observer';

package/dist/types/set-global-theme.d.ts

@@ -1,4 +1,5 @@
 import { UnbindFn } from 'bind-event-listener';
+import { CustomBrandSchema } from './custom-theme';
 import { ThemeColorModes, ThemeIds, ThemeIdsWithOverrides } from './theme-config';
 export interface ThemeState {
     light: Extract<ThemeIds, 'light' | 'dark' | 'legacy-dark' | 'legacy-light'>;
@@ -7,10 +8,12 @@ export interface ThemeState {
     shape?: Extract<ThemeIds, 'shape'>;
     spacing?: Extract<ThemeIds, 'spacing'>;
     typography?: Extract<ThemeIds, 'typography'>;
+    UNSAFE_themeOptions?: CustomBrandSchema;
 }
 export interface ActiveThemeState extends ThemeState {
     colorMode: Exclude<ThemeColorModes, 'auto'>;
 }
+export declare const themeStateDefaults: ThemeState;
 /**
  * Sets the theme globally at runtime. This updates the `data-theme` and `data-color-mode` attributes on your page's <html> tag.
  *
@@ -21,6 +24,7 @@ export interface ActiveThemeState extends ThemeState {
  * @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.
@@ -30,7 +34,7 @@ export interface ActiveThemeState extends ThemeState {
  * setGlobalTheme({colorMode: 'auto', light: 'light', dark: 'dark', spacing: 'spacing'});
  * ```
  */
-declare const setGlobalTheme: ({ colorMode, dark, light, shape, spacing, typography, }?: Partial<ThemeState>, themeLoader?: ((id: ThemeIdsWithOverrides) => void | Promise<void>) | undefined) => Promise<UnbindFn>;
+declare const setGlobalTheme: ({ colorMode, dark, light, shape, spacing, typography, UNSAFE_themeOptions, }?: Partial<ThemeState>, themeLoader?: ((id: ThemeIdsWithOverrides) => void | Promise<void>) | undefined) => Promise<UnbindFn>;
 export interface ThemeStyles {
     id: ThemeIdsWithOverrides;
     attrs: Record<string, string>;
@@ -47,9 +51,10 @@ export interface ThemeStyles {
  * @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
  *
  * @returns A Promise of an object array, containing theme IDs, data-attributes to attach to the theme, and the theme CSS.
- * If an error is encountered while loading themes, the themes arrav will be emptv.
+ * If an error is encountered while loading themes, the themes array will be empty.
  */
 export declare const getThemeStyles: (preferences?: Partial<ThemeState> | 'all') => Promise<ThemeStyles[]>;
 /**
@@ -62,10 +67,11 @@ export declare const getThemeStyles: (preferences?: Partial<ThemeState> | 'all')
  * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
  * @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
  *
  * @returns {Object} Object of HTML attributes to be applied to the document root
  */
-export declare const getThemeHtmlAttrs: ({ colorMode, dark, light, shape, spacing, typography, }?: Partial<ThemeState>) => Record<string, string>;
+export declare const getThemeHtmlAttrs: ({ colorMode, dark, light, shape, spacing, typography, UNSAFE_themeOptions, }?: Partial<ThemeState>) => Record<string, string>;
 /**
  * Provides a script that, when executed before paint, sets the `data-color-mode` attribute based on the current system theme,
  * to enable SSR support for automatic theme switching, avoid a flash of un-themed content on first paint.

package/dist/types/tokens/atlassian-dark/utility/utility.d.ts

@@ -1,5 +1,5 @@
 import type { UtilTokenSchema, ValueSchema } from '../../../types';
 declare const _default: {
-    utility: ValueSchema<UtilTokenSchema<"Lime100" | "Lime200" | "Lime300" | "Lime400" | "Lime500" | "Lime600" | "Lime700" | "Lime800" | "Lime900" | "Lime1000" | "Red100" | "Red200" | "Red300" | "Red400" | "Red500" | "Red600" | "Red700" | "Red800" | "Red900" | "Red1000" | "Orange100" | "Orange200" | "Orange300" | "Orange400" | "Orange500" | "Orange600" | "Orange700" | "Orange800" | "Orange900" | "Orange1000" | "Yellow100" | "Yellow200" | "Yellow300" | "Yellow400" | "Yellow500" | "Yellow600" | "Yellow700" | "Yellow800" | "Yellow900" | "Yellow1000" | "Green100" | "Green200" | "Green300" | "Green400" | "Green500" | "Green600" | "Green700" | "Green800" | "Green900" | "Green1000" | "Teal100" | "Teal200" | "Teal300" | "Teal400" | "Teal500" | "Teal600" | "Teal700" | "Teal800" | "Teal900" | "Teal1000" | "Blue100" | "Blue200" | "Blue300" | "Blue400" | "Blue500" | "Blue600" | "Blue700" | "Blue800" | "Blue900" | "Blue1000" | "Purple100" | "Purple200" | "Purple300" | "Purple400" | "Purple500" | "Purple600" | "Purple700" | "Purple800" | "Purple900" | "Purple1000" | "Magenta100" | "Magenta200" | "Magenta300" | "Magenta400" | "Magenta500" | "Magenta600" | "Magenta700" | "Magenta800" | "Magenta900" | "Magenta1000" | "Neutral0" | "Neutral100" | "Neutral200" | "Neutral300" | "Neutral400" | "Neutral500" | "Neutral600" | "Neutral700" | "Neutral800" | "Neutral900" | "Neutral1000" | "Neutral1100" | "Neutral100A" | "Neutral200A" | "Neutral300A" | "Neutral400A" | "Neutral500A" | "DarkNeutral-100" | "DarkNeutral0" | "DarkNeutral100" | "DarkNeutral200" | "DarkNeutral250" | "DarkNeutral300" | "DarkNeutral350" | "DarkNeutral400" | "DarkNeutral500" | "DarkNeutral600" | "DarkNeutral700" | "DarkNeutral800" | "DarkNeutral900" | "DarkNeutral1000" | "DarkNeutral1100" | "DarkNeutral-100A" | "DarkNeutral100A" | "DarkNeutral200A" | "DarkNeutral250A" | "DarkNeutral300A" | "DarkNeutral350A" | "DarkNeutral400A" | "DarkNeutral500A">>;
+    utility: ValueSchema<UtilTokenSchema<"DarkNeutral900" | "Lime300" | "Lime200" | "Red300" | "Red200" | "Orange300" | "Orange200" | "Yellow300" | "Yellow200" | "Green300" | "Green200" | "Teal300" | "Teal200" | "Blue300" | "Blue200" | "Purple300" | "Purple200" | "Magenta300" | "Magenta200" | "DarkNeutral800" | "DarkNeutral1100" | "DarkNeutral400A" | "DarkNeutral100" | "Blue400" | "DarkNeutral700" | "Lime500" | "Red500" | "Orange500" | "Yellow500" | "Green500" | "Teal500" | "Blue500" | "Purple500" | "Magenta500" | "DarkNeutral600" | "DarkNeutral300A" | "DarkNeutral200A" | "DarkNeutral0" | "Lime1000" | "Lime900" | "Lime800" | "Lime400" | "Red1000" | "Red900" | "Red800" | "Red400" | "Orange1000" | "Orange900" | "Orange800" | "Orange400" | "Yellow1000" | "Yellow900" | "Yellow800" | "Yellow400" | "Green1000" | "Green900" | "Green800" | "Green400" | "Teal1000" | "Teal900" | "Teal800" | "Teal400" | "Blue1000" | "Blue900" | "Blue800" | "Purple1000" | "Purple900" | "Purple800" | "Purple400" | "Magenta1000" | "Magenta900" | "Magenta800" | "Magenta400" | "DarkNeutral300" | "DarkNeutral400" | "DarkNeutral500" | "DarkNeutral100A" | "DarkNeutral200" | "DarkNeutral250" | "DarkNeutral1000" | "Teal600" | "Orange600" | "Blue100" | "Purple600" | "Magenta100" | "Red600" | "Blue600" | "Magenta600" | "DarkNeutral350" | "DarkNeutral-100A" | "Lime100" | "Lime600" | "Lime700" | "Red100" | "Red700" | "Orange100" | "Orange700" | "Yellow100" | "Yellow600" | "Yellow700" | "Green100" | "Green600" | "Green700" | "Teal100" | "Teal700" | "Blue700" | "Purple100" | "Purple700" | "Magenta700" | "Neutral0" | "Neutral100" | "Neutral200" | "Neutral300" | "Neutral400" | "Neutral500" | "Neutral600" | "Neutral700" | "Neutral800" | "Neutral900" | "Neutral1000" | "Neutral1100" | "Neutral100A" | "Neutral200A" | "Neutral300A" | "Neutral400A" | "Neutral500A" | "DarkNeutral-100" | "DarkNeutral250A" | "DarkNeutral350A" | "DarkNeutral500A">>;
 };
 export default _default;

package/dist/types/tokens/atlassian-light/utility/utility.d.ts

@@ -1,5 +1,5 @@
 import type { UtilTokenSchema, ValueSchema } from '../../../types';
 declare const _default: {
-    utility: ValueSchema<UtilTokenSchema<"Lime100" | "Lime200" | "Lime300" | "Lime400" | "Lime500" | "Lime600" | "Lime700" | "Lime800" | "Lime900" | "Lime1000" | "Red100" | "Red200" | "Red300" | "Red400" | "Red500" | "Red600" | "Red700" | "Red800" | "Red900" | "Red1000" | "Orange100" | "Orange200" | "Orange300" | "Orange400" | "Orange500" | "Orange600" | "Orange700" | "Orange800" | "Orange900" | "Orange1000" | "Yellow100" | "Yellow200" | "Yellow300" | "Yellow400" | "Yellow500" | "Yellow600" | "Yellow700" | "Yellow800" | "Yellow900" | "Yellow1000" | "Green100" | "Green200" | "Green300" | "Green400" | "Green500" | "Green600" | "Green700" | "Green800" | "Green900" | "Green1000" | "Teal100" | "Teal200" | "Teal300" | "Teal400" | "Teal500" | "Teal600" | "Teal700" | "Teal800" | "Teal900" | "Teal1000" | "Blue100" | "Blue200" | "Blue300" | "Blue400" | "Blue500" | "Blue600" | "Blue700" | "Blue800" | "Blue900" | "Blue1000" | "Purple100" | "Purple200" | "Purple300" | "Purple400" | "Purple500" | "Purple600" | "Purple700" | "Purple800" | "Purple900" | "Purple1000" | "Magenta100" | "Magenta200" | "Magenta300" | "Magenta400" | "Magenta500" | "Magenta600" | "Magenta700" | "Magenta800" | "Magenta900" | "Magenta1000" | "Neutral0" | "Neutral100" | "Neutral200" | "Neutral300" | "Neutral400" | "Neutral500" | "Neutral600" | "Neutral700" | "Neutral800" | "Neutral900" | "Neutral1000" | "Neutral1100" | "Neutral100A" | "Neutral200A" | "Neutral300A" | "Neutral400A" | "Neutral500A" | "DarkNeutral-100" | "DarkNeutral0" | "DarkNeutral100" | "DarkNeutral200" | "DarkNeutral250" | "DarkNeutral300" | "DarkNeutral350" | "DarkNeutral400" | "DarkNeutral500" | "DarkNeutral600" | "DarkNeutral700" | "DarkNeutral800" | "DarkNeutral900" | "DarkNeutral1000" | "DarkNeutral1100" | "DarkNeutral-100A" | "DarkNeutral100A" | "DarkNeutral200A" | "DarkNeutral250A" | "DarkNeutral300A" | "DarkNeutral350A" | "DarkNeutral400A" | "DarkNeutral500A">>;
+    utility: ValueSchema<UtilTokenSchema<"DarkNeutral900" | "Lime300" | "Lime200" | "Red300" | "Red200" | "Orange300" | "Orange200" | "Yellow300" | "Yellow200" | "Green300" | "Green200" | "Teal300" | "Teal200" | "Blue300" | "Blue200" | "Purple300" | "Purple200" | "Magenta300" | "Magenta200" | "DarkNeutral800" | "DarkNeutral1100" | "DarkNeutral400A" | "DarkNeutral100" | "Blue400" | "DarkNeutral700" | "Lime500" | "Red500" | "Orange500" | "Yellow500" | "Green500" | "Teal500" | "Blue500" | "Purple500" | "Magenta500" | "DarkNeutral600" | "DarkNeutral300A" | "DarkNeutral200A" | "DarkNeutral0" | "Lime1000" | "Lime900" | "Lime800" | "Lime400" | "Red1000" | "Red900" | "Red800" | "Red400" | "Orange1000" | "Orange900" | "Orange800" | "Orange400" | "Yellow1000" | "Yellow900" | "Yellow800" | "Yellow400" | "Green1000" | "Green900" | "Green800" | "Green400" | "Teal1000" | "Teal900" | "Teal800" | "Teal400" | "Blue1000" | "Blue900" | "Blue800" | "Purple1000" | "Purple900" | "Purple800" | "Purple400" | "Magenta1000" | "Magenta900" | "Magenta800" | "Magenta400" | "DarkNeutral300" | "DarkNeutral400" | "DarkNeutral500" | "DarkNeutral100A" | "DarkNeutral200" | "DarkNeutral250" | "DarkNeutral1000" | "Teal600" | "Orange600" | "Blue100" | "Purple600" | "Magenta100" | "Red600" | "Blue600" | "Magenta600" | "DarkNeutral350" | "DarkNeutral-100A" | "Lime100" | "Lime600" | "Lime700" | "Red100" | "Red700" | "Orange100" | "Orange700" | "Yellow100" | "Yellow600" | "Yellow700" | "Green100" | "Green600" | "Green700" | "Teal100" | "Teal700" | "Blue700" | "Purple100" | "Purple700" | "Magenta700" | "Neutral0" | "Neutral100" | "Neutral200" | "Neutral300" | "Neutral400" | "Neutral500" | "Neutral600" | "Neutral700" | "Neutral800" | "Neutral900" | "Neutral1000" | "Neutral1100" | "Neutral100A" | "Neutral200A" | "Neutral300A" | "Neutral400A" | "Neutral500A" | "DarkNeutral-100" | "DarkNeutral250A" | "DarkNeutral350A" | "DarkNeutral500A">>;
 };
 export default _default;

package/dist/types/tokens/default/utility/utility.d.ts

@@ -1,5 +1,5 @@
 import type { AttributeSchema, UtilTokenSchema } from '../../../types';
 declare const _default: {
-    utility: AttributeSchema<UtilTokenSchema<"Lime100" | "Lime200" | "Lime300" | "Lime400" | "Lime500" | "Lime600" | "Lime700" | "Lime800" | "Lime900" | "Lime1000" | "Red100" | "Red200" | "Red300" | "Red400" | "Red500" | "Red600" | "Red700" | "Red800" | "Red900" | "Red1000" | "Orange100" | "Orange200" | "Orange300" | "Orange400" | "Orange500" | "Orange600" | "Orange700" | "Orange800" | "Orange900" | "Orange1000" | "Yellow100" | "Yellow200" | "Yellow300" | "Yellow400" | "Yellow500" | "Yellow600" | "Yellow700" | "Yellow800" | "Yellow900" | "Yellow1000" | "Green100" | "Green200" | "Green300" | "Green400" | "Green500" | "Green600" | "Green700" | "Green800" | "Green900" | "Green1000" | "Teal100" | "Teal200" | "Teal300" | "Teal400" | "Teal500" | "Teal600" | "Teal700" | "Teal800" | "Teal900" | "Teal1000" | "Blue100" | "Blue200" | "Blue300" | "Blue400" | "Blue500" | "Blue600" | "Blue700" | "Blue800" | "Blue900" | "Blue1000" | "Purple100" | "Purple200" | "Purple300" | "Purple400" | "Purple500" | "Purple600" | "Purple700" | "Purple800" | "Purple900" | "Purple1000" | "Magenta100" | "Magenta200" | "Magenta300" | "Magenta400" | "Magenta500" | "Magenta600" | "Magenta700" | "Magenta800" | "Magenta900" | "Magenta1000" | "Neutral0" | "Neutral100" | "Neutral200" | "Neutral300" | "Neutral400" | "Neutral500" | "Neutral600" | "Neutral700" | "Neutral800" | "Neutral900" | "Neutral1000" | "Neutral1100" | "Neutral100A" | "Neutral200A" | "Neutral300A" | "Neutral400A" | "Neutral500A" | "DarkNeutral-100" | "DarkNeutral0" | "DarkNeutral100" | "DarkNeutral200" | "DarkNeutral250" | "DarkNeutral300" | "DarkNeutral350" | "DarkNeutral400" | "DarkNeutral500" | "DarkNeutral600" | "DarkNeutral700" | "DarkNeutral800" | "DarkNeutral900" | "DarkNeutral1000" | "DarkNeutral1100" | "DarkNeutral-100A" | "DarkNeutral100A" | "DarkNeutral200A" | "DarkNeutral250A" | "DarkNeutral300A" | "DarkNeutral350A" | "DarkNeutral400A" | "DarkNeutral500A">>;
+    utility: AttributeSchema<UtilTokenSchema<"DarkNeutral900" | "Lime300" | "Lime200" | "Red300" | "Red200" | "Orange300" | "Orange200" | "Yellow300" | "Yellow200" | "Green300" | "Green200" | "Teal300" | "Teal200" | "Blue300" | "Blue200" | "Purple300" | "Purple200" | "Magenta300" | "Magenta200" | "DarkNeutral800" | "DarkNeutral1100" | "DarkNeutral400A" | "DarkNeutral100" | "Blue400" | "DarkNeutral700" | "Lime500" | "Red500" | "Orange500" | "Yellow500" | "Green500" | "Teal500" | "Blue500" | "Purple500" | "Magenta500" | "DarkNeutral600" | "DarkNeutral300A" | "DarkNeutral200A" | "DarkNeutral0" | "Lime1000" | "Lime900" | "Lime800" | "Lime400" | "Red1000" | "Red900" | "Red800" | "Red400" | "Orange1000" | "Orange900" | "Orange800" | "Orange400" | "Yellow1000" | "Yellow900" | "Yellow800" | "Yellow400" | "Green1000" | "Green900" | "Green800" | "Green400" | "Teal1000" | "Teal900" | "Teal800" | "Teal400" | "Blue1000" | "Blue900" | "Blue800" | "Purple1000" | "Purple900" | "Purple800" | "Purple400" | "Magenta1000" | "Magenta900" | "Magenta800" | "Magenta400" | "DarkNeutral300" | "DarkNeutral400" | "DarkNeutral500" | "DarkNeutral100A" | "DarkNeutral200" | "DarkNeutral250" | "DarkNeutral1000" | "Teal600" | "Orange600" | "Blue100" | "Purple600" | "Magenta100" | "Red600" | "Blue600" | "Magenta600" | "DarkNeutral350" | "DarkNeutral-100A" | "Lime100" | "Lime600" | "Lime700" | "Red100" | "Red700" | "Orange100" | "Orange700" | "Yellow100" | "Yellow600" | "Yellow700" | "Green100" | "Green600" | "Green700" | "Teal100" | "Teal700" | "Blue700" | "Purple100" | "Purple700" | "Magenta700" | "Neutral0" | "Neutral100" | "Neutral200" | "Neutral300" | "Neutral400" | "Neutral500" | "Neutral600" | "Neutral700" | "Neutral800" | "Neutral900" | "Neutral1000" | "Neutral1100" | "Neutral100A" | "Neutral200A" | "Neutral300A" | "Neutral400A" | "Neutral500A" | "DarkNeutral-100" | "DarkNeutral250A" | "DarkNeutral350A" | "DarkNeutral500A">>;
 };
 export default _default;

package/dist/types/utils/color-utils.d.ts

@@ -0,0 +1,10 @@
+export declare const isValidBrandHex: (hex: string) => boolean;
+export declare function rgbToHex(r: number, g: number, b: number): string;
+export declare function getAlpha(hex: string): number;
+export declare function hexToRgbA(hex: string): [number, number, number, number];
+export declare function hexToRgb(hex: string): [number, number, number];
+export declare function hexToHSL(hex: string): [number, number, number];
+export declare function HSLToRGB(h: number, s: number, l: number): [number, number, number];
+export declare function relativeLuminanceW3C(r: number, g: number, b: number): number;
+export declare function getContrastRatio(foreground: string, background: string): number;
+export declare function deltaE(rgbA: number[], rgbB: number[]): number;

package/dist/types/utils/custom-theme-loading-utils.d.ts

@@ -0,0 +1,11 @@
+import tokens from '../artifacts/token-names';
+import { CustomBrandSchema } from '../custom-theme';
+import { ThemeColorModes } from '../theme-config';
+type Token = keyof typeof tokens;
+type ThemeAttributeId = 'light' | 'dark';
+export declare function findMissingCustomStyleElements(UNSAFE_themeOptions: CustomBrandSchema, mode: ThemeColorModes): ThemeAttributeId[];
+export declare function limitSizeOfCustomStyleElements(sizeThreshold: number): void;
+export declare function reduceTokenMap(tokenMap: {
+    [key in Token]?: number;
+}, themeRamp: string[]): string;
+export {};

package/dist/types/utils/custom-theme-token-contrast-check.d.ts

@@ -0,0 +1,20 @@
+import tokens from '../artifacts/token-names';
+type Token = keyof typeof tokens;
+interface AdditionalContrastCheck {
+    foreground: Token;
+    backgroundLight: Token;
+    backgroundDark: Token;
+    desiredContrast: number;
+    updatedTokens: Token[];
+}
+export declare const additionalChecks: AdditionalContrastCheck[];
+export declare const additionalContrastChecker: ({ customThemeTokenMap, mode, themeRamp, }: {
+    customThemeTokenMap: {
+        [key: string]: number;
+    };
+    mode: 'light' | 'dark';
+    themeRamp: string[];
+}) => {
+    [key: string]: number;
+};
+export {};

package/dist/types/utils/generate-custom-color-ramp.d.ts

@@ -0,0 +1,19 @@
+import tokens from '../artifacts/token-names';
+import { CSSColor } from '../custom-theme';
+import { ThemeColorModes } from '../theme-config';
+type Token = keyof typeof tokens;
+type TokenMap = {
+    [key in Token]?: number;
+};
+type Mode = 'light' | 'dark';
+export declare const getClosestColorIndex: (themeRamp: CSSColor[], brandColor: CSSColor) => number;
+export declare const generateColors: (brandColor: CSSColor) => CSSColor[];
+export declare const generateTokenMap: (brandColor: CSSColor, mode: ThemeColorModes, themeRamp?: CSSColor[]) => {
+    light?: TokenMap | undefined;
+    dark?: TokenMap | undefined;
+};
+export declare const generateTokenMapWithContrastCheck: (brandColor: CSSColor, mode: ThemeColorModes, themeRamp?: CSSColor[]) => {
+    light?: TokenMap | undefined;
+    dark?: TokenMap | undefined;
+};
+export {};

package/dist/types/utils/hash.d.ts

@@ -0,0 +1 @@
+export declare const hash: (str: string) => string;

package/dist/types/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;