mirror of
https://github.com/primer/css.git
synced 2024-11-28 13:12:16 +03:00
Merge branch 'mkt/color-modes-whee' into mkt/color-modes-docs
This commit is contained in:
Michelle Tilley
commit
1667991442
13
.github/dependabot.yml
vendored
Normal file
13
.github/dependabot.yml
vendored
Normal file
@ -0,0 +1,13 @@
|
||||
# To get started with Dependabot version updates, you'll need to specify which
|
||||
# package ecosystems to update and where the package manifests are located.
|
||||
# Please see the documentation for all configuration options:
|
||||
# https://help.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
|
||||
|
||||
version: 2
|
||||
updates:
|
||||
- package-ecosystem: "npm" # See documentation for possible values
|
||||
directory: "/docs" # Location of package manifests
|
||||
schedule:
|
||||
interval: "daily"
|
||||
allow:
|
||||
- dependency-name: "@primer/gatsby-theme-doctocat"
|
||||
@ -207,10 +207,10 @@ Use `AvatarStack--right` to right-align the avatar stack. Remember to switch the
|
||||
### Small
|
||||
|
||||
```html live
|
||||
<a class="CircleBadge CircleBadge--small float-left mr-2" href="#small" title="Travis CI">
|
||||
<a class="CircleBadge CircleBadge--small float-left mr-2" href="#small">
|
||||
<img src="https://github.com/travis-ci.png" class="CircleBadge-icon" alt="">
|
||||
</a>
|
||||
<a class="CircleBadge CircleBadge--small bg-yellow" title="Zap this!" href="#small">
|
||||
<a class="CircleBadge CircleBadge--small bg-yellow" href="#small">
|
||||
<!-- <%= octicon "zap", class: "CircleBadge-icon text-white" %> -->
|
||||
<svg class="CircleBadge-icon text-white octicon octicon-zap" viewBox="0 0 10 16" version="1.1" width="10" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M10 7H6l3-7-9 9h4l-3 7 9-9z"></path></svg>
|
||||
</a>
|
||||
|
||||
@ -18,14 +18,7 @@ GitHub also programmatically generates and applies a background color for labels
|
||||
The base `Label` style does not apply a background color and only uses the default border:
|
||||
|
||||
```html live
|
||||
<span class="Label" title="Label: design">design</span>
|
||||
```
|
||||
|
||||
**Note:** Be sure to include a title attribute on labels, as it's helpful for people using screen-readers to differentiate a label from other text. For example, without the title attribute, the following case would read as _"New select component design"_, rather than identifying `design` as a label.
|
||||
|
||||
```html live
|
||||
<!-- Don't do this -->
|
||||
<a href="#url">New select component</a> <span class="Label">design</span>
|
||||
<span class="Label">design</span>
|
||||
```
|
||||
|
||||
### Label contrast
|
||||
@ -35,9 +28,9 @@ Use `Label--primary` to create a label with a stronger border. This label is als
|
||||
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" title="Label: Default">Default</span>
|
||||
<span class="Label Label--primary ml-1" title="Label: Primary">Primary</span>
|
||||
<span class="Label Label--secondary ml-1" title="Label: Secondary">Secondary</span>
|
||||
<span class="Label">Default</span>
|
||||
<span class="Label Label--primary ml-1">Primary</span>
|
||||
<span class="Label Label--secondary ml-1">Secondary</span>
|
||||
```
|
||||
|
||||
### Colored labels
|
||||
@ -50,10 +43,10 @@ Labels come in a few different functional classes. Use to communicate the conten
|
||||
- `Label--danger`
|
||||
|
||||
```html live
|
||||
<span class="Label mr-1 Label--info" title="Label: Info">Info</span>
|
||||
<span class="Label mr-1 Label--success" title="Label: Success">Success</span>
|
||||
<span class="Label mr-1 Label--warning" title="Label: Warning">Warning</span>
|
||||
<span class="Label mr-1 Label--danger" title="Label: Danger">Danger</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>
|
||||
```
|
||||
|
||||
### Label sizes
|
||||
@ -61,8 +54,8 @@ Labels come in a few different functional classes. Use to communicate the conten
|
||||
If space allows, add the `Label--large` modidfier to add a bit more padding to lables.
|
||||
|
||||
```html live
|
||||
<span class="Label Label--gray-darker mr-1" title="Label: Default">Default</span>
|
||||
<span class="Label Label--large Label--gray-darker mr-1" title="Label: Large">Large</span>
|
||||
<span class="Label Label--gray-darker mr-1">Default</span>
|
||||
<span class="Label Label--large Label--gray-darker mr-1">Large</span>
|
||||
```
|
||||
|
||||
### Inline labels
|
||||
@ -71,33 +64,31 @@ Sometimes when adding a label the line-height can be incrased. Or the parent ele
|
||||
|
||||
```html live
|
||||
<p class="col-4">
|
||||
Lorem Ipsum is simply <span class="Label Label--inline" title="Label: dummy">dummy text</span>
|
||||
<span>of </span> the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.
|
||||
Lorem Ipsum is simply <span class="Label Label--inline">dummy text</span> of the printing and typesetting industry.
|
||||
Lorem Ipsum has been the industry's standard dummy text.
|
||||
</p>
|
||||
```
|
||||
|
||||
|
||||
## Issue labels
|
||||
|
||||
Issue labels are used for adding labels to issues and pull requests. They also come with emoji support.
|
||||
|
||||
```html live
|
||||
<span class="IssueLabel bg-blue text-white mr-1" title="Label: Primer">Primer</span>
|
||||
<span class="IssueLabel bg-red text-white mr-1" title="Label: bug">bug 🐛</span>
|
||||
<span class="IssueLabel bg-pink text-white mr-1" title="Label: help wanted">help wanted</span>
|
||||
<span class="IssueLabel bg-yellow text-gray-dark mr-1" title="Label: deploy: train">🚂 deploy: train</span>
|
||||
<span class="IssueLabel bg-blue text-white mr-1">Primer</span>
|
||||
<span class="IssueLabel bg-red text-white mr-1">bug 🐛</span>
|
||||
<span class="IssueLabel bg-pink text-white mr-1">help wanted</span>
|
||||
<span class="IssueLabel bg-yellow text-gray-dark mr-1">🚂 deploy: train</span>
|
||||
```
|
||||
|
||||
If an issue label needs to be bigger, add the `.IssueLabel--big` modifier.
|
||||
|
||||
```html live
|
||||
<span class="IssueLabel IssueLabel--big bg-blue text-white mr-1" title="Label: Primer">Primer</span>
|
||||
<span class="IssueLabel IssueLabel--big bg-red text-white mr-1" title="Label: bug">bug 🐛</span>
|
||||
<span class="IssueLabel IssueLabel--big bg-pink text-white mr-1" title="Label: help wanted">help wanted</span>
|
||||
<span class="IssueLabel IssueLabel--big bg-yellow text-gray-dark mr-1" title="Label: deploy: train">🚂 deploy: train</span>
|
||||
<span class="IssueLabel IssueLabel--big bg-blue text-white mr-1">Primer</span>
|
||||
<span class="IssueLabel IssueLabel--big bg-red text-white mr-1">bug 🐛</span>
|
||||
<span class="IssueLabel IssueLabel--big bg-pink text-white mr-1">help wanted</span>
|
||||
<span class="IssueLabel IssueLabel--big bg-yellow text-gray-dark mr-1">🚂 deploy: train</span>
|
||||
```
|
||||
|
||||
|
||||
## 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. States come in a few variations that apply different colors. Use the state that best communicates the status or function.
|
||||
@ -109,15 +100,15 @@ Use state labels to inform users of an items status. States are large labels wit
|
||||
- `State State--closed`
|
||||
|
||||
```html live
|
||||
<span class="State State--draft mr-2" title="Status: draft">Draft</span>
|
||||
<span class="State State--draft mr-2">Draft</span>
|
||||
|
||||
<span class="State State--open mr-2" title="Status: open">
|
||||
<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--merged mr-2" title="Status: merged">
|
||||
<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
|
||||
@ -130,20 +121,18 @@ Use state labels to inform users of an items status. States are large labels wit
|
||||
</span>
|
||||
```
|
||||
|
||||
**Note:** Similar to [labels](#labels), you should include the title attribute on states to differentiate them from other content.
|
||||
|
||||
### Small states
|
||||
|
||||
Use `State--small` for a state label with reduced padding a smaller font size. This is useful in denser areas of content.
|
||||
|
||||
```html live
|
||||
<span class="State State--small mr-2" title="Status: Default">Default</span>
|
||||
<span class="State State--small State--open mr-2" title="Status: open">
|
||||
<span class="State State--small mr-2">Default</span>
|
||||
<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--closed mr-2" title="Status: closed">
|
||||
<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
|
||||
|
||||
@ -256,7 +256,7 @@ Different kind of content can be added inside a Side Nav item. Use utility class
|
||||
</svg>
|
||||
</a>
|
||||
<a class="SideNav-item d-flex flex-items-center flex-justify-between" href="#url">
|
||||
With a label <span class="Label bg-blue" title="Label: label">label</span>
|
||||
With a label <span class="Label bg-blue">label</span>
|
||||
</a>
|
||||
<a class="SideNav-item d-flex flex-items-center flex-justify-between" href="#url">
|
||||
With a counter <span class="Counter ml-1">16</span>
|
||||
@ -404,13 +404,13 @@ A vertical list of filters. Grey text on white background. Selecting a filter fr
|
||||
<li>
|
||||
<a class="filter-item" href="#url" aria-current="page">
|
||||
First filter
|
||||
<span class="count" title="results">21</span>
|
||||
<span class="count">21</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="filter-item" href="#url">
|
||||
Second filter
|
||||
<span class="count" title="results">3</span>
|
||||
<span class="count">3</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
|
||||
@ -210,9 +210,7 @@ The list of items is arguably the most important subcomponent within the menu. B
|
||||
<path fill-rule="evenodd" d="M0 8c0-2.2 1.8-4 4-4s4 1.8 4 4-1.8 4-4 4-4-1.8-4-4z" />
|
||||
</svg>
|
||||
</button>
|
||||
<button class="SelectMenu-item d-block" role="menuitem">
|
||||
With a <span class="Label bg-blue" title="Label: label">label</span>
|
||||
</button>
|
||||
<button class="SelectMenu-item d-block" role="menuitem">With a <span class="Label bg-blue">label</span></button>
|
||||
<button class="SelectMenu-item" role="menuitem">
|
||||
With a counter <span class="Counter bg-gray-2 ml-1">16</span>
|
||||
</button>
|
||||
@ -583,7 +581,7 @@ When adding the `.SelectMenu` component on github.com, use the [`<details-menu>`
|
||||
|
||||
```erb
|
||||
<details class="details-reset details-overlay" id="my-select-menu">
|
||||
<summary class="btn" title="Pick an item">
|
||||
<summary class="btn">
|
||||
<span>Choose</span>
|
||||
<span class="dropdown-caret"></span>
|
||||
</summary>
|
||||
|
||||
@ -6,8 +6,7 @@ source: 'https://github.com/primer/css/tree/master/src/truncate'
|
||||
bundle: truncate
|
||||
---
|
||||
|
||||
|
||||
The `css-truncate` class will shorten text with an ellipsis. Always add a `title` attribute to the truncated element so the full text remains accessible.
|
||||
The `css-truncate` class will shorten text with an ellipsis.
|
||||
|
||||
## Truncate overflow
|
||||
|
||||
@ -15,8 +14,7 @@ Combine the `css-truncate` and `css-truncate-overflow` classes to prevent text t
|
||||
|
||||
```html live
|
||||
<div class="col-3">
|
||||
<div class="css-truncate css-truncate-overflow border p-3"
|
||||
title="branch-name-that-is-really-long">
|
||||
<div class="css-truncate css-truncate-overflow border p-3">
|
||||
branch-name-that-is-really-long
|
||||
</div>
|
||||
<div class="border p-3 mt-3">
|
||||
@ -31,8 +29,7 @@ Combine the `css-truncate` and `css-truncate-target` classes for inline (or inli
|
||||
|
||||
```html live
|
||||
Some text with a
|
||||
<strong class="css-truncate css-truncate-target"
|
||||
title="branch-name-that-is-really-long">
|
||||
<strong class="css-truncate css-truncate-target">
|
||||
branch-name-that-is-really-long
|
||||
</strong>
|
||||
```
|
||||
@ -41,8 +38,7 @@ You can override the maximum width of the truncated text with an inline `style`
|
||||
|
||||
```html live
|
||||
Some text with a
|
||||
<strong class="css-truncate css-truncate-target" style="max-width: 180px"
|
||||
title="branch-name-that-is-really-long">
|
||||
<strong class="css-truncate css-truncate-target" style="max-width: 180px">
|
||||
branch-name-that-is-really-long
|
||||
</strong>
|
||||
```
|
||||
@ -51,8 +47,7 @@ You can reveal the entire string on hover with the addition of `.expandable`.
|
||||
|
||||
```html live
|
||||
Some text with a
|
||||
<strong class="css-truncate css-truncate-target expandable"
|
||||
title="branch-name-that-is-really-long">
|
||||
<strong class="css-truncate css-truncate-target expandable">
|
||||
branch-name-that-is-really-long
|
||||
</strong>
|
||||
```
|
||||
|
||||
@ -104,12 +104,6 @@ Make sure text-based alternative is always available when using icons, images, a
|
||||
<p>To find out more about GitHub Enterprise pricing, <a href="#url">click here</a>.</p>
|
||||
```
|
||||
|
||||
Use `title` to add information on top of existing content.
|
||||
|
||||
```html
|
||||
<a title="@octocat's repositories" href="https://github.com/octocat?tab=repositories">octocat</a>
|
||||
```
|
||||
|
||||
Use `aria-label` when there is no text.
|
||||
|
||||
```html
|
||||
|
||||
@ -61,12 +61,12 @@ The base <span class="Label Label--inline"> label </span> component styles the t
|
||||
|
||||
```html live
|
||||
<span class="State mr-2">Default</span>
|
||||
<span class="State State--green mr-2" title="Status: open">
|
||||
<span class="State State--green 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" title="Status: closed">
|
||||
<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
|
||||
@ -74,13 +74,13 @@ The base <span class="Label Label--inline"> label </span> component styles the t
|
||||
|
||||
<div class="my-3"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="State State--small mr-2" title="Status: Default">Default</span>
|
||||
<span class="State State--small State--green mr-2" title="Status: open">
|
||||
<span class="State State--small mr-2">Default</span>
|
||||
<span class="State State--small State--green 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" title="Status: closed">
|
||||
<span class="State State--small State--red 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
|
||||
|
||||
@ -69,7 +69,7 @@ Use `border-dashed` to give an element a dashed border.
|
||||
|
||||
## Rounded corners
|
||||
|
||||
Use the following utilities to add or remove rounded corners: `rounded-0` removes rounded corners, `rounded-1` applies a border radius of 3px, `rounded-2` applies a border radius of 6px. `.circle` applies a border radius of 50%, which turns square elements into perfect circles.
|
||||
Use the following utilities to add or remove rounded corners: `rounded-0` removes rounded corners, `rounded-1` applies a border radius of 4px, `rounded-2` applies a border radius of 6px. `.circle` applies a border radius of 50%, which turns square elements into perfect circles.
|
||||
|
||||
```html live
|
||||
<div class="border rounded-0 p-2 mb-2">
|
||||
|
||||
20001
docs/package-lock.json
generated
20001
docs/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -12,7 +12,7 @@
|
||||
"@babel/preset-react": "^7.10.4",
|
||||
"@loadable/component": "^5.10.2",
|
||||
"@primer/components": "^17.1.0",
|
||||
"@primer/gatsby-theme-doctocat": "^1.2.0",
|
||||
"@primer/gatsby-theme-doctocat": "^1.3.0",
|
||||
"@primer/octicons": "^11.0.0",
|
||||
"@primer/octicons-react": "^11.0.0",
|
||||
"@svgr/webpack": "^4.3.2",
|
||||
|
||||
@ -50,16 +50,18 @@ export const functionalVarNames = Object.keys(flattened.light).filter(
|
||||
|
||||
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)
|
||||
|
||||
6
package-lock.json
generated
6
package-lock.json
generated
@ -3499,9 +3499,9 @@
|
||||
}
|
||||
},
|
||||
"@primer/primitives": {
|
||||
"version": "0.0.0-20201115191143",
|
||||
"resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-0.0.0-20201115191143.tgz",
|
||||
"integrity": "sha512-3Z+0nF2gBGxmdCWCrBtgbJn/DLiYhDmu0kEG224gFazb5OR4bq9ZT+GRVjY8qdg4oH4XdM1jbSdlVTPYoZAF3A=="
|
||||
"version": "0.0.0-202113194440",
|
||||
"resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-0.0.0-202113194440.tgz",
|
||||
"integrity": "sha512-NHPb9wve3MLWeMzo1M+kTFVA9oWK5kJQ63KEQSZreKeza1lnv+s8ZkK0hcynquwdiYhNqDgMSEUGkM2LU2ctvw=="
|
||||
},
|
||||
"@reach/router": {
|
||||
"version": "1.3.3",
|
||||
|
||||
@ -41,7 +41,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@primer/octicons": "^9.1.1",
|
||||
"@primer/primitives": "0.0.0-20201115191143"
|
||||
"@primer/primitives": "0.0.0-202113194440"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@octokit/rest": "^16.34.0",
|
||||
|
||||
@ -4,21 +4,21 @@
|
||||
|
||||
@import "@primer/primitives/dist/scss/colors/_light.scss";
|
||||
@import "@primer/primitives/dist/scss/colors/_dark.scss";
|
||||
@import "@primer/primitives/dist/scss/colors/_dimmed.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 color-mode-theme(light, true) {
|
||||
@include primer-colors-light;
|
||||
}
|
||||
|
||||
@include color-mode-theme(dark, dark) {
|
||||
@include color-mode-theme(dark) {
|
||||
@include primer-colors-dark;
|
||||
}
|
||||
|
||||
@include color-mode-theme(dark, dimmed) {
|
||||
@include primer-colors-dimmed;
|
||||
@include color-mode-theme(dark_dimmed) {
|
||||
@include primer-colors-dark_dimmed;
|
||||
}
|
||||
|
||||
// Color mode boundaries
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
cursor: default;
|
||||
|
||||
.octicon {
|
||||
color: inherit;
|
||||
color: var(--color-icon-tertiary);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -40,7 +40,7 @@ label {
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
color: var(--color-text-disabled);
|
||||
color: var(--color-text-secondary);
|
||||
background-color: var(--color-input-disabled-bg);
|
||||
border-color: var(--color-input-disabled-border);
|
||||
}
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
color: var(--color-counter-text);
|
||||
text-align: center;
|
||||
background-color: var(--color-counter-bg);
|
||||
border: $border-width $border-style transparent; // Support Firfox custom colors
|
||||
border: $border-width $border-style transparent; // Support Firefox custom colors
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-radius: 2em;
|
||||
|
||||
|
||||
@ -18,20 +18,20 @@
|
||||
height: $spacer-2;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-left: 1px;
|
||||
outline-offset: -1px; // Support Firfox custom colors
|
||||
outline-offset: -1px; // Support Firefox custom colors
|
||||
}
|
||||
|
||||
.diffstat-block-deleted {
|
||||
background-color: var(--color-diffstat-deletion-bg);
|
||||
outline: 1px solid var(--color-diffstat-deletion-border); // Support Firfox custom colors
|
||||
outline: 1px solid var(--color-diffstat-deletion-border); // Support Firefox custom colors
|
||||
}
|
||||
|
||||
.diffstat-block-added {
|
||||
background-color: var(--color-diffstat-addition-bg);
|
||||
outline: 1px solid var(--color-diffstat-addition-border); // Support Firfox custom colors
|
||||
outline: 1px solid var(--color-diffstat-addition-border); // Support Firefox custom colors
|
||||
}
|
||||
|
||||
.diffstat-block-neutral {
|
||||
background-color: var(--color-diffstat-neutral-bg);
|
||||
outline: 1px solid var(--color-diffstat-neutral-border); // Support Firfox custom colors
|
||||
outline: 1px solid var(--color-diffstat-neutral-border); // Support Firefox custom colors
|
||||
}
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
&:focus {
|
||||
outline: 0;
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: 0 0 0 0.2em rgba($blue-500, 0.3);
|
||||
box-shadow: 0 0 0 0.2em rgba($blue-mktg, 0.3);
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
@ -51,7 +51,7 @@
|
||||
|
||||
&:focus {
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: 0 0 0 0.2em rgba($green-500, 0.3);
|
||||
box-shadow: 0 0 0 0.2em rgba($green-mktg, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
@ -65,7 +65,7 @@
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $blue-mktg;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: rgba($white, 0);
|
||||
background-color: rgba($white-mktg, 0);
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: rgba($blue-mktg, 0.5);
|
||||
|
||||
@ -73,7 +73,7 @@
|
||||
color: $text-blue;
|
||||
text-decoration: none;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: rgba($white, 0);
|
||||
background-color: rgba($white-mktg, 0);
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: rgba($blue-mktg, 1);
|
||||
}
|
||||
|
||||
@ -32,6 +32,8 @@ $h000-size: 64px !default;
|
||||
$h000-size-mobile: 48px !default;
|
||||
|
||||
// Colors
|
||||
$white-mktg: #fff !default; // $white
|
||||
$black-mktg: #1b1f23 !default; // $black
|
||||
$green-mktg: mix(#28a745, #34d058, 50%) !default; // $green-500, $green-400
|
||||
$blue-mktg: mix(#2188ff, #0366d6, 42%) !default; // $blue-400, $blue-500
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.bg-shade-gradient {
|
||||
background-image: linear-gradient(180deg, rgba($black, 0.065), rgba($black, 0)) !important;
|
||||
background-image: linear-gradient(180deg, rgba($black-mktg, 0.065), rgba($black-mktg, 0)) !important;
|
||||
background-repeat: no-repeat !important;
|
||||
background-size: 100% 200px !important;
|
||||
}
|
||||
|
||||
@ -23,17 +23,15 @@
|
||||
border: 0;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-bottom: 2px $border-style transparent;
|
||||
transition: border-bottom-color 0.36s ease-in;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--color-underlinenav-text-hover);
|
||||
text-decoration: none;
|
||||
border-bottom-color: var(--color-border-tertiary);
|
||||
outline: 1px dotted transparent; // Support Firfox custom colors
|
||||
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,
|
||||
@ -43,7 +41,7 @@
|
||||
color: var(--color-underlinenav-text-active);
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-bottom-color: #f9826c; // custom coral
|
||||
outline: 1px dotted transparent; // Support Firfox custom colors
|
||||
outline: 1px dotted transparent; // Support Firefox custom colors
|
||||
outline-offset: -1px;
|
||||
|
||||
.UnderlineNav-octicon {
|
||||
|
||||
@ -1,6 +1,4 @@
|
||||
@mixin color-mode-theme($base-mode, $theme-name, $include-root: false) {
|
||||
$opposite: opposite-color-mode($base-mode);
|
||||
|
||||
@mixin color-mode-theme($theme-name, $include-root: false) {
|
||||
@if $include-root {
|
||||
:root {
|
||||
@content;
|
||||
@ -8,32 +6,24 @@
|
||||
}
|
||||
|
||||
[data-color-mode="#{$theme-name}"],
|
||||
[data-color-mode="#{$base-mode}"][data-#{$base-mode}-theme="#{$theme-name}"] {
|
||||
[data-color-mode="light"][data-light-theme="#{$theme-name}"],
|
||||
[data-color-mode="dark"][data-dark-theme="#{$theme-name}"] {
|
||||
@content;
|
||||
}
|
||||
|
||||
[data-color-mode="auto"][data-#{$base-mode}-theme="#{$theme-name}"] {
|
||||
@media (prefers-color-scheme: #{$base-mode}) {
|
||||
[data-color-mode="auto"][data-light-theme="#{$theme-name}"] {
|
||||
@media (prefers-color-scheme: light) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
[data-color-mode="auto"][data-#{$opposite}-theme="#{$theme-name}"] {
|
||||
@media (prefers-color-scheme: #{$opposite}) {
|
||||
[data-color-mode="auto"][data-dark-theme="#{$theme-name}"] {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@function opposite-color-mode($mode) {
|
||||
@if $mode == light {
|
||||
@return dark;
|
||||
}
|
||||
@else {
|
||||
@return light;
|
||||
}
|
||||
}
|
||||
|
||||
// Allows CSS to be scoped to a specific color mode
|
||||
@mixin color-mode($mode) {
|
||||
@if $mode == light {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user