@atlaskit/tokens 1.25.1 → 1.26.0

package/dist/cjs/tokens/atlassian-light-increased-contrast/color/chart.js

@@ -0,0 +1,418 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var color = {
+  color: {
+    chart: {
+      brand: {
+        '[default]': {
+          value: 'Blue700'
+        },
+        // TODO: Confirm. This token wasn't included in theme design, but color.chart.brand.bold was... and that token doesn't exist?
+        // Assuming it's meant to be color.chart.brand.hovered
+        hovered: {
+          value: 'Blue800'
+        }
+      },
+      neutral: {
+        '[default]': {
+          value: 'Neutral700'
+        },
+        hovered: {
+          value: 'Neutral800'
+        }
+      },
+      success: {
+        '[default]': {
+          '[default]': {
+            value: 'Green800'
+          },
+          // TODO: Confirm. No hovered colors included in theme design for many tokens here but I've stepped them up by one
+          // or they won't have a color difference to default states
+          hovered: {
+            value: 'Green900'
+          }
+        },
+        bold: {
+          '[default]': {
+            value: 'Green900'
+          },
+          hovered: {
+            value: 'Green1000'
+          }
+        }
+      },
+      danger: {
+        '[default]': {
+          '[default]': {
+            value: 'Red700'
+          },
+          hovered: {
+            value: 'Red800'
+          }
+        },
+        bold: {
+          '[default]': {
+            value: 'Red900'
+          },
+          hovered: {
+            value: 'Red1000'
+          }
+        }
+      },
+      warning: {
+        '[default]': {
+          '[default]': {
+            value: 'Yellow800'
+          },
+          hovered: {
+            value: 'Yellow900'
+          }
+        },
+        bold: {
+          '[default]': {
+            value: 'Yellow900'
+          },
+          hovered: {
+            value: 'Yellow1000'
+          }
+        }
+      },
+      information: {
+        '[default]': {
+          '[default]': {
+            value: 'Blue700'
+          },
+          hovered: {
+            value: 'Blue800'
+          }
+        },
+        bold: {
+          '[default]': {
+            value: 'Blue900'
+          },
+          hovered: {
+            value: 'Blue1000'
+          }
+        }
+      },
+      discovery: {
+        '[default]': {
+          '[default]': {
+            value: 'Purple700'
+          },
+          hovered: {
+            value: 'Purple800'
+          }
+        },
+        bold: {
+          '[default]': {
+            value: 'Purple900'
+          },
+          hovered: {
+            value: 'Purple1000'
+          }
+        }
+      },
+      categorical: {
+        1: {
+          '[default]': {
+            value: 'Teal800'
+          },
+          hovered: {
+            value: 'Teal900'
+          }
+        },
+        3: {
+          '[default]': {
+            value: 'Orange800'
+          },
+          hovered: {
+            value: 'Orange900'
+          }
+        },
+        6: {
+          '[default]': {
+            value: 'Purple800'
+          },
+          hovered: {
+            value: 'Purple900'
+          }
+        }
+      },
+      blue: {
+        bold: {
+          '[default]': {
+            value: 'Blue800'
+          },
+          hovered: {
+            value: 'Blue900'
+          }
+        },
+        bolder: {
+          '[default]': {
+            value: 'Blue900'
+          },
+          hovered: {
+            value: 'Blue1000'
+          }
+        },
+        boldest: {
+          '[default]': {
+            value: 'Blue1000'
+          },
+          hovered: {
+            // @ts-expect-error TODO: Consider extending palette. Uses value outside range of palettes (would be Blue1100).
+            value: '#022353'
+          }
+        }
+      },
+      red: {
+        bold: {
+          '[default]': {
+            value: 'Red800'
+          },
+          hovered: {
+            value: 'Red900'
+          }
+        },
+        bolder: {
+          '[default]': {
+            value: 'Red900'
+          },
+          hovered: {
+            value: 'Red1000'
+          }
+        },
+        boldest: {
+          '[default]': {
+            value: 'Red1000'
+          },
+          hovered: {
+            // @ts-expect-error TODO: Consider extending palette. Uses value outside range of palettes (would be Red1100).
+            value: '#49120C'
+          }
+        }
+      },
+      orange: {
+        bold: {
+          '[default]': {
+            value: 'Orange800'
+          },
+          hovered: {
+            value: 'Orange900'
+          }
+        },
+        bolder: {
+          '[default]': {
+            value: 'Orange900'
+          },
+          hovered: {
+            value: 'Orange1000'
+          }
+        },
+        boldest: {
+          '[default]': {
+            value: 'Orange1000'
+          },
+          hovered: {
+            // @ts-expect-error TODO: Consider extending palette. Uses value outside range of palettes (would be Orange1100).
+            value: '#3E2108'
+          }
+        }
+      },
+      yellow: {
+        bold: {
+          '[default]': {
+            value: 'Yellow800'
+          },
+          hovered: {
+            value: 'Yellow900'
+          }
+        },
+        bolder: {
+          '[default]': {
+            value: 'Yellow900'
+          },
+          hovered: {
+            value: 'Yellow1000'
+          }
+        },
+        boldest: {
+          '[default]': {
+            value: 'Yellow1000'
+          },
+          hovered: {
+            // @ts-expect-error TODO: Consider extending palette. Uses value outside range of palettes (would be Yellow1100).
+            value: '#342800'
+          }
+        }
+      },
+      green: {
+        bold: {
+          '[default]': {
+            value: 'Green800'
+          },
+          hovered: {
+            value: 'Green900'
+          }
+        },
+        bolder: {
+          '[default]': {
+            value: 'Green900'
+          },
+          hovered: {
+            value: 'Green1000'
+          }
+        },
+        boldest: {
+          '[default]': {
+            value: 'Green1000'
+          },
+          hovered: {
+            // @ts-expect-error TODO: Consider extending palette. Uses value outside range of palettes (would be Green1100).
+            value: '#0F3324'
+          }
+        }
+      },
+      teal: {
+        bold: {
+          '[default]': {
+            value: 'Teal800'
+          },
+          hovered: {
+            value: 'Teal900'
+          }
+        },
+        bolder: {
+          '[default]': {
+            value: 'Teal900'
+          },
+          hovered: {
+            value: 'Teal1000'
+          }
+        },
+        boldest: {
+          '[default]': {
+            value: 'Teal1000'
+          },
+          hovered: {
+            // @ts-expect-error TODO: Consider extending palette. Uses value outside range of palettes (would be Teal1100).
+            value: '#103034'
+          }
+        }
+      },
+      purple: {
+        bold: {
+          '[default]': {
+            value: 'Purple800'
+          },
+          hovered: {
+            value: 'Purple900'
+          }
+        },
+        bolder: {
+          '[default]': {
+            value: 'Purple900'
+          },
+          hovered: {
+            value: 'Purple1000'
+          }
+        },
+        boldest: {
+          '[default]': {
+            value: 'Purple1000'
+          },
+          hovered: {
+            // @ts-expect-error TODO: Consider extending palette. Uses value outside range of palettes (would be Purple1100).
+            value: '#211A47'
+          }
+        }
+      },
+      magenta: {
+        bold: {
+          '[default]': {
+            value: 'Magenta800'
+          },
+          hovered: {
+            value: 'Magenta900'
+          }
+        },
+        bolder: {
+          '[default]': {
+            value: 'Magenta900'
+          },
+          hovered: {
+            value: 'Magenta1000'
+          }
+        },
+        boldest: {
+          '[default]': {
+            value: 'Magenta1000'
+          },
+          hovered: {
+            // @ts-expect-error TODO: Consider extending palette. Uses value outside range of palettes (would be Magenta1100).
+            value: '#37172A'
+          }
+        }
+      },
+      lime: {
+        bold: {
+          '[default]': {
+            value: 'Lime800'
+          },
+          hovered: {
+            value: 'Lime900'
+          }
+        },
+        bolder: {
+          '[default]': {
+            value: 'Lime900'
+          },
+          hovered: {
+            value: 'Lime1000'
+          }
+        },
+        boldest: {
+          '[default]': {
+            value: 'Lime1000'
+          },
+          hovered: {
+            // @ts-expect-error TODO: Consider extending palette. Uses value outside range of palettes (would be Lime1100).
+            value: '#233013'
+          }
+        }
+      },
+      gray: {
+        bold: {
+          '[default]': {
+            value: 'Neutral700'
+          },
+          hovered: {
+            value: 'Neutral800'
+          }
+        },
+        bolder: {
+          '[default]': {
+            value: 'Neutral800'
+          },
+          hovered: {
+            value: 'Neutral900'
+          }
+        },
+        boldest: {
+          '[default]': {
+            value: 'Neutral900'
+          },
+          hovered: {
+            value: 'Neutral1000'
+          }
+        }
+      }
+    }
+  }
+};
+var _default = exports.default = color;

package/dist/cjs/tokens/atlassian-light-increased-contrast/color/icon.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var color = {
+  color: {
+    icon: {
+      '[default]': {
+        value: 'Neutral1000'
+      },
+      subtle: {
+        value: 'Neutral900'
+      },
+      // TODO: Confirm - was not included in theme design but seems like it should be darker
+      // disabled: {
+      //   value: 'Neutral400A',
+      // },
+      brand: {
+        value: 'Blue800'
+      },
+      selected: {
+        value: 'Blue800'
+      },
+      danger: {
+        value: 'Red700'
+      },
+      warning: {
+        '[default]': {
+          value: 'Orange800'
+        },
+        inverse: {
+          value: 'Neutral0'
+        }
+      },
+      success: {
+        value: 'Green800'
+      },
+      discovery: {
+        value: 'Purple700'
+      },
+      information: {
+        value: 'Blue800'
+      }
+    }
+  }
+};
+var _default = exports.default = color;

package/dist/cjs/tokens/atlassian-light-increased-contrast/color/interaction.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var color = {
+  color: {
+    interaction: {
+      // TODO: Confirm - was not included in theme design but seems like it should be darker
+      // hovered: {
+      //   // @ts-ignore temporary values
+      //   value: '#00000029',
+      // },
+      // pressed: {
+      //   // @ts-ignore temporary values
+      //   value: '#00000052',
+      // },
+    }
+  }
+};
+var _default = exports.default = color;

package/dist/cjs/tokens/atlassian-light-increased-contrast/color/skeleton.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var color = {
+  color: {
+    skeleton: {
+      // TODO: Confirm - was not included in theme design but seems like it should be darker
+      // but I think they should definitely be darker?
+      // '[default]': {
+      //   value: 'Neutral200A',
+      // },
+      // subtle: {
+      //   value: 'Neutral100A',
+      // },
+    }
+  }
+};
+var _default = exports.default = color;

package/dist/cjs/tokens/atlassian-light-increased-contrast/color/text.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var color = {
+  color: {
+    text: {
+      '[default]': {
+        value: 'Neutral1100'
+      },
+      subtle: {
+        value: 'Neutral1000'
+      },
+      subtlest: {
+        value: 'Neutral900'
+      },
+      brand: {
+        value: 'Blue900'
+      },
+      selected: {
+        value: 'Blue900'
+      },
+      danger: {
+        value: 'Red900'
+      },
+      warning: {
+        '[default]': {
+          value: 'Orange900'
+        },
+        inverse: {
+          value: 'Neutral0'
+        }
+      },
+      success: {
+        value: 'Green900'
+      },
+      information: {
+        value: 'Blue900'
+      },
+      discovery: {
+        value: 'Purple900'
+      }
+    },
+    link: {
+      '[default]': {
+        value: 'Blue900'
+      },
+      pressed: {
+        value: 'Blue1000'
+      }
+    }
+  }
+};
+var _default = exports.default = color;

package/dist/cjs/tokens/atlassian-light-increased-contrast/elevation/shadow.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var shadow = {
+  elevation: {
+    shadow: {
+      raised: {
+        value: [{
+          radius: 0,
+          spread: 1,
+          offset: {
+            x: 0,
+            y: 0
+          },
+          color: 'Neutral1100',
+          opacity: 0.5,
+          inset: true
+        }]
+      },
+      // TODO: Confirm - overflow not included in theme design
+      // overflow: {
+      //   '[default]': {
+      //     value: [
+      //       {
+      //         radius: 8,
+      //         offset: { x: 0, y: 0 },
+      //         color: 'Neutral1100',
+      //         opacity: 0.16,
+      //       },
+      //       {
+      //         radius: 1,
+      //         offset: { x: 0, y: 0 },
+      //         color: 'Neutral1100',
+      //         opacity: 0.12,
+      //       },
+      //     ],
+      //   },
+      //   // @ts-ignore no current palette colour for this yet
+      //   spread: { value: '#091e4229' },
+      //   // @ts-ignore no current palette colour for this yet
+      //   perimeter: { value: '#091e421f' },
+      // },
+      overlay: {
+        value: [{
+          radius: 0,
+          spread: 1,
+          offset: {
+            x: 0,
+            y: 0
+          },
+          color: 'Neutral1100',
+          opacity: 0.5,
+          inset: true
+        }]
+      }
+    }
+  }
+};
+var _default = exports.default = shadow;

package/dist/cjs/tokens/atlassian-light-increased-contrast/elevation/surface.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var elevation = {
+  elevation: {
+    surface: {
+      // TODO: Confirm - seems too light in Jira issue view. Difficult to identify columns
+      sunken: {
+        // @ts-expect-error TODO: Consider extending palette. Uses value outside range of palettes (would be Neutral50).
+        value: '#FCFDFE'
+      }
+    }
+  }
+};
+var _default = exports.default = elevation;

package/dist/cjs/utils/configure-page.js

@@ -6,8 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = configurePage;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _getThemeHtmlAttrs = _interopRequireDefault(require("../get-theme-html-attrs"));
 var _colorModeListeners = _interopRequireDefault(require("./color-mode-listeners"));
+var _contrastModeListeners = _interopRequireDefault(require("./contrast-mode-listeners"));
 /**
  * Given ThemeState, sets appropriate html attributes on the documentElement,
  * adds a listener to keep colorMode updated, and returns a function to unbind.
@@ -21,6 +23,16 @@ function configurePage(themeState) {
   } else {
     _colorModeListeners.default.unbind();
   }
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.increased-contrast-themes')) {
+    if (themeState.contrastMode === 'auto') {
+      // Set contrastMode based on the user preference
+      themeState.contrastMode = _contrastModeListeners.default.getContrastMode();
+      // Bind a listener (if one doesn't already exist) to keep contrastMode updated
+      _contrastModeListeners.default.bind();
+    } else {
+      _contrastModeListeners.default.unbind();
+    }
+  }
   var themeAttributes = (0, _getThemeHtmlAttrs.default)(themeState);
   Object.entries(themeAttributes).forEach(function (_ref) {
     var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
@@ -29,6 +41,9 @@ function configurePage(themeState) {
     document.documentElement.setAttribute(key, value);
   });
   return function () {
-    return _colorModeListeners.default.unbind;
+    _colorModeListeners.default.unbind();
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.increased-contrast-themes')) {
+      _contrastModeListeners.default.unbind();
+    }
   };
 }