@primer/react/dist/Token/IssueLabelToken-9a01c394.css.map

An implementation of GitHub's Primer Design System using React

{"version":3,"sources":["../src/Token/IssueLabelToken.module.css.js"],"names":[],"mappings":"AA4DA,4BAEE,aAAc,CACd,aAAc,CACd,aAAc,CACd,WAAY,CACZ,WAAY,CACZ,YAAa,CACb,6GAEC,CACD,sGAA2G,CAI3G,kBAAmB,CADnB,6CAAqC,CADrC,iBAGF,CAEA,oCACE,4EA7EA,2BAA4B,CAC5B,uBAAwB,CACxB,6FAAkG,CAElG,4DAA+D,CAE/D,2GAAmH,CADnH,qDA0EA,CAtEA,6GACE,oFACF,CAEA,mHAEE,sEACF,CAGA,gIACE,sLAIG,CACH,kEACF,CAuDA,2EAnDA,yBAA0B,CAC1B,uBAAwB,CACxB,kBAAmB,CACnB,wGAA+G,CAE/G,oFAAwF,CAExF,0HAKC,CAND,+FA+CA,CAtCA,kHAEE,8GAEF,CAGA,+HACE,wFAAqG,CACrG,kEACF,CA6BF,CAEA,mCACE,2EAvFA,2BAA4B,CAC5B,uBAAwB,CACxB,6FAAkG,CAElG,4DAA+D,CAE/D,2GAAmH,CADnH,qDAoFA,CAhFA,4GACE,oFACF,CAEA,kHAEE,sEACF,CAGA,+HACE,sLAIG,CACH,kEACF,CAiEA,0EA7DA,yBAA0B,CAC1B,uBAAwB,CACxB,kBAAmB,CACnB,wGAA+G,CAE/G,oFAAwF,CAExF,0HAKC,CAND,+FAyDA,CAhDA,iHAEE,8GAEF,CAGA,8HACE,wFAAqG,CACrG,kEACF,CAuCF,CAGA,oDAjGE,2BAA4B,CAC5B,uBAAwB,CACxB,6FAAkG,CAElG,4DAA+D,CAE/D,2GAAmH,CADnH,qDA8FF,CA1FE,qFACE,oFACF,CAEA,2FAEE,sEACF,CAGA,wGACE,sLAIG,CACH,kEACF,CA4EF,mDAxEE,yBAA0B,CAC1B,uBAAwB,CACxB,kBAAmB,CACnB,wGAA+G,CAE/G,oFAAwF,CAExF,0HAKC,CAND,+FAoEF,CA3DE,0FAEE,8GAEF,CAGA,uGACE,wFAAqG,CACrG,kEACF,CAqDF,wDACE,YACF,CAEA,8DAUE,kDAAuC,CAJvC,0CAAqC,CALrC,UAAW,CAOX,aAAc,CADd,wCAAmC,CAEnC,mBAAoB,CAPpB,iBAAkB,CAGlB,yCAAoC,CADpC,uCAAkC,CADlC,SAQF,CAGA,iEACE,eACF,CAEA,6EACE,iBAAkB,CAClB,SACF","file":"IssueLabelToken-9a01c394.css","sourcesContent":["/* stylelint-disable primer/colors */\n@define-mixin lightThemeIssueLabel {\n  --lightness-threshold: 0.453;\n  --border-threshold: 0.96;\n  --border-alpha: max(0, min(calc((var(--perceived-lightness) - var(--border-threshold)) * 100), 1));\n\n  background: rgb(var(--label-r), var(--label-g), var(--label-b));\n  color: hsl(0deg, 0%, calc(var(--lightness-switch) * 100%));\n  border-color: hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) - 25) * 1%), var(--border-alpha));\n\n  /* Selected state */\n  &:where([data-selected='true']) {\n    background: hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) - 5) * 1%));\n  }\n\n  &:where([data-selected='true'])::after {\n    /* stylelint-disable-next-line primer/box-shadow */\n    box-shadow: 0 0 0 2px rgb(var(--label-r), var(--label-g), var(--label-b));\n  }\n\n  /* Interactive hover states */\n  &:where([data-cursor-is-interactive='true']:hover) {\n    background-image: linear-gradient(rgb(0, 0, 0, 0.15), rgb(0, 0, 0, 0.15)),\n      linear-gradient(\n        rgb(var(--label-r), var(--label-g), var(--label-b)),\n        rgb(var(--label-r), var(--label-g), var(--label-b))\n      );\n    box-shadow: var(--shadow-resting-medium);\n  }\n}\n\n@define-mixin darkThemeIssueLabel {\n  --lightness-threshold: 0.6;\n  --background-alpha: 0.18;\n  --border-alpha: 0.3;\n  --lighten-by: calc(((var(--lightness-threshold) - var(--perceived-lightness)) * 100) * var(--lightness-switch));\n\n  background: rgb(var(--label-r), var(--label-g), var(--label-b), var(--background-alpha));\n  color: hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%));\n  border-color: hsl(\n    var(--label-h),\n    calc(var(--label-s) * 1%),\n    calc((var(--label-l) + var(--lighten-by)) * 1%),\n    var(--border-alpha)\n  );\n\n  /* Selected state */\n  &:where([data-selected='true'])::after {\n    /* stylelint-disable-next-line primer/box-shadow */\n    box-shadow: 0 0 0 2px\n      hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%));\n  }\n\n  /* Interactive hover states */\n  &:where([data-cursor-is-interactive='true']:hover) {\n    background: hsl(var(--label-h), calc(var(--label-s) * 1%), calc(calc(var(--label-l) + 10) * 1%), 0.3);\n    box-shadow: var(--shadow-resting-medium);\n  }\n}\n\n.IssueLabel {\n  /* Color variables - dynamically set via inline CSS custom properties */\n  --label-r: 153;\n  --label-g: 153;\n  --label-b: 153;\n  --label-h: 0;\n  --label-s: 0;\n  --label-l: 60;\n  --perceived-lightness: calc(\n    ((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255\n  );\n  --lightness-switch: max(0, min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000), 1));\n\n  position: relative;\n  border-width: var(--borderWidth-thin);\n  border-style: solid;\n}\n\n@media (prefers-color-scheme: light) {\n  [data-color-mode='auto'][data-light-theme*='light'] .IssueLabel {\n    @mixin lightThemeIssueLabel;\n  }\n\n  [data-color-mode='auto'][data-light-theme*='dark'] .IssueLabel {\n    @mixin darkThemeIssueLabel;\n  }\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-color-mode='auto'][data-dark-theme*='light'] .IssueLabel {\n    @mixin lightThemeIssueLabel;\n  }\n\n  [data-color-mode='auto'][data-dark-theme*='dark'] .IssueLabel {\n    @mixin darkThemeIssueLabel;\n  }\n}\n\n/* Light mode styles */\n[data-color-mode='light'] .IssueLabel {\n  @mixin lightThemeIssueLabel;\n}\n\n/* Dark mode styles */\n[data-color-mode='dark'] .IssueLabel {\n  @mixin darkThemeIssueLabel;\n}\n\n/* Selected state */\n\n.IssueLabel:where([data-selected='true']) {\n  outline: none;\n}\n\n.IssueLabel:where([data-selected='true'])::after {\n  content: '';\n  position: absolute;\n  z-index: 1;\n  top: calc(var(--base-size-2) * -1);\n  right: calc(var(--base-size-2) * -1);\n  bottom: calc(var(--base-size-2) * -1);\n  left: calc(var(--base-size-2) * -1);\n  display: block;\n  pointer-events: none;\n  border-radius: var(--borderRadius-full);\n}\n\n/* Remove button styling */\n.IssueLabel:where([data-has-remove-button='true']) {\n  padding-right: 0;\n}\n\n.RemoveButton:where([data-has-multiple-action-targets='true']) {\n  position: relative;\n  z-index: 1;\n}\n"]}