@atlaskit/ds-explorations 3.5.0 → 3.5.2

package/src/components/text.partial.tsx

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { createContext, FC, Fragment, ReactNode, useContext } from 'react';
+import { createContext, type FC, Fragment, type ReactNode, useContext } from 'react';
 
 import { css, jsx } from '@emotion/react';
 import invariant from 'tiny-invariant';
@@ -189,127 +189,127 @@ export default Text;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::203ec574e582b95619dc5a1ff65925c7>>
+ * @codegen <<SignedSource::c5a6cec604462dc4b48aaf1160b83e59>>
  * @codegenId typography
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography-adg3.tsx <<SignedSource::bfa028f044b5112b83b8e52861d48b2f>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography-adg3.tsx <<SignedSource::bf3349cf2247aa44fbac47c953fc03b5>>
  */
 const fontSizeMap = {
-  'size.050': css({
-    fontSize: token('font.size.050', '11px'),
-  }),
-  'size.075': css({
-    fontSize: token('font.size.075', '12px'),
-  }),
-  'size.100': css({
-    fontSize: token('font.size.100', '14px'),
-  }),
-  'size.200': css({
-    fontSize: token('font.size.200', '16px'),
-  }),
-  'size.300': css({
-    fontSize: token('font.size.300', '20px'),
-  }),
-  'size.400': css({
-    fontSize: token('font.size.400', '24px'),
-  }),
-  'size.500': css({
-    fontSize: token('font.size.500', '29px'),
-  }),
-  'size.600': css({
-    fontSize: token('font.size.600', '35px'),
-  }),
+    'size.050': css({
+        fontSize: token('font.size.050', '11px'),
+    }),
+    'size.075': css({
+        fontSize: token('font.size.075', '12px'),
+    }),
+    'size.100': css({
+        fontSize: token('font.size.100', '14px'),
+    }),
+    'size.200': css({
+        fontSize: token('font.size.200', '16px'),
+    }),
+    'size.300': css({
+        fontSize: token('font.size.300', '20px'),
+    }),
+    'size.400': css({
+        fontSize: token('font.size.400', '24px'),
+    }),
+    'size.500': css({
+        fontSize: token('font.size.500', '29px'),
+    }),
+    'size.600': css({
+        fontSize: token('font.size.600', '35px'),
+    }),
 };
 
 export type FontSize = keyof typeof fontSizeMap;
 
 const fontWeightMap = {
-  bold: css({
-    fontWeight: token('font.weight.bold', '700'),
-  }),
-  medium: css({
-    fontWeight: token('font.weight.medium', '500'),
-  }),
-  regular: css({
-    fontWeight: token('font.weight.regular', '400'),
-  }),
-  semibold: css({
-    fontWeight: token('font.weight.semibold', '600'),
-  }),
+    bold: css({
+        fontWeight: token('font.weight.bold', '700'),
+    }),
+    medium: css({
+        fontWeight: token('font.weight.medium', '500'),
+    }),
+    regular: css({
+        fontWeight: token('font.weight.regular', '400'),
+    }),
+    semibold: css({
+        fontWeight: token('font.weight.semibold', '600'),
+    }),
 };
 
 export type FontWeight = keyof typeof fontWeightMap;
 
 const fontFamilyMap = {
-  body: css({
-    fontFamily: token(
-      'font.family.body',
-      'ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif',
-    ),
-  }),
-  'brand.body': css({
-    fontFamily: token(
-      'font.family.brand.body',
-      '"Charlie Text", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif',
-    ),
-  }),
-  'brand.heading': css({
-    fontFamily: token(
-      'font.family.brand.heading',
-      '"Charlie Display", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif',
-    ),
-  }),
-  code: css({
-    fontFamily: token(
-      'font.family.code',
-      'ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace',
-    ),
-  }),
-  heading: css({
-    fontFamily: token(
-      'font.family.heading',
-      'ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif',
-    ),
-  }),
-  monospace: css({
-    fontFamily: token(
-      'font.family.monospace',
-      'ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace',
-    ),
-  }),
-  sans: css({
-    fontFamily: token(
-      'font.family.sans',
-      '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
-    ),
-  }),
+    body: css({
+        fontFamily: token(
+            'font.family.body',
+            'ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif',
+        ),
+    }),
+    'brand.body': css({
+        fontFamily: token(
+            'font.family.brand.body',
+            '"Charlie Text", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif',
+        ),
+    }),
+    'brand.heading': css({
+        fontFamily: token(
+            'font.family.brand.heading',
+            '"Charlie Display", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif',
+        ),
+    }),
+    code: css({
+        fontFamily: token(
+            'font.family.code',
+            'ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace',
+        ),
+    }),
+    heading: css({
+        fontFamily: token(
+            'font.family.heading',
+            'ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif',
+        ),
+    }),
+    monospace: css({
+        fontFamily: token(
+            'font.family.monospace',
+            'ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace',
+        ),
+    }),
+    sans: css({
+        fontFamily: token(
+            'font.family.sans',
+            '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
+        ),
+    }),
 };
 
 export type FontFamily = keyof typeof fontFamilyMap;
 
 const lineHeightMap = {
-  'lineHeight.1': css({
-    lineHeight: token('font.lineHeight.1', '1'),
-  }),
-  'lineHeight.100': css({
-    lineHeight: token('font.lineHeight.100', '16px'),
-  }),
-  'lineHeight.200': css({
-    lineHeight: token('font.lineHeight.200', '20px'),
-  }),
-  'lineHeight.300': css({
-    lineHeight: token('font.lineHeight.300', '24px'),
-  }),
-  'lineHeight.400': css({
-    lineHeight: token('font.lineHeight.400', '28px'),
-  }),
-  'lineHeight.500': css({
-    lineHeight: token('font.lineHeight.500', '32px'),
-  }),
-  'lineHeight.600': css({
-    lineHeight: token('font.lineHeight.600', '40px'),
-  }),
+    'lineHeight.1': css({
+        lineHeight: token('font.lineHeight.1', '1'),
+    }),
+    'lineHeight.100': css({
+        lineHeight: token('font.lineHeight.100', '16px'),
+    }),
+    'lineHeight.200': css({
+        lineHeight: token('font.lineHeight.200', '20px'),
+    }),
+    'lineHeight.300': css({
+        lineHeight: token('font.lineHeight.300', '24px'),
+    }),
+    'lineHeight.400': css({
+        lineHeight: token('font.lineHeight.400', '28px'),
+    }),
+    'lineHeight.500': css({
+        lineHeight: token('font.lineHeight.500', '32px'),
+    }),
+    'lineHeight.600': css({
+        lineHeight: token('font.lineHeight.600', '40px'),
+    }),
 };
 
 export type LineHeight = keyof typeof lineHeightMap;
@@ -320,52 +320,52 @@ export type LineHeight = keyof typeof lineHeightMap;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::607a969c3ff0c84233d12412b1c104b4>>
+ * @codegen <<SignedSource::db9171c09481d187d83bb01192c16c41>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["text"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::eface03157c2df5c1b3b305911d3ed4d>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f27d1519d51cc4a85383a00907847774>>
  */
 const textColorMap = {
-  'color.text': css({
-    color: token('color.text', '#172B4D'),
-  }),
-  disabled: css({
-    color: token('color.text.disabled', '#A5ADBA'),
-  }),
-  inverse: css({
-    color: token('color.text.inverse', '#FFFFFF'),
-  }),
-  selected: css({
-    color: token('color.text.selected', '#0052CC'),
-  }),
-  brand: css({
-    color: token('color.text.brand', '#0065FF'),
-  }),
-  danger: css({
-    color: token('color.text.danger', '#DE350B'),
-  }),
-  warning: css({
-    color: token('color.text.warning', '#974F0C'),
-  }),
-  'warning.inverse': css({
-    color: token('color.text.warning.inverse', '#172B4D'),
-  }),
-  success: css({
-    color: token('color.text.success', '#006644'),
-  }),
-  discovery: css({
-    color: token('color.text.discovery', '#403294'),
-  }),
-  information: css({
-    color: token('color.text.information', '#0052CC'),
-  }),
-  subtlest: css({
-    color: token('color.text.subtlest', '#7A869A'),
-  }),
-  subtle: css({
-    color: token('color.text.subtle', '#42526E'),
-  }),
+    'color.text': css({
+        color: token('color.text', '#172B4D'),
+    }),
+    disabled: css({
+        color: token('color.text.disabled', '#A5ADBA'),
+    }),
+    inverse: css({
+        color: token('color.text.inverse', '#FFFFFF'),
+    }),
+    selected: css({
+        color: token('color.text.selected', '#0052CC'),
+    }),
+    brand: css({
+        color: token('color.text.brand', '#0065FF'),
+    }),
+    danger: css({
+        color: token('color.text.danger', '#DE350B'),
+    }),
+    warning: css({
+        color: token('color.text.warning', '#974F0C'),
+    }),
+    'warning.inverse': css({
+        color: token('color.text.warning.inverse', '#172B4D'),
+    }),
+    success: css({
+        color: token('color.text.success', '#006644'),
+    }),
+    discovery: css({
+        color: token('color.text.discovery', '#403294'),
+    }),
+    information: css({
+        color: token('color.text.information', '#0052CC'),
+    }),
+    subtlest: css({
+        color: token('color.text.subtlest', '#7A869A'),
+    }),
+    subtle: css({
+        color: token('color.text.subtle', '#42526E'),
+    }),
 } as const;
 
 export type TextColor = keyof typeof textColorMap;

package/src/internal/color-map.tsx

@@ -3,36 +3,36 @@
  *
  * The color map is used to map a background color token to a matching text color that will meet contrast.
  *
- * @codegen <<SignedSource::6d974d81ce795e3ce5be6c5035a69fb4>>
+ * @codegen <<SignedSource::4069cec92f6504471d42a7c6cc0f7930>>
  * @codegenCommand yarn codegen-styles
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::eface03157c2df5c1b3b305911d3ed4d>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f27d1519d51cc4a85383a00907847774>>
  */
 export default {
-  'neutral.bold': 'inverse',
-  'neutral.bold.hovered': 'inverse',
-  'neutral.bold.pressed': 'inverse',
-  'selected.bold': 'inverse',
-  'selected.bold.hovered': 'inverse',
-  'selected.bold.pressed': 'inverse',
-  'brand.bold': 'inverse',
-  'brand.bold.hovered': 'inverse',
-  'brand.bold.pressed': 'inverse',
-  'brand.boldest': 'inverse',
-  'brand.boldest.hovered': 'inverse',
-  'brand.boldest.pressed': 'inverse',
-  'danger.bold': 'inverse',
-  'danger.bold.hovered': 'inverse',
-  'danger.bold.pressed': 'inverse',
-  'warning.bold': 'warning.inverse',
-  'warning.bold.hovered': 'warning.inverse',
-  'warning.bold.pressed': 'warning.inverse',
-  'success.bold': 'inverse',
-  'success.bold.hovered': 'inverse',
-  'success.bold.pressed': 'inverse',
-  'discovery.bold': 'inverse',
-  'discovery.bold.hovered': 'inverse',
-  'discovery.bold.pressed': 'inverse',
-  'information.bold': 'inverse',
-  'information.bold.hovered': 'inverse',
-  'information.bold.pressed': 'inverse',
+    'neutral.bold': 'inverse',
+    'neutral.bold.hovered': 'inverse',
+    'neutral.bold.pressed': 'inverse',
+    'selected.bold': 'inverse',
+    'selected.bold.hovered': 'inverse',
+    'selected.bold.pressed': 'inverse',
+    'brand.bold': 'inverse',
+    'brand.bold.hovered': 'inverse',
+    'brand.bold.pressed': 'inverse',
+    'brand.boldest': 'inverse',
+    'brand.boldest.hovered': 'inverse',
+    'brand.boldest.pressed': 'inverse',
+    'danger.bold': 'inverse',
+    'danger.bold.hovered': 'inverse',
+    'danger.bold.pressed': 'inverse',
+    'warning.bold': 'warning.inverse',
+    'warning.bold.hovered': 'warning.inverse',
+    'warning.bold.pressed': 'warning.inverse',
+    'success.bold': 'inverse',
+    'success.bold.hovered': 'inverse',
+    'success.bold.pressed': 'inverse',
+    'discovery.bold': 'inverse',
+    'discovery.bold.hovered': 'inverse',
+    'discovery.bold.pressed': 'inverse',
+    'information.bold': 'inverse',
+    'information.bold.hovered': 'inverse',
+    'information.bold.pressed': 'inverse',
 } as const;

package/src/internal/spacing-scale.tsx

@@ -3,22 +3,22 @@
  *
  * Internal codegen of the spacing scale values. Only used for internal examples.
  *
- * @codegen <<SignedSource::885d6c601dfa9fccaf33a7bd461ef59d>>
+ * @codegen <<SignedSource::33634cd9767c59b9aaaf64fc6f44f852>>
  * @codegenCommand yarn codegen-styles
  */
 export const spacingScale = [
-  'space.0',
-  'space.025',
-  'space.050',
-  'space.075',
-  'space.100',
-  'space.150',
-  'space.200',
-  'space.250',
-  'space.300',
-  'space.400',
-  'space.500',
-  'space.600',
-  'space.800',
-  'space.1000',
+    'space.0',
+    'space.025',
+    'space.050',
+    'space.075',
+    'space.100',
+    'space.150',
+    'space.200',
+    'space.250',
+    'space.300',
+    'space.400',
+    'space.500',
+    'space.600',
+    'space.800',
+    'space.1000',
 ] as const;

package/tsconfig.app.json

@@ -32,6 +32,9 @@
     "outDir": "../../../tsDist/@atlaskit__ds-explorations/app"
   },
   "references": [
+    {
+      "path": "../../../build/formatting/tsconfig.app.json"
+    },
     {
       "path": "../tokens/tsconfig.app.json"
     },

package/tsconfig.dev.json

@@ -36,6 +36,9 @@
     {
       "path": "tsconfig.app.json"
     },
+    {
+      "path": "../../../build/formatting/tsconfig.app.json"
+    },
     {
       "path": "../../../build/test-tooling/gemini-visual-regression/tsconfig.app.json"
     },