@atlaskit/ds-explorations 2.2.12 → 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::01dc580099e9b8257da4c8f610e7874c>>
+ * @codegen <<SignedSource::03b3f0bf0d4f1326c6bfa087f92bef36>>
  * @codegenId interactions
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["background"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::65311fc2a6a35bb34b99c859362ac840>>
+ * @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

@@ -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::8a6efbd43991cb2ebd97bd5eed33e192>>
+ * @codegen <<SignedSource::d2da3ae653a14d48ae7649d16e323e40>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["text"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::65311fc2a6a35bb34b99c859362ac840>>
+ * @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::1884888c7b0fc397963699c7902aaec7>>
+ * @codegen <<SignedSource::49cf3a9a4b6ea82d76f3d977759cac32>>
  * @codegenCommand yarn codegen-styles
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::65311fc2a6a35bb34b99c859362ac840>>
+ * @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;