@primer/react
Version:
An implementation of GitHub's Primer Design System using React
1 lines • 15 kB
Source Map (JSON)
{"version":3,"sources":["../../src/experimental/IssueLabel/IssueLabel.module.css.js","../../../postcss-preset-primer/src/mixins/focusOutline.css"],"names":[],"mappings":"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","file":"IssueLabel-d9c2c5cf.css","sourcesContent":["@layer primer.components.IssueLabel {\n .IssueLabel {\n display: inline-flex;\n min-height: var(--base-size-20);\n font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-semibold);\n line-height: var(--text-body-lineHeight-small);\n /* stylelint-disable-next-line primer/colors */\n color: var(--label-fgColor);\n white-space: nowrap;\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--label-bgColor-rest);\n border: 0;\n border-radius: var(--borderRadius-full);\n\n /* use color var for box-shadow (border) in future for high contrast themes */\n box-shadow: var(--boxShadow-thin) transparent;\n align-items: center;\n padding-inline: var(--base-size-8);\n padding-block: 0;\n\n &:where(button, a) {\n text-decoration: none;\n\n &:hover {\n /* stylelint-disable-next-line primer/colors */\n color: var(--label-fgColor-hover);\n cursor: pointer;\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--label-bgColor-hover);\n }\n\n &:active {\n /* stylelint-disable-next-line primer/colors */\n color: var(--label-fgColor-active);\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--label-bgColor-active);\n }\n\n &:focus-visible {\n @mixin focusOutline 2px;\n }\n }\n\n &[data-variant='pink'] {\n --label-bgColor-rest: var(--label-pink-bgColor-rest);\n --label-bgColor-hover: var(--label-pink-bgColor-hover);\n --label-bgColor-active: var(--label-pink-bgColor-active);\n --label-fgColor: var(--label-pink-fgColor-rest);\n --label-fgColor-hover: var(--label-pink-fgColor-hover);\n --label-fgColor-active: var(--label-pink-fgColor-active);\n }\n\n &[data-variant='plum'] {\n --label-bgColor-rest: var(--label-plum-bgColor-rest);\n --label-bgColor-hover: var(--label-plum-bgColor-hover);\n --label-bgColor-active: var(--label-plum-bgColor-active);\n --label-fgColor: var(--label-plum-fgColor-rest);\n --label-fgColor-hover: var(--label-plum-fgColor-hover);\n --label-fgColor-active: var(--label-plum-fgColor-active);\n }\n\n &[data-variant='purple'] {\n --label-bgColor-rest: var(--label-purple-bgColor-rest);\n --label-bgColor-hover: var(--label-purple-bgColor-hover);\n --label-bgColor-active: var(--label-purple-bgColor-active);\n --label-fgColor: var(--label-purple-fgColor-rest);\n --label-fgColor-hover: var(--label-purple-fgColor-hover);\n --label-fgColor-active: var(--label-purple-fgColor-active);\n }\n\n &[data-variant='indigo'] {\n --label-bgColor-rest: var(--label-indigo-bgColor-rest);\n --label-bgColor-hover: var(--label-indigo-bgColor-hover);\n --label-bgColor-active: var(--label-indigo-bgColor-active);\n --label-fgColor: var(--label-indigo-fgColor-rest);\n --label-fgColor-hover: var(--label-indigo-fgColor-hover);\n --label-fgColor-active: var(--label-indigo-fgColor-active);\n }\n\n &[data-variant='blue'] {\n --label-bgColor-rest: var(--label-blue-bgColor-rest);\n --label-bgColor-hover: var(--label-blue-bgColor-hover);\n --label-bgColor-active: var(--label-blue-bgColor-active);\n --label-fgColor: var(--label-blue-fgColor-rest);\n --label-fgColor-hover: var(--label-blue-fgColor-hover);\n --label-fgColor-active: var(--label-blue-fgColor-active);\n }\n\n &[data-variant='cyan'] {\n --label-bgColor-rest: var(--label-cyan-bgColor-rest);\n --label-bgColor-hover: var(--label-cyan-bgColor-hover);\n --label-bgColor-active: var(--label-cyan-bgColor-active);\n --label-fgColor: var(--label-cyan-fgColor-rest);\n --label-fgColor-hover: var(--label-cyan-fgColor-hover);\n --label-fgColor-active: var(--label-cyan-fgColor-active);\n }\n\n &[data-variant='teal'] {\n --label-bgColor-rest: var(--label-teal-bgColor-rest);\n --label-bgColor-hover: var(--label-teal-bgColor-hover);\n --label-bgColor-active: var(--label-teal-bgColor-active);\n --label-fgColor: var(--label-teal-fgColor-rest);\n --label-fgColor-hover: var(--label-teal-fgColor-hover);\n --label-fgColor-active: var(--label-teal-fgColor-active);\n }\n\n &[data-variant='pine'] {\n --label-bgColor-rest: var(--label-pine-bgColor-rest);\n --label-bgColor-hover: var(--label-pine-bgColor-hover);\n --label-bgColor-active: var(--label-pine-bgColor-active);\n --label-fgColor: var(--label-pine-fgColor-rest);\n --label-fgColor-hover: var(--label-pine-fgColor-hover);\n --label-fgColor-active: var(--label-pine-fgColor-active);\n }\n\n &[data-variant='green'] {\n --label-bgColor-rest: var(--label-green-bgColor-rest);\n --label-bgColor-hover: var(--label-green-bgColor-hover);\n --label-bgColor-active: var(--label-green-bgColor-active);\n --label-fgColor: var(--label-green-fgColor-rest);\n --label-fgColor-hover: var(--label-green-fgColor-hover);\n --label-fgColor-active: var(--label-green-fgColor-active);\n }\n\n &[data-variant='lime'] {\n --label-bgColor-rest: var(--label-lime-bgColor-rest);\n --label-bgColor-hover: var(--label-lime-bgColor-hover);\n --label-bgColor-active: var(--label-lime-bgColor-active);\n --label-fgColor: var(--label-lime-fgColor-rest);\n --label-fgColor-hover: var(--label-lime-fgColor-hover);\n --label-fgColor-active: var(--label-lime-fgColor-active);\n }\n\n &[data-variant='olive'] {\n --label-bgColor-rest: var(--label-olive-bgColor-rest);\n --label-bgColor-hover: var(--label-olive-bgColor-hover);\n --label-bgColor-active: var(--label-olive-bgColor-active);\n --label-fgColor: var(--label-olive-fgColor-rest);\n --label-fgColor-hover: var(--label-olive-fgColor-hover);\n --label-fgColor-active: var(--label-olive-fgColor-active);\n }\n\n &[data-variant='lemon'] {\n --label-bgColor-rest: var(--label-lemon-bgColor-rest);\n --label-bgColor-hover: var(--label-lemon-bgColor-hover);\n --label-bgColor-active: var(--label-lemon-bgColor-active);\n --label-fgColor: var(--label-lemon-fgColor-rest);\n --label-fgColor-hover: var(--label-lemon-fgColor-hover);\n --label-fgColor-active: var(--label-lemon-fgColor-active);\n }\n\n &[data-variant='yellow'] {\n --label-bgColor-rest: var(--label-yellow-bgColor-rest);\n --label-bgColor-hover: var(--label-yellow-bgColor-hover);\n --label-bgColor-active: var(--label-yellow-bgColor-active);\n --label-fgColor: var(--label-yellow-fgColor-rest);\n --label-fgColor-hover: var(--label-yellow-fgColor-hover);\n --label-fgColor-active: var(--label-yellow-fgColor-active);\n }\n\n &[data-variant='orange'] {\n --label-bgColor-rest: var(--label-orange-bgColor-rest);\n --label-bgColor-hover: var(--label-orange-bgColor-hover);\n --label-bgColor-active: var(--label-orange-bgColor-active);\n --label-fgColor: var(--label-orange-fgColor-rest);\n --label-fgColor-hover: var(--label-orange-fgColor-hover);\n --label-fgColor-active: var(--label-orange-fgColor-active);\n }\n\n &[data-variant='red'] {\n --label-bgColor-rest: var(--label-red-bgColor-rest);\n --label-bgColor-hover: var(--label-red-bgColor-hover);\n --label-bgColor-active: var(--label-red-bgColor-active);\n --label-fgColor: var(--label-red-fgColor-rest);\n --label-fgColor-hover: var(--label-red-fgColor-hover);\n --label-fgColor-active: var(--label-red-fgColor-active);\n }\n\n &[data-variant='coral'] {\n --label-bgColor-rest: var(--label-coral-bgColor-rest);\n --label-bgColor-hover: var(--label-coral-bgColor-hover);\n --label-bgColor-active: var(--label-coral-bgColor-active);\n --label-fgColor: var(--label-coral-fgColor-rest);\n --label-fgColor-hover: var(--label-coral-fgColor-hover);\n --label-fgColor-active: var(--label-coral-fgColor-active);\n }\n\n &[data-variant='gray'] {\n --label-bgColor-rest: var(--label-gray-bgColor-rest);\n --label-bgColor-hover: var(--label-gray-bgColor-hover);\n --label-bgColor-active: var(--label-gray-bgColor-active);\n --label-fgColor: var(--label-gray-fgColor-rest);\n --label-fgColor-hover: var(--label-gray-fgColor-hover);\n --label-fgColor-active: var(--label-gray-fgColor-active);\n }\n\n &[data-variant='brown'] {\n --label-bgColor-rest: var(--label-brown-bgColor-rest);\n --label-bgColor-hover: var(--label-brown-bgColor-hover);\n --label-bgColor-active: var(--label-brown-bgColor-active);\n --label-fgColor: var(--label-brown-fgColor-rest);\n --label-fgColor-hover: var(--label-brown-fgColor-hover);\n --label-fgColor-active: var(--label-brown-fgColor-active);\n }\n\n &[data-variant='auburn'] {\n --label-bgColor-rest: var(--label-auburn-bgColor-rest);\n --label-bgColor-hover: var(--label-auburn-bgColor-hover);\n --label-bgColor-active: var(--label-auburn-bgColor-active);\n --label-fgColor: var(--label-auburn-fgColor-rest);\n --label-fgColor-hover: var(--label-auburn-fgColor-hover);\n --label-fgColor-active: var(--label-auburn-fgColor-active);\n }\n }\n\n [data-color-mode='dark'] .IssueLabel:not([data-variant]) {\n --label-bgColor-rest: var(--label-bgColor-dark-rest);\n --label-bgColor-hover: var(--label-bgColor-dark-hover);\n --label-bgColor-active: var(--label-bgColor-dark-active);\n --label-fgColor: var(--label-fgColor-dark);\n --label-fgColor-hover: var(--label-fgColor-dark-hover);\n --label-fgColor-active: var(--label-fgColor-dark-active);\n }\n\n [data-color-mode='light'] .IssueLabel:not([data-variant]) {\n --label-bgColor-rest: var(--label-bgColor-light-rest);\n --label-bgColor-hover: var(--label-bgColor-light-hover);\n --label-bgColor-active: var(--label-bgColor-light-active);\n --label-fgColor: var(--label-fgColor-light);\n --label-fgColor-hover: var(--label-fgColor-light-hover);\n --label-fgColor-active: var(--label-fgColor-light-active);\n }\n\n @media (prefers-color-scheme: light) {\n [data-color-mode='auto'][data-light-theme*='light'] .IssueLabel:not([data-variant]) {\n --label-bgColor-rest: var(--label-bgColor-light-rest);\n --label-bgColor-hover: var(--label-bgColor-light-hover);\n --label-bgColor-active: var(--label-bgColor-light-active);\n --label-fgColor: var(--label-fgColor-light);\n --label-fgColor-hover: var(--label-fgColor-light-hover);\n --label-fgColor-active: var(--label-fgColor-light-active);\n }\n\n [data-color-mode='auto'][data-light-theme*='dark'] .IssueLabel:not([data-variant]) {\n --label-bgColor-rest: var(--label-bgColor-dark-rest);\n --label-bgColor-hover: var(--label-bgColor-dark-hover);\n --label-bgColor-active: var(--label-bgColor-dark-active);\n --label-fgColor: var(--label-fgColor-dark);\n --label-fgColor-hover: var(--label-fgColor-dark-hover);\n --label-fgColor-active: var(--label-fgColor-dark-active);\n }\n }\n\n @media (prefers-color-scheme: dark) {\n [data-color-mode='auto'][data-dark-theme*='light'] .IssueLabel:not([data-variant]) {\n --label-bgColor-rest: var(--label-bgColor-light-rest);\n --label-bgColor-hover: var(--label-bgColor-light-hover);\n --label-bgColor-active: var(--label-bgColor-light-active);\n --label-fgColor: var(--label-fgColor-light);\n --label-fgColor-hover: var(--label-fgColor-light-hover);\n --label-fgColor-active: var(--label-fgColor-light-active);\n }\n\n [data-color-mode='auto'][data-dark-theme*='dark'] .IssueLabel:not([data-variant]) {\n --label-bgColor-rest: var(--label-bgColor-dark-rest);\n --label-bgColor-hover: var(--label-bgColor-dark-hover);\n --label-bgColor-active: var(--label-bgColor-dark-active);\n --label-fgColor: var(--label-fgColor-dark);\n --label-fgColor-hover: var(--label-fgColor-dark-hover);\n --label-fgColor-active: var(--label-fgColor-dark-active);\n }\n }\n}\n","@define-mixin focusOutline $outlineOffset: -2px, $outlineColor: var(--focus-outlineColor) {\n outline: 2px solid $outlineColor;\n outline-offset: $outlineOffset;\n box-shadow: none;\n}\n"]}