primer_view_components 0.4.0 → 0.5.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (111) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +15 -0
  3. data/app/assets/styles/primer_view_components.css +1 -1
  4. data/app/assets/styles/primer_view_components.css.map +1 -1
  5. data/app/components/primer/alpha/action_bar.css +1 -1
  6. data/app/components/primer/alpha/action_bar.css.map +1 -1
  7. data/app/components/primer/alpha/action_bar.pcss +1 -1
  8. data/app/components/primer/alpha/action_list.css +1 -1
  9. data/app/components/primer/alpha/action_list.css.map +1 -1
  10. data/app/components/primer/alpha/action_list.pcss +42 -42
  11. data/app/components/primer/alpha/action_list.rb +1 -0
  12. data/app/components/primer/alpha/auto_complete.css +1 -1
  13. data/app/components/primer/alpha/auto_complete.css.map +1 -1
  14. data/app/components/primer/alpha/auto_complete.pcss +10 -10
  15. data/app/components/primer/alpha/banner.css +1 -1
  16. data/app/components/primer/alpha/banner.css.map +1 -1
  17. data/app/components/primer/alpha/banner.pcss +16 -16
  18. data/app/components/primer/alpha/button_marketing.css +1 -1
  19. data/app/components/primer/alpha/button_marketing.css.map +1 -1
  20. data/app/components/primer/alpha/button_marketing.pcss +9 -9
  21. data/app/components/primer/alpha/dialog.css +1 -1
  22. data/app/components/primer/alpha/dialog.css.map +1 -1
  23. data/app/components/primer/alpha/dialog.pcss +9 -9
  24. data/app/components/primer/alpha/dropdown.css +1 -1
  25. data/app/components/primer/alpha/dropdown.css.map +1 -1
  26. data/app/components/primer/alpha/dropdown.pcss +16 -16
  27. data/app/components/primer/alpha/layout.css +1 -1
  28. data/app/components/primer/alpha/layout.css.map +1 -1
  29. data/app/components/primer/alpha/layout.pcss +3 -3
  30. data/app/components/primer/alpha/menu.css +1 -1
  31. data/app/components/primer/alpha/menu.css.map +1 -1
  32. data/app/components/primer/alpha/menu.pcss +13 -13
  33. data/app/components/primer/alpha/nav_list.rb +1 -0
  34. data/app/components/primer/alpha/segmented_control.css +1 -1
  35. data/app/components/primer/alpha/segmented_control.css.json +2 -0
  36. data/app/components/primer/alpha/segmented_control.css.map +1 -1
  37. data/app/components/primer/alpha/segmented_control.pcss +16 -6
  38. data/app/components/primer/alpha/tab_nav.css +1 -1
  39. data/app/components/primer/alpha/tab_nav.css.map +1 -1
  40. data/app/components/primer/alpha/tab_nav.pcss +10 -10
  41. data/app/components/primer/alpha/text_field.css +1 -1
  42. data/app/components/primer/alpha/text_field.css.map +1 -1
  43. data/app/components/primer/alpha/text_field.pcss +38 -38
  44. data/app/components/primer/alpha/toggle_switch.css +1 -1
  45. data/app/components/primer/alpha/toggle_switch.css.map +1 -1
  46. data/app/components/primer/alpha/toggle_switch.pcss +23 -23
  47. data/app/components/primer/alpha/underline_nav.css +1 -1
  48. data/app/components/primer/alpha/underline_nav.css.map +1 -1
  49. data/app/components/primer/alpha/underline_nav.pcss +15 -15
  50. data/app/components/primer/beta/avatar.css +1 -1
  51. data/app/components/primer/beta/avatar.css.map +1 -1
  52. data/app/components/primer/beta/avatar.pcss +2 -2
  53. data/app/components/primer/beta/avatar_stack.css +1 -1
  54. data/app/components/primer/beta/avatar_stack.css.map +1 -1
  55. data/app/components/primer/beta/avatar_stack.pcss +10 -10
  56. data/app/components/primer/beta/blankslate.css +1 -1
  57. data/app/components/primer/beta/blankslate.css.map +1 -1
  58. data/app/components/primer/beta/blankslate.pcss +4 -4
  59. data/app/components/primer/beta/border_box.css +1 -1
  60. data/app/components/primer/beta/border_box.css.map +1 -1
  61. data/app/components/primer/beta/border_box.pcss +31 -31
  62. data/app/components/primer/beta/breadcrumbs.css +1 -1
  63. data/app/components/primer/beta/breadcrumbs.css.map +1 -1
  64. data/app/components/primer/beta/breadcrumbs.pcss +2 -2
  65. data/app/components/primer/beta/button.css +1 -1
  66. data/app/components/primer/beta/button.css.map +1 -1
  67. data/app/components/primer/beta/button.pcss +70 -70
  68. data/app/components/primer/beta/counter.css +1 -1
  69. data/app/components/primer/beta/counter.css.map +1 -1
  70. data/app/components/primer/beta/counter.pcss +7 -7
  71. data/app/components/primer/beta/flash.css +1 -1
  72. data/app/components/primer/beta/flash.css.map +1 -1
  73. data/app/components/primer/beta/flash.pcss +19 -19
  74. data/app/components/primer/beta/label.css +1 -1
  75. data/app/components/primer/beta/label.css.map +1 -1
  76. data/app/components/primer/beta/label.pcss +23 -23
  77. data/app/components/primer/beta/link.css +1 -1
  78. data/app/components/primer/beta/link.css.map +1 -1
  79. data/app/components/primer/beta/link.pcss +8 -8
  80. data/app/components/primer/beta/popover.css +1 -1
  81. data/app/components/primer/beta/popover.css.map +1 -1
  82. data/app/components/primer/beta/popover.pcss +10 -10
  83. data/app/components/primer/beta/progress_bar.css +1 -1
  84. data/app/components/primer/beta/progress_bar.css.map +1 -1
  85. data/app/components/primer/beta/progress_bar.pcss +1 -1
  86. data/app/components/primer/beta/state.css +1 -1
  87. data/app/components/primer/beta/state.css.map +1 -1
  88. data/app/components/primer/beta/state.pcss +8 -8
  89. data/app/components/primer/beta/subhead.css +1 -1
  90. data/app/components/primer/beta/subhead.css.map +1 -1
  91. data/app/components/primer/beta/subhead.pcss +3 -3
  92. data/app/components/primer/beta/timeline_item.css +1 -1
  93. data/app/components/primer/beta/timeline_item.css.map +1 -1
  94. data/app/components/primer/beta/timeline_item.pcss +13 -13
  95. data/lib/postcss_mixins/activeIndicatorLine.pcss +1 -1
  96. data/lib/postcss_mixins/focusBoxShadowInset.pcss +2 -2
  97. data/lib/postcss_mixins/focusOutline.pcss +1 -1
  98. data/lib/postcss_mixins/focusOutlineOnEmphasis.pcss +2 -2
  99. data/lib/postcss_mixins/targetBoxShadow.pcss +2 -1
  100. data/lib/primer/view_components/linters/accessibility.yml +2 -0
  101. data/lib/primer/view_components/linters/argument_mappers/label.rb +4 -4
  102. data/lib/primer/view_components/linters/details_menu_migration.rb +35 -0
  103. data/lib/primer/view_components/linters/label_component_migration_counter.rb +1 -1
  104. data/lib/primer/view_components/version.rb +1 -1
  105. data/previews/primer/alpha/toggle_switch_preview.rb +11 -11
  106. data/previews/primer/beta/button_preview/all_schemes.html.erb +4 -0
  107. data/previews/primer/beta/button_preview.rb +7 -2
  108. data/static/arguments.json +4 -4
  109. data/static/audited_at.json +4 -4
  110. data/static/info_arch.json +4 -4
  111. metadata +3 -2
data/app/components/primer/beta/button.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["button.pcss","<no source>","../../../../lib/postcss_mixins/focusOutlineOnEmphasis.pcss"],"names":[],"mappings":"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","file":"button.css","sourcesContent":["/* CSS for Button */\n\n/* temporary, pre primitives release */\n:root {\n --duration-fast: 80ms;\n --easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n/* base button */\n.Button {\n position: relative;\n font-size: var(--text-body-size-medium);\n font-weight: var(--base-text-weight-medium);\n cursor: pointer;\n user-select: none;\n background-color: transparent;\n border: var(--borderWidth-thin) solid;\n border-color: transparent;\n border-radius: var(--borderRadius-medium);\n color: var(--color-btn-text);\n transition: var(--duration-fast) var(--easing-easeInOut);\n transition-property: color, fill, background-color, border-color;\n text-align: center;\n height: var(--control-medium-size);\n padding: 0 var(--control-medium-paddingInline-normal);\n display: inline-flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: var(--base-size-4);\n min-width: max-content;\n\n /* mobile friendly sizing */\n @media (pointer: coarse) {\n &::before {\n @mixin minTouchTarget 48px, 48px;\n }\n }\n\n /* base states */\n\n &:hover {\n transition-duration: var(--duration-fast);\n }\n\n &:active {\n transition: none;\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n cursor: not-allowed;\n box-shadow: none;\n }\n}\n\n.Button-withTooltip {\n position: relative;\n display: inline-block;\n}\n\na.Button,\nsummary.Button {\n &:hover {\n text-decoration: none;\n }\n}\n\n/* wrap grid content to allow trailingAction to lock-right */\n.Button-content {\n flex: 1 0 auto;\n display: grid;\n grid-template-areas: 'leadingVisual text trailingVisual';\n grid-template-columns: min-content minmax(0, auto) min-content;\n align-items: center;\n place-content: center;\n\n /* padding-bottom: 1px; optical alignment for firefox */\n\n & > :not(:last-child) {\n margin-right: var(--control-medium-gap);\n }\n}\n\n/* center child elements for fullWidth */\n.Button-content--alignStart {\n justify-content: start;\n}\n\n/* button child elements */\n\n/* align svg */\n.Button-visual {\n display: flex;\n pointer-events: none; /* allow click handler to work, avoiding visuals */\n\n & .Counter {\n color: inherit;\n background-color: var(--color-btn-counter-bg);\n }\n}\n\n.Button-label {\n grid-area: text;\n white-space: nowrap;\n line-height: var(--text-body-lineHeight-medium);\n}\n\n.Button-leadingVisual {\n grid-area: leadingVisual;\n}\n\n.Button-trailingVisual {\n grid-area: trailingVisual;\n}\n\n.Button-trailingAction {\n margin-right: calc(var(--base-size-4) * -1);\n}\n\n/* sizes */\n\n.Button--small {\n font-size: var(--text-body-size-small);\n height: var(--control-small-size);\n padding: 0 var(--control-small-paddingInline-condensed);\n gap: var(--control-small-gap);\n\n & .Button-label {\n line-height: var(--text-body-lineHeight-small);\n }\n\n & .Button-content {\n & > :not(:last-child) {\n margin-right: var(--control-small-gap);\n }\n }\n}\n\n.Button--large {\n height: var(--control-large-size);\n padding: 0 var(--control-large-paddingInline-spacious);\n gap: var(--control-large-gap);\n\n & .Button-label {\n line-height: var(--text-body-lineHeight-large);\n }\n\n & .Button-content {\n & > :not(:last-child) {\n margin-right: var(--control-large-gap);\n }\n }\n}\n\n.Button--fullWidth {\n width: 100%;\n}\n\n/* variants */\n\n/* primary */\n.Button--primary {\n color: var(--color-btn-primary-text);\n fill: var(--color-btn-primary-icon);\n background-color: var(--color-btn-primary-bg);\n border-color: var(--color-btn-primary-border);\n box-shadow: var(--color-btn-primary-shadow), var(--color-btn-primary-inset-shadow);\n\n &:hover:not(:disabled) {\n background-color: var(--color-btn-primary-hover-bg);\n border-color: var(--color-btn-primary-hover-border);\n }\n\n /* fallback :focus state */\n &:focus {\n @mixin focusOutlineOnEmphasis;\n\n /* remove fallback :focus if :focus-visible is supported */\n &:not(:focus-visible) {\n outline: solid 1px transparent;\n box-shadow: none;\n }\n }\n\n /* default focus state */\n &:focus-visible {\n @mixin focusOutlineOnEmphasis;\n }\n\n &:active:not(:disabled),\n &[aria-pressed='true'] {\n background-color: var(--color-btn-primary-selected-bg);\n box-shadow: var(--color-btn-primary-selected-shadow);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--color-btn-primary-disabled-text);\n background-color: var(--color-btn-primary-disabled-bg);\n border-color: var(--color-btn-primary-disabled-border);\n fill: var(--color-btn-primary-disabled-text);\n }\n\n & .Counter {\n color: inherit;\n background-color: var(--color-btn-primary-counter-bg);\n }\n}\n\n/* default (secondary) */\n.Button--secondary {\n color: var(--color-btn-text);\n fill: var(--color-fg-muted); /* help this */\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);\n\n &:hover:not(:disabled) {\n background-color: var(--color-btn-hover-bg);\n border-color: var(--color-btn-hover-border);\n }\n\n &:active:not(:disabled) {\n background-color: var(--color-btn-active-bg);\n border-color: var(--color-btn-active-border);\n }\n\n &[aria-pressed='true'] {\n background-color: var(--color-btn-selected-bg);\n box-shadow: var(--color-primer-shadow-inset);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--color-primer-fg-disabled);\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n fill: var(--color-primer-fg-disabled);\n }\n}\n\n.Button--invisible {\n color: var(--color-btn-text);\n\n &:hover:not(:disabled) {\n background-color: var(--color-action-list-item-default-hover-bg);\n }\n\n &[aria-pressed='true'],\n &:active:not(:disabled) {\n background-color: var(--color-action-list-item-default-active-bg);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--color-primer-fg-disabled);\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n fill: var(--color-primer-fg-disabled);\n }\n\n /* if button has no visuals, use link blue for text */\n &.Button--invisible-noVisuals .Button-label {\n color: var(--color-accent-fg);\n }\n\n & .Button-visual {\n color: var(--color-fg-muted);\n\n & .Counter {\n color: var(--color-fg-default);\n }\n }\n}\n\n.Button--link {\n color: var(--color-accent-fg);\n fill: var(--color-accent-fg);\n display: inline-block;\n font-size: inherit;\n border: none;\n height: unset;\n padding: 0;\n\n &:hover:not(:disabled) {\n text-decoration: underline;\n }\n\n &:focus-visible,\n &:focus {\n outline-offset: 2px;\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--color-primer-fg-disabled);\n background-color: transparent;\n border-color: transparent;\n fill: var(--color-primer-fg-disabled);\n }\n}\n\n/* danger */\n.Button--danger {\n color: var(--color-btn-danger-text);\n fill: var(--color-btn-danger-icon);\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);\n\n &:hover:not(:disabled) {\n color: var(--color-btn-danger-hover-text);\n fill: var(--color-btn-danger-hover-text);\n background-color: var(--color-btn-danger-hover-bg);\n border-color: var(--color-btn-danger-hover-border);\n box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow);\n\n & .Counter {\n color: var(--color-btn-danger-hover-counter-fg);\n background-color: var(--color-btn-danger-hover-counter-bg);\n }\n }\n\n &:active:not(:disabled),\n &[aria-pressed='true'] {\n color: var(--color-btn-danger-selected-text);\n fill: var(--color-btn-danger-selected-text);\n background-color: var(--color-btn-danger-selected-bg);\n border-color: var(--color-btn-danger-selected-border);\n box-shadow: var(--color-btn-danger-selected-shadow);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--color-btn-danger-disabled-text);\n fill: var(--color-btn-danger-disabled-text);\n background-color: var(--color-btn-danger-disabled-bg);\n border-color: var(--color-btn-border);\n\n & .Counter {\n color: var(--color-btn-danger-disabled-counter-fg);\n background-color: var(--color-btn-danger-disabled-counter-bg);\n }\n }\n\n & .Counter {\n color: var(--color-btn-danger-counter-fg);\n background-color: var(--color-btn-danger-counter-bg);\n }\n}\n\n.Button--iconOnly {\n display: inline-grid;\n place-content: center;\n padding: unset;\n width: var(--control-medium-size);\n\n &.Button--small {\n width: var(--control-small-size);\n }\n\n &.Button--large {\n width: var(--control-large-size);\n }\n}\n",null,"/* outline with fg box-shadow for buttons */\n@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px, $outlineColor: var(--color-accent-fg) {\n outline: 2px solid $outlineColor;\n outline-offset: $outlineOffset;\n box-shadow: inset 0 0 0 3px var(--color-fg-on-emphasis);\n}\n"]}
1
+ {"version":3,"sources":["button.pcss","<no source>","../../../../lib/postcss_mixins/focusOutlineOnEmphasis.pcss"],"names":[],"mappings":"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","file":"button.css","sourcesContent":["/* CSS for Button */\n\n/* temporary, pre primitives release */\n:root {\n --duration-fast: 80ms;\n --easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n/* base button */\n.Button {\n position: relative;\n font-size: var(--text-body-size-medium);\n font-weight: var(--base-text-weight-medium);\n cursor: pointer;\n user-select: none;\n background-color: transparent;\n border: var(--borderWidth-thin) solid;\n border-color: transparent;\n border-radius: var(--borderRadius-medium);\n color: var(--button-default-fgColor-rest);\n transition: var(--duration-fast) var(--easing-easeInOut);\n transition-property: color, fill, background-color, border-color;\n text-align: center;\n height: var(--control-medium-size);\n padding: 0 var(--control-medium-paddingInline-normal);\n display: inline-flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: var(--base-size-4);\n min-width: max-content;\n\n /* mobile friendly sizing */\n @media (pointer: coarse) {\n &::before {\n @mixin minTouchTarget 48px, 48px;\n }\n }\n\n /* base states */\n\n &:hover {\n transition-duration: var(--duration-fast);\n }\n\n &:active {\n transition: none;\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n cursor: not-allowed;\n box-shadow: none;\n }\n}\n\n.Button-withTooltip {\n position: relative;\n display: inline-block;\n}\n\na.Button,\nsummary.Button {\n &:hover {\n text-decoration: none;\n }\n}\n\n/* wrap grid content to allow trailingAction to lock-right */\n.Button-content {\n flex: 1 0 auto;\n display: grid;\n grid-template-areas: 'leadingVisual text trailingVisual';\n grid-template-columns: min-content minmax(0, auto) min-content;\n align-items: center;\n place-content: center;\n\n /* padding-bottom: 1px; optical alignment for firefox */\n\n & > :not(:last-child) {\n margin-right: var(--control-medium-gap);\n }\n}\n\n/* center child elements for fullWidth */\n.Button-content--alignStart {\n justify-content: start;\n}\n\n/* button child elements */\n\n/* align svg */\n.Button-visual {\n display: flex;\n pointer-events: none; /* allow click handler to work, avoiding visuals */\n\n & .Counter {\n color: inherit;\n background-color: var(--buttonCounter-default-bgColor-rest);\n }\n}\n\n.Button-label {\n grid-area: text;\n white-space: nowrap;\n line-height: var(--text-body-lineHeight-medium);\n}\n\n.Button-leadingVisual {\n grid-area: leadingVisual;\n}\n\n.Button-trailingVisual {\n grid-area: trailingVisual;\n}\n\n.Button-trailingAction {\n margin-right: calc(var(--base-size-4) * -1);\n}\n\n/* sizes */\n\n.Button--small {\n font-size: var(--text-body-size-small);\n height: var(--control-small-size);\n padding: 0 var(--control-small-paddingInline-condensed);\n gap: var(--control-small-gap);\n\n & .Button-label {\n line-height: var(--text-body-lineHeight-small);\n }\n\n & .Button-content {\n & > :not(:last-child) {\n margin-right: var(--control-small-gap);\n }\n }\n}\n\n.Button--large {\n height: var(--control-large-size);\n padding: 0 var(--control-large-paddingInline-spacious);\n gap: var(--control-large-gap);\n\n & .Button-label {\n line-height: var(--text-body-lineHeight-large);\n }\n\n & .Button-content {\n & > :not(:last-child) {\n margin-right: var(--control-large-gap);\n }\n }\n}\n\n.Button--fullWidth {\n width: 100%;\n}\n\n/* variants */\n\n/* primary */\n.Button--primary {\n color: var(--button-primary-fgColor-rest);\n fill: var(--button-primary-iconColor-rest);\n background-color: var(--button-primary-bgColor-rest);\n border-color: var(--button-primary-borderColor-rest);\n box-shadow: var(--shadow-resting-small), var(--shadow-highlight);\n\n &:hover:not(:disabled) {\n background-color: var(--button-primary-bgColor-hover);\n border-color: var(--button-primary-borderColor-hover);\n }\n\n /* fallback :focus state */\n &:focus {\n @mixin focusOutlineOnEmphasis;\n\n /* remove fallback :focus if :focus-visible is supported */\n &:not(:focus-visible) {\n outline: solid 1px transparent;\n box-shadow: none;\n }\n }\n\n /* default focus state */\n &:focus-visible {\n @mixin focusOutlineOnEmphasis;\n }\n\n &:active:not(:disabled),\n &[aria-pressed='true'] {\n background-color: var(--button-primary-bgColor-active);\n box-shadow: var(--button-primary-shadow-selected);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--button-primary-fgColor-disabled);\n background-color: var(--button-primary-bgColor-disabled);\n border-color: var(--button-primary-borderColor-disabled);\n fill: var(--button-primary-fgColor-disabled);\n }\n\n & .Counter {\n color: inherit;\n background-color: var(--buttonCounter-primary-bgColor-rest);\n }\n}\n\n/* default (secondary) */\n.Button--secondary {\n color: var(--button-default-fgColor-rest);\n fill: var(--fgColor-muted); /* help this */\n background-color: var(--button-default-bgColor-rest);\n border-color: var(--button-default-borderColor-rest);\n box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);\n\n &:hover:not(:disabled) {\n background-color: var(--button-default-bgColor-hover);\n border-color: var(--button-default-borderColor-hover);\n }\n\n &:active:not(:disabled) {\n background-color: var(--button-default-bgColor-active);\n border-color: var(--button-default-borderColor-active);\n }\n\n &[aria-pressed='true'] {\n background-color: var(--button-default-bgColor-selected);\n box-shadow: var(--shadow-inset);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--control-fgColor-disabled);\n background-color: var(--button-default-bgColor-disabled);\n border-color: var(--button-default-borderColor-disabled);\n fill: var(--control-fgColor-disabled);\n }\n}\n\n.Button--invisible {\n color: var(--button-default-fgColor-rest);\n\n &:hover:not(:disabled) {\n background-color: var(--button-invisible-bgColor-hover);\n }\n\n &[aria-pressed='true'],\n &:active:not(:disabled) {\n background-color: var(--button-invisible-bgColor-active);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--button-invisible-fgColor-disabled);\n background-color: var(--button-invisible-bgColor-disabled);\n border-color: var(--button-invisible-borderColor-disabled);\n fill: var(--button-invisible-fgColor-disabled);\n }\n\n /* if button has no visuals, use link blue for text */\n &.Button--invisible-noVisuals .Button-label {\n color: var(--button-invisible-fgColor-rest);\n }\n\n & .Button-visual {\n color: var(--fgColor-muted);\n\n & .Counter {\n color: var(--fgColor-default);\n }\n }\n}\n\n.Button--link {\n color: var(--fgColor-link-rest);\n fill: var(--fgColor-link-rest);\n display: inline-block;\n font-size: inherit;\n border: none;\n height: unset;\n padding: 0;\n\n &:hover:not(:disabled) {\n text-decoration: underline;\n }\n\n &:focus-visible,\n &:focus {\n outline-offset: 2px;\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--control-fgColor-disabled);\n background-color: transparent;\n border-color: transparent;\n fill: var(--control-fgColor-disabled);\n }\n}\n\n/* danger */\n.Button--danger {\n color: var(--button-danger-fgColor-rest);\n fill: var(--button-danger-iconColor-rest);\n background-color: var(--button-danger-bgColor-rest);\n border-color: var(--button-danger-borderColor-rest);\n box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);\n\n &:hover:not(:disabled) {\n color: var(--button-danger-fgColor-hover);\n fill: var(--button-danger-fgColor-hover);\n background-color: var(--button-danger-bgColor-hover);\n border-color: var(--button-danger-borderColor-hover);\n box-shadow: var(--shadow-resting-small), var(--shadow-highlight);\n\n & .Counter {\n color: var(--buttonCounter-danger-fgColor-hover);\n background-color: var(--buttonCounter-danger-bgColor-hover);\n }\n }\n\n &:active:not(:disabled),\n &[aria-pressed='true'] {\n color: var(--button-danger-fgColor-active);\n fill: var(--button-danger-fgColor-active);\n background-color: var(--button-danger-bgColor-active);\n border-color: var(--button-danger-borderColor-active);\n box-shadow: var(--button-danger-shadow-selected);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--button-danger-fgColor-disabled);\n fill: var(--button-danger-fgColor-disabled);\n background-color: var(--button-danger-bgColor-disabled);\n border-color: var(--button-default-borderColor-disabled);\n\n & .Counter {\n color: var(--buttonCounter-danger-fgColor-disabled);\n background-color: var(--buttonCounter-danger-bgColor-disabled);\n }\n }\n\n & .Counter {\n color: var(--buttonCounter-danger-fgColor-rest);\n background-color: var(--buttonCounter-danger-bgColor-rest);\n }\n}\n\n.Button--iconOnly {\n display: inline-grid;\n place-content: center;\n padding: unset;\n width: var(--control-medium-size);\n\n &.Button--small {\n width: var(--control-small-size);\n }\n\n &.Button--large {\n width: var(--control-large-size);\n }\n}\n",null,"/* outline with fg box-shadow for buttons */\n@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px, $outlineColor: var(--focus-outlineColor) {\n outline: 2px solid $outlineColor;\n outline-offset: $outlineOffset;\n box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis);\n}\n"]}
data/app/components/primer/beta/button.pcss CHANGED
@@ -17,7 +17,7 @@
17
17
  border: var(--borderWidth-thin) solid;
18
18
  border-color: transparent;
19
19
  border-radius: var(--borderRadius-medium);
20
- color: var(--color-btn-text);
20
+ color: var(--button-default-fgColor-rest);
21
21
  transition: var(--duration-fast) var(--easing-easeInOut);
22
22
  transition-property: color, fill, background-color, border-color;
23
23
  text-align: center;
@@ -96,7 +96,7 @@ summary.Button {
96
96
 
97
97
  & .Counter {
98
98
  color: inherit;
99
- background-color: var(--color-btn-counter-bg);
99
+ background-color: var(--buttonCounter-default-bgColor-rest);
100
100
  }
101
101
  }
102
102
 
@@ -161,15 +161,15 @@ summary.Button {
161
161
 
162
162
  /* primary */
163
163
  .Button--primary {
164
- color: var(--color-btn-primary-text);
165
- fill: var(--color-btn-primary-icon);
166
- background-color: var(--color-btn-primary-bg);
167
- border-color: var(--color-btn-primary-border);
168
- box-shadow: var(--color-btn-primary-shadow), var(--color-btn-primary-inset-shadow);
164
+ color: var(--button-primary-fgColor-rest);
165
+ fill: var(--button-primary-iconColor-rest);
166
+ background-color: var(--button-primary-bgColor-rest);
167
+ border-color: var(--button-primary-borderColor-rest);
168
+ box-shadow: var(--shadow-resting-small), var(--shadow-highlight);
169
169
 
170
170
  &:hover:not(:disabled) {
171
- background-color: var(--color-btn-primary-hover-bg);
172
- border-color: var(--color-btn-primary-hover-border);
171
+ background-color: var(--button-primary-bgColor-hover);
172
+ border-color: var(--button-primary-borderColor-hover);
173
173
  }
174
174
 
175
175
  /* fallback :focus state */
@@ -190,93 +190,93 @@ summary.Button {
190
190
 
191
191
  &:active:not(:disabled),
192
192
  &[aria-pressed='true'] {
193
- background-color: var(--color-btn-primary-selected-bg);
194
- box-shadow: var(--color-btn-primary-selected-shadow);
193
+ background-color: var(--button-primary-bgColor-active);
194
+ box-shadow: var(--button-primary-shadow-selected);
195
195
  }
196
196
 
197
197
  &:disabled,
198
198
  &[aria-disabled='true'] {
199
- color: var(--color-btn-primary-disabled-text);
200
- background-color: var(--color-btn-primary-disabled-bg);
201
- border-color: var(--color-btn-primary-disabled-border);
202
- fill: var(--color-btn-primary-disabled-text);
199
+ color: var(--button-primary-fgColor-disabled);
200
+ background-color: var(--button-primary-bgColor-disabled);
201
+ border-color: var(--button-primary-borderColor-disabled);
202
+ fill: var(--button-primary-fgColor-disabled);
203
203
  }
204
204
 
205
205
  & .Counter {
206
206
  color: inherit;
207
- background-color: var(--color-btn-primary-counter-bg);
207
+ background-color: var(--buttonCounter-primary-bgColor-rest);
208
208
  }
209
209
  }
210
210
 
211
211
  /* default (secondary) */
212
212
  .Button--secondary {
213
- color: var(--color-btn-text);
214
- fill: var(--color-fg-muted); /* help this */
215
- background-color: var(--color-btn-bg);
216
- border-color: var(--color-btn-border);
217
- box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
213
+ color: var(--button-default-fgColor-rest);
214
+ fill: var(--fgColor-muted); /* help this */
215
+ background-color: var(--button-default-bgColor-rest);
216
+ border-color: var(--button-default-borderColor-rest);
217
+ box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);
218
218
 
219
219
  &:hover:not(:disabled) {
220
- background-color: var(--color-btn-hover-bg);
221
- border-color: var(--color-btn-hover-border);
220
+ background-color: var(--button-default-bgColor-hover);
221
+ border-color: var(--button-default-borderColor-hover);
222
222
  }
223
223
 
224
224
  &:active:not(:disabled) {
225
- background-color: var(--color-btn-active-bg);
226
- border-color: var(--color-btn-active-border);
225
+ background-color: var(--button-default-bgColor-active);
226
+ border-color: var(--button-default-borderColor-active);
227
227
  }
228
228
 
229
229
  &[aria-pressed='true'] {
230
- background-color: var(--color-btn-selected-bg);
231
- box-shadow: var(--color-primer-shadow-inset);
230
+ background-color: var(--button-default-bgColor-selected);
231
+ box-shadow: var(--shadow-inset);
232
232
  }
233
233
 
234
234
  &:disabled,
235
235
  &[aria-disabled='true'] {
236
- color: var(--color-primer-fg-disabled);
237
- background-color: var(--color-btn-bg);
238
- border-color: var(--color-btn-border);
239
- fill: var(--color-primer-fg-disabled);
236
+ color: var(--control-fgColor-disabled);
237
+ background-color: var(--button-default-bgColor-disabled);
238
+ border-color: var(--button-default-borderColor-disabled);
239
+ fill: var(--control-fgColor-disabled);
240
240
  }
241
241
  }
242
242
 
243
243
  .Button--invisible {
244
- color: var(--color-btn-text);
244
+ color: var(--button-default-fgColor-rest);
245
245
 
246
246
  &:hover:not(:disabled) {
247
- background-color: var(--color-action-list-item-default-hover-bg);
247
+ background-color: var(--button-invisible-bgColor-hover);
248
248
  }
249
249
 
250
250
  &[aria-pressed='true'],
251
251
  &:active:not(:disabled) {
252
- background-color: var(--color-action-list-item-default-active-bg);
252
+ background-color: var(--button-invisible-bgColor-active);
253
253
  }
254
254
 
255
255
  &:disabled,
256
256
  &[aria-disabled='true'] {
257
- color: var(--color-primer-fg-disabled);
258
- background-color: var(--color-btn-bg);
259
- border-color: var(--color-btn-border);
260
- fill: var(--color-primer-fg-disabled);
257
+ color: var(--button-invisible-fgColor-disabled);
258
+ background-color: var(--button-invisible-bgColor-disabled);
259
+ border-color: var(--button-invisible-borderColor-disabled);
260
+ fill: var(--button-invisible-fgColor-disabled);
261
261
  }
262
262
 
263
263
  /* if button has no visuals, use link blue for text */
264
264
  &.Button--invisible-noVisuals .Button-label {
265
- color: var(--color-accent-fg);
265
+ color: var(--button-invisible-fgColor-rest);
266
266
  }
267
267
 
268
268
  & .Button-visual {
269
- color: var(--color-fg-muted);
269
+ color: var(--fgColor-muted);
270
270
 
271
271
  & .Counter {
272
- color: var(--color-fg-default);
272
+ color: var(--fgColor-default);
273
273
  }
274
274
  }
275
275
  }
276
276
 
277
277
  .Button--link {
278
- color: var(--color-accent-fg);
279
- fill: var(--color-accent-fg);
278
+ color: var(--fgColor-link-rest);
279
+ fill: var(--fgColor-link-rest);
280
280
  display: inline-block;
281
281
  font-size: inherit;
282
282
  border: none;
@@ -294,59 +294,59 @@ summary.Button {
294
294
 
295
295
  &:disabled,
296
296
  &[aria-disabled='true'] {
297
- color: var(--color-primer-fg-disabled);
297
+ color: var(--control-fgColor-disabled);
298
298
  background-color: transparent;
299
299
  border-color: transparent;
300
- fill: var(--color-primer-fg-disabled);
300
+ fill: var(--control-fgColor-disabled);
301
301
  }
302
302
  }
303
303
 
304
304
  /* danger */
305
305
  .Button--danger {
306
- color: var(--color-btn-danger-text);
307
- fill: var(--color-btn-danger-icon);
308
- background-color: var(--color-btn-bg);
309
- border-color: var(--color-btn-border);
310
- box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
306
+ color: var(--button-danger-fgColor-rest);
307
+ fill: var(--button-danger-iconColor-rest);
308
+ background-color: var(--button-danger-bgColor-rest);
309
+ border-color: var(--button-danger-borderColor-rest);
310
+ box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);
311
311
 
312
312
  &:hover:not(:disabled) {
313
- color: var(--color-btn-danger-hover-text);
314
- fill: var(--color-btn-danger-hover-text);
315
- background-color: var(--color-btn-danger-hover-bg);
316
- border-color: var(--color-btn-danger-hover-border);
317
- box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow);
313
+ color: var(--button-danger-fgColor-hover);
314
+ fill: var(--button-danger-fgColor-hover);
315
+ background-color: var(--button-danger-bgColor-hover);
316
+ border-color: var(--button-danger-borderColor-hover);
317
+ box-shadow: var(--shadow-resting-small), var(--shadow-highlight);
318
318
 
319
319
  & .Counter {
320
- color: var(--color-btn-danger-hover-counter-fg);
321
- background-color: var(--color-btn-danger-hover-counter-bg);
320
+ color: var(--buttonCounter-danger-fgColor-hover);
321
+ background-color: var(--buttonCounter-danger-bgColor-hover);
322
322
  }
323
323
  }
324
324
 
325
325
  &:active:not(:disabled),
326
326
  &[aria-pressed='true'] {
327
- color: var(--color-btn-danger-selected-text);
328
- fill: var(--color-btn-danger-selected-text);
329
- background-color: var(--color-btn-danger-selected-bg);
330
- border-color: var(--color-btn-danger-selected-border);
331
- box-shadow: var(--color-btn-danger-selected-shadow);
327
+ color: var(--button-danger-fgColor-active);
328
+ fill: var(--button-danger-fgColor-active);
329
+ background-color: var(--button-danger-bgColor-active);
330
+ border-color: var(--button-danger-borderColor-active);
331
+ box-shadow: var(--button-danger-shadow-selected);
332
332
  }
333
333
 
334
334
  &:disabled,
335
335
  &[aria-disabled='true'] {
336
- color: var(--color-btn-danger-disabled-text);
337
- fill: var(--color-btn-danger-disabled-text);
338
- background-color: var(--color-btn-danger-disabled-bg);
339
- border-color: var(--color-btn-border);
336
+ color: var(--button-danger-fgColor-disabled);
337
+ fill: var(--button-danger-fgColor-disabled);
338
+ background-color: var(--button-danger-bgColor-disabled);
339
+ border-color: var(--button-default-borderColor-disabled);
340
340
 
341
341
  & .Counter {
342
- color: var(--color-btn-danger-disabled-counter-fg);
343
- background-color: var(--color-btn-danger-disabled-counter-bg);
342
+ color: var(--buttonCounter-danger-fgColor-disabled);
343
+ background-color: var(--buttonCounter-danger-bgColor-disabled);
344
344
  }
345
345
  }
346
346
 
347
347
  & .Counter {
348
- color: var(--color-btn-danger-counter-fg);
349
- background-color: var(--color-btn-danger-counter-bg);
348
+ color: var(--buttonCounter-danger-fgColor-rest);
349
+ background-color: var(--buttonCounter-danger-bgColor-rest);
350
350
  }
351
351
  }
352
352
 
data/app/components/primer/beta/counter.css CHANGED
@@ -1 +1 @@
1
- .Counter{background-color:var(--color-neutral-muted);border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--color-counter-border);border-radius:2em;color:var(--color-fg-default);display:inline-block;font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-medium,500);line-height:calc(var(--base-size-20,1.25rem) - var(--borderWidth-thin,max(1px, .0625rem))*2);min-width:var(--base-size-20,1.25rem);padding:0 6px;text-align:center}.Counter:empty{display:none}.Counter .octicon{opacity:.8;vertical-align:text-top}.Counter--primary{background-color:var(--color-neutral-emphasis);color:var(--color-fg-on-emphasis)}.Counter--secondary{background-color:var(--color-neutral-subtle);color:var(--color-fg-muted)}
1
+ .Counter{background-color:var(--bgColor-neutral-muted,var(--color-neutral-subtle));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--counter-borderColor,var(--color-counter-border));border-radius:2em;color:var(--fgColor-default,var(--color-fg-default));display:inline-block;font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-medium,500);line-height:calc(var(--base-size-20,1.25rem) - var(--borderWidth-thin,max(1px, .0625rem))*2);min-width:var(--base-size-20,1.25rem);padding:0 6px;text-align:center}.Counter:empty{display:none}.Counter .octicon{opacity:.8;vertical-align:text-top}.Counter--primary{background-color:var(--bgColor-neutral-emphasis,var(--color-fg-subtle));color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.Counter--secondary{background-color:var(--bgColor-neutral-muted,var(--color-neutral-subtle));color:var(--fgColor-muted,var(--color-fg-muted))}
data/app/components/primer/beta/counter.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["counter.pcss"],"names":[],"mappings":"AAEA,SASE,2CAA4C,CAC5C,kFAAiE,CACjE,iBAAkB,CAJlB,6BAA8B,CAN9B,oBAAqB,CAGrB,4CAAsC,CACtC,8CAA2C,CAC3C,4FAAoE,CAJpE,qCAA8B,CAC9B,aAAc,CAKd,iBAcF,CATE,eACE,YACF,CAGA,kBAEE,UAAY,CADZ,uBAEF,CAGF,kBAEE,8CAA+C,CAD/C,iCAEF,CAEA,oBAEE,4CAA6C,CAD7C,2BAEF","file":"counter.css","sourcesContent":["/* Counter */\n\n.Counter {\n display: inline-block;\n min-width: var(--base-size-20); /* makes sure it's a circle with just one digit */\n padding: 0 6px;\n font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-medium);\n line-height: calc(var(--base-size-20) - var(--borderWidth-thin) * 2); /* 20px - 2px for the borders */\n color: var(--color-fg-default);\n text-align: center;\n background-color: var(--color-neutral-muted);\n border: var(--borderWidth-thin) solid var(--color-counter-border);\n border-radius: 2em;\n\n &:empty {\n display: none;\n }\n\n /* Is this selector used? could not find any use of it */\n & .octicon {\n vertical-align: text-top;\n opacity: 0.8;\n }\n}\n\n.Counter--primary {\n color: var(--color-fg-on-emphasis);\n background-color: var(--color-neutral-emphasis);\n}\n\n.Counter--secondary {\n color: var(--color-fg-muted);\n background-color: var(--color-neutral-subtle);\n}\n"]}
1
+ {"version":3,"sources":["counter.pcss"],"names":[],"mappings":"AAEA,SASE,yEAA8C,CAC9C,6GAAgE,CAChE,iBAAkB,CAJlB,oDAA6B,CAN7B,oBAAqB,CAGrB,4CAAsC,CACtC,8CAA2C,CAC3C,4FAAoE,CAJpE,qCAA8B,CAC9B,aAAc,CAKd,iBAcF,CATE,eACE,YACF,CAGA,kBAEE,UAAY,CADZ,uBAEF,CAGF,kBAEE,uEAAiD,CADjD,2DAEF,CAEA,oBAEE,yEAA8C,CAD9C,gDAEF","file":"counter.css","sourcesContent":["/* Counter */\n\n.Counter {\n display: inline-block;\n min-width: var(--base-size-20); /* makes sure it's a circle with just one digit */\n padding: 0 6px;\n font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-medium);\n line-height: calc(var(--base-size-20) - var(--borderWidth-thin) * 2); /* 20px - 2px for the borders */\n color: var(--fgColor-default);\n text-align: center;\n background-color: var(--bgColor-neutral-muted);\n border: var(--borderWidth-thin) solid var(--counter-borderColor);\n border-radius: 2em;\n\n &:empty {\n display: none;\n }\n\n /* Is this selector used? could not find any use of it */\n & .octicon {\n vertical-align: text-top;\n opacity: 0.8;\n }\n}\n\n.Counter--primary {\n color: var(--fgColor-onEmphasis);\n background-color: var(--bgColor-neutral-emphasis);\n}\n\n.Counter--secondary {\n color: var(--fgColor-muted);\n background-color: var(--bgColor-neutral-muted);\n}\n"]}
data/app/components/primer/beta/counter.pcss CHANGED
@@ -7,10 +7,10 @@
7
7
  font-size: var(--text-body-size-small);
8
8
  font-weight: var(--base-text-weight-medium);
9
9
  line-height: calc(var(--base-size-20) - var(--borderWidth-thin) * 2); /* 20px - 2px for the borders */
10
- color: var(--color-fg-default);
10
+ color: var(--fgColor-default);
11
11
  text-align: center;
12
- background-color: var(--color-neutral-muted);
13
- border: var(--borderWidth-thin) solid var(--color-counter-border);
12
+ background-color: var(--bgColor-neutral-muted);
13
+ border: var(--borderWidth-thin) solid var(--counter-borderColor);
14
14
  border-radius: 2em;
15
15
 
16
16
  &:empty {
@@ -25,11 +25,11 @@
25
25
  }
26
26
 
27
27
  .Counter--primary {
28
- color: var(--color-fg-on-emphasis);
29
- background-color: var(--color-neutral-emphasis);
28
+ color: var(--fgColor-onEmphasis);
29
+ background-color: var(--bgColor-neutral-emphasis);
30
30
  }
31
31
 
32
32
  .Counter--secondary {
33
- color: var(--color-fg-muted);
34
- background-color: var(--color-neutral-subtle);
33
+ color: var(--fgColor-muted);
34
+ background-color: var(--bgColor-neutral-muted);
35
35
  }
data/app/components/primer/beta/flash.css CHANGED
@@ -1 +1 @@
1
- .flash:not(.Banner){background-image:linear-gradient(var(--color-accent-subtle),var(--color-accent-subtle));border-color:var(--color-accent-muted);border-radius:var(--borderRadius-medium,6px);border-style:solid;border-width:var(--borderWidth-thin,max(1px,.0625rem));color:var(--color-fg-default);padding:var(--base-size-20,1.25rem) var(--control-medium-paddingInline-spacious,1rem);position:relative}.flash:not(.Banner) .octicon{color:var(--color-accent-fg);margin-right:var(--base-size-12,.75rem)}.flash:not(.Banner) p:last-child{margin-bottom:0}.flash-messages{margin-bottom:var(--stack-gap-spacious,1.5rem)}.flash-close:not(.Banner-close){-webkit-appearance:none;appearance:none;background:none;border:0;cursor:pointer;float:right;margin:calc(var(--control-medium-paddingInline-spacious,1rem)*-1);padding:var(--control-medium-paddingInline-spacious,1rem);text-align:center}.flash-close:not(.Banner-close):hover{opacity:.7}.flash-close:not(.Banner-close):active{opacity:.5}.flash-close:not(.Banner-close) .octicon{margin-right:0}.flash-action:not(.Banner-actions){background-clip:padding-box;float:right;margin-left:var(--stack-gap-spacious,1.5rem);margin-top:-3px}.flash-action.btn:not(.Banner-actions) .octicon{color:var(--color-fg-muted);margin-right:var(--control-small-gap,.25rem)}.flash-action.btn-primary:not(.Banner-actions){background-clip:initial}.flash-action.btn-primary:not(.Banner-actions) .octicon{color:inherit}.flash-warn:not(.Banner){background-image:linear-gradient(var(--color-attention-subtle),var(--color-attention-subtle));border-color:var(--color-attention-muted);color:var(--color-fg-default)}.flash-warn:not(.Banner) .octicon{color:var(--color-attention-fg)}.flash-error:not(.Banner){background-image:linear-gradient(var(--color-danger-subtle),var(--color-danger-subtle));border-color:var(--color-danger-muted);color:var(--color-fg-default)}.flash-error:not(.Banner) .octicon{color:var(--color-danger-fg)}.flash-success:not(.Banner){background-image:linear-gradient(var(--color-success-subtle),var(--color-success-subtle));border-color:var(--color-success-muted);color:var(--color-fg-default)}.flash-success:not(.Banner) .octicon{color:var(--color-success-fg)}.flash-full:not(.Banner){border-radius:0;border-width:var(--borderWidth-thin,max(1px,.0625rem)) 0;margin-top:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}.flash-banner{border-left:0;border-radius:0;border-right:0;border-top:0;position:fixed;top:0;width:100%;z-index:90}.flash-banner,.flash-full{background-color:var(--color-canvas-default)}.warning{background-color:var(--color-attention-subtle);font-weight:var(--base-text-weight-semibold,600);margin-bottom:.8em;padding:.5em}
1
+ .flash:not(.Banner){background-image:linear-gradient(var(--bgColor-accent-muted,var(--color-accent-subtle)),var(--bgColor-accent-muted,var(--color-accent-subtle)));border-color:var(--borderColor-accent-muted,var(--color-accent-muted));border-radius:var(--borderRadius-medium,6px);border-style:solid;border-width:var(--borderWidth-thin,max(1px,.0625rem));color:var(--fgColor-default,var(--color-fg-default));padding:var(--base-size-20,1.25rem) var(--control-medium-paddingInline-spacious,1rem);position:relative}.flash:not(.Banner) .octicon{color:var(--fgColor-accent,var(--color-accent-fg));margin-right:var(--base-size-12,.75rem)}.flash:not(.Banner) p:last-child{margin-bottom:0}.flash-messages{margin-bottom:var(--stack-gap-spacious,1.5rem)}.flash-close:not(.Banner-close){-webkit-appearance:none;appearance:none;background:none;border:0;cursor:pointer;float:right;margin:calc(var(--control-medium-paddingInline-spacious,1rem)*-1);padding:var(--control-medium-paddingInline-spacious,1rem);text-align:center}.flash-close:not(.Banner-close):hover{opacity:.7}.flash-close:not(.Banner-close):active{opacity:.5}.flash-close:not(.Banner-close) .octicon{margin-right:0}.flash-action:not(.Banner-actions){background-clip:padding-box;float:right;margin-left:var(--stack-gap-spacious,1.5rem);margin-top:-3px}.flash-action.btn:not(.Banner-actions) .octicon{color:var(--fgColor-muted,var(--color-fg-muted));margin-right:var(--control-small-gap,.25rem)}.flash-action.btn-primary:not(.Banner-actions){background-clip:initial}.flash-action.btn-primary:not(.Banner-actions) .octicon{color:inherit}.flash-warn:not(.Banner){background-image:linear-gradient(var(--bgColor-attention-muted,var(--color-attention-subtle)),var(--bgColor-attention-muted,var(--color-attention-subtle)));border-color:var(--borderColor-attention-muted,var(--color-attention-muted));color:var(--fgColor-default,var(--color-fg-default))}.flash-warn:not(.Banner) .octicon{color:var(--fgColor-attention,var(--color-attention-fg))}.flash-error:not(.Banner){background-image:linear-gradient(var(--bgColor-danger-muted,var(--color-danger-subtle)),var(--bgColor-danger-muted,var(--color-danger-subtle)));border-color:var(--borderColor-danger-muted,var(--color-danger-muted));color:var(--fgColor-default,var(--color-fg-default))}.flash-error:not(.Banner) .octicon{color:var(--fgColor-danger,var(--color-danger-fg))}.flash-success:not(.Banner){background-image:linear-gradient(var(--bgColor-success-muted,var(--color-success-subtle)),var(--bgColor-success-muted,var(--color-success-subtle)));border-color:var(--borderColor-success-muted,var(--color-success-muted));color:var(--fgColor-default,var(--color-fg-default))}.flash-success:not(.Banner) .octicon{color:var(--fgColor-success,var(--color-success-fg))}.flash-full:not(.Banner){border-radius:0;border-width:var(--borderWidth-thin,max(1px,.0625rem)) 0;margin-top:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}.flash-banner{border-left:0;border-radius:0;border-right:0;border-top:0;position:fixed;top:0;width:100%;z-index:90}.flash-banner,.flash-full{background-color:var(--bgColor-default,var(--color-canvas-default))}.warning{background-color:var(--bgColor-attention-muted,var(--color-attention-subtle));font-weight:var(--base-text-weight-semibold,600);margin-bottom:.8em;padding:.5em}
data/app/components/primer/beta/flash.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["flash.pcss"],"names":[],"mappings":"AAGA,oBASE,uFAAyF,CACzF,sCAAuC,CALvC,4CAAyC,CAFzC,kBAAmB,CACnB,sDAAqC,CAIrC,6BAA8B,CAN9B,qFAAyE,CADzE,iBAmBF,CARE,6BACE,4BAA6B,CAC7B,uCACF,CAEA,iCACE,eACF,CAIF,gBACE,8CACF,CAGA,gCAUE,uBAAgB,CAAhB,eAAgB,CAFhB,eAAgB,CAChB,QAAS,CAJT,cAAe,CAJf,WAAY,CAEZ,iEAA+D,CAD/D,yDAAqD,CAErD,iBAmBF,CAXE,sCACE,UACF,CAEA,uCACE,UACF,CAEA,yCACE,cACF,CAIF,mCAIE,2BAA4B,CAH5B,WAAY,CAEZ,4CAAsC,CADtC,eAgBF,CAZE,gDAEE,2BAA4B,CAD5B,4CAEF,CAEA,+CACE,uBAKF,CAHE,wDACE,aACF,CAMJ,yBAEE,6FAA+F,CAC/F,yCAA0C,CAF1C,6BAOF,CAHE,kCACE,+BACF,CAGF,0BAEE,uFAAyF,CACzF,sCAAuC,CAFvC,6BAOF,CAHE,mCACE,4BACF,CAGF,4BAEE,yFAA2F,CAC3F,uCAAwC,CAFxC,6BAOF,CAHE,qCACE,6BACF,CAKF,yBAGE,eAAgB,CADhB,wDAAuC,CADvC,8DAGF,CAGA,cAOE,aAAc,CACd,eAAgB,CAFhB,cAAe,CADf,YAAa,CAJb,cAAe,CACf,KAAM,CAEN,UAAW,CADX,UAMF,CAGA,0BAEE,4CACF,CAGA,SAIE,8CAA+C,CAD/C,gDAA6C,CAD7C,kBAAoB,CADpB,YAIF","file":"flash.css","sourcesContent":["/* flash */\n\n/* Default flash */\n.flash:not(.Banner) {\n position: relative;\n padding: var(--base-size-20) var(--control-medium-paddingInline-spacious);\n border-style: solid;\n border-width: var(--borderWidth-thin);\n border-radius: var(--borderRadius-medium);\n\n /* Default color */\n color: var(--color-fg-default);\n background-image: linear-gradient(var(--color-accent-subtle), var(--color-accent-subtle));\n border-color: var(--color-accent-muted);\n\n & .octicon {\n color: var(--color-accent-fg);\n margin-right: var(--base-size-12);\n }\n\n & p:last-child {\n margin-bottom: 0;\n }\n}\n\n/* Contain the flash messages */\n.flash-messages {\n margin-bottom: var(--stack-gap-spacious);\n}\n\n/* Close button */\n.flash-close:not(.Banner-close) {\n float: right;\n padding: var(--control-medium-paddingInline-spacious);\n margin: calc(var(--control-medium-paddingInline-spacious) * -1);\n text-align: center;\n cursor: pointer;\n\n /* Undo `<button>` styles */\n background: none;\n border: 0;\n appearance: none;\n\n &:hover {\n opacity: 0.7;\n }\n\n &:active {\n opacity: 0.5;\n }\n\n & .octicon {\n margin-right: 0;\n }\n}\n\n/* Action button */\n.flash-action:not(.Banner-actions) {\n float: right;\n margin-top: -3px;\n margin-left: var(--stack-gap-spacious);\n background-clip: padding-box;\n\n &.btn .octicon {\n margin-right: var(--control-small-gap);\n color: var(--color-fg-muted);\n }\n\n &.btn-primary {\n background-clip: border-box;\n\n & .octicon {\n color: inherit;\n }\n }\n}\n\n/* Color variations */\n\n.flash-warn:not(.Banner) {\n color: var(--color-fg-default);\n background-image: linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle));\n border-color: var(--color-attention-muted);\n\n & .octicon {\n color: var(--color-attention-fg);\n }\n}\n\n.flash-error:not(.Banner) {\n color: var(--color-fg-default);\n background-image: linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle));\n border-color: var(--color-danger-muted);\n\n & .octicon {\n color: var(--color-danger-fg);\n }\n}\n\n.flash-success:not(.Banner) {\n color: var(--color-fg-default);\n background-image: linear-gradient(var(--color-success-subtle), var(--color-success-subtle));\n border-color: var(--color-success-muted);\n\n & .octicon {\n color: var(--color-success-fg);\n }\n}\n\n/* Layout variations */\n\n.flash-full:not(.Banner) {\n margin-top: calc(var(--borderWidth-thin) * -1);\n border-width: var(--borderWidth-thin) 0;\n border-radius: 0;\n}\n\n/* A banner rendered at the top of the page. */\n.flash-banner {\n position: fixed;\n top: 0;\n z-index: 90;\n width: 100%;\n border-top: 0;\n border-right: 0;\n border-left: 0;\n border-radius: 0;\n}\n\n/* Makes sure the background is opaque to cover any content underneath */\n.flash-full,\n.flash-banner {\n background-color: var(--color-canvas-default);\n}\n\n/* FIXME deprecate this */\n.warning {\n padding: 0.5em;\n margin-bottom: 0.8em;\n font-weight: var(--base-text-weight-semibold);\n background-color: var(--color-attention-subtle);\n}\n"]}
1
+ {"version":3,"sources":["flash.pcss"],"names":[],"mappings":"AAGA,oBASE,+IAA2F,CAC3F,sEAA6C,CAL7C,4CAAyC,CAFzC,kBAAmB,CACnB,sDAAqC,CAIrC,oDAA6B,CAN7B,qFAAyE,CADzE,iBAmBF,CARE,6BACE,kDAA4B,CAC5B,uCACF,CAEA,iCACE,eACF,CAIF,gBACE,8CACF,CAGA,gCAUE,uBAAgB,CAAhB,eAAgB,CAFhB,eAAgB,CAChB,QAAS,CAJT,cAAe,CAJf,WAAY,CAEZ,iEAA+D,CAD/D,yDAAqD,CAErD,iBAmBF,CAXE,sCACE,UACF,CAEA,uCACE,UACF,CAEA,yCACE,cACF,CAIF,mCAIE,2BAA4B,CAH5B,WAAY,CAEZ,4CAAsC,CADtC,eAgBF,CAZE,gDAEE,gDAA2B,CAD3B,4CAEF,CAEA,+CACE,uBAKF,CAHE,wDACE,aACF,CAMJ,yBAEE,2JAAiG,CACjG,4EAAgD,CAFhD,oDAOF,CAHE,kCACE,wDACF,CAGF,0BAEE,+IAA2F,CAC3F,sEAA6C,CAF7C,oDAOF,CAHE,mCACE,kDACF,CAGF,4BAEE,mJAA6F,CAC7F,wEAA8C,CAF9C,oDAOF,CAHE,qCACE,oDACF,CAKF,yBAGE,eAAgB,CADhB,wDAAuC,CADvC,8DAGF,CAGA,cAOE,aAAc,CACd,eAAgB,CAFhB,cAAe,CADf,YAAa,CAJb,cAAe,CACf,KAAM,CAEN,UAAW,CADX,UAMF,CAGA,0BAEE,mEACF,CAGA,SAIE,6EAAgD,CADhD,gDAA6C,CAD7C,kBAAoB,CADpB,YAIF","file":"flash.css","sourcesContent":["/* flash */\n\n/* Default flash */\n.flash:not(.Banner) {\n position: relative;\n padding: var(--base-size-20) var(--control-medium-paddingInline-spacious);\n border-style: solid;\n border-width: var(--borderWidth-thin);\n border-radius: var(--borderRadius-medium);\n\n /* Default color */\n color: var(--fgColor-default);\n background-image: linear-gradient(var(--bgColor-accent-muted), var(--bgColor-accent-muted));\n border-color: var(--borderColor-accent-muted);\n\n & .octicon {\n color: var(--fgColor-accent);\n margin-right: var(--base-size-12);\n }\n\n & p:last-child {\n margin-bottom: 0;\n }\n}\n\n/* Contain the flash messages */\n.flash-messages {\n margin-bottom: var(--stack-gap-spacious);\n}\n\n/* Close button */\n.flash-close:not(.Banner-close) {\n float: right;\n padding: var(--control-medium-paddingInline-spacious);\n margin: calc(var(--control-medium-paddingInline-spacious) * -1);\n text-align: center;\n cursor: pointer;\n\n /* Undo `<button>` styles */\n background: none;\n border: 0;\n appearance: none;\n\n &:hover {\n opacity: 0.7;\n }\n\n &:active {\n opacity: 0.5;\n }\n\n & .octicon {\n margin-right: 0;\n }\n}\n\n/* Action button */\n.flash-action:not(.Banner-actions) {\n float: right;\n margin-top: -3px;\n margin-left: var(--stack-gap-spacious);\n background-clip: padding-box;\n\n &.btn .octicon {\n margin-right: var(--control-small-gap);\n color: var(--fgColor-muted);\n }\n\n &.btn-primary {\n background-clip: border-box;\n\n & .octicon {\n color: inherit;\n }\n }\n}\n\n/* Color variations */\n\n.flash-warn:not(.Banner) {\n color: var(--fgColor-default);\n background-image: linear-gradient(var(--bgColor-attention-muted), var(--bgColor-attention-muted));\n border-color: var(--borderColor-attention-muted);\n\n & .octicon {\n color: var(--fgColor-attention);\n }\n}\n\n.flash-error:not(.Banner) {\n color: var(--fgColor-default);\n background-image: linear-gradient(var(--bgColor-danger-muted), var(--bgColor-danger-muted));\n border-color: var(--borderColor-danger-muted);\n\n & .octicon {\n color: var(--fgColor-danger);\n }\n}\n\n.flash-success:not(.Banner) {\n color: var(--fgColor-default);\n background-image: linear-gradient(var(--bgColor-success-muted), var(--bgColor-success-muted));\n border-color: var(--borderColor-success-muted);\n\n & .octicon {\n color: var(--fgColor-success);\n }\n}\n\n/* Layout variations */\n\n.flash-full:not(.Banner) {\n margin-top: calc(var(--borderWidth-thin) * -1);\n border-width: var(--borderWidth-thin) 0;\n border-radius: 0;\n}\n\n/* A banner rendered at the top of the page. */\n.flash-banner {\n position: fixed;\n top: 0;\n z-index: 90;\n width: 100%;\n border-top: 0;\n border-right: 0;\n border-left: 0;\n border-radius: 0;\n}\n\n/* Makes sure the background is opaque to cover any content underneath */\n.flash-full,\n.flash-banner {\n background-color: var(--bgColor-default);\n}\n\n/* FIXME deprecate this */\n.warning {\n padding: 0.5em;\n margin-bottom: 0.8em;\n font-weight: var(--base-text-weight-semibold);\n background-color: var(--bgColor-attention-muted);\n}\n"]}
data/app/components/primer/beta/flash.pcss CHANGED
@@ -9,12 +9,12 @@
9
9
  border-radius: var(--borderRadius-medium);
10
10
 
11
11
  /* Default color */
12
- color: var(--color-fg-default);
13
- background-image: linear-gradient(var(--color-accent-subtle), var(--color-accent-subtle));
14
- border-color: var(--color-accent-muted);
12
+ color: var(--fgColor-default);
13
+ background-image: linear-gradient(var(--bgColor-accent-muted), var(--bgColor-accent-muted));
14
+ border-color: var(--borderColor-accent-muted);
15
15
 
16
16
  & .octicon {
17
- color: var(--color-accent-fg);
17
+ color: var(--fgColor-accent);
18
18
  margin-right: var(--base-size-12);
19
19
  }
20
20
 
@@ -63,7 +63,7 @@
63
63
 
64
64
  &.btn .octicon {
65
65
  margin-right: var(--control-small-gap);
66
- color: var(--color-fg-muted);
66
+ color: var(--fgColor-muted);
67
67
  }
68
68
 
69
69
  &.btn-primary {
@@ -78,32 +78,32 @@
78
78
  /* Color variations */
79
79
 
80
80
  .flash-warn:not(.Banner) {
81
- color: var(--color-fg-default);
82
- background-image: linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle));
83
- border-color: var(--color-attention-muted);
81
+ color: var(--fgColor-default);
82
+ background-image: linear-gradient(var(--bgColor-attention-muted), var(--bgColor-attention-muted));
83
+ border-color: var(--borderColor-attention-muted);
84
84
 
85
85
  & .octicon {
86
- color: var(--color-attention-fg);
86
+ color: var(--fgColor-attention);
87
87
  }
88
88
  }
89
89
 
90
90
  .flash-error:not(.Banner) {
91
- color: var(--color-fg-default);
92
- background-image: linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle));
93
- border-color: var(--color-danger-muted);
91
+ color: var(--fgColor-default);
92
+ background-image: linear-gradient(var(--bgColor-danger-muted), var(--bgColor-danger-muted));
93
+ border-color: var(--borderColor-danger-muted);
94
94
 
95
95
  & .octicon {
96
- color: var(--color-danger-fg);
96
+ color: var(--fgColor-danger);
97
97
  }
98
98
  }
99
99
 
100
100
  .flash-success:not(.Banner) {
101
- color: var(--color-fg-default);
102
- background-image: linear-gradient(var(--color-success-subtle), var(--color-success-subtle));
103
- border-color: var(--color-success-muted);
101
+ color: var(--fgColor-default);
102
+ background-image: linear-gradient(var(--bgColor-success-muted), var(--bgColor-success-muted));
103
+ border-color: var(--borderColor-success-muted);
104
104
 
105
105
  & .octicon {
106
- color: var(--color-success-fg);
106
+ color: var(--fgColor-success);
107
107
  }
108
108
  }
109
109
 
@@ -130,7 +130,7 @@
130
130
  /* Makes sure the background is opaque to cover any content underneath */
131
131
  .flash-full,
132
132
  .flash-banner {
133
- background-color: var(--color-canvas-default);
133
+ background-color: var(--bgColor-default);
134
134
  }
135
135
 
136
136
  /* FIXME deprecate this */
@@ -138,5 +138,5 @@
138
138
  padding: 0.5em;
139
139
  margin-bottom: 0.8em;
140
140
  font-weight: var(--base-text-weight-semibold);
141
- background-color: var(--color-attention-subtle);
141
+ background-color: var(--bgColor-attention-muted);
142
142
  }
data/app/components/primer/beta/label.css CHANGED
@@ -1 +1 @@
1
- .labels{position:relative}.Label,.label{border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--color-border-default);border-radius:2em;display:inline-block;font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-medium,500);line-height:18px;padding:0 7px;white-space:nowrap}.Label:hover,.label:hover{text-decoration:none}.Label--large{line-height:22px;padding-left:10px;padding-right:10px}.Label--inline{display:inline;font-size:85%;padding:.12em .5em}.Label--primary{border-color:var(--color-neutral-emphasis);color:var(--color-fg-default)}.Label--secondary{border-color:var(--color-border-default);color:var(--color-fg-muted)}.Label--accent,.Label--info{border-color:var(--color-accent-emphasis);color:var(--color-accent-fg)}.Label--success{border-color:var(--color-success-emphasis);color:var(--color-success-fg)}.Label--attention,.Label--warning{border-color:var(--color-attention-emphasis);color:var(--color-attention-fg)}.Label--severe{border-color:var(--color-severe-emphasis);color:var(--color-severe-fg)}.Label--danger{border-color:var(--color-danger-emphasis);color:var(--color-danger-fg)}.Label--open{border-color:var(--color-open-emphasis);color:var(--color-open-fg)}.Label--closed{border-color:var(--color-closed-emphasis);color:var(--color-closed-fg)}.Label--done{border-color:var(--color-done-emphasis);color:var(--color-done-fg)}.Label--sponsors{border-color:var(--color-sponsors-emphasis);color:var(--color-sponsors-fg)}
1
+ .labels{position:relative}.Label,.label{border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));border-radius:2em;display:inline-block;font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-medium,500);line-height:18px;padding:0 7px;white-space:nowrap}.Label:hover,.label:hover{text-decoration:none}.Label--large{line-height:22px;padding-left:10px;padding-right:10px}.Label--inline{display:inline;font-size:85%;padding:.12em .5em}.Label--primary{border-color:var(--borderColor-neutral-emphasis,var(--color-fg-subtle));color:var(--fgColor-default,var(--color-fg-default))}.Label--secondary{border-color:var(--borderColor-default,var(--color-border-default));color:var(--fgColor-muted,var(--color-fg-muted))}.Label--accent,.Label--info{border-color:var(--borderColor-accent-emphasis,var(--color-accent-fg));color:var(--fgColor-accent,var(--color-accent-fg))}.Label--success{border-color:var(--borderColor-success-emphasis,var(--color-success-emphasis));color:var(--fgColor-success,var(--color-success-fg))}.Label--attention,.Label--warning{border-color:var(--borderColor-attention-emphasis,var(--color-attention-emphasis));color:var(--fgColor-attention,var(--color-attention-fg))}.Label--severe{border-color:var(--borderColor-severe-emphasis,var(--color-severe-emphasis));color:var(--fgColor-severe,var(--color-severe-fg))}.Label--danger{border-color:var(--borderColor-danger-emphasis,var(--color-danger-emphasis));color:var(--fgColor-danger,var(--color-danger-fg))}.Label--open{border-color:var(--borderColor-open-emphasis,var(--color-open-emphasis));color:var(--fgColor-open,var(--color-open-fg))}.Label--closed{border-color:var(--borderColor-closed-emphasis,var(--color-closed-emphasis));color:var(--fgColor-closed,var(--color-closed-fg))}.Label--done{border-color:var(--borderColor-done-emphasis,var(--color-done-emphasis));color:var(--fgColor-done,var(--color-done-fg))}.Label--sponsors{border-color:var(--borderColor-sponsors-emphasis,var(--color-sponsors-emphasis));color:var(--fgColor-sponsors,var(--color-sponsors-fg))}
data/app/components/primer/beta/label.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["label.pcss"],"names":[],"mappings":"AAGA,QACE,iBACF,CAIA,cAQE,kFAAiE,CACjE,iBAAkB,CAPlB,oBAAqB,CAErB,4CAAsC,CACtC,8CAA2C,CAC3C,gBAAiB,CAHjB,aAAc,CAId,kBAOF,CAHE,0BACE,oBACF,CAKF,cAGE,gBAAiB,CADjB,iBAAkB,CADlB,kBAGF,CAMA,eACE,cAAe,CAEf,aAAc,CADd,kBAEF,CAIA,gBAEE,0CAA2C,CAD3C,6BAEF,CAEA,kBAEE,wCAAyC,CADzC,2BAEF,CAIA,4BAGE,yCAA0C,CAD1C,4BAEF,CAEA,gBAEE,0CAA2C,CAD3C,6BAEF,CAEA,kCAGE,4CAA6C,CAD7C,+BAEF,CAEA,eAEE,yCAA0C,CAD1C,4BAEF,CAEA,eAEE,yCAA0C,CAD1C,4BAEF,CAEA,aAEE,uCAAwC,CADxC,0BAEF,CAEA,eAEE,yCAA0C,CAD1C,4BAEF,CAEA,aAEE,uCAAwC,CADxC,0BAEF,CAEA,iBAEE,2CAA4C,CAD5C,8BAEF","file":"label.css","sourcesContent":["/* Labels */\n\n/* Provide a wrapper to ensure labels stick together */\n.labels {\n position: relative;\n}\n\n/* Default 20px */\n\n.label, /* TODO: Deprecate */\n.Label {\n display: inline-block;\n padding: 0 7px;\n font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-medium);\n line-height: 18px;\n white-space: nowrap;\n border: var(--borderWidth-thin) solid var(--color-border-default);\n border-radius: 2em;\n\n &:hover {\n text-decoration: none;\n }\n}\n\n/* Large 24px */\n\n.Label--large {\n padding-right: 10px;\n padding-left: 10px;\n line-height: 22px;\n}\n\n/* Inline */\n\n/* Doesn't increase height of parent element\n** Can be used with different font-sizes */\n.Label--inline {\n display: inline;\n padding: 0.12em 0.5em;\n font-size: 85%;\n}\n\n/* Contrast */\n\n.Label--primary {\n color: var(--color-fg-default);\n border-color: var(--color-neutral-emphasis);\n}\n\n.Label--secondary {\n color: var(--color-fg-muted);\n border-color: var(--color-border-default);\n}\n\n/* Colors */\n\n.Label--info, /* TODO: deprecate */\n.Label--accent {\n color: var(--color-accent-fg);\n border-color: var(--color-accent-emphasis);\n}\n\n.Label--success {\n color: var(--color-success-fg);\n border-color: var(--color-success-emphasis);\n}\n\n.Label--warning, /* TODO: deprecate */\n.Label--attention {\n color: var(--color-attention-fg);\n border-color: var(--color-attention-emphasis);\n}\n\n.Label--severe {\n color: var(--color-severe-fg);\n border-color: var(--color-severe-emphasis);\n}\n\n.Label--danger {\n color: var(--color-danger-fg);\n border-color: var(--color-danger-emphasis);\n}\n\n.Label--open {\n color: var(--color-open-fg);\n border-color: var(--color-open-emphasis);\n}\n\n.Label--closed {\n color: var(--color-closed-fg);\n border-color: var(--color-closed-emphasis);\n}\n\n.Label--done {\n color: var(--color-done-fg);\n border-color: var(--color-done-emphasis);\n}\n\n.Label--sponsors {\n color: var(--color-sponsors-fg);\n border-color: var(--color-sponsors-emphasis);\n}\n"]}
1
+ {"version":3,"sources":["label.pcss"],"names":[],"mappings":"AAGA,QACE,iBACF,CAIA,cAQE,6GAAgE,CAChE,iBAAkB,CAPlB,oBAAqB,CAErB,4CAAsC,CACtC,8CAA2C,CAC3C,gBAAiB,CAHjB,aAAc,CAId,kBAOF,CAHE,0BACE,oBACF,CAKF,cAGE,gBAAiB,CADjB,iBAAkB,CADlB,kBAGF,CAMA,eACE,cAAe,CAEf,aAAc,CADd,kBAEF,CAIA,gBAEE,uEAAiD,CADjD,oDAEF,CAEA,kBAEE,mEAAwC,CADxC,gDAEF,CAIA,4BAGE,sEAAgD,CADhD,kDAEF,CAEA,gBAEE,8EAAiD,CADjD,oDAEF,CAEA,kCAGE,kFAAmD,CADnD,wDAEF,CAEA,eAEE,4EAAgD,CADhD,kDAEF,CAEA,eAEE,4EAAgD,CADhD,kDAEF,CAEA,aAEE,wEAA8C,CAD9C,8CAEF,CAEA,eAEE,4EAAgD,CADhD,kDAEF,CAEA,aAEE,wEAA8C,CAD9C,8CAEF,CAEA,iBAEE,gFAAkD,CADlD,sDAEF","file":"label.css","sourcesContent":["/* Labels */\n\n/* Provide a wrapper to ensure labels stick together */\n.labels {\n position: relative;\n}\n\n/* Default 20px */\n\n.label, /* TODO: Deprecate */\n.Label {\n display: inline-block;\n padding: 0 7px;\n font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-medium);\n line-height: 18px;\n white-space: nowrap;\n border: var(--borderWidth-thin) solid var(--borderColor-default);\n border-radius: 2em;\n\n &:hover {\n text-decoration: none;\n }\n}\n\n/* Large 24px */\n\n.Label--large {\n padding-right: 10px;\n padding-left: 10px;\n line-height: 22px;\n}\n\n/* Inline */\n\n/* Doesn't increase height of parent element\n** Can be used with different font-sizes */\n.Label--inline {\n display: inline;\n padding: 0.12em 0.5em;\n font-size: 85%;\n}\n\n/* Contrast */\n\n.Label--primary {\n color: var(--fgColor-default);\n border-color: var(--borderColor-neutral-emphasis);\n}\n\n.Label--secondary {\n color: var(--fgColor-muted);\n border-color: var(--borderColor-default);\n}\n\n/* Colors */\n\n.Label--info, /* TODO: deprecate */\n.Label--accent {\n color: var(--fgColor-accent);\n border-color: var(--borderColor-accent-emphasis);\n}\n\n.Label--success {\n color: var(--fgColor-success);\n border-color: var(--borderColor-success-emphasis);\n}\n\n.Label--warning, /* TODO: deprecate */\n.Label--attention {\n color: var(--fgColor-attention);\n border-color: var(--borderColor-attention-emphasis);\n}\n\n.Label--severe {\n color: var(--fgColor-severe);\n border-color: var(--borderColor-severe-emphasis);\n}\n\n.Label--danger {\n color: var(--fgColor-danger);\n border-color: var(--borderColor-danger-emphasis);\n}\n\n.Label--open {\n color: var(--fgColor-open);\n border-color: var(--borderColor-open-emphasis);\n}\n\n.Label--closed {\n color: var(--fgColor-closed);\n border-color: var(--borderColor-closed-emphasis);\n}\n\n.Label--done {\n color: var(--fgColor-done);\n border-color: var(--borderColor-done-emphasis);\n}\n\n.Label--sponsors {\n color: var(--fgColor-sponsors);\n border-color: var(--borderColor-sponsors-emphasis);\n}\n"]}
data/app/components/primer/beta/label.pcss CHANGED
@@ -15,7 +15,7 @@
15
15
  font-weight: var(--base-text-weight-medium);
16
16
  line-height: 18px;
17
17
  white-space: nowrap;
18
- border: var(--borderWidth-thin) solid var(--color-border-default);
18
+ border: var(--borderWidth-thin) solid var(--borderColor-default);
19
19
  border-radius: 2em;
20
20
 
21
21
  &:hover {
@@ -44,60 +44,60 @@
44
44
  /* Contrast */
45
45
 
46
46
  .Label--primary {
47
- color: var(--color-fg-default);
48
- border-color: var(--color-neutral-emphasis);
47
+ color: var(--fgColor-default);
48
+ border-color: var(--borderColor-neutral-emphasis);
49
49
  }
50
50
 
51
51
  .Label--secondary {
52
- color: var(--color-fg-muted);
53
- border-color: var(--color-border-default);
52
+ color: var(--fgColor-muted);
53
+ border-color: var(--borderColor-default);
54
54
  }
55
55
 
56
56
  /* Colors */
57
57
 
58
58
  .Label--info, /* TODO: deprecate */
59
59
  .Label--accent {
60
- color: var(--color-accent-fg);
61
- border-color: var(--color-accent-emphasis);
60
+ color: var(--fgColor-accent);
61
+ border-color: var(--borderColor-accent-emphasis);
62
62
  }
63
63
 
64
64
  .Label--success {
65
- color: var(--color-success-fg);
66
- border-color: var(--color-success-emphasis);
65
+ color: var(--fgColor-success);
66
+ border-color: var(--borderColor-success-emphasis);
67
67
  }
68
68
 
69
69
  .Label--warning, /* TODO: deprecate */
70
70
  .Label--attention {
71
- color: var(--color-attention-fg);
72
- border-color: var(--color-attention-emphasis);
71
+ color: var(--fgColor-attention);
72
+ border-color: var(--borderColor-attention-emphasis);
73
73
  }
74
74
 
75
75
  .Label--severe {
76
- color: var(--color-severe-fg);
77
- border-color: var(--color-severe-emphasis);
76
+ color: var(--fgColor-severe);
77
+ border-color: var(--borderColor-severe-emphasis);
78
78
  }
79
79
 
80
80
  .Label--danger {
81
- color: var(--color-danger-fg);
82
- border-color: var(--color-danger-emphasis);
81
+ color: var(--fgColor-danger);
82
+ border-color: var(--borderColor-danger-emphasis);
83
83
  }
84
84
 
85
85
  .Label--open {
86
- color: var(--color-open-fg);
87
- border-color: var(--color-open-emphasis);
86
+ color: var(--fgColor-open);
87
+ border-color: var(--borderColor-open-emphasis);
88
88
  }
89
89
 
90
90
  .Label--closed {
91
- color: var(--color-closed-fg);
92
- border-color: var(--color-closed-emphasis);
91
+ color: var(--fgColor-closed);
92
+ border-color: var(--borderColor-closed-emphasis);
93
93
  }
94
94
 
95
95
  .Label--done {
96
- color: var(--color-done-fg);
97
- border-color: var(--color-done-emphasis);
96
+ color: var(--fgColor-done);
97
+ border-color: var(--borderColor-done-emphasis);
98
98
  }
99
99
 
100
100
  .Label--sponsors {
101
- color: var(--color-sponsors-fg);
102
- border-color: var(--color-sponsors-emphasis);
101
+ color: var(--fgColor-sponsors);
102
+ border-color: var(--borderColor-sponsors-emphasis);
103
103
  }
data/app/components/primer/beta/link.css CHANGED
@@ -1 +1 @@
1
- .Link{color:var(--color-accent-fg)}.Link:hover{cursor:pointer}.Link:focus,.Link:hover{text-decoration:underline}.Link:focus,.Link:focus-visible{outline-offset:0}.Link--primary{color:var(--color-fg-default)!important}.Link--primary:hover{color:var(--color-accent-fg)!important}.Link--secondary{color:var(--color-fg-muted)!important}.Link--secondary:hover{color:var(--color-accent-fg)!important}.Link--muted{color:var(--color-fg-muted)!important}.Link--muted:hover{text-decoration:none}.Link--muted:hover,.Link--onHover:hover{color:var(--color-accent-fg)!important}.Link--onHover:hover{cursor:pointer;text-decoration:underline}.Link--muted:hover [class*=color-fg],.Link--primary:hover [class*=color-fg],.Link--secondary:hover [class*=color-fg]{color:inherit!important}
1
+ .Link{color:var(--fgColor-accent,var(--color-accent-fg))}.Link:hover{cursor:pointer}.Link:focus,.Link:hover{text-decoration:underline}.Link:focus,.Link:focus-visible{outline-offset:0}.Link--primary{color:var(--fgColor-default,var(--color-fg-default))!important}.Link--primary:hover{color:var(--fgColor-accent,var(--color-accent-fg))!important}.Link--secondary{color:var(--fgColor-muted,var(--color-fg-muted))!important}.Link--secondary:hover{color:var(--fgColor-accent,var(--color-accent-fg))!important}.Link--muted{color:var(--fgColor-muted,var(--color-fg-muted))!important}.Link--muted:hover{text-decoration:none}.Link--muted:hover,.Link--onHover:hover{color:var(--fgColor-accent,var(--color-accent-fg))!important}.Link--onHover:hover{cursor:pointer;text-decoration:underline}.Link--muted:hover [class*=color-fg],.Link--primary:hover [class*=color-fg],.Link--secondary:hover [class*=color-fg]{color:inherit!important}