{"version":3,"file":"mixins.mjs","sources":["../../../src/themes/mixins.ts"],"sourcesContent":["import tinycolor from 'tinycolor2';\n\nimport { GrafanaTheme, GrafanaTheme2 } from '@grafana/data';\n\nexport function cardChrome(theme: GrafanaTheme2): string {\n  return `\n    background: ${theme.colors.background.secondary};\n    &:hover {\n      background: ${hoverColor(theme.colors.background.secondary, theme)};\n    }\n    box-shadow: ${theme.components.panel.boxShadow};\n    border-radius: ${theme.shape.radius.default};\n`;\n}\n\nexport function hoverColor(color: string, theme: GrafanaTheme2): string {\n  return theme.isDark ? tinycolor(color).brighten(2).toString() : tinycolor(color).darken(2).toString();\n}\n\nexport function listItem(theme: GrafanaTheme2): string {\n  return `\n  background: ${theme.colors.background.secondary};\n  &:hover {\n    background: ${hoverColor(theme.colors.background.secondary, theme)};\n  }\n  box-shadow: ${theme.components.panel.boxShadow};\n  border-radius: ${theme.shape.radius.default};\n`;\n}\n\nexport function listItemSelected(theme: GrafanaTheme2): string {\n  return `\n    background: ${hoverColor(theme.colors.background.secondary, theme)};\n    color: ${theme.colors.text.maxContrast};\n`;\n}\n\nexport function mediaUp(breakpoint: string) {\n  return `only screen and (min-width: ${breakpoint})`;\n}\n\nconst isGrafanaTheme2 = (theme: GrafanaTheme | GrafanaTheme2): theme is GrafanaTheme2 => theme.hasOwnProperty('v1');\nexport const focusCss = (theme: GrafanaTheme | GrafanaTheme2) => {\n  const isTheme2 = isGrafanaTheme2(theme);\n  const firstColor = isTheme2 ? theme.colors.background.canvas : theme.colors.bodyBg;\n  const secondColor = isTheme2 ? theme.colors.primary.main : theme.colors.formFocusOutline;\n\n  return `\n  outline: 2px dotted transparent;\n  outline-offset: 2px;\n  box-shadow: 0 0 0 2px ${firstColor}, 0 0 0px 4px ${secondColor};\n  transition-property: outline, outline-offset, box-shadow;\n  transition-duration: 0.2s;\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);`;\n};\n\nexport function getMouseFocusStyles(theme: GrafanaTheme | GrafanaTheme2) {\n  return {\n    outline: 'none',\n    boxShadow: `none`,\n  };\n}\n\nexport function getFocusStyles(theme: GrafanaTheme2) {\n  return {\n    outline: '2px dotted transparent',\n    outlineOffset: '2px',\n    boxShadow: `0 0 0 2px ${theme.colors.background.canvas}, 0 0 0px 4px ${theme.colors.primary.main}`,\n    transitionTimingFunction: `cubic-bezier(0.19, 1, 0.22, 1)`,\n    transitionDuration: '0.2s',\n    transitionProperty: 'outline, outline-offset, box-shadow',\n  };\n}\n\n// max-width is set up based on .grafana-tooltip class that's used in dashboard\nexport const getTooltipContainerStyles = (theme: GrafanaTheme2) => ({\n  overflow: 'hidden',\n  background: theme.colors.background.elevated,\n  boxShadow: theme.shadows.z2,\n  maxWidth: '800px',\n  padding: theme.spacing(1),\n  borderRadius: theme.shape.radius.default,\n  zIndex: theme.zIndex.tooltip,\n});\n\ninterface ExternalRadiusAdditionalOptions {\n  selfBorderWidth?: number;\n  childBorderRadius?: number;\n}\n/**\n * Calculates a border radius for an element, based on border radius of its child.\n *\n * @param theme\n * @param offset - The distance to offset from the child element, should be >= 0.\n * @param additionalOptions\n * @param additionalOptions.selfBorderWidth - The border width of the element itself (default: 1)\n * @param additionalOptions.childBorderRadius - The border radius of the child element (default: theme default radius)\n * @returns A CSS calc() expression that returns the relative external radius value\n */\nexport const getExternalRadius = (\n  theme: GrafanaTheme2,\n  offset: number,\n  additionalOptions: ExternalRadiusAdditionalOptions = {}\n) => {\n  const { selfBorderWidth = 1, childBorderRadius } = additionalOptions;\n\n  const childBorderRadiusPx = childBorderRadius !== undefined ? `${childBorderRadius}px` : theme.shape.radius.default;\n  return `calc(max(0px, ${childBorderRadiusPx} + ${offset}px + ${selfBorderWidth}px))`;\n};\n\ninterface InternalRadiusAdditionalOptions {\n  parentBorderWidth?: number;\n  parentBorderRadius?: number;\n}\n\n/**\n * Calculates a border radius for an element, based on border radius of its parent.\n *\n * @param theme\n * @param offset - The distance to offset from the parent element, should be >= 0.\n * @param additionalOptions\n * @param additionalOptions.parentBorderWidth - The border width of the parent element (default: 1)\n * @param additionalOptions.parentBorderRadius - The border radius of the parent element (default: theme default radius)\n * @returns A CSS calc() expression that returns the relative internal radius value\n */\nexport const getInternalRadius = (\n  theme: GrafanaTheme2,\n  offset: number,\n  additionalOptions: InternalRadiusAdditionalOptions = {}\n) => {\n  const { parentBorderWidth = 1, parentBorderRadius } = additionalOptions;\n\n  const parentBorderRadiusPx =\n    parentBorderRadius !== undefined ? `${parentBorderRadius}px` : theme.shape.radius.default;\n  return `calc(max(0px, ${parentBorderRadiusPx} - ${offset}px - ${parentBorderWidth}px))`;\n};\n"],"names":[],"mappings":";;AAegB,SAAA,UAAA,CAAW,OAAe,KAA8B,EAAA;AACtE,EAAA,OAAO,MAAM,MAAS,GAAA,SAAA,CAAU,KAAK,CAAA,CAAE,SAAS,CAAC,CAAA,CAAE,QAAS,EAAA,GAAI,UAAU,KAAK,CAAA,CAAE,MAAO,CAAA,CAAC,EAAE,QAAS,EAAA;AACtG;AAoBO,SAAS,QAAQ,UAAoB,EAAA;AAC1C,EAAA,OAAO,+BAA+B,UAAU,CAAA,CAAA,CAAA;AAClD;AAiBO,SAAS,oBAAoB,KAAqC,EAAA;AACvE,EAAO,OAAA;AAAA,IACL,OAAS,EAAA,MAAA;AAAA,IACT,SAAW,EAAA,CAAA,IAAA;AAAA,GACb;AACF;AAEO,SAAS,eAAe,KAAsB,EAAA;AACnD,EAAO,OAAA;AAAA,IACL,OAAS,EAAA,wBAAA;AAAA,IACT,aAAe,EAAA,KAAA;AAAA,IACf,SAAA,EAAW,CAAa,UAAA,EAAA,KAAA,CAAM,MAAO,CAAA,UAAA,CAAW,MAAM,CAAiB,cAAA,EAAA,KAAA,CAAM,MAAO,CAAA,OAAA,CAAQ,IAAI,CAAA,CAAA;AAAA,IAChG,wBAA0B,EAAA,CAAA,8BAAA,CAAA;AAAA,IAC1B,kBAAoB,EAAA,MAAA;AAAA,IACpB,kBAAoB,EAAA;AAAA,GACtB;AACF;AAGa,MAAA,yBAAA,GAA4B,CAAC,KAA0B,MAAA;AAAA,EAClE,QAAU,EAAA,QAAA;AAAA,EACV,UAAA,EAAY,KAAM,CAAA,MAAA,CAAO,UAAW,CAAA,QAAA;AAAA,EACpC,SAAA,EAAW,MAAM,OAAQ,CAAA,EAAA;AAAA,EACzB,QAAU,EAAA,OAAA;AAAA,EACV,OAAA,EAAS,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,EACxB,YAAA,EAAc,KAAM,CAAA,KAAA,CAAM,MAAO,CAAA,OAAA;AAAA,EACjC,MAAA,EAAQ,MAAM,MAAO,CAAA;AACvB,CAAA;AA0CO,MAAM,oBAAoB,CAC/B,KAAA,EACA,MACA,EAAA,iBAAA,GAAqD,EAClD,KAAA;AACH,EAAA,MAAM,EAAE,iBAAA,GAAoB,CAAG,EAAA,kBAAA,EAAuB,GAAA,iBAAA;AAEtD,EAAM,MAAA,oBAAA,GACJ,uBAAuB,KAAY,CAAA,GAAA,CAAA,EAAG,kBAAkB,CAAO,EAAA,CAAA,GAAA,KAAA,CAAM,MAAM,MAAO,CAAA,OAAA;AACpF,EAAA,OAAO,CAAiB,cAAA,EAAA,oBAAoB,CAAM,GAAA,EAAA,MAAM,QAAQ,iBAAiB,CAAA,IAAA,CAAA;AACnF;;;;"}