@atlaskit/ds-explorations 2.2.12 → 2.2.13

package/report.api.md

@@ -71,6 +71,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/scripts/__tests__/__snapshots__/codegen.test.tsx.snap

@@ -141,6 +141,208 @@ export type BorderColor = keyof typeof borderColorMap;
 
 exports[`@atlaskit/design-system-explorations border styles are generated correctly 2`] = `
 "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') },
   }),
@@ -239,6 +441,208 @@ exports[`@atlaskit/design-system-explorations border styles are generated correc
 };
 
 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/box.partial.tsx

@@ -510,11 +510,11 @@ export type PaddingInline = keyof typeof paddingInlineMap;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::3c02977212ac78f3a0f9de93e0a253c2>>
+ * @codegen <<SignedSource::fe1f557b04d44d23dfae5c9494ccddcc>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["border", "background", "shadow"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::65311fc2a6a35bb34b99c859362ac840>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::815ddd719715ae06521cad06e1921e40>>
  */
 const borderColorMap = {
   'color.border': css({