primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-11-23 11:27:26 +03:00
Code Issues Projects Releases Wiki Activity

Merge branch 'main' into counter-secondary

Browse Source
This commit is contained in:
Jon Rohan 2021-03-29 09:04:16 -07:00
commit f19aa481fe
No known key found for this signature in database
GPG Key ID: B0BBE304A9A0AECB
7 changed files with 46 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/strange-pots-allow.md Normal file
View File

@ -0,0 +1,5 @@
---
"@primer/css": patch
---
Marketing buttons: don't animate everything

4
.github/workflows/release.yml vendored
View File

@ -2,7 +2,9 @@ name: Release
on:
push:
branches:
- main
- 'main'
branches-ignore:
- 'dependabot/**'
jobs:
release:
if: ${{ github.repository == 'primer/css' }}

1
.github/workflows/release_canary.yml vendored
View File

@ -4,6 +4,7 @@ on:
branches-ignore:
- 'main'
- 'changeset-release/main'
- 'dependabot/**'
# Don't release canary when these paths change
# It's not necessary because we don't ship them and it creates noise
paths-ignore:

62
docs/content/support/v16-migration.mdx
View File

@ -1,5 +1,5 @@
---
title: Primer v16 Migration Guide
title: Primer v16 migration guide
description: 'Guide for migrating to version 16.0.0 of Primer'
---
@ -7,32 +7,30 @@ Primer v16.0.0 introduces the idea of _color modes_ and _functional variables_.
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
### Components
Most components don't need to be updated and should work without making changes. However some components that use presentational class names now use functional class names.
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
### Buttons
| `v15` | `v16` |
| ----------- | ----- |
| `.btn-blue` | n/a |
#### Counters
### Counters
| [`v15`](https://primer.style/css/components/labels#counters) | `v16` |
| ------------------------------------------------------------ | --------------------- |
| `.Counter--gray` | `.Counter--primary` |
| `.Counter--gray-light` | `.Counter--secondary` |
#### Dropdwon
### Dropdwon
| [`v15`](https://primer.style/css/components/dropdown#dark) | `v16` |
| ---------------------------------------------------------- | ----- |
| `.dropdown-menu-dark` | n/a |
#### Labels
### Labels
| [`v15`](https://primer.style/css/components/labels) | `v16` |
| --------------------------------------------------- | ------------------- |
@ -46,7 +44,7 @@ Most components don't need to be updated and should work without making changes.
| `.Label--purple` | n/a |
| `.Label--pink` | n/a |
#### States
### States
| [`v15`](https://primer.style/css/components/labels#states) | `v16` |
| ---------------------------------------------------------- | ---------------- |
@ -55,11 +53,11 @@ Most components don't need to be updated and should work without making changes.
| `.State--purple` | `.State--merged` |
| `.State--red` | `.State--closed` |
### Utility classes
## Utility classes
See [the color utility classes page](/utilities/colors) for a list of all the functional color utility classes.
See [color utility classes](/utilities/colors) for a list of all the functional color utility classes.
#### Text
### Text
| [`v15`](https://primer.style/css/utilities/colors#text-color-utilities) | `v16` |
| ----------------------------------------------------------------------- | ----------------------- |
@ -78,7 +76,7 @@ See [the color utility classes page](/utilities/colors) for a list of all the fu
| `.text-purple` | n/a |
| `.text-pink` | n/a |
#### Icon
### Icon
| `v15` | `v16` |
| ----- | ----------------------- |
@ -90,7 +88,7 @@ See [the color utility classes page](/utilities/colors) for a list of all the fu
| n/a | `.color-icon-warning` |
| n/a | `.color-icon-danger` |
#### Border
### Border
| [`v15`](https://primer.style/css/utilities/borders#border-color-utilities) | `v16` |
| -------------------------------------------------------------------------- | ------------------------- |
@ -115,7 +113,7 @@ See [the color utility classes page](/utilities/colors) for a list of all the fu
| `.border-white-fade-70` | n/a |
| `.border-white-fade-85` | n/a |
#### Background
### Background
| [`v15`](https://primer.style/css/utilities/colors#background-utilities) | `v16` |
| ----------------------------------------------------------------------- | --------------------------- |
@ -140,7 +138,7 @@ See [the color utility classes page](/utilities/colors) for a list of all the fu
| `.bg-orange` | n/a |
| `.bg-pink` | n/a |
#### Shadow
### Shadow
| `v15` | `v16` |
| ------------------------- | --------------------------- |
@ -149,7 +147,7 @@ See [the color utility classes page](/utilities/colors) for a list of all the fu
| `.box-shadow-large` | `.color-shadow-large` |
| `.box-shadow-extra-large` | `.color-shadow-extra-large` |
#### Link
### Link
The `link` utilities are part of the `Link` component.
@ -161,7 +159,7 @@ The `link` utilities are part of the `Link` component.
| `.link-hover-blue` | `.Link--onHover` |
| n/a | `.Link` |
### Mixins
## Mixins
| `v15` | `v16` |
| --------------- | ----- |
@ -169,11 +167,11 @@ The `link` utilities are part of the `Link` component.
| `btn-inverse()` | n/a |
| `btn-outline()` | n/a |
### Variables
## Variables
See [the color system page](/support/color-system) for a list of all the functional CSS variables.
See [color system](/support/color-system) for a list of all the functional CSS variables.
#### Text
### Text
| `v15` | `v16` |
| ------------------------------------ | ------------------------------- |
@ -194,7 +192,7 @@ See [the color system page](/support/color-system) for a list of all the functio
| `$text-purple` (`$purple-500`) | n/a |
| `$text-pink` (`$pink-500`) | n/a |
#### Icon
### Icon
| `v15` | `v16` |
| ----- | ----------------------------- |
@ -206,7 +204,7 @@ See [the color system page](/support/color-system) for a list of all the functio
| n/a | `var(--color-icon-success)` |
| n/a | `var(--color-icon-warning)` |
#### Border
### Border
| `v15` | `v16` |
| ----------------------------------------------------- | ------------------------------- |
@ -228,7 +226,7 @@ See [the color system page](/support/color-system) for a list of all the functio
| `$border-white-fade` (`$white-fade-15`) | n/a |
| `$border-green-light` (`desaturate($green-300, 40%)`) | n/a |
#### Background
### Background
| `v15` | `v16` |
| ----------------------------------- | --------------------------------- |
@ -255,7 +253,7 @@ See [the color system page](/support/color-system) for a list of all the functio
| `$bg-pink` (`$pink-500`) | n/a |
| `$bg-yellow-dark` (`$yellow-700`) | n/a |
#### Shadow
### Shadow
| `v15` | `v16` |
| ------------------------- | --------------------------------- |
@ -267,7 +265,7 @@ See [the color system page](/support/color-system) for a list of all the functio
| `$box-shadow-inset` | `var(--color-shadow-inset)` |
| `$box-shadow-focus` | `var(--color-state-focus-shadow)` |
### Color System
## Color system
| `v15` | `v16` |
| ----------- | --------------------------- |
@ -281,7 +279,7 @@ See [the color system page](/support/color-system) for a list of all the functio
| `$pink-800` | `var(--color-scale-pink-8)` |
| `$pink-900` | `var(--color-scale-pink-9)` |
### Auto colors
## Auto colors
| `v15` | `v16` |
| ----- | -------------------------- |
@ -295,15 +293,15 @@ See [the color system page](/support/color-system) for a list of all the functio
| 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:
Note: The `auto` colors automatically invert 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.
This doesn't work perfectly all the time, so you should use functional variables as much as possible. But in some cases auto colors can still be handy.
### Misc
## 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.
A few more selectors and variables were removed. Please refer to [deprecations.js](https://github.com/primer/css/blob/master/deprecations.js) for a complete list.

2
package.json
View File

@ -36,7 +36,7 @@
},
"dependencies": {
"@primer/octicons": "^9.1.1",
"@primer/primitives": "^4.0.1"
"@primer/primitives": "4.1.0"
},
"devDependencies": {
"@babel/eslint-parser": "^7.13.10",

3
src/marketing/buttons/button.scss
View File

@ -11,7 +11,8 @@
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;
transition-duration: $transition-time / 2;
transition-property: background-color, border-color, box-shadow;
appearance: none; // Corrects inability to style clickable `input` types in iOS.
&:hover {

8
yarn.lock
View File

@ -1524,10 +1524,10 @@
dependencies:
object-assign "^4.1.1"
"@primer/primitives@^4.0.1":
version "4.0.1"
resolved "https://registry.npmjs.org/@primer/primitives/-/primitives-4.0.1.tgz"
integrity sha512-TFbO/duRByLSGsCuDRo5Qgd+NOZmMKCB+au32ZHgGfn9KDdlGbbwvGKOx6c56jRWDCHk27aRL2bG4Hc9tFgHpA==
"@primer/primitives@4.1.0":
version "4.1.0"
resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-4.1.0.tgz#33d83b38e2021f294f446c41bca65f5d7ffd898a"
integrity sha512-bACUj3Xl2z5dnYKE/76BpNqN4/JXFngf26dbb7Goph2PU5wcf+Z2Kk3nXwtJPGG8JByO+FcU3gpZjLNoyuLMHQ==
"@reach/router@^1.2.1":
version "1.3.3"