@primer/react-brand 0.2.0-rc.dd0371a → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/css/main.css +8 -8
- package/lib/design-tokens/css/tokens/base/colors/color-scales-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/base/colors/color-scales.css +1 -1
- package/lib/design-tokens/css/tokens/base/size/size.css +1 -1
- package/lib/design-tokens/css/tokens/base/typography/typography.css +1 -1
- package/lib/design-tokens/css/tokens/functional/colors/global-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/colors/global.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/button/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/hero/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/river/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/size/border.css +1 -1
- package/lib/design-tokens/css/tokens/functional/size/breakpoints.css +1 -1
- package/lib/design-tokens/css/tokens/functional/size/size-coarse.css +1 -1
- package/lib/design-tokens/css/tokens/functional/size/size-fine.css +1 -1
- package/lib/design-tokens/css/tokens/functional/size/size.css +1 -1
- package/lib/design-tokens/css/tokens/functional/typography/typography-responsive.css +1 -1
- package/lib/design-tokens/css/tokens/functional/typography/typography.css +1 -1
- package/lib/design-tokens/js/module/tokens/base/colors/color-scales.js +1 -1
- package/lib/design-tokens/js/module/tokens/base/size/size.js +1 -1
- package/lib/design-tokens/js/module/tokens/base/typography/typography.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/colors/global.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/hero/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/river/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/size/border.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/size/breakpoints.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/size/size-coarse.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/size/size-fine.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/size/size.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/size/viewport.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/typography/typography.js +1 -1
- package/lib/design-tokens/js/tokens/base/colors/color-scales.js +1 -1
- package/lib/design-tokens/js/tokens/base/size/size.js +1 -1
- package/lib/design-tokens/js/tokens/base/typography/typography.js +1 -1
- package/lib/design-tokens/js/tokens/functional/colors/global.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/hero/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/river/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/size/border.js +1 -1
- package/lib/design-tokens/js/tokens/functional/size/breakpoints.js +1 -1
- package/lib/design-tokens/js/tokens/functional/size/size-coarse.js +1 -1
- package/lib/design-tokens/js/tokens/functional/size/size-fine.js +1 -1
- package/lib/design-tokens/js/tokens/functional/size/size.js +1 -1
- package/lib/design-tokens/js/tokens/functional/size/viewport.js +1 -1
- package/lib/design-tokens/js/tokens/functional/typography/typography.js +1 -1
- package/lib/design-tokens/ts/tokens/base/colors/color-scales.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/base/colors/color-scales.js +1 -1
- package/lib/design-tokens/ts/tokens/base/size/size.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/base/size/size.js +1 -1
- package/lib/design-tokens/ts/tokens/base/typography/typography.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/base/typography/typography.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/colors/global.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/colors/global.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/hero/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/hero/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/river/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/river/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/border.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/border.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/breakpoints.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/breakpoints.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/size-coarse.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/size-coarse.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/size-fine.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/size-fine.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/size.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/size.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/viewport.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/viewport.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/typography/typography.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/typography/typography.js +1 -1
- package/package.json +1 -1
- package/CHANGELOG.md +0 -142
package/lib/css/main.css
CHANGED
|
@@ -91,7 +91,7 @@ select {
|
|
|
91
91
|
|
|
92
92
|
/**
|
|
93
93
|
* Do not edit directly
|
|
94
|
-
* Generated on Fri, 10 Jun 2022
|
|
94
|
+
* Generated on Fri, 10 Jun 2022 17:14:43 GMT
|
|
95
95
|
*/
|
|
96
96
|
|
|
97
97
|
:root {
|
|
@@ -897,7 +897,7 @@ select {
|
|
|
897
897
|
|
|
898
898
|
/**
|
|
899
899
|
* Do not edit directly
|
|
900
|
-
* Generated on Fri, 10 Jun 2022
|
|
900
|
+
* Generated on Fri, 10 Jun 2022 17:14:43 GMT
|
|
901
901
|
*/
|
|
902
902
|
|
|
903
903
|
:root {
|
|
@@ -922,7 +922,7 @@ select {
|
|
|
922
922
|
|
|
923
923
|
/**
|
|
924
924
|
* Do not edit directly
|
|
925
|
-
* Generated on Fri, 10 Jun 2022
|
|
925
|
+
* Generated on Fri, 10 Jun 2022 17:14:43 GMT
|
|
926
926
|
*/
|
|
927
927
|
|
|
928
928
|
:root {
|
|
@@ -1089,7 +1089,7 @@ select {
|
|
|
1089
1089
|
|
|
1090
1090
|
/**
|
|
1091
1091
|
* Do not edit directly
|
|
1092
|
-
* Generated on Fri, 10 Jun 2022
|
|
1092
|
+
* Generated on Fri, 10 Jun 2022 17:14:43 GMT
|
|
1093
1093
|
*/
|
|
1094
1094
|
|
|
1095
1095
|
:root {
|
|
@@ -1103,7 +1103,7 @@ select {
|
|
|
1103
1103
|
|
|
1104
1104
|
/**
|
|
1105
1105
|
* Do not edit directly
|
|
1106
|
-
* Generated on Fri, 10 Jun 2022
|
|
1106
|
+
* Generated on Fri, 10 Jun 2022 17:14:44 GMT
|
|
1107
1107
|
*/
|
|
1108
1108
|
|
|
1109
1109
|
:root {
|
|
@@ -1290,7 +1290,7 @@ select {
|
|
|
1290
1290
|
|
|
1291
1291
|
/**
|
|
1292
1292
|
* Do not edit directly
|
|
1293
|
-
* Generated on Fri, 10 Jun 2022
|
|
1293
|
+
* Generated on Fri, 10 Jun 2022 17:14:44 GMT
|
|
1294
1294
|
*/
|
|
1295
1295
|
|
|
1296
1296
|
:root {
|
|
@@ -1429,7 +1429,7 @@ select {
|
|
|
1429
1429
|
|
|
1430
1430
|
/**
|
|
1431
1431
|
* Do not edit directly
|
|
1432
|
-
* Generated on Fri, 10 Jun 2022
|
|
1432
|
+
* Generated on Fri, 10 Jun 2022 17:14:43 GMT
|
|
1433
1433
|
*/
|
|
1434
1434
|
|
|
1435
1435
|
:root {
|
|
@@ -1439,7 +1439,7 @@ select {
|
|
|
1439
1439
|
|
|
1440
1440
|
/**
|
|
1441
1441
|
* Do not edit directly
|
|
1442
|
-
* Generated on Fri, 10 Jun 2022
|
|
1442
|
+
* Generated on Fri, 10 Jun 2022 17:14:43 GMT
|
|
1443
1443
|
*/
|
|
1444
1444
|
|
|
1445
1445
|
:root {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on Fri, 10 Jun 2022
|
|
3
|
+
* Generated on Fri, 10 Jun 2022 17:14:43 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
export const BrandFontStackSystem = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'";
|
package/package.json
CHANGED
package/CHANGELOG.md
DELETED
|
@@ -1,142 +0,0 @@
|
|
|
1
|
-
# @primer/react-brand
|
|
2
|
-
|
|
3
|
-
## 0.2.0
|
|
4
|
-
|
|
5
|
-
### Minor Changes
|
|
6
|
-
|
|
7
|
-
- [#33](https://github.com/primer/react-brand/pull/33) [`662fcfc`](https://github.com/primer/react-brand/commit/662fcfc6d123460730317b7ddd3d3a4622d30dce) Thanks [@rezrah](https://github.com/rezrah)! - - Adds `River` component
|
|
8
|
-
|
|
9
|
-
- Renames `LinkButton` to `Button` :warning: (see below)
|
|
10
|
-
- Button supports polymorphism and can be used `as` either `a` or `button`
|
|
11
|
-
|
|
12
|
-
### `River`
|
|
13
|
-
|
|
14
|
-
**NEW** Component :sparkles:
|
|
15
|
-
|
|
16
|
-
<table>
|
|
17
|
-
<tr>
|
|
18
|
-
<th> Before</th> <th> After</th>
|
|
19
|
-
</tr>
|
|
20
|
-
<tr>
|
|
21
|
-
<td valign="top">❌</td>
|
|
22
|
-
<td valign="top">
|
|
23
|
-
|
|
24
|
-
```jsx
|
|
25
|
-
// import {River} from "@primer/react-brand";
|
|
26
|
-
|
|
27
|
-
<River>
|
|
28
|
-
<River.Visual>
|
|
29
|
-
<img
|
|
30
|
-
src="https://via.placeholder.com/600x400/f5f5f5/f5f5f5.png"
|
|
31
|
-
alt="placeholder, blank area with an off-white background color"
|
|
32
|
-
/>
|
|
33
|
-
</River.Visual>
|
|
34
|
-
<River.Content>
|
|
35
|
-
<Heading>Heading</Heading>
|
|
36
|
-
<Text>
|
|
37
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
|
|
38
|
-
felis nam pulvinar risus elementum.
|
|
39
|
-
</Text>
|
|
40
|
-
<Link href="#">Call to action</Link>
|
|
41
|
-
</River.Content>
|
|
42
|
-
</River>
|
|
43
|
-
```
|
|
44
|
-
|
|
45
|
-
</td>
|
|
46
|
-
</tr>
|
|
47
|
-
</table>
|
|
48
|
-
|
|
49
|
-
See more examples in our documentation.
|
|
50
|
-
https://primer.style/react-brand/components/River
|
|
51
|
-
|
|
52
|
-
### `LinkButton`
|
|
53
|
-
|
|
54
|
-
> **Warning**
|
|
55
|
-
> The changes below should be considered a breaking change for anyone relying on `LinkButton`, but as we are shipping a pre-v1 library, this has been marked as a `minor` release rather than `major`. Please remember to update your usage per the below example.
|
|
56
|
-
|
|
57
|
-
<table>
|
|
58
|
-
<tr>
|
|
59
|
-
<th> Before</th> <th> After</th>
|
|
60
|
-
</tr>
|
|
61
|
-
<tr>
|
|
62
|
-
<td valign="top">
|
|
63
|
-
|
|
64
|
-
```jsx
|
|
65
|
-
//import { LinkButton } from '@primer/react-brand';
|
|
66
|
-
|
|
67
|
-
<LinkButton href="#">Sign up</LinkButton>
|
|
68
|
-
```
|
|
69
|
-
|
|
70
|
-
</td>
|
|
71
|
-
<td valign="top">
|
|
72
|
-
|
|
73
|
-
```jsx
|
|
74
|
-
//import { Button } from '@primer/react-brand';
|
|
75
|
-
|
|
76
|
-
<Button as="a" href="#">
|
|
77
|
-
Sign up
|
|
78
|
-
</Button>
|
|
79
|
-
```
|
|
80
|
-
|
|
81
|
-
</td>
|
|
82
|
-
</tr>
|
|
83
|
-
<tr>
|
|
84
|
-
<td valign="top">
|
|
85
|
-
|
|
86
|
-
❌
|
|
87
|
-
|
|
88
|
-
</td>
|
|
89
|
-
<td valign="top">
|
|
90
|
-
|
|
91
|
-
```jsx
|
|
92
|
-
//import { Button } from '@primer/react-brand';
|
|
93
|
-
|
|
94
|
-
<Button onClick={handler}>Sign Up</Button>
|
|
95
|
-
```
|
|
96
|
-
|
|
97
|
-
</td>
|
|
98
|
-
</tr>
|
|
99
|
-
|
|
100
|
-
</table>
|
|
101
|
-
|
|
102
|
-
## 0.1.0
|
|
103
|
-
|
|
104
|
-
### Minor Changes
|
|
105
|
-
|
|
106
|
-
- [#19](https://github.com/primer/react-brand/pull/19) [`3b22e9e`](https://github.com/primer/react-brand/commit/3b22e9e0823401104d6e33b3c4f8664b755ea6ba) Thanks [@colebemis](https://github.com/colebemis)! - Add `size` prop to `Hero` component
|
|
107
|
-
|
|
108
|
-
### Patch Changes
|
|
109
|
-
|
|
110
|
-
- [#23](https://github.com/primer/react-brand/pull/23) [`77abf53`](https://github.com/primer/react-brand/commit/77abf535e77ef26fa29fb09d6d2dfb746f4bc383) Thanks [@rezrah](https://github.com/rezrah)! - add Text and Heading components
|
|
111
|
-
|
|
112
|
-
* [#29](https://github.com/primer/react-brand/pull/29) [`144c7d7`](https://github.com/primer/react-brand/commit/144c7d762a91cb691699e4f8923ab08385c77966) Thanks [@rezrah](https://github.com/rezrah)! - Removed `gh-variables.css` from package as Brand variables are now surfaced in main.css
|
|
113
|
-
|
|
114
|
-
**To upgrade:**
|
|
115
|
-
|
|
116
|
-
- _Remove_ `import "@primer/react-brand/lib/css/gh-variables.css"`
|
|
117
|
-
|
|
118
|
-
- _Add_ `import "@primer/react-brand/lib/css/main.css"`
|
|
119
|
-
|
|
120
|
-
- [#23](https://github.com/primer/react-brand/pull/23) [`77abf53`](https://github.com/primer/react-brand/commit/77abf535e77ef26fa29fb09d6d2dfb746f4bc383) Thanks [@rezrah](https://github.com/rezrah)! - forward className in Hero
|
|
121
|
-
|
|
122
|
-
* [#25](https://github.com/primer/react-brand/pull/25) [`4b00b72`](https://github.com/primer/react-brand/commit/4b00b72f5dbf5e578351ea77e1e74cddc69833e7) Thanks [@rezrah](https://github.com/rezrah)! - adds baseline tokens
|
|
123
|
-
|
|
124
|
-
- [#21](https://github.com/primer/react-brand/pull/21) [`ab06cce`](https://github.com/primer/react-brand/commit/ab06cceb6ed3b2eaca70f9738b9708343b4e6db9) Thanks [@rezrah](https://github.com/rezrah)! - Remove fixed background color from `Hero` to allow underlying customisation to be surfaced.
|
|
125
|
-
|
|
126
|
-
* [#27](https://github.com/primer/react-brand/pull/27) [`ca2d300`](https://github.com/primer/react-brand/commit/ca2d3002ba6f7ca9c719f80077c4d95246f33410) Thanks [@rezrah](https://github.com/rezrah)! - Updated Hero text appearance
|
|
127
|
-
|
|
128
|
-
- **updated** Hero description text size from `500` to `400`
|
|
129
|
-
- **updated** button alignment to not stretch on mobile viewports
|
|
130
|
-
- **removed** `size` prop. Now only one responsive size available.
|
|
131
|
-
|
|
132
|
-
## 0.0.3
|
|
133
|
-
|
|
134
|
-
### Patch Changes
|
|
135
|
-
|
|
136
|
-
- [#18](https://github.com/primer/react-brand/pull/18) [`0835830`](https://github.com/primer/react-brand/commit/0835830fc15c582e280ac692ff3d578d6bcf282e) Thanks [@rezrah](https://github.com/rezrah)! - Fixes for production bundles
|
|
137
|
-
|
|
138
|
-
## 0.0.2
|
|
139
|
-
|
|
140
|
-
### Patch Changes
|
|
141
|
-
|
|
142
|
-
- [#2](https://github.com/primer/react-brand/pull/2) [`ab01a8a`](https://github.com/primer/react-brand/commit/ab01a8ad1dc504f7a2865213b6f41c0b0adba131) Thanks [@colebemis](https://github.com/colebemis)! - Initialize releases with [changesets](https://github.com/changesets/changesets)
|