mirror of
https://github.com/primer/css.git
synced 2024-12-23 22:24:11 +03:00
Merge branch 'master' into setup_changesets
This commit is contained in:
Jon Rohan
GitHub
commit
ce12bc5cd2
1
.node-version
Normal file
1
.node-version
Normal file
@ -0,0 +1 @@
|
||||
14.15.2
|
||||
18
CHANGELOG.md
18
CHANGELOG.md
@ -1,3 +1,21 @@
|
||||
## 16.0.0
|
||||
|
||||
### :boom: Breaking Change
|
||||
- Update to Primer Primitives `4.0.0` [primer/primitives#43](https://github.com/primer/primitives/pull/43)
|
||||
- Add color modes [#1131](https://github.com/primer/css/pull/1131)
|
||||
|
||||
### :rocket: Enhancement
|
||||
- Add `flex-shrink: 0` to `.avatar` [#1183](https://github.com/primer/css/pull/1183)
|
||||
- Adding timeline-badge success border [#1246](https://github.com/primer/css/pull/1246)
|
||||
- Add `.anim-rotate` utility class [#1251](https://github.com/primer/css/pull/1251)
|
||||
|
||||
### :nail_care: Polish
|
||||
- Move marketing `@font-face` declarations from vars to type [#1238](https://github.com/primer/css/pull/1238)
|
||||
|
||||
### :memo: Documentation
|
||||
- Update documentation with color modes [#1186](https://github.com/primer/css/pull/1186)
|
||||
|
||||
|
||||
## 15.2.0
|
||||
|
||||
### :rocket: Enhancements
|
||||
|
||||
74
MIGRATING.md
74
MIGRATING.md
@ -1,74 +0,0 @@
|
||||
# 12.0.0
|
||||
The v12 release marks a major transition from small, single-purpose npm packages (`primer-core`, `primer-marketing`, `primer-utilities`, etc.) to a single package — `@primer/css` — which contains all of the SCSS source files in subdirectories. Here's what you need to do to migrate different parts of your app:
|
||||
|
||||
## npm
|
||||
First, install the new package.
|
||||
|
||||
```sh
|
||||
npm install --save @primer/css
|
||||
```
|
||||
|
||||
If you use the `primer` package, all you'll need to do is:
|
||||
|
||||
```sh
|
||||
npm uninstall --save primer
|
||||
```
|
||||
|
||||
If you use other packages, such as `primer-utilities`, you will need to uninstall each one by name or use a command line tool like [jq](https://stedolan.github.io/jq/) to list them:
|
||||
|
||||
```sh
|
||||
jq -r '.dependencies | keys[] | select(.|startswith("primer"))' package.json
|
||||
```
|
||||
|
||||
And, if you're feeling saucy, uninstall them all by piping that to `xargs npm uninstall`. :sparkles:
|
||||
|
||||
## Sass
|
||||
There are a couple of things you'll need to change in your Sass setup when migrating to v12. This section is intentionally vague because environments vary wildly between text editors, Sass implementations, and application frameworks. When in doubt, consult the relevant documentation, and feel free to [file an issue][help] if you think that we can help.
|
||||
|
||||
### Sass imports
|
||||
Generally speaking, all of your Sass `@import` statements can be migrated with the following search-and-replace operations, **in the following order**:
|
||||
|
||||
* If you import `primer/index.scss` or `primer`, just replace `primer` with `@primer/css` and you're done!
|
||||
* Otherwise...
|
||||
1. Replace `primer-marketing-` with `@primer/css/marketing/`, e.g.
|
||||
* `primer-marketing-buttons/index.scss` becomes `@primer/css/marketing/buttons/index.scss`
|
||||
* `primer-marketing-utilities/index.scss` becomes `@primer/css/marketing/utilities/index.scss`
|
||||
1. Replace `primer-` with `@primer/css/`, e.g.
|
||||
* `primer-markdown/index.scss` becomes `@primer/css/markdown/index.scss`
|
||||
* `primer-utilities/index.scss` becomes `@primer/css/utilities/index.scss`
|
||||
1. Delete `lib/` from every Primer CSS path, e.g.
|
||||
* `primer-forms/lib/form-control.scss` becomes `@primer/css/forms/form-control.scss`
|
||||
* `primer-navigation/lib/subnav.scss` becomes `@primer/css/navigation/subnav.scss`
|
||||
|
||||
If your text editor supports search and replace regular expressions, the following patterns should work:
|
||||
|
||||
| find | replace |
|
||||
| :--- | :--- |
|
||||
| `primer-marketing-(\w+)(\/lib)?` | `@primer/css/marketing/$1` |
|
||||
| `primer-(\w+)(\/lib)?` | `@primer/css/$1` |
|
||||
| `primer\b` | `@primer/css`
|
||||
|
||||
#### `primer-migrate`
|
||||
You can also use the included [`primer-migrate` script](bin/primer-migrate):
|
||||
|
||||
```sh
|
||||
npx -p @primer/css primer-migrate path/to/**/*.scss
|
||||
```
|
||||
|
||||
### Sass include paths
|
||||
If you've installed Primer CSS with npm, you very likely already have `node_modules` listed in your Sass `includePaths` option, and you won't need to change anything. :tada:
|
||||
|
||||
If you've installed Primer CSS with something _other than_ npm, or you don't know how it was installed, consult the documentation for your setup first, then [let us know][help] if you still can't figure it out.
|
||||
|
||||
## Compiled CSS files
|
||||
|
||||
The compiled CSS files can be found under `/dist` in case you want to directly link to them.
|
||||
|
||||
## Fonts
|
||||
The marketing-specific font files published in the [`fonts` directory](https://unpkg.com/primer-marketing-support@2.0.0/fonts/) of `primer-marketing-support@2.0.0` are published in the `fonts` directory of `@primer/css`. If you use these fonts, you'll need to do the following:
|
||||
|
||||
1. Update any scripts that copy the `.woff` font files from `node_modules/primer-marketing-support/fonts` into your application to look for them in `node_modules/@primer/css/fonts`.
|
||||
1. Update any webpack (or other bundler) resolution rules that look for fonts in `primer-marketing-support/fonts` to look for them in `@primer/css/fonts`.
|
||||
1. Customize the [`$marketing-font-path` variable](src/marketing/support/variables.scss#L1) to match the path from which they're served.
|
||||
|
||||
[help]: https://github.com/primer/css/issues/new?title=Help!&labels=v12,migration
|
||||
448
deprecations.js
448
deprecations.js
@ -4,6 +4,454 @@
|
||||
* array and a "message" string.
|
||||
*/
|
||||
const versionDeprecations = {
|
||||
'16.0.0': [
|
||||
{
|
||||
selectors: [
|
||||
'.btn-blue',
|
||||
'.btn-blue:focus',
|
||||
'.btn-blue.focus',
|
||||
'.btn-blue:hover',
|
||||
'.btn-blue.hover',
|
||||
'.btn-blue:active',
|
||||
'.btn-blue.selected',
|
||||
'.btn-blue[aria-selected=true]',
|
||||
'[open]>.btn-blue',
|
||||
'.btn-blue:disabled',
|
||||
'.btn-blue.disabled',
|
||||
'.btn-blue[aria-disabled=true]',
|
||||
'.btn-blue .Counter',
|
||||
'.markdown-body li',
|
||||
'.input-dark',
|
||||
'.input-dark:-ms-input-placeholder',
|
||||
'.input-dark::-ms-input-placeholder',
|
||||
'.input-dark::placeholder',
|
||||
'.input-dark.focus',
|
||||
'.input-dark:focus',
|
||||
'::-ms-input-placeholder',
|
||||
'.border-blue',
|
||||
'.border-blue-light',
|
||||
'.border-green',
|
||||
'.border-green-light',
|
||||
'.border-red',
|
||||
'.border-red-light',
|
||||
'.border-purple',
|
||||
'.border-yellow',
|
||||
'.border-gray-light',
|
||||
'.border-gray-dark',
|
||||
'.border-black-fade',
|
||||
'.border-white-fade',
|
||||
'.border-white-fade-15',
|
||||
'.border-white-fade-30',
|
||||
'.border-white-fade-50',
|
||||
'.border-white-fade-70',
|
||||
'.border-white-fade-85',
|
||||
'.box-shadow',
|
||||
'.box-shadow-medium',
|
||||
'.box-shadow-large',
|
||||
'.box-shadow-extra-large',
|
||||
'.bg-white',
|
||||
'.bg-blue',
|
||||
'.bg-blue-light',
|
||||
'.bg-gray-dark',
|
||||
'.bg-gray',
|
||||
'.bg-gray-light',
|
||||
'.bg-green',
|
||||
'.bg-green-light',
|
||||
'.bg-red',
|
||||
'.bg-red-light',
|
||||
'.bg-yellow',
|
||||
'.bg-yellow-light',
|
||||
'.bg-yellow-dark',
|
||||
'.bg-purple',
|
||||
'.bg-pink',
|
||||
'.bg-purple-light',
|
||||
'.bg-orange',
|
||||
'.color-gray-0',
|
||||
'.bg-gray-0',
|
||||
'.color-gray-1',
|
||||
'.bg-gray-1',
|
||||
'.color-gray-2',
|
||||
'.bg-gray-2',
|
||||
'.color-gray-3',
|
||||
'.bg-gray-3',
|
||||
'.color-gray-4',
|
||||
'.bg-gray-4',
|
||||
'.color-gray-5',
|
||||
'.bg-gray-5',
|
||||
'.color-gray-6',
|
||||
'.bg-gray-6',
|
||||
'.color-gray-7',
|
||||
'.bg-gray-7',
|
||||
'.color-gray-8',
|
||||
'.bg-gray-8',
|
||||
'.color-gray-9',
|
||||
'.bg-gray-9',
|
||||
'.color-blue-0',
|
||||
'.bg-blue-0',
|
||||
'.color-blue-1',
|
||||
'.bg-blue-1',
|
||||
'.color-blue-2',
|
||||
'.bg-blue-2',
|
||||
'.color-blue-3',
|
||||
'.bg-blue-3',
|
||||
'.color-blue-4',
|
||||
'.bg-blue-4',
|
||||
'.color-blue-5',
|
||||
'.bg-blue-5',
|
||||
'.color-blue-6',
|
||||
'.bg-blue-6',
|
||||
'.color-blue-7',
|
||||
'.bg-blue-7',
|
||||
'.color-blue-8',
|
||||
'.bg-blue-8',
|
||||
'.color-blue-9',
|
||||
'.bg-blue-9',
|
||||
'.color-green-0',
|
||||
'.bg-green-0',
|
||||
'.color-green-1',
|
||||
'.bg-green-1',
|
||||
'.color-green-2',
|
||||
'.bg-green-2',
|
||||
'.color-green-3',
|
||||
'.bg-green-3',
|
||||
'.color-green-4',
|
||||
'.bg-green-4',
|
||||
'.color-green-5',
|
||||
'.bg-green-5',
|
||||
'.color-green-6',
|
||||
'.bg-green-6',
|
||||
'.color-green-7',
|
||||
'.bg-green-7',
|
||||
'.color-green-8',
|
||||
'.bg-green-8',
|
||||
'.color-green-9',
|
||||
'.bg-green-9',
|
||||
'.color-yellow-0',
|
||||
'.bg-yellow-0',
|
||||
'.color-yellow-1',
|
||||
'.bg-yellow-1',
|
||||
'.color-yellow-2',
|
||||
'.bg-yellow-2',
|
||||
'.color-yellow-3',
|
||||
'.bg-yellow-3',
|
||||
'.color-yellow-4',
|
||||
'.bg-yellow-4',
|
||||
'.color-yellow-5',
|
||||
'.bg-yellow-5',
|
||||
'.color-yellow-6',
|
||||
'.bg-yellow-6',
|
||||
'.color-yellow-7',
|
||||
'.bg-yellow-7',
|
||||
'.color-yellow-8',
|
||||
'.bg-yellow-8',
|
||||
'.color-yellow-9',
|
||||
'.bg-yellow-9',
|
||||
'.color-orange-0',
|
||||
'.bg-orange-0',
|
||||
'.color-orange-1',
|
||||
'.bg-orange-1',
|
||||
'.color-orange-2',
|
||||
'.bg-orange-2',
|
||||
'.color-orange-3',
|
||||
'.bg-orange-3',
|
||||
'.color-orange-4',
|
||||
'.bg-orange-4',
|
||||
'.color-orange-5',
|
||||
'.bg-orange-5',
|
||||
'.color-orange-6',
|
||||
'.bg-orange-6',
|
||||
'.color-orange-7',
|
||||
'.bg-orange-7',
|
||||
'.color-orange-8',
|
||||
'.bg-orange-8',
|
||||
'.color-orange-9',
|
||||
'.bg-orange-9',
|
||||
'.color-red-0',
|
||||
'.bg-red-0',
|
||||
'.color-red-1',
|
||||
'.bg-red-1',
|
||||
'.color-red-2',
|
||||
'.bg-red-2',
|
||||
'.color-red-3',
|
||||
'.bg-red-3',
|
||||
'.color-red-4',
|
||||
'.bg-red-4',
|
||||
'.color-red-5',
|
||||
'.bg-red-5',
|
||||
'.color-red-6',
|
||||
'.bg-red-6',
|
||||
'.color-red-7',
|
||||
'.bg-red-7',
|
||||
'.color-red-8',
|
||||
'.bg-red-8',
|
||||
'.color-red-9',
|
||||
'.bg-red-9',
|
||||
'.color-purple-0',
|
||||
'.bg-purple-0',
|
||||
'.color-purple-1',
|
||||
'.bg-purple-1',
|
||||
'.color-purple-2',
|
||||
'.bg-purple-2',
|
||||
'.color-purple-3',
|
||||
'.bg-purple-3',
|
||||
'.color-purple-4',
|
||||
'.bg-purple-4',
|
||||
'.color-purple-5',
|
||||
'.bg-purple-5',
|
||||
'.color-purple-6',
|
||||
'.bg-purple-6',
|
||||
'.color-purple-7',
|
||||
'.bg-purple-7',
|
||||
'.color-purple-8',
|
||||
'.bg-purple-8',
|
||||
'.color-purple-9',
|
||||
'.bg-purple-9',
|
||||
'.color-pink-0',
|
||||
'.bg-pink-0',
|
||||
'.color-pink-1',
|
||||
'.bg-pink-1',
|
||||
'.color-pink-2',
|
||||
'.bg-pink-2',
|
||||
'.color-pink-3',
|
||||
'.bg-pink-3',
|
||||
'.color-pink-4',
|
||||
'.bg-pink-4',
|
||||
'.color-pink-5',
|
||||
'.bg-pink-5',
|
||||
'.color-pink-6',
|
||||
'.bg-pink-6',
|
||||
'.color-pink-7',
|
||||
'.bg-pink-7',
|
||||
'.color-pink-8',
|
||||
'.bg-pink-8',
|
||||
'.color-pink-9',
|
||||
'.bg-pink-9',
|
||||
'.text-blue',
|
||||
'.text-red',
|
||||
'.text-gray-light',
|
||||
'.text-gray',
|
||||
'.text-gray-dark',
|
||||
'.text-green',
|
||||
'.text-yellow',
|
||||
'.text-orange',
|
||||
'.text-orange-light',
|
||||
'.text-purple',
|
||||
'.text-pink',
|
||||
'.text-white',
|
||||
'.link-gray',
|
||||
'.link-gray:hover',
|
||||
'.link-gray-dark',
|
||||
'.link-gray-dark:hover',
|
||||
'.link-hover-blue:hover',
|
||||
'.muted-link',
|
||||
'.muted-link:hover',
|
||||
'.text-shadow-dark',
|
||||
'.text-shadow-light',
|
||||
'.dropdown-menu-dark',
|
||||
'.dropdown-menu-dark::before',
|
||||
'.dropdown-menu-dark::after',
|
||||
'.dropdown-menu-dark .dropdown-header',
|
||||
'.dropdown-menu-dark .dropdown-divider',
|
||||
'.dropdown-menu-dark .dropdown-item',
|
||||
'.dropdown-menu-dark.dropdown-menu-w::before',
|
||||
'.dropdown-menu-dark.dropdown-menu-w::after',
|
||||
'.dropdown-menu-dark.dropdown-menu-e::before',
|
||||
'.dropdown-menu-dark.dropdown-menu-e::after',
|
||||
'.dropdown-menu-dark.dropdown-menu-ne::before',
|
||||
'.dropdown-menu-dark.dropdown-menu-ne::after',
|
||||
'.Label--outline',
|
||||
'.Label--gray',
|
||||
'.Label--gray-darker',
|
||||
'.Label--yellow',
|
||||
'.Label--orange',
|
||||
'.Label--red',
|
||||
'.Label--outline-green',
|
||||
'.Label--green',
|
||||
'.Label--blue',
|
||||
'.Label--purple',
|
||||
'.Label--pink',
|
||||
'.State--green',
|
||||
'.State--red',
|
||||
'.State--purple',
|
||||
'.Counter--gray-light',
|
||||
'.Counter--gray',
|
||||
'.btn-transparent:active'
|
||||
],
|
||||
message: `This selector is not available in Primer CSS 16.0.0. Please refer to the documentation.`
|
||||
},
|
||||
{
|
||||
variables: [
|
||||
'$bg-black',
|
||||
'$bg-black-fade',
|
||||
'$bg-blue',
|
||||
'$bg-blue-light',
|
||||
'$bg-diffstat-added',
|
||||
'$bg-diffstat-deleted',
|
||||
'$bg-diffstat-neutral',
|
||||
'$bg-gray',
|
||||
'$bg-gray-dark',
|
||||
'$bg-gray-light',
|
||||
'$bg-green',
|
||||
'$bg-green-light',
|
||||
'$bg-orange',
|
||||
'$bg-pink',
|
||||
'$bg-purple',
|
||||
'$bg-purple-light',
|
||||
'$bg-red',
|
||||
'$bg-red-light',
|
||||
'$bg-white',
|
||||
'$bg-yellow',
|
||||
'$bg-yellow-dark',
|
||||
'$bg-yellow-light',
|
||||
'$black',
|
||||
'$black-fade-15',
|
||||
'$black-fade-30',
|
||||
'$black-fade-50',
|
||||
'$black-fade-70',
|
||||
'$black-fade-85',
|
||||
'$blue',
|
||||
'$blue-000',
|
||||
'$blue-100',
|
||||
'$blue-200',
|
||||
'$blue-300',
|
||||
'$blue-400',
|
||||
'$blue-500',
|
||||
'$blue-600',
|
||||
'$blue-700',
|
||||
'$blue-800',
|
||||
'$blue-900',
|
||||
'$border-black-fade',
|
||||
'$border-blue',
|
||||
'$border-blue-light',
|
||||
'$border-color',
|
||||
'$border-color-button',
|
||||
'$border-gray',
|
||||
'$border-gray-dark',
|
||||
'$border-gray-darker',
|
||||
'$border-gray-light',
|
||||
'$border-green',
|
||||
'$border-green-light',
|
||||
'$border-purple',
|
||||
'$border-red',
|
||||
'$border-red-light',
|
||||
'$border-white',
|
||||
'$border-white-fade',
|
||||
'$border-yellow',
|
||||
'$box-shadow',
|
||||
'$box-shadow-extra-large',
|
||||
'$box-shadow-focus',
|
||||
'$box-shadow-highlight',
|
||||
'$box-shadow-inset',
|
||||
'$box-shadow-large',
|
||||
'$box-shadow-medium',
|
||||
'$btn-active-shadow',
|
||||
'$btn-input-focus-shadow',
|
||||
'$form-control-shadow',
|
||||
'$gray',
|
||||
'$gray-000',
|
||||
'$gray-100',
|
||||
'$gray-200',
|
||||
'$gray-300',
|
||||
'$gray-400',
|
||||
'$gray-500',
|
||||
'$gray-600',
|
||||
'$gray-700',
|
||||
'$gray-800',
|
||||
'$gray-900',
|
||||
'$gray-dark',
|
||||
'$gray-light',
|
||||
'$green',
|
||||
'$green-000',
|
||||
'$green-100',
|
||||
'$green-200',
|
||||
'$green-300',
|
||||
'$green-400',
|
||||
'$green-500',
|
||||
'$green-600',
|
||||
'$green-700',
|
||||
'$green-800',
|
||||
'$green-900',
|
||||
'$orange',
|
||||
'$orange-000',
|
||||
'$orange-100',
|
||||
'$orange-200',
|
||||
'$orange-300',
|
||||
'$orange-400',
|
||||
'$orange-500',
|
||||
'$orange-600',
|
||||
'$orange-700',
|
||||
'$orange-800',
|
||||
'$orange-900',
|
||||
'$pink-000',
|
||||
'$pink-100',
|
||||
'$pink-200',
|
||||
'$pink-300',
|
||||
'$pink-400',
|
||||
'$pink-500',
|
||||
'$pink-600',
|
||||
'$pink-700',
|
||||
'$pink-800',
|
||||
'$pink-900',
|
||||
'$purple',
|
||||
'$purple-000',
|
||||
'$purple-100',
|
||||
'$purple-200',
|
||||
'$purple-300',
|
||||
'$purple-400',
|
||||
'$purple-500',
|
||||
'$purple-600',
|
||||
'$purple-700',
|
||||
'$purple-800',
|
||||
'$purple-900',
|
||||
'$red',
|
||||
'$red-000',
|
||||
'$red-100',
|
||||
'$red-200',
|
||||
'$red-300',
|
||||
'$red-400',
|
||||
'$red-500',
|
||||
'$red-600',
|
||||
'$red-700',
|
||||
'$red-800',
|
||||
'$red-900',
|
||||
'$text-black',
|
||||
'$text-blue',
|
||||
'$text-gray',
|
||||
'$text-gray-dark',
|
||||
'$text-gray-light',
|
||||
'$text-green',
|
||||
'$text-orange',
|
||||
'$text-orange-light',
|
||||
'$text-pink',
|
||||
'$text-purple',
|
||||
'$text-red',
|
||||
'$text-white',
|
||||
'$text-yellow',
|
||||
'$tooltip-background-color',
|
||||
'$tooltip-text-color',
|
||||
'$white',
|
||||
'$white-fade-15',
|
||||
'$white-fade-30',
|
||||
'$white-fade-50',
|
||||
'$white-fade-70',
|
||||
'$white-fade-85',
|
||||
'$yellow',
|
||||
'$yellow-000',
|
||||
'$yellow-100',
|
||||
'$yellow-200',
|
||||
'$yellow-300',
|
||||
'$yellow-400',
|
||||
'$yellow-500',
|
||||
'$yellow-600',
|
||||
'$yellow-700',
|
||||
'$yellow-800',
|
||||
'$yellow-900',
|
||||
'$blue-mktg',
|
||||
'$green-mktg'
|
||||
],
|
||||
message: `This variable is not available in Primer CSS 16.0.0. Please refer to the documentation.`
|
||||
}
|
||||
],
|
||||
'15.0.0': [
|
||||
{
|
||||
selectors: [
|
||||
|
||||
@ -5,63 +5,100 @@ status: Stable
|
||||
source: 'https://github.com/primer/css/tree/master/src/buttons'
|
||||
bundle: buttons
|
||||
---
|
||||
<Note>
|
||||
Please note Primer v16 has changed the naming of these color classes. Check the <a href="/css/support/v16-migration">migration guide</a> to make sure your app is up to date.
|
||||
</Note>
|
||||
|
||||
Buttons are used for **actions**, like in forms, while textual hyperlinks are used for **destinations**, or moving from one page to another.
|
||||
|
||||
## Default button
|
||||
```html live
|
||||
<button class="btn" type="button">Button</button>
|
||||
```
|
||||
|
||||
Use the standard—yet classy—`.btn` for form actions and primary page actions. These are used extensively around the site.
|
||||
|
||||
When using a `<button>` element, **always specify a `type`**. When using a `<a>` element, **always add `role="button"` for accessibility**.
|
||||
Note: When using a `<button>` element, **always specify a `type`**. When using a `<a>` element, **always add `role="button"` for accessibility**.
|
||||
|
||||
```html live
|
||||
<button class="btn mr-2" type="button">Button button</button>
|
||||
<a class="btn" href="#url" role="button">Link button</a>
|
||||
```
|
||||
|
||||
You can find them in two sizes: the default `.btn` and the smaller `.btn-sm`.
|
||||
## Button types
|
||||
|
||||
### Default
|
||||
|
||||
Use the standard — yet classy — `.btn` for form actions and general page actions. These are used extensively around the site.
|
||||
|
||||
```html live
|
||||
<button class="btn mr-2" type="button">Button</button>
|
||||
<button class="btn btn-sm" type="button">Small button</button>
|
||||
<button class="btn" type="button">Default</button>
|
||||
```
|
||||
|
||||
## Primary button
|
||||
### Primary
|
||||
|
||||
Primary buttons are green and are used to indicate the _primary_ action on a page. When you need your buttons to stand out, use `.btn.btn-primary`. You can use it with both button sizes—just add `.btn-primary`.
|
||||
|
||||
```html live
|
||||
<button class="btn btn-primary mr-2" type="button">Primary button</button>
|
||||
<button class="btn btn-sm btn-primary" type="button">Small primary button</button>
|
||||
<button class="btn btn-primary" type="button">Primary</button>
|
||||
```
|
||||
|
||||
## Danger button
|
||||
|
||||
Danger buttons are red. They help reiterate that the intended action is important or potentially dangerous (e.g., deleting a repo or transferring ownership). Similar to the primary buttons, just add `.btn-danger`.
|
||||
|
||||
```html live
|
||||
<button class="btn btn-danger mr-2" type="button">Danger button</button>
|
||||
<button class="btn btn-sm btn-danger" type="button">Small danger button</button>
|
||||
```
|
||||
|
||||
## Outline button
|
||||
### Outline
|
||||
|
||||
Outline buttons downplay an action as they appear like boxy links. Just add `.btn-outline` and go.
|
||||
|
||||
```html live
|
||||
<button class="btn btn-outline mr-2" type="button">Outline button</button>
|
||||
<button class="btn btn-sm btn-outline" type="button">Outline button</button>
|
||||
<button class="btn btn-outline" type="button">Outline</button>
|
||||
```
|
||||
|
||||
## Large button
|
||||
### Danger
|
||||
|
||||
Use `.btn-large` to increase the padding and border radius of a button. This is useful for prominent calls to action in hero sections.
|
||||
Danger buttons are red. They help reiterate that the intended action is important or potentially dangerous (e.g., deleting a repo or transferring ownership). Similar to the primary buttons, just add `.btn-danger`.
|
||||
|
||||
```html live
|
||||
<button class="btn btn-danger" type="button">Danger</button>
|
||||
```
|
||||
|
||||
## Button states
|
||||
|
||||
### Selected
|
||||
|
||||
Adding an `aria-selected="true"` attribute will keep the button in a selected state. Typically used for [`BtnGroups`](#button-groups).
|
||||
|
||||
```html live
|
||||
<div class="BtnGroup d-block mb-2">
|
||||
<button class="BtnGroup-item btn" type="button">Button</button>
|
||||
<button class="BtnGroup-item btn" type="button" aria-selected="true">Button</button>
|
||||
<button class="BtnGroup-item btn btn-danger" type="button">Danger</button>
|
||||
</div>
|
||||
|
||||
<div class="BtnGroup d-block mb-2 ml-0">
|
||||
<button class="BtnGroup-item btn btn-outline" type="button">Button</button>
|
||||
<button class="BtnGroup-item btn btn-outline" type="button" aria-selected="true">Button</button>
|
||||
<button class="BtnGroup-item btn btn-outline" type="button">Button</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Disabled
|
||||
|
||||
Disable `<button>` and `<a>` elements with the `aria-disabled="true"` attribute.
|
||||
|
||||
```html live
|
||||
<button class="btn mr-2" type="button" aria-disabled="true">Disabled</button>
|
||||
<button class="btn btn-primary mr-2" type="button" aria-disabled="true">Disabled</button>
|
||||
<button class="btn btn-outline mr-2" type="button" aria-disabled="true">Disabled</button>
|
||||
<button class="btn btn-danger" type="button" aria-disabled="true">Disabled</button>
|
||||
```
|
||||
|
||||
## Button variations
|
||||
|
||||
### Sizes
|
||||
|
||||
Next to the default size there is also a `.btn-sm` (small) and `.btn-large` option. Use them to decrese or increase the button size. This is useful for fitting a button next to an input or turning a button into a prominent call to action in hero sections.
|
||||
|
||||
[Type scale utilities](/support/typography#type-scale) can be used to alter the font-size if needed. Padding is applied in em's so that it scales proportionally with the font-size.
|
||||
|
||||
```html live
|
||||
<button class="btn btn-large mr-2" type="button">Large button</button>
|
||||
<a class="btn btn-large" href="#url" role="button">Large link button</a>
|
||||
<button class="btn btn-sm mr-2" type="button">Small</button>
|
||||
<button class="btn mr-2" type="button">Default</button>
|
||||
<button class="btn btn-large" type="button">Large</button>
|
||||
```
|
||||
|
||||
Use `.btn-large` with a type scale utility to transform the text to a bigger size.
|
||||
@ -73,33 +110,7 @@ Use `.btn-large` with a type scale utility to transform the text to a bigger siz
|
||||
</div>
|
||||
```
|
||||
|
||||
## Disabled state
|
||||
|
||||
Disable `<button>` and `<a>` elements with the `aria-disabled="true"` attribute.
|
||||
|
||||
```html live
|
||||
<button class="btn mr-2" type="button" aria-disabled="true">Disabled button</button>
|
||||
<a class="btn" href="#url" role="button" aria-disabled="true">Disabled button</a>
|
||||
```
|
||||
|
||||
Similar styles are applied to primary, danger, and outline buttons:
|
||||
|
||||
```html live
|
||||
<button class="btn btn-primary mr-2" type="button" aria-disabled="true">Disabled button</button>
|
||||
<a class="btn btn-primary" href="#url" role="button" aria-disabled="true">Disabled button</a>
|
||||
```
|
||||
|
||||
```html live
|
||||
<button class="btn btn-danger mr-2" type="button" aria-disabled="true">Disabled button</button>
|
||||
<a class="btn btn-danger" href="#url" role="button" aria-disabled="true">Disabled button</a>
|
||||
```
|
||||
|
||||
```html live
|
||||
<button class="btn btn-outline mr-2" type="button" aria-disabled="true">Disabled button</button>
|
||||
<a class="btn btn-outline" href="#url" role="button" aria-disabled="true">Disabled button</a>
|
||||
```
|
||||
|
||||
## Block button
|
||||
### Block button
|
||||
|
||||
Make any button full-width by adding `.btn-block`. It adds `width: 100%;`, changes the `display` from `inline-block` to `block`, and centers the button text.
|
||||
|
||||
@ -108,7 +119,7 @@ Make any button full-width by adding `.btn-block`. It adds `width: 100%;`, chang
|
||||
<button class="btn btn-sm btn-block" type="button">Small block button</button>
|
||||
```
|
||||
|
||||
## Link button
|
||||
### Link button
|
||||
|
||||
Create a button that looks like a link with `.btn-link`. Rather than using an `<a>` to trigger JS, this style on a `<button>` should be used for better accessibility.
|
||||
|
||||
@ -118,7 +129,7 @@ Create a button that looks like a link with `.btn-link`. Rather than using an `<
|
||||
<button class="btn-link" type="button">Link button</button>
|
||||
```
|
||||
|
||||
## Invisible button
|
||||
### Invisible button
|
||||
|
||||
When you want a link, but you want it padded and line heighted like a button best for "cancel" actions on forms.
|
||||
|
||||
@ -127,44 +138,17 @@ When you want a link, but you want it padded and line heighted like a button bes
|
||||
<button class="btn" type="button">Submit</button>
|
||||
```
|
||||
|
||||
## Octicon button
|
||||
### Hidden text button
|
||||
|
||||
Icon-only buttons that turn blue on hover. Use `.btn-octicon-danger` to turn an icon red on hover.
|
||||
Use `.hidden-text-expander` to indicate and toggle hidden text.
|
||||
|
||||
```html live
|
||||
<button class="btn-octicon" type="button" aria-label="Desktop icon">
|
||||
<!-- <%= octicon "device-desktop" %> -->
|
||||
<svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.75 2.5h12.5a.25.25 0 01.25.25v7.5a.25.25 0 01-.25.25H1.75a.25.25 0 01-.25-.25v-7.5a.25.25 0 01.25-.25zM14.25 1H1.75A1.75 1.75 0 000 2.75v7.5C0 11.216.784 12 1.75 12h3.727c-.1 1.041-.52 1.872-1.292 2.757A.75.75 0 004.75 16h6.5a.75.75 0 00.565-1.243c-.772-.885-1.193-1.716-1.292-2.757h3.727A1.75 1.75 0 0016 10.25v-7.5A1.75 1.75 0 0014.25 1zM9.018 12H6.982a5.72 5.72 0 01-.765 2.5h3.566a5.72 5.72 0 01-.765-2.5z"></path></svg>
|
||||
</button>
|
||||
|
||||
<button class="btn-octicon" type="button" aria-label="Pencil icon">
|
||||
<!-- <%= octicon "pencil" %> -->
|
||||
<svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M11.013 1.427a1.75 1.75 0 012.474 0l1.086 1.086a1.75 1.75 0 010 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 01-.927-.928l.929-3.25a1.75 1.75 0 01.445-.758l8.61-8.61zm1.414 1.06a.25.25 0 00-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 000-.354l-1.086-1.086zM11.189 6.25L9.75 4.81l-6.286 6.287a.25.25 0 00-.064.108l-.558 1.953 1.953-.558a.249.249 0 00.108-.064l6.286-6.286z"></path></svg>
|
||||
</button>
|
||||
|
||||
<button class="btn-octicon btn-octicon-danger" type="button" aria-label="Trashcan icon">
|
||||
<!-- <%= octicon "trashcan" %> -->
|
||||
<svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M6.5 1.75a.25.25 0 01.25-.25h2.5a.25.25 0 01.25.25V3h-3V1.75zm4.5 0V3h2.25a.75.75 0 010 1.5H2.75a.75.75 0 010-1.5H5V1.75C5 .784 5.784 0 6.75 0h2.5C10.216 0 11 .784 11 1.75zM4.496 6.675a.75.75 0 10-1.492.15l.66 6.6A1.75 1.75 0 005.405 15h5.19c.9 0 1.652-.681 1.741-1.576l.66-6.6a.75.75 0 00-1.492-.149l-.66 6.6a.25.25 0 01-.249.225h-5.19a.25.25 0 01-.249-.225l-.66-6.6z"></path></svg>
|
||||
</button>
|
||||
|
||||
<button class="btn-octicon" type="button" aria-label="Kebab icon">
|
||||
<!-- <%= octicon "kebab-horizontal" %> -->
|
||||
<svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM1.5 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm13 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path></svg>
|
||||
</button>
|
||||
<span class="hidden-text-expander">
|
||||
<button type="button" class="ellipsis-expander" aria-expanded="false">…</button>
|
||||
</span>
|
||||
```
|
||||
|
||||
|
||||
|
||||
## Close button
|
||||
|
||||
When using the `octicon-x` icon for a close button, add `.close-button` to remove the default button styles.
|
||||
|
||||
```html live
|
||||
<button class="close-button" type="button">
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"></path></svg>
|
||||
</button>
|
||||
```
|
||||
You can also make the expander appear inline by adding `.inline`.
|
||||
|
||||
## Button with icons
|
||||
|
||||
@ -201,6 +185,43 @@ Icons can be added to any button.
|
||||
</button>
|
||||
```
|
||||
|
||||
### Icon-only button
|
||||
|
||||
Icon-only buttons `.btn-octicon` turn blue on hover. Use `.btn-octicon-danger` to turn an icon red on hover.
|
||||
|
||||
```html live
|
||||
<button class="btn-octicon" type="button" aria-label="Desktop icon">
|
||||
<!-- <%= octicon "device-desktop" %> -->
|
||||
<svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.75 2.5h12.5a.25.25 0 01.25.25v7.5a.25.25 0 01-.25.25H1.75a.25.25 0 01-.25-.25v-7.5a.25.25 0 01.25-.25zM14.25 1H1.75A1.75 1.75 0 000 2.75v7.5C0 11.216.784 12 1.75 12h3.727c-.1 1.041-.52 1.872-1.292 2.757A.75.75 0 004.75 16h6.5a.75.75 0 00.565-1.243c-.772-.885-1.193-1.716-1.292-2.757h3.727A1.75 1.75 0 0016 10.25v-7.5A1.75 1.75 0 0014.25 1zM9.018 12H6.982a5.72 5.72 0 01-.765 2.5h3.566a5.72 5.72 0 01-.765-2.5z"></path></svg>
|
||||
</button>
|
||||
|
||||
<button class="btn-octicon" type="button" aria-label="Pencil icon">
|
||||
<!-- <%= octicon "pencil" %> -->
|
||||
<svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M11.013 1.427a1.75 1.75 0 012.474 0l1.086 1.086a1.75 1.75 0 010 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 01-.927-.928l.929-3.25a1.75 1.75 0 01.445-.758l8.61-8.61zm1.414 1.06a.25.25 0 00-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 000-.354l-1.086-1.086zM11.189 6.25L9.75 4.81l-6.286 6.287a.25.25 0 00-.064.108l-.558 1.953 1.953-.558a.249.249 0 00.108-.064l6.286-6.286z"></path></svg>
|
||||
</button>
|
||||
|
||||
<button class="btn-octicon btn-octicon-danger" type="button" aria-label="Trashcan icon">
|
||||
<!-- <%= octicon "trashcan" %> -->
|
||||
<svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M6.5 1.75a.25.25 0 01.25-.25h2.5a.25.25 0 01.25.25V3h-3V1.75zm4.5 0V3h2.25a.75.75 0 010 1.5H2.75a.75.75 0 010-1.5H5V1.75C5 .784 5.784 0 6.75 0h2.5C10.216 0 11 .784 11 1.75zM4.496 6.675a.75.75 0 10-1.492.15l.66 6.6A1.75 1.75 0 005.405 15h5.19c.9 0 1.652-.681 1.741-1.576l.66-6.6a.75.75 0 00-1.492-.149l-.66 6.6a.25.25 0 01-.249.225h-5.19a.25.25 0 01-.249-.225l-.66-6.6z"></path></svg>
|
||||
</button>
|
||||
|
||||
<button class="btn-octicon" type="button" aria-label="Kebab icon">
|
||||
<!-- <%= octicon "kebab-horizontal" %> -->
|
||||
<svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM1.5 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm13 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path></svg>
|
||||
</button>
|
||||
```
|
||||
|
||||
### Close button
|
||||
|
||||
When using the `octicon-x` icon for a close button, add `.close-button` to remove the default button styles.
|
||||
|
||||
```html live
|
||||
<button class="close-button" type="button">
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"></path></svg>
|
||||
</button>
|
||||
```
|
||||
|
||||
## Button with counts
|
||||
|
||||
You can easily append a count to a **small button**. Add the `.with-count` class to the `.btn-sm` and then add the `.social-count` after the button.
|
||||
@ -243,22 +264,26 @@ You can also use the [counter](./labels#counters) component within buttons:
|
||||
Have a hankering for a series of buttons that are attached to one another? Wrap them in a `.BtnGroup` and the buttons will be rounded and spaced automatically.
|
||||
|
||||
```html live
|
||||
<div class="BtnGroup mr-2">
|
||||
<button class="btn BtnGroup-item" type="button">Button</button>
|
||||
<button class="btn BtnGroup-item" type="button">Button</button>
|
||||
<button class="btn BtnGroup-item" type="button">Button</button>
|
||||
<div class="BtnGroup d-block mb-2">
|
||||
<button class="BtnGroup-item btn" type="button">Button</button>
|
||||
<button class="BtnGroup-item btn" type="button">Button</button>
|
||||
<button class="BtnGroup-item btn btn-danger" type="button">Danger</button>
|
||||
</div>
|
||||
|
||||
<div class="BtnGroup mr-2">
|
||||
<button class="btn BtnGroup-item btn-outline" type="button">Button</button>
|
||||
<button class="btn BtnGroup-item btn-outline" type="button">Button</button>
|
||||
<button class="btn BtnGroup-item btn-outline" type="button">Button</button>
|
||||
<div class="BtnGroup d-block mb-2 ml-0">
|
||||
<button class="BtnGroup-item btn btn-outline" type="button">Button</button>
|
||||
<button class="BtnGroup-item btn btn-outline" type="button">Button</button>
|
||||
<button class="BtnGroup-item btn btn-outline" type="button">Button</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
Use `BtnGroup-item btn btn-sm` for a smaller BtnGroup items.
|
||||
|
||||
```html live
|
||||
<div class="BtnGroup">
|
||||
<button class="btn BtnGroup-item btn-sm" type="button">Button</button>
|
||||
<button class="btn BtnGroup-item btn-sm" type="button">Button</button>
|
||||
<button class="btn BtnGroup-item btn-sm" type="button">Button</button>
|
||||
<button class="BtnGroup-item btn btn-sm" type="button">Button</button>
|
||||
<button class="BtnGroup-item btn btn-sm" type="button">Button</button>
|
||||
<button class="BtnGroup-item btn btn-sm" type="button">Button</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -274,15 +299,3 @@ Add `.BtnGroup-parent` to parent elements, like `<form>`s or `<details>`s, withi
|
||||
<button class="btn BtnGroup-item" type="button">Button</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Hidden text button
|
||||
|
||||
Use `.hidden-text-expander` to indicate and toggle hidden text.
|
||||
|
||||
```html live
|
||||
<span class="hidden-text-expander">
|
||||
<button type="button" class="ellipsis-expander" aria-expanded="false">…</button>
|
||||
</span>
|
||||
```
|
||||
|
||||
You can also make the expander appear inline by adding `.inline`.
|
||||
|
||||
@ -3,6 +3,10 @@ title: Dropdown
|
||||
status: New
|
||||
---
|
||||
|
||||
<Note>
|
||||
Please note Primer v16 has changed the naming of these color classes. Check the <a href="/css/support/v16-migration">migration guide</a> to make sure your app is up to date.
|
||||
</Note>
|
||||
|
||||
Dropdowns are lightweight context menus for housing navigation and actions. They're great for instances where you don't need the full power (and code) of the select menu.
|
||||
|
||||
## Basic examples
|
||||
@ -200,29 +204,3 @@ Align the direction of dropdown menus and their arrows with modifier classes.
|
||||
</details>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Dark
|
||||
|
||||
```html live
|
||||
<div class="bg-gray-dark p-3 mt-n3 ml-n3 mr-n3 mb-n3" style="min-height: 240px;">
|
||||
<details class="dropdown details-reset details-overlay d-inline-block">
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
Dropdown
|
||||
<div class="dropdown-caret"></div>
|
||||
</summary>
|
||||
|
||||
<div class="dropdown-menu dropdown-menu-se dropdown-menu-dark">
|
||||
<div class="dropdown-header">
|
||||
Dropdown header
|
||||
</div>
|
||||
<ul>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li class="dropdown-divider" role="none"></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -7,6 +7,10 @@ source: 'https://github.com/primer/css/tree/master/src/labels'
|
||||
bundle: labels
|
||||
---
|
||||
|
||||
<Note>
|
||||
Please note Primer v16 has changed the naming of these color classes. Check the <a href="/css/support/v16-migration">migration guide</a> to make sure your app is up to date.
|
||||
</Note>
|
||||
|
||||
Labels add metadata or indicate status of items and navigational elements. Three different types of labels are available: [Labels](#default-label-styles) for adding metadata, [States](#states) for indicating status, and [Counters](#counters) for showing the count for a number of items.
|
||||
|
||||
## Labels
|
||||
@ -23,38 +27,32 @@ The base `Label` style does not apply a background color and only uses the defau
|
||||
|
||||
### Label contrast
|
||||
|
||||
Use `Label--gray` to create a label with a lighter text color. This label is neutral in color and can be used in contexts where all you need to communicate is metadata, or where you want a label to feel less prominent compared with labels with stronger colors.
|
||||
Use `Label--primary` to create a label with a stronger border. This label is also neutral in color, however, since its border is stronger it can stand out more compared to the default `Label`.
|
||||
|
||||
Use `Label--gray-darker` to create a label with a dark-gray color and border. This label is also neutral in color, however, since its color is darker it can stand out more compared to `Label--gray`.
|
||||
Use `Label--secondary` to create a label with a subtler text color. This label is neutral in color and can be used in contexts where all you need to communicate is metadata, or where you want a label to feel less prominent compared with labels with stronger colors.
|
||||
|
||||
```html live
|
||||
<span class="Label">Default</span>
|
||||
<span class="Label Label--gray ml-1">Gray</span>
|
||||
<span class="Label Label--gray-darker ml-1">Dark gray</span>
|
||||
<span class="Label Label--primary ml-1">Primary</span>
|
||||
<span class="Label Label--secondary ml-1">Secondary</span>
|
||||
```
|
||||
|
||||
### Colored labels
|
||||
|
||||
Labels come in a few different themes. Use a theme that helps communicate the content of the label, and ensure it's used consistently. A typical use of the themes are:
|
||||
Labels come in a few different functional classes. Use to communicate the content of the label, and ensure it's used consistently.
|
||||
|
||||
- `Label--yellow` -> Pending/highlight
|
||||
- `Label--orange` -> Warning
|
||||
- `Label--red` -> Error
|
||||
- `Label--green` -> Success
|
||||
- `Label--blue` -> Info
|
||||
- `Label--info`
|
||||
- `Label--success`
|
||||
- `Label--warning`
|
||||
- `Label--danger`
|
||||
|
||||
```html live
|
||||
<span class="Label mr-1 Label--yellow">Pending</span>
|
||||
<span class="Label mr-1 Label--orange">Warning</span>
|
||||
<span class="Label mr-1 Label--red">Error</span>
|
||||
<span class="Label mr-1 Label--green">Success</span>
|
||||
<span class="Label mr-1 Label--blue">Info</span>
|
||||
<span class="Label mr-1 Label--purple">PRO</span>
|
||||
<span class="Label mr-1 Label--pink">Sponsor</span>
|
||||
<span class="Label mr-1 Label--info">Info</span>
|
||||
<span class="Label mr-1 Label--success">Success</span>
|
||||
<span class="Label mr-1 Label--warning">Warning</span>
|
||||
<span class="Label mr-1 Label--danger">Danger</span>
|
||||
```
|
||||
|
||||
Note: Avoid using `Label--orange` next to `Label--red` since most people will find it hard to tell the difference.
|
||||
|
||||
### Label sizes
|
||||
|
||||
If space allows, add the `Label--large` modidfier to add a bit more padding to lables.
|
||||
@ -97,32 +95,34 @@ If an issue label needs to be bigger, add the `.IssueLabel--big` modifier.
|
||||
|
||||
## States
|
||||
|
||||
Use state labels to inform users of an items status. States are large labels with bolded text. The default state has a gray background.
|
||||
Use state labels to inform users of an items status. States are large labels with bolded text. The default state has a gray background. States come in a few variations that apply different colors. Use the state that best communicates the status or function.
|
||||
|
||||
```html live title="State"
|
||||
<span class="State">Default</span>
|
||||
```
|
||||
|
||||
### State themes
|
||||
|
||||
States come in a few variations that apply different colors. Use the state that best communicates the status or function.
|
||||
- `State`
|
||||
- `State State--draft`
|
||||
- `State State--open`
|
||||
- `State State--merged`
|
||||
- `State State--closed`
|
||||
|
||||
```html live
|
||||
<span class="State State--green mr-2">
|
||||
<span class="State State--draft mr-2">Draft</span>
|
||||
|
||||
<span class="State State--open mr-2">
|
||||
<!-- <%= octicon "git-pull-request" %> -->
|
||||
<svg class="octicon octicon-git-pull-request" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0"> <path fill-rule="evenodd" clip-rule="evenodd" d="M7.17674 3.07322L9.57318 0.676753C9.73068 0.51926 9.99996 0.630802 9.99996 0.853529V5.64642C9.99996 5.86915 9.73068 5.98069 9.57319 5.8232L7.17674 3.42677C7.07911 3.32914 7.07911 3.17085 7.17674 3.07322ZM3.75 2.5C3.33579 2.5 3 2.83579 3 3.25C3 3.66421 3.33579 4 3.75 4C4.16421 4 4.5 3.66421 4.5 3.25C4.5 2.83579 4.16421 2.5 3.75 2.5ZM1.5 3.25C1.5 2.00736 2.50736 1 3.75 1C4.99264 1 6 2.00736 6 3.25C6 4.22966 5.37389 5.06309 4.5 5.37197V10.628C5.37389 10.9369 6 11.7703 6 12.75C6 13.9926 4.99264 15 3.75 15C2.50736 15 1.5 13.9926 1.5 12.75C1.5 11.7703 2.12611 10.9369 3 10.628V5.37197C2.12611 5.06309 1.5 4.22966 1.5 3.25ZM11 2.5H10V4H11C11.5523 4 12 4.44772 12 5V10.628C11.1261 10.9369 10.5 11.7703 10.5 12.75C10.5 13.9926 11.5074 15 12.75 15C13.9926 15 15 13.9926 15 12.75C15 11.7703 14.3739 10.9369 13.5 10.628V5C13.5 3.61929 12.3807 2.5 11 2.5ZM12 12.75C12 12.3358 12.3358 12 12.75 12C13.1642 12 13.5 12.3358 13.5 12.75C13.5 13.1642 13.1642 13.5 12.75 13.5C12.3358 13.5 12 13.1642 12 12.75ZM3.75 12C3.33579 12 3 12.3358 3 12.75C3 13.1642 3.33579 13.5 3.75 13.5C4.16421 13.5 4.5 13.1642 4.5 12.75C4.5 12.3358 4.16421 12 3.75 12Z"></path></svg>
|
||||
Open
|
||||
</span>
|
||||
<span class="State State--red mr-2">
|
||||
<!-- <%= octicon "git-pull-request" %> -->
|
||||
<svg class="octicon octicon-git-pull-request" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0"> <path fill-rule="evenodd" clip-rule="evenodd" d="M7.17674 3.07322L9.57318 0.676753C9.73068 0.51926 9.99996 0.630802 9.99996 0.853529V5.64642C9.99996 5.86915 9.73068 5.98069 9.57319 5.8232L7.17674 3.42677C7.07911 3.32914 7.07911 3.17085 7.17674 3.07322ZM3.75 2.5C3.33579 2.5 3 2.83579 3 3.25C3 3.66421 3.33579 4 3.75 4C4.16421 4 4.5 3.66421 4.5 3.25C4.5 2.83579 4.16421 2.5 3.75 2.5ZM1.5 3.25C1.5 2.00736 2.50736 1 3.75 1C4.99264 1 6 2.00736 6 3.25C6 4.22966 5.37389 5.06309 4.5 5.37197V10.628C5.37389 10.9369 6 11.7703 6 12.75C6 13.9926 4.99264 15 3.75 15C2.50736 15 1.5 13.9926 1.5 12.75C1.5 11.7703 2.12611 10.9369 3 10.628V5.37197C2.12611 5.06309 1.5 4.22966 1.5 3.25ZM11 2.5H10V4H11C11.5523 4 12 4.44772 12 5V10.628C11.1261 10.9369 10.5 11.7703 10.5 12.75C10.5 13.9926 11.5074 15 12.75 15C13.9926 15 15 13.9926 15 12.75C15 11.7703 14.3739 10.9369 13.5 10.628V5C13.5 3.61929 12.3807 2.5 11 2.5ZM12 12.75C12 12.3358 12.3358 12 12.75 12C13.1642 12 13.5 12.3358 13.5 12.75C13.5 13.1642 13.1642 13.5 12.75 13.5C12.3358 13.5 12 13.1642 12 12.75ZM3.75 12C3.33579 12 3 12.3358 3 12.75C3 13.1642 3.33579 13.5 3.75 13.5C4.16421 13.5 4.5 13.1642 4.5 12.75C4.5 12.3358 4.16421 12 3.75 12Z"></path></svg>
|
||||
Closed
|
||||
</span>
|
||||
<span class="State State--purple mr-2">
|
||||
|
||||
<span class="State State--merged mr-2">
|
||||
<!-- <%= octicon "git-merge" %> -->
|
||||
<svg class="octicon octicon-git-merge" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0"> <path fill-rule="evenodd" clip-rule="evenodd" d="M5 3.254V3.25V3.255C4.99934 3.45369 4.91985 3.64401 4.779 3.78415C4.63815 3.9243 4.44745 4.00283 4.24875 4.0025C4.05006 4.00217 3.85961 3.923 3.71923 3.78239C3.57885 3.64177 3.5 3.45119 3.5 3.2525C3.5 3.0538 3.57885 2.86323 3.71923 2.72261C3.85961 2.58199 4.05006 2.50283 4.24875 2.5025C4.44745 2.50217 4.63815 2.5807 4.779 2.72084C4.91985 2.86099 4.99934 3.0513 5 3.25V3.254ZM5.45 5.154C5.88079 4.8824 6.2067 4.47269 6.37445 3.99186C6.54221 3.51102 6.54188 2.9875 6.37353 2.50687C6.20517 2.02624 5.87875 1.61694 5.44762 1.34588C5.01649 1.07483 4.50616 0.95804 4.00005 1.01462C3.49394 1.0712 3.022 1.2978 2.66137 1.65737C2.30074 2.01695 2.07276 2.48822 2.0147 2.99416C1.95664 3.5001 2.07193 4.01077 2.34173 4.4427C2.61152 4.87462 3.01987 5.20224 3.5 5.372V10.628C2.99931 10.8049 2.57729 11.1532 2.30855 11.6112C2.0398 12.0692 1.94163 12.6075 2.03139 13.1309C2.12114 13.6542 2.39305 14.1291 2.79904 14.4713C3.20503 14.8136 3.71897 15.0014 4.25 15.0014C4.78103 15.0014 5.29496 14.8136 5.70095 14.4713C6.10695 14.1291 6.37885 13.6542 6.46861 13.1309C6.55837 12.6075 6.4602 12.0692 6.19145 11.6112C5.9227 11.1532 5.50069 10.8049 5 10.628V7.123C5.53827 7.71503 6.19447 8.18788 6.92641 8.51114C7.65836 8.8344 8.44985 9.00093 9.25 9H10.628C10.8049 9.50069 11.1532 9.9227 11.6112 10.1915C12.0692 10.4602 12.6075 10.5584 13.1309 10.4686C13.6542 10.3789 14.1291 10.1069 14.4713 9.70096C14.8136 9.29496 15.0014 8.78103 15.0014 8.25C15.0014 7.71897 14.8136 7.20503 14.4713 6.79904C14.1291 6.39305 13.6542 6.12114 13.1309 6.03139C12.6075 5.94163 12.0692 6.0398 11.6112 6.30855C11.1532 6.57729 10.8049 6.99931 10.628 7.5H9.25C8.4613 7.50006 7.68813 7.28066 7.01702 6.86634C6.34592 6.45202 5.80334 5.85912 5.45 5.154ZM12.75 9C12.9489 9 13.1397 8.92098 13.2803 8.78033C13.421 8.63968 13.5 8.44891 13.5 8.25C13.5 8.05109 13.421 7.86032 13.2803 7.71967C13.1397 7.57902 12.9489 7.5 12.75 7.5C12.5511 7.5 12.3603 7.57902 12.2197 7.71967C12.079 7.86032 12 8.05109 12 8.25C12 8.44891 12.079 8.63968 12.2197 8.78033C12.3603 8.92098 12.5511 9 12.75 9ZM4.25 13.5C4.44891 13.5 4.63968 13.421 4.78033 13.2803C4.92098 13.1397 5 12.9489 5 12.75C5 12.5511 4.92098 12.3603 4.78033 12.2197C4.63968 12.079 4.44891 12 4.25 12C4.05109 12 3.86032 12.079 3.71967 12.2197C3.57902 12.3603 3.5 12.5511 3.5 12.75C3.5 12.9489 3.57902 13.1397 3.71967 13.2803C3.86032 13.421 4.05109 13.5 4.25 13.5Z"></path></svg>
|
||||
Merged
|
||||
</span>
|
||||
|
||||
<span class="State State--closed mr-2" title="Status: closed">
|
||||
<!-- <%= octicon "git-pull-request" %> -->
|
||||
<svg class="octicon octicon-git-pull-request" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0"> <path fill-rule="evenodd" clip-rule="evenodd" d="M7.17674 3.07322L9.57318 0.676753C9.73068 0.51926 9.99996 0.630802 9.99996 0.853529V5.64642C9.99996 5.86915 9.73068 5.98069 9.57319 5.8232L7.17674 3.42677C7.07911 3.32914 7.07911 3.17085 7.17674 3.07322ZM3.75 2.5C3.33579 2.5 3 2.83579 3 3.25C3 3.66421 3.33579 4 3.75 4C4.16421 4 4.5 3.66421 4.5 3.25C4.5 2.83579 4.16421 2.5 3.75 2.5ZM1.5 3.25C1.5 2.00736 2.50736 1 3.75 1C4.99264 1 6 2.00736 6 3.25C6 4.22966 5.37389 5.06309 4.5 5.37197V10.628C5.37389 10.9369 6 11.7703 6 12.75C6 13.9926 4.99264 15 3.75 15C2.50736 15 1.5 13.9926 1.5 12.75C1.5 11.7703 2.12611 10.9369 3 10.628V5.37197C2.12611 5.06309 1.5 4.22966 1.5 3.25ZM11 2.5H10V4H11C11.5523 4 12 4.44772 12 5V10.628C11.1261 10.9369 10.5 11.7703 10.5 12.75C10.5 13.9926 11.5074 15 12.75 15C13.9926 15 15 13.9926 15 12.75C15 11.7703 14.3739 10.9369 13.5 10.628V5C13.5 3.61929 12.3807 2.5 11 2.5ZM12 12.75C12 12.3358 12.3358 12 12.75 12C13.1642 12 13.5 12.3358 13.5 12.75C13.5 13.1642 13.1642 13.5 12.75 13.5C12.3358 13.5 12 13.1642 12 12.75ZM3.75 12C3.33579 12 3 12.3358 3 12.75C3 13.1642 3.33579 13.5 3.75 13.5C4.16421 13.5 4.5 13.1642 4.5 12.75C4.5 12.3358 4.16421 12 3.75 12Z"></path></svg>
|
||||
Closed
|
||||
</span>
|
||||
```
|
||||
|
||||
### Small states
|
||||
@ -131,12 +131,12 @@ Use `State--small` for a state label with reduced padding a smaller font size. T
|
||||
|
||||
```html live
|
||||
<span class="State State--small mr-2">Default</span>
|
||||
<span class="State State--small State--green mr-2">
|
||||
<span class="State State--small State--open mr-2">
|
||||
<!-- <%= octicon "issue-opened" %> -->
|
||||
<svg class="octicon octicon-issue-opened" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg>
|
||||
Open
|
||||
</span>
|
||||
<span class="State State--small State--red mr-2">
|
||||
<span class="State State--small State--closed mr-2">
|
||||
<!-- <%= octicon "issue-closed" %> -->
|
||||
<svg class="octicon octicon-issue-closed" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7 10h2v2H7v-2zm2-6H7v5h2V4zm1.5 1.5l-1 1L12 9l4-4.5-1-1L12 7l-1.5-1.5zM8 13.7A5.71 5.71 0 0 1 2.3 8c0-3.14 2.56-5.7 5.7-5.7 1.83 0 3.45.88 4.5 2.2l.92-.92A6.947 6.947 0 0 0 8 1C4.14 1 1 4.14 1 8s3.14 7 7 7 7-3.14 7-7l-1.52 1.52c-.66 2.41-2.86 4.19-5.48 4.19v-.01z"></path></svg>
|
||||
Closed
|
||||
@ -145,12 +145,18 @@ Use `State--small` for a state label with reduced padding a smaller font size. T
|
||||
|
||||
## Counters
|
||||
|
||||
Use the `Counter` component to add a count to navigational elements and buttons. Counters come in 3 variations: the default `Counter` with a light gray background, the `Counter--gray-light` with a lighter text color, and `Counter--gray` with a dark-gray background and inverse white text. When a counter is empty, its visibility will be hidden.
|
||||
Use the `Counter` component to add a count to navigational elements and buttons. Counters come in 3 variations:
|
||||
|
||||
1. the default `Counter`,
|
||||
2. the `Counter--primary` with a stronger background color
|
||||
3. and `Counter--secondary` with a more subtler text color.
|
||||
|
||||
Note: When a counter is empty, its visibility will be hidden.
|
||||
|
||||
```html live
|
||||
<span class="Counter mr-1">1</span>
|
||||
<span class="Counter mr-1 Counter--gray-light">23</span>
|
||||
<span class="Counter mr-1 Counter--gray">456</span>
|
||||
<span class="Counter mr-1 Counter--primary">23</span>
|
||||
<span class="Counter mr-1 Counter--secondary">456</span>
|
||||
```
|
||||
|
||||
Use the `Counter` in navigation to indicate the number of items without the user having to click through or count the items, such as open issues in a GitHub repo. See more options in [navigation](./navigation).
|
||||
|
||||
52
docs/content/components/links.md
Normal file
52
docs/content/components/links.md
Normal file
@ -0,0 +1,52 @@
|
||||
---
|
||||
title: Links
|
||||
path: components/links
|
||||
status: New
|
||||
source: 'https://github.com/primer/css/tree/master/src/links'
|
||||
bundle: links
|
||||
---
|
||||
|
||||
<Note>
|
||||
Please note Primer v16 has changed the naming of these color classes. Check the <a href="/css/support/v16-migration">migration guide</a> to make sure your app is up to date.
|
||||
</Note>
|
||||
|
||||
By default `<a>` elements already use the right link color and apply an underline on hover.
|
||||
|
||||
```html live
|
||||
Some text with a default <a href="#url">link</a>
|
||||
```
|
||||
|
||||
If you need to make other elements behave like a link and perhaps use JS to trigger navigating to another page, use the `.Link` class.
|
||||
|
||||
```html live
|
||||
Some text with a <span class="Link">span that behaves like a link</span>
|
||||
```
|
||||
|
||||
If you like to override the default link styles you can do so with the following link utilities. **Bear in mind that link styles are easier for more people to see and interact with when the changes in styles do not rely on color alone.**
|
||||
|
||||
Use `.Link--primary` to turn the link color to blue only on hover.
|
||||
|
||||
```html live
|
||||
<p class="color-text-secondary">Some text with a <a class="Link--primary" href="#url">Link--primary</a></p>
|
||||
```
|
||||
|
||||
Use `.Link--secondary` for a more subtle link color that turns blue on hover.
|
||||
|
||||
```html live
|
||||
Some text with a <a class="Link--secondary" href="#url">Link--secondary</a>
|
||||
```
|
||||
|
||||
Use `.Link--muted` also removes the underline on hover. Tip: You can also use the `.no-underline` utility to do the same for `.Link--primary`.
|
||||
|
||||
```html live
|
||||
<p>Some text with a <a class="Link--secondary no-underline" href="#url">Link--muted</a></p>
|
||||
<p>Some text with a <a class="Link--primary no-underline" href="#url">Link--primary no-underline</a></p>
|
||||
```
|
||||
|
||||
Use `.Link--onHover` to make any text color used with links to turn blue on hover. This is useful when you want only part of a link to turn blue on hover.
|
||||
|
||||
```html live
|
||||
<a class="color-text-secondary no-underline" href="#url">
|
||||
A link with a partial <span class="Link--onHover">Link--onHover</span>
|
||||
</a>
|
||||
```
|
||||
@ -8,18 +8,18 @@ bundle: marketing-buttons
|
||||
|
||||
Marketing buttons come in different colors and sizes, and are also available in a blue outlined version.
|
||||
|
||||
## Colors and outlined
|
||||
## Colors, outlined and transparent
|
||||
|
||||
Marketing buttons can be solid blue, outlined blue, solid green, or transparent.
|
||||
|
||||
The solid blue and solid green buttons have more visual emphasis than the blue outlined button, therefore they should be used sparingly and only for call to actions that need emphasis.
|
||||
|
||||
```html live
|
||||
<button class="btn-mktg mr-2" type="button">Learn more</button>
|
||||
<button class="btn-mktg btn-outline-mktg mr-2" type="button">Learn more</button>
|
||||
<button class="btn-mktg btn-primary-mktg mr-2" type="button">Sign up</button>
|
||||
<div class="bg-gray-dark">
|
||||
<button class="btn-mktg btn-transparent m-2" type="button">Learn more</button>
|
||||
<button class="btn-mktg mr-3" type="button">Learn more</button>
|
||||
<button class="btn-mktg btn-primary-mktg mr-3" type="button">Sign up</button>
|
||||
<button class="btn-mktg btn-outline-mktg mr-3" type="button">Learn more</button>
|
||||
<div class="mt-3 p-3" style="background-color: var(--color-scale-gray-9);">
|
||||
<button class="btn-mktg btn-transparent" type="button">Learn more</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -29,9 +29,10 @@ Available in two sizes, marketing buttons have a default size and a large size.
|
||||
|
||||
```html live
|
||||
<button class="btn-mktg mr-2" type="button">Learn more</button>
|
||||
<button class="btn-mktg btn-outline-mktg mr-2" type="button">Learn more</button>
|
||||
<button class="btn-mktg btn-primary-mktg mr-2" type="button">Sign up</button>
|
||||
<button class="btn-mktg btn-outline-mktg mr-2" type="button">Learn more</button>
|
||||
<hr>
|
||||
<button class="btn-mktg btn-large-mktg mr-2" type="button">Learn more</button>
|
||||
<button class="btn-mktg btn-outline-mktg btn-large-mktg mr-2" type="button">Learn more</button>
|
||||
<button class="btn-mktg btn-primary-mktg btn-large-mktg mr-2" type="button">Sign up</button>
|
||||
<button class="btn-mktg btn-outline-mktg btn-large-mktg mr-2" type="button">Learn more</button>
|
||||
```
|
||||
|
||||
@ -51,7 +51,7 @@ Defaults to caret oriented top-center.
|
||||
<div class="position-relative text-center">
|
||||
<button class="btn btn-primary">UI</button>
|
||||
<div class="Popover right-0 left-0 position-relative">
|
||||
<div class="Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large">
|
||||
<div class="Popover-message text-left p-4 mt-2 mx-auto Box color-shadow-large">
|
||||
<h4 class="mb-2">Popover heading</h4>
|
||||
<p>Message about this particular piece of UI.</p>
|
||||
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
|
||||
@ -66,7 +66,7 @@ Defaults to caret oriented top-center.
|
||||
<div class="position-relative text-center">
|
||||
<button class="btn btn-primary">UI</button>
|
||||
<div class="Popover right-0 left-0 position-relative">
|
||||
<div class="Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large">
|
||||
<div class="Popover-message Popover-message--large text-left p-4 mt-2 Box color-shadow-large">
|
||||
<h4 class="mb-2">Popover heading</h4>
|
||||
<p>Message about this particular piece of UI.</p>
|
||||
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
|
||||
@ -80,7 +80,7 @@ Defaults to caret oriented top-center.
|
||||
```html live title="Bottom"
|
||||
<div class="position-relative text-center">
|
||||
<div class="Popover position-relative">
|
||||
<div class="Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large">
|
||||
<div class="Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box color-shadow-large">
|
||||
<h4 class="mb-2">Popover heading</h4>
|
||||
<p>Message about this particular piece of UI.</p>
|
||||
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
|
||||
@ -95,7 +95,7 @@ Defaults to caret oriented top-center.
|
||||
```html live title="Bottom-right"
|
||||
<div class="position-relative text-right pr-2">
|
||||
<div class="Popover position-relative">
|
||||
<div class="Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large">
|
||||
<div class="Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box color-shadow-large">
|
||||
<h4 class="mb-2">Popover heading</h4>
|
||||
<p>Message about this particular piece of UI.</p>
|
||||
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
|
||||
@ -109,7 +109,7 @@ Defaults to caret oriented top-center.
|
||||
|
||||
```html live title="Bottom-left"
|
||||
<div class="Popover position-relative pl-2">
|
||||
<div class="Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large">
|
||||
<div class="Popover-message Popover-message--bottom-left p-4 mb-2 Box color-shadow-large">
|
||||
<h4 class="mb-2">Popover heading</h4>
|
||||
<p>Message about this particular piece of UI.</p>
|
||||
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
|
||||
@ -124,7 +124,7 @@ Defaults to caret oriented top-center.
|
||||
<div class="d-flex flex-justify-center flex-items-center">
|
||||
<button class="btn btn-primary">UI</button>
|
||||
<div class="Popover position-relative">
|
||||
<div class="Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large">
|
||||
<div class="Popover-message Popover-message--left p-4 ml-2 Box color-shadow-large">
|
||||
<h4 class="mb-2">Popover heading</h4>
|
||||
<p>Message about this particular piece of UI.</p>
|
||||
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
|
||||
@ -139,7 +139,7 @@ Defaults to caret oriented top-center.
|
||||
<div class="d-flex flex-justify-center flex-items-end">
|
||||
<button class="btn btn-primary">UI</button>
|
||||
<div class="Popover position-relative">
|
||||
<div class="Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large">
|
||||
<div class="Popover-message Popover-message--left-bottom p-4 ml-2 Box color-shadow-large">
|
||||
<h4 class="mb-2">Popover heading</h4>
|
||||
<p>Message about this particular piece of UI.</p>
|
||||
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
|
||||
@ -154,7 +154,7 @@ Defaults to caret oriented top-center.
|
||||
<div class="d-flex flex-justify-center flex-items-start">
|
||||
<button class="btn btn-primary">UI</button>
|
||||
<div class="Popover position-relative">
|
||||
<div class="Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large">
|
||||
<div class="Popover-message Popover-message--left-top p-4 ml-2 Box color-shadow-large">
|
||||
<h4 class="mb-2">Popover heading</h4>
|
||||
<p>Message about this particular piece of UI.</p>
|
||||
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
|
||||
@ -168,7 +168,7 @@ Defaults to caret oriented top-center.
|
||||
```html live title="Right"
|
||||
<div class="d-flex flex-justify-center flex-items-center">
|
||||
<div class="Popover position-relative">
|
||||
<div class="Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large">
|
||||
<div class="Popover-message Popover-message--right p-4 mr-2 Box color-shadow-large">
|
||||
<h4 class="mb-2">Popover heading</h4>
|
||||
<p>Message about this particular piece of UI.</p>
|
||||
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
|
||||
@ -183,7 +183,7 @@ Defaults to caret oriented top-center.
|
||||
```html live title="Right-bottom"
|
||||
<div class="d-flex flex-justify-center flex-items-end">
|
||||
<div class="Popover position-relative">
|
||||
<div class="Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large">
|
||||
<div class="Popover-message Popover-message--right-bottom p-4 mr-2 Box color-shadow-large">
|
||||
<h4 class="mb-2">Popover heading</h4>
|
||||
<p>Message about this particular piece of UI.</p>
|
||||
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
|
||||
@ -198,7 +198,7 @@ Defaults to caret oriented top-center.
|
||||
```html live title="Right-top"
|
||||
<div class="d-flex flex-justify-center flex-items-start">
|
||||
<div class="Popover position-relative">
|
||||
<div class="Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large">
|
||||
<div class="Popover-message Popover-message--right-top p-4 mr-2 Box color-shadow-large">
|
||||
<h4 class="mb-2">Popover heading</h4>
|
||||
<p>Message about this particular piece of UI.</p>
|
||||
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
|
||||
@ -214,7 +214,7 @@ Defaults to caret oriented top-center.
|
||||
<div class="position-relative pl-2">
|
||||
<button class="btn btn-primary">UI</button>
|
||||
<div class="Popover position-relative">
|
||||
<div class="Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large">
|
||||
<div class="Popover-message Popover-message--top-left p-4 mt-2 Box color-shadow-large">
|
||||
<h4 class="mb-2">Popover heading</h4>
|
||||
<p>Message about this particular piece of UI.</p>
|
||||
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
|
||||
@ -229,7 +229,7 @@ Defaults to caret oriented top-center.
|
||||
<div class="position-relative text-right pr-2">
|
||||
<button class="btn btn-primary">UI</button>
|
||||
<div class="Popover right-0 position-relative">
|
||||
<div class="Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large">
|
||||
<div class="Popover-message Popover-message--top-right text-left p-4 mt-2 Box color-shadow-large">
|
||||
<h4 class="mb-2">Popover heading</h4>
|
||||
<p>Message about this particular piece of UI.</p>
|
||||
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
|
||||
|
||||
@ -10,7 +10,7 @@ Use progress components to visualize task completion. The `Progress` class adds
|
||||
|
||||
```html live
|
||||
<span class="Progress">
|
||||
<span class="Progress-item bg-green" style="width: 50%;"></span>
|
||||
<span class="Progress-item color-bg-success-inverse" style="width: 50%;"></span>
|
||||
</span>
|
||||
```
|
||||
|
||||
@ -20,7 +20,7 @@ Large progress bars are slightly taller than the default.
|
||||
|
||||
```html live
|
||||
<span class="Progress Progress--large">
|
||||
<span class="Progress-item bg-green" style="width: 50%;"></span>
|
||||
<span class="Progress-item color-bg-success-inverse" style="width: 50%;"></span>
|
||||
</span>
|
||||
```
|
||||
|
||||
@ -30,7 +30,7 @@ Small progress bars are shorter than the default.
|
||||
|
||||
```html live
|
||||
<span class="Progress Progress--small">
|
||||
<span class="Progress-item bg-green" style="width: 50%;"></span>
|
||||
<span class="Progress-item color-bg-success-inverse" style="width: 50%;"></span>
|
||||
</span>
|
||||
```
|
||||
|
||||
@ -41,7 +41,7 @@ For inline progress indicators, use the `Progress` and `d-inline-flex` with an i
|
||||
```html live
|
||||
<span class="text-small text-gray mr-2">4 of 16</span>
|
||||
<span class="Progress d-inline-flex" style="width: 160px">
|
||||
<div class="Progress-item bg-green" style="width: 25%"></div>
|
||||
<div class="Progress-item color-bg-success-inverse" style="width: 25%"></div>
|
||||
</span>
|
||||
```
|
||||
|
||||
@ -52,7 +52,7 @@ In cases where it's not possible to describe the progress in text, provide an `a
|
||||
```html live
|
||||
<div aria-label="tasks: 8 of 10 complete">
|
||||
<span class="Progress">
|
||||
<span class="Progress-item bg-green" style="width: 80%;"></span>
|
||||
<span class="Progress-item color-bg-success-inverse" style="width: 80%;"></span>
|
||||
</span>
|
||||
</div>
|
||||
```
|
||||
@ -64,11 +64,10 @@ To show the progress of tasks in multiple states (such as "done", "in progress",
|
||||
```html live
|
||||
<div class="tooltipped tooltipped-n" aria-label="tasks: 80 done, 14 in progress, 6 open">
|
||||
<span class="Progress">
|
||||
<span class="Progress-item bg-green" style="width: 50%;"></span>
|
||||
<span class="Progress-item bg-purple" style="width: 25%;"></span>
|
||||
<span class="Progress-item bg-pink" style="width: 15%;"></span>
|
||||
<span class="Progress-item bg-red" style="width: 8%;"></span>
|
||||
<span class="Progress-item bg-blue" style="width: 2%;"></span>
|
||||
<span class="Progress-item color-bg-success-inverse" style="width: 50%;"></span>
|
||||
<span class="Progress-item color-bg-warning-inverse" style="width: 25%;"></span>
|
||||
<span class="Progress-item color-bg-danger-inverse" style="width: 15%;"></span>
|
||||
<span class="Progress-item color-bg-info-inverse" style="width: 10%;"></span>
|
||||
</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -26,7 +26,7 @@ The `TimelineItem` component is used to display items on a vertical timeline, co
|
||||
|
||||
## TimelineItem-badge
|
||||
|
||||
The default TimelineItem-badge color is dark text on a light grey background.
|
||||
The default TimelineItem-badge color is dark text on a light gray background.
|
||||
|
||||
```html live
|
||||
<!-- Default TimelineItem Badge -->
|
||||
|
||||
@ -100,5 +100,5 @@ Don't forget to add the compiled CSS to the `<head>` section of your page.
|
||||
You won't need to install any node modules or Sass compilers for a static site; you can use the built CSS. The best thing to do is to [download the built CSS](https://unpkg.com/@primer/css/dist/primer.css) from the [unpkg.com](https://unpkg.com) and host it yourself. If that's not an option, you can include a CDN link in your HTML:
|
||||
|
||||
```html
|
||||
<link href="https://unpkg.com/@primer/css/dist/primer.css" rel="stylesheet" />
|
||||
<link href="https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" rel="stylesheet" />
|
||||
```
|
||||
|
||||
162
docs/content/getting-started/theming.md
Normal file
162
docs/content/getting-started/theming.md
Normal file
@ -0,0 +1,162 @@
|
||||
---
|
||||
title: Theming
|
||||
path: getting-started/theming
|
||||
---
|
||||
|
||||
Primer CSS offers multiple color themes for components and utilities. The colors change based on the active theme and color mode.
|
||||
|
||||
Currently there are 3 themes (`light`, `dark`, `dark_dimmed`) to choose from. When nothing is specified, Primer CSS uses the `light` theme.
|
||||
|
||||
## Set a theme
|
||||
|
||||
Configure Primer CSS to use a certain theme by adding the following attributes:
|
||||
|
||||
- `data-color-mode` with a value of either `light` or `dark`
|
||||
- either `data-light-theme` or `data-dark-theme` with a value of either `light`, `dark`, `dark_dimmed`
|
||||
|
||||
The attributes can be added to any element, but ideally it should be added to the document root (`<html>`). Below an example to use the `dark_dimmed` theme:
|
||||
|
||||
```html
|
||||
<html data-color-mode="dark" data-dark-theme="dark_dimmed">
|
||||
```
|
||||
|
||||
More examples:
|
||||
|
||||
```html live
|
||||
<div data-color-mode="light" data-light-theme="light" class="p-3">
|
||||
<h4>Light</h4>
|
||||
<code class="d-block mt-1 mb-3 color-text-secondary">
|
||||
data-color-mode="light" data-light-theme="light"
|
||||
</code>
|
||||
<button class="btn">Button</button>
|
||||
<span class="Label ml-2">Label</span>
|
||||
<span class="Counter ml-2">123</span>
|
||||
</div>
|
||||
<div data-color-mode="dark" data-dark-theme="dark" class="p-3">
|
||||
<h4>Dark</h4>
|
||||
<code class="d-block mt-1 mb-3 color-text-secondary">
|
||||
data-color-mode="dark" data-dark-theme="dark"
|
||||
</code>
|
||||
<button class="btn">Button</button>
|
||||
<span class="Label ml-2">Label</span>
|
||||
<span class="Counter ml-2">123</span>
|
||||
</div>
|
||||
<div data-color-mode="dark" data-dark-theme="dark_dimmed" class="p-3">
|
||||
<h4>Dark Dimmed</h4>
|
||||
<code class="d-block mt-1 mb-3 color-text-secondary">
|
||||
data-color-mode="dark" data-dark-theme="dark_dimmed"
|
||||
</code>
|
||||
<button class="btn">Button</button>
|
||||
<span class="Label ml-2">Label</span>
|
||||
<span class="Counter ml-2">123</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
|
||||
## Sync to the system
|
||||
|
||||
If the theme should be synced to the OS's color mode, use `data-color-mode="auto"` and set a `data-light-theme` as well as a `data-dark-theme`.
|
||||
|
||||
```html live
|
||||
<div data-color-mode="auto" data-light-theme="light" data-dark-theme="dark_dimmed" class="p-3">
|
||||
<h4>Synced to system</h4>
|
||||
<code class="d-block mt-1 mb-3 color-text-secondary">
|
||||
data-color-mode="auto" data-light-theme="light" data-dark-theme="dark_dimmed"
|
||||
</code>
|
||||
<button class="btn">Button</button>
|
||||
<span class="Label ml-2">Label</span>
|
||||
<span class="Counter ml-2">123</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
Change the color mode of your OS to see the switch between the `data-light-theme="light"` and `data-dark-theme="dark_dimmed"`.
|
||||
|
||||
## Custom color variables
|
||||
|
||||
It's recommended to use the [functional variables](/support/color-system#functional-variables) as much as possible. It will guarantee that the variables will work as expected with any new theme that might get added in the future. Somtimes you might still need a custom variable that changes based on the color mode. You can create a custom variable with the `color-variables` mixin.
|
||||
|
||||
```css
|
||||
@include color-variables(
|
||||
("custom-css-variable-1": (
|
||||
light: var(--color-scale-gray-3),
|
||||
dark: var(--color-scale-gray-5)
|
||||
),
|
||||
"custom-css-variable-2": (
|
||||
light: var(--color-scale-gray-2),
|
||||
dark: var(--color-scale-gray-6)
|
||||
),
|
||||
"custom-css-variable-3": (
|
||||
light: var(--color-scale-gray-2),
|
||||
dark: var(--color-scale-gray-6)
|
||||
)
|
||||
));
|
||||
```
|
||||
|
||||
The custom variables will be prefixed with `--color-` and can be used in the same way as other functional variables.
|
||||
|
||||
```css
|
||||
.my-class {
|
||||
color: var(--color-custom-css-variable-1);
|
||||
background-color: var(--color-custom-css-variable-2);
|
||||
border-color: var(--color-custom-css-variable-2);
|
||||
}
|
||||
```
|
||||
|
||||
## Auto variables
|
||||
|
||||
If you tried using the [`scale` color variables](/support/color-system#color-variables) you might have noticed that they are not that useful with multiple color modes. That's because they stay light or dark in any color mode. As seen above, you could create custom variables that invert the scale like so:
|
||||
|
||||
```css
|
||||
@include color-variables(
|
||||
("custom-css-variable": (
|
||||
light: var(--color-scale-gray-7),
|
||||
dark: var(--color-scale-gray-2)
|
||||
)
|
||||
));
|
||||
|
||||
.my-class {
|
||||
color: var(--color-custom-css-variable);
|
||||
}
|
||||
```
|
||||
|
||||
In this case, the `auto` variables might come in handy.
|
||||
|
||||
```css
|
||||
.my-class {
|
||||
color: var(--color-auto-gray-7);
|
||||
}
|
||||
```
|
||||
|
||||
The benefit of `auto` over the `scale` variables is that `auto` variables automatically get inverted in dark mode.
|
||||
|
||||
```html live
|
||||
<div data-color-mode="light" data-light-theme="light" class="p-3">
|
||||
<code style="color: var(--color-auto-gray-7)">--color-auto-gray-7</code>
|
||||
<code style="color: var(--color-scale-gray-7)">--color-scale-gray-7</code><br>
|
||||
<code style="color: var(--color-auto-blue-7)">--color-auto-blue-7</code>
|
||||
<code style="color: var(--color-scale-blue-7)">--color-scale-blue-7</code><br>
|
||||
<code style="color: var(--color-auto-green-7)">--color-auto-green-7</code>
|
||||
<code style="color: var(--color-scale-green-7)">--color-scale-green-7</code>
|
||||
</div>
|
||||
<div data-color-mode="dark" data-dark-theme="dark" class="p-3">
|
||||
<code style="color: var(--color-auto-gray-7)">--color-auto-gray-7</code>
|
||||
<code style="color: var(--color-scale-gray-7)">--color-scale-gray-7</code><br>
|
||||
<code style="color: var(--color-auto-blue-7)">--color-auto-blue-7</code>
|
||||
<code style="color: var(--color-scale-blue-7)">--color-scale-blue-7</code><br>
|
||||
<code style="color: var(--color-auto-green-7)">--color-auto-green-7</code>
|
||||
<code style="color: var(--color-scale-green-7)">--color-scale-green-7</code>
|
||||
</div>
|
||||
<div data-color-mode="dark" data-dark-theme="dark_dimmed" class="p-3">
|
||||
<code style="color: var(--color-auto-gray-7)">--color-auto-gray-7</code>
|
||||
<code style="color: var(--color-scale-gray-7)">--color-scale-gray-7</code><br>
|
||||
<code style="color: var(--color-auto-blue-7)">--color-auto-blue-7</code>
|
||||
<code style="color: var(--color-scale-blue-7)">--color-scale-blue-7</code><br>
|
||||
<code style="color: var(--color-auto-green-7)">--color-auto-green-7</code>
|
||||
<code style="color: var(--color-scale-green-7)">--color-scale-green-7</code>
|
||||
</div>
|
||||
|
||||
<style>code { margin-right: 16px; }</style>
|
||||
```
|
||||
|
||||
In general, use `auto` variables if the results give enough constrast or create custom variables for further fine tuning.
|
||||
@ -1,89 +1,100 @@
|
||||
---
|
||||
title: Sticker Sheet
|
||||
path: stickersheet/index
|
||||
path: stickersheet/
|
||||
---
|
||||
|
||||
|
||||
### Sizes
|
||||
### Light/Dark
|
||||
|
||||
```html live
|
||||
|
||||
<span class="d-inline-block col-1 text-gray-light">16px</span>
|
||||
<img class="mr-3 avatar avatar-1" src="https://avatars.githubusercontent.com/jonrohan?s=64" />
|
||||
<div class="d-flex overflow-x-auto">
|
||||
<div class="flex-1 p-4 overflow-x-auto" data-color-mode="light">
|
||||
|
||||
|
||||
<!-- <%= octicon "comment" %> -->
|
||||
<svg class="octicon octicon-comment" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M2.75 2.5C2.6837 2.5 2.62011 2.52634 2.57322 2.57322C2.52634 2.62011 2.5 2.6837 2.5 2.75V10.25C2.5 10.388 2.612 10.5 2.75 10.5H4.75C4.94891 10.5 5.13968 10.579 5.28033 10.7197C5.42098 10.8603 5.5 11.0511 5.5 11.25V13.44L8.22 10.72C8.36052 10.5793 8.55115 10.5002 8.75 10.5H13.25C13.3163 10.5 13.3799 10.4737 13.4268 10.4268C13.4737 10.3799 13.5 10.3163 13.5 10.25V2.75C13.5 2.6837 13.4737 2.62011 13.4268 2.57322C13.3799 2.52634 13.3163 2.5 13.25 2.5H2.75ZM1 2.75C1 1.784 1.784 1 2.75 1H13.25C14.216 1 15 1.784 15 2.75V10.25C15 10.7141 14.8156 11.1592 14.4874 11.4874C14.1592 11.8156 13.7141 12 13.25 12H9.06L6.487 14.573C6.28324 14.7767 6.02367 14.9153 5.74111 14.9715C5.45854 15.0277 5.16567 14.9988 4.8995 14.8886C4.63333 14.7784 4.40581 14.5917 4.24571 14.3522C4.08561 14.1127 4.0001 13.8311 4 13.543V12H2.75C2.28587 12 1.84075 11.8156 1.51256 11.4874C1.18437 11.1592 1 10.7141 1 10.25V2.75Z"></path></svg>
|
||||
<svg class="octicon octicon-comment" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M2.75 2.5C2.6837 2.5 2.62011 2.52634 2.57322 2.57322C2.52634 2.62011 2.5 2.6837 2.5 2.75V10.25C2.5 10.388 2.612 10.5 2.75 10.5H4.75C4.94891 10.5 5.13968 10.579 5.28033 10.7197C5.42098 10.8603 5.5 11.0511 5.5 11.25V13.44L8.22 10.72C8.36052 10.5793 8.55115 10.5002 8.75 10.5H13.25C13.3163 10.5 13.3799 10.4737 13.4268 10.4268C13.4737 10.3799 13.5 10.3163 13.5 10.25V2.75C13.5 2.6837 13.4737 2.62011 13.4268 2.57322C13.3799 2.52634 13.3163 2.5 13.25 2.5H2.75ZM1 2.75C1 1.784 1.784 1 2.75 1H13.25C14.216 1 15 1.784 15 2.75V10.25C15 10.7141 14.8156 11.1592 14.4874 11.4874C14.1592 11.8156 13.7141 12 13.25 12H9.06L6.487 14.573C6.28324 14.7767 6.02367 14.9153 5.74111 14.9715C5.45854 15.0277 5.16567 14.9988 4.8995 14.8886C4.63333 14.7784 4.40581 14.5917 4.24571 14.3522C4.08561 14.1127 4.0001 13.8311 4 13.543V12H2.75C2.28587 12 1.84075 11.8156 1.51256 11.4874C1.18437 11.1592 1 10.7141 1 10.25V2.75Z"></path></svg> Icon
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="mr-2 Counter">1.5K</span> Counter
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="Label mr-2">Label</span>
|
||||
<span class="Label mr-2 Label--red" >Danger</span>
|
||||
<span class="Label mr-2 Label--green" >Success</span>
|
||||
<span class="Label mr-2 Label--blue" >Info</span>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="mr-2 IssueLabel bg-pink text-white">IssueLabel</span>
|
||||
<span class="mr-2 IssueLabel IssueLabel--big bg-purple text-white">IssueLabel</span>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="State mr-2">Default</span>
|
||||
<span class="State State--green mr-2" title="Status: open">
|
||||
<!-- <%= octicon "git-pull-request" %> -->
|
||||
<svg class="octicon octicon-git-pull-request" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0"> <path fill-rule="evenodd" clip-rule="evenodd" d="M7.17674 3.07322L9.57318 0.676753C9.73068 0.51926 9.99996 0.630802 9.99996 0.853529V5.64642C9.99996 5.86915 9.73068 5.98069 9.57319 5.8232L7.17674 3.42677C7.07911 3.32914 7.07911 3.17085 7.17674 3.07322ZM3.75 2.5C3.33579 2.5 3 2.83579 3 3.25C3 3.66421 3.33579 4 3.75 4C4.16421 4 4.5 3.66421 4.5 3.25C4.5 2.83579 4.16421 2.5 3.75 2.5ZM1.5 3.25C1.5 2.00736 2.50736 1 3.75 1C4.99264 1 6 2.00736 6 3.25C6 4.22966 5.37389 5.06309 4.5 5.37197V10.628C5.37389 10.9369 6 11.7703 6 12.75C6 13.9926 4.99264 15 3.75 15C2.50736 15 1.5 13.9926 1.5 12.75C1.5 11.7703 2.12611 10.9369 3 10.628V5.37197C2.12611 5.06309 1.5 4.22966 1.5 3.25ZM11 2.5H10V4H11C11.5523 4 12 4.44772 12 5V10.628C11.1261 10.9369 10.5 11.7703 10.5 12.75C10.5 13.9926 11.5074 15 12.75 15C13.9926 15 15 13.9926 15 12.75C15 11.7703 14.3739 10.9369 13.5 10.628V5C13.5 3.61929 12.3807 2.5 11 2.5ZM12 12.75C12 12.3358 12.3358 12 12.75 12C13.1642 12 13.5 12.3358 13.5 12.75C13.5 13.1642 13.1642 13.5 12.75 13.5C12.3358 13.5 12 13.1642 12 12.75ZM3.75 12C3.33579 12 3 12.3358 3 12.75C3 13.1642 3.33579 13.5 3.75 13.5C4.16421 13.5 4.5 13.1642 4.5 12.75C4.5 12.3358 4.16421 12 3.75 12Z"></path></svg>
|
||||
Open
|
||||
</span>
|
||||
<span class="State State--red mr-2" title="Status: closed">
|
||||
<!-- <%= octicon "git-pull-request" %> -->
|
||||
<svg class="octicon octicon-git-pull-request" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0"> <path fill-rule="evenodd" clip-rule="evenodd" d="M7.17674 3.07322L9.57318 0.676753C9.73068 0.51926 9.99996 0.630802 9.99996 0.853529V5.64642C9.99996 5.86915 9.73068 5.98069 9.57319 5.8232L7.17674 3.42677C7.07911 3.32914 7.07911 3.17085 7.17674 3.07322ZM3.75 2.5C3.33579 2.5 3 2.83579 3 3.25C3 3.66421 3.33579 4 3.75 4C4.16421 4 4.5 3.66421 4.5 3.25C4.5 2.83579 4.16421 2.5 3.75 2.5ZM1.5 3.25C1.5 2.00736 2.50736 1 3.75 1C4.99264 1 6 2.00736 6 3.25C6 4.22966 5.37389 5.06309 4.5 5.37197V10.628C5.37389 10.9369 6 11.7703 6 12.75C6 13.9926 4.99264 15 3.75 15C2.50736 15 1.5 13.9926 1.5 12.75C1.5 11.7703 2.12611 10.9369 3 10.628V5.37197C2.12611 5.06309 1.5 4.22966 1.5 3.25ZM11 2.5H10V4H11C11.5523 4 12 4.44772 12 5V10.628C11.1261 10.9369 10.5 11.7703 10.5 12.75C10.5 13.9926 11.5074 15 12.75 15C13.9926 15 15 13.9926 15 12.75C15 11.7703 14.3739 10.9369 13.5 10.628V5C13.5 3.61929 12.3807 2.5 11 2.5ZM12 12.75C12 12.3358 12.3358 12 12.75 12C13.1642 12 13.5 12.3358 13.5 12.75C13.5 13.1642 13.1642 13.5 12.75 13.5C12.3358 13.5 12 13.1642 12 12.75ZM3.75 12C3.33579 12 3 12.3358 3 12.75C3 13.1642 3.33579 13.5 3.75 13.5C4.16421 13.5 4.5 13.1642 4.5 12.75C4.5 12.3358 4.16421 12 3.75 12Z"></path></svg>
|
||||
Closed
|
||||
</span>
|
||||
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="d-inline-block col-1 text-gray-light">20px</span>
|
||||
<img class="mr-3 avatar avatar-2" src="https://avatars.githubusercontent.com/jonrohan?s=64" />
|
||||
<span class="mr-3 Label">Label</span>
|
||||
<span class="mr-3 IssueLabel bg-pink text-white">IssueLabel</span>
|
||||
<span class="mr-3 Counter">1.5K</span>
|
||||
|
||||
<button class="mr-2 btn" type="button">Button</button>
|
||||
<button class="mr-2 btn btn-primary" type="button">Primary</button>
|
||||
<div class="my-2"></div>
|
||||
<button class="mr-2 btn btn-outline" type="button">Outline</button>
|
||||
<button class="mr-2 btn btn-danger" type="button">Danger</button>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="d-inline-block col-1 text-gray-light">24px</span>
|
||||
<img class="mr-3 avatar avatar-3" src="https://avatars.githubusercontent.com/jonrohan?s=64" />
|
||||
<span class="mr-3 Label Label--large">Label</span>
|
||||
<span class="mr-3 IssueLabel IssueLabel--big bg-purple text-white">IssueLabel</span>
|
||||
<span class="mr-3 State State--small">State</span>
|
||||
|
||||
<select class="form-select"><option>Select</option><option value="option 2">Option 2</option></select>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="d-inline-block col-1 text-gray-light">28px</span>
|
||||
<img class="mr-3 avatar avatar-4" src="https://avatars.githubusercontent.com/jonrohan?s=64" />
|
||||
<button class="mr-3 btn btn-sm" type="button">Button</button>
|
||||
<input class="mr-3 form-control input-sm" type="text" placeholder="Input" />
|
||||
<select class="mr-3 form-select select-sm"><option>Select</option><option value="option 2">Option 2</option></select>
|
||||
<input class="form-control" type="text" placeholder="Input" />
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="d-inline-block col-1 text-gray-light">32px</span>
|
||||
<img class="mr-3 avatar avatar-5" src="https://avatars.githubusercontent.com/jonrohan?s=64" />
|
||||
<button class="mr-3 btn" type="button">Button</button>
|
||||
<input class="mr-3 form-control" type="text" placeholder="Input" />
|
||||
<select class="mr-3 form-select"><option>Select</option><option value="option 2">Option 2</option></select>
|
||||
<nav class="mr-3 subnav d-inline-block v-align-middle mb-0">
|
||||
<nav class="subnav d-inline-block v-align-middle mb-0">
|
||||
<a class="subnav-item" href="#url" aria-current="page">Filter 1</a>
|
||||
<a class="subnav-item" href="#url">Filter 2</a>
|
||||
</nav>
|
||||
<span class="mr-3 State">State</span>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="d-inline-block col-1 text-gray-light">40px</span>
|
||||
<img class="mr-3 avatar avatar-6" src="https://avatars.githubusercontent.com/jonrohan?s=80" />
|
||||
<div class="mr-3 tabnav d-inline-block v-align-middle mb-0">
|
||||
<div class="tabnav d-inline-block v-align-middle mb-0">
|
||||
<nav class="tabnav-tabs">
|
||||
<a class="tabnav-tab" href="#url" aria-current="page">Tab 1</a>
|
||||
<a class="tabnav-tab" href="#url">Tab 2</a>
|
||||
<a class="tabnav-tab" href="#url">Tab 3</a>
|
||||
<a class="tabnav-tab" href="#url">Tab 4</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="d-inline-block col-1 text-gray-light">48px</span>
|
||||
<img class="mr-3 avatar avatar-7" src="https://avatars.githubusercontent.com/jonrohan?s=96" />
|
||||
<nav class="mr-3 UnderlineNav d-inline-block v-align-middle">
|
||||
<nav class="UnderlineNav d-inline-block v-align-middle">
|
||||
<div class="UnderlineNav-body">
|
||||
<button class="UnderlineNav-item" type="button" role="tab" aria-selected="true">Nav 1</button>
|
||||
<button class="UnderlineNav-item" role="tab" type="button">Nav 2</button>
|
||||
<button class="UnderlineNav-item" role="tab" type="button">Nav 3</button>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="mr-3 flash d-inline-block v-align-middle">Flash alert</div>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="d-inline-block col-1 text-gray-light">64px</span>
|
||||
<img class="mr-3 avatar avatar-8" src="https://avatars.githubusercontent.com/jonrohan?s=128" />
|
||||
<div class="mr-3 Header d-inline-block v-align-middle">
|
||||
<div class="flash">Flash alert</div>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<div class="Header">
|
||||
<div class="Header-item">
|
||||
<a href="#" class="Header-link f4 d-flex flex-items-center">
|
||||
<!-- <%= octicon "mark-github", class: "mr-2", height: 32 %> -->
|
||||
@ -93,4 +104,113 @@ path: stickersheet/index
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div><!-- end light -->
|
||||
<div class="flex-1 p-4 overflow-x-auto" data-color-mode="dark"><!-- ------------------------ -->
|
||||
|
||||
|
||||
|
||||
<!-- <%= octicon "comment" %> -->
|
||||
<svg class="octicon octicon-comment" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M2.75 2.5C2.6837 2.5 2.62011 2.52634 2.57322 2.57322C2.52634 2.62011 2.5 2.6837 2.5 2.75V10.25C2.5 10.388 2.612 10.5 2.75 10.5H4.75C4.94891 10.5 5.13968 10.579 5.28033 10.7197C5.42098 10.8603 5.5 11.0511 5.5 11.25V13.44L8.22 10.72C8.36052 10.5793 8.55115 10.5002 8.75 10.5H13.25C13.3163 10.5 13.3799 10.4737 13.4268 10.4268C13.4737 10.3799 13.5 10.3163 13.5 10.25V2.75C13.5 2.6837 13.4737 2.62011 13.4268 2.57322C13.3799 2.52634 13.3163 2.5 13.25 2.5H2.75ZM1 2.75C1 1.784 1.784 1 2.75 1H13.25C14.216 1 15 1.784 15 2.75V10.25C15 10.7141 14.8156 11.1592 14.4874 11.4874C14.1592 11.8156 13.7141 12 13.25 12H9.06L6.487 14.573C6.28324 14.7767 6.02367 14.9153 5.74111 14.9715C5.45854 15.0277 5.16567 14.9988 4.8995 14.8886C4.63333 14.7784 4.40581 14.5917 4.24571 14.3522C4.08561 14.1127 4.0001 13.8311 4 13.543V12H2.75C2.28587 12 1.84075 11.8156 1.51256 11.4874C1.18437 11.1592 1 10.7141 1 10.25V2.75Z"></path></svg> Icon
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="mr-2 Counter">1.5K</span> Counter
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="Label mr-2">Label</span>
|
||||
<span class="Label mr-2 Label--red" >Danger</span>
|
||||
<span class="Label mr-2 Label--green" >Success</span>
|
||||
<span class="Label mr-2 Label--blue" >Info</span>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="mr-2 IssueLabel bg-pink text-white">IssueLabel</span>
|
||||
<span class="mr-2 IssueLabel IssueLabel--big bg-purple text-white">IssueLabel</span>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="State mr-2">Default</span>
|
||||
<span class="State State--green mr-2" title="Status: open">
|
||||
<!-- <%= octicon "git-pull-request" %> -->
|
||||
<svg class="octicon octicon-git-pull-request" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0"> <path fill-rule="evenodd" clip-rule="evenodd" d="M7.17674 3.07322L9.57318 0.676753C9.73068 0.51926 9.99996 0.630802 9.99996 0.853529V5.64642C9.99996 5.86915 9.73068 5.98069 9.57319 5.8232L7.17674 3.42677C7.07911 3.32914 7.07911 3.17085 7.17674 3.07322ZM3.75 2.5C3.33579 2.5 3 2.83579 3 3.25C3 3.66421 3.33579 4 3.75 4C4.16421 4 4.5 3.66421 4.5 3.25C4.5 2.83579 4.16421 2.5 3.75 2.5ZM1.5 3.25C1.5 2.00736 2.50736 1 3.75 1C4.99264 1 6 2.00736 6 3.25C6 4.22966 5.37389 5.06309 4.5 5.37197V10.628C5.37389 10.9369 6 11.7703 6 12.75C6 13.9926 4.99264 15 3.75 15C2.50736 15 1.5 13.9926 1.5 12.75C1.5 11.7703 2.12611 10.9369 3 10.628V5.37197C2.12611 5.06309 1.5 4.22966 1.5 3.25ZM11 2.5H10V4H11C11.5523 4 12 4.44772 12 5V10.628C11.1261 10.9369 10.5 11.7703 10.5 12.75C10.5 13.9926 11.5074 15 12.75 15C13.9926 15 15 13.9926 15 12.75C15 11.7703 14.3739 10.9369 13.5 10.628V5C13.5 3.61929 12.3807 2.5 11 2.5ZM12 12.75C12 12.3358 12.3358 12 12.75 12C13.1642 12 13.5 12.3358 13.5 12.75C13.5 13.1642 13.1642 13.5 12.75 13.5C12.3358 13.5 12 13.1642 12 12.75ZM3.75 12C3.33579 12 3 12.3358 3 12.75C3 13.1642 3.33579 13.5 3.75 13.5C4.16421 13.5 4.5 13.1642 4.5 12.75C4.5 12.3358 4.16421 12 3.75 12Z"></path></svg>
|
||||
Open
|
||||
</span>
|
||||
<span class="State State--red mr-2" title="Status: closed">
|
||||
<!-- <%= octicon "git-pull-request" %> -->
|
||||
<svg class="octicon octicon-git-pull-request" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0"> <path fill-rule="evenodd" clip-rule="evenodd" d="M7.17674 3.07322L9.57318 0.676753C9.73068 0.51926 9.99996 0.630802 9.99996 0.853529V5.64642C9.99996 5.86915 9.73068 5.98069 9.57319 5.8232L7.17674 3.42677C7.07911 3.32914 7.07911 3.17085 7.17674 3.07322ZM3.75 2.5C3.33579 2.5 3 2.83579 3 3.25C3 3.66421 3.33579 4 3.75 4C4.16421 4 4.5 3.66421 4.5 3.25C4.5 2.83579 4.16421 2.5 3.75 2.5ZM1.5 3.25C1.5 2.00736 2.50736 1 3.75 1C4.99264 1 6 2.00736 6 3.25C6 4.22966 5.37389 5.06309 4.5 5.37197V10.628C5.37389 10.9369 6 11.7703 6 12.75C6 13.9926 4.99264 15 3.75 15C2.50736 15 1.5 13.9926 1.5 12.75C1.5 11.7703 2.12611 10.9369 3 10.628V5.37197C2.12611 5.06309 1.5 4.22966 1.5 3.25ZM11 2.5H10V4H11C11.5523 4 12 4.44772 12 5V10.628C11.1261 10.9369 10.5 11.7703 10.5 12.75C10.5 13.9926 11.5074 15 12.75 15C13.9926 15 15 13.9926 15 12.75C15 11.7703 14.3739 10.9369 13.5 10.628V5C13.5 3.61929 12.3807 2.5 11 2.5ZM12 12.75C12 12.3358 12.3358 12 12.75 12C13.1642 12 13.5 12.3358 13.5 12.75C13.5 13.1642 13.1642 13.5 12.75 13.5C12.3358 13.5 12 13.1642 12 12.75ZM3.75 12C3.33579 12 3 12.3358 3 12.75C3 13.1642 3.33579 13.5 3.75 13.5C4.16421 13.5 4.5 13.1642 4.5 12.75C4.5 12.3358 4.16421 12 3.75 12Z"></path></svg>
|
||||
Closed
|
||||
</span>
|
||||
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<button class="mr-2 btn" type="button">Button</button>
|
||||
<button class="mr-2 btn btn-primary" type="button">Primary</button>
|
||||
<div class="my-2"></div>
|
||||
<button class="mr-2 btn btn-outline" type="button">Outline</button>
|
||||
<button class="mr-2 btn btn-danger" type="button">Danger</button>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<select class="form-select"><option>Select</option><option value="option 2">Option 2</option></select>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<input class="form-control" type="text" placeholder="Input" />
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<nav class="subnav d-inline-block v-align-middle mb-0">
|
||||
<a class="subnav-item" href="#url" aria-current="page">Filter 1</a>
|
||||
<a class="subnav-item" href="#url">Filter 2</a>
|
||||
</nav>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<div class="tabnav d-inline-block v-align-middle mb-0">
|
||||
<nav class="tabnav-tabs">
|
||||
<a class="tabnav-tab" href="#url" aria-current="page">Tab 1</a>
|
||||
<a class="tabnav-tab" href="#url">Tab 2</a>
|
||||
<a class="tabnav-tab" href="#url">Tab 3</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<nav class="UnderlineNav d-inline-block v-align-middle">
|
||||
<div class="UnderlineNav-body">
|
||||
<button class="UnderlineNav-item" type="button" role="tab" aria-selected="true">Nav 1</button>
|
||||
<button class="UnderlineNav-item" role="tab" type="button">Nav 2</button>
|
||||
<button class="UnderlineNav-item" role="tab" type="button">Nav 3</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<div class="flash">Flash alert</div>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<div class="Header">
|
||||
<div class="Header-item">
|
||||
<a href="#" class="Header-link f4 d-flex flex-items-center">
|
||||
<!-- <%= octicon "mark-github", class: "mr-2", height: 32 %> -->
|
||||
<svg height="32" class="octicon octicon-mark-github mr-2" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
|
||||
<span>Header</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div><!-- end dark -->
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Temporary overrides (don't use in production) -->
|
||||
<style> .frame-example { padding: 0 !important; } </style>
|
||||
<link href="https://unpkg.com/@github/details-dialog-element/dist/index.css" rel="stylesheet" />
|
||||
|
||||
```
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Labels
|
||||
path: components/labels
|
||||
path: stickersheet/labels
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/tree/master/src/labels'
|
||||
bundle: labels
|
||||
|
||||
95
docs/content/stickersheet/sizes.md
Normal file
95
docs/content/stickersheet/sizes.md
Normal file
@ -0,0 +1,95 @@
|
||||
---
|
||||
title: Sticker Sheet
|
||||
path: stickersheet/sizes
|
||||
---
|
||||
|
||||
### Sizes
|
||||
|
||||
```html live
|
||||
|
||||
<span class="d-inline-block col-1 text-gray-light">16px</span>
|
||||
<img class="mr-3 avatar avatar-1" src="https://avatars.githubusercontent.com/jonrohan?s=64" />
|
||||
<!-- <%= octicon "comment" %> -->
|
||||
<svg class="octicon octicon-comment" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M2.75 2.5C2.6837 2.5 2.62011 2.52634 2.57322 2.57322C2.52634 2.62011 2.5 2.6837 2.5 2.75V10.25C2.5 10.388 2.612 10.5 2.75 10.5H4.75C4.94891 10.5 5.13968 10.579 5.28033 10.7197C5.42098 10.8603 5.5 11.0511 5.5 11.25V13.44L8.22 10.72C8.36052 10.5793 8.55115 10.5002 8.75 10.5H13.25C13.3163 10.5 13.3799 10.4737 13.4268 10.4268C13.4737 10.3799 13.5 10.3163 13.5 10.25V2.75C13.5 2.6837 13.4737 2.62011 13.4268 2.57322C13.3799 2.52634 13.3163 2.5 13.25 2.5H2.75ZM1 2.75C1 1.784 1.784 1 2.75 1H13.25C14.216 1 15 1.784 15 2.75V10.25C15 10.7141 14.8156 11.1592 14.4874 11.4874C14.1592 11.8156 13.7141 12 13.25 12H9.06L6.487 14.573C6.28324 14.7767 6.02367 14.9153 5.74111 14.9715C5.45854 15.0277 5.16567 14.9988 4.8995 14.8886C4.63333 14.7784 4.40581 14.5917 4.24571 14.3522C4.08561 14.1127 4.0001 13.8311 4 13.543V12H2.75C2.28587 12 1.84075 11.8156 1.51256 11.4874C1.18437 11.1592 1 10.7141 1 10.25V2.75Z"></path></svg>
|
||||
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="d-inline-block col-1 text-gray-light">20px</span>
|
||||
<img class="mr-3 avatar avatar-2" src="https://avatars.githubusercontent.com/jonrohan?s=64" />
|
||||
<span class="mr-3 Label">Label</span>
|
||||
<span class="mr-3 IssueLabel bg-pink text-white">IssueLabel</span>
|
||||
<span class="mr-3 Counter">1.5K</span>
|
||||
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="d-inline-block col-1 text-gray-light">24px</span>
|
||||
<img class="mr-3 avatar avatar-3" src="https://avatars.githubusercontent.com/jonrohan?s=64" />
|
||||
<span class="mr-3 Label Label--large">Label</span>
|
||||
<span class="mr-3 IssueLabel IssueLabel--big bg-purple text-white">IssueLabel</span>
|
||||
<span class="mr-3 State State--small">State</span>
|
||||
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="d-inline-block col-1 text-gray-light">28px</span>
|
||||
<img class="mr-3 avatar avatar-4" src="https://avatars.githubusercontent.com/jonrohan?s=64" />
|
||||
<button class="mr-3 btn btn-sm" type="button">Button</button>
|
||||
<input class="mr-3 form-control input-sm" type="text" placeholder="Input" />
|
||||
<select class="mr-3 form-select select-sm"><option>Select</option><option value="option 2">Option 2</option></select>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="d-inline-block col-1 text-gray-light">32px</span>
|
||||
<img class="mr-3 avatar avatar-5" src="https://avatars.githubusercontent.com/jonrohan?s=64" />
|
||||
<button class="mr-3 btn" type="button">Button</button>
|
||||
<input class="mr-3 form-control" type="text" placeholder="Input" />
|
||||
<select class="mr-3 form-select"><option>Select</option><option value="option 2">Option 2</option></select>
|
||||
<nav class="mr-3 subnav d-inline-block v-align-middle mb-0">
|
||||
<a class="subnav-item" href="#url" aria-current="page">Filter 1</a>
|
||||
<a class="subnav-item" href="#url">Filter 2</a>
|
||||
</nav>
|
||||
<span class="mr-3 State">State</span>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="d-inline-block col-1 text-gray-light">40px</span>
|
||||
<img class="mr-3 avatar avatar-6" src="https://avatars.githubusercontent.com/jonrohan?s=80" />
|
||||
<div class="mr-3 tabnav d-inline-block v-align-middle mb-0">
|
||||
<nav class="tabnav-tabs">
|
||||
<a class="tabnav-tab" href="#url" aria-current="page">Tab 1</a>
|
||||
<a class="tabnav-tab" href="#url">Tab 2</a>
|
||||
<a class="tabnav-tab" href="#url">Tab 3</a>
|
||||
<a class="tabnav-tab" href="#url">Tab 4</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="d-inline-block col-1 text-gray-light">48px</span>
|
||||
<img class="mr-3 avatar avatar-7" src="https://avatars.githubusercontent.com/jonrohan?s=96" />
|
||||
<nav class="mr-3 UnderlineNav d-inline-block v-align-middle">
|
||||
<div class="UnderlineNav-body">
|
||||
<button class="UnderlineNav-item" type="button" role="tab" aria-selected="true">Nav 1</button>
|
||||
<button class="UnderlineNav-item" role="tab" type="button">Nav 2</button>
|
||||
<button class="UnderlineNav-item" role="tab" type="button">Nav 3</button>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="mr-3 flash d-inline-block v-align-middle">Flash alert</div>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="d-inline-block col-1 text-gray-light">64px</span>
|
||||
<img class="mr-3 avatar avatar-8" src="https://avatars.githubusercontent.com/jonrohan?s=128" />
|
||||
<div class="mr-3 Header d-inline-block v-align-middle">
|
||||
<div class="Header-item">
|
||||
<a href="#" class="Header-link f4 d-flex flex-items-center">
|
||||
<!-- <%= octicon "mark-github", class: "mr-2", height: 32 %> -->
|
||||
<svg height="32" class="octicon octicon-mark-github mr-2" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
|
||||
<span>Header</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
@ -1,31 +1,88 @@
|
||||
---
|
||||
title: Color system
|
||||
description: 'Sass variables, mixins, and functions for use in our components.'
|
||||
status: Deprecated
|
||||
status: New
|
||||
source: 'https://github.com/primer/css/blob/master/src/support/variables/color-system.scss'
|
||||
bundle: support
|
||||
---
|
||||
|
||||
import colors from 'primer-colors'
|
||||
import {Box, Flex, Heading, Link, StyledOcticon} from '@primer/components'
|
||||
import {Link as LinkIcon} from '@primer/octicons-react'
|
||||
import {palettes, variables} from '../../src/color-variables'
|
||||
import {PaletteTable, PaletteCell, overlayColor} from '../../src/color-system'
|
||||
import lightColors from '@primer/primitives/dist/js/colors/light'
|
||||
import {Flash, Box, Flex, Heading, Link, StyledOcticon} from '@primer/components'
|
||||
import {LinkIcon, OctofaceIcon} from '@primer/octicons-react'
|
||||
import {colorModes, palettes, functionalVarNames, flattened} from '../../src/color-variables'
|
||||
import {PaletteTable, PaletteCell, ColorModeTable, CSSModeVars, overlayColor} from '../../src/color-system'
|
||||
|
||||
> ⚠️ GitHub employees only! These color variables are deprecated and will be replaced at some point. On "_dotcom_" please use the [new functional variables](https://primer-css-git-mkt-color-modes-docs.primer.now.sh/css/support/color-system).
|
||||
<Note>
|
||||
Please note Primer v16 has changed the naming of these color classes. Check the <a href="/css/support/v16-migration">migration guide</a> to make sure your app is up to date.
|
||||
</Note>
|
||||
|
||||
> Also take a look at the [migration guide](https://primer-css-git-mkt-color-modes-docs.primer.now.sh/css/support/v16-migration) when replacing existing colors.
|
||||
## Functional variables
|
||||
|
||||
---
|
||||
The Primer color system contains multiple color modes; currently, Primer ships with a light mode and a dark mode. Each color mode comes with a set of CSS variables that can be used to style elements based on the functionality of the element. These should be used instead of specifying colors directly so that the colors adapt correctly when switching between color modes.
|
||||
|
||||
When at all possible, favor using [color utility classes](/utilities/colors) over using custom CSS to set colors. Because the new Primer CSS color system is based on *functional* colors, you should only use colors designed for the element you're applying them to. For example, text colors, which start with `--color-text-`, should not be used for icons, backgrounds, or any other non-text element.
|
||||
|
||||
### Text
|
||||
|
||||
<CSSModeVars
|
||||
modes={colorModes}
|
||||
vars={functionalVarNames}
|
||||
filter={/^text-/}
|
||||
render={variable => {
|
||||
return <span style={{color: `var(--color-${variable})`}}>--color-{variable}</span>
|
||||
}}
|
||||
/>
|
||||
|
||||
### Icons
|
||||
|
||||
<CSSModeVars
|
||||
modes={colorModes}
|
||||
vars={functionalVarNames}
|
||||
filter={/^icon-(?!folder)/}
|
||||
render={variable => {
|
||||
return <><span style={{color: `var(--color-${variable})`}}><StyledOcticon icon={OctofaceIcon} /></span> --color-{variable}</>
|
||||
}}
|
||||
/>
|
||||
|
||||
### Borders
|
||||
|
||||
<CSSModeVars
|
||||
modes={colorModes}
|
||||
vars={functionalVarNames}
|
||||
filter={/^border-/}
|
||||
render={variable => {
|
||||
return <div style={{border: `2px solid var(--color-${variable})`, marginBottom: 10, padding: 4}}>--color-{variable}</div>
|
||||
}}
|
||||
/>
|
||||
|
||||
### Backgrounds
|
||||
|
||||
<CSSModeVars
|
||||
modes={colorModes}
|
||||
vars={functionalVarNames}
|
||||
filter={/^bg-/}
|
||||
render={variable => {
|
||||
return <Flex mb={1}><div style={{
|
||||
background: `var(--color-${variable})`,
|
||||
height: 20,
|
||||
width: 20,
|
||||
display: 'inline-block',
|
||||
border: '1px solid var(--color-border-primary)',
|
||||
marginRight: 10
|
||||
}} />--color-{variable}</Flex>
|
||||
}}
|
||||
/>
|
||||
|
||||
### Other variables
|
||||
|
||||
For a list of *all* functional variables, including app- and component-specific variables, see [this reference page](https://primer.style/primitives/).
|
||||
|
||||
## Color palette
|
||||
|
||||
In rare ocassions, it may be necessary to use one of the variables from the base color scale, though since the colors differ in the various color modes, the functional variables listed above should be used in almost all normal cases.
|
||||
|
||||
<Flex flexWrap="wrap" mr={-2}>
|
||||
{palettes
|
||||
.concat(
|
||||
{title: 'Black', name: 'black', value: colors.gray[9]},
|
||||
{title: 'White', name: 'white', value: colors.white, props: {className: 'border'}}
|
||||
)
|
||||
.map(({name, title, value, props = {}}) => (
|
||||
<Flex.Item
|
||||
as={Link}
|
||||
@ -45,11 +102,11 @@ import {PaletteTable, PaletteCell, overlayColor} from '../../src/color-system'
|
||||
))}
|
||||
</Flex>
|
||||
|
||||
## Color variables
|
||||
### Color variables
|
||||
|
||||
<Flex flexWrap="wrap" mr={[0, 0, -4]}>
|
||||
{palettes.map(({name, title, value, values}) => (
|
||||
<Flex id={name} flexDirection="column" width={[1, 1, 1 / 2]} pr={[0, 0, 4]} mb={4}>
|
||||
<Flex id={name} flexDirection="column" width={1} pr={0} mb={4} key={name}>
|
||||
<Flex
|
||||
as={Link}
|
||||
href={`#${name}`}
|
||||
@ -67,10 +124,9 @@ import {PaletteTable, PaletteCell, overlayColor} from '../../src/color-system'
|
||||
</Flex.Item>
|
||||
<StyledOcticon icon={LinkIcon} color="inherit !important" height={20} />
|
||||
</Flex>
|
||||
<PaletteTable
|
||||
columns={['variable', 'value']}
|
||||
values={[{variable: name, value, slug: name}].concat(values)}
|
||||
hasHeader={false}
|
||||
<ColorModeTable
|
||||
baseColor={value}
|
||||
values={values}
|
||||
cellPadding="8px 16px"
|
||||
/>
|
||||
</Flex>
|
||||
|
||||
309
docs/content/support/v16-migration.mdx
Normal file
309
docs/content/support/v16-migration.mdx
Normal file
@ -0,0 +1,309 @@
|
||||
---
|
||||
title: Primer v16 Migration Guide
|
||||
description: 'Guide for migrating to version 16.0.0 of Primer'
|
||||
---
|
||||
|
||||
Primer v16.0.0 introduces the idea of _color modes_ and _functional variables_. A color mode defines a set of colors in the Primer system that differs from that of other color modes. Currently, Primer ships with a light mode and a dark mode.
|
||||
|
||||
Because colors differ in each color mode, it doesn't make sense to try to make an element a specific color; instead, Primer now applies colors based on the function of an element using functional variables. As a result, the Sass color variables that existed in Primer prior to version 16.0.0 have been replaced with functional CSS variables. These variables have different values depending on the current color mode. For a list of the new functional CSS color variables, see [the color system page](/support/color-system). The color utility classes have also been updated to match; see [the color utilities page](/utilities/colors) for more information.
|
||||
|
||||
## Migration guide
|
||||
|
||||
### Components
|
||||
|
||||
Most components don't need to be updated and should work without making changes. But some of the componets that use presentational class names now use functional class names.
|
||||
|
||||
#### Buttons
|
||||
|
||||
| `v15` | `v16` |
|
||||
| ----------- | ----- |
|
||||
| `.btn-blue` | n/a |
|
||||
|
||||
#### Counters
|
||||
|
||||
| [`v15`](https://primer.style/css/components/labels#counters) | `v16` |
|
||||
| ------------------------------------------------------------ | --------------------- |
|
||||
| `.Counter--gray` | `.Counter--primary` |
|
||||
| `.Counter--gray-light` | `.Counter--secondary` |
|
||||
|
||||
#### Dropdwon
|
||||
|
||||
| [`v15`](https://primer.style/css/components/dropdown#dark) | `v16` |
|
||||
| ---------------------------------------------------------- | ----- |
|
||||
| `.dropdown-menu-dark` | n/a |
|
||||
|
||||
#### Labels
|
||||
|
||||
| [`v15`](https://primer.style/css/components/labels) | `v16` |
|
||||
| --------------------------------------------------- | ------------------- |
|
||||
| `.Label--gray-darker` | `.Label--primary` |
|
||||
| `.Label--gray` | `.Label--secondary` |
|
||||
| `.Label--blue` | `.Label--info` |
|
||||
| `.Label--green` | `.Label--success` |
|
||||
| `.Label--yellow` | `.Label--warning` |
|
||||
| `.Label--red` | `.Label--danger` |
|
||||
| `.Label--orange` | n/a |
|
||||
| `.Label--purple` | n/a |
|
||||
| `.Label--pink` | n/a |
|
||||
|
||||
#### States
|
||||
|
||||
| [`v15`](https://primer.style/css/components/labels#states) | `v16` |
|
||||
| ---------------------------------------------------------- | ---------------- |
|
||||
| n/a | `.State--draft` |
|
||||
| `.State--green` | `.State--open` |
|
||||
| `.State--purple` | `.State--merged` |
|
||||
| `.State--red` | `.State--closed` |
|
||||
|
||||
### Utility classes
|
||||
|
||||
See [the color utility classes page](/utilities/colors) for a list of all the functional color utility classes.
|
||||
|
||||
#### Text
|
||||
|
||||
| [`v15`](https://primer.style/css/utilities/colors#text-color-utilities) | `v16` |
|
||||
| ----------------------------------------------------------------------- | ----------------------- |
|
||||
| `.text-gray-dark` | `.color-text-primary` |
|
||||
| `.text-gray` | `.color-text-secondary` |
|
||||
| `.text-gray-light` | `.color-text-tertiary` |
|
||||
| `.text-blue` | `.color-text-link` |
|
||||
| `.text-green` | `.color-text-success` |
|
||||
| `.text-yellow` | `.color-text-warning` |
|
||||
| `.text-red` | `.color-text-danger` |
|
||||
| `.text-white` | `.color-text-white` |
|
||||
| n/a | `.color-text-inverse` |
|
||||
| `.text-black` | n/a |
|
||||
| `.text-orange` | n/a |
|
||||
| `.text-orange-light` | n/a |
|
||||
| `.text-purple` | n/a |
|
||||
| `.text-pink` | n/a |
|
||||
|
||||
#### Icon
|
||||
|
||||
| `v15` | `v16` |
|
||||
| ----- | ----------------------- |
|
||||
| n/a | `.color-icon-primary` |
|
||||
| n/a | `.color-icon-secondary` |
|
||||
| n/a | `.color-icon-tertiary` |
|
||||
| n/a | `.color-icon-info` |
|
||||
| n/a | `.color-icon-success` |
|
||||
| n/a | `.color-icon-warning` |
|
||||
| n/a | `.color-icon-danger` |
|
||||
|
||||
#### Border
|
||||
|
||||
| [`v15`](https://primer.style/css/utilities/borders#border-color-utilities) | `v16` |
|
||||
| -------------------------------------------------------------------------- | ------------------------- |
|
||||
| `.border-gray` | `.color-border-primary` |
|
||||
| `.border-gray-light` | `.color-border-secondary` |
|
||||
| `.border-gray-dark` | `.color-border-tertiary` |
|
||||
| `.border-blue` | `.color-border-info` |
|
||||
| `.border-green` | `.color-border-success` |
|
||||
| `.border-yellow` | `.color-border-warning` |
|
||||
| `.border-red` | `.color-border-danger` |
|
||||
| `.border-white` | `.color-border-inverse` |
|
||||
| n/a | `.color-border-overlay` |
|
||||
| `.border-gray-darker` | n/a |
|
||||
| `.border-blue-light` | n/a |
|
||||
| `.border-red-light` | n/a |
|
||||
| `.border-purple` | n/a |
|
||||
| `.border-black-fade` | n/a |
|
||||
| `.border-white-fade` | n/a |
|
||||
| `.border-white-fade-15` | n/a |
|
||||
| `.border-white-fade-30` | n/a |
|
||||
| `.border-white-fade-50` | n/a |
|
||||
| `.border-white-fade-70` | n/a |
|
||||
| `.border-white-fade-85` | n/a |
|
||||
|
||||
#### Background
|
||||
|
||||
| [`v15`](https://primer.style/css/utilities/colors#background-utilities) | `v16` |
|
||||
| ----------------------------------------------------------------------- | --------------------------- |
|
||||
| `.bg-white` | `.color-bg-primary` |
|
||||
| `.bg-gray-light` | `.color-bg-secondary` |
|
||||
| `.bg-gray` | `.color-bg-tertiary` |
|
||||
| `.bg-gray-dark` | `.color-bg-canvas-inverse` |
|
||||
| `.bg-blue-light` | `.color-bg-info` |
|
||||
| `.bg-blue` | `.color-bg-info-inverse` |
|
||||
| `.bg-green-light` | `.color-bg-success` |
|
||||
| `.bg-green` | `.color-bg-success-inverse` |
|
||||
| `.bg-yellow-light` | `.color-bg-warning` |
|
||||
| `.bg-yellow` | `.color-bg-warning-inverse` |
|
||||
| `.bg-red-light` | `.color-bg-danger` |
|
||||
| `.bg-red` | `.color-bg-danger-inverse` |
|
||||
| n/a | `.color-bg-canvas` |
|
||||
| n/a | `.color-bg-canvas-inset` |
|
||||
| n/a | `.color-bg-overlay` |
|
||||
| `.bg-purple-light` | n/a |
|
||||
| `.bg-purple` | n/a |
|
||||
| `.bg-yellow-dark` | n/a |
|
||||
| `.bg-orange` | n/a |
|
||||
| `.bg-pink` | n/a |
|
||||
|
||||
#### Shadow
|
||||
|
||||
| `v15` | `v16` |
|
||||
| ------------------------- | --------------------------- |
|
||||
| `.box-shadow` | `.color-shadow-small` |
|
||||
| `.box-shadow-medium` | `.color-shadow-medium` |
|
||||
| `.box-shadow-large` | `.color-shadow-large` |
|
||||
| `.box-shadow-extra-large` | `.color-shadow-extra-large` |
|
||||
|
||||
#### Link
|
||||
|
||||
The `link` utilities are part of the `Link` component.
|
||||
|
||||
| [`v15`](https://primer.style/css/utilities/colors##link-colors) | `v16` |
|
||||
| --------------------------------------------------------------- | ------------------ |
|
||||
| `.link-gray-dark` | `.Link--primary` |
|
||||
| `.link-gray` | `.Link--secondary` |
|
||||
| `.muted-link` | `.Link--muted` |
|
||||
| `.link-hover-blue` | `.Link--onHover` |
|
||||
| n/a | `.Link` |
|
||||
|
||||
### Mixins
|
||||
|
||||
| `v15` | `v16` |
|
||||
| --------------- | ----- |
|
||||
| `btn-solid()` | n/a |
|
||||
| `btn-inverse()` | n/a |
|
||||
| `btn-outline()` | n/a |
|
||||
|
||||
### Variables
|
||||
|
||||
See [the color system page](/support/color-system) for a list of all the functional CSS variables.
|
||||
|
||||
#### Text
|
||||
|
||||
| `v15` | `v16` |
|
||||
| ------------------------------------ | ------------------------------- |
|
||||
| `$text-gray-dark` (`$gray-900`) | `var(--color-text-primary)` |
|
||||
| `$text-gray` (`$gray-600`) | `var(--color-text-secondary)` |
|
||||
| `$text-gray-light` (`$gray-500`) | `var(--color-text-tertiary)` |
|
||||
| `$text-blue` (`$blue-500`) | `var(--color-text-link)` |
|
||||
| `$text-green` (`$green-600`) | `var(--color-text-success)` |
|
||||
| `$text-red` (`$red-600`) | `var(--color-text-danger)` |
|
||||
| `$text-yellow` (`$yellow-800`) | `var(--color-text-warning)` |
|
||||
| `$text-white` (`$white`) | `var(--color-text-white)` |
|
||||
| n/a | `var(--color-text-inverse)` |
|
||||
| n/a | `var(--color-text-placeholder)` |
|
||||
| n/a | `var(--color-text-disabled)` |
|
||||
| `$text-black` (`$black`) | n/a |
|
||||
| `$text-orange` (`$orange-900`) | n/a |
|
||||
| `$text-orange-light` (`$orange-600`) | n/a |
|
||||
| `$text-purple` (`$purple-500`) | n/a |
|
||||
| `$text-pink` (`$pink-500`) | n/a |
|
||||
|
||||
#### Icon
|
||||
|
||||
| `v15` | `v16` |
|
||||
| ----- | ----------------------------- |
|
||||
| n/a | `var(--color-icon-primary)` |
|
||||
| n/a | `var(--color-icon-secondary)` |
|
||||
| n/a | `var(--color-icon-tertiary)` |
|
||||
| n/a | `var(--color-icon-info)` |
|
||||
| n/a | `var(--color-icon-danger)` |
|
||||
| n/a | `var(--color-icon-success)` |
|
||||
| n/a | `var(--color-icon-warning)` |
|
||||
|
||||
#### Border
|
||||
|
||||
| `v15` | `v16` |
|
||||
| ----------------------------------------------------- | ------------------------------- |
|
||||
| `$border-color` (`$gray-200`) | `var(--color-border-primary)` |
|
||||
| `$border-gray` (`$gray-200`) | `var(--color-border-primary)` |
|
||||
| `$border-gray-light` (`lighten($gray-200, 3%)`) | `var(--color-border-secondary)` |
|
||||
| `$border-gray-dark` (`$gray-300`) | `var(--color-border-tertiary)` |
|
||||
| `$border-white` (`$white`) | `var(--color-border-inverse)` |
|
||||
| `$border-blue` (`$blue-500`) | `var(--color-border-info)` |
|
||||
| `$border-green` (`$green-400`) | `var(--color-border-success)` |
|
||||
| `$border-red` (`$red-500`) | `var(--color-border-danger)` |
|
||||
| `$border-yellow` (`$yellow-600`) | `var(--color-border-warning)` |
|
||||
| n/a | `var(--color-border-overlay)` |
|
||||
| `$border-gray-darker` (`$gray-700`) | n/a |
|
||||
| `$border-blue-light` (`$blue-200`) | n/a |
|
||||
| `$border-red-light` (`$red-300`) | n/a |
|
||||
| `$border-purple` (`$purple-500`) | n/a |
|
||||
| `$border-black-fade` (`$black-fade-15`) | n/a |
|
||||
| `$border-white-fade` (`$white-fade-15`) | n/a |
|
||||
| `$border-green-light` (`desaturate($green-300, 40%)`) | n/a |
|
||||
|
||||
#### Background
|
||||
|
||||
| `v15` | `v16` |
|
||||
| ----------------------------------- | --------------------------------- |
|
||||
| `$bg-white` (`$white`) | `var(--color-bg-primary)` |
|
||||
| `$bg-gray-light` (`$gray-000`) | `var(--color-bg-secondary)` |
|
||||
| `$bg-gray` (`$gray-100`) | `var(--color-bg-tertiary)` |
|
||||
| `$bg-gray-dark` (`$gray-900`) | `var(--color-bg-canvas-inverse)` |
|
||||
| `$bg-red` (`$red-500`) | `var(--color-bg-danger-inverse)` |
|
||||
| `$bg-red-light` (`$red-000`) | `var(--color-bg-danger)` |
|
||||
| `$bg-green` (`$green-500`) | `var(--color-bg-success-inverse)` |
|
||||
| `$bg-green-light` (`$green-100`) | `var(--color-bg-success)` |
|
||||
| `$bg-blue` (`$blue-500`) | `var(--color-bg-info-inverse)` |
|
||||
| `$bg-blue-light` (`$blue-000`) | `var(--color-bg-info)` |
|
||||
| `$bg-yellow` (`$yellow-500`) | `var(--color-bg-warning-inverse)` |
|
||||
| `$bg-yellow-light` (`$yellow-200`) | `var(--color-bg-warning)` |
|
||||
| n/a | `var(--color-bg-canvas)` |
|
||||
| n/a | `var(--color-bg-canvas-inset)` |
|
||||
| n/a | `var(--color-bg-overlay)` |
|
||||
| `$bg-black` (`$black`) | n/a |
|
||||
| `$bg-black-fade` (`$black-fade-50`) | n/a |
|
||||
| `$bg-orange` (`$orange-700`) | n/a |
|
||||
| `$bg-purple` (`$purple-500`) | n/a |
|
||||
| `$bg-purple-light` (`$purple-000`) | n/a |
|
||||
| `$bg-pink` (`$pink-500`) | n/a |
|
||||
| `$bg-yellow-dark` (`$yellow-700`) | n/a |
|
||||
|
||||
#### Shadow
|
||||
|
||||
| `v15` | `v16` |
|
||||
| ------------------------- | --------------------------------- |
|
||||
| `$box-shadow` | `var(--color-shadow-small)` |
|
||||
| `$box-shadow-medium` | `var(--color-shadow-medium)` |
|
||||
| `$box-shadow-large` | `var(--color-shadow-large)` |
|
||||
| `$box-shadow-extra-large` | `var(--color-shadow-extra-large)` |
|
||||
| `$box-shadow-highlight` | `var(--color-shadow-highlight)` |
|
||||
| `$box-shadow-inset` | `var(--color-shadow-inset)` |
|
||||
| `$box-shadow-focus` | `var(--color-state-focus-shadow)` |
|
||||
|
||||
### Color System
|
||||
|
||||
| `v15` | `v16` |
|
||||
| ----------- | --------------------------- |
|
||||
| `$black` | `var(--color-scale-black)` |
|
||||
| `$white` | `var(--color-scale-white)` |
|
||||
| `$gray-000` | `var(--color-scale-gray-0)` |
|
||||
| `$gray-100` | `var(--color-scale-gray-1)` |
|
||||
| `$gray-200` | `var(--color-scale-gray-2)` |
|
||||
| ... | ... |
|
||||
| `$pink-700` | `var(--color-scale-pink-7)` |
|
||||
| `$pink-800` | `var(--color-scale-pink-8)` |
|
||||
| `$pink-900` | `var(--color-scale-pink-9)` |
|
||||
|
||||
### Auto colors
|
||||
|
||||
| `v15` | `v16` |
|
||||
| ----- | -------------------------- |
|
||||
| n/a | `var(--color-auto-black)` |
|
||||
| n/a | `var(--color-auto-white)` |
|
||||
| n/a | `var(--color-auto-gray-0)` |
|
||||
| n/a | `var(--color-auto-gray-1)` |
|
||||
| n/a | `var(--color-auto-gray-2)` |
|
||||
| ... | ... |
|
||||
| n/a | `var(--color-auto-pink-7)` |
|
||||
| n/a | `var(--color-auto-pink-8)` |
|
||||
| n/a | `var(--color-auto-pink-9)` |
|
||||
|
||||
Note: The `auto` colors automatically inverse based on the color mode. Example:
|
||||
|
||||
| Variable | In `light` mode | In `dark` mode |
|
||||
| -------------------------- | --------------- | -------------- |
|
||||
| `var(--color-auto-gray-0)` | light gray | dark gray |
|
||||
| `var(--color-auto-gray-9)` | dark gray | light gray |
|
||||
|
||||
It doesn't always work perfectly, therefore functional variables should be used as much as possible. But in some cases auto colors can still be handy.
|
||||
|
||||
### Misc
|
||||
|
||||
There are a few more selectors and variables that got removed. Please refer to [deprecations.js](https://github.com/primer/css/blob/master/deprecations.js) for a complete list.
|
||||
@ -1,18 +1,11 @@
|
||||
---
|
||||
title: Variables
|
||||
path: support/variables
|
||||
status: Experimental
|
||||
bundle: alerts
|
||||
status: Stable
|
||||
---
|
||||
|
||||
import {Variables, DeprecationIcon} from '../../src/variables'
|
||||
|
||||
> ⚠️ GitHub employees only! These color variables are deprecated and will be replaced at some point. On "_dotcom_" please use the [new functional variables](https://primer-css-git-mkt-color-modes-docs.primer.now.sh/css/support/color-system).
|
||||
|
||||
> Also take a look at the [migration guide](https://primer-css-git-mkt-color-modes-docs.primer.now.sh/css/support/v16-migration) when replacing existing colors.
|
||||
|
||||
---
|
||||
|
||||
<Variables>
|
||||
|
||||
The tables below list all of the global SCSS variables defined in [the `support/variables` directory](https://github.com/primer/css/tree/master/src/support/variables).
|
||||
|
||||
@ -19,7 +19,7 @@ This method requires no dev environment set up and is useful for when you want t
|
||||
<head>
|
||||
<title></title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="stylesheet" href="https://unpkg.com/@primer/css/dist/primer.css" />
|
||||
<link rel="stylesheet" href="https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" />
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
|
||||
@ -97,3 +97,12 @@ The `.hover-grow` class will increase the scale of the element upon hover.
|
||||
<svg height="32" class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Rotation
|
||||
|
||||
The `.anim-rotate` class will rotate the element indefinitely around the coordinate specified by `transform-origin`. Most elements have a default of `transform-origin: 50% 50%` and will rotate around the center.
|
||||
|
||||
```html live
|
||||
<!-- <%= octicon("mark-github",:height => 32, :class => "anim-rotate") %> -->
|
||||
<svg height="32" class="octicon octicon-mark-github anim-rotate" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
|
||||
```
|
||||
|
||||
@ -7,9 +7,6 @@ source: 'https://github.com/primer/css/tree/master/src/utilities/borders.scss'
|
||||
bundle: utilities
|
||||
---
|
||||
|
||||
import {palettes, borders} from '../../src/color-variables'
|
||||
import {PaletteTable, PaletteCell, PaletteValue} from '../../src/color-system'
|
||||
|
||||
Utilities for borders, and border radius.
|
||||
|
||||
## Default border
|
||||
@ -55,105 +52,6 @@ Remove borders from all sides or a single side with `.border-0`, `.border-top-0`
|
||||
</div>
|
||||
```
|
||||
|
||||
## Border colors
|
||||
|
||||
Override default border colors with blue, green, red, purple, yellow, and gray border color utilities.
|
||||
|
||||
```html live
|
||||
<div class="border border-blue mb-2">
|
||||
.border-blue
|
||||
</div>
|
||||
<div class="border border-blue-light mb-2">
|
||||
.border-blue-light
|
||||
</div>
|
||||
<div class="border border-green mb-2">
|
||||
.border-green
|
||||
</div>
|
||||
<div class="border border-green-light mb-2">
|
||||
.border-green-light
|
||||
</div>
|
||||
<div class="border border-red mb-2">
|
||||
.border-red
|
||||
</div>
|
||||
<div class="border border-red-light mb-2">
|
||||
.border-red-light
|
||||
</div>
|
||||
<div class="border border-purple mb-2">
|
||||
.border-purple
|
||||
</div>
|
||||
<div class="border border-yellow mb-2">
|
||||
.border-yellow
|
||||
</div>
|
||||
<div class="border border-gray-light mb-2">
|
||||
.border-gray-light
|
||||
</div>
|
||||
<div class="border border-gray-dark mb-2">
|
||||
.border-gray-dark
|
||||
</div>
|
||||
```
|
||||
|
||||
### Borders with alpha transparency
|
||||
|
||||
Use `border-black-fade` to add an rgba black border with an alpha transparency of `0.15`. This is useful when you want a border that tints the background color. The shade of black we use matches the hue of the GitHub dark header and our gray color palette: `rgba(27,31,35, 0.15)`.
|
||||
|
||||
```html live
|
||||
<div class="border border-black-fade bg-blue-light p-2 mb-2">
|
||||
.border-black-fade .bg-blue-light
|
||||
</div>
|
||||
<div class="border border-black-fade bg-red-light p-2 mb-2">
|
||||
.border-black-fade .bg-red-light
|
||||
</div>
|
||||
```
|
||||
|
||||
On dark backgrounds use `border-white-fade` instead. It adds an rgba white border with an alpha transparency of `0.15`.
|
||||
|
||||
```html live
|
||||
<div class="bg-gray-dark text-white p-3">
|
||||
<div class="border border-white-fade p-2">
|
||||
.border-white-fade
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Use `.border-white-fade-xx` to add a white border with various levels of alpha transparency.
|
||||
|
||||
```html live
|
||||
<div class="bg-gray-dark text-white p-3 mb-3">
|
||||
<div class="border-bottom border-white-fade-15 p-2 mb-2">
|
||||
.border-white-fade-15
|
||||
</div>
|
||||
<div class="border-bottom border-white-fade-30 p-2 mb-2">
|
||||
.border-white-fade-30
|
||||
</div>
|
||||
<div class="border-bottom border-white-fade-50 p-2 mb-2">
|
||||
.border-white-fade-50
|
||||
</div>
|
||||
<div class="border-bottom border-white-fade-70 p-2 mb-2">
|
||||
.border-white-fade-70
|
||||
</div>
|
||||
<div class="border-bottom border-white-fade-85 p-2 mb-2">
|
||||
.border-white-fade-85
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-blue text-white p-3">
|
||||
<div class="border-bottom border-white-fade-15 p-2 mb-2">
|
||||
.border-white-fade-15
|
||||
</div>
|
||||
<div class="border-bottom border-white-fade-30 p-2 mb-2">
|
||||
.border-white-fade-30
|
||||
</div>
|
||||
<div class="border-bottom border-white-fade-50 p-2 mb-2">
|
||||
.border-white-fade-50
|
||||
</div>
|
||||
<div class="border-bottom border-white-fade-70 p-2 mb-2">
|
||||
.border-white-fade-70
|
||||
</div>
|
||||
<div class="border-bottom border-white-fade-85 p-2 mb-2">
|
||||
.border-white-fade-85
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Border style
|
||||
|
||||
Use `border-dashed` to give an element a dashed border.
|
||||
@ -221,6 +119,11 @@ You can adjust border widths on all sides or each side individually with respons
|
||||
</div>
|
||||
```
|
||||
|
||||
## Border colors
|
||||
|
||||
Border colors are documented on the [colors utilities page](../utilities/colors#border-colors).
|
||||
|
||||
<!-- TODO: Remove?
|
||||
## Border color utilities
|
||||
|
||||
<PaletteTable
|
||||
@ -233,3 +136,4 @@ You can adjust border widths on all sides or each side individually with respons
|
||||
]}
|
||||
style={{borderSpacing: '0 4px'}}
|
||||
/>
|
||||
-->
|
||||
|
||||
@ -7,15 +7,19 @@ source: 'https://github.com/primer/css/tree/master/src/utilities/box-shadow.scss
|
||||
bundle: utilities
|
||||
---
|
||||
|
||||
<Note>
|
||||
Please note Primer v16 has changed the naming of these color classes. Check the <a href="/css/support/v16-migration">migration guide</a> to make sure your app is up to date.
|
||||
</Note>
|
||||
|
||||
Box shadows are used to make content appear elevated. They are typically applied to containers of content that users need to pay attention to or content that appears on top of (overlapping) other elements on the page (like a pop-over or modal).
|
||||
|
||||
## Default
|
||||
## Small
|
||||
|
||||
Default shadows are mainly used on things that need to appear slightly elevated, like pricing cards or UI elements containing important information.
|
||||
Small shadows are mainly used on things that need to appear slightly elevated, like pricing cards or UI elements containing important information.
|
||||
|
||||
```html live
|
||||
<div class="box-shadow p-3">
|
||||
.box-shadow
|
||||
<div class="color-shadow-small p-3">
|
||||
.color-shadow-small
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -23,7 +27,7 @@ These types of shadows are typically applied to elements with borders, such as t
|
||||
|
||||
```html live
|
||||
<div class="col-6">
|
||||
<div class="Box box-shadow">
|
||||
<div class="Box color-shadow-small">
|
||||
<div class="Box-row">
|
||||
<h3 class="m-0">Organization</h3>
|
||||
</div>
|
||||
@ -47,8 +51,8 @@ These types of shadows are typically applied to elements with borders, such as t
|
||||
Medium box shadows are more diffused and slightly larger than small box shadows.
|
||||
|
||||
```html live
|
||||
<div class="box-shadow-medium p-3">
|
||||
.box-shadow-medium
|
||||
<div class="color-shadow-medium p-3">
|
||||
.color-shadow-medium
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -56,7 +60,7 @@ Medium box shadows are typically used on editorialized content that needs to app
|
||||
|
||||
```html live
|
||||
<div class="col-6">
|
||||
<a class="d-block box-shadow-medium px-3 pt-4 pb-6 position-relative rounded-1 overflow-hidden no-underline" href="#">
|
||||
<a class="d-block color-shadow-medium px-3 pt-4 pb-6 position-relative rounded-1 overflow-hidden no-underline" href="#">
|
||||
<div class="bg-blue position-absolute top-0 left-0 py-1 width-full"></div>
|
||||
<h3 class="text-gray-dark">Serverless architecture</h3>
|
||||
<p class="text-gray">
|
||||
@ -83,15 +87,15 @@ Medium box shadows are typically used on editorialized content that needs to app
|
||||
Large box shadows are very diffused and used sparingly in the product UI.
|
||||
|
||||
```html live
|
||||
<div class="box-shadow-large p-3">
|
||||
.box-shadow-large
|
||||
<div class="color-shadow-large p-3">
|
||||
.color-shadow-large
|
||||
</div>
|
||||
```
|
||||
|
||||
These shadows are used for marketing content, UI screenshots, and content that appears on top of other page elements.
|
||||
|
||||
```html live
|
||||
<div class="box-shadow-large rounded-2 overflow-hidden">
|
||||
<div class="color-shadow-large rounded-2 overflow-hidden">
|
||||
<img src="https://github.com/nasa.png" class="img-responsive" alt="NASA is on GitHub" />
|
||||
</div>
|
||||
```
|
||||
@ -101,8 +105,8 @@ These shadows are used for marketing content, UI screenshots, and content that a
|
||||
Extra large box shadows are even more diffused.
|
||||
|
||||
```html live
|
||||
<div class="box-shadow-extra-large p-3">
|
||||
.box-shadow-extra-large
|
||||
<div class="color-shadow-extra-large p-3">
|
||||
.color-shadow-extra-large
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -113,7 +117,7 @@ These shadows are used for marketing content and content that appears on top of
|
||||
Additionally there is a `box-shadow-none` class that removes `box-shadow`:
|
||||
|
||||
```html live
|
||||
<div class="box-shadow-large box-shadow-none p-3">
|
||||
<div class="color-shadow-large box-shadow-none p-3">
|
||||
.box-shadow-none
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Colors
|
||||
description: 'Immutable, atomic CSS classes to rapidly build product'
|
||||
status: Deprecated
|
||||
status: New
|
||||
status_issue: 'https://github.com/github/design-systems/issues/97'
|
||||
---
|
||||
|
||||
@ -9,20 +9,168 @@ import {Box, BorderBox} from '@primer/components'
|
||||
import {palettes, allColors} from '../../src/color-variables'
|
||||
import {PaletteTable, PaletteTableFragment, PaletteHeading, PaletteCell, PaletteValue} from '../../src/color-system'
|
||||
|
||||
> ⚠️ GitHub employees only! These color utilities are deprecated and will be replaced at some point. On "_dotcom_" please use the [new functional utilities](https://primer-css-git-mkt-color-modes-docs.primer.now.sh/css/utilities/colors).
|
||||
|
||||
> Also take a look at the [migration guide](https://primer-css-git-mkt-color-modes-docs.primer.now.sh/css/support/v16-migration) when replacing existing colors.
|
||||
|
||||
---
|
||||
<Note>
|
||||
Please note Primer v16 has changed the naming of these color classes. Check the <a href="/css/support/v16-migration">migration guide</a> to make sure your app is up to date.
|
||||
</Note>
|
||||
|
||||
Use color utilities to apply color to the background of elements, text, and borders.
|
||||
|
||||
## Text colors
|
||||
|
||||
Use text color utilities to set text to a specific color. Color contrast must pass a minimum WCAG accessibility rating of [level AA](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html). This ensures that viewers who cannot see the full color spectrum are able to read the text. To customize outside of the suggested combinations below, we recommend using this [color contrast testing tool](https://colorable.jxnblk.com/). For more information, read our [accessibility standards](../principles/accessibility).
|
||||
|
||||
> ⚠️ The `.color-text-warning` currently doesn't pass accessibility standards, but will be updated in the future. **Use with caution**.
|
||||
|
||||
```html live
|
||||
<div class="color-text-primary mb-2">.color-text-primary</div>
|
||||
<div class="color-text-secondary mb-2">.color-text-secondary</div>
|
||||
<div class="color-text-tertiary mb-2">.color-text-tertiary</div>
|
||||
<div class="color-text-link mb-2">.color-text-link</div>
|
||||
<div class="color-text-success mb-2">.color-text-success</div>
|
||||
<div class="color-text-warning mb-2">.color-text-warning <span class="tooltipped tooltipped-n" aria-label="Does not meet accessibility standards">⚠️</span></div>
|
||||
<div class="color-text-danger mb-2">.color-text-danger</div>
|
||||
```
|
||||
|
||||
You can set the color inheritance on an element by using the `text-inherit` class.
|
||||
|
||||
```html live
|
||||
<div class="color-text-success">This text is green, <a href="#" class="text-inherit">including the link</a></div>
|
||||
```
|
||||
|
||||
## Icon colors
|
||||
|
||||
Use icon color utilities to set [Octicons](https://primer.style/octicons) to a specific color.
|
||||
|
||||
```html live
|
||||
<div class="mb-2">
|
||||
<!-- <%= octicon "octoface", :height => 16, :class => "icon-primary mr-1" %> -->
|
||||
<svg class="color-icon-primary mr-1 octicon octicon-octoface" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.326 1.973a1.2 1.2 0 011.49-.832c.387.112.977.307 1.575.602.586.291 1.243.71 1.7 1.296.022.027.042.056.061.084A13.22 13.22 0 018 3c.67 0 1.289.037 1.861.108l.051-.07c.457-.586 1.114-1.004 1.7-1.295a9.654 9.654 0 011.576-.602 1.2 1.2 0 011.49.832c.14.493.356 1.347.479 2.29.079.604.123 1.28.07 1.936.541.977.773 2.11.773 3.301C16 13 14.5 15 8 15s-8-2-8-5.5c0-1.034.238-2.128.795-3.117-.08-.712-.034-1.46.052-2.12.122-.943.34-1.797.479-2.29zM8 13.065c6 0 6.5-2 6-4.27C13.363 5.905 11.25 5 8 5s-5.363.904-6 3.796c-.5 2.27 0 4.27 6 4.27z"></path><path d="M4 8a1 1 0 012 0v1a1 1 0 01-2 0V8zm2.078 2.492c-.083-.264.146-.492.422-.492h3c.276 0 .505.228.422.492C9.67 11.304 8.834 12 8 12c-.834 0-1.669-.696-1.922-1.508zM10 8a1 1 0 112 0v1a1 1 0 11-2 0V8z"></path></svg>
|
||||
.color-icon-primary
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<!-- <%= octicon "octoface", :height => 16, :class => "color-icon-secondary mr-1" %> -->
|
||||
<svg class="color-icon-secondary mr-1 octicon octicon-octoface" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.326 1.973a1.2 1.2 0 011.49-.832c.387.112.977.307 1.575.602.586.291 1.243.71 1.7 1.296.022.027.042.056.061.084A13.22 13.22 0 018 3c.67 0 1.289.037 1.861.108l.051-.07c.457-.586 1.114-1.004 1.7-1.295a9.654 9.654 0 011.576-.602 1.2 1.2 0 011.49.832c.14.493.356 1.347.479 2.29.079.604.123 1.28.07 1.936.541.977.773 2.11.773 3.301C16 13 14.5 15 8 15s-8-2-8-5.5c0-1.034.238-2.128.795-3.117-.08-.712-.034-1.46.052-2.12.122-.943.34-1.797.479-2.29zM8 13.065c6 0 6.5-2 6-4.27C13.363 5.905 11.25 5 8 5s-5.363.904-6 3.796c-.5 2.27 0 4.27 6 4.27z"></path><path d="M4 8a1 1 0 012 0v1a1 1 0 01-2 0V8zm2.078 2.492c-.083-.264.146-.492.422-.492h3c.276 0 .505.228.422.492C9.67 11.304 8.834 12 8 12c-.834 0-1.669-.696-1.922-1.508zM10 8a1 1 0 112 0v1a1 1 0 11-2 0V8z"></path></svg>
|
||||
.color-icon-secondary
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<!-- <%= octicon "octoface", :height => 16, :class => "color-icon-tertiary mr-1" %> -->
|
||||
<svg class="color-icon-tertiary mr-1 octicon octicon-octoface" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.326 1.973a1.2 1.2 0 011.49-.832c.387.112.977.307 1.575.602.586.291 1.243.71 1.7 1.296.022.027.042.056.061.084A13.22 13.22 0 018 3c.67 0 1.289.037 1.861.108l.051-.07c.457-.586 1.114-1.004 1.7-1.295a9.654 9.654 0 011.576-.602 1.2 1.2 0 011.49.832c.14.493.356 1.347.479 2.29.079.604.123 1.28.07 1.936.541.977.773 2.11.773 3.301C16 13 14.5 15 8 15s-8-2-8-5.5c0-1.034.238-2.128.795-3.117-.08-.712-.034-1.46.052-2.12.122-.943.34-1.797.479-2.29zM8 13.065c6 0 6.5-2 6-4.27C13.363 5.905 11.25 5 8 5s-5.363.904-6 3.796c-.5 2.27 0 4.27 6 4.27z"></path><path d="M4 8a1 1 0 012 0v1a1 1 0 01-2 0V8zm2.078 2.492c-.083-.264.146-.492.422-.492h3c.276 0 .505.228.422.492C9.67 11.304 8.834 12 8 12c-.834 0-1.669-.696-1.922-1.508zM10 8a1 1 0 112 0v1a1 1 0 11-2 0V8z"></path></svg>
|
||||
.color-icon-tertiary
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<!-- <%= octicon "octoface", :height => 16, :class => "color-icon-info mr-1" %> -->
|
||||
<svg class="color-icon-info mr-1 octicon octicon-octoface" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.326 1.973a1.2 1.2 0 011.49-.832c.387.112.977.307 1.575.602.586.291 1.243.71 1.7 1.296.022.027.042.056.061.084A13.22 13.22 0 018 3c.67 0 1.289.037 1.861.108l.051-.07c.457-.586 1.114-1.004 1.7-1.295a9.654 9.654 0 011.576-.602 1.2 1.2 0 011.49.832c.14.493.356 1.347.479 2.29.079.604.123 1.28.07 1.936.541.977.773 2.11.773 3.301C16 13 14.5 15 8 15s-8-2-8-5.5c0-1.034.238-2.128.795-3.117-.08-.712-.034-1.46.052-2.12.122-.943.34-1.797.479-2.29zM8 13.065c6 0 6.5-2 6-4.27C13.363 5.905 11.25 5 8 5s-5.363.904-6 3.796c-.5 2.27 0 4.27 6 4.27z"></path><path d="M4 8a1 1 0 012 0v1a1 1 0 01-2 0V8zm2.078 2.492c-.083-.264.146-.492.422-.492h3c.276 0 .505.228.422.492C9.67 11.304 8.834 12 8 12c-.834 0-1.669-.696-1.922-1.508zM10 8a1 1 0 112 0v1a1 1 0 11-2 0V8z"></path></svg>
|
||||
.color-icon-info
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<!-- <%= octicon "octoface", :height => 16, :class => "color-icon-success mr-1" %> -->
|
||||
<svg class="color-icon-success mr-1 octicon octicon-octoface" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.326 1.973a1.2 1.2 0 011.49-.832c.387.112.977.307 1.575.602.586.291 1.243.71 1.7 1.296.022.027.042.056.061.084A13.22 13.22 0 018 3c.67 0 1.289.037 1.861.108l.051-.07c.457-.586 1.114-1.004 1.7-1.295a9.654 9.654 0 011.576-.602 1.2 1.2 0 011.49.832c.14.493.356 1.347.479 2.29.079.604.123 1.28.07 1.936.541.977.773 2.11.773 3.301C16 13 14.5 15 8 15s-8-2-8-5.5c0-1.034.238-2.128.795-3.117-.08-.712-.034-1.46.052-2.12.122-.943.34-1.797.479-2.29zM8 13.065c6 0 6.5-2 6-4.27C13.363 5.905 11.25 5 8 5s-5.363.904-6 3.796c-.5 2.27 0 4.27 6 4.27z"></path><path d="M4 8a1 1 0 012 0v1a1 1 0 01-2 0V8zm2.078 2.492c-.083-.264.146-.492.422-.492h3c.276 0 .505.228.422.492C9.67 11.304 8.834 12 8 12c-.834 0-1.669-.696-1.922-1.508zM10 8a1 1 0 112 0v1a1 1 0 11-2 0V8z"></path></svg>
|
||||
.color-icon-success
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<!-- <%= octicon "octoface", :height => 16, :class => "color-icon-warning mr-1" %> -->
|
||||
<svg class="color-icon-warning mr-1 octicon octicon-octoface" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.326 1.973a1.2 1.2 0 011.49-.832c.387.112.977.307 1.575.602.586.291 1.243.71 1.7 1.296.022.027.042.056.061.084A13.22 13.22 0 018 3c.67 0 1.289.037 1.861.108l.051-.07c.457-.586 1.114-1.004 1.7-1.295a9.654 9.654 0 011.576-.602 1.2 1.2 0 011.49.832c.14.493.356 1.347.479 2.29.079.604.123 1.28.07 1.936.541.977.773 2.11.773 3.301C16 13 14.5 15 8 15s-8-2-8-5.5c0-1.034.238-2.128.795-3.117-.08-.712-.034-1.46.052-2.12.122-.943.34-1.797.479-2.29zM8 13.065c6 0 6.5-2 6-4.27C13.363 5.905 11.25 5 8 5s-5.363.904-6 3.796c-.5 2.27 0 4.27 6 4.27z"></path><path d="M4 8a1 1 0 012 0v1a1 1 0 01-2 0V8zm2.078 2.492c-.083-.264.146-.492.422-.492h3c.276 0 .505.228.422.492C9.67 11.304 8.834 12 8 12c-.834 0-1.669-.696-1.922-1.508zM10 8a1 1 0 112 0v1a1 1 0 11-2 0V8z"></path></svg>
|
||||
.color-icon-warning
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<!-- <%= octicon "octoface", :height => 16, :class => "color-icon-danger mr-1" %> -->
|
||||
<svg class="color-icon-danger mr-1 octicon octicon-octoface" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.326 1.973a1.2 1.2 0 011.49-.832c.387.112.977.307 1.575.602.586.291 1.243.71 1.7 1.296.022.027.042.056.061.084A13.22 13.22 0 018 3c.67 0 1.289.037 1.861.108l.051-.07c.457-.586 1.114-1.004 1.7-1.295a9.654 9.654 0 011.576-.602 1.2 1.2 0 011.49.832c.14.493.356 1.347.479 2.29.079.604.123 1.28.07 1.936.541.977.773 2.11.773 3.301C16 13 14.5 15 8 15s-8-2-8-5.5c0-1.034.238-2.128.795-3.117-.08-.712-.034-1.46.052-2.12.122-.943.34-1.797.479-2.29zM8 13.065c6 0 6.5-2 6-4.27C13.363 5.905 11.25 5 8 5s-5.363.904-6 3.796c-.5 2.27 0 4.27 6 4.27z"></path><path d="M4 8a1 1 0 012 0v1a1 1 0 01-2 0V8zm2.078 2.492c-.083-.264.146-.492.422-.492h3c.276 0 .505.228.422.492C9.67 11.304 8.834 12 8 12c-.834 0-1.669-.696-1.922-1.508zM10 8a1 1 0 112 0v1a1 1 0 11-2 0V8z"></path></svg>
|
||||
.color-icon-danger
|
||||
</div>
|
||||
```
|
||||
|
||||
## Background colors
|
||||
|
||||
Background colors are most commonly used for filling large blocks of content or areas with a color. When selecting a background color, make sure the foreground color contrast passes a minimum WCAG accessibility rating of [level AA](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html). Meeting these standards ensures that content is accessible by everyone, regardless of disability or user device. You can [check your color combination with this demo site](https://colorable.jxnblk.com/). For more information, read our [accessibility standards](../principles/accessibility).
|
||||
|
||||
### Background utilities
|
||||
```html live
|
||||
<div class="color-bg-canvas mb-2">.color-bg-canvas</div>
|
||||
<div class="color-bg-primary mb-2">.color-bg-primary</div>
|
||||
<div class="color-bg-secondary mb-2">.color-bg-secondary</div>
|
||||
<div class="color-bg-tertiary mb-2">.color-bg-tertiary</div>
|
||||
<div class="color-bg-info mb-2">.color-bg-info</div>
|
||||
<div class="color-bg-success mb-2">.color-bg-success</div>
|
||||
<div class="color-bg-warning mb-2">.color-bg-warning</div>
|
||||
<div class="color-bg-danger mb-2">.color-bg-danger</div>
|
||||
```
|
||||
|
||||
## Inversed and permanent colors
|
||||
|
||||
⚠️ WIP: Don't use in produciton. They might still change.
|
||||
|
||||
You can inverse the canvas background color. Be sure to also inverse the text color (`.color-text-inverse`) to give enough contrast.
|
||||
|
||||
```html live
|
||||
<div class="color-bg-canvas-inverse color-text-inverse mb-2">.color-bg-canvas-inverse .color-text-inverse</div>
|
||||
```
|
||||
|
||||
When using the functional inversed background colors the `.color-text-white` is the better choice as it keeps the text white in all color modes. An exception is the `.color-bg-warning-inverse`.
|
||||
|
||||
```html live
|
||||
<div class="color-bg-info-inverse color-text-white mb-2">.color-bg-info-inverse .color-text-white</div>
|
||||
<div class="color-bg-success-inverse color-text-white mb-2">.color-bg-success-inverse .color-text-white</div>
|
||||
<div class="color-bg-warning-inverse mb-2">.color-bg-warning-inverse</div>
|
||||
<div class="color-bg-danger-inverse color-text-white mb-2">.color-bg-danger-inverse .color-text-white</div>
|
||||
```
|
||||
|
||||
## Border colors
|
||||
|
||||
Override default border colors with the following utilities.
|
||||
|
||||
```html live
|
||||
<div class="border color-border-primary mb-2">.color-border-primary</div>
|
||||
<div class="border color-border-secondary mb-2">.color-border-secondary</div>
|
||||
<div class="border color-border-tertiary mb-2">.color-border-tertiary</div>
|
||||
<div class="border color-border-info mb-2">.color-border-info</div>
|
||||
<div class="border color-border-success mb-2">.color-border-success</div>
|
||||
<div class="border color-border-warning mb-2">.color-border-warning</div>
|
||||
<div class="border color-border-danger mb-2">.color-border-danger</div>
|
||||
|
||||
<div class="color-bg-canvas-inverse color-text-inverse p-3">
|
||||
<div class="border color-border-inverse">.color-border-inverse</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Borders with alpha transparency
|
||||
|
||||
> TODO: Deprecate?
|
||||
|
||||
Use `border-black-fade` to add an rgba black border with an alpha transparency of `0.15`. This is useful when you want a border that tints the background color. The shade of black we use matches the hue of the GitHub dark header and our gray color palette: `rgba(27,31,35, 0.15)`.
|
||||
|
||||
```html live
|
||||
<div class="border border-black-fade color-bg-info p-2 mb-2">.border-black-fade</div>
|
||||
<div class="border border-black-fade color-bg-danger p-2 mb-2">.border-black-fade</div>
|
||||
```
|
||||
|
||||
On dark backgrounds use `border-white-fade` instead. It adds an rgba white border with an alpha transparency of `0.15`. Or use `.border-white-fade-xx` to add a white border with various levels of alpha transparency.
|
||||
|
||||
```html live
|
||||
<div class="color-bg-info-inverse color-text-inverse p-3">
|
||||
<div class="border-bottom border-white-fade-15 p-2 mb-2">
|
||||
.border-white-fade-15 or .border-white-fade
|
||||
</div>
|
||||
<div class="border-bottom border-white-fade-30 p-2 mb-2">
|
||||
.border-white-fade-30
|
||||
</div>
|
||||
<div class="border-bottom border-white-fade-50 p-2 mb-2">
|
||||
.border-white-fade-50
|
||||
</div>
|
||||
<div class="border-bottom border-white-fade-70 p-2 mb-2">
|
||||
.border-white-fade-70
|
||||
</div>
|
||||
<div class="border-bottom border-white-fade-85 p-2 mb-2">
|
||||
.border-white-fade-85
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Link colors
|
||||
|
||||
You can use the [Link](../components/links) component to change the link colors.
|
||||
|
||||
|
||||
<!-- TODO: Remove? -->
|
||||
<!--
|
||||
<PaletteTable>
|
||||
{palettes.map(({name, title, value}) => (
|
||||
<PaletteTableFragment name={name} type="bg" sparse key={name}>
|
||||
@ -34,98 +182,10 @@ Background colors are most commonly used for filling large blocks of content or
|
||||
</PaletteTableFragment>
|
||||
))}
|
||||
</PaletteTable>
|
||||
-->
|
||||
|
||||
## Text colors
|
||||
|
||||
Use text color utilities to set text or [Octicons](https://octicons.github.com) to a specific color. Color contrast must pass a minimum WCAG accessibility rating of [level AA](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html). This ensures that viewers who cannot see the full color spectrum are able to read the text. To customize outside of the suggested combinations below, we recommend using this [color contrast testing tool](https://colorable.jxnblk.com/). For more information, read our [accessibility standards](../principles/accessibility).
|
||||
|
||||
These are our most common text with background color combinations. They don't all pass accessibility standards currently, but will be updated in the future. **⚠️ Any of the combinations with a warning icon must be used with caution**.
|
||||
|
||||
### Text color inheritance
|
||||
|
||||
You can set the color inheritance on an element by using the `text-inherit` class.
|
||||
|
||||
```html live
|
||||
<div class="text-purple">This text is purple, <a href="#" class="text-inherit">including the link</a></div>
|
||||
```
|
||||
|
||||
### Text on white background
|
||||
|
||||
```html live
|
||||
<div class="text-blue mb-2">
|
||||
.text-blue
|
||||
</div>
|
||||
<div class="text-gray-dark mb-2">
|
||||
.text-gray-dark
|
||||
</div>
|
||||
<div class="text-gray mb-2">
|
||||
.text-gray
|
||||
</div>
|
||||
<div class="text-gray-light mb-2">
|
||||
.text-gray-light
|
||||
</div>
|
||||
<div class="text-red mb-2">
|
||||
.text-red
|
||||
</div>
|
||||
<div class="text-orange mb-2">
|
||||
.text-orange
|
||||
</div>
|
||||
<div class="text-orange-light mb-2">
|
||||
.text-orange-light
|
||||
<span class="tooltipped tooltipped-n" aria-label="Does not meet accessibility standards">⚠️</span>
|
||||
</div>
|
||||
<div class="text-yellow mb-2">
|
||||
.text-yellow
|
||||
<span class="tooltipped tooltipped-n" aria-label="Does not meet accessibility standards">⚠️</span>
|
||||
</div>
|
||||
<div class="text-green mb-2">
|
||||
.text-green
|
||||
</div>
|
||||
<div class="text-purple mb-2">
|
||||
.text-purple
|
||||
</div>
|
||||
```
|
||||
|
||||
### Text on colored backgrounds
|
||||
|
||||
```html live
|
||||
<div class="text-white bg-blue mb-2">
|
||||
.text-white on .bg-blue
|
||||
</div>
|
||||
<div class="bg-blue-light mb-2">
|
||||
.text-gray-dark on .bg-blue-light
|
||||
</div>
|
||||
<div class="text-white bg-red mb-2">
|
||||
.text-white on .bg-red
|
||||
</div>
|
||||
<div class="text-red bg-red-light mb-2">
|
||||
.text-red on .bg-red-light
|
||||
</div>
|
||||
<div class="bg-green-light mb-2">
|
||||
.text-gray-dark on .bg-green-light
|
||||
</div>
|
||||
<div class="bg-yellow-dark mb-2">
|
||||
.text-gray-dark on .bg-yellow-dark
|
||||
</div>
|
||||
<div class="bg-yellow mb-2">
|
||||
.text-gray-dark on .bg-yellow
|
||||
</div>
|
||||
<div class="bg-yellow-light mb-2">
|
||||
.text-gray-dark on .bg-yellow-light
|
||||
</div>
|
||||
<div class="text-white bg-purple mb-2">
|
||||
.text-white on .bg-purple
|
||||
</div>
|
||||
<div class="text-white bg-gray-dark mb-2">
|
||||
.text-white on .bg-gray-dark
|
||||
</div>
|
||||
<div class="bg-gray">
|
||||
.text-gray-dark on .bg-gray
|
||||
</div>
|
||||
```
|
||||
|
||||
### Text color utilities
|
||||
|
||||
<!-- TODO: Remove? -->
|
||||
<!--
|
||||
<PaletteTable columns={[
|
||||
{
|
||||
title: 'Alias',
|
||||
@ -135,7 +195,7 @@ You can set the color inheritance on an element by using the `text-inherit` clas
|
||||
{title: 'Value', Cell: PaletteCell.Background, Value: PaletteValue.Value}
|
||||
]}>
|
||||
{palettes.map(({name, title, value}) => (
|
||||
<PaletteTableFragment name={name} type="text" sparse prefix="color" columns={[
|
||||
<PaletteTableFragment name={name} key={name} type="text" sparse prefix="color" columns={[
|
||||
{
|
||||
title: 'Alias',
|
||||
Cell: props => <PaletteCell.Alias {...props} style={{borderBottom: `1px solid ${props.value} !important`}} />
|
||||
@ -151,47 +211,4 @@ You can set the color inheritance on an element by using the `text-inherit` clas
|
||||
</PaletteTableFragment>
|
||||
))}
|
||||
</PaletteTable>
|
||||
|
||||
## White background
|
||||
|
||||
You can make a background explicitly white (`#fff`) with the `bg-white` utility:
|
||||
|
||||
```html live
|
||||
<div class="bg-gray-dark p-2">
|
||||
<span class="bg-white">.bg-white over .bg-gray-dark</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Link colors
|
||||
|
||||
Base link styles turn links blue and apply an underline on hover. You can override the base link styles with text color utilities and the following link utilities. **Bear in mind that link styles are easier for more people to see and interact with when the changes in styles do not rely on color alone.**
|
||||
|
||||
Use `link-gray` to turn the link color to `$text-gray` and remain hover on blue.
|
||||
|
||||
```html live
|
||||
<a class="link-gray" href="#url">link-gray</a>
|
||||
```
|
||||
|
||||
Use `link-gray-dark` to turn the link color to `$text-gray-dark` and remain hover on blue.
|
||||
|
||||
```html live
|
||||
<a class="link-gray-dark" href="#url">link-gray-dark</a>
|
||||
```
|
||||
|
||||
Use `.muted-link` to turn the link light gray in color, and blue on hover or focus with no underline.
|
||||
|
||||
```html live
|
||||
<a class="muted-link" href="#url">muted-link</a>
|
||||
```
|
||||
|
||||
Use `link-hover-blue` to make any text color used with links to turn blue on hover. This is useful when you want only part of a link to turn blue on hover.
|
||||
|
||||
```html live
|
||||
<a class="text-gray-dark no-underline" href="#url">
|
||||
A link with only part of it is <span class="link-hover-blue">blue on hover</span>.
|
||||
</a>
|
||||
```
|
||||
|
||||
## Border colors
|
||||
|
||||
Border colors are documented on the [border utilities page](../utilities/borders#border-width-style-and-color-utilities).
|
||||
-->
|
||||
|
||||
20025
docs/package-lock.json
generated
20025
docs/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -13,8 +13,8 @@
|
||||
"@loadable/component": "^5.10.2",
|
||||
"@primer/components": "^17.1.0",
|
||||
"@primer/gatsby-theme-doctocat": "^1.6.0",
|
||||
"@primer/octicons": "^9.1.1",
|
||||
"@primer/octicons-react": "^9.1.1",
|
||||
"@primer/octicons": "^11.0.0",
|
||||
"@primer/octicons-react": "^11.0.0",
|
||||
"@svgr/webpack": "^4.3.2",
|
||||
"autoprefixer": "^9.6.1",
|
||||
"babel-preset-gatsby": "^0.5.10",
|
||||
|
||||
@ -1,13 +1,41 @@
|
||||
import React from 'react'
|
||||
import primerStyles from '!!raw-loader!postcss-loader!../../../../../src/index.scss'
|
||||
import primerStyles from '!!raw-loader!postcss-loader!../../../../../src/docs.scss'
|
||||
import {Flex} from '@primer/components'
|
||||
import {Frame} from '@primer/gatsby-theme-doctocat'
|
||||
import {MoonIcon, SunIcon} from '@primer/octicons-react'
|
||||
import React from 'react'
|
||||
|
||||
function LivePreviewWrapper({children}) {
|
||||
const [colorMode, setColorModeState] = React.useState('light')
|
||||
|
||||
const setColorMode = mode => {
|
||||
window.dispatchEvent(new CustomEvent('color-mode-change', {detail: {mode}}))
|
||||
}
|
||||
|
||||
React.useEffect(() => {
|
||||
const callback = e => setColorModeState(e.detail.mode)
|
||||
window.addEventListener('color-mode-change', callback)
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('color-mode-change', callback)
|
||||
}
|
||||
}, [setColorModeState])
|
||||
|
||||
return (
|
||||
<Frame>
|
||||
<link rel="stylesheet" href="https://github.com/site/assets/styleguide.css" />
|
||||
<style>{primerStyles}</style>
|
||||
<div className="frame-example p-3">{children}</div>
|
||||
<div data-color-mode={colorMode} data-light-theme="light" data-dark-theme="dark">
|
||||
<Flex pt={2} px={2} justifyContent="flex-end">
|
||||
<button
|
||||
className="btn"
|
||||
aria-label={colorMode === 'light' ? 'Activate dark mode' : 'Activate light mode'}
|
||||
onClick={() => setColorMode(colorMode === 'light' ? 'dark' : 'light')}
|
||||
>
|
||||
{colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
|
||||
</button>
|
||||
</Flex>
|
||||
<div className="frame-example p-3">{children}</div>
|
||||
</div>
|
||||
</Frame>
|
||||
)
|
||||
}
|
||||
|
||||
@ -3,6 +3,8 @@
|
||||
children:
|
||||
- title: Contributing
|
||||
url: /getting-started/contributing
|
||||
- title: Theming
|
||||
url: /getting-started/theming
|
||||
- title: Support
|
||||
url: /support
|
||||
children:
|
||||
@ -91,6 +93,8 @@
|
||||
url: /components/header
|
||||
- title: Labels
|
||||
url: /components/labels
|
||||
- title: Links
|
||||
url: /components/links
|
||||
- title: Loaders
|
||||
url: /components/loaders
|
||||
- title: Markdown
|
||||
|
||||
@ -1,11 +1,82 @@
|
||||
import primerStyles from '!!raw-loader!postcss-loader!../../src/docs.scss'
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import chroma from 'chroma-js'
|
||||
import styled from 'styled-components'
|
||||
import {Box, Text} from '@primer/components'
|
||||
import {colors, getPaletteByName} from './color-variables'
|
||||
import {Frame} from '@primer/gatsby-theme-doctocat'
|
||||
import {Box, Flex, Text} from '@primer/components'
|
||||
import {colors, colorModes, getPaletteByName} from './color-variables'
|
||||
import Table from './table'
|
||||
|
||||
function LivePreviewWrapper({children}) {
|
||||
return (
|
||||
<Frame>
|
||||
<link rel="stylesheet" href="https://github.com/site/assets/styleguide.css" />
|
||||
<style>{primerStyles}</style>
|
||||
<Flex direction="row">
|
||||
<div data-color-mode="light" data-light-theme="light" style={{flex: 1}}>
|
||||
<div className="frame-example p-3">{children}</div>
|
||||
</div>
|
||||
<div data-color-mode="dark" data-dark-theme="dark" style={{flex: 1}}>
|
||||
<div className="frame-example p-3">{children}</div>
|
||||
</div>
|
||||
</Flex>
|
||||
</Frame>
|
||||
)
|
||||
}
|
||||
|
||||
function capitalize(word) {
|
||||
return word[0].toUpperCase() + word.substr(1)
|
||||
}
|
||||
|
||||
export function CSSModeVars({filter, vars, render}) {
|
||||
const filteredVars = vars.filter(s => s.match(filter))
|
||||
|
||||
return (
|
||||
<LivePreviewWrapper>
|
||||
{filteredVars.map(variable => (
|
||||
<div key={variable}>{render(variable)}</div>
|
||||
))}
|
||||
</LivePreviewWrapper>
|
||||
)
|
||||
}
|
||||
|
||||
export function ColorModeTable({baseColor, values, ...rest}) {
|
||||
const fgColor = overlayColor(baseColor)
|
||||
const colorProps = {bg: baseColor, color: fgColor}
|
||||
|
||||
return (
|
||||
<Table {...rest}>
|
||||
<thead>
|
||||
<tr>
|
||||
<PaletteCell as="th" {...colorProps}>
|
||||
Variable
|
||||
</PaletteCell>
|
||||
{colorModes.map(mode => (
|
||||
<PaletteCell as="th" {...colorProps} key={mode}>
|
||||
{capitalize(mode)} Mode
|
||||
</PaletteCell>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{values.map(({variable, slug, values}) => (
|
||||
<tr key={slug}>
|
||||
<PaletteCell {...colorProps}>
|
||||
<Var>{variable}</Var>
|
||||
</PaletteCell>
|
||||
{Object.keys(values).map(mode => (
|
||||
<PaletteCell key={mode} bg={values[mode]} color={overlayColor(values[mode])}>
|
||||
<Var>{values[mode]}</Var>
|
||||
</PaletteCell>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</Table>
|
||||
)
|
||||
}
|
||||
|
||||
export function PaletteTable(props) {
|
||||
const {columns = [], hasHeader, ...rest} = props
|
||||
const {children = <PaletteTableFragment columns={columns} {...rest} />} = rest
|
||||
@ -45,7 +116,7 @@ export function PaletteTableFragment(props) {
|
||||
const cellProps = {type, ...row}
|
||||
const valueProps = {prefix, type, ...row}
|
||||
return (
|
||||
<tr key={row.value}>
|
||||
<tr key={row.slug}>
|
||||
{cols.map(({Cell = PaletteCell, Value = PaletteValue, title}) => (
|
||||
<Cell key={title} {...cellProps}>
|
||||
<Value {...valueProps} />
|
||||
@ -97,9 +168,7 @@ PaletteCell.defaultProps = {
|
||||
as: 'td'
|
||||
}
|
||||
|
||||
PaletteCell.propTypes = {
|
||||
value: PropTypes.string.isRequired
|
||||
}
|
||||
PaletteCell.propTypes = {}
|
||||
|
||||
PaletteCell.Alias = ({aliases, type, ...rest}) =>
|
||||
aliases && aliases[type] ? (
|
||||
@ -144,7 +213,7 @@ export function PaletteValue({value, ...rest}) {
|
||||
return <Var {...rest}>{value}</Var>
|
||||
}
|
||||
|
||||
PaletteValue.Variable = ({variable}) => <Var>${variable}</Var>
|
||||
PaletteValue.Variable = ({variable}) => <Var>var({variable})</Var>
|
||||
PaletteValue.Variable.propTypes = {
|
||||
variable: PropTypes.string.isRequired
|
||||
}
|
||||
@ -214,9 +283,13 @@ export function overlayColor(bg) {
|
||||
if ($overlayColorCache.has(bg)) {
|
||||
return $overlayColorCache.get(bg)
|
||||
} else {
|
||||
const result = chroma(bg).luminance() > 0.5 ? colors.black : colors.white
|
||||
$overlayColorCache.set(bg, result)
|
||||
return result
|
||||
try {
|
||||
const result = chroma(bg).luminance() > 0.5 ? colors.black : colors.white
|
||||
$overlayColorCache.set(bg, result)
|
||||
return result
|
||||
} catch (err) {
|
||||
return 'white'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,67 +1,71 @@
|
||||
import titleCase from 'title-case'
|
||||
import primerColors from 'primer-colors'
|
||||
import allModeColors from '@primer/primitives/dist/js/colors'
|
||||
|
||||
import colorSystemSCSS from '!!raw-loader!../../src/support/variables/color-system.scss'
|
||||
import colorVariablesSCSS from '!!raw-loader!../../src/support/variables/colors.scss'
|
||||
|
||||
const variables = {}
|
||||
|
||||
parseSCSSVariables(colorSystemSCSS, variables)
|
||||
parseSCSSVariables(colorVariablesSCSS, variables)
|
||||
// TODO: Remove? Not sure if still needed?
|
||||
// The `../../src/support/variables/colors.scss` file got removed since all color variables are now in primer/primitives.
|
||||
// import colorVariablesSCSS from '!!raw-loader!../../src/support/variables/colors.scss'
|
||||
|
||||
// XXX we don't necessarily define them in this order in primer-colors,
|
||||
// so we define an array here just to be safe
|
||||
const gradientHues = ['gray', 'blue', 'green', 'purple', 'yellow', 'orange', 'red', 'pink']
|
||||
|
||||
const colors = {
|
||||
...primerColors,
|
||||
pink: Object.keys(variables)
|
||||
.filter(key => key.startsWith('pink-'))
|
||||
.sort()
|
||||
.map(key => variables[key])
|
||||
}
|
||||
const colors = allModeColors.light.scale
|
||||
|
||||
const aliases = {}
|
||||
const variables = {}
|
||||
|
||||
// TODO: Remove? Not sure if still needed?
|
||||
// parseSCSSVariables(colorVariablesSCSS, variables)
|
||||
|
||||
const colorModes = Object.keys(allModeColors).sort((a, b) => {
|
||||
if (a.startsWith('light') && !b.startsWith('light')) return -1
|
||||
if (!a.startsWith('light') && b.startsWith('light')) return 1
|
||||
else return a.localeCompare(b)
|
||||
})
|
||||
|
||||
const palettes = gradientHues.map(name => {
|
||||
return {
|
||||
name,
|
||||
title: titleCase(name),
|
||||
value: variables[name] || colors[name][5],
|
||||
value: colors[name][5],
|
||||
values: colors[name].map((value, index) => ({
|
||||
value,
|
||||
values: colorModes.reduce((acc, mode) => {
|
||||
acc[mode] = allModeColors[mode].scale[name][index]
|
||||
return acc
|
||||
}, {}),
|
||||
index,
|
||||
variable: `${name}-${index}00`,
|
||||
slug: `${name}-${index}`,
|
||||
aliases: (aliases[value] = {})
|
||||
variable: `--color-scale-${name}-${index}`,
|
||||
slug: `color-scale-${name}-${index}`,
|
||||
aliases: {}
|
||||
}))
|
||||
}
|
||||
})
|
||||
|
||||
for (const key of Object.keys(variables)) {
|
||||
const match = key.match(/^(bg|text|border)-(\w+)(-(dark|light))?$/)
|
||||
const value = variables[key]
|
||||
if (match && aliases[value]) {
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const [_, type, name, suffix] = match
|
||||
aliases[value][type] = key
|
||||
}
|
||||
}
|
||||
export {colors, colorModes, gradientHues, palettes, getPaletteByName}
|
||||
|
||||
export {colors, gradientHues, palettes, getPaletteByName, variables}
|
||||
export const flattened = colorModes.reduce((acc, mode) => {
|
||||
acc[mode] = flattenVars(allModeColors[mode])
|
||||
return acc
|
||||
}, {})
|
||||
|
||||
export const functionalVarNames = Object.keys(flattened.light).filter(
|
||||
v => !v.startsWith('scale-') && !v.startsWith('auto-')
|
||||
)
|
||||
|
||||
export const allColors = palettes.reduce((all, {values}) => all.concat(values), [])
|
||||
|
||||
export const borders = Object.keys(variables)
|
||||
// Re: border-gray-darker, see https://github.com/primer/css/pull/1192
|
||||
.filter(key => key.startsWith('border-') && !variables[key].includes('$') && key !== 'border-gray-darker')
|
||||
.sort()
|
||||
.map(key => ({
|
||||
variable: key,
|
||||
value: variables[key],
|
||||
slug: key,
|
||||
aliases: {border: key}
|
||||
}))
|
||||
// TODO: fix the borders code
|
||||
//
|
||||
// export const borders = Object.keys(variables)
|
||||
// // Re: border-gray-darker, see https://github.com/primer/css/pull/1192
|
||||
// .filter(key => key.startsWith('border-') && !variables[key].includes('$') && key !== 'border-gray-darker')
|
||||
// .sort()
|
||||
// .map(key => ({
|
||||
// variable: key,
|
||||
// value: variables[key],
|
||||
// slug: key,
|
||||
// aliases: {border: key}
|
||||
// }))
|
||||
|
||||
function getPaletteByName(name) {
|
||||
return palettes.find(palette => palette.name === name)
|
||||
@ -75,8 +79,36 @@ function parseSCSSVariables(scssString, variables = {}) {
|
||||
if (match) {
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const [_, name, value] = match
|
||||
variables[name] = value.startsWith('$') ? variables[value.substr(1)] : value
|
||||
variables[name] = value.startsWith('$') ? variables[value.substr(1)] || value : value
|
||||
}
|
||||
} while (match)
|
||||
return variables
|
||||
}
|
||||
|
||||
function flattenVars(tree, prefix = []) {
|
||||
let output = {}
|
||||
|
||||
for (const key of Object.keys(tree)) {
|
||||
const val = tree[key]
|
||||
const varName = [...prefix, key].map(dasherize).join('-')
|
||||
if (Array.isArray(val) && !varName.includes('shadow')) {
|
||||
for (const i in val) {
|
||||
const arrayVarName = `${varName}-${i}`
|
||||
output[arrayVarName] = val[i]
|
||||
}
|
||||
} else if (Array.isArray(val)) {
|
||||
output[varName] = val.join(' ')
|
||||
} else if (typeof val === 'object') {
|
||||
const obj = flattenVars(val, [...prefix, key])
|
||||
output = {...output, ...obj}
|
||||
} else {
|
||||
output[varName] = val
|
||||
}
|
||||
}
|
||||
|
||||
return output
|
||||
}
|
||||
|
||||
function dasherize(str) {
|
||||
return str.replace(/([A-Z])/g, (m, r) => `-${r.toLowerCase()}`).replace(/^-/, '')
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react'
|
||||
import {Flex, Link, Text, Tooltip, Flash} from '@primer/components'
|
||||
import Octicon, {Alert} from '@primer/octicons-react'
|
||||
import Octicon, {AlertIcon} from '@primer/octicons-react'
|
||||
import themeGet from '@styled-system/theme-get'
|
||||
import DoctocatTable from '@primer/gatsby-theme-doctocat/src/components/table'
|
||||
import styled from 'styled-components'
|
||||
@ -198,7 +198,7 @@ function DeprecationFlag({variable, ...rest}) {
|
||||
function DeprecationIcon() {
|
||||
return (
|
||||
<Text color="red.5">
|
||||
<Octicon icon={Alert} />
|
||||
<Octicon icon={AlertIcon} />
|
||||
</Text>
|
||||
)
|
||||
}
|
||||
|
||||
194
package-lock.json
generated
194
package-lock.json
generated
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@primer/css",
|
||||
"version": "15.2.0",
|
||||
"version": "16.0.0",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
@ -4539,6 +4539,11 @@
|
||||
"object-assign": "^4.1.1"
|
||||
}
|
||||
},
|
||||
"@primer/primitives": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-4.0.1.tgz",
|
||||
"integrity": "sha512-TFbO/duRByLSGsCuDRo5Qgd+NOZmMKCB+au32ZHgGfn9KDdlGbbwvGKOx6c56jRWDCHk27aRL2bG4Hc9tFgHpA=="
|
||||
},
|
||||
"@reach/router": {
|
||||
"version": "1.3.3",
|
||||
"resolved": "https://registry.npmjs.org/@reach/router/-/router-1.3.3.tgz",
|
||||
@ -7756,23 +7761,48 @@
|
||||
"dev": true
|
||||
},
|
||||
"autoprefixer": {
|
||||
"version": "9.4.7",
|
||||
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.4.7.tgz",
|
||||
"integrity": "sha512-qS5wW6aXHkm53Y4z73tFGsUhmZu4aMPV9iHXYlF0c/wxjknXNHuj/1cIQb+6YH692DbJGGWcckAXX+VxKvahMA==",
|
||||
"version": "9.8.6",
|
||||
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.6.tgz",
|
||||
"integrity": "sha512-XrvP4VVHdRBCdX1S3WXVD8+RyG9qeb1D5Sn1DeLiG2xfSpzellk5k54xbUERJ3M5DggQxes39UGOTP8CFrEGbg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"browserslist": "^4.4.1",
|
||||
"caniuse-lite": "^1.0.30000932",
|
||||
"browserslist": "^4.12.0",
|
||||
"caniuse-lite": "^1.0.30001109",
|
||||
"colorette": "^1.2.1",
|
||||
"normalize-range": "^0.1.2",
|
||||
"num2fraction": "^1.2.2",
|
||||
"postcss": "^7.0.14",
|
||||
"postcss-value-parser": "^3.3.1"
|
||||
"postcss": "^7.0.32",
|
||||
"postcss-value-parser": "^4.1.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"postcss-value-parser": {
|
||||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
|
||||
"integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
|
||||
"browserslist": {
|
||||
"version": "4.14.0",
|
||||
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.14.0.tgz",
|
||||
"integrity": "sha512-pUsXKAF2lVwhmtpeA3LJrZ76jXuusrNyhduuQs7CDFf9foT4Y38aQOserd2lMe5DSSrjf3fx34oHwryuvxAUgQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"caniuse-lite": "^1.0.30001111",
|
||||
"electron-to-chromium": "^1.3.523",
|
||||
"escalade": "^3.0.2",
|
||||
"node-releases": "^1.1.60"
|
||||
}
|
||||
},
|
||||
"caniuse-lite": {
|
||||
"version": "1.0.30001112",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001112.tgz",
|
||||
"integrity": "sha512-J05RTQlqsatidif/38aN3PGULCLrg8OYQOlJUKbeYVzC2mGZkZLIztwRlB3MtrfLmawUmjFlNJvy/uhwniIe1Q==",
|
||||
"dev": true
|
||||
},
|
||||
"electron-to-chromium": {
|
||||
"version": "1.3.526",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.526.tgz",
|
||||
"integrity": "sha512-HiroW5ZbGwgT8kCnoEO8qnGjoTPzJxduvV/Vv/wH63eo2N6Zj3xT5fmmaSPAPUM05iN9/5fIEkIg3owTtV6QZg==",
|
||||
"dev": true
|
||||
},
|
||||
"node-releases": {
|
||||
"version": "1.1.60",
|
||||
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.60.tgz",
|
||||
"integrity": "sha512-gsO4vjEdQaTusZAEebUWp2a5d7dF5DYoIpDG7WySnk7BuZDW+GPpHXoXXuYawRBr/9t5q54tirPz79kFIWg4dA==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
@ -8684,14 +8714,23 @@
|
||||
}
|
||||
},
|
||||
"browserslist": {
|
||||
"version": "4.5.4",
|
||||
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.5.4.tgz",
|
||||
"integrity": "sha512-rAjx494LMjqKnMPhFkuLmLp8JWEX0o8ADTGeAbOqaF+XCvYLreZrG5uVjnPBlAQ8REZK4pzXGvp0bWgrFtKaag==",
|
||||
"version": "4.14.5",
|
||||
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.14.5.tgz",
|
||||
"integrity": "sha512-Z+vsCZIvCBvqLoYkBFTwEYH3v5MCQbsAjp50ERycpOjnPmolg1Gjy4+KaWWpm8QOJt9GHkhdqAl14NpCX73CWA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"caniuse-lite": "^1.0.30000955",
|
||||
"electron-to-chromium": "^1.3.122",
|
||||
"node-releases": "^1.1.13"
|
||||
"caniuse-lite": "^1.0.30001135",
|
||||
"electron-to-chromium": "^1.3.571",
|
||||
"escalade": "^3.1.0",
|
||||
"node-releases": "^1.1.61"
|
||||
},
|
||||
"dependencies": {
|
||||
"escalade": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.0.tgz",
|
||||
"integrity": "sha512-mAk+hPSO8fLDkhV7V0dXazH5pDc6MrjBTPyD3VeKzxnVFjH1MIxbCdqGZB9O8+EwWakZs3ZCbDS4IpRt79V1ig==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"btoa-lite": {
|
||||
@ -8890,9 +8929,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"caniuse-lite": {
|
||||
"version": "1.0.30000956",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000956.tgz",
|
||||
"integrity": "sha512-3o7L6XkQ01Oney+x2fS5UVbQXJ7QQkYxrSfaLmFlgQabcKfploI8bhS2nmQ8Unh5MpMONAMeDEdEXG9t9AK6uA==",
|
||||
"version": "1.0.30001142",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001142.tgz",
|
||||
"integrity": "sha512-pDPpn9ankEpBFZXyCv2I4lh1v/ju+bqb78QfKf+w9XgDAFWBwSYPswXqprRdrgQWK0wQnpIbfwRjNHO1HWqvoQ==",
|
||||
"dev": true
|
||||
},
|
||||
"cardinal": {
|
||||
@ -9344,9 +9383,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"colorette": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/colorette/-/colorette-1.1.0.tgz",
|
||||
"integrity": "sha512-6S062WDQUXi6hOfkO/sBPVwE5ASXY4G2+b4atvhJfSsuUUhIaUKlkjLe9692Ipyt5/a+IPF5aVTu3V5gvXq5cg==",
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.1.tgz",
|
||||
"integrity": "sha512-puCDz0CzydiSYOrnXpz/PKd69zRrribezjtE9yd4zvytoRc8+RY/KJPvtPFKZS3E3wP6neGyMe0vOTlHO5L3Pw==",
|
||||
"dev": true
|
||||
},
|
||||
"colors": {
|
||||
@ -11119,9 +11158,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"electron-to-chromium": {
|
||||
"version": "1.3.122",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.122.tgz",
|
||||
"integrity": "sha512-3RKoIyCN4DhP2dsmleuFvpJAIDOseWH88wFYBzb22CSwoFDSWRc4UAMfrtc9h8nBdJjTNIN3rogChgOy6eFInw==",
|
||||
"version": "1.3.576",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.576.tgz",
|
||||
"integrity": "sha512-uSEI0XZ//5ic+0NdOqlxp0liCD44ck20OAGyLMSymIWTEAtHKVJi6JM18acOnRgUgX7Q65QqnI+sNncNvIy8ew==",
|
||||
"dev": true
|
||||
},
|
||||
"element-resize-detector": {
|
||||
@ -16951,13 +16990,10 @@
|
||||
}
|
||||
},
|
||||
"node-releases": {
|
||||
"version": "1.1.13",
|
||||
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.13.tgz",
|
||||
"integrity": "sha512-fKZGviSXR6YvVPyc011NHuJDSD8gFQvLPmc2d2V3BS4gr52ycyQ1Xzs7a8B+Ax3Ni/W+5h1h4SqmzeoA8WZRmA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"semver": "^5.3.0"
|
||||
}
|
||||
"version": "1.1.61",
|
||||
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.61.tgz",
|
||||
"integrity": "sha512-DD5vebQLg8jLCOzwupn954fbIiZht05DAZs0k2u8NStSe6h9XdsuIQL8hSRKYiU8WUQRznmSDrKGbv3ObOmC7g==",
|
||||
"dev": true
|
||||
},
|
||||
"node-sass": {
|
||||
"version": "4.14.1",
|
||||
@ -21710,9 +21746,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"postcss": {
|
||||
"version": "7.0.14",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.14.tgz",
|
||||
"integrity": "sha512-NsbD6XUUMZvBxtQAJuWDJeeC4QFsmWsfozWxCJPWf3M55K9iu2iMDaKqyoOdTJ1R4usBXuxlVFAIo8rZPQD4Bg==",
|
||||
"version": "7.0.32",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
|
||||
"integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"chalk": "^2.4.2",
|
||||
@ -21822,58 +21858,25 @@
|
||||
}
|
||||
},
|
||||
"postcss-load-config": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.0.0.tgz",
|
||||
"integrity": "sha512-V5JBLzw406BB8UIfsAWSK2KSwIJ5yoEIVFb4gVkXci0QdKgA24jLmHZ/ghe/GgX0lJ0/D1uUK1ejhzEY94MChQ==",
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.1.0.tgz",
|
||||
"integrity": "sha512-4pV3JJVPLd5+RueiVVB+gFOAa7GWc25XQcMp86Zexzke69mKf6Nx9LRcQywdz7yZI9n1udOxmLuAwTBypypF8Q==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"cosmiconfig": "^4.0.0",
|
||||
"cosmiconfig": "^5.0.0",
|
||||
"import-cwd": "^2.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"cosmiconfig": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-4.0.0.tgz",
|
||||
"integrity": "sha512-6e5vDdrXZD+t5v0L8CrurPeybg4Fmf+FCSYxXKYVAqLUtyCSbuyqE059d0kDthTNRzKVjL7QMgNpEUlsoYH3iQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"is-directory": "^0.3.1",
|
||||
"js-yaml": "^3.9.0",
|
||||
"parse-json": "^4.0.0",
|
||||
"require-from-string": "^2.0.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"postcss-loader": {
|
||||
"version": "2.1.6",
|
||||
"resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-2.1.6.tgz",
|
||||
"integrity": "sha512-hgiWSc13xVQAq25cVw80CH0l49ZKlAnU1hKPOdRrNj89bokRr/bZF2nT+hebPPF9c9xs8c3gw3Fr2nxtmXYnNg==",
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-3.0.0.tgz",
|
||||
"integrity": "sha512-cLWoDEY5OwHcAjDnkyRQzAXfs2jrKjXpO/HQFcc5b5u/r7aa471wdmChmwfnv7x2u840iat/wi0lQ5nbRgSkUA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"loader-utils": "^1.1.0",
|
||||
"postcss": "^6.0.0",
|
||||
"postcss": "^7.0.0",
|
||||
"postcss-load-config": "^2.0.0",
|
||||
"schema-utils": "^0.4.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"postcss": {
|
||||
"version": "6.0.23",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
|
||||
"integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"chalk": "^2.4.1",
|
||||
"source-map": "^0.6.1",
|
||||
"supports-color": "^5.4.0"
|
||||
}
|
||||
},
|
||||
"source-map": {
|
||||
"version": "0.6.1",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
|
||||
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
|
||||
"dev": true
|
||||
}
|
||||
"schema-utils": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"postcss-markdown": {
|
||||
@ -22075,12 +22078,12 @@
|
||||
}
|
||||
},
|
||||
"postcss-scss": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-2.0.0.tgz",
|
||||
"integrity": "sha512-um9zdGKaDZirMm+kZFKKVsnKPF7zF7qBAtIfTSnZXD1jZ0JNZIxdB6TxQOjCnlSzLRInVl2v3YdBh/M881C4ug==",
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-2.1.1.tgz",
|
||||
"integrity": "sha512-jQmGnj0hSGLd9RscFw9LyuSVAa5Bl1/KBPqG1NQw9w8ND55nY4ZEsdlVuYJvLPpV+y0nwTV5v/4rHPzZRihQbA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"postcss": "^7.0.0"
|
||||
"postcss": "^7.0.6"
|
||||
}
|
||||
},
|
||||
"postcss-selector-parser": {
|
||||
@ -22111,9 +22114,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"postcss-value-parser": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.0.2.tgz",
|
||||
"integrity": "sha512-LmeoohTpp/K4UiyQCwuGWlONxXamGzCMtFxLq4W1nZVGIQLYvMCJx3yAF9qyyuFpflABI9yVdtJAqbihOsCsJQ==",
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
|
||||
"integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
|
||||
"dev": true
|
||||
},
|
||||
"preferred-pm": {
|
||||
@ -23787,12 +23790,6 @@
|
||||
"integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=",
|
||||
"dev": true
|
||||
},
|
||||
"require-from-string": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
|
||||
"integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
|
||||
"dev": true
|
||||
},
|
||||
"require-main-filename": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz",
|
||||
@ -24117,12 +24114,13 @@
|
||||
}
|
||||
},
|
||||
"schema-utils": {
|
||||
"version": "0.4.7",
|
||||
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.4.7.tgz",
|
||||
"integrity": "sha512-v/iwU6wvwGK8HbU9yi3/nhGzP0yGSuhQMzL6ySiec1FSrZZDkhm4noOSWzrNFo/jEc+SJY6jRTwuwbSXJPDUnQ==",
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
|
||||
"integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ajv": "^6.1.0",
|
||||
"ajv-errors": "^1.0.0",
|
||||
"ajv-keywords": "^3.1.0"
|
||||
}
|
||||
},
|
||||
@ -26565,9 +26563,9 @@
|
||||
}
|
||||
},
|
||||
"stylelint-config-primer": {
|
||||
"version": "9.0.0",
|
||||
"resolved": "https://registry.npmjs.org/stylelint-config-primer/-/stylelint-config-primer-9.0.0.tgz",
|
||||
"integrity": "sha512-jM/D1qB33wMb6Q19iWHDfowB9Sb4LwbR4wtCWz9qeZIapGJ1nclVxJ63HgDherzXl1Im2pXa69RdOX51trrR0Q==",
|
||||
"version": "9.2.1",
|
||||
"resolved": "https://registry.npmjs.org/stylelint-config-primer/-/stylelint-config-primer-9.2.1.tgz",
|
||||
"integrity": "sha512-4tpNgAZosmONtVmWKwufdiagEsR2He4j17tn0MtX9NdtSWKfeANrJsUeEFr2WDJR+YuAOSVwytQIP55u5reSEw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"anymatch": "^3.1.1",
|
||||
|
||||
21
package.json
21
package.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@primer/css",
|
||||
"version": "15.2.0",
|
||||
"version": "16.0.0",
|
||||
"description": "Primer is the CSS framework that powers GitHub's front-end design. primer includes 23 packages that are grouped into 3 core meta-packages for easy install. Each package and meta-package is independently versioned and distributed via npm, so it's easy to include all or part of Primer within your own project.",
|
||||
"homepage": "https://primer.style/css",
|
||||
"author": "GitHub, Inc.",
|
||||
@ -41,7 +41,8 @@
|
||||
"release": "changeset publish"
|
||||
},
|
||||
"dependencies": {
|
||||
"@primer/octicons": "^9.1.1"
|
||||
"@primer/octicons": "^9.1.1",
|
||||
"@primer/primitives": "^4.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@changesets/changelog-github": "^0.3.0",
|
||||
@ -49,9 +50,9 @@
|
||||
"@octokit/rest": "^16.34.0",
|
||||
"@storybook/addon-viewport": "5.3.18",
|
||||
"@storybook/react": "5.3.18",
|
||||
"autoprefixer": "9.4.7",
|
||||
"autoprefixer": "9.8.6",
|
||||
"code-blocks": "^1.1.0",
|
||||
"colorette": "^1.1.0",
|
||||
"colorette": "^1.2.1",
|
||||
"css-loader": "1.0.0",
|
||||
"cssstats": "3.3.0",
|
||||
"details-dialog-element": "^1.4.0",
|
||||
@ -65,13 +66,13 @@
|
||||
"minimist": "1.2.3",
|
||||
"node-fetch": "2.4.0",
|
||||
"npm-run-all": "4.1.5",
|
||||
"postcss": "7.0.14",
|
||||
"postcss": "7.0.32",
|
||||
"postcss-import": "^12.0.1",
|
||||
"postcss-load-config": "2.0.0",
|
||||
"postcss-loader": "^2.0.6",
|
||||
"postcss-load-config": "2.1.0",
|
||||
"postcss-loader": "^3.0.0",
|
||||
"postcss-node-sass": "2.1.8",
|
||||
"postcss-scss": "2.0.0",
|
||||
"postcss-value-parser": "^4.0.2",
|
||||
"postcss-scss": "2.1.1",
|
||||
"postcss-value-parser": "^4.1.0",
|
||||
"prop-types": "^15.6.2",
|
||||
"semantic-release": "^15.13.27",
|
||||
"semver": "5.7.1",
|
||||
@ -79,7 +80,7 @@
|
||||
"style-loader": "^0.18.2",
|
||||
"styled-components": "4.1.2",
|
||||
"stylelint": "^10.1.0",
|
||||
"stylelint-config-primer": "^9.0.0",
|
||||
"stylelint-config-primer": "^9.2.1",
|
||||
"stylelint-disable": "^0.1.5",
|
||||
"stylelint-only": "^1.0.1",
|
||||
"stylelint-scss": "^3.12.0",
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
const path = require('path')
|
||||
|
||||
module.exports = {
|
||||
parser: 'postcss-scss',
|
||||
map: {
|
||||
@ -6,7 +8,7 @@ module.exports = {
|
||||
},
|
||||
plugins: {
|
||||
'postcss-node-sass': {
|
||||
includePaths: ['node_modules'],
|
||||
includePaths: [path.join(__dirname, 'node_modules')],
|
||||
outputStyle: 'compressed'
|
||||
},
|
||||
'autoprefixer': {}
|
||||
|
||||
@ -33,13 +33,17 @@ function analyzeVariables(file) {
|
||||
if (last(entry.values) !== value) {
|
||||
entry.values.push(value)
|
||||
}
|
||||
variables[actualProp] = Object.assign(
|
||||
{
|
||||
computed: value
|
||||
},
|
||||
entry,
|
||||
{refs: []}
|
||||
)
|
||||
if (value.match(/^var\(--.*\)/)) {
|
||||
delete variables[actualProp]
|
||||
} else {
|
||||
variables[actualProp] = Object.assign(
|
||||
{
|
||||
computed: value
|
||||
},
|
||||
entry,
|
||||
{refs: []}
|
||||
)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
@ -55,7 +55,7 @@ async function dist() {
|
||||
writeFile(to, result.css, encoding),
|
||||
writeFile(meta.stats, JSON.stringify(cssstats(result.css)), encoding),
|
||||
writeFile(meta.js, `module.exports = {cssstats: require('./stats/${name}.json')}`, encoding),
|
||||
result.map ? writeFile(meta.map, result.map, encoding) : null
|
||||
result.map ? writeFile(meta.map, result.map.toString(), encoding) : null
|
||||
])
|
||||
bundles[name] = meta
|
||||
})
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
position: relative;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 20px $spacer-3;
|
||||
color: $text-gray-dark;
|
||||
border-style: $border-style;
|
||||
border-width: $border-width;
|
||||
border-radius: $border-radius;
|
||||
@ -65,49 +64,46 @@
|
||||
//
|
||||
|
||||
.flash {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: $blue-100;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: rgba($blue-700, 0.2);
|
||||
color: var(--color-alert-info-text);
|
||||
background-image: linear-gradient(var(--color-alert-info-bg), var(--color-alert-info-bg));
|
||||
border-color: var(--color-alert-info-border);
|
||||
|
||||
.octicon {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: rgba($blue-700, 0.6);
|
||||
color: var(--color-alert-info-icon);
|
||||
}
|
||||
}
|
||||
|
||||
.flash-warn {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: $yellow-100;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: rgba($yellow-800, 0.2);
|
||||
color: var(--color-alert-warn-text);
|
||||
background-image: linear-gradient(var(--color-alert-warn-bg), var(--color-alert-warn-bg));
|
||||
border-color: var(--color-alert-warn-border);
|
||||
|
||||
.octicon {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: rgba($yellow-800, 1);
|
||||
color: var(--color-alert-warn-icon);
|
||||
}
|
||||
}
|
||||
|
||||
.flash-error {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: #ffe3e6; // custom red
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: rgba($red-800, 0.2);
|
||||
color: var(--color-alert-error-text);
|
||||
background-image: linear-gradient(var(--color-alert-error-bg), var(--color-alert-error-bg));
|
||||
border-color: var(--color-alert-error-border);
|
||||
|
||||
.octicon {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: rgba($red-800, 0.6);
|
||||
color: var(--color-alert-error-icon);
|
||||
}
|
||||
}
|
||||
|
||||
.flash-success {
|
||||
background-color: $bg-green-light;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: rgba($green-700, 0.2);
|
||||
color: var(--color-alert-success-text);
|
||||
background-image: linear-gradient(var(--color-alert-success-bg), var(--color-alert-success-bg));
|
||||
border-color: var(--color-alert-success-border);
|
||||
|
||||
.octicon {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: rgba($green-700, 0.8);
|
||||
color: var(--color-alert-success-icon);
|
||||
}
|
||||
}
|
||||
|
||||
@ -134,12 +130,17 @@
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
// Makes sure the background is opaque to cover any content underneath
|
||||
.flash-full,
|
||||
.flash-banner {
|
||||
background-color: var(--color-bg-canvas);
|
||||
}
|
||||
|
||||
// FIXME deprecate this
|
||||
.warning {
|
||||
padding: $em-spacer-5;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-bottom: 0.8em;
|
||||
font-weight: $font-weight-bold;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: $yellow-100;
|
||||
background-color: var(--color-alert-warn-bg);
|
||||
}
|
||||
|
||||
@ -8,10 +8,10 @@
|
||||
// stylelint-disable-next-line primer/typography
|
||||
font-size: 13px;
|
||||
list-style: none;
|
||||
background: $bg-white;
|
||||
border: $border;
|
||||
background: var(--color-bg-overlay);
|
||||
border: $border-width $border-style var(--color-border-overlay);
|
||||
border-radius: $border-radius;
|
||||
box-shadow: $box-shadow-medium;
|
||||
box-shadow: var(--color-autocomplete-shadow);
|
||||
}
|
||||
|
||||
// One of the items that appears within an autocomplete group
|
||||
@ -23,22 +23,32 @@
|
||||
padding: $spacer-1 $spacer-2;
|
||||
overflow: hidden;
|
||||
font-weight: $font-weight-bold;
|
||||
color: $text-gray-dark;
|
||||
color: var(--color-text-primary);
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
background-color: $bg-white;
|
||||
background-color: var(--color-bg-overlay);
|
||||
border: 0;
|
||||
|
||||
&:hover,
|
||||
&:hover {
|
||||
color: var(--color-state-hover-primary-text);
|
||||
text-decoration: none;
|
||||
background-color: var(--color-state-hover-primary-bg);
|
||||
|
||||
// Inherit color on all child elements to ensure enough contrast
|
||||
* {
|
||||
color: inherit !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.selected,
|
||||
&[aria-selected=true],
|
||||
&.navigation-focus {
|
||||
color: $text-white;
|
||||
color: var(--color-state-selected-primary-text);
|
||||
text-decoration: none;
|
||||
background-color: $bg-blue;
|
||||
background-color: var(--color-state-selected-primary-bg);
|
||||
|
||||
// Inherit color on all child elements to ensure enough contrast
|
||||
* {
|
||||
|
||||
@ -11,20 +11,20 @@
|
||||
margin-top: $spacer-4;
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
background: $bg-white;
|
||||
border: $border;
|
||||
background: var(--color-bg-overlay);
|
||||
border: $border-width $border-style var(--color-border-overlay);
|
||||
border-radius: $border-radius;
|
||||
box-shadow: $box-shadow-medium;
|
||||
box-shadow: var(--color-autocomplete-shadow);
|
||||
|
||||
li {
|
||||
display: block;
|
||||
padding: $spacer-1 $spacer-2;
|
||||
font-weight: $font-weight-semibold;
|
||||
border-bottom: $border-width $border-style $border-gray-light;
|
||||
border-bottom: $border-width $border-style var(--color-autocomplete-row-border);
|
||||
|
||||
small {
|
||||
font-weight: $font-weight-normal;
|
||||
color: $text-gray;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
@ -38,15 +38,24 @@
|
||||
border-top-right-radius: $border-radius;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&[aria-selected="true"],
|
||||
&.navigation-focus {
|
||||
color: $text-white;
|
||||
&:hover {
|
||||
color: var(--color-state-hover-primary-text);
|
||||
text-decoration: none;
|
||||
background: $bg-blue;
|
||||
background: var(--color-state-hover-primary-bg);
|
||||
|
||||
small {
|
||||
color: $text-white;
|
||||
color: var(--color-state-hover-primary-text);
|
||||
}
|
||||
}
|
||||
|
||||
&[aria-selected="true"],
|
||||
&.navigation-focus {
|
||||
color: var(--color-state-selected-primary-text);
|
||||
text-decoration: none;
|
||||
background: var(--color-state-selected-primary-bg);
|
||||
|
||||
small {
|
||||
color: var(--color-state-selected-primary-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,9 +10,8 @@
|
||||
position: absolute;
|
||||
right: -15%;
|
||||
bottom: -9%;
|
||||
background-color: $bg-white; // For transparent backgrounds
|
||||
background-color: var(--color-bg-canvas); // For transparent backgrounds
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-radius: $border-radius-1;
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: -2px -2px 0 rgba($white, 0.8);
|
||||
box-shadow: var(--color-avatar-child-shadow);
|
||||
}
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
|
||||
.AvatarStack-body {
|
||||
display: flex;
|
||||
background: $bg-white;
|
||||
background: var(--color-bg-canvas);
|
||||
|
||||
.avatar {
|
||||
position: relative;
|
||||
@ -32,8 +32,8 @@
|
||||
box-sizing: content-box;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-right: -11px;
|
||||
background-color: $bg-white;
|
||||
border-right: $border-width $border-style $border-white;
|
||||
background-color: var(--color-bg-canvas);
|
||||
border-right: $border-width $border-style var(--color-bg-canvas); // stylelint-disable-line primer/borders
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-radius: $border-radius-1;
|
||||
transition: margin 0.1s ease-in-out;
|
||||
@ -81,7 +81,7 @@
|
||||
.avatar.avatar-more {
|
||||
z-index: 1;
|
||||
margin-right: 0;
|
||||
background: $bg-gray;
|
||||
background: var(--color-bg-tertiary);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
@ -91,19 +91,19 @@
|
||||
content: "";
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-radius: 2px;
|
||||
outline: $border-width $border-style $white;
|
||||
outline: $border-width $border-style var(--color-bg-canvas);
|
||||
}
|
||||
|
||||
&::before {
|
||||
width: 17px;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background: $gray-200;
|
||||
background: var(--color-avatar-stack-fade-more);
|
||||
}
|
||||
|
||||
&::after {
|
||||
width: 14px;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background: $gray-300;
|
||||
background: var(--color-avatar-stack-fade);
|
||||
}
|
||||
}
|
||||
|
||||
@ -123,7 +123,7 @@
|
||||
|
||||
.avatar.avatar-more {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background: $gray-300;
|
||||
background: var(--color-avatar-stack-fade);
|
||||
|
||||
&::before {
|
||||
width: 5px;
|
||||
@ -131,7 +131,7 @@
|
||||
|
||||
&::after {
|
||||
width: 2px;
|
||||
background: $bg-gray;
|
||||
background: var(--color-bg-tertiary);
|
||||
}
|
||||
}
|
||||
|
||||
@ -140,6 +140,6 @@
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-left: -11px;
|
||||
border-right: 0;
|
||||
border-left: $border-width $border-style $border-white;
|
||||
border-left: $border-width $border-style var(--color-bg-canvas); // stylelint-disable-line primer/borders
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,7 +3,11 @@
|
||||
overflow: hidden; // Ensure page layout in Firefox should images fail to load
|
||||
line-height: $lh-condensed-ultra;
|
||||
vertical-align: middle;
|
||||
background-color: var(--color-avatar-bg); // adds opaque bg to transparent avatars
|
||||
border-radius: $border-radius;
|
||||
flex-shrink: 0;
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: 0 0 0 1px var(--color-avatar-border);
|
||||
}
|
||||
|
||||
.avatar-link {
|
||||
|
||||
@ -4,9 +4,9 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: $bg-white;
|
||||
background-color: var(--color-bg-canvas);
|
||||
border-radius: 50%;
|
||||
box-shadow: $box-shadow-medium;
|
||||
box-shadow: var(--color-shadow-medium);
|
||||
}
|
||||
|
||||
.CircleBadge-icon {
|
||||
@ -46,7 +46,7 @@
|
||||
width: 100%;
|
||||
content: "";
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-bottom: 2px dashed $border-gray;
|
||||
border-bottom: 2px dashed var(--color-border-primary);
|
||||
}
|
||||
|
||||
.CircleBadge {
|
||||
|
||||
@ -16,12 +16,12 @@ body {
|
||||
font-family: $body-font;
|
||||
font-size: $body-font-size;
|
||||
line-height: $body-line-height;
|
||||
color: $text-gray-dark;
|
||||
background-color: $bg-white;
|
||||
color: var(--color-text-primary);
|
||||
background-color: var(--color-bg-canvas);
|
||||
}
|
||||
|
||||
a {
|
||||
color: $text-blue;
|
||||
color: var(--color-text-link);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
@ -45,8 +45,7 @@ hr,
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-bottom: $border-width $border-style lighten($gray-300, 5%);
|
||||
border-bottom: $border-width $border-style var(--color-border-secondary);
|
||||
@include clearfix();
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
@import "../support/index.scss";
|
||||
|
||||
@import "./normalize.scss";
|
||||
@import "./modes.scss";
|
||||
@import "./base.scss";
|
||||
@import "./kbd.scss";
|
||||
@import "./typography-base.scss";
|
||||
|
||||
@ -9,13 +9,13 @@ kbd {
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: 10px;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $gray-700;
|
||||
color: var(--color-auto-gray-7);
|
||||
vertical-align: middle;
|
||||
background-color: $bg-gray-light;
|
||||
background-color: var(--color-bg-secondary);
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border: $border-style $border-width $border-gray-dark;
|
||||
border-bottom-color: $border-gray-dark;
|
||||
border: $border-style $border-width var(--color-border-tertiary);
|
||||
border-bottom-color: var(--color-border-tertiary);
|
||||
border-radius: $border-radius;
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: inset 0 -1px 0 $border-gray-dark;
|
||||
box-shadow: inset 0 -1px 0 var(--color-border-tertiary);
|
||||
}
|
||||
|
||||
36
src/base/modes.scss
Normal file
36
src/base/modes.scss
Normal file
@ -0,0 +1,36 @@
|
||||
// Color modes
|
||||
|
||||
@import "../support/mixins/color-modes.scss";
|
||||
|
||||
@import "@primer/primitives/dist/scss/colors/_light.scss";
|
||||
@import "@primer/primitives/dist/scss/colors/_dark.scss";
|
||||
@import "@primer/primitives/dist/scss/colors/_dark_dimmed.scss";
|
||||
|
||||
// Outputs the CSS variables
|
||||
// Use :root (html element) to define a default
|
||||
|
||||
@include color-mode-theme(light, light, true) {
|
||||
@include primer-colors-light;
|
||||
}
|
||||
|
||||
@include color-mode-theme(dark, dark) {
|
||||
@include primer-colors-dark;
|
||||
}
|
||||
|
||||
@include color-mode-theme(dark_dimmed, dark) {
|
||||
@include primer-colors-dark_dimmed;
|
||||
}
|
||||
|
||||
// Color mode boundaries
|
||||
// Enables nesting of different color modes
|
||||
|
||||
[data-color-mode] {
|
||||
color: var(--color-text-primary);
|
||||
background-color: var(--color-bg-canvas);
|
||||
}
|
||||
|
||||
// color-scheme
|
||||
// Enables color modes for native elements
|
||||
|
||||
@include color-mode(light) { color-scheme: light; }
|
||||
@include color-mode(dark) { color-scheme: dark; }
|
||||
2
src/base/normalize.scss
vendored
2
src/base/normalize.scss
vendored
@ -162,7 +162,7 @@ h1 {
|
||||
|
||||
mark {
|
||||
background-color: #ff0;
|
||||
color: $text-black;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -4,12 +4,16 @@
|
||||
padding: $spacer-5;
|
||||
text-align: center;
|
||||
|
||||
p {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
code {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 2px 5px 3px;
|
||||
font-size: $h5-size;
|
||||
background: $bg-white;
|
||||
border: $border-width $border-style $border-gray-light;
|
||||
background: var(--color-bg-canvas);
|
||||
border: $border-width $border-style var(--color-auto-gray-0); // stylelint-disable-line primer/borders
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
@ -24,7 +28,7 @@
|
||||
margin-bottom: $spacer-2;
|
||||
margin-left: $spacer-1;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: lighten($gray-400, 5%);
|
||||
color: var(--color-blankslate-icon);
|
||||
}
|
||||
|
||||
.blankslate-capped {
|
||||
|
||||
@ -2,8 +2,10 @@
|
||||
// Intended to replace simple-box, boxed-group, and table-list
|
||||
|
||||
.Box {
|
||||
background-color: $bg-white;
|
||||
border: $border;
|
||||
background-color: var(--color-bg-primary);
|
||||
border-color: var(--color-border-primary);
|
||||
border-style: $border-style;
|
||||
border-width: $border-width;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
@ -35,7 +37,6 @@
|
||||
.Box-row {
|
||||
padding: $spacer-2 $spacer-3;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.Box--spacious {
|
||||
@ -67,15 +68,14 @@
|
||||
.Box-row {
|
||||
padding: $spacer-4;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.Box-header {
|
||||
padding: $spacer-3;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin: (-$border-width) (-$border-width) 0;
|
||||
background-color: $bg-gray;
|
||||
border-color: $border-color;
|
||||
background-color: var(--color-bg-tertiary);
|
||||
border-color: var(--color-border-primary);
|
||||
border-style: $border-style;
|
||||
border-width: $border-width;
|
||||
border-top-left-radius: $border-radius;
|
||||
@ -89,7 +89,7 @@
|
||||
|
||||
.Box-body {
|
||||
padding: $spacer-3;
|
||||
border-bottom: $border-width $border-style $border-gray;
|
||||
border-bottom: $border-width $border-style var(--color-border-primary);
|
||||
|
||||
// Ensures bottom-border doesn't poke out when .Box-body used without box-footer
|
||||
&:last-of-type {
|
||||
@ -106,7 +106,9 @@
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-top: -1px;
|
||||
list-style-type: none; // To account for applying Box component to a list
|
||||
border-top: $border;
|
||||
border-top-color: var(--color-border-secondary);
|
||||
border-top-style: $border-style;
|
||||
border-top-width: $border-width;
|
||||
|
||||
&:first-of-type {
|
||||
border-top-left-radius: $border-radius;
|
||||
@ -124,13 +126,13 @@
|
||||
// .unread to be deprecated with .Box-row-unread
|
||||
&.unread {
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: 2px 0 0 $blue inset;
|
||||
box-shadow: inset 2px 0 0 var(--color-border-info);
|
||||
}
|
||||
|
||||
&.navigation-focus {
|
||||
// Focus styles for when drag icon
|
||||
.Box-row--drag-button {
|
||||
color: $text-blue;
|
||||
color: var(--color-text-link);
|
||||
cursor: grab;
|
||||
opacity: 100;
|
||||
}
|
||||
@ -142,43 +144,42 @@
|
||||
|
||||
// Row dragging styles
|
||||
&.sortable-chosen {
|
||||
background-color: $bg-gray-light;
|
||||
background-color: var(--color-bg-secondary);
|
||||
}
|
||||
|
||||
// Makes dragging row background gray
|
||||
&.sortable-ghost {
|
||||
background-color: $bg-gray;
|
||||
background-color: var(--color-bg-tertiary);
|
||||
|
||||
// Hides contents of row while dragging so row looks solid gray
|
||||
.Box-row--drag-hide {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.Box-row--focus-gray {
|
||||
&.navigation-focus {
|
||||
background-color: $bg-gray;
|
||||
background-color: var(--color-bg-tertiary);
|
||||
}
|
||||
}
|
||||
|
||||
.Box-row--focus-blue {
|
||||
&.navigation-focus {
|
||||
background-color: $bg-blue-light;
|
||||
background-color: var(--color-box-row-blue-bg);
|
||||
}
|
||||
}
|
||||
|
||||
.Box-row--hover-gray {
|
||||
&:hover {
|
||||
background-color: $bg-gray;
|
||||
background-color: var(--color-bg-tertiary);
|
||||
}
|
||||
}
|
||||
|
||||
.Box-row--hover-blue {
|
||||
&:hover {
|
||||
background-color: $bg-blue-light;
|
||||
background-color: var(--color-box-row-blue-bg);
|
||||
}
|
||||
}
|
||||
|
||||
@ -187,15 +188,13 @@
|
||||
// and links are dark-gray with blue hover on desktop.
|
||||
.Box-row-link {
|
||||
@include breakpoint(md) {
|
||||
|
||||
color: $text-gray-dark;
|
||||
color: var(--color-text-primary);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: $text-blue;
|
||||
color: var(--color-text-link);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -209,7 +208,10 @@
|
||||
padding: $spacer-3;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-top: -1px; // prevents double border when used with .Box-body
|
||||
border-top: $border;
|
||||
border-top-color: var(--color-border-primary);
|
||||
border-top-style: $border-style;
|
||||
border-top-width: $border-width;
|
||||
border-radius: 0 0 $border-radius $border-radius;
|
||||
}
|
||||
|
||||
// Option for a box with scrolling content
|
||||
@ -221,67 +223,65 @@
|
||||
// Box themes
|
||||
|
||||
.Box--blue {
|
||||
border-color: $border-blue-light;
|
||||
border-color: var(--color-box-blue-border);
|
||||
|
||||
.Box-header {
|
||||
background-color: $bg-blue-light;
|
||||
border-color: $border-blue-light;
|
||||
background-color: var(--color-bg-info);
|
||||
border-color: var(--color-box-blue-border);
|
||||
}
|
||||
|
||||
.Box-body {
|
||||
border-color: $border-blue-light;
|
||||
border-color: var(--color-box-blue-border);
|
||||
}
|
||||
|
||||
.Box-row {
|
||||
border-color: $border-blue-light;
|
||||
border-color: var(--color-box-blue-border);
|
||||
}
|
||||
|
||||
.Box-footer {
|
||||
border-color: $border-blue-light;
|
||||
border-color: var(--color-box-blue-border);
|
||||
}
|
||||
}
|
||||
|
||||
// Applies and red border to the outside of the box,
|
||||
// but not to the border separating rows.
|
||||
.Box--danger {
|
||||
border-color: $border-red;
|
||||
border-color: var(--color-border-danger);
|
||||
|
||||
.Box-row {
|
||||
&:first-of-type {
|
||||
border-color: $border-red;
|
||||
border-color: var(--color-border-danger);
|
||||
}
|
||||
}
|
||||
|
||||
.Box-body {
|
||||
&:last-of-type {
|
||||
border-color: $border-red;
|
||||
border-color: var(--color-border-danger);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Box-header--blue {
|
||||
background-color: $bg-blue-light;
|
||||
border-color: $border-blue-light;
|
||||
background-color: var(--color-box-header-blue-bg);
|
||||
border-color: var(--color-box-header-blue-border);
|
||||
}
|
||||
|
||||
// Box row highlight themes
|
||||
|
||||
.Box-row--yellow {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: $yellow-100;
|
||||
background-color: var(--color-box-row-yellow-bg);
|
||||
}
|
||||
|
||||
.Box-row--blue {
|
||||
background-color: $bg-blue-light;
|
||||
background-color: var(--color-box-row-blue-bg);
|
||||
}
|
||||
|
||||
.Box-row--gray {
|
||||
background-color: $bg-gray;
|
||||
background-color: var(--color-bg-tertiary);
|
||||
}
|
||||
|
||||
//Box with btn-octicon
|
||||
.Box-btn-octicon {
|
||||
|
||||
// Increase specificity when btn-octicon is used because comes after .Box in the cascade
|
||||
&.btn-octicon {
|
||||
padding: $spacer-3 $spacer-3;
|
||||
|
||||
@ -1,25 +1,32 @@
|
||||
// stylelint-disable selector-max-type, selector-no-qualifying-type
|
||||
|
||||
// A nice way to display branch names inside the UI. Can be a link or not.
|
||||
// stylelint-disable selector-max-type
|
||||
|
||||
.branch-name {
|
||||
display: inline-block;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 2px 6px;
|
||||
font: 12px $mono-font;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: rgba($black, 0.6);
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: lighten($blue-100, 3%);
|
||||
color: var(--color-branch-name-text);
|
||||
background-color: var(--color-branch-name-bg);
|
||||
border-radius: $border-radius;
|
||||
|
||||
.octicon {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin: 1px -2px 0 0;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: desaturate($blue-300, 70%);
|
||||
color: var(--color-branch-name-icon);
|
||||
}
|
||||
}
|
||||
|
||||
// When a branch name is a link
|
||||
// stylelint-disable selector-no-qualifying-type
|
||||
a.branch-name { color: $text-blue; }
|
||||
// stylelint-enable selector-no-qualifying-type
|
||||
|
||||
a.branch-name {
|
||||
color: var(--color-text-link);
|
||||
background-color: var(--color-branch-name-link-bg);
|
||||
|
||||
.octicon {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: var(--color-branch-name-link-icon);
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,8 +8,7 @@
|
||||
&::after {
|
||||
padding-right: $em-spacer-5;
|
||||
padding-left: $em-spacer-5;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $border-gray;
|
||||
color: var(--color-text-disabled);
|
||||
content: "/";
|
||||
}
|
||||
|
||||
@ -20,7 +19,7 @@
|
||||
|
||||
.breadcrumb-item-selected,
|
||||
.breadcrumb-item[aria-current]:not([aria-current=false]) {
|
||||
color: $text-gray;
|
||||
color: var(--color-text-primary);
|
||||
|
||||
&::after {
|
||||
content: none;
|
||||
|
||||
@ -28,7 +28,8 @@
|
||||
cursor: default;
|
||||
|
||||
.octicon {
|
||||
color: inherit;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: var(--color-icon-tertiary);
|
||||
}
|
||||
}
|
||||
|
||||
@ -40,7 +41,7 @@
|
||||
|
||||
.octicon {
|
||||
margin-right: $spacer-1;
|
||||
color: $text-gray-light;
|
||||
color: var(--color-text-tertiary);
|
||||
vertical-align: text-bottom;
|
||||
|
||||
&:only-child {
|
||||
@ -54,8 +55,7 @@
|
||||
color: inherit;
|
||||
text-shadow: none;
|
||||
vertical-align: top;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: rgba($black, 0.08); // Darken for just a tad more contrast against the button background
|
||||
background-color: var(--color-btn-counter-bg);
|
||||
}
|
||||
|
||||
.dropdown-caret {
|
||||
@ -67,125 +67,108 @@
|
||||
// Default button
|
||||
|
||||
.btn {
|
||||
$bg-default: $bg-gray-light;
|
||||
$bg-hover: #f3f4f6; // custom gray
|
||||
$bg-active: darken($bg-hover, 2%);
|
||||
$bg-disabled: $bg-default;
|
||||
|
||||
color: $text-gray-dark;
|
||||
background-color: $bg-default;
|
||||
border-color: $border-color-button;
|
||||
box-shadow: $box-shadow, $box-shadow-highlight;
|
||||
transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
|
||||
color: var(--color-btn-text);
|
||||
background-color: var(--color-btn-bg);
|
||||
border-color: var(--color-btn-border);
|
||||
box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
|
||||
transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
|
||||
transition-property: color, background-color, border-color;
|
||||
|
||||
&:hover,
|
||||
&.hover,
|
||||
[open] > & {
|
||||
background-color: $bg-hover;
|
||||
background-color: var(--color-btn-hover-bg);
|
||||
border-color: var(--color-btn-hover-border);
|
||||
transition-duration: 0.1s;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.selected,
|
||||
&[aria-selected=true] {
|
||||
background-color: $bg-active;
|
||||
box-shadow: $box-shadow-inset;
|
||||
background-color: var(--color-btn-selected-bg);
|
||||
box-shadow: var(--color-shadow-inset);
|
||||
transition: none;
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.disabled,
|
||||
&[aria-disabled=true] {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $gray-400;
|
||||
background-color: $bg-disabled;
|
||||
border-color: $border-color-button;
|
||||
color: var(--color-text-disabled);
|
||||
background-color: var(--color-btn-bg);
|
||||
border-color: var(--color-btn-border);
|
||||
}
|
||||
|
||||
// Keep :focus after :disabled. Allows to see the focus ring even on disabled buttons
|
||||
&:focus,
|
||||
&.focus {
|
||||
outline: 1px dotted transparent; // Support Firefox custom colors
|
||||
outline-offset: 2px;
|
||||
box-shadow: $box-shadow-focus;
|
||||
border-color: var(--color-btn-focus-border);
|
||||
outline: none;
|
||||
box-shadow: var(--color-btn-focus-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
// Primary button
|
||||
|
||||
.btn-primary {
|
||||
$bg-default: #2ea44f; // custom green
|
||||
$bg-hover: #2c974b; // custom green
|
||||
$bg-active: darken($bg-hover, 2%);
|
||||
$bg-disabled: #94d3a2; // custom green
|
||||
|
||||
$shadow: $green-900;
|
||||
$box-shadow: 0 1px 0 rgba($black, 0.1), inset 0 1px 0 rgba($white, 0.03);
|
||||
|
||||
color: $text-white;
|
||||
background-color: $bg-default;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: rgba($black, 0.15);
|
||||
box-shadow: $box-shadow;
|
||||
color: var(--color-btn-primary-text);
|
||||
background-color: var(--color-btn-primary-bg);
|
||||
border-color: var(--color-btn-primary-border);
|
||||
box-shadow: var(--color-btn-primary-shadow), var(--color-btn-primary-inset-shadow);
|
||||
|
||||
&:hover,
|
||||
&.hover,
|
||||
[open] > & {
|
||||
background-color: $bg-hover;
|
||||
background-color: var(--color-btn-primary-hover-bg);
|
||||
border-color: var(--color-btn-primary-hover-border);
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.selected,
|
||||
&[aria-selected=true] {
|
||||
background-color: $bg-active;
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: inset 0 1px 0 rgba($shadow, 0.2);
|
||||
background-color: var(--color-btn-primary-selected-bg);
|
||||
box-shadow: var(--color-btn-primary-selected-shadow);
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.disabled,
|
||||
&[aria-disabled=true] {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: rgba($text-white, 0.8);
|
||||
background-color: $bg-disabled;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: rgba($black, 0.1);
|
||||
box-shadow: $box-shadow;
|
||||
color: var(--color-btn-primary-disabled-text);
|
||||
background-color: var(--color-btn-primary-disabled-bg);
|
||||
border-color: var(--color-btn-primary-disabled-border);
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&.focus {
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: 0 0 0 3px rgba($bg-default, 0.4);
|
||||
background-color: var(--color-btn-primary-focus-bg);
|
||||
border-color: var(--color-btn-primary-focus-border);
|
||||
box-shadow: var(--color-btn-primary-focus-shadow);
|
||||
}
|
||||
|
||||
.Counter {
|
||||
color: inherit;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: rgba($bg-white, 0.2);
|
||||
background-color: var(--color-btn-primary-counter-bg);
|
||||
}
|
||||
|
||||
.octicon {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: rgba($text-white, 0.8);
|
||||
color: var(--color-btn-primary-icon);
|
||||
}
|
||||
}
|
||||
|
||||
// Mixin: btn-inverse-on-hover
|
||||
// Outline button
|
||||
|
||||
@mixin btn-inverse-on-hover( $color, $bg-hover, $bg-active, $shadow ) {
|
||||
color: $color;
|
||||
transition: none;
|
||||
.btn-outline {
|
||||
color: var(--color-btn-outline-text);
|
||||
|
||||
&:hover,
|
||||
[open] > & {
|
||||
color: $text-white;
|
||||
background-color: $bg-hover;
|
||||
border-color: rgba($black, 0.15);
|
||||
box-shadow: 0 1px 0 rgba($black, 0.1), inset 0 1px 0 rgba($white, 0.03);
|
||||
color: var(--color-btn-outline-hover-text);
|
||||
background-color: var(--color-btn-outline-hover-bg);
|
||||
border-color: var(--color-btn-outline-hover-border);
|
||||
box-shadow: var(--color-btn-outline-hover-shadow), var(--color-btn-outline-hover-inset-shadow);
|
||||
|
||||
.Counter {
|
||||
background-color: rgba($bg-white, 0.2);
|
||||
background-color: var(--color-btn-outline-hover-counter-bg);
|
||||
}
|
||||
|
||||
.octicon {
|
||||
@ -196,66 +179,94 @@
|
||||
&:active,
|
||||
&.selected,
|
||||
&[aria-selected=true] {
|
||||
color: $text-white;
|
||||
background-color: $bg-active;
|
||||
border-color: rgba($black, 0.15);
|
||||
box-shadow: inset 0 1px 0 rgba($shadow, 0.2);
|
||||
color: var(--color-btn-outline-selected-text);
|
||||
background-color: var(--color-btn-outline-selected-bg);
|
||||
border-color: var(--color-btn-outline-selected-border);
|
||||
box-shadow: var(--color-btn-outline-selected-shadow);
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.disabled,
|
||||
&[aria-disabled=true] {
|
||||
color: rgba($color, 0.5);
|
||||
background-color: $bg-gray-light;
|
||||
border-color: $border-color-button;
|
||||
box-shadow: $box-shadow, $box-shadow-highlight;
|
||||
color: var(--color-btn-outline-disabled-text);
|
||||
background-color: var(--color-btn-outline-disabled-bg);
|
||||
border-color: var(--color-btn-border);
|
||||
box-shadow: none;
|
||||
|
||||
.Counter {
|
||||
background-color: rgba($color, 0.05);
|
||||
background-color: var(--color-btn-outline-disabled-counter-bg);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 3px rgba($bg-hover, 0.4);
|
||||
border-color: var(--color-btn-outline-focus-border);
|
||||
box-shadow: var(--color-btn-outline-focus-shadow);
|
||||
}
|
||||
|
||||
.Counter {
|
||||
color: inherit;
|
||||
background-color: rgba($color, 0.1);
|
||||
background-color: var(--color-btn-outline-counter-bg);
|
||||
}
|
||||
}
|
||||
|
||||
// Danger button
|
||||
|
||||
.btn-danger {
|
||||
@include btn-inverse-on-hover(
|
||||
$color: $text-red,
|
||||
$bg-hover: $red-600,
|
||||
$bg-active: darken($red-600, 3%),
|
||||
$shadow: $red-900
|
||||
);
|
||||
}
|
||||
color: var(--color-btn-danger-text);
|
||||
|
||||
// Outline button
|
||||
.octicon {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: var(--color-btn-danger-icon);
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
@include btn-inverse-on-hover(
|
||||
$color: $blue-500,
|
||||
$bg-hover: $blue-500,
|
||||
$bg-active: darken($blue-500, 3%),
|
||||
$shadow: $blue-900
|
||||
);
|
||||
}
|
||||
&:hover,
|
||||
[open] > & {
|
||||
color: var(--color-btn-danger-hover-text);
|
||||
background-color: var(--color-btn-danger-hover-bg);
|
||||
border-color: var(--color-btn-danger-hover-border);
|
||||
box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow);
|
||||
|
||||
// Solid buttons TODO: Deprecate?
|
||||
//
|
||||
//
|
||||
.btn-blue {
|
||||
@include btn-solid(
|
||||
$text-white,
|
||||
lighten($blue-500, 8%),
|
||||
darken($blue-500, 2%)
|
||||
);
|
||||
.Counter {
|
||||
background-color: var(--color-btn-danger-hover-counter-bg);
|
||||
}
|
||||
|
||||
.octicon {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: var(--color-btn-danger-hover-icon);
|
||||
}
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.selected,
|
||||
&[aria-selected=true] {
|
||||
color: var(--color-btn-danger-selected-text);
|
||||
background-color: var(--color-btn-danger-selected-bg);
|
||||
border-color: var(--color-btn-danger-selected-border);
|
||||
box-shadow: var(--color-btn-danger-selected-shadow);
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.disabled,
|
||||
&[aria-disabled=true] {
|
||||
color: var(--color-btn-danger-disabled-text);
|
||||
background-color: var(--color-btn-danger-disabled-bg);
|
||||
border-color: var(--color-btn-border);
|
||||
box-shadow: none;
|
||||
|
||||
.Counter {
|
||||
background-color: var(--color-btn-danger-disabled-counter-bg);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: var(--color-btn-danger-focus-border);
|
||||
box-shadow: var(--color-btn-danger-focus-shadow);
|
||||
}
|
||||
|
||||
.Counter {
|
||||
color: inherit;
|
||||
background-color: var(--color-btn-danger-counter-bg);
|
||||
}
|
||||
}
|
||||
|
||||
// Sizes
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
color: $text-blue;
|
||||
color: var(--color-text-link);
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
@ -24,8 +24,7 @@
|
||||
&[aria-disabled=true] {
|
||||
&,
|
||||
&:hover {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: rgba($gray-600, 0.5);
|
||||
color: var(--color-text-disabled);
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
@ -35,7 +34,7 @@
|
||||
//
|
||||
// Typically used as a "cancel" button next to a .btn
|
||||
.btn-invisible {
|
||||
color: $text-blue;
|
||||
color: var(--color-text-link);
|
||||
background-color: transparent; // Reset default gradient backgrounds and colors
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
@ -48,11 +47,17 @@
|
||||
&[aria-selected=true],
|
||||
&.zeroclipboard-is-hover,
|
||||
&.zeroclipboard-is-active {
|
||||
color: $text-blue;
|
||||
color: var(--color-text-link);
|
||||
background: none;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.disabled,
|
||||
&[aria-disabled=true] {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// Octicon button
|
||||
@ -65,28 +70,26 @@
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-left: 5px;
|
||||
line-height: $lh-condensed-ultra;
|
||||
color: $text-gray;
|
||||
color: var(--color-text-secondary);
|
||||
vertical-align: middle;
|
||||
|
||||
// For `<button>` elements
|
||||
background: transparent;
|
||||
border: 0;
|
||||
|
||||
&:hover { color: $text-blue; }
|
||||
&:hover { color: var(--color-text-link); }
|
||||
|
||||
&.disabled,
|
||||
&[aria-disabled=true] {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $gray-400;
|
||||
color: var(--color-text-disabled);
|
||||
cursor: default;
|
||||
|
||||
// stylelint-disable-next-line primer/colors
|
||||
&:hover { color: $gray-400; }
|
||||
&:hover { color: var(--color-text-disabled); }
|
||||
}
|
||||
}
|
||||
|
||||
.btn-octicon-danger:hover {
|
||||
color: $text-red;
|
||||
color: var(--color-text-danger);
|
||||
}
|
||||
|
||||
// Close button
|
||||
@ -94,9 +97,18 @@
|
||||
// Typically used with an octicon-x
|
||||
.close-button {
|
||||
padding: 0;
|
||||
color: var(--color-text-secondary);
|
||||
background: transparent;
|
||||
border: 0;
|
||||
outline: none;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--color-text-tertiary);
|
||||
}
|
||||
}
|
||||
|
||||
// Hidden text button
|
||||
@ -126,25 +138,22 @@
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: 6px;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $gray-700;
|
||||
color: var(--color-auto-gray-7);
|
||||
text-decoration: none;
|
||||
vertical-align: middle;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background: lighten($gray-300, 5%);
|
||||
background: var(--color-hidden-text-expander-bg);
|
||||
border: 0;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-radius: 1px;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: darken($gray-300, 4%);
|
||||
background-color: var(--color-hidden-text-expander-bg-hover);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: $text-white;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: $blue-400;
|
||||
color: var(--color-text-inverse);
|
||||
background-color: var(--color-bg-info-inverse);
|
||||
}
|
||||
}
|
||||
|
||||
@ -174,14 +183,14 @@
|
||||
font-weight: $font-weight-bold;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: 20px;
|
||||
color: $text-gray-dark;
|
||||
color: var(--color-text-primary);
|
||||
vertical-align: middle;
|
||||
background-color: $bg-white;
|
||||
border: $border-width $border-style $border-color-button;
|
||||
background-color: var(--color-social-count-bg);
|
||||
border: $border-width $border-style var(--color-btn-border);
|
||||
border-left: 0;
|
||||
border-top-right-radius: $border-radius;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
box-shadow: $box-shadow, $box-shadow-highlight;
|
||||
box-shadow: var(--color-shadow-small), var(--color-shadow-highlight);
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
@ -189,13 +198,13 @@
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $text-blue;
|
||||
color: var(--color-text-link);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
z-index: 1;
|
||||
outline: 0;
|
||||
box-shadow: $box-shadow-focus;
|
||||
box-shadow: var(--color-state-focus-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
@ -11,6 +11,8 @@
|
||||
// Global requirements
|
||||
@import "../support/index.scss";
|
||||
|
||||
// Color modes
|
||||
|
||||
// Core modules
|
||||
@import "../base/index.scss";
|
||||
@import "../box/index.scss";
|
||||
@ -19,6 +21,7 @@
|
||||
@import "../table-object/index.scss";
|
||||
@import "../forms/index.scss";
|
||||
@import "../layout/index.scss";
|
||||
@import "../links/index.scss";
|
||||
@import "../navigation/index.scss";
|
||||
@import "../pagination/index.scss";
|
||||
@import "../tooltips/index.scss";
|
||||
|
||||
14
src/docs.scss
Normal file
14
src/docs.scss
Normal file
@ -0,0 +1,14 @@
|
||||
/*!
|
||||
* Primer CSS
|
||||
* https://primer.style
|
||||
*
|
||||
* Released under MIT license.
|
||||
*/
|
||||
|
||||
// Docs styles
|
||||
// Only meant for the docs at https://primer.style/css
|
||||
|
||||
// Global requirements
|
||||
@import "./core/index.scss";
|
||||
@import "./product/index.scss";
|
||||
@import "./marketing/index.scss";
|
||||
@ -18,6 +18,7 @@
|
||||
|
||||
// Requires a positioning class (e.g., `.dropdown-menu-w`) to determine which
|
||||
// way the menu should render from the element triggering it.
|
||||
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
@ -29,11 +30,11 @@
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-top: 2px;
|
||||
list-style: none;
|
||||
background-color: $bg-white;
|
||||
background-color: var(--color-bg-overlay);
|
||||
background-clip: padding-box;
|
||||
border: $border;
|
||||
border: $border-width $border-style var(--color-border-overlay);
|
||||
border-radius: $border-radius;
|
||||
box-shadow: $box-shadow-large;
|
||||
box-shadow: var(--color-dropdown-shadow);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
@ -42,16 +43,19 @@
|
||||
content: "";
|
||||
}
|
||||
|
||||
// caret border
|
||||
&::before {
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border: $spacer-2 $border-style transparent;
|
||||
border-bottom-color: $border-black-fade;
|
||||
border-bottom-color: var(--color-border-overlay);
|
||||
}
|
||||
|
||||
// caret background (should match dropdown background)
|
||||
&::after {
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border: 7px $border-style transparent;
|
||||
border-bottom-color: $border-white;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-bottom-color: var(--color-bg-overlay);
|
||||
}
|
||||
|
||||
// stylelint-disable-next-line selector-max-type
|
||||
@ -75,15 +79,15 @@
|
||||
display: block;
|
||||
padding: $spacer-1 $spacer-2 $spacer-1 $spacer-3;
|
||||
overflow: hidden;
|
||||
color: $text-gray-dark;
|
||||
color: var(--color-text-primary);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $text-white;
|
||||
color: var(--color-state-hover-primary-text);
|
||||
text-decoration: none;
|
||||
background-color: $bg-blue;
|
||||
background-color: var(--color-state-hover-primary-bg);
|
||||
outline: none;
|
||||
|
||||
> .octicon {
|
||||
@ -109,13 +113,13 @@
|
||||
display: block;
|
||||
height: 0;
|
||||
margin: $spacer-2 0;
|
||||
border-top: $border;
|
||||
border-top: $border-width $border-style var(--color-border-overlay);
|
||||
}
|
||||
|
||||
.dropdown-header {
|
||||
padding: $spacer-1 $spacer-3;
|
||||
font-size: $h6-size;
|
||||
color: $text-gray;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.dropdown-item[aria-checked="false"] .octicon-check {
|
||||
@ -140,7 +144,7 @@
|
||||
right: -$spacer-3;
|
||||
left: auto;
|
||||
border-color: transparent;
|
||||
border-left-color: $border-black-fade;
|
||||
border-left-color: var(--color-border-overlay);
|
||||
}
|
||||
|
||||
&::after {
|
||||
@ -148,7 +152,8 @@
|
||||
right: -14px;
|
||||
left: auto;
|
||||
border-color: transparent;
|
||||
border-left-color: $border-white;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-left-color: var(--color-bg-overlay);
|
||||
}
|
||||
}
|
||||
|
||||
@ -160,17 +165,18 @@
|
||||
margin-left: $spacer-2;
|
||||
|
||||
&::before {
|
||||
top: $spacer-2;
|
||||
top: 10px;
|
||||
left: -$spacer-3;
|
||||
border-color: transparent;
|
||||
border-right-color: $border-black-fade;
|
||||
border-right-color: var(--color-border-overlay);
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: 11px;
|
||||
left: -14px;
|
||||
border-color: transparent;
|
||||
border-right-color: $border-white;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-right-color: var(--color-bg-overlay);
|
||||
}
|
||||
}
|
||||
|
||||
@ -191,7 +197,7 @@
|
||||
bottom: -$spacer-2;
|
||||
left: 9px;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-top: $spacer-2 $border-style $border-black-fade;
|
||||
border-top: $spacer-2 $border-style var(--color-border-overlay);
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-right: $spacer-2 $border-style transparent;
|
||||
border-bottom: 0;
|
||||
@ -203,7 +209,7 @@
|
||||
bottom: -7px;
|
||||
left: 10px;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-top: 7px $border-style $border-white;
|
||||
border-top: 7px $border-style var(--color-bg-overlay);
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-right: 7px $border-style transparent;
|
||||
border-bottom: 0;
|
||||
@ -258,69 +264,3 @@
|
||||
left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
// Dark dropdowns
|
||||
.dropdown-menu-dark {
|
||||
color: $text-white;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background: $gray-800;
|
||||
border-color: $border-gray-darker;
|
||||
box-shadow: $box-shadow-large;
|
||||
|
||||
&::before {
|
||||
border-bottom-color: $border-gray-darker;
|
||||
}
|
||||
|
||||
&::after {
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-bottom-color: $gray-800;
|
||||
}
|
||||
|
||||
.dropdown-header {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $gray-300;
|
||||
}
|
||||
|
||||
.dropdown-divider {
|
||||
border-top-color: $border-gray-darker;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
// Directional classes
|
||||
|
||||
&.dropdown-menu-w {
|
||||
&::before {
|
||||
border-color: transparent transparent transparent $border-gray-darker;
|
||||
}
|
||||
|
||||
&::after {
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: transparent transparent transparent $gray-800;
|
||||
}
|
||||
}
|
||||
|
||||
&.dropdown-menu-e {
|
||||
&::before {
|
||||
border-color: transparent $border-gray-darker transparent transparent;
|
||||
}
|
||||
|
||||
&::after {
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: transparent $gray-800 transparent transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&.dropdown-menu-ne {
|
||||
&::before {
|
||||
border-color: $border-gray-darker transparent transparent transparent;
|
||||
}
|
||||
|
||||
&::after {
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: $gray-800 transparent transparent transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -22,28 +22,27 @@ label {
|
||||
font-size: $body-font-size;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: 20px;
|
||||
color: $text-gray-dark;
|
||||
color: var(--color-text-primary);
|
||||
vertical-align: middle;
|
||||
background-color: $bg-white;
|
||||
background-color: var(--color-input-bg);
|
||||
background-repeat: no-repeat; // Repeat and position set for form states (success, error, etc)
|
||||
background-position: right 8px center; // For form validation. This keeps images 8px from right and centered vertically.
|
||||
border: $border-width $border-style $border-color;
|
||||
border: $border-width $border-style var(--color-input-border);
|
||||
border-radius: $border-radius;
|
||||
outline: none;
|
||||
box-shadow: $box-shadow-inset;
|
||||
box-shadow: var(--color-shadow-inset);
|
||||
|
||||
&.focus,
|
||||
&:focus {
|
||||
border-color: $border-blue;
|
||||
border-color: var(--color-state-focus-border);
|
||||
outline: none;
|
||||
box-shadow: $box-shadow-focus;
|
||||
box-shadow: var(--color-state-focus-shadow);
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $gray-400;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: #f3f4f6; // custom gray
|
||||
color: var(--color-text-disabled);
|
||||
background-color: var(--color-input-disabled-bg);
|
||||
border-color: var(--color-input-disabled-border);
|
||||
}
|
||||
|
||||
// Ensures inputs don't zoom on mobile iPhone but are body-font size on iPad
|
||||
@ -64,36 +63,14 @@ textarea.form-control {
|
||||
|
||||
// Inputs with contrast for easy light gray backgrounds against white.
|
||||
.input-contrast {
|
||||
background-color: $bg-gray-light;
|
||||
background-color: var(--color-input-contrast-bg);
|
||||
|
||||
&:focus { background-color: $bg-white; }
|
||||
}
|
||||
|
||||
// Inputs to be used against dark backgrounds.
|
||||
.input-dark {
|
||||
color: $text-white;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: $white-fade-15;
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
|
||||
&::placeholder {
|
||||
color: inherit;
|
||||
opacity: 0.6; // inceases contrast ratio to 4.52
|
||||
}
|
||||
|
||||
&.focus,
|
||||
&:focus {
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: $black-fade-30;
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: 0 0 0 0.2em rgba($blue-300, 0.4);
|
||||
}
|
||||
&:focus { background-color: var(--color-input-bg); }
|
||||
}
|
||||
|
||||
// Custom styling for HTML5 validation bubbles (WebKit only)
|
||||
::placeholder {
|
||||
color: $text-gray-light;
|
||||
color: var(--color-text-placeholder);
|
||||
opacity: 1; // override opacity in normalize.css
|
||||
}
|
||||
|
||||
@ -153,7 +130,7 @@ textarea.form-control {
|
||||
padding: 2px $spacer-1;
|
||||
font-style: normal;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background: $yellow-100;
|
||||
background: var(--color-auto-yellow-1);
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
@ -171,7 +148,7 @@ textarea.form-control {
|
||||
margin: 0;
|
||||
font-size: $font-size-small;
|
||||
font-weight: $font-weight-normal;
|
||||
color: $text-gray;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
@ -209,7 +186,7 @@ textarea.form-control {
|
||||
display: inline-block;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin: 5px 0 0;
|
||||
color: $text-gray;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
img {
|
||||
@ -258,11 +235,9 @@ input::-webkit-inner-spin-button {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin: 10px 0;
|
||||
font-size: $h5-size;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $yellow-900;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background: $yellow-100;
|
||||
border: $border-width $border-style $border-yellow;
|
||||
color: var(--color-text-warning);
|
||||
background: var(--color-bg-warning);
|
||||
border: $border-width $border-style var(--color-border-warning);
|
||||
border-radius: $border-radius;
|
||||
|
||||
p {
|
||||
|
||||
@ -20,10 +20,10 @@
|
||||
max-width: 100%;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-right: 5px;
|
||||
background-color: $bg-gray-light;
|
||||
background-color: var(--color-input-contrast-bg);
|
||||
|
||||
&:focus {
|
||||
background-color: $bg-white;
|
||||
background-color: var(--color-input-bg);
|
||||
}
|
||||
|
||||
&.shorter { width: 130px; }
|
||||
@ -81,9 +81,9 @@
|
||||
h4 {
|
||||
margin: $spacer-1 0 0;
|
||||
|
||||
&.is-error { color: $text-red; }
|
||||
&.is-error { color: var(--color-text-danger); }
|
||||
|
||||
&.is-success { color: $text-green; }
|
||||
&.is-success { color: var(--color-text-success); }
|
||||
|
||||
+ .note {
|
||||
margin-top: 0;
|
||||
@ -101,7 +101,7 @@
|
||||
.form-group-header label::after {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding-left: 5px;
|
||||
color: $text-red;
|
||||
color: var(--color-text-danger);
|
||||
content: "*";
|
||||
}
|
||||
}
|
||||
@ -134,7 +134,7 @@
|
||||
&.successful {
|
||||
.success {
|
||||
display: inline;
|
||||
color: $text-green;
|
||||
color: var(--color-text-success);
|
||||
}
|
||||
}
|
||||
|
||||
@ -190,76 +190,56 @@
|
||||
|
||||
&.successed {
|
||||
.success {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $green-900;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: $green-100;
|
||||
border-color: $border-green;
|
||||
color: var(--color-input-tooltip-success-text);
|
||||
background-color: var(--color-input-tooltip-success-bg);
|
||||
border-color: var(--color-input-tooltip-success-border);
|
||||
|
||||
&::after {
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-bottom-color: $green-100;
|
||||
}
|
||||
|
||||
&::before {
|
||||
border-bottom-color: $border-green;
|
||||
}
|
||||
&::after { border-bottom-color: var(--color-input-tooltip-success-bg); } // stylelint-disable-line primer/borders
|
||||
&::before { border-bottom-color: var(--color-input-tooltip-success-border); }
|
||||
}
|
||||
}
|
||||
|
||||
&.warn {
|
||||
.form-control {
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: $yellow-600;
|
||||
border-color: var(--color-input-warning-border);
|
||||
}
|
||||
|
||||
.warning {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: $yellow-200;
|
||||
border-color: $border-yellow;
|
||||
color: var(--color-input-tooltip-warning-text);
|
||||
background-color: var(--color-input-tooltip-warning-bg);
|
||||
border-color: var(--color-input-tooltip-warning-border);
|
||||
|
||||
&::after {
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-bottom-color: $yellow-200;
|
||||
}
|
||||
|
||||
&::before {
|
||||
border-bottom-color: $border-yellow;
|
||||
}
|
||||
&::after { border-bottom-color: var(--color-input-tooltip-warning-bg); } // stylelint-disable-line primer/borders
|
||||
&::before { border-bottom-color: var(--color-input-tooltip-warning-border); }
|
||||
}
|
||||
}
|
||||
|
||||
&.errored {
|
||||
.form-control {
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: $red-600;
|
||||
border-color: var(--color-input-error-border);
|
||||
}
|
||||
|
||||
label {
|
||||
color: $text-red;
|
||||
color: var(--color-text-danger);
|
||||
}
|
||||
|
||||
.error {
|
||||
background-color: $bg-red-light;
|
||||
border-color: $border-red-light;
|
||||
color: var(--color-input-tooltip-error-text);
|
||||
background-color: var(--color-input-tooltip-error-bg);
|
||||
border-color: var(--color-input-tooltip-error-border);
|
||||
|
||||
&::after {
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-bottom-color: $bg-red-light;
|
||||
}
|
||||
|
||||
&::before {
|
||||
border-bottom-color: $border-red-light;
|
||||
}
|
||||
&::after { border-bottom-color: var(--color-input-tooltip-error-bg); } // stylelint-disable-line primer/borders
|
||||
&::before { border-bottom-color: var(--color-input-tooltip-error-border); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// tooltip
|
||||
.note {
|
||||
min-height: 17px;
|
||||
margin: $spacer-1 0 2px;
|
||||
font-size: $font-size-small;
|
||||
color: $text-gray;
|
||||
color: var(--color-text-secondary);
|
||||
|
||||
.spinner {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
|
||||
@ -6,11 +6,12 @@
|
||||
max-width: 100%;
|
||||
height: $size-5;
|
||||
padding-right: $spacer-4;
|
||||
background-color: $bg-white;
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC");
|
||||
background-color: var(--color-bg-primary);
|
||||
// SVG with fill: #586069 (--color-icon-secondary)
|
||||
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzU4NjA2OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4=");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 8px center;
|
||||
background-size: 8px 10px;
|
||||
background-position: right 4px center;
|
||||
background-size: 16px;
|
||||
appearance: none;
|
||||
|
||||
// Hides the default caret in IE11
|
||||
@ -23,6 +24,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include color-mode(dark) {
|
||||
.form-select {
|
||||
// SVG with fill: #6e7681 (--color-icon-secondary)
|
||||
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzZlNzY4MSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4=");
|
||||
}
|
||||
}
|
||||
|
||||
.select-sm {
|
||||
height: $size-4;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
|
||||
@ -72,9 +72,8 @@ dl.form-group > dd, // TODO: Deprecate
|
||||
|
||||
.octicon-check {
|
||||
display: inline-block;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $green;
|
||||
fill: $green;
|
||||
color: var(--color-text-success);
|
||||
fill: var(--color-icon-success);
|
||||
}
|
||||
|
||||
.octicon-x {
|
||||
@ -94,8 +93,8 @@ dl.form-group > dd, // TODO: Deprecate
|
||||
|
||||
.octicon-x {
|
||||
display: inline-block;
|
||||
color: $text-red;
|
||||
fill: $red;
|
||||
color: var(--color-text-danger);
|
||||
fill: var(--color-icon-danger);
|
||||
}
|
||||
}
|
||||
|
||||
@ -128,10 +127,9 @@ dl.form-group > dd, // TODO: Deprecate
|
||||
font-size: 13px;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: 16px;
|
||||
color: $text-gray;
|
||||
background-color: $bg-gray-light;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border: $border-width $border-style darken($gray-300, 5%);
|
||||
color: var(--color-text-secondary);
|
||||
background-color: var(--color-bg-secondary);
|
||||
border: $border-width $border-style var(--color-drag-and-drop-border);
|
||||
border-top: 0;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
border-bottom-left-radius: $border-radius;
|
||||
@ -143,7 +141,7 @@ dl.form-group > dd, // TODO: Deprecate
|
||||
}
|
||||
|
||||
.error {
|
||||
color: $text-red;
|
||||
color: var(--color-text-danger);
|
||||
}
|
||||
|
||||
// Spinner
|
||||
@ -190,10 +188,10 @@ dl.form-group > dd, // TODO: Deprecate
|
||||
|
||||
.drag-and-drop-error-info {
|
||||
font-weight: $font-weight-normal;
|
||||
color: $text-gray;
|
||||
color: var(--color-text-secondary);
|
||||
|
||||
a {
|
||||
color: $text-blue;
|
||||
color: var(--color-text-link);
|
||||
}
|
||||
}
|
||||
|
||||
@ -231,22 +229,21 @@ dl.form-group > dd, // TODO: Deprecate
|
||||
textarea {
|
||||
display: block;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-bottom: $border-width dashed lighten($gray-300, 5%);
|
||||
border-bottom: $border-width dashed var(--color-upload-enabled-border);
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
&.focused {
|
||||
border-radius: $border-radius;
|
||||
box-shadow: $form-control-shadow, $btn-input-focus-shadow;
|
||||
box-shadow: var(--color-input-shadow), var(--color-state-focus-shadow);
|
||||
|
||||
.form-control {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.drag-and-drop {
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: lighten($blue-400, 8%);
|
||||
border-color: var(--color-upload-enabled-border-focused);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -272,8 +269,7 @@ dl.form-group > dd, // TODO: Deprecate
|
||||
}
|
||||
|
||||
.comment {
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border: $border-width $border-style darken($gray-300, 5%);
|
||||
border: $border-width $border-style var(--color-previewable-comment-form-border);
|
||||
}
|
||||
|
||||
.comment-form-error { margin-bottom: $spacer-2; }
|
||||
@ -334,23 +330,23 @@ h2.account {
|
||||
// stylelint-disable-next-line primer/typography
|
||||
font-size: 18px;
|
||||
font-weight: $font-weight-normal;
|
||||
color: $text-gray;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
p.explain {
|
||||
position: relative;
|
||||
font-size: $font-size-small;
|
||||
color: $text-gray;
|
||||
color: var(--color-text-secondary);
|
||||
|
||||
strong {
|
||||
color: $text-gray-dark;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.octicon {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-right: 5px;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $gray-400;
|
||||
color: var(--color-icon-tertiary);
|
||||
}
|
||||
|
||||
.minibutton {
|
||||
|
||||
@ -13,14 +13,14 @@
|
||||
font-size: $body-font-size;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: 20px; // Specifically not inherit our `<body>` default
|
||||
color: $text-gray-dark;
|
||||
color: var(--color-text-primary);
|
||||
cursor: pointer;
|
||||
border: $border-width $border-style $border-color;
|
||||
border: $border-width $border-style var(--color-border-primary);
|
||||
|
||||
:checked + & {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
border-color: $border-blue;
|
||||
border-color: var(--color-border-info);
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
|
||||
@ -4,9 +4,8 @@
|
||||
padding: $spacer-3;
|
||||
font-size: $h5-size;
|
||||
line-height: $lh-default;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $white-fade-70;
|
||||
background-color: $bg-gray-dark;
|
||||
color: var(--color-header-text);
|
||||
background-color: var(--color-header-bg);
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
@ -25,13 +24,13 @@
|
||||
|
||||
.Header-link {
|
||||
font-weight: $font-weight-bold;
|
||||
color: $text-white;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: var(--color-header-logo);
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $white-fade-70;
|
||||
color: var(--color-header-text);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,10 +8,9 @@
|
||||
font-weight: $font-weight-semibold;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: $size-2 - 2px; // remove borders
|
||||
color: $text-gray-dark;
|
||||
color: var(--color-counter-text);
|
||||
text-align: center;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: rgba($gray-300, 0.5);
|
||||
background-color: var(--color-counter-bg);
|
||||
border: $border-width $border-style transparent; // Support Firefox custom colors
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-radius: 2em;
|
||||
@ -26,12 +25,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
.Counter--gray-light {
|
||||
color: $text-gray-light;
|
||||
.Counter--primary {
|
||||
color: var(--color-counter-primary-text);
|
||||
background-color: var(--color-counter-primary-bg);
|
||||
}
|
||||
|
||||
.Counter--gray {
|
||||
color: $text-white;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: $gray-500;
|
||||
.Counter--secondary {
|
||||
color: var(--color-counter-secondary-text);
|
||||
}
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
.diffstat {
|
||||
font-size: $h6-size;
|
||||
font-weight: $font-weight-bold;
|
||||
color: $text-gray;
|
||||
color: var(--color-text-secondary);
|
||||
white-space: nowrap;
|
||||
cursor: default;
|
||||
}
|
||||
@ -22,16 +22,16 @@
|
||||
}
|
||||
|
||||
.diffstat-block-deleted {
|
||||
background-color: $bg-diffstat-deleted;
|
||||
outline: 1px dashed transparent; // Support Firefox custom colors
|
||||
background-color: var(--color-diffstat-deletion-bg);
|
||||
outline: 1px solid var(--color-diffstat-deletion-border); // Support Firefox custom colors
|
||||
}
|
||||
|
||||
.diffstat-block-added {
|
||||
background-color: $bg-diffstat-added;
|
||||
outline: 1px solid transparent; // Support Firefox custom colors
|
||||
background-color: var(--color-diffstat-addition-bg);
|
||||
outline: 1px solid var(--color-diffstat-addition-border); // Support Firefox custom colors
|
||||
}
|
||||
|
||||
.diffstat-block-neutral {
|
||||
background-color: $bg-diffstat-neutral;
|
||||
outline: 1px dotted transparent; // Support Firefox custom colors
|
||||
background-color: var(--color-diffstat-neutral-bg);
|
||||
outline: 1px solid var(--color-diffstat-neutral-border); // Support Firefox custom colors
|
||||
}
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
.Label {
|
||||
@include labels-base;
|
||||
background-color: transparent !important; // TODO: Remove again
|
||||
border-color: $border-color;
|
||||
border-color: var(--color-label-border);
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
@ -30,64 +30,34 @@
|
||||
@include labels--inline;
|
||||
}
|
||||
|
||||
// Contrast
|
||||
|
||||
.Label--outline, // TODO: Deprecate? It's now the default
|
||||
.Label--gray {
|
||||
color: $text-gray;
|
||||
border-color: $border-gray;
|
||||
}
|
||||
|
||||
.Label--gray-darker {
|
||||
color: $text-gray-dark;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: $gray-500;
|
||||
}
|
||||
|
||||
// Colors
|
||||
|
||||
.Label--yellow {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $yellow-900;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: $yellow-800;
|
||||
.Label--primary {
|
||||
color: var(--color-label-primary-text);
|
||||
border-color: var(--color-label-primary-border);
|
||||
}
|
||||
|
||||
.Label--orange {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $orange-800;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: $orange-500;
|
||||
.Label--secondary {
|
||||
color: var(--color-label-secondary-text);
|
||||
border-color: var(--color-label-secondary-border);
|
||||
}
|
||||
|
||||
.Label--red {
|
||||
color: $text-red;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: $red-600;
|
||||
.Label--info {
|
||||
color: var(--color-label-info-text);
|
||||
border-color: var(--color-label-info-border);
|
||||
}
|
||||
|
||||
.Label--outline-green, // TODO: Deprecate
|
||||
.Label--green {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $green-600;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: $green-500;
|
||||
.Label--success {
|
||||
color: var(--color-label-success-text);
|
||||
border-color: var(--color-label-success-border);
|
||||
}
|
||||
|
||||
.Label--blue {
|
||||
color: $text-blue;
|
||||
border-color: $border-blue;
|
||||
.Label--warning {
|
||||
color: var(--color-label-warning-text);
|
||||
border-color: var(--color-label-warning-border);
|
||||
}
|
||||
|
||||
.Label--purple {
|
||||
color: $text-purple;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: $purple-400;
|
||||
}
|
||||
|
||||
.Label--pink {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $pink-600;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: $pink-400;
|
||||
.Label--danger {
|
||||
color: var(--color-label-danger-text);
|
||||
border-color: var(--color-label-danger-border);
|
||||
}
|
||||
|
||||
@ -1,10 +1,4 @@
|
||||
// A rounded corner box containing a label "open" or "closed"
|
||||
// The default state is gray.
|
||||
//
|
||||
// open - $green background
|
||||
// reopened - $green background
|
||||
// closed - $red background
|
||||
// merged - $purple background
|
||||
|
||||
// Default 32px
|
||||
// Small 24px
|
||||
@ -18,26 +12,36 @@
|
||||
font-weight: $font-weight-semibold;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: 20px;
|
||||
color: $text-white;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: $gray-500;
|
||||
border: $border-width $border-style transparent; // Support Firefox custom colors
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-radius: 2em;
|
||||
}
|
||||
|
||||
.State--green {
|
||||
background-color: $bg-green;
|
||||
.state, // TODO: Deprecate
|
||||
.State,
|
||||
.State--draft {
|
||||
color: var(--color-pr-state-draft-text);
|
||||
background-color: var(--color-pr-state-draft-bg);
|
||||
border: $border-width $border-style var(--color-pr-state-draft-border);
|
||||
}
|
||||
|
||||
.State--red {
|
||||
background-color: $bg-red;
|
||||
.State--open {
|
||||
color: var(--color-pr-state-open-text);
|
||||
background-color: var(--color-pr-state-open-bg);
|
||||
border-color: var(--color-pr-state-open-border);
|
||||
}
|
||||
|
||||
.State--purple {
|
||||
background-color: $bg-purple;
|
||||
.State--merged {
|
||||
color: var(--color-pr-state-merged-text);
|
||||
background-color: var(--color-pr-state-merged-bg);
|
||||
border-color: var(--color-pr-state-merged-border);
|
||||
}
|
||||
|
||||
.State--closed {
|
||||
color: var(--color-pr-state-closed-text);
|
||||
background-color: var(--color-pr-state-closed-bg);
|
||||
border-color: var(--color-pr-state-closed-border);
|
||||
}
|
||||
|
||||
// Small
|
||||
|
||||
25
src/links/README.md
Normal file
25
src/links/README.md
Normal file
@ -0,0 +1,25 @@
|
||||
---
|
||||
bundle: "links"
|
||||
generated: true
|
||||
---
|
||||
|
||||
# Primer CSS: `links` bundle
|
||||
|
||||
## Usage
|
||||
|
||||
Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
|
||||
|
||||
```scss
|
||||
@import "@primer/css/links/index.scss";
|
||||
```
|
||||
|
||||
## Build
|
||||
|
||||
The `@primer/css` npm package includes a standalone CSS build of this module in `dist/links.css`.
|
||||
|
||||
## License
|
||||
|
||||
[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
|
||||
|
||||
|
||||
[scss]: https://sass-lang.com/documentation/syntax#scss
|
||||
3
src/links/index.scss
Normal file
3
src/links/index.scss
Normal file
@ -0,0 +1,3 @@
|
||||
// support files
|
||||
@import "../support/index.scss";
|
||||
@import "./link.scss";
|
||||
45
src/links/link.scss
Normal file
45
src/links/link.scss
Normal file
@ -0,0 +1,45 @@
|
||||
// Links
|
||||
|
||||
.Link {
|
||||
color: var(--color-text-link);
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.Link--primary {
|
||||
color: var(--color-text-primary) !important;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-text-link) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.Link--secondary {
|
||||
color: var(--color-text-secondary) !important;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-text-link) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.Link--muted {
|
||||
color: var(--color-text-secondary) !important;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-text-link) !important;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Set the link color only on hover
|
||||
// Useful when you want only part of a link to turn blue on hover
|
||||
.Link--onHover {
|
||||
&:hover {
|
||||
color: var(--color-text-link) !important;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
@ -15,7 +15,7 @@
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 10px $spacer-2 9px;
|
||||
text-align: right;
|
||||
background: $bg-white;
|
||||
background: var(--color-bg-primary);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
|
||||
th {
|
||||
font-weight: $font-weight-bold;
|
||||
background: $bg-gray;
|
||||
background: var(--color-bg-tertiary);
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,8 +8,7 @@
|
||||
margin: 0;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
font-size: 85%;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: rgba($black, 0.05);
|
||||
background-color: var(--color-markdown-code-bg);
|
||||
border-radius: $border-radius;
|
||||
|
||||
br { display: none; }
|
||||
@ -50,7 +49,7 @@
|
||||
font-size: 85%;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: 1.45;
|
||||
background-color: $bg-gray;
|
||||
background-color: var(--color-bg-tertiary);
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
line-height: $lh-condensed;
|
||||
|
||||
.octicon-link {
|
||||
color: $text-black;
|
||||
color: var(--color-text-primary);
|
||||
vertical-align: middle;
|
||||
visibility: hidden;
|
||||
}
|
||||
@ -39,7 +39,7 @@
|
||||
padding-bottom: 0.3em;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
font-size: 2em;
|
||||
border-bottom: $border-width $border-style $border-gray-light;
|
||||
border-bottom: $border-width $border-style var(--color-border-secondary);
|
||||
}
|
||||
|
||||
h2 {
|
||||
@ -47,7 +47,7 @@
|
||||
padding-bottom: 0.3em;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
font-size: 1.5em;
|
||||
border-bottom: $border-width $border-style $border-gray-light;
|
||||
border-bottom: $border-width $border-style var(--color-border-secondary);
|
||||
}
|
||||
|
||||
h3 {
|
||||
@ -67,6 +67,6 @@
|
||||
h6 {
|
||||
// stylelint-disable-next-line primer/typography
|
||||
font-size: 0.85em;
|
||||
color: $text-gray-light;
|
||||
color: var(--color-text-tertiary);
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
// because we put padding on the images to hide header lines, and some people
|
||||
// specify the width of their images in their markdown.
|
||||
box-sizing: content-box;
|
||||
background-color: $bg-white;
|
||||
background-color: var(--color-bg-primary);
|
||||
|
||||
&[align=right] {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
@ -44,8 +44,7 @@
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin: 13px 0 0;
|
||||
overflow: hidden;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border: $border-width $border-style lighten($gray-300, 5%);
|
||||
border: $border-width $border-style var(--color-markdown-frame-border);
|
||||
}
|
||||
|
||||
span img {
|
||||
@ -58,7 +57,7 @@
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 5px 0 0;
|
||||
clear: both;
|
||||
color: $text-gray-dark;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
// stylelint-disable selector-no-qualifying-type
|
||||
// stylelint-disable selector-max-type
|
||||
.markdown-body {
|
||||
|
||||
// Lists, Blockquotes & Such
|
||||
ul,
|
||||
ol {
|
||||
@ -46,11 +45,6 @@
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
// TODO@16.0.0: Remove this. See https://github.com/primer/css/pull/1137.
|
||||
word-wrap: break-all;
|
||||
}
|
||||
|
||||
li > p {
|
||||
margin-top: $spacer-3;
|
||||
}
|
||||
|
||||
@ -45,7 +45,7 @@
|
||||
|
||||
// Link Colors
|
||||
.absent {
|
||||
color: $text-red;
|
||||
color: var(--color-text-danger);
|
||||
}
|
||||
|
||||
.anchor {
|
||||
@ -77,16 +77,16 @@
|
||||
padding: 0;
|
||||
margin: $spacer-4 0;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: $gray-200;
|
||||
background-color: var(--color-border-primary);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 0 1em;
|
||||
color: $text-gray-light;
|
||||
color: var(--color-text-tertiary);
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-left: 0.25em $border-style lighten($gray-300, 5%);
|
||||
border-left: 0.25em $border-style var(--color-markdown-blockquote-border);
|
||||
|
||||
> :first-child {
|
||||
margin-top: 0;
|
||||
|
||||
@ -17,17 +17,15 @@
|
||||
td {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 6px 13px;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border: $border-width $border-style lighten($gray-300, 5%);
|
||||
border: $border-width $border-style var(--color-markdown-table-border);
|
||||
}
|
||||
|
||||
tr {
|
||||
background-color: $bg-white;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-top: $border-width $border-style darken($gray-300, 4%);
|
||||
background-color: var(--color-bg-primary);
|
||||
border-top: $border-width $border-style var(--color-markdown-table-tr-border);
|
||||
|
||||
&:nth-child(2n) {
|
||||
background-color: $bg-gray;
|
||||
background-color: var(--color-bg-tertiary);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -3,98 +3,114 @@
|
||||
padding: $spacer-3 $spacer-4;
|
||||
font-size: $h5-size;
|
||||
font-weight: $font-weight-semibold;
|
||||
color: $text-white;
|
||||
color: var(--color-mktg-btn-text);
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: $blue-mktg;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border: $border-width $border-style $blue-mktg;
|
||||
background-color: var(--color-mktg-btn-bg);
|
||||
border: $border-width $border-style var(--color-mktg-btn-border);
|
||||
border-radius: $border-radius;
|
||||
transition: $transition-time / 2;
|
||||
appearance: none; // Corrects inability to style clickable `input` types in iOS.
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
background-color: $bg-blue;
|
||||
border-color: $border-blue;
|
||||
background-color: var(--color-mktg-btn-hover-bg);
|
||||
border-color: var(--color-mktg-btn-hover-border);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: 0 0 0 0.2em rgba($blue-500, 0.3);
|
||||
box-shadow: var(--color-mktg-btn-focus-shadow);
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.disabled,
|
||||
&[aria-disabled=true] {
|
||||
color: var(--color-mktg-btn-disabled-text);
|
||||
pointer-events: none; // Disable hover styles
|
||||
cursor: default;
|
||||
opacity: 0.65;
|
||||
background-color: var(--color-mktg-btn-disabled-bg);
|
||||
border-color: var(--color-mktg-btn-disabled-border);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-primary-mktg {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: $green-mktg;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: $green-mktg;
|
||||
color: var(--color-mktg-btn-primary-text);
|
||||
background-color: var(--color-mktg-btn-primary-bg);
|
||||
border-color: var(--color-mktg-btn-primary-border);
|
||||
|
||||
&:hover {
|
||||
background-color: $bg-green;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: $green-500;
|
||||
background-color: var(--color-mktg-btn-primary-hover-bg);
|
||||
border-color: var(--color-mktg-btn-primary-hover-border);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: 0 0 0 0.2em rgba($green-500, 0.3);
|
||||
box-shadow: var(--color-mktg-btn-primary-focus-shadow);
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.disabled,
|
||||
&[aria-disabled=true] {
|
||||
color: var(--color-mktg-btn-primary-disabled-text);
|
||||
background-color: var(--color-mktg-btn-primary-disabled-bg);
|
||||
border-color: var(--color-mktg-btn-primary-disabled-border);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-outline-mktg {
|
||||
color: var(--color-mktg-btn-outline-text);
|
||||
background-color: var(--color-mktg-btn-outline-bg);
|
||||
border-color: var(--color-mktg-btn-outline-border);
|
||||
|
||||
&:hover {
|
||||
color: var(--color-mktg-btn-outline-hover-text);
|
||||
background-color: var(--color-mktg-btn-outline-hover-bg);
|
||||
border-color: var(--color-mktg-btn-outline-hover-border);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: var(--color-mktg-btn-outline-focus-shadow);
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.disabled,
|
||||
&[aria-disabled=true] {
|
||||
color: var(--color-mktg-btn-outline-disabled-text);
|
||||
background-color: var(--color-mktg-btn-outline-disabled-bg);
|
||||
border-color: var(--color-mktg-btn-outline-disabled-border);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-transparent {
|
||||
color: var(--color-mktg-btn-dark-text);
|
||||
background-color: var(--color-mktg-btn-dark-bg);
|
||||
border-color: var(--color-mktg-btn-dark-border);
|
||||
|
||||
&:hover {
|
||||
color: var(--color-mktg-btn-dark-hover-text);
|
||||
background-color: var(--color-mktg-btn-dark-hover-bg);
|
||||
border-color: var(--color-mktg-btn-dark-hover-border);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: var(--color-mktg-btn-dark-focus-shadow);
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.disabled,
|
||||
&[aria-disabled=true] {
|
||||
color: var(--color-mktg-btn-dark-disabled-text);
|
||||
background-color: var(--color-mktg-btn-dark-disabled-bg);
|
||||
border-color: var(--color-mktg-btn-dark-disabled-border);
|
||||
}
|
||||
}
|
||||
|
||||
// Large
|
||||
|
||||
.btn-large-mktg {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 20px $spacer-5;
|
||||
font-size: $h4-size;
|
||||
}
|
||||
|
||||
.btn-outline-mktg {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $blue-mktg;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: rgba($white, 0);
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: rgba($blue-mktg, 0.5);
|
||||
|
||||
&:hover {
|
||||
color: $text-blue;
|
||||
text-decoration: none;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: rgba($white, 0);
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: rgba($blue-mktg, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin btn-transparent-active {
|
||||
color: $gray-800;
|
||||
background-color: $white;
|
||||
background-image: none;
|
||||
border-color: $white;
|
||||
}
|
||||
|
||||
.btn-transparent {
|
||||
color: $text-white;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border: $border-width $border-style $white-fade-50;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
@include btn-transparent-active;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,40 +1,11 @@
|
||||
$marketing-font-path: "/fonts/" !default;
|
||||
|
||||
// Type
|
||||
@font-face {
|
||||
font-family: Inter;
|
||||
font-style: normal;
|
||||
font-weight: $font-weight-normal;
|
||||
src: local("Inter"), local("Inter-Regular"), url("#{$marketing-font-path}Inter-Regular.woff") format("woff");
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Inter;
|
||||
font-style: normal;
|
||||
font-weight: $font-weight-semibold;
|
||||
src: local("Inter Medium"), local("Inter-Medium"), url("#{$marketing-font-path}Inter-Medium.woff") format("woff");
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Inter;
|
||||
font-style: normal;
|
||||
font-weight: $font-weight-bold;
|
||||
src: local("Inter Bold"), local("Inter-Bold"), url("#{$marketing-font-path}Inter-Bold.woff") format("woff");
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
$font-mktg: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
|
||||
|
||||
// Builds upon @primer/css/support/variables/typography.scss
|
||||
$h000-size: 64px !default;
|
||||
$h000-size-mobile: 48px !default;
|
||||
|
||||
// Colors
|
||||
$green-mktg: mix($green-500, $green-400, 50%) !default;
|
||||
$blue-mktg: mix($blue-400, $blue-500, 42%) !default;
|
||||
|
||||
// Animations
|
||||
$transition-time: 0.4s !default;
|
||||
|
||||
|
||||
@ -1,5 +1,29 @@
|
||||
// Headings
|
||||
// Type
|
||||
@font-face {
|
||||
font-family: Inter;
|
||||
font-style: normal;
|
||||
font-weight: $font-weight-normal;
|
||||
src: local("Inter"), local("Inter-Regular"), url("#{$marketing-font-path}Inter-Regular.woff") format("woff");
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Inter;
|
||||
font-style: normal;
|
||||
font-weight: $font-weight-semibold;
|
||||
src: local("Inter Medium"), local("Inter-Medium"), url("#{$marketing-font-path}Inter-Medium.woff") format("woff");
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Inter;
|
||||
font-style: normal;
|
||||
font-weight: $font-weight-bold;
|
||||
src: local("Inter Bold"), local("Inter-Bold"), url("#{$marketing-font-path}Inter-Bold.woff") format("woff");
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
// Headings
|
||||
.h000-mktg,
|
||||
.h00-mktg,
|
||||
.h0-mktg,
|
||||
@ -86,8 +110,8 @@
|
||||
font-family: $mono-font;
|
||||
font-size: $h4-size;
|
||||
line-height: 1.4;
|
||||
color: $text-gray;
|
||||
border-left: 3px solid $border-color;
|
||||
color: var(--color-color-text-secondary);
|
||||
border-left: 3px solid var(--color-border-primary);
|
||||
|
||||
@include breakpoint(md) {
|
||||
padding-left: $spacer * 1.5;
|
||||
|
||||
@ -4,4 +4,5 @@
|
||||
@import "./borders.scss";
|
||||
@import "./layout.scss";
|
||||
@import "./margin.scss";
|
||||
@import "./misc.scss";
|
||||
@import "./padding.scss";
|
||||
|
||||
5
src/marketing/utilities/misc.scss
Normal file
5
src/marketing/utilities/misc.scss
Normal file
@ -0,0 +1,5 @@
|
||||
.bg-shade-gradient {
|
||||
background-image: linear-gradient(180deg, var(--color-mktg-bg-shade-gradient-top), var(--color-mktg-bg-shade-gradient-bottom)) !important;
|
||||
background-repeat: no-repeat !important;
|
||||
background-size: 100% 200px !important;
|
||||
}
|
||||
@ -11,12 +11,12 @@
|
||||
}
|
||||
|
||||
&.pjax-active .filter-item {
|
||||
color: $text-gray;
|
||||
color: var(--color-text-secondary);
|
||||
background-color: transparent;
|
||||
|
||||
&.pjax-active {
|
||||
color: $text-white;
|
||||
background-color: $bg-blue;
|
||||
color: var(--color-text-inverse);
|
||||
background-color: var(--color-bg-info-inverse);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -28,7 +28,7 @@
|
||||
margin-bottom: $spacer-1;
|
||||
overflow: hidden;
|
||||
font-size: $h5-size;
|
||||
color: $text-gray;
|
||||
color: var(--color-text-secondary);
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@ -37,14 +37,14 @@
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
background-color: $bg-gray;
|
||||
background-color: var(--color-bg-tertiary);
|
||||
}
|
||||
|
||||
&.selected,
|
||||
&[aria-selected=true],
|
||||
&[aria-current]:not([aria-current=false]) {
|
||||
color: $text-white;
|
||||
background-color: $bg-blue;
|
||||
color: var(--color-state-selected-primary-text);
|
||||
background-color: var(--color-state-selected-primary-bg);
|
||||
}
|
||||
|
||||
.count {
|
||||
@ -59,7 +59,6 @@
|
||||
bottom: 2px;
|
||||
z-index: -1;
|
||||
display: inline-block;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: darken($gray-100, 2%);
|
||||
background-color: var(--color-filter-item-bar-bg);
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,8 +5,8 @@
|
||||
.menu {
|
||||
margin-bottom: $spacer-3;
|
||||
list-style: none;
|
||||
background-color: $bg-white;
|
||||
border: $border;
|
||||
background-color: var(--color-bg-primary);
|
||||
border: $border-width $border-style var(--color-border-primary);
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
@ -14,8 +14,8 @@
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: $spacer-2 $spacer-3;
|
||||
color: $text-black;
|
||||
border-bottom: $border-width $border-style $border-gray-light;
|
||||
color: var(--color-text-primary);
|
||||
border-bottom: $border-width $border-style var(--color-border-secondary);
|
||||
|
||||
&:first-child {
|
||||
border-top: 0;
|
||||
@ -36,19 +36,19 @@
|
||||
&:focus,
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: $gray-100;
|
||||
background-color: var(--color-state-hover-secondary-bg);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: $bg-gray-light;
|
||||
background-color: var(--color-bg-secondary);
|
||||
}
|
||||
|
||||
&.selected,
|
||||
&[aria-selected=true],
|
||||
&[aria-current]:not([aria-current=false]) {
|
||||
cursor: default;
|
||||
background-color: var(--color-menu-bg-active);
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
@ -58,7 +58,7 @@
|
||||
width: 2px;
|
||||
content: "";
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: #f9826c; // custom coral
|
||||
background-color: var(--color-menu-border-active);
|
||||
}
|
||||
}
|
||||
|
||||
@ -66,7 +66,7 @@
|
||||
width: 16px;
|
||||
margin-right: $spacer-2;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $gray-400;
|
||||
color: var(--color-icon-tertiary);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@ -78,7 +78,7 @@
|
||||
.menu-warning {
|
||||
float: right;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $red-900;
|
||||
color: var(--color-auto-red-9);
|
||||
}
|
||||
|
||||
.avatar {
|
||||
@ -88,7 +88,7 @@
|
||||
|
||||
&.alert {
|
||||
.Counter {
|
||||
color: $text-red;
|
||||
color: var(--color-text-danger);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -100,8 +100,8 @@
|
||||
margin-bottom: 0;
|
||||
font-size: inherit;
|
||||
font-weight: $font-weight-bold;
|
||||
color: $text-black;
|
||||
border-bottom: $border-width $border-style $border-gray-light;
|
||||
color: var(--color-menu-heading-text);
|
||||
border-bottom: $border-width $border-style var(--color-border-secondary);
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
// A vertical list of navigational links, typically used on the left side of a page.
|
||||
|
||||
.SideNav {
|
||||
background-color: $bg-gray-light;
|
||||
background-color: var(--color-bg-secondary);
|
||||
}
|
||||
|
||||
.SideNav-item {
|
||||
@ -12,11 +12,11 @@
|
||||
width: 100%;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 12px $spacer-3;
|
||||
color: $text-black;
|
||||
color: var(--color-text-primary);
|
||||
text-align: left;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
border-top: $border-width $border-style $border-gray-light;
|
||||
border-top: $border-width $border-style var(--color-border-secondary);
|
||||
|
||||
&:first-child {
|
||||
border-top: 0;
|
||||
@ -25,7 +25,7 @@
|
||||
&:last-child {
|
||||
// makes sure there is a "bottom border" in case the list is not long enough
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: 0 $border-width 0 $border-color;
|
||||
box-shadow: 0 $border-width 0 var(--color-border-primary);
|
||||
}
|
||||
|
||||
// Bar on the left
|
||||
@ -46,23 +46,22 @@
|
||||
.SideNav-item:hover,
|
||||
.SideNav-item:focus {
|
||||
text-decoration: none;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: $gray-100;
|
||||
background-color: var(--color-state-hover-secondary-bg);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.SideNav-item:active {
|
||||
background-color: $bg-gray-light;
|
||||
background-color: var(--color-bg-secondary);
|
||||
}
|
||||
|
||||
.SideNav-item[aria-current]:not([aria-current=false]),
|
||||
.SideNav-item[aria-selected="true"] {
|
||||
background-color: $bg-white;
|
||||
background-color: var(--color-sidenav-selected-bg);
|
||||
|
||||
// Bar on the left
|
||||
&::before {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: #f9826c; // custom coral
|
||||
background-color: var(--color-sidenav-border-active);
|
||||
}
|
||||
}
|
||||
|
||||
@ -73,7 +72,7 @@
|
||||
.SideNav-icon {
|
||||
width: 16px;
|
||||
margin-right: $spacer-2;
|
||||
color: $text-gray-light;
|
||||
color: var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
// Sub Nav
|
||||
@ -85,7 +84,7 @@
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: $spacer-1 0;
|
||||
color: $text-blue;
|
||||
color: var(--color-text-link);
|
||||
text-align: left;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
@ -93,7 +92,7 @@
|
||||
|
||||
.SideNav-subItem:hover,
|
||||
.SideNav-subItem:focus {
|
||||
color: $text-gray-dark;
|
||||
color: var(--color-text-primary);
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
}
|
||||
@ -101,5 +100,5 @@
|
||||
.SideNav-subItem[aria-current]:not([aria-current=false]),
|
||||
.SideNav-subItem[aria-selected="true"] {
|
||||
font-weight: $font-weight-semibold;
|
||||
color: $text-gray-dark;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
.subnav-bordered {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding-bottom: 20px;
|
||||
border-bottom: $border-width $border-style $border-gray-light;
|
||||
border-bottom: $border-width $border-style var(--color-border-secondary);
|
||||
}
|
||||
|
||||
.subnav-flush {
|
||||
@ -25,8 +25,8 @@
|
||||
font-weight: $font-weight-semibold;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: 20px;
|
||||
color: $text-gray-dark;
|
||||
border: $border;
|
||||
color: var(--color-text-primary);
|
||||
border: $border-width $border-style var(--color-border-primary);
|
||||
|
||||
+ .subnav-item {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
@ -36,17 +36,16 @@
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
background-color: $bg-gray;
|
||||
background-color: var(--color-bg-tertiary);
|
||||
}
|
||||
|
||||
&.selected,
|
||||
&[aria-selected=true],
|
||||
&[aria-current]:not([aria-current=false]) {
|
||||
z-index: 2;
|
||||
color: $text-white;
|
||||
background-color: $bg-blue;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: $blue-600;
|
||||
color: var(--color-state-selected-primary-text);
|
||||
background-color: var(--color-state-selected-primary-bg);
|
||||
border-color: var(--color-state-selected-primary-border);
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
@ -69,7 +68,7 @@
|
||||
.subnav-search-input {
|
||||
width: 320px;
|
||||
padding-left: $spacer-5;
|
||||
color: $text-gray;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.subnav-search-input-wide {
|
||||
@ -82,15 +81,13 @@
|
||||
left: 8px;
|
||||
display: block;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $gray-400;
|
||||
color: var(--color-icon-tertiary);
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.subnav-search-context {
|
||||
.btn {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $gray-700;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
.tabnav {
|
||||
margin-top: 0;
|
||||
margin-bottom: $spacer-3;
|
||||
border-bottom: $border;
|
||||
border-bottom: $border-width $border-style var(--color-border-primary);
|
||||
}
|
||||
|
||||
.tabnav-tabs {
|
||||
@ -20,38 +20,46 @@
|
||||
font-size: $h5-size;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: 23px;
|
||||
color: $text-gray-dark;
|
||||
color: var(--color-text-secondary);
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
border: $border-width $border-style transparent;
|
||||
border-bottom: 0;
|
||||
transition: color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
|
||||
|
||||
&.selected,
|
||||
&[aria-selected=true],
|
||||
&[aria-current]:not([aria-current=false]) {
|
||||
background-color: $bg-white;
|
||||
border-color: $border-gray;
|
||||
color: var(--color-text-primary);
|
||||
background-color: var(--color-bg-canvas); // cover bottom border
|
||||
border-color: var(--color-border-primary);
|
||||
border-radius: $border-radius $border-radius 0 0;
|
||||
|
||||
.octicon {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $text-gray;
|
||||
color: var(--color-text-primary);
|
||||
text-decoration: none;
|
||||
transition-duration: 0.1s;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: $text-gray-light;
|
||||
color: var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
.octicon {
|
||||
margin-right: $spacer-1;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $gray-400;
|
||||
color: var(--color-icon-tertiary);
|
||||
}
|
||||
|
||||
.Counter {
|
||||
margin-left: $spacer-1;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@ -67,7 +75,7 @@
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-left: 10px;
|
||||
font-size: $font-size-small;
|
||||
color: $text-gray;
|
||||
color: var(--color-text-secondary);
|
||||
|
||||
> .octicon {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
@ -78,7 +86,7 @@
|
||||
// When tabnav-extra are anchors
|
||||
// stylelint-disable-next-line selector-no-qualifying-type
|
||||
a.tabnav-extra:hover {
|
||||
color: $text-blue;
|
||||
color: var(--color-text-link);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: inset 0 -1px 0 $border-color;
|
||||
box-shadow: inset 0 -1px 0 var(--color-border-secondary);
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
@ -16,36 +16,36 @@
|
||||
font-size: $body-font-size;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: 30px;
|
||||
color: $text-black;
|
||||
color: var(--color-underlinenav-text);
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-bottom: 2px $border-style rgba($border-gray-dark, 0);
|
||||
transition: border-bottom-color 0.36s ease-in;
|
||||
border-bottom: 2px $border-style transparent;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--color-underlinenav-text-hover);
|
||||
text-decoration: none;
|
||||
border-bottom-color: $border-gray-dark;
|
||||
border-bottom-color: var(--color-border-tertiary);
|
||||
outline: 1px dotted transparent; // Support Firefox custom colors
|
||||
outline-offset: -1px;
|
||||
transition-timing-function: ease-out;
|
||||
transition-duration: 0.12s;
|
||||
transition: border-bottom-color 0.12s ease-out;
|
||||
}
|
||||
|
||||
&.selected,
|
||||
&[role=tab][aria-selected=true],
|
||||
&[aria-current]:not([aria-current=false]) {
|
||||
font-weight: $font-weight-bold;
|
||||
color: var(--color-underlinenav-text-active);
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-bottom-color: #f9826c; // custom coral
|
||||
outline: 1px dotted transparent; // Support Firefox custom colors
|
||||
outline-offset: -1px;
|
||||
|
||||
.UnderlineNav-octicon {
|
||||
color: $text-gray;
|
||||
color: var(--color-text-tertiary);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -69,11 +69,16 @@
|
||||
.UnderlineNav-octicon {
|
||||
margin-right: $spacer-1;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $gray-400;
|
||||
color: var(--color-underlinenav-icon);
|
||||
}
|
||||
|
||||
.UnderlineNav .Counter {
|
||||
margin-left: $spacer-1;
|
||||
color: var(--color-underlinenav-counter-text);
|
||||
|
||||
&--primary {
|
||||
color: var(--color-counter-primary-text);
|
||||
}
|
||||
}
|
||||
|
||||
.UnderlineNav-container {
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
font-style: normal;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: 20px;
|
||||
color: $text-gray-dark;
|
||||
color: var(--color-text-primary);
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
@ -24,27 +24,27 @@
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
border-color: $border-color;
|
||||
border-color: var(--color-border-primary);
|
||||
outline: 0;
|
||||
transition-duration: 0.1s;
|
||||
}
|
||||
|
||||
&:active {
|
||||
border-color: $border-gray-light;
|
||||
border-color: var(--color-border-secondary);
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.previous_page,
|
||||
.next_page {
|
||||
color: $text-blue;
|
||||
color: var(--color-text-link);
|
||||
}
|
||||
|
||||
.current,
|
||||
.current:hover,
|
||||
[aria-current]:not([aria-current=false]) {
|
||||
color: $text-white;
|
||||
background-color: $bg-blue;
|
||||
color: var(--color-state-selected-primary-text);
|
||||
background-color: var(--color-state-selected-primary-bg);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
@ -54,7 +54,7 @@
|
||||
.gap:hover,
|
||||
.disabled:hover,
|
||||
[aria-disabled=true]:hover {
|
||||
color: $text-gray-light;
|
||||
color: var(--color-text-disabled);
|
||||
cursor: default;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
margin-left: -9px;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border: $spacer-2 $border-style transparent;
|
||||
border-bottom-color: $border-black-fade;
|
||||
border-bottom-color: var(--color-border-overlay);
|
||||
}
|
||||
|
||||
&::after {
|
||||
@ -33,7 +33,12 @@
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border: 7px $border-style transparent;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-bottom-color: $bg-white;
|
||||
border-bottom-color: var(--color-bg-overlay);
|
||||
}
|
||||
|
||||
// TODO: Refactor so that .Popover is not dependant on .Box
|
||||
&.Box {
|
||||
background-color: var(--color-bg-overlay);
|
||||
}
|
||||
}
|
||||
|
||||
@ -49,13 +54,13 @@
|
||||
|
||||
&::before {
|
||||
bottom: -$spacer-3;
|
||||
border-top-color: $border-black-fade;
|
||||
border-top-color: var(--color-border-overlay);
|
||||
}
|
||||
|
||||
&::after {
|
||||
bottom: -14px;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-top-color: $bg-white;
|
||||
border-top-color: var(--color-bg-overlay);
|
||||
}
|
||||
}
|
||||
|
||||
@ -128,13 +133,13 @@
|
||||
.Popover-message--right-bottom {
|
||||
&::before {
|
||||
right: -$spacer-3;
|
||||
border-left-color: $border-black-fade;
|
||||
border-left-color: var(--color-border-overlay);
|
||||
}
|
||||
|
||||
&::after {
|
||||
right: -14px;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-left-color: $bg-white;
|
||||
border-left-color: var(--color-bg-overlay);
|
||||
}
|
||||
}
|
||||
|
||||
@ -144,13 +149,13 @@
|
||||
.Popover-message--left-bottom {
|
||||
&::before {
|
||||
left: -$spacer-3;
|
||||
border-right-color: $border-black-fade;
|
||||
border-right-color: var(--color-border-overlay);
|
||||
}
|
||||
|
||||
&::after {
|
||||
left: -14px;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-right-color: $bg-white;
|
||||
border-right-color: var(--color-bg-overlay);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
height: 8px;
|
||||
overflow: hidden;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: $gray-200;
|
||||
background-color: var(--color-auto-gray-2);
|
||||
border-radius: $border-radius;
|
||||
outline: 1px solid transparent; // Support Firefox custom colors
|
||||
}
|
||||
|
||||
@ -41,7 +41,7 @@ $SelectMenu-max-height: 480px !default;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
background-color: $bg-black-fade;
|
||||
background-color: var(--color-select-menu-backdrop-bg);
|
||||
|
||||
@include breakpoint(sm) {
|
||||
display: none;
|
||||
@ -61,11 +61,11 @@ $SelectMenu-max-height: 480px !default;
|
||||
overflow: hidden; // Enables border radius on scrollable child elements
|
||||
pointer-events: auto;
|
||||
flex-direction: column;
|
||||
background-color: $bg-white;
|
||||
background-color: var(--color-bg-overlay);
|
||||
border: $border-width $border-style var(--color-select-menu-backdrop-border);
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-radius: $border-radius * 2;
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: 0 0 18px rgba($black, 0.4);
|
||||
box-shadow: var(--color-select-menu-shadow);
|
||||
animation: SelectMenu-modal-animation 0.12s cubic-bezier(0, 0.1, 0.1, 1) backwards;
|
||||
|
||||
@keyframes SelectMenu-modal-animation {
|
||||
@ -88,9 +88,9 @@ $SelectMenu-max-height: 480px !default;
|
||||
max-height: $SelectMenu-max-height;
|
||||
margin: $spacer-2 0 $spacer-3 0;
|
||||
font-size: $font-size-small;
|
||||
border: $border;
|
||||
border-color: var(--color-border-overlay);
|
||||
border-radius: $border-radius;
|
||||
box-shadow: $box-shadow-large;
|
||||
box-shadow: var(--color-shadow-large);
|
||||
animation-name: SelectMenu-modal-animation--sm;
|
||||
}
|
||||
}
|
||||
@ -104,7 +104,7 @@ $SelectMenu-max-height: 480px !default;
|
||||
padding: $spacer-3;
|
||||
flex: none; // fixes header from getting squeezed in Safari iOS
|
||||
align-items: center;
|
||||
border-bottom: $border-width $border-style $border-gray-light;
|
||||
border-bottom: $border-width $border-style var(--color-select-menu-border-secondary);
|
||||
|
||||
@include breakpoint(sm) {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
@ -127,7 +127,7 @@ $SelectMenu-max-height: 480px !default;
|
||||
margin: -$spacer-3;
|
||||
line-height: 1;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $gray-light;
|
||||
color: var(--color-icon-tertiary);
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
|
||||
@ -145,7 +145,7 @@ $SelectMenu-max-height: 480px !default;
|
||||
.SelectMenu-filter {
|
||||
padding: $spacer-3;
|
||||
margin: 0;
|
||||
border-bottom: $border-width $border-style $border-gray-light;
|
||||
border-bottom: $border-width $border-style var(--color-select-menu-border-secondary);
|
||||
|
||||
@include breakpoint(sm) {
|
||||
padding: $spacer-2;
|
||||
@ -174,7 +174,7 @@ $SelectMenu-max-height: 480px !default;
|
||||
flex: auto;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
background-color: $bg-white;
|
||||
background-color: var(--color-bg-overlay);
|
||||
-webkit-overflow-scrolling: touch; // Adds momentum + bouncy scrolling
|
||||
}
|
||||
|
||||
@ -188,12 +188,12 @@ $SelectMenu-max-height: 480px !default;
|
||||
width: 100%;
|
||||
padding: $spacer-3;
|
||||
overflow: hidden;
|
||||
color: $text-gray-dark;
|
||||
color: var(--color-text-primary);
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
background-color: $bg-white;
|
||||
background-color: var(--color-bg-overlay);
|
||||
border: 0;
|
||||
border-bottom: $border-width $border-style $border-gray-light;
|
||||
border-bottom: $border-width $border-style var(--color-select-menu-border-secondary);
|
||||
|
||||
@include breakpoint(sm) {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
@ -235,7 +235,7 @@ $SelectMenu-max-height: 480px !default;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: inset 0 -1px 0 $border-gray-light;
|
||||
box-shadow: inset 0 -1px 0 var(--color-select-menu-border-secondary);
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
// Hide scrollbar so it doesn't cover the text
|
||||
@ -253,12 +253,12 @@ $SelectMenu-max-height: 480px !default;
|
||||
padding: $spacer-2 $spacer-3;
|
||||
font-size: $font-size-small;
|
||||
font-weight: $font-weight-semibold;
|
||||
color: $text-gray-light;
|
||||
color: var(--color-text-tertiary);
|
||||
text-align: center;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: inset 0 -1px 0 $border-gray-light;
|
||||
box-shadow: inset 0 -1px 0 var(--color-select-menu-border-secondary);
|
||||
|
||||
@include breakpoint(sm) {
|
||||
flex: none;
|
||||
@ -271,14 +271,14 @@ $SelectMenu-max-height: 480px !default;
|
||||
|
||||
&[aria-selected="true"] {
|
||||
z-index: 1; // Keeps box-shadow visible when hovering
|
||||
color: $text-gray-dark;
|
||||
color: var(--color-text-primary);
|
||||
cursor: default;
|
||||
background-color: $bg-white;
|
||||
background-color: var(--color-bg-overlay);
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: 0 0 0 1px $border-gray-light;
|
||||
box-shadow: 0 0 0 1px var(--color-select-menu-border-secondary);
|
||||
|
||||
@include breakpoint(sm) {
|
||||
border-color: $border-gray-light;
|
||||
border-color: var(--color-select-menu-border-secondary);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
@ -292,8 +292,8 @@ $SelectMenu-max-height: 480px !default;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 7px $spacer-3;
|
||||
text-align: center;
|
||||
background-color: $bg-white;
|
||||
border-bottom: $border-width $border-style $border-gray-light;
|
||||
background-color: var(--color-bg-overlay);
|
||||
border-bottom: $border-width $border-style var(--color-select-menu-border-secondary);
|
||||
}
|
||||
|
||||
// Blankslate and Loading
|
||||
@ -304,7 +304,7 @@ $SelectMenu-max-height: 480px !default;
|
||||
.SelectMenu-loading {
|
||||
padding: $spacer-4 $spacer-3;
|
||||
text-align: center;
|
||||
background-color: $bg-white;
|
||||
background-color: var(--color-bg-overlay);
|
||||
}
|
||||
|
||||
// Divider
|
||||
@ -316,13 +316,13 @@ $SelectMenu-max-height: 480px !default;
|
||||
margin: 0;
|
||||
font-size: $font-size-small;
|
||||
font-weight: $font-weight-semibold;
|
||||
color: $text-gray-light;
|
||||
background-color: $bg-gray;
|
||||
border-bottom: $border-width $border-style $border-gray-light;
|
||||
color: var(--color-text-tertiary);
|
||||
background-color: var(--color-bg-tertiary);
|
||||
border-bottom: $border-width $border-style var(--color-select-menu-border-secondary);
|
||||
|
||||
// Borderless
|
||||
.SelectMenu-list--borderless & {
|
||||
border-top: $border-width $border-style $border-gray-light;
|
||||
border-top: $border-width $border-style var(--color-select-menu-border-secondary);
|
||||
|
||||
&:empty {
|
||||
padding: 0;
|
||||
@ -339,9 +339,9 @@ $SelectMenu-max-height: 480px !default;
|
||||
z-index: 0; // Avoid top border from getting covered by the negative margin of the list
|
||||
padding: $spacer-2 $spacer-3;
|
||||
font-size: $font-size-small;
|
||||
color: $text-gray-light;
|
||||
color: var(--color-text-tertiary);
|
||||
text-align: center;
|
||||
border-top: $border-width $border-style $border-gray-light;
|
||||
border-top: $border-width $border-style var(--color-select-menu-border-secondary);
|
||||
|
||||
@include breakpoint(sm) {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
@ -389,7 +389,7 @@ $SelectMenu-max-height: 480px !default;
|
||||
|
||||
.SelectMenu-item[aria-checked=true] {
|
||||
font-weight: $font-weight-semibold;
|
||||
color: $text-gray-dark;
|
||||
color: var(--color-text-primary);
|
||||
|
||||
.SelectMenu-icon--check {
|
||||
visibility: visible;
|
||||
@ -404,7 +404,7 @@ $SelectMenu-max-height: 480px !default;
|
||||
|
||||
.SelectMenu-item:disabled,
|
||||
.SelectMenu-item[aria-disabled=true] {
|
||||
color: $text-gray-light;
|
||||
color: var(--color-text-disabled);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@ -415,34 +415,33 @@ $SelectMenu-max-height: 480px !default;
|
||||
@media (hover: hover) {
|
||||
body:not(.intent-mouse) .SelectMenu-closeButton:focus,
|
||||
.SelectMenu-closeButton:hover {
|
||||
color: $text-gray-dark;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.SelectMenu-closeButton:active {
|
||||
color: $text-gray;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
body:not(.intent-mouse) .SelectMenu-item:focus,
|
||||
.SelectMenu-item:hover {
|
||||
background-color: $bg-gray;
|
||||
background-color: var(--color-state-hover-secondary-bg);
|
||||
}
|
||||
|
||||
.SelectMenu-item:active {
|
||||
background-color: $bg-gray-light;
|
||||
background-color: var(--color-bg-secondary);
|
||||
}
|
||||
|
||||
body:not(.intent-mouse) .SelectMenu-tab:focus {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: $blue-100;
|
||||
background-color: var(--color-select-menu-tap-focus-bg);
|
||||
}
|
||||
|
||||
.SelectMenu-tab:hover {
|
||||
color: $text-gray-dark;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.SelectMenu-tab:not([aria-selected="true"]):active {
|
||||
color: $text-gray-dark;
|
||||
background-color: $bg-gray;
|
||||
color: var(--color-text-primary);
|
||||
background-color: var(--color-bg-tertiary);
|
||||
}
|
||||
}
|
||||
|
||||
@ -454,13 +453,13 @@ $SelectMenu-max-height: 480px !default;
|
||||
// Android
|
||||
.SelectMenu-item:focus,
|
||||
.SelectMenu-item:active {
|
||||
background-color: $bg-gray-light;
|
||||
background-color: var(--color-bg-secondary);
|
||||
}
|
||||
|
||||
// iOS Safari
|
||||
// :active would work if ontouchstart is added to the button
|
||||
// Instead this tweaks the "native" highlight color
|
||||
.SelectMenu-item {
|
||||
-webkit-tap-highlight-color: rgba($gray-300, 0.5);
|
||||
-webkit-tap-highlight-color: var(--color-select-menu-tap-highlight);
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
display: flex;
|
||||
padding-bottom: $spacer-2;
|
||||
margin-bottom: $spacer-3;
|
||||
border-bottom: $border;
|
||||
border-bottom: $border-width $border-style var(--color-border-secondary);
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
|
||||
@ -22,13 +22,13 @@
|
||||
// Make the text bold and red for dangerous content
|
||||
.Subhead-heading--danger {
|
||||
font-weight: $font-weight-bold;
|
||||
color: $text-red;
|
||||
color: var(--color-text-danger);
|
||||
}
|
||||
|
||||
// One-liner of supporting text
|
||||
.Subhead-description {
|
||||
font-size: $body-font-size;
|
||||
color: $text-gray;
|
||||
color: var(--color-text-secondary);
|
||||
flex: 1 100%;
|
||||
}
|
||||
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
// variables
|
||||
@import "./variables/typography.scss";
|
||||
@import "./variables/colors.scss";
|
||||
@import "./variables/layout.scss";
|
||||
@import "./variables/misc.scss";
|
||||
|
||||
// mixins
|
||||
@import "./mixins/color-modes.scss";
|
||||
@import "./mixins/typography.scss";
|
||||
@import "./mixins/layout.scss";
|
||||
@import "./mixins/buttons.scss";
|
||||
@import "./mixins/misc.scss";
|
||||
|
||||
@ -1,172 +0,0 @@
|
||||
|
||||
// TODO: See if the mixins below can be deprecated
|
||||
// Might still be needed for .btn-blue
|
||||
// ------------------------------------------------------------------
|
||||
|
||||
// Button color generator for primary and themed buttons
|
||||
|
||||
// New button hotness
|
||||
@mixin btn-solid($color, $bg, $bg2) {
|
||||
color: $color;
|
||||
background-color: $bg2;
|
||||
background-image: linear-gradient(-180deg, $bg 0%, $bg2 90%);
|
||||
|
||||
@if $bg == $gray-000 {
|
||||
&:focus,
|
||||
&.focus {
|
||||
box-shadow: $btn-input-focus-shadow;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.hover {
|
||||
background-color: darken($bg2, 3%);
|
||||
background-image: linear-gradient(-180deg, darken($bg, 3%) 0%, darken($bg2, 3%) 90%);
|
||||
background-position: 0 -$em-spacer-5;
|
||||
border-color: rgba($black, 0.35);
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.selected,
|
||||
&[aria-selected=true],
|
||||
[open] > & {
|
||||
background-color: darken(desaturate($bg, 10%), 6%);
|
||||
background-image: none;
|
||||
border-color: rgba($black, 0.35); // repeat to avoid shift on click-drag off of button
|
||||
box-shadow: $btn-active-shadow;
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.disabled,
|
||||
&[aria-disabled=true] {
|
||||
color: rgba($color, 0.4);
|
||||
background-color: $bg2;
|
||||
background-image: none;
|
||||
border-color: $border-color-button;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
}
|
||||
@else {
|
||||
&:focus,
|
||||
&.focus {
|
||||
box-shadow: 0 0 0 0.2em rgba($bg, 0.4);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.hover {
|
||||
background-color: darken($bg2, 2%);
|
||||
background-image: linear-gradient(-180deg, darken($bg, 2%) 0%, darken($bg2, 2%) 90%);
|
||||
background-position: 0 -$em-spacer-5;
|
||||
border-color: $black-fade-50;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.selected,
|
||||
&[aria-selected=true],
|
||||
[open] > & {
|
||||
background-color: darken(mix($bg, $bg2, 50%), 7%);
|
||||
background-image: none;
|
||||
border-color: $black-fade-50; // repeat to avoid shift on click-drag off of button
|
||||
box-shadow: $btn-active-shadow;
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.disabled,
|
||||
&[aria-disabled=true] {
|
||||
color: rgba($color, 0.75);
|
||||
background-color: mix($bg2, $white, 50%);
|
||||
background-image: none;
|
||||
border-color: $border-color-button;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.Counter {
|
||||
color: darken($bg, 8%);
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Inverse button hover style
|
||||
@mixin btn-inverse($color, $bg, $bg2) {
|
||||
color: $color;
|
||||
background-color: $bg;
|
||||
background-image: linear-gradient(-180deg, $bg 0%, $bg2 90%);
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 0.2em rgba($color, 0.4);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $text-white;
|
||||
background-color: $color;
|
||||
background-image: linear-gradient(-180deg, lighten($color, 10%) 0%, $color 90%);
|
||||
border-color: $black-fade-50;
|
||||
|
||||
.Counter {
|
||||
color: $text-white;
|
||||
}
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.selected,
|
||||
&[aria-selected=true],
|
||||
[open] > & {
|
||||
color: $text-white;
|
||||
background-color: darken($color, 5%);
|
||||
background-image: none;
|
||||
border-color: $black-fade-50;
|
||||
box-shadow: $btn-active-shadow;
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.disabled,
|
||||
&[aria-disabled=true] {
|
||||
color: rgba($color, 0.4);
|
||||
background-color: $bg2;
|
||||
background-image: none;
|
||||
border-color: $border-color-button;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Outline color generator for btn-outline to make the hover state inverse the text and bg colors.
|
||||
@mixin btn-outline($text-color: $text-blue, $bg-color: $bg-white) {
|
||||
color: $text-color;
|
||||
background-color: $bg-color;
|
||||
background-image: none;
|
||||
|
||||
.Counter {
|
||||
background-color: rgba($black, 0.07);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&.selected,
|
||||
&[aria-selected=true],
|
||||
[open] > & {
|
||||
color: $bg-color;
|
||||
background-color: $text-color;
|
||||
background-image: none;
|
||||
border-color: $text-color;
|
||||
|
||||
.Counter {
|
||||
color: $text-color;
|
||||
background-color: $bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: $text-color;
|
||||
box-shadow: 0 0 0 0.2em rgba($text-color, 0.4);
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.disabled,
|
||||
&[aria-disabled=true] {
|
||||
color: $black-fade-30;
|
||||
background-color: $bg-white;
|
||||
border-color: $black-fade-15;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
100
src/support/mixins/color-modes.scss
Normal file
100
src/support/mixins/color-modes.scss
Normal file
@ -0,0 +1,100 @@
|
||||
@mixin color-mode-theme($theme-name, $type, $include-root: false) {
|
||||
@if $include-root {
|
||||
:root,
|
||||
[data-color-mode="#{$type}"][data-#{$type}-theme="#{$theme-name}"] {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
[data-color-mode="#{$type}"][data-#{$type}-theme="#{$theme-name}"] {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
[data-color-mode="auto"][data-light-theme="#{$theme-name}"] {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
[data-color-mode="auto"][data-dark-theme="#{$theme-name}"] {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin color-mode($mode) {
|
||||
@if $mode == light {
|
||||
:root,
|
||||
[data-color-mode="#{$mode}"][data-#{$mode}-theme*="#{$mode}"] {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
[data-color-mode="#{$mode}"][data-#{$mode}-theme*="#{$mode}"] {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
[data-color-mode="auto"][data-light-theme*="#{$mode}"] {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
[data-color-mode="auto"][data-dark-theme*="#{$mode}"] {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// This mixin takes a map of color mode vars and splits them into dark and light mode
|
||||
// The goal is to reduce the amount of dark/light mode selectors compiled
|
||||
//
|
||||
// Example input for $color-map
|
||||
//
|
||||
// @include color-variables(("custom-css-variable-1": (
|
||||
// light: var(--color-scale-gray-3),
|
||||
// dark: var(--color-scale-gray-5)
|
||||
// ),
|
||||
// "custom-css-variable-2": (
|
||||
// light: var(--color-scale-gray-2),
|
||||
// dark: var(--color-scale-gray-6)
|
||||
// ),
|
||||
// "custom-css-variable-3": (
|
||||
// light: var(--color-scale-gray-2),
|
||||
// dark: var(--color-scale-gray-6)
|
||||
// )
|
||||
// ));
|
||||
@mixin color-variables($color-map) {
|
||||
// Create map to store incoming variables
|
||||
$dark-colors: ();
|
||||
$light-colors: ();
|
||||
|
||||
@each $name, $value in $color-map {
|
||||
@each $type, $color in $value {
|
||||
@if $type == dark {
|
||||
$dark-colors: append($dark-colors, (--color-#{$name}, #{$color}));
|
||||
}
|
||||
@else {
|
||||
$light-colors: append($light-colors, (--color-#{$name}, #{$color}));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$mode-colors: (
|
||||
dark: $dark-colors,
|
||||
light: $light-colors
|
||||
);
|
||||
|
||||
// Loop through sorted list
|
||||
@each $mode, $variables in $mode-colors {
|
||||
@include color-mode($mode) {
|
||||
@each $prop, $val in $variables {
|
||||
#{$prop}: $val;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,29 +1,26 @@
|
||||
// Generate a two-color caret for any element.
|
||||
@mixin double-caret($foreground: $text-white, $background: lighten($gray-300, 5%)) {
|
||||
@mixin double-caret($background: var(--color-bg-primary), $border: var(--color-border-primary)) {
|
||||
&::after,
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
right: 100%;
|
||||
left: -16px;
|
||||
left: -8px;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
width: 8px;
|
||||
height: 16px;
|
||||
pointer-events: none;
|
||||
content: " ";
|
||||
border-color: transparent;
|
||||
border-style: solid solid outset;
|
||||
clip-path: polygon(0 50%, 100% 0, 100% 100%);
|
||||
}
|
||||
|
||||
&::after {
|
||||
margin-top: 1px;
|
||||
margin-left: 2px;
|
||||
border-width: 7px;
|
||||
border-right-color: $foreground;
|
||||
margin-left: 1px;
|
||||
background-color: var(--color-bg-primary);
|
||||
background-image: linear-gradient($background, $background);
|
||||
}
|
||||
|
||||
&::before {
|
||||
border-width: 8px;
|
||||
border-right-color: $background;
|
||||
background-color: $border;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,243 +0,0 @@
|
||||
// Black based on same hue as $gray-900
|
||||
$black: #1b1f23 !default;
|
||||
$white: #fff !default;
|
||||
|
||||
//
|
||||
//
|
||||
// -------- Grays --------
|
||||
$gray-000: #fafbfc !default;
|
||||
$gray-100: #f6f8fa !default;
|
||||
$gray-200: #e1e4e8 !default;
|
||||
$gray-300: #d1d5da !default;
|
||||
$gray-400: #959da5 !default;
|
||||
$gray-500: #6a737d !default;
|
||||
$gray-600: #586069 !default;
|
||||
$gray-700: #444d56 !default;
|
||||
$gray-800: #2f363d !default;
|
||||
$gray-900: #24292e !default; // body font color
|
||||
|
||||
// -------- Blue --------
|
||||
$blue-000: #f1f8ff !default;
|
||||
$blue-100: #dbedff !default;
|
||||
$blue-200: #c8e1ff !default;
|
||||
$blue-300: #79b8ff !default;
|
||||
$blue-400: #2188ff !default;
|
||||
$blue-500: #0366d6 !default; // Default: Passes AA with #fff
|
||||
$blue-600: #005cc5 !default;
|
||||
$blue-700: #044289 !default;
|
||||
$blue-800: #032f62 !default;
|
||||
$blue-900: #05264c !default; // Passes with 1/2/300 blues
|
||||
|
||||
// -------- Green --------
|
||||
$green-000: #f0fff4 !default;
|
||||
$green-100: #dcffe4 !default;
|
||||
$green-200: #bef5cb !default;
|
||||
$green-300: #85e89d !default;
|
||||
$green-400: #34d058 !default;
|
||||
$green-500: #28a745 !default; // Default. passes AA Large
|
||||
$green-600: #22863a !default; // Text green, passes AA on #fff
|
||||
$green-700: #176f2c !default;
|
||||
$green-800: #165c26 !default;
|
||||
$green-900: #144620 !default;
|
||||
|
||||
// -------- Yellow --------
|
||||
$yellow-000: #fffdef !default;
|
||||
$yellow-100: #fffbdd !default;
|
||||
$yellow-200: #fff5b1 !default;
|
||||
$yellow-300: #ffea7f !default;
|
||||
$yellow-400: #ffdf5d !default;
|
||||
$yellow-500: #ffd33d !default;
|
||||
$yellow-600: #f9c513 !default;
|
||||
$yellow-700: #dbab09 !default;
|
||||
$yellow-800: #b08800 !default;
|
||||
$yellow-900: #735c0f !default;
|
||||
|
||||
// -------- Orange --------
|
||||
$orange-000: #fff8f2 !default;
|
||||
$orange-100: #ffebda !default;
|
||||
$orange-200: #ffd1ac !default;
|
||||
$orange-300: #ffab70 !default;
|
||||
$orange-400: #fb8532 !default;
|
||||
$orange-500: #f66a0a !default; // Default. passes AA Large with #fff
|
||||
$orange-600: #e36209 !default;
|
||||
$orange-700: #d15704 !default;
|
||||
$orange-800: #c24e00 !default;
|
||||
$orange-900: #a04100 !default;
|
||||
|
||||
// -------- Red --------
|
||||
$red-000: #ffeef0 !default;
|
||||
$red-100: #ffdce0 !default;
|
||||
$red-200: #fdaeb7 !default;
|
||||
$red-300: #f97583 !default;
|
||||
$red-400: #ea4a5a !default;
|
||||
$red-500: #d73a49 !default; // Default. passes AA
|
||||
$red-600: #cb2431 !default;
|
||||
$red-700: #b31d28 !default;
|
||||
$red-800: #9e1c23 !default;
|
||||
$red-900: #86181d !default;
|
||||
|
||||
// -------- Purple --------
|
||||
$purple-000: #f5f0ff !default;
|
||||
$purple-100: #e6dcfd !default;
|
||||
$purple-200: #d1bcf9 !default;
|
||||
$purple-300: #b392f0 !default;
|
||||
$purple-400: #8a63d2 !default;
|
||||
$purple-500: #6f42c1 !default; // passes AA with #fff
|
||||
$purple-600: #5a32a3 !default;
|
||||
$purple-700: #4c2889 !default;
|
||||
$purple-800: #3a1d6e !default;
|
||||
$purple-900: #29134e !default;
|
||||
|
||||
// -------- Pink --------
|
||||
$pink-000: #ffeef8 !default;
|
||||
$pink-100: #fedbf0 !default;
|
||||
$pink-200: #f9b3dd !default;
|
||||
$pink-300: #f692ce !default;
|
||||
$pink-400: #ec6cb9 !default;
|
||||
$pink-500: #ea4aaa !default;
|
||||
$pink-600: #d03592 !default;
|
||||
$pink-700: #b93a86 !default;
|
||||
$pink-800: #99306f !default;
|
||||
$pink-900: #6d224f !default;
|
||||
|
||||
// -------- Fades --------
|
||||
$black-fade-15: rgba($black, 0.15) !default;
|
||||
$black-fade-30: rgba($black, 0.3) !default;
|
||||
$black-fade-50: rgba($black, 0.5) !default;
|
||||
$black-fade-70: rgba($black, 0.7) !default;
|
||||
$black-fade-85: rgba($black, 0.85) !default;
|
||||
|
||||
$white-fade-15: rgba($white, 0.15) !default;
|
||||
$white-fade-30: rgba($white, 0.3) !default;
|
||||
$white-fade-50: rgba($white, 0.5) !default;
|
||||
$white-fade-70: rgba($white, 0.7) !default;
|
||||
$white-fade-85: rgba($white, 0.85) !default;
|
||||
|
||||
// -------- Color defaults --------
|
||||
$red: $red-500 !default;
|
||||
$purple: $purple-500 !default;
|
||||
$blue: $blue-500 !default;
|
||||
$green: $green-500 !default;
|
||||
$yellow: $yellow-500 !default;
|
||||
$orange: $orange-500 !default;
|
||||
|
||||
$gray-dark: $gray-900 !default;
|
||||
$gray-light: $gray-400 !default;
|
||||
$gray: $gray-500 !default;
|
||||
|
||||
// -------- Color gradient maps --------
|
||||
|
||||
$grays: (
|
||||
0: $gray-000,
|
||||
1: $gray-100,
|
||||
2: $gray-200,
|
||||
3: $gray-300,
|
||||
4: $gray-400,
|
||||
5: $gray-500,
|
||||
6: $gray-600,
|
||||
7: $gray-700,
|
||||
8: $gray-800,
|
||||
9: $gray-900,
|
||||
) !default;
|
||||
|
||||
$blues: (
|
||||
0: $blue-000,
|
||||
1: $blue-100,
|
||||
2: $blue-200,
|
||||
3: $blue-300,
|
||||
4: $blue-400,
|
||||
5: $blue-500,
|
||||
6: $blue-600,
|
||||
7: $blue-700,
|
||||
8: $blue-800,
|
||||
9: $blue-900,
|
||||
) !default;
|
||||
|
||||
$greens: (
|
||||
0: $green-000,
|
||||
1: $green-100,
|
||||
2: $green-200,
|
||||
3: $green-300,
|
||||
4: $green-400,
|
||||
5: $green-500,
|
||||
6: $green-600,
|
||||
7: $green-700,
|
||||
8: $green-800,
|
||||
9: $green-900,
|
||||
) !default;
|
||||
|
||||
$yellows: (
|
||||
0: $yellow-000,
|
||||
1: $yellow-100,
|
||||
2: $yellow-200,
|
||||
3: $yellow-300,
|
||||
4: $yellow-400,
|
||||
5: $yellow-500,
|
||||
6: $yellow-600,
|
||||
7: $yellow-700,
|
||||
8: $yellow-800,
|
||||
9: $yellow-900,
|
||||
) !default;
|
||||
|
||||
$oranges: (
|
||||
0: $orange-000,
|
||||
1: $orange-100,
|
||||
2: $orange-200,
|
||||
3: $orange-300,
|
||||
4: $orange-400,
|
||||
5: $orange-500,
|
||||
6: $orange-600,
|
||||
7: $orange-700,
|
||||
8: $orange-800,
|
||||
9: $orange-900,
|
||||
) !default;
|
||||
|
||||
$reds: (
|
||||
0: $red-000,
|
||||
1: $red-100,
|
||||
2: $red-200,
|
||||
3: $red-300,
|
||||
4: $red-400,
|
||||
5: $red-500,
|
||||
6: $red-600,
|
||||
7: $red-700,
|
||||
8: $red-800,
|
||||
9: $red-900,
|
||||
) !default;
|
||||
|
||||
$purples: (
|
||||
0: $purple-000,
|
||||
1: $purple-100,
|
||||
2: $purple-200,
|
||||
3: $purple-300,
|
||||
4: $purple-400,
|
||||
5: $purple-500,
|
||||
6: $purple-600,
|
||||
7: $purple-700,
|
||||
8: $purple-800,
|
||||
9: $purple-900,
|
||||
) !default;
|
||||
|
||||
$pinks: (
|
||||
0: $pink-000,
|
||||
1: $pink-100,
|
||||
2: $pink-200,
|
||||
3: $pink-300,
|
||||
4: $pink-400,
|
||||
5: $pink-500,
|
||||
6: $pink-600,
|
||||
7: $pink-700,
|
||||
8: $pink-800,
|
||||
9: $pink-900,
|
||||
) !default;
|
||||
|
||||
$hue-maps: (
|
||||
"gray": $grays,
|
||||
"blue": $blues,
|
||||
"green": $greens,
|
||||
"yellow": $yellows,
|
||||
"orange": $oranges,
|
||||
"red": $reds,
|
||||
"purple": $purples,
|
||||
"pink": $pinks,
|
||||
) !default;
|
||||
@ -1,55 +0,0 @@
|
||||
@import "color-system.scss";
|
||||
// Color variables
|
||||
|
||||
// Border colors
|
||||
$border-white: $white !default;
|
||||
$border-black-fade: $black-fade-15 !default;
|
||||
$border-white-fade: $white-fade-15 !default;
|
||||
$border-gray-dark: $gray-300 !default;
|
||||
$border-gray-darker: $gray-700 !default;
|
||||
$border-gray-light: lighten($gray-200, 3%) !default;
|
||||
$border-gray: $gray-200 !default;
|
||||
$border-blue: $blue-500 !default;
|
||||
$border-blue-light: $blue-200 !default;
|
||||
$border-green: $green-400 !default;
|
||||
$border-green-light: desaturate($green-300, 40%) !default;
|
||||
$border-purple: $purple !default;
|
||||
$border-red: $red !default;
|
||||
$border-red-light: $red-300 !default;
|
||||
$border-yellow: $yellow-600 !default;
|
||||
|
||||
// Background colors
|
||||
$bg-white: $white !default;
|
||||
$bg-black: $black !default;
|
||||
$bg-black-fade: $black-fade-50 !default;
|
||||
$bg-blue-light: $blue-000 !default;
|
||||
$bg-blue: $blue-500 !default;
|
||||
$bg-gray-dark: $gray-900 !default;
|
||||
$bg-gray-light: $gray-000 !default;
|
||||
$bg-gray: $gray-100 !default;
|
||||
$bg-green: $green-500 !default;
|
||||
$bg-green-light: $green-100 !default;
|
||||
$bg-orange: $orange-700 !default;
|
||||
$bg-purple: $purple-500 !default;
|
||||
$bg-purple-light: $purple-000 !default;
|
||||
$bg-pink: $pink-500 !default;
|
||||
$bg-red: $red-500 !default;
|
||||
$bg-red-light: $red-000 !default;
|
||||
$bg-yellow: $yellow-500 !default;
|
||||
$bg-yellow-light: $yellow-200 !default;
|
||||
$bg-yellow-dark: $yellow-700 !default;
|
||||
|
||||
// Text colors
|
||||
$text-black: $black !default;
|
||||
$text-white: $white !default;
|
||||
$text-blue: $blue-500 !default;
|
||||
$text-gray-dark: $gray-900 !default;
|
||||
$text-gray-light: $gray-500 !default;
|
||||
$text-gray: $gray-600 !default;
|
||||
$text-green: $green-600 !default;
|
||||
$text-orange: $orange-900 !default;
|
||||
$text-orange-light: $orange-600 !default;
|
||||
$text-purple: $purple !default;
|
||||
$text-pink: $pink-500 !default;
|
||||
$text-red: $red-600 !default;
|
||||
$text-yellow: $yellow-800 !default;
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user