mirror of
https://github.com/primer/css.git
synced 2025-01-05 21:22:57 +03:00
simurai
GitHub
commit
b17b12934c
@ -65,5 +65,5 @@ The [Primer CSS docs site](https://primer.style/css) is deployed from this repo
|
||||
|
||||
[install-npm]: https://docs.npmjs.com/getting-started/installing-node
|
||||
[npm]: https://www.npmjs.com/
|
||||
[primer]: https://primer.style
|
||||
[primer]: https://primer.style/
|
||||
[sass]: http://sass-lang.com/
|
||||
|
||||
@ -28,7 +28,7 @@ We occasionally use smaller avatars. Anything less than `24px` wide should inclu
|
||||
|
||||
### Avatar sizes
|
||||
|
||||
Instead of using the `width` and `height` attribute, you can also use a class like `.avatar-[1-8]`. The sizes go from `16px` up to `64px`. Note: Avatar stacks are only suppurted for the `20px` avatar size.
|
||||
Instead of using the `width` and `height` attribute, you can also use a class like `.avatar-[1-8]`. The sizes go from `16px` up to `64px`. Note: Avatar stacks are only supported for the `20px` avatar size.
|
||||
|
||||
```html live
|
||||
<img class="avatar avatar-1 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=32" />
|
||||
|
||||
@ -15,7 +15,7 @@ Overview:
|
||||
- Always declare a `type` on your `<button>`s.
|
||||
- Form layouts rely on form groups.
|
||||
|
||||
#### Kitchen sink
|
||||
## Kitchen sink
|
||||
|
||||
All our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.
|
||||
|
||||
@ -48,7 +48,7 @@ All our inputs and buttons side-by-side for easy testing of sizing and alignment
|
||||
</p>
|
||||
```
|
||||
|
||||
#### Example form
|
||||
## Example form
|
||||
|
||||
Form controls in Primer CSS currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.
|
||||
|
||||
@ -69,7 +69,57 @@ Form controls in Primer CSS currently have no basic layout specified (this is by
|
||||
</form>
|
||||
```
|
||||
|
||||
#### Form contrast
|
||||
## Inputs
|
||||
|
||||
### Sizing
|
||||
|
||||
Make inputs smaller, larger, or full-width with an additional class.
|
||||
|
||||
#### Small
|
||||
|
||||
```html live
|
||||
<form>
|
||||
<input class="form-control input-sm" type="text" placeholder="Small input" aria-label="Small input" />
|
||||
</form>
|
||||
```
|
||||
|
||||
#### Large
|
||||
|
||||
```html live
|
||||
<form>
|
||||
<input class="form-control input-lg" type="text" placeholder="Large input" aria-label="Large input" />
|
||||
</form>
|
||||
```
|
||||
|
||||
#### Block
|
||||
|
||||
```html live
|
||||
<form>
|
||||
<input class="form-control input-block" type="text" placeholder="Full-width input" aria-label="Full-width input" />
|
||||
</form>
|
||||
```
|
||||
|
||||
### Input group
|
||||
|
||||
Attached an input and button to one another.
|
||||
|
||||
```html live
|
||||
<form>
|
||||
<div class="input-group">
|
||||
<input class="form-control" type="text" placeholder="Username" aria-label="Username">
|
||||
<span class="input-group-button">
|
||||
<button class="btn" type="button" aria-label="Copy to clipboard">
|
||||
<!-- <%= octicon "clippy" %> -->
|
||||
<svg class="octicon octicon-clippy" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M2 13h4v1H2v-1zm5-6H2v1h5V7zm2 3V8l-3 3 3 3v-2h5v-2H9zM4.5 9H2v1h2.5V9zM2 12h2.5v-1H2v1zm9 1h1v2c-.02.28-.11.52-.3.7-.19.18-.42.28-.7.3H1c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c0-1.11.89-2 2-2 1.11 0 2 .89 2 2h3c.55 0 1 .45 1 1v5h-1V6H1v9h10v-2zM2 5h8c0-.55-.45-1-1-1H8c-.55 0-1-.45-1-1s-.45-1-1-1-1 .45-1 1-.45 1-1 1H3c-.55 0-1 .45-1 1z"></path></svg>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
```
|
||||
|
||||
## Customization
|
||||
|
||||
### Form contrast
|
||||
|
||||
Textual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.
|
||||
|
||||
@ -80,7 +130,7 @@ Textual form controls have a white background by default. You can change this to
|
||||
</form>
|
||||
```
|
||||
|
||||
#### Disabled state
|
||||
### Disabled state
|
||||
|
||||
Add the `disabled` attribute to make a `.form-control` appear disabled.
|
||||
|
||||
@ -90,35 +140,7 @@ Add the `disabled` attribute to make a `.form-control` appear disabled.
|
||||
</form>
|
||||
```
|
||||
|
||||
#### Sizing
|
||||
|
||||
Make inputs smaller, larger, or full-width with an additional class.
|
||||
|
||||
##### Small
|
||||
|
||||
```html live
|
||||
<form>
|
||||
<input class="form-control input-sm" type="text" placeholder="Small input" aria-label="Small input" />
|
||||
</form>
|
||||
```
|
||||
|
||||
##### Large
|
||||
|
||||
```html live
|
||||
<form>
|
||||
<input class="form-control input-lg" type="text" placeholder="Large input" aria-label="Large input" />
|
||||
</form>
|
||||
```
|
||||
|
||||
##### Block
|
||||
|
||||
```html live
|
||||
<form>
|
||||
<input class="form-control input-block" type="text" placeholder="Full-width input" aria-label="Full-width input" />
|
||||
</form>
|
||||
```
|
||||
|
||||
##### Dark
|
||||
### Dark
|
||||
|
||||
```html live
|
||||
<div class="bg-gray-dark p-3 mt-n3 ml-n3 mr-n3">
|
||||
@ -127,9 +149,9 @@ Make inputs smaller, larger, or full-width with an additional class.
|
||||
</div>
|
||||
```
|
||||
|
||||
##### Hide webkit's contact info autofill icon
|
||||
### Hide WebKit's contact info autofill icon
|
||||
|
||||
Webkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.
|
||||
WebKit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.
|
||||
|
||||
```html live
|
||||
<form>
|
||||
@ -142,7 +164,7 @@ Webkit sometimes gets confused and tries to add an icon/dropdown to autofill con
|
||||
</form>
|
||||
```
|
||||
|
||||
#### Selects
|
||||
## Selects
|
||||
|
||||
Primer CSS adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.
|
||||
|
||||
@ -160,7 +182,7 @@ Primer CSS adds light `height` and `vertical-align` styles to `<select>`s for al
|
||||
</form>
|
||||
```
|
||||
|
||||
##### Small
|
||||
### Small
|
||||
|
||||
Use the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).
|
||||
|
||||
@ -178,7 +200,7 @@ Use the `.select-sm` class to resize both default and custom `<select>`s to matc
|
||||
<button class="btn btn-sm ml-1"> Small button</button>
|
||||
```
|
||||
|
||||
#### Form groups
|
||||
## Form groups
|
||||
|
||||
```html live
|
||||
<form>
|
||||
@ -219,10 +241,12 @@ Use the `.select-sm` class to resize both default and custom `<select>`s to matc
|
||||
</form>
|
||||
```
|
||||
|
||||
#### Form group validation
|
||||
## Form group validation
|
||||
|
||||
Convey success, errors and warnings for form groups. For github.com consider using the [`<auto-check>`](https://github.github.io/web-systems-documentation/#custom-elements-auto-check-md) element to perform server-side validation on an input.
|
||||
|
||||
### Success
|
||||
|
||||
If the input is **valid**, add the `.successed` class to the `<div class="form-group">` element. Next add/update a success message to the `.note` element, as well as the `.success` class.
|
||||
|
||||
```html live
|
||||
@ -245,6 +269,8 @@ If the input is **valid**, add the `.successed` class to the `<div class="form-g
|
||||
</form>
|
||||
```
|
||||
|
||||
### Error
|
||||
|
||||
If the input is **not valid**, add the `.errored` class to the `<div class="form-group">` element. Next add/update an error message to the `.note` element, as well as the `.error` class.
|
||||
|
||||
```html live
|
||||
@ -266,6 +292,8 @@ If the input is **not valid**, add the `.errored` class to the `<div class="form
|
||||
</div>
|
||||
</form>
|
||||
```
|
||||
|
||||
### Warning
|
||||
|
||||
If the input should show a **warning**, add the `.warn` class to the `<div class="form-group">` element. Next add/update a warning message to the `.note` element, as well as the `.warning` class.
|
||||
|
||||
@ -289,9 +317,20 @@ If the input should show a **warning**, add the `.warn` class to the `<div class
|
||||
</form>
|
||||
```
|
||||
|
||||
#### Checkboxes and radios
|
||||
### Form actions
|
||||
|
||||
Utilities to spice up the alignment and styling of checkbox and radio controls.
|
||||
Align buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.
|
||||
|
||||
```html live
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">Save changes</button>
|
||||
<button type="button" class="btn">Cancel</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Checkboxes and radios
|
||||
|
||||
Utilities to control alignment and styling of checkbox and radio controls.
|
||||
|
||||
```html live
|
||||
<form>
|
||||
@ -320,7 +359,7 @@ You may also add emphasis to the label:
|
||||
</form>
|
||||
```
|
||||
|
||||
##### Show / hide content based on a checkbox or radio button state
|
||||
### Toggle content visibility based on a checkbox or radio button state
|
||||
|
||||
Content that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live="polite"` attribute on the parent label for added content to be announced when displayed.
|
||||
|
||||
@ -346,7 +385,7 @@ Content that is hidden by default should only be done so if it is non-essential
|
||||
</form>
|
||||
```
|
||||
|
||||
#### Radio group
|
||||
## Radio group
|
||||
|
||||
Radio groups are tab like controls. Their blue border gives extra emphasis to what is selected.
|
||||
|
||||
@ -362,32 +401,3 @@ Radio groups are tab like controls. Their blue border gives extra emphasis to wh
|
||||
</div>
|
||||
</form>
|
||||
```
|
||||
|
||||
#### Input group
|
||||
|
||||
Attached an input and button to one another.
|
||||
|
||||
```html live
|
||||
<form>
|
||||
<div class="input-group">
|
||||
<input class="form-control" type="text" placeholder="Username" aria-label="Username">
|
||||
<span class="input-group-button">
|
||||
<button class="btn" type="button" aria-label="Copy to clipboard">
|
||||
<!-- <%= octicon "clippy" %> -->
|
||||
<svg class="octicon octicon-clippy" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M2 13h4v1H2v-1zm5-6H2v1h5V7zm2 3V8l-3 3 3 3v-2h5v-2H9zM4.5 9H2v1h2.5V9zM2 12h2.5v-1H2v1zm9 1h1v2c-.02.28-.11.52-.3.7-.19.18-.42.28-.7.3H1c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c0-1.11.89-2 2-2 1.11 0 2 .89 2 2h3c.55 0 1 .45 1 1v5h-1V6H1v9h10v-2zM2 5h8c0-.55-.45-1-1-1H8c-.55 0-1-.45-1-1s-.45-1-1-1-1 .45-1 1-.45 1-1 1H3c-.55 0-1 .45-1 1z"></path></svg>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
```
|
||||
|
||||
#### Form actions
|
||||
|
||||
Align buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.
|
||||
|
||||
```html live
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">Save changes</button>
|
||||
<button type="button" class="btn">Cancel</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -158,7 +158,7 @@ Use the `Counter` in navigation to indicate the number of items without the user
|
||||
```html live
|
||||
<div class="tabnav">
|
||||
<nav class="tabnav-tabs" aria-label="Foo bar">
|
||||
<a href="#url" class="tabnav-tab" aria-current="page">Foo tab <span class="Counter">23</a>
|
||||
<a href="#url" class="tabnav-tab" aria-current="page">Foo tab <span class="Counter">23</span></a>
|
||||
<a href="#url" class="tabnav-tab">Bar tab</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
@ -161,23 +161,23 @@ Use `.UnderlineNav--right` to right align the navigation.
|
||||
<nav class="UnderlineNav" aria-label="Foo bar">
|
||||
<div class="UnderlineNav-body">
|
||||
<a class="UnderlineNav-item" href="#url" aria-current="page">
|
||||
<!-- <%= octicon "tools", :class = "UnderlineNav-octicon" %> -->
|
||||
<!-- <%= octicon "tools", class: "UnderlineNav-octicon" %> -->
|
||||
<svg class="UnderlineNav-octicon octicon octicon-tools" version="1.1" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M4.48 7.27c.26.26 1.28 1.33 1.28 1.33l.56-.58-.88-.91 1.69-1.8s-.76-.74-.43-.45c.32-1.19.03-2.51-.87-3.44C4.93.5 3.66.2 2.52.51l1.93 2-.51 1.96-1.89.52-1.93-2C-.19 4.17.1 5.48 1 6.4c.94.98 2.29 1.26 3.48.87zm6.44 1.94l-2.33 2.3 3.84 3.98c.31.33.73.49 1.14.49.41 0 .82-.16 1.14-.49.63-.65.63-1.7 0-2.35l-3.79-3.93zM16 2.53L13.55 0 6.33 7.46l.88.91-4.31 4.46-.99.53-1.39 2.27.35.37 2.2-1.44.51-1.02L7.9 9.08l.88.91L16 2.53z" /></svg>
|
||||
<span>Item 1</span>
|
||||
</a>
|
||||
<a class="UnderlineNav-item" href="#url">
|
||||
<!-- <%= octicon "tools", :class = "UnderlineNav-octicon" %> -->
|
||||
<!-- <%= octicon "tools", class: "UnderlineNav-octicon" %> -->
|
||||
<svg class="UnderlineNav-octicon octicon octicon-tools" version="1.1" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M4.48 7.27c.26.26 1.28 1.33 1.28 1.33l.56-.58-.88-.91 1.69-1.8s-.76-.74-.43-.45c.32-1.19.03-2.51-.87-3.44C4.93.5 3.66.2 2.52.51l1.93 2-.51 1.96-1.89.52-1.93-2C-.19 4.17.1 5.48 1 6.4c.94.98 2.29 1.26 3.48.87zm6.44 1.94l-2.33 2.3 3.84 3.98c.31.33.73.49 1.14.49.41 0 .82-.16 1.14-.49.63-.65.63-1.7 0-2.35l-3.79-3.93zM16 2.53L13.55 0 6.33 7.46l.88.91-4.31 4.46-.99.53-1.39 2.27.35.37 2.2-1.44.51-1.02L7.9 9.08l.88.91L16 2.53z" /></svg>
|
||||
<span>Item 2</span>
|
||||
<span class="Counter">10</span>
|
||||
</a>
|
||||
<a class="UnderlineNav-item" href="#url">
|
||||
<!-- <%= octicon "tools", :class = "UnderlineNav-octicon" %> -->
|
||||
<!-- <%= octicon "tools", class: "UnderlineNav-octicon" %> -->
|
||||
<svg class="UnderlineNav-octicon octicon octicon-tools" version="1.1" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M4.48 7.27c.26.26 1.28 1.33 1.28 1.33l.56-.58-.88-.91 1.69-1.8s-.76-.74-.43-.45c.32-1.19.03-2.51-.87-3.44C4.93.5 3.66.2 2.52.51l1.93 2-.51 1.96-1.89.52-1.93-2C-.19 4.17.1 5.48 1 6.4c.94.98 2.29 1.26 3.48.87zm6.44 1.94l-2.33 2.3 3.84 3.98c.31.33.73.49 1.14.49.41 0 .82-.16 1.14-.49.63-.65.63-1.7 0-2.35l-3.79-3.93zM16 2.53L13.55 0 6.33 7.46l.88.91-4.31 4.46-.99.53-1.39 2.27.35.37 2.2-1.44.51-1.02L7.9 9.08l.88.91L16 2.53z" /></svg>
|
||||
<span>Item 3</span>
|
||||
</a>
|
||||
<a class="UnderlineNav-item" href="#url">
|
||||
<!-- <%= octicon "tools", :class = "UnderlineNav-octicon" %> -->
|
||||
<!-- <%= octicon "tools", class: "UnderlineNav-octicon" %> -->
|
||||
<svg class="UnderlineNav-octicon octicon octicon-tools" version="1.1" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M4.48 7.27c.26.26 1.28 1.33 1.28 1.33l.56-.58-.88-.91 1.69-1.8s-.76-.74-.43-.45c.32-1.19.03-2.51-.87-3.44C4.93.5 3.66.2 2.52.51l1.93 2-.51 1.96-1.89.52-1.93-2C-.19 4.17.1 5.48 1 6.4c.94.98 2.29 1.26 3.48.87zm6.44 1.94l-2.33 2.3 3.84 3.98c.31.33.73.49 1.14.49.41 0 .82-.16 1.14-.49.63-.65.63-1.7 0-2.35l-3.79-3.93zM16 2.53L13.55 0 6.33 7.46l.88.91-4.31 4.46-.99.53-1.39 2.27.35.37 2.2-1.44.51-1.02L7.9 9.08l.88.91L16 2.53z" /></svg>
|
||||
<span>Item 4</span>
|
||||
</a>
|
||||
@ -444,7 +444,7 @@ You can have `subnav-search` in the subnav bar.
|
||||
</nav>
|
||||
<div class="subnav-search float-left">
|
||||
<input type="search" name="name" class="form-control subnav-search-input" value="" aria-label="Search site" />
|
||||
<!-- <%= octicon "search", :class = "subnav-search-icon" %> -->
|
||||
<!-- <%= octicon "search", class: "subnav-search-icon" %> -->
|
||||
<svg class="subnav-search-icon octicon octicon-search" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"> <path fill-rule="evenodd" d="M15.7 13.3l-3.81-3.83A5.93 5.93 0 0 0 13 6c0-3.31-2.69-6-6-6S1 2.69 1 6s2.69 6 6 6c1.3 0 2.48-.41 3.47-1.11l3.83 3.81c.19.2.45.3.7.3.25 0 .52-.09.7-.3a.996.996 0 0 0 0-1.41v.01zM7 10.7c-2.59 0-4.7-2.11-4.7-4.7 0-2.59 2.11-4.7 4.7-4.7 2.59 0 4.7 2.11 4.7 4.7 0 2.59-2.11 4.7-4.7 4.7z" /> </svg>
|
||||
</div>
|
||||
</div>
|
||||
@ -469,7 +469,7 @@ You can also use a `subnav-search-context` to display search help in a select me
|
||||
</div>
|
||||
<div class="subnav-search float-left">
|
||||
<input type="search" name="name" class="form-control subnav-search-input" value="" aria-label="Search site" />
|
||||
<!-- <%= octicon "search", :class = "subnav-search-icon" %> -->
|
||||
<!-- <%= octicon "search", class: "subnav-search-icon" %> -->
|
||||
<svg class="subnav-search-icon octicon octicon-search" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"> <path fill-rule="evenodd" d="M15.7 13.3l-3.81-3.83A5.93 5.93 0 0 0 13 6c0-3.31-2.69-6-6-6S1 2.69 1 6s2.69 6 6 6c1.3 0 2.48-.41 3.47-1.11l3.83 3.81c.19.2.45.3.7.3.25 0 .52-.09.7-.3a.996.996 0 0 0 0-1.41v.01zM7 10.7c-2.59 0-4.7-2.11-4.7-4.7 0-2.59 2.11-4.7 4.7-4.7 2.59 0 4.7 2.11 4.7 4.7 0 2.59-2.11 4.7-4.7 4.7z" /> </svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -156,7 +156,7 @@ Include a link to allow users to take actions within a Toast.
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="Toast-content">Toast message goes here </strong><a href="#">Action.</a></span>
|
||||
<span class="Toast-content">Toast message goes here<a href="#">Action.</a></span>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -18,7 +18,7 @@ Decisions to add new components are made on a case-by-case basis, with help from
|
||||
- If your design is difficult to compose with current styles, does this highlight problems with existing components (such as overly-specific components, or missing objects and utilities)?
|
||||
- Is this a totally new pattern or should it be an extension of an existing component?
|
||||
- How is this pattern being implemented currently - have you identified problems with it’s current implementation that can be improved with adding a new pattern?
|
||||
- Is the desire for this new pattern a side-effect of lacking documentation or mis-understandings of use with current styles?
|
||||
- Is the desire for this new pattern a side-effect of lacking documentation or misunderstanding of use with current styles?
|
||||
- Are there special factors that need to be considered as to why the this pattern needs it’s own styles? Such legal issues, usability issues, or branding and trademarks?
|
||||
- Is this something that would be better handled by other front-end code rather than CSS?
|
||||
- Every new addition of CSS means we ask our users to download a larger CSS file, and we increase the maintenance work of our CSS framework. Does the convenience of adding these new styles outweigh those costs?
|
||||
|
||||
@ -12,7 +12,7 @@ import {Link as LinkIcon} from '@primer/octicons-react'
|
||||
import {palettes, variables} from '../../src/color-variables'
|
||||
import {PaletteTable, PaletteCell, overlayColor} from '../../src/color-system'
|
||||
|
||||
> ⚠️ Hubbers 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).
|
||||
> ⚠️ 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.
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ bundle: alerts
|
||||
|
||||
import {Variables, DeprecationIcon} from '../../src/variables'
|
||||
|
||||
> ⚠️ Hubbers 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).
|
||||
> ⚠️ 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.
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ import {Box, BorderBox} from '@primer/components'
|
||||
import {palettes, allColors} from '../../src/color-variables'
|
||||
import {PaletteTable, PaletteTableFragment, PaletteHeading, PaletteCell, PaletteValue} from '../../src/color-system'
|
||||
|
||||
> ⚠️ Hubbers 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).
|
||||
> ⚠️ 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.
|
||||
|
||||
|
||||
@ -14,7 +14,7 @@ Marketing padding utilities extend [core padding utilities](/utilities/padding).
|
||||
<div class="pt-7 mr-1 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-7</div></div>
|
||||
<div class="pt-8 mr-1 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-8</div></div>
|
||||
<div class="pt-9 mr-1 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-9</div></div>
|
||||
<div class="pt-10 mr-1 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-12</div></div>
|
||||
<div class="pt-10 mr-1 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-10</div></div>
|
||||
<div class="pt-11 mr-1 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-11</div></div>
|
||||
<div class="pt-12 mr-1 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-12</div></div>
|
||||
```
|
||||
|
||||
Loading…
Reference in New Issue
Block a user