@atlaskit/checkbox 12.3.6 → 12.3.9

package/dist/es2019/internal/styles.js

@@ -1,225 +0,0 @@
-import { css } from '@emotion/core';
-import { B100, B200, B300, B400, B50, B75, DN10, DN200, DN30, DN80, DN90, N10, N20, N30, N40, N70, R300 } from '@atlaskit/theme/colors';
-const checkboxStyles = css`
-  /* Make the input invisible */
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  margin: 0;
-  /* Necessary to hide correctly on mobile Safari */
-  border: none;
-  width: 0px;
-  height: 0px;
-  /* Necessary to hide focus ring on Firefox */
-  outline: none;
-
-  /*
-    Change the variables --checkbox-background-color, --checkbox-border-color
-    and --checkbox-tick-color according to user interactions.
-    All other variables are constant.
-    All styles from the input target the sibling svg.
-  */
-  & + svg {
-    --checkbox-background-color: var(--local-background);
-    --checkbox-border-color: var(--local-border);
-    --checkbox-tick-color: var(--local-tick-rest);
-    /* Color changes the background color */
-    color: var(--checkbox-background-color);
-    /* Fill changes the tick color */
-    fill: var(--checkbox-tick-color);
-    transition: color 0.2s ease-in-out, fill 0.2s ease-in-out;
-    flex-shrink: 0;
-    /* If the label is multiple lines, don't center the checkbox */
-    align-self: flex-start;
-  }
-  & + svg rect:first-of-type {
-    /* Stroke changes the color of the border */
-    stroke: var(--checkbox-border-color);
-    stroke-width: 2px;
-    transition: stroke 0.2s ease-in-out;
-  }
-
-  /* Styles are listed in order of increasing specificity  */
-
-  /*
-    Compiled will order the pseudo classes by LVFHA
-    As the background colour changes on hover, it is okay for the
-    border focus colour to take precedence over hover.
-    && is used to make the focus styles more specific than the hover
-    styles
-   */
-  &&:focus + svg,
-  &&:checked:focus + svg {
-    --checkbox-border-color: var(--local-border-focus);
-  }
-
-  &:hover + svg {
-    --checkbox-background-color: var(--local-background-hover);
-    --checkbox-border-color: var(--local-border-hover);
-  }
-  &:checked:hover + svg {
-    --checkbox-background-color: var(--local-background-checked-hover);
-    --checkbox-border-color: var(--local-border-checked-hover);
-  }
-
-  &:checked + svg {
-    --checkbox-background-color: var(--local-background-checked);
-    --checkbox-border-color: var(--local-border-checked);
-    --checkbox-tick-color: var(--local-tick-checked);
-  }
-
-  &[data-invalid] + svg {
-    --checkbox-border-color: var(--local-border-invalid);
-  }
-  &:checked[data-invalid] + svg {
-    --checkbox-border-color: var(--local-border-checked-invalid);
-  }
-
-  &:active + svg {
-    --checkbox-background-color: var(--local-background-active);
-    --checkbox-border-color: var(--local-border-active);
-  }
-  &:checked:active + svg {
-    --checkbox-tick-color: var(--local-tick-active);
-    --checkbox-background-color: var(--local-background-active);
-    --checkbox-border-color: var(--local-border-active);
-  }
-
-  &:disabled + svg,
-  &:disabled:hover + svg,
-  &:disabled:focus + svg,
-  &:disabled:active + svg,
-  &:disabled[data-invalid] + svg {
-    --checkbox-background-color: var(--local-background-disabled);
-    --checkbox-border-color: var(--local-border-disabled);
-    pointer-events: none;
-    cursor: not-allowed;
-  }
-
-  &:disabled:checked + svg {
-    --checkbox-tick-color: var(--local-tick-disabled);
-  }
-
-  @media screen and (forced-colors: active) {
-    & + svg {
-      --checkbox-background-color: Canvas;
-      --checkbox-border-color: CanvasText;
-      --checkbox-tick-color: CanvasText;
-    }
-
-    &:checked + svg,
-    &:checked:hover + svg {
-      --checkbox-background-color: Canvas;
-      --checkbox-border-color: CanvasText;
-      --checkbox-tick-color: CanvasText;
-    }
-
-    &:focus + svg rect:first-of-type {
-      stroke: Highlight;
-    }
-
-    &[data-invalid] + svg {
-      --checkbox-border-color: Highlight;
-    }
-    &:checked[data-invalid] + svg {
-      --checkbox-border-color: Highlight;
-    }
-
-    &:disabled + svg,
-    &:disabled:hover + svg,
-    &:disabled:focus + svg,
-    &:disabled:active + svg,
-    &:disabled[data-invalid] + svg {
-      --checkbox-background-color: Canvas;
-      --checkbox-border-color: GrayText;
-      --checkbox-tick-color: GrayText;
-    }
-  }
-`;
-const checkboxThemeColors = {
-  light: {
-    borderColor: {
-      rest: `var(--ds-border-neutral, ${N40})`,
-      hovered: `var(--ds-border-neutral, ${N40})`,
-      disabled: `var(--ds-background-disabled, ${N20})`,
-      checked: `var(--ds-background-boldBrand-resting, ${B400})`,
-      active: `var(--ds-border-neutral, ${B50})`,
-      invalid: `var(--ds-iconBorder-danger, ${R300})`,
-      invalidAndChecked: `var(--ds-iconBorder-danger, ${R300})`,
-      focused: `var(--ds-border-focus, ${B100})`,
-      hoveredAndChecked: `var(--ds-background-boldBrand-hover, ${B300})`
-    },
-    boxColor: {
-      rest: `var(--ds-background-subtleBorderedNeutral-resting, ${N10})`,
-      hovered: `var(--ds-background-default, ${N30})`,
-      disabled: `var(--ds-background-disabled, ${N20})`,
-      active: `var(--ds-background-subtleBorderedNeutral-pressed, ${B50})`,
-      hoveredAndChecked: `var(--ds-background-boldBrand-hover, ${B300})`,
-      checked: `var(--ds-background-boldBrand-resting, ${B400})`
-    },
-    tickColor: {
-      disabledAndChecked: `var(--ds-text-disabled, ${N70})`,
-      activeAndChecked: `var(--ds-text-onBold, ${B400})`,
-      checked: `var(--ds-text-onBold, ${N10})`
-    }
-  },
-  dark: {
-    borderColor: {
-      rest: `var(--ds-border-neutral, ${DN80})`,
-      hovered: `var(--ds-border-neutral, ${DN200})`,
-      disabled: `var(--ds-background-disabled, ${DN10})`,
-      checked: `var(--ds-background-boldBrand-resting, ${B400})`,
-      active: `var(--ds-border-neutral, ${B200})`,
-      invalid: `var(--ds-iconBorder-danger, ${R300})`,
-      invalidAndChecked: `var(--ds-iconBorder-danger, ${R300})`,
-      focused: `var(--ds-border-focus, ${B75})`,
-      hoveredAndChecked: `var(--ds-background-boldBrand-hover, ${B75})`
-    },
-    boxColor: {
-      rest: `var(--ds-background-subtleBorderedNeutral-resting, ${DN10})`,
-      hovered: `var(--ds-background-default, ${DN30})`,
-      disabled: `var(--ds-background-disabled, ${DN10})`,
-      active: `var(--ds-background-subtleBorderedNeutral-pressed, ${B200})`,
-      hoveredAndChecked: `var(--ds-background-boldBrand-hover, ${B75})`,
-      checked: `var(--ds-background-boldBrand-resting, ${B400})`
-    },
-    tickColor: {
-      disabledAndChecked: `var(--ds-text-disabled, ${DN90})`,
-      activeAndChecked: `var(--ds-text-onBold, ${DN10})`,
-      checked: `var(--ds-text-onBold, ${DN10})`
-    }
-  }
-};
-
-const getCheckboxStyles = mode => {
-  const checkboxColors = checkboxThemeColors[mode];
-  const boxColor = checkboxColors.boxColor;
-  const tickColor = checkboxColors.tickColor;
-  const borderColor = checkboxColors.borderColor;
-  return [css`
-      & + svg {
-        --local-background: ${boxColor.rest};
-        --local-background-hover: ${boxColor.hovered};
-        --local-background-active: ${boxColor.active};
-        --local-background-checked: ${boxColor.checked};
-        --local-background-checked-hover: ${boxColor.hoveredAndChecked};
-        --local-background-disabled: ${boxColor.disabled};
-
-        --local-tick-rest: transparent;
-        --local-tick-checked: ${tickColor.checked};
-        --local-tick-disabled: ${tickColor.disabledAndChecked};
-        --local-tick-active: ${tickColor.activeAndChecked};
-
-        --local-border: ${borderColor.rest};
-        --local-border-disabled: ${borderColor.disabled};
-        --local-border-checked: ${borderColor.checked};
-        --local-border-active: ${borderColor.active};
-        --local-border-invalid: ${borderColor.invalid};
-        --local-border-focus: ${borderColor.focused};
-        --local-border-hover: ${borderColor.hovered};
-        --local-border-checked-hover: ${borderColor.hoveredAndChecked};
-        --local-border-checked-invalid: ${borderColor.invalidAndChecked};
-      }
-    `, checkboxStyles];
-};
-
-export default getCheckboxStyles;

package/dist/esm/internal/styles.js

@@ -1,71 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject, _templateObject2;
-
-import { css } from '@emotion/core';
-import { B100, B200, B300, B400, B50, B75, DN10, DN200, DN30, DN80, DN90, N10, N20, N30, N40, N70, R300 } from '@atlaskit/theme/colors';
-var checkboxStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* Make the input invisible */\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  margin: 0;\n  /* Necessary to hide correctly on mobile Safari */\n  border: none;\n  width: 0px;\n  height: 0px;\n  /* Necessary to hide focus ring on Firefox */\n  outline: none;\n\n  /*\n    Change the variables --checkbox-background-color, --checkbox-border-color\n    and --checkbox-tick-color according to user interactions.\n    All other variables are constant.\n    All styles from the input target the sibling svg.\n  */\n  & + svg {\n    --checkbox-background-color: var(--local-background);\n    --checkbox-border-color: var(--local-border);\n    --checkbox-tick-color: var(--local-tick-rest);\n    /* Color changes the background color */\n    color: var(--checkbox-background-color);\n    /* Fill changes the tick color */\n    fill: var(--checkbox-tick-color);\n    transition: color 0.2s ease-in-out, fill 0.2s ease-in-out;\n    flex-shrink: 0;\n    /* If the label is multiple lines, don't center the checkbox */\n    align-self: flex-start;\n  }\n  & + svg rect:first-of-type {\n    /* Stroke changes the color of the border */\n    stroke: var(--checkbox-border-color);\n    stroke-width: 2px;\n    transition: stroke 0.2s ease-in-out;\n  }\n\n  /* Styles are listed in order of increasing specificity  */\n\n  /*\n    Compiled will order the pseudo classes by LVFHA\n    As the background colour changes on hover, it is okay for the\n    border focus colour to take precedence over hover.\n    && is used to make the focus styles more specific than the hover\n    styles\n   */\n  &&:focus + svg,\n  &&:checked:focus + svg {\n    --checkbox-border-color: var(--local-border-focus);\n  }\n\n  &:hover + svg {\n    --checkbox-background-color: var(--local-background-hover);\n    --checkbox-border-color: var(--local-border-hover);\n  }\n  &:checked:hover + svg {\n    --checkbox-background-color: var(--local-background-checked-hover);\n    --checkbox-border-color: var(--local-border-checked-hover);\n  }\n\n  &:checked + svg {\n    --checkbox-background-color: var(--local-background-checked);\n    --checkbox-border-color: var(--local-border-checked);\n    --checkbox-tick-color: var(--local-tick-checked);\n  }\n\n  &[data-invalid] + svg {\n    --checkbox-border-color: var(--local-border-invalid);\n  }\n  &:checked[data-invalid] + svg {\n    --checkbox-border-color: var(--local-border-checked-invalid);\n  }\n\n  &:active + svg {\n    --checkbox-background-color: var(--local-background-active);\n    --checkbox-border-color: var(--local-border-active);\n  }\n  &:checked:active + svg {\n    --checkbox-tick-color: var(--local-tick-active);\n    --checkbox-background-color: var(--local-background-active);\n    --checkbox-border-color: var(--local-border-active);\n  }\n\n  &:disabled + svg,\n  &:disabled:hover + svg,\n  &:disabled:focus + svg,\n  &:disabled:active + svg,\n  &:disabled[data-invalid] + svg {\n    --checkbox-background-color: var(--local-background-disabled);\n    --checkbox-border-color: var(--local-border-disabled);\n    pointer-events: none;\n    cursor: not-allowed;\n  }\n\n  &:disabled:checked + svg {\n    --checkbox-tick-color: var(--local-tick-disabled);\n  }\n\n  @media screen and (forced-colors: active) {\n    & + svg {\n      --checkbox-background-color: Canvas;\n      --checkbox-border-color: CanvasText;\n      --checkbox-tick-color: CanvasText;\n    }\n\n    &:checked + svg,\n    &:checked:hover + svg {\n      --checkbox-background-color: Canvas;\n      --checkbox-border-color: CanvasText;\n      --checkbox-tick-color: CanvasText;\n    }\n\n    &:focus + svg rect:first-of-type {\n      stroke: Highlight;\n    }\n\n    &[data-invalid] + svg {\n      --checkbox-border-color: Highlight;\n    }\n    &:checked[data-invalid] + svg {\n      --checkbox-border-color: Highlight;\n    }\n\n    &:disabled + svg,\n    &:disabled:hover + svg,\n    &:disabled:focus + svg,\n    &:disabled:active + svg,\n    &:disabled[data-invalid] + svg {\n      --checkbox-background-color: Canvas;\n      --checkbox-border-color: GrayText;\n      --checkbox-tick-color: GrayText;\n    }\n  }\n"])));
-var checkboxThemeColors = {
-  light: {
-    borderColor: {
-      rest: "var(--ds-border-neutral, ".concat(N40, ")"),
-      hovered: "var(--ds-border-neutral, ".concat(N40, ")"),
-      disabled: "var(--ds-background-disabled, ".concat(N20, ")"),
-      checked: "var(--ds-background-boldBrand-resting, ".concat(B400, ")"),
-      active: "var(--ds-border-neutral, ".concat(B50, ")"),
-      invalid: "var(--ds-iconBorder-danger, ".concat(R300, ")"),
-      invalidAndChecked: "var(--ds-iconBorder-danger, ".concat(R300, ")"),
-      focused: "var(--ds-border-focus, ".concat(B100, ")"),
-      hoveredAndChecked: "var(--ds-background-boldBrand-hover, ".concat(B300, ")")
-    },
-    boxColor: {
-      rest: "var(--ds-background-subtleBorderedNeutral-resting, ".concat(N10, ")"),
-      hovered: "var(--ds-background-default, ".concat(N30, ")"),
-      disabled: "var(--ds-background-disabled, ".concat(N20, ")"),
-      active: "var(--ds-background-subtleBorderedNeutral-pressed, ".concat(B50, ")"),
-      hoveredAndChecked: "var(--ds-background-boldBrand-hover, ".concat(B300, ")"),
-      checked: "var(--ds-background-boldBrand-resting, ".concat(B400, ")")
-    },
-    tickColor: {
-      disabledAndChecked: "var(--ds-text-disabled, ".concat(N70, ")"),
-      activeAndChecked: "var(--ds-text-onBold, ".concat(B400, ")"),
-      checked: "var(--ds-text-onBold, ".concat(N10, ")")
-    }
-  },
-  dark: {
-    borderColor: {
-      rest: "var(--ds-border-neutral, ".concat(DN80, ")"),
-      hovered: "var(--ds-border-neutral, ".concat(DN200, ")"),
-      disabled: "var(--ds-background-disabled, ".concat(DN10, ")"),
-      checked: "var(--ds-background-boldBrand-resting, ".concat(B400, ")"),
-      active: "var(--ds-border-neutral, ".concat(B200, ")"),
-      invalid: "var(--ds-iconBorder-danger, ".concat(R300, ")"),
-      invalidAndChecked: "var(--ds-iconBorder-danger, ".concat(R300, ")"),
-      focused: "var(--ds-border-focus, ".concat(B75, ")"),
-      hoveredAndChecked: "var(--ds-background-boldBrand-hover, ".concat(B75, ")")
-    },
-    boxColor: {
-      rest: "var(--ds-background-subtleBorderedNeutral-resting, ".concat(DN10, ")"),
-      hovered: "var(--ds-background-default, ".concat(DN30, ")"),
-      disabled: "var(--ds-background-disabled, ".concat(DN10, ")"),
-      active: "var(--ds-background-subtleBorderedNeutral-pressed, ".concat(B200, ")"),
-      hoveredAndChecked: "var(--ds-background-boldBrand-hover, ".concat(B75, ")"),
-      checked: "var(--ds-background-boldBrand-resting, ".concat(B400, ")")
-    },
-    tickColor: {
-      disabledAndChecked: "var(--ds-text-disabled, ".concat(DN90, ")"),
-      activeAndChecked: "var(--ds-text-onBold, ".concat(DN10, ")"),
-      checked: "var(--ds-text-onBold, ".concat(DN10, ")")
-    }
-  }
-};
-
-var getCheckboxStyles = function getCheckboxStyles(mode) {
-  var checkboxColors = checkboxThemeColors[mode];
-  var boxColor = checkboxColors.boxColor;
-  var tickColor = checkboxColors.tickColor;
-  var borderColor = checkboxColors.borderColor;
-  return [css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      & + svg {\n        --local-background: ", ";\n        --local-background-hover: ", ";\n        --local-background-active: ", ";\n        --local-background-checked: ", ";\n        --local-background-checked-hover: ", ";\n        --local-background-disabled: ", ";\n\n        --local-tick-rest: transparent;\n        --local-tick-checked: ", ";\n        --local-tick-disabled: ", ";\n        --local-tick-active: ", ";\n\n        --local-border: ", ";\n        --local-border-disabled: ", ";\n        --local-border-checked: ", ";\n        --local-border-active: ", ";\n        --local-border-invalid: ", ";\n        --local-border-focus: ", ";\n        --local-border-hover: ", ";\n        --local-border-checked-hover: ", ";\n        --local-border-checked-invalid: ", ";\n      }\n    "])), boxColor.rest, boxColor.hovered, boxColor.active, boxColor.checked, boxColor.hoveredAndChecked, boxColor.disabled, tickColor.checked, tickColor.disabledAndChecked, tickColor.activeAndChecked, borderColor.rest, borderColor.disabled, borderColor.checked, borderColor.active, borderColor.invalid, borderColor.focused, borderColor.hovered, borderColor.hoveredAndChecked, borderColor.invalidAndChecked), checkboxStyles];
-};
-
-export default getCheckboxStyles;

package/dist/types/internal/styles.d.ts

@@ -1,3 +0,0 @@
-import { ThemeModes } from '@atlaskit/theme/types';
-declare const getCheckboxStyles: (mode: ThemeModes) => import("@emotion/core").SerializedStyles[];
-export default getCheckboxStyles;