@atlaskit/ds-explorations 2.2.11 → 2.2.13

package/src/components/interaction-surface.partial.tsx

@@ -70,13 +70,215 @@ export default InteractionSurface;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::6705bcce4bc1f3f6b944ca61e2f7afcf>>
+ * @codegen <<SignedSource::03b3f0bf0d4f1326c6bfa087f92bef36>>
  * @codegenId interactions
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["background"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::d09e7cd13e24113267155813747b3bd4>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::815ddd719715ae06521cad06e1921e40>>
  */
 const backgroundActiveColorMap = {
+  'accent.lime.subtlest': css({
+    ':active': {
+      backgroundColor: token('color.background.accent.lime.subtlest.pressed'),
+    },
+  }),
+  'accent.lime.subtler': css({
+    ':active': {
+      backgroundColor: token('color.background.accent.lime.subtler.pressed'),
+    },
+  }),
+  'accent.lime.subtle': css({
+    ':active': {
+      backgroundColor: token('color.background.accent.lime.subtle.pressed'),
+    },
+  }),
+  'accent.lime.bolder': css({
+    ':active': {
+      backgroundColor: token('color.background.accent.lime.bolder.pressed'),
+    },
+  }),
+  'accent.red.subtlest': css({
+    ':active': {
+      backgroundColor: token('color.background.accent.red.subtlest.pressed'),
+    },
+  }),
+  'accent.red.subtler': css({
+    ':active': {
+      backgroundColor: token('color.background.accent.red.subtler.pressed'),
+    },
+  }),
+  'accent.red.subtle': css({
+    ':active': {
+      backgroundColor: token('color.background.accent.red.subtle.pressed'),
+    },
+  }),
+  'accent.red.bolder': css({
+    ':active': {
+      backgroundColor: token('color.background.accent.red.bolder.pressed'),
+    },
+  }),
+  'accent.orange.subtlest': css({
+    ':active': {
+      backgroundColor: token('color.background.accent.orange.subtlest.pressed'),
+    },
+  }),
+  'accent.orange.subtler': css({
+    ':active': {
+      backgroundColor: token('color.background.accent.orange.subtler.pressed'),
+    },
+  }),
+  'accent.orange.subtle': css({
+    ':active': {
+      backgroundColor: token('color.background.accent.orange.subtle.pressed'),
+    },
+  }),
+  'accent.orange.bolder': css({
+    ':active': {
+      backgroundColor: token('color.background.accent.orange.bolder.pressed'),
+    },
+  }),
+  'accent.yellow.subtlest': css({
+    ':active': {
+      backgroundColor: token('color.background.accent.yellow.subtlest.pressed'),
+    },
+  }),
+  'accent.yellow.subtler': css({
+    ':active': {
+      backgroundColor: token('color.background.accent.yellow.subtler.pressed'),
+    },
+  }),
+  'accent.yellow.subtle': css({
+    ':active': {
+      backgroundColor: token('color.background.accent.yellow.subtle.pressed'),
+    },
+  }),
+  'accent.yellow.bolder': css({
+    ':active': {
+      backgroundColor: token('color.background.accent.yellow.bolder.pressed'),
+    },
+  }),
+  'accent.green.subtlest': css({
+    ':active': {
+      backgroundColor: token('color.background.accent.green.subtlest.pressed'),
+    },
+  }),
+  'accent.green.subtler': css({
+    ':active': {
+      backgroundColor: token('color.background.accent.green.subtler.pressed'),
+    },
+  }),
+  'accent.green.subtle': css({
+    ':active': {
+      backgroundColor: token('color.background.accent.green.subtle.pressed'),
+    },
+  }),
+  'accent.green.bolder': css({
+    ':active': {
+      backgroundColor: token('color.background.accent.green.bolder.pressed'),
+    },
+  }),
+  'accent.teal.subtlest': css({
+    ':active': {
+      backgroundColor: token('color.background.accent.teal.subtlest.pressed'),
+    },
+  }),
+  'accent.teal.subtler': css({
+    ':active': {
+      backgroundColor: token('color.background.accent.teal.subtler.pressed'),
+    },
+  }),
+  'accent.teal.subtle': css({
+    ':active': {
+      backgroundColor: token('color.background.accent.teal.subtle.pressed'),
+    },
+  }),
+  'accent.teal.bolder': css({
+    ':active': {
+      backgroundColor: token('color.background.accent.teal.bolder.pressed'),
+    },
+  }),
+  'accent.blue.subtlest': css({
+    ':active': {
+      backgroundColor: token('color.background.accent.blue.subtlest.pressed'),
+    },
+  }),
+  'accent.blue.subtler': css({
+    ':active': {
+      backgroundColor: token('color.background.accent.blue.subtler.pressed'),
+    },
+  }),
+  'accent.blue.subtle': css({
+    ':active': {
+      backgroundColor: token('color.background.accent.blue.subtle.pressed'),
+    },
+  }),
+  'accent.blue.bolder': css({
+    ':active': {
+      backgroundColor: token('color.background.accent.blue.bolder.pressed'),
+    },
+  }),
+  'accent.purple.subtlest': css({
+    ':active': {
+      backgroundColor: token('color.background.accent.purple.subtlest.pressed'),
+    },
+  }),
+  'accent.purple.subtler': css({
+    ':active': {
+      backgroundColor: token('color.background.accent.purple.subtler.pressed'),
+    },
+  }),
+  'accent.purple.subtle': css({
+    ':active': {
+      backgroundColor: token('color.background.accent.purple.subtle.pressed'),
+    },
+  }),
+  'accent.purple.bolder': css({
+    ':active': {
+      backgroundColor: token('color.background.accent.purple.bolder.pressed'),
+    },
+  }),
+  'accent.magenta.subtlest': css({
+    ':active': {
+      backgroundColor: token(
+        'color.background.accent.magenta.subtlest.pressed',
+      ),
+    },
+  }),
+  'accent.magenta.subtler': css({
+    ':active': {
+      backgroundColor: token('color.background.accent.magenta.subtler.pressed'),
+    },
+  }),
+  'accent.magenta.subtle': css({
+    ':active': {
+      backgroundColor: token('color.background.accent.magenta.subtle.pressed'),
+    },
+  }),
+  'accent.magenta.bolder': css({
+    ':active': {
+      backgroundColor: token('color.background.accent.magenta.bolder.pressed'),
+    },
+  }),
+  'accent.gray.subtlest': css({
+    ':active': {
+      backgroundColor: token('color.background.accent.gray.subtlest.pressed'),
+    },
+  }),
+  'accent.gray.subtler': css({
+    ':active': {
+      backgroundColor: token('color.background.accent.gray.subtler.pressed'),
+    },
+  }),
+  'accent.gray.subtle': css({
+    ':active': {
+      backgroundColor: token('color.background.accent.gray.subtle.pressed'),
+    },
+  }),
+  'accent.gray.bolder': css({
+    ':active': {
+      backgroundColor: token('color.background.accent.gray.bolder.pressed'),
+    },
+  }),
   input: css({
     ':active': { backgroundColor: token('color.background.input.pressed') },
   }),
@@ -175,6 +377,208 @@ const backgroundActiveColorMap = {
 };
 
 const backgroundHoverColorMap = {
+  'accent.lime.subtlest': css({
+    ':hover': {
+      backgroundColor: token('color.background.accent.lime.subtlest.hovered'),
+    },
+  }),
+  'accent.lime.subtler': css({
+    ':hover': {
+      backgroundColor: token('color.background.accent.lime.subtler.hovered'),
+    },
+  }),
+  'accent.lime.subtle': css({
+    ':hover': {
+      backgroundColor: token('color.background.accent.lime.subtle.hovered'),
+    },
+  }),
+  'accent.lime.bolder': css({
+    ':hover': {
+      backgroundColor: token('color.background.accent.lime.bolder.hovered'),
+    },
+  }),
+  'accent.red.subtlest': css({
+    ':hover': {
+      backgroundColor: token('color.background.accent.red.subtlest.hovered'),
+    },
+  }),
+  'accent.red.subtler': css({
+    ':hover': {
+      backgroundColor: token('color.background.accent.red.subtler.hovered'),
+    },
+  }),
+  'accent.red.subtle': css({
+    ':hover': {
+      backgroundColor: token('color.background.accent.red.subtle.hovered'),
+    },
+  }),
+  'accent.red.bolder': css({
+    ':hover': {
+      backgroundColor: token('color.background.accent.red.bolder.hovered'),
+    },
+  }),
+  'accent.orange.subtlest': css({
+    ':hover': {
+      backgroundColor: token('color.background.accent.orange.subtlest.hovered'),
+    },
+  }),
+  'accent.orange.subtler': css({
+    ':hover': {
+      backgroundColor: token('color.background.accent.orange.subtler.hovered'),
+    },
+  }),
+  'accent.orange.subtle': css({
+    ':hover': {
+      backgroundColor: token('color.background.accent.orange.subtle.hovered'),
+    },
+  }),
+  'accent.orange.bolder': css({
+    ':hover': {
+      backgroundColor: token('color.background.accent.orange.bolder.hovered'),
+    },
+  }),
+  'accent.yellow.subtlest': css({
+    ':hover': {
+      backgroundColor: token('color.background.accent.yellow.subtlest.hovered'),
+    },
+  }),
+  'accent.yellow.subtler': css({
+    ':hover': {
+      backgroundColor: token('color.background.accent.yellow.subtler.hovered'),
+    },
+  }),
+  'accent.yellow.subtle': css({
+    ':hover': {
+      backgroundColor: token('color.background.accent.yellow.subtle.hovered'),
+    },
+  }),
+  'accent.yellow.bolder': css({
+    ':hover': {
+      backgroundColor: token('color.background.accent.yellow.bolder.hovered'),
+    },
+  }),
+  'accent.green.subtlest': css({
+    ':hover': {
+      backgroundColor: token('color.background.accent.green.subtlest.hovered'),
+    },
+  }),
+  'accent.green.subtler': css({
+    ':hover': {
+      backgroundColor: token('color.background.accent.green.subtler.hovered'),
+    },
+  }),
+  'accent.green.subtle': css({
+    ':hover': {
+      backgroundColor: token('color.background.accent.green.subtle.hovered'),
+    },
+  }),
+  'accent.green.bolder': css({
+    ':hover': {
+      backgroundColor: token('color.background.accent.green.bolder.hovered'),
+    },
+  }),
+  'accent.teal.subtlest': css({
+    ':hover': {
+      backgroundColor: token('color.background.accent.teal.subtlest.hovered'),
+    },
+  }),
+  'accent.teal.subtler': css({
+    ':hover': {
+      backgroundColor: token('color.background.accent.teal.subtler.hovered'),
+    },
+  }),
+  'accent.teal.subtle': css({
+    ':hover': {
+      backgroundColor: token('color.background.accent.teal.subtle.hovered'),
+    },
+  }),
+  'accent.teal.bolder': css({
+    ':hover': {
+      backgroundColor: token('color.background.accent.teal.bolder.hovered'),
+    },
+  }),
+  'accent.blue.subtlest': css({
+    ':hover': {
+      backgroundColor: token('color.background.accent.blue.subtlest.hovered'),
+    },
+  }),
+  'accent.blue.subtler': css({
+    ':hover': {
+      backgroundColor: token('color.background.accent.blue.subtler.hovered'),
+    },
+  }),
+  'accent.blue.subtle': css({
+    ':hover': {
+      backgroundColor: token('color.background.accent.blue.subtle.hovered'),
+    },
+  }),
+  'accent.blue.bolder': css({
+    ':hover': {
+      backgroundColor: token('color.background.accent.blue.bolder.hovered'),
+    },
+  }),
+  'accent.purple.subtlest': css({
+    ':hover': {
+      backgroundColor: token('color.background.accent.purple.subtlest.hovered'),
+    },
+  }),
+  'accent.purple.subtler': css({
+    ':hover': {
+      backgroundColor: token('color.background.accent.purple.subtler.hovered'),
+    },
+  }),
+  'accent.purple.subtle': css({
+    ':hover': {
+      backgroundColor: token('color.background.accent.purple.subtle.hovered'),
+    },
+  }),
+  'accent.purple.bolder': css({
+    ':hover': {
+      backgroundColor: token('color.background.accent.purple.bolder.hovered'),
+    },
+  }),
+  'accent.magenta.subtlest': css({
+    ':hover': {
+      backgroundColor: token(
+        'color.background.accent.magenta.subtlest.hovered',
+      ),
+    },
+  }),
+  'accent.magenta.subtler': css({
+    ':hover': {
+      backgroundColor: token('color.background.accent.magenta.subtler.hovered'),
+    },
+  }),
+  'accent.magenta.subtle': css({
+    ':hover': {
+      backgroundColor: token('color.background.accent.magenta.subtle.hovered'),
+    },
+  }),
+  'accent.magenta.bolder': css({
+    ':hover': {
+      backgroundColor: token('color.background.accent.magenta.bolder.hovered'),
+    },
+  }),
+  'accent.gray.subtlest': css({
+    ':hover': {
+      backgroundColor: token('color.background.accent.gray.subtlest.hovered'),
+    },
+  }),
+  'accent.gray.subtler': css({
+    ':hover': {
+      backgroundColor: token('color.background.accent.gray.subtler.hovered'),
+    },
+  }),
+  'accent.gray.subtle': css({
+    ':hover': {
+      backgroundColor: token('color.background.accent.gray.subtle.hovered'),
+    },
+  }),
+  'accent.gray.bolder': css({
+    ':hover': {
+      backgroundColor: token('color.background.accent.gray.bolder.hovered'),
+    },
+  }),
   input: css({
     ':hover': { backgroundColor: token('color.background.input.hovered') },
   }),

package/src/components/text.partial.tsx

@@ -195,11 +195,11 @@ export default Text;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::b8b8bbe2326e2cc6d28ce2d7042ab202>>
+ * @codegen <<SignedSource::d3b73d63fef16f1f12ad8ec39520497e>>
  * @codegenId typography
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography.tsx <<SignedSource::7fa10802b854af6256a8c2d394d59238>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography.tsx <<SignedSource::0e11bb3b13c1850386ae45bae589a46a>>
  */
 const fontSizeMap = {
   'size.050': css({
@@ -311,11 +311,11 @@ export type LineHeight = keyof typeof lineHeightMap;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::039c7b7400ed2152388a9501fcdea070>>
+ * @codegen <<SignedSource::d2da3ae653a14d48ae7649d16e323e40>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["text"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::d09e7cd13e24113267155813747b3bd4>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::815ddd719715ae06521cad06e1921e40>>
  */
 const textColorMap = {
   'color.text': css({

package/src/internal/color-map.tsx

@@ -3,9 +3,9 @@
  *
  * The color map is used to map a background color token to a matching text color that will meet contrast.
  *
- * @codegen <<SignedSource::43134d6abeba44006053eb83fc827e9b>>
+ * @codegen <<SignedSource::49cf3a9a4b6ea82d76f3d977759cac32>>
  * @codegenCommand yarn codegen-styles
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::d09e7cd13e24113267155813747b3bd4>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::815ddd719715ae06521cad06e1921e40>>
  */
 export default {
   'neutral.bold': 'inverse',

package/tmp/api-report-tmp.d.ts

@@ -60,6 +60,46 @@ const backgroundColorMap: {
 
 // @public (undocumented)
 const backgroundHoverColorMap: {
+    'accent.lime.subtlest': SerializedStyles;
+    'accent.lime.subtler': SerializedStyles;
+    'accent.lime.subtle': SerializedStyles;
+    'accent.lime.bolder': SerializedStyles;
+    'accent.red.subtlest': SerializedStyles;
+    'accent.red.subtler': SerializedStyles;
+    'accent.red.subtle': SerializedStyles;
+    'accent.red.bolder': SerializedStyles;
+    'accent.orange.subtlest': SerializedStyles;
+    'accent.orange.subtler': SerializedStyles;
+    'accent.orange.subtle': SerializedStyles;
+    'accent.orange.bolder': SerializedStyles;
+    'accent.yellow.subtlest': SerializedStyles;
+    'accent.yellow.subtler': SerializedStyles;
+    'accent.yellow.subtle': SerializedStyles;
+    'accent.yellow.bolder': SerializedStyles;
+    'accent.green.subtlest': SerializedStyles;
+    'accent.green.subtler': SerializedStyles;
+    'accent.green.subtle': SerializedStyles;
+    'accent.green.bolder': SerializedStyles;
+    'accent.teal.subtlest': SerializedStyles;
+    'accent.teal.subtler': SerializedStyles;
+    'accent.teal.subtle': SerializedStyles;
+    'accent.teal.bolder': SerializedStyles;
+    'accent.blue.subtlest': SerializedStyles;
+    'accent.blue.subtler': SerializedStyles;
+    'accent.blue.subtle': SerializedStyles;
+    'accent.blue.bolder': SerializedStyles;
+    'accent.purple.subtlest': SerializedStyles;
+    'accent.purple.subtler': SerializedStyles;
+    'accent.purple.subtle': SerializedStyles;
+    'accent.purple.bolder': SerializedStyles;
+    'accent.magenta.subtlest': SerializedStyles;
+    'accent.magenta.subtler': SerializedStyles;
+    'accent.magenta.subtle': SerializedStyles;
+    'accent.magenta.bolder': SerializedStyles;
+    'accent.gray.subtlest': SerializedStyles;
+    'accent.gray.subtler': SerializedStyles;
+    'accent.gray.subtle': SerializedStyles;
+    'accent.gray.bolder': SerializedStyles;
     input: SerializedStyles;
     'inverse.subtle': SerializedStyles;
     neutral: SerializedStyles;

package/tsconfig.app.json

@@ -0,0 +1,42 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "include": ["./src/**/*.ts", "./src/**/*.tsx"],
+  "exclude": [
+    "**/docs/**/*",
+    "**/__tests__/**/*",
+    "**/vr-tests/**/*",
+    "**/__perf__/**/*",
+    "**/*.test.*",
+    "**/test.*",
+    "**/test-*",
+    "**/examples.ts",
+    "**/examples.tsx",
+    "**/examples/*.ts",
+    "**/examples/*.tsx",
+    "**/examples/**/*.ts",
+    "**/examples/**/*.tsx",
+    "**/storybook/**/*",
+    "**/constellation/**/*",
+    ".storybook/*",
+    "./__fixtures__/**/*",
+    "./__generated__/**/*",
+    "./mocks/**/*",
+    "./__mocks__/**/*",
+    "**/mock.*",
+    "**/codemods/**/*.ts",
+    "**/codemods/**/*.tsx"
+  ],
+  "compilerOptions": {
+    "baseUrl": "",
+    "composite": true,
+    "outDir": "../../../tsDist/@atlaskit__ds-explorations/app"
+  },
+  "references": [
+    {
+      "path": "../tokens/tsconfig.app.json"
+    },
+    {
+      "path": "../codegen/tsconfig.app.json"
+    }
+  ]
+}

package/tsconfig.dev.json

@@ -0,0 +1,88 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "include": [
+    "**/docs/**/*",
+    "**/__tests__/**/*",
+    "**/vr-tests/**/*",
+    "**/__perf__/**/*",
+    "**/*.test.*",
+    "**/test.*",
+    "**/test-*",
+    "**/examples.ts",
+    "**/examples.tsx",
+    "**/examples/*.ts",
+    "**/examples/*.tsx",
+    "**/examples/**/*.ts",
+    "**/examples/**/*.tsx",
+    "**/storybook/**/*",
+    "**/constellation/**/*",
+    ".storybook/*",
+    "./__fixtures__/**/*",
+    "./__generated__/**/*",
+    "./mocks/**/*",
+    "./__mocks__/**/*",
+    "**/mock.*",
+    "**/codemods/**/*.ts",
+    "**/codemods/**/*.tsx",
+    "./scripts/**/*"
+  ],
+  "exclude": ["./dist/**/*", "./build/**/*", "./node_modules/**/*"],
+  "compilerOptions": {
+    "baseUrl": "",
+    "composite": true,
+    "outDir": "../../../tsDist/@atlaskit__ds-explorations/dev"
+  },
+  "references": [
+    {
+      "path": "tsconfig.app.json"
+    },
+    {
+      "path": "../../../build/test-tooling/gemini-visual-regression/tsconfig.app.json"
+    },
+    {
+      "path": "../badge/tsconfig.app.json"
+    },
+    {
+      "path": "../button/tsconfig.app.json"
+    },
+    {
+      "path": "../code/tsconfig.app.json"
+    },
+    {
+      "path": "../../../build/website/docs/tsconfig.app.json"
+    },
+    {
+      "path": "../ds-lib/tsconfig.app.json"
+    },
+    {
+      "path": "../focus-ring/tsconfig.app.json"
+    },
+    {
+      "path": "../heading/tsconfig.app.json"
+    },
+    {
+      "path": "../icon/tsconfig.app.json"
+    },
+    {
+      "path": "../lozenge/tsconfig.app.json"
+    },
+    {
+      "path": "../primitives/tsconfig.app.json"
+    },
+    {
+      "path": "../section-message/tsconfig.app.json"
+    },
+    {
+      "path": "../textfield/tsconfig.app.json"
+    },
+    {
+      "path": "../theme/tsconfig.app.json"
+    },
+    {
+      "path": "../tokens/tsconfig.app.json"
+    },
+    {
+      "path": "../../../build/test-tooling/visual-regression/tsconfig.app.json"
+    }
+  ]
+}