@atlaskit/tokens 0.10.16 → 0.10.19

package/dist/types/constants.d.ts

@@ -1,9 +1,12 @@
-export declare const THEMES: readonly ["light", "dark"];
+export declare const THEMES: readonly ["light", "dark", "legacy-light", "legacy-dark"];
 export declare const THEME_DATA_ATTRIBUTE = "data-theme";
 export declare const DEFAULT_THEME = "light";
 export declare const CSS_PREFIX = "ds";
+export declare const CSS_VAR_FULL: string[];
 export declare const THEME_NAME_MAP: {
     'atlassian-light': string;
     'atlassian-dark': string;
+    'atlassian-legacy-light': string;
+    'atlassian-legacy-dark': string;
 };
 export declare const TOKEN_NOT_FOUND_CSS_VAR: string;

package/dist/types/palettes/legacy-palette.d.ts

@@ -4,7 +4,7 @@
  * This palette should be exclusively used for backwards compatible themes
  */
 import type { PaletteColorTokenSchema } from '../types';
-declare type PaletteValues = 'R50' | 'R75' | 'R100' | 'R200' | 'R300' | 'R400' | 'R500' | 'Y50' | 'Y75' | 'Y100' | 'Y200' | 'Y300' | 'Y400' | 'Y500' | 'G50' | 'G75' | 'G100' | 'G200' | 'G300' | 'G400' | 'G500' | 'B50' | 'B75' | 'B100' | 'B200' | 'B300' | 'B400' | 'B500' | 'P50' | 'P75' | 'P100' | 'P200' | 'P300' | 'P400' | 'P500' | 'T50' | 'T75' | 'T100' | 'T200' | 'T300' | 'T400' | 'T500' | 'N0' | 'N10' | 'N20' | 'N30' | 'N40' | 'N50' | 'N60' | 'N70' | 'N80' | 'N90' | 'N100' | 'N200' | 'N300' | 'N400' | 'N500' | 'N600' | 'N700' | 'N800' | 'N900' | 'N10A' | 'N20A' | 'N30A' | 'N40A' | 'N50A' | 'N60A' | 'N70A' | 'N80A' | 'N90A' | 'N100A' | 'N200A' | 'N300A' | 'N400A' | 'N500A' | 'N600A' | 'N700A' | 'N800A' | 'DN900' | 'DN800' | 'DN700' | 'DN600' | 'DN500' | 'DN400' | 'DN300' | 'DN200' | 'DN100' | 'DN90' | 'DN80' | 'DN70' | 'DN60' | 'DN50' | 'DN40' | 'DN30' | 'DN20' | 'DN10' | 'DN0' | 'DN800A' | 'DN700A' | 'DN600A' | 'DN500A' | 'DN400A' | 'DN300A' | 'DN200A' | 'DN100A' | 'DN90A' | 'DN80A' | 'DN70A' | 'DN60A' | 'DN50A' | 'DN40A' | 'DN30A' | 'DN20A' | 'DN10' | 'DN10A';
+declare type PaletteValues = 'transparent' | 'R50' | 'R75' | 'R100' | 'R200' | 'R300' | 'R400' | 'R500' | 'Y50' | 'Y75' | 'Y100' | 'Y200' | 'Y300' | 'Y400' | 'Y500' | 'G50' | 'G75' | 'G100' | 'G200' | 'G300' | 'G400' | 'G500' | 'B50' | 'B75' | 'B100' | 'B200' | 'B300' | 'B400' | 'B500' | 'P50' | 'P75' | 'P100' | 'P200' | 'P300' | 'P400' | 'P500' | 'T50' | 'T75' | 'T100' | 'T200' | 'T300' | 'T400' | 'T500' | 'N0' | 'N10' | 'N20' | 'N30' | 'N40' | 'N50' | 'N60' | 'N70' | 'N80' | 'N90' | 'N100' | 'N200' | 'N300' | 'N400' | 'N500' | 'N600' | 'N700' | 'N800' | 'N900' | 'N10A' | 'N20A' | 'N30A' | 'N40A' | 'N50A' | 'N60A' | 'N70A' | 'N80A' | 'N90A' | 'N100A' | 'N200A' | 'N300A' | 'N400A' | 'N500A' | 'N600A' | 'N700A' | 'N800A' | 'DN900' | 'DN800' | 'DN700' | 'DN600' | 'DN500' | 'DN400' | 'DN300' | 'DN200' | 'DN100' | 'DN90' | 'DN80' | 'DN70' | 'DN60' | 'DN50' | 'DN40' | 'DN30' | 'DN20' | 'DN10' | 'DN0' | 'DN800A' | 'DN700A' | 'DN600A' | 'DN500A' | 'DN400A' | 'DN300A' | 'DN200A' | 'DN100A' | 'DN90A' | 'DN80A' | 'DN70A' | 'DN60A' | 'DN50A' | 'DN40A' | 'DN30A' | 'DN20A' | 'DN10' | 'DN10A';
 export declare type BaseToken = keyof PaletteColorTokenSchema<PaletteValues>['color']['palette'];
 declare const palette: PaletteColorTokenSchema<PaletteValues>;
 export default palette;

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

@@ -0,0 +1,3 @@
+import type { OpacityTokenSchema, ValueSchema } from '../../../types';
+declare const opacity: ValueSchema<OpacityTokenSchema>;
+export default opacity;

package/dist/types/tokens/atlassian-legacy-dark/color/accent.d.ts

@@ -0,0 +1,4 @@
+import type { BaseToken } from '../../../palettes/legacy-palette';
+import type { AccentColorTokenSchema, ValueSchema } from '../../../types';
+declare const color: ValueSchema<AccentColorTokenSchema<BaseToken>>;
+export default color;

package/dist/types/tokens/atlassian-legacy-dark/color/background.d.ts

@@ -0,0 +1,4 @@
+import type { BaseToken } from '../../../palettes/legacy-palette';
+import type { BackgroundColorTokenSchema, ValueSchema } from '../../../types';
+declare const color: ValueSchema<BackgroundColorTokenSchema<BaseToken>>;
+export default color;

package/dist/types/tokens/atlassian-legacy-dark/color/border.d.ts

@@ -0,0 +1,4 @@
+import type { BaseToken } from '../../../palettes/legacy-palette';
+import type { BorderColorTokenSchema, ValueSchema } from '../../../types';
+declare const color: ValueSchema<BorderColorTokenSchema<BaseToken>>;
+export default color;

package/dist/types/tokens/atlassian-legacy-dark/color/icon.d.ts

@@ -0,0 +1,4 @@
+import type { BaseToken } from '../../../palettes/legacy-palette';
+import type { IconColorTokenSchema, ValueSchema } from '../../../types';
+declare const color: ValueSchema<IconColorTokenSchema<BaseToken>>;
+export default color;

package/dist/types/tokens/atlassian-legacy-dark/color/interaction.d.ts

@@ -0,0 +1,4 @@
+import type { BaseToken } from '../../../palettes/legacy-palette';
+import type { InteractionColorTokenSchema, ValueSchema } from '../../../types';
+declare const color: ValueSchema<InteractionColorTokenSchema<BaseToken>>;
+export default color;

package/dist/types/tokens/atlassian-legacy-dark/color/skeleton.d.ts

@@ -0,0 +1,4 @@
+import type { BaseToken } from '../../../palettes/legacy-palette';
+import type { SkeletonColorTokenSchema, ValueSchema } from '../../../types';
+declare const color: ValueSchema<SkeletonColorTokenSchema<BaseToken>>;
+export default color;

package/dist/types/tokens/atlassian-legacy-dark/color/text.d.ts

@@ -0,0 +1,4 @@
+import type { BaseToken } from '../../../palettes/legacy-palette';
+import type { TextColorTokenSchema, ValueSchema } from '../../../types';
+declare const color: ValueSchema<TextColorTokenSchema<BaseToken>>;
+export default color;

package/dist/types/tokens/atlassian-legacy-dark/deprecated/deprecated.d.ts

@@ -0,0 +1,4 @@
+import type { BaseToken } from '../../../palettes/legacy-palette';
+import type { DeprecatedTokenSchema, ValueSchema } from '../../../types';
+declare const color: ValueSchema<DeprecatedTokenSchema<BaseToken>>;
+export default color;

package/dist/types/tokens/atlassian-legacy-dark/elevation/shadow.d.ts

@@ -0,0 +1,4 @@
+import type { BaseToken } from '../../../palettes/legacy-palette';
+import type { ShadowTokenSchema, ValueSchema } from '../../../types';
+declare const shadow: ValueSchema<ShadowTokenSchema<BaseToken>>;
+export default shadow;

package/dist/types/tokens/atlassian-legacy-dark/elevation/surface.d.ts

@@ -0,0 +1,4 @@
+import type { BaseToken } from '../../../palettes/legacy-palette';
+import type { SurfaceTokenSchema, ValueSchema } from '../../../types';
+declare const elevation: ValueSchema<SurfaceTokenSchema<BaseToken>>;
+export default elevation;

package/dist/types/tokens/atlassian-legacy-dark/opacity/opacity.d.ts

@@ -0,0 +1,3 @@
+import type { OpacityTokenSchema, ValueSchema } from '../../../types';
+declare const opacity: ValueSchema<OpacityTokenSchema>;
+export default opacity;

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

@@ -0,0 +1,5 @@
+import type { UtilTokenSchema, ValueSchema } from '../../../types';
+declare const _default: {
+    utility: ValueSchema<UtilTokenSchema<"transparent" | "R50" | "R75" | "R100" | "R200" | "R300" | "R400" | "R500" | "Y50" | "Y75" | "Y100" | "Y200" | "Y300" | "Y400" | "Y500" | "G50" | "G75" | "G100" | "G200" | "G300" | "G400" | "G500" | "B50" | "B75" | "B100" | "B200" | "B300" | "B400" | "B500" | "P50" | "P75" | "P100" | "P200" | "P300" | "P400" | "P500" | "T50" | "T75" | "T100" | "T200" | "T300" | "T400" | "T500" | "N0" | "N10" | "N20" | "N30" | "N40" | "N50" | "N60" | "N70" | "N80" | "N90" | "N100" | "N200" | "N300" | "N400" | "N500" | "N600" | "N700" | "N800" | "N900" | "N10A" | "N20A" | "N30A" | "N40A" | "N50A" | "N60A" | "N70A" | "N80A" | "N90A" | "N100A" | "N200A" | "N300A" | "N400A" | "N500A" | "N600A" | "N700A" | "N800A" | "DN900" | "DN800" | "DN700" | "DN600" | "DN500" | "DN400" | "DN300" | "DN200" | "DN100" | "DN90" | "DN80" | "DN70" | "DN60" | "DN50" | "DN40" | "DN30" | "DN20" | "DN10" | "DN0" | "DN800A" | "DN700A" | "DN600A" | "DN500A" | "DN400A" | "DN300A" | "DN200A" | "DN100A" | "DN90A" | "DN80A" | "DN70A" | "DN60A" | "DN50A" | "DN40A" | "DN30A" | "DN20A" | "DN10A">>;
+};
+export default _default;

package/dist/types/tokens/atlassian-legacy-light/color/accent.d.ts

@@ -0,0 +1,4 @@
+import type { BaseToken } from '../../../palettes/legacy-palette';
+import type { AccentColorTokenSchema, ValueSchema } from '../../../types';
+declare const color: ValueSchema<AccentColorTokenSchema<BaseToken>>;
+export default color;

package/dist/types/tokens/atlassian-legacy-light/color/background.d.ts

@@ -0,0 +1,4 @@
+import type { BaseToken } from '../../../palettes/legacy-palette';
+import type { BackgroundColorTokenSchema, ValueSchema } from '../../../types';
+declare const color: ValueSchema<BackgroundColorTokenSchema<BaseToken>>;
+export default color;

package/dist/types/tokens/atlassian-legacy-light/color/border.d.ts

@@ -0,0 +1,4 @@
+import type { BaseToken } from '../../../palettes/legacy-palette';
+import type { BorderColorTokenSchema, ValueSchema } from '../../../types';
+declare const color: ValueSchema<BorderColorTokenSchema<BaseToken>>;
+export default color;

package/dist/types/tokens/atlassian-legacy-light/color/icon.d.ts

@@ -0,0 +1,4 @@
+import type { BaseToken } from '../../../palettes/legacy-palette';
+import type { IconColorTokenSchema, ValueSchema } from '../../../types';
+declare const color: ValueSchema<IconColorTokenSchema<BaseToken>>;
+export default color;

package/dist/types/tokens/atlassian-legacy-light/color/interaction.d.ts

@@ -0,0 +1,4 @@
+import type { BaseToken } from '../../../palettes/legacy-palette';
+import type { InteractionColorTokenSchema, ValueSchema } from '../../../types';
+declare const color: ValueSchema<InteractionColorTokenSchema<BaseToken>>;
+export default color;

package/dist/types/tokens/atlassian-legacy-light/color/skeleton.d.ts

@@ -0,0 +1,4 @@
+import type { BaseToken } from '../../../palettes/legacy-palette';
+import type { SkeletonColorTokenSchema, ValueSchema } from '../../../types';
+declare const color: ValueSchema<SkeletonColorTokenSchema<BaseToken>>;
+export default color;

package/dist/types/tokens/atlassian-legacy-light/color/text.d.ts

@@ -0,0 +1,4 @@
+import type { BaseToken } from '../../../palettes/legacy-palette';
+import type { TextColorTokenSchema, ValueSchema } from '../../../types';
+declare const color: ValueSchema<TextColorTokenSchema<BaseToken>>;
+export default color;

package/dist/types/tokens/atlassian-legacy-light/deprecated/deprecated.d.ts

@@ -0,0 +1,4 @@
+import type { BaseToken } from '../../../palettes/legacy-palette';
+import type { DeprecatedTokenSchema, ValueSchema } from '../../../types';
+declare const color: ValueSchema<DeprecatedTokenSchema<BaseToken>>;
+export default color;

package/dist/types/tokens/atlassian-legacy-light/elevation/shadow.d.ts

@@ -0,0 +1,4 @@
+import type { BaseToken } from '../../../palettes/legacy-palette';
+import type { ShadowTokenSchema, ValueSchema } from '../../../types';
+declare const shadow: ValueSchema<ShadowTokenSchema<BaseToken>>;
+export default shadow;

package/dist/types/tokens/atlassian-legacy-light/elevation/surface.d.ts

@@ -0,0 +1,4 @@
+import type { BaseToken } from '../../../palettes/legacy-palette';
+import type { SurfaceTokenSchema, ValueSchema } from '../../../types';
+declare const elevation: ValueSchema<SurfaceTokenSchema<BaseToken>>;
+export default elevation;

package/dist/types/tokens/atlassian-legacy-light/opacity/opacity.d.ts

@@ -0,0 +1,3 @@
+import type { OpacityTokenSchema, ValueSchema } from '../../../types';
+declare const opacity: ValueSchema<OpacityTokenSchema>;
+export default opacity;

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

@@ -0,0 +1,5 @@
+import type { UtilTokenSchema, ValueSchema } from '../../../types';
+declare const _default: {
+    utility: ValueSchema<UtilTokenSchema<"transparent" | "R50" | "R75" | "R100" | "R200" | "R300" | "R400" | "R500" | "Y50" | "Y75" | "Y100" | "Y200" | "Y300" | "Y400" | "Y500" | "G50" | "G75" | "G100" | "G200" | "G300" | "G400" | "G500" | "B50" | "B75" | "B100" | "B200" | "B300" | "B400" | "B500" | "P50" | "P75" | "P100" | "P200" | "P300" | "P400" | "P500" | "T50" | "T75" | "T100" | "T200" | "T300" | "T400" | "T500" | "N0" | "N10" | "N20" | "N30" | "N40" | "N50" | "N60" | "N70" | "N80" | "N90" | "N100" | "N200" | "N300" | "N400" | "N500" | "N600" | "N700" | "N800" | "N900" | "N10A" | "N20A" | "N30A" | "N40A" | "N50A" | "N60A" | "N70A" | "N80A" | "N90A" | "N100A" | "N200A" | "N300A" | "N400A" | "N500A" | "N600A" | "N700A" | "N800A" | "DN900" | "DN800" | "DN700" | "DN600" | "DN500" | "DN400" | "DN300" | "DN200" | "DN100" | "DN90" | "DN80" | "DN70" | "DN60" | "DN50" | "DN40" | "DN30" | "DN20" | "DN10" | "DN0" | "DN800A" | "DN700A" | "DN600A" | "DN500A" | "DN400A" | "DN300A" | "DN200A" | "DN100A" | "DN90A" | "DN80A" | "DN70A" | "DN60A" | "DN50A" | "DN40A" | "DN30A" | "DN20A" | "DN10A">>;
+};
+export default _default;

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

@@ -0,0 +1,3 @@
+import type { OpacityTokenSchema, ValueSchema } from '../../../types';
+declare const opacity: ValueSchema<OpacityTokenSchema>;
+export default opacity;

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

@@ -0,0 +1,3 @@
+import type { AttributeSchema, OpacityTokenSchema } from '../../../types';
+declare const opacity: AttributeSchema<OpacityTokenSchema>;
+export default opacity;

package/dist/types/types.d.ts

@@ -1,11 +1,13 @@
 import { InternalTokenIds } from './artifacts/types-internal';
 import { THEME_NAME_MAP, THEMES } from './constants';
-export declare type Groups = 'raw' | 'paint' | 'shadow' | 'palette';
+export declare type Groups = 'raw' | 'paint' | 'shadow' | 'opacity' | 'palette';
 export declare type ActiveTokenState = 'active';
 export declare type DeprecatedTokenState = 'deprecated';
 export declare type DeletedTokenState = 'deleted';
 export declare type TokenState = ActiveTokenState | DeprecatedTokenState | DeletedTokenState;
 export declare type Replacement = InternalTokenIds | InternalTokenIds[];
+export declare type PaletteCategory = 'blue' | 'purple' | 'red' | 'magenta' | 'orange' | 'yellow' | 'green' | 'teal' | 'light mode neutral' | 'dark mode neutral';
+export declare type ValueCategory = 'opacity';
 export declare type Themes = typeof THEMES[number];
 export declare type ThemesLongName = keyof typeof THEME_NAME_MAP;
 export interface Token<TValue, Group extends Groups> {
@@ -62,6 +64,19 @@ declare type DeepOmit<T extends any, K extends PropertyKey> = Omit<{
 }, K>;
 export declare type ValueSchema<Schema extends object> = DeepOmit<Schema, 'attributes'>;
 export declare type AttributeSchema<Schema extends object> = DeepOmit<Schema, 'value'>;
+export interface PaletteToken extends BaseToken<string, 'palette'> {
+    attributes: {
+        group: 'palette';
+        category: PaletteCategory;
+    };
+}
+export interface ValueToken extends BaseToken<number, 'palette'> {
+    attributes: {
+        group: 'palette';
+        category: ValueCategory;
+    };
+}
+export declare type PaintToken<BaseToken> = DesignToken<BaseToken, 'paint'>;
 export declare type ShadowToken<BaseToken> = DesignToken<Array<{
     color: BaseToken;
     opacity: number;
@@ -73,15 +88,15 @@ export declare type ShadowToken<BaseToken> = DesignToken<Array<{
     spread?: number;
     inset?: boolean;
 }>, 'shadow'>;
-export declare type PaintToken<BaseToken> = DesignToken<BaseToken, 'paint'>;
+export declare type OpacityToken = DesignToken<string, 'opacity'>;
 export declare type RawToken = DesignToken<string, 'raw'>;
-interface PaletteToken extends BaseToken<string, 'palette'> {
-    attributes: {
-        group: 'palette';
-        category: 'blue' | 'purple' | 'red' | 'magenta' | 'orange' | 'yellow' | 'green' | 'teal' | 'light mode neutral' | 'dark mode neutral';
-    };
-}
 export interface PaletteColorTokenSchema<PaletteValues extends string> {
+    value: {
+        opacity: {
+            Opacity20: ValueToken;
+            Opacity40: ValueToken;
+        };
+    };
     color: {
         palette: Record<PaletteValues, PaletteToken>;
     };
@@ -439,6 +454,12 @@ export interface ShadowTokenSchema<BaseToken> {
         };
     };
 }
+export interface OpacityTokenSchema {
+    opacity: {
+        loading: OpacityToken;
+        disabled: OpacityToken;
+    };
+}
 export interface DeprecatedTokenSchema<BaseToken> {
     color: {
         accent: {

package/dist/types/utils/token-ids.d.ts

@@ -12,8 +12,7 @@
  * // Returns ds-background-bold
  * getCSSCustomProperty('color.background.bold.[default]')
  */
-export declare const getCSSCustomProperty: GetCssCustomProperty;
-declare type GetCssCustomProperty = (path: string | string[]) => string;
+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
@@ -40,4 +39,3 @@ export declare const getTokenId: (path: string | string[]) => string;
  * getFullyQualifiedTokenId(['color', 'background', 'bold', '[default]'])
  */
 export declare const getFullyQualifiedTokenId: (path: string[]) => string;
-export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/tokens",
-  "version": "0.10.16",
+  "version": "0.10.19",
   "author": "Atlassian Pty Ltd",
   "description": "Design tokens are the single source of truth to name and store design decisions.",
   "license": "Apache-2.0",
@@ -33,7 +33,9 @@
     "./rename-mapping": "./src/entry-points/rename-mapping.tsx",
     "./babel-plugin": "./src/entry-points/babel-plugin.tsx",
     "./css/atlassian-light.css": "./css/atlassian-light.css",
-    "./css/atlassian-dark.css": "./css/atlassian-dark.css"
+    "./css/atlassian-dark.css": "./css/atlassian-dark.css",
+    "./css/atlassian-legacy-light.css": "./css/atlassian-legacy-light.css",
+    "./css/atlassian-legacy-dark.css": "./css/atlassian-legacy-dark.css"
   },
   "scripts": {
     "ak-postbuild": "cd ../../../ && yarn build @af/codegen && cd packages/design-system/tokens && yarn codegen-tokens && yarn check-clean-git",
@@ -59,24 +61,24 @@
     "@atlaskit/checkbox": "^12.3.9",
     "@atlaskit/code": "^14.3.0",
     "@atlaskit/docs": "^9.0.10",
-    "@atlaskit/dropdown-menu": "^11.3.0",
-    "@atlaskit/dynamic-table": "^14.7.0",
-    "@atlaskit/empty-state": "^7.3.9",
+    "@atlaskit/dropdown-menu": "^11.5.0",
+    "@atlaskit/dynamic-table": "^14.8.0",
+    "@atlaskit/empty-state": "^7.4.0",
     "@atlaskit/focus-ring": "^1.0.0",
     "@atlaskit/heading": "*",
     "@atlaskit/icon": "^21.10.2",
-    "@atlaskit/lozenge": "^11.0.0",
-    "@atlaskit/modal-dialog": "^12.2.4",
-    "@atlaskit/section-message": "^6.1.7",
-    "@atlaskit/tabs": "^13.2.4",
-    "@atlaskit/tag": "^11.3.1",
-    "@atlaskit/textfield": "^5.1.5",
-    "@atlaskit/theme": "^12.1.2",
-    "@atlaskit/toggle": "^12.4.2",
+    "@atlaskit/lozenge": "^11.2.0",
+    "@atlaskit/modal-dialog": "^12.3.0",
+    "@atlaskit/section-message": "^6.2.0",
+    "@atlaskit/tabs": "^13.3.0",
+    "@atlaskit/tag": "^11.4.0",
+    "@atlaskit/textfield": "^5.2.0",
+    "@atlaskit/theme": "^12.2.0",
+    "@atlaskit/toggle": "^12.5.0",
     "@atlaskit/tooltip": "^17.5.7",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@babel/core": "^7.12.3",
-    "@emotion/core": "^10.0.9",
+    "@emotion/react": "^11.7.1",
     "@testing-library/dom": "^7.7.3",
     "@testing-library/react": "^8.0.1",
     "@testing-library/react-hooks": "^1.0.4",