Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Content Update - Joe Cacc #9

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Content Update - Joe Cacc #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2a34d11
Content Update
knapsack-cloud[bot] Nov 20, 2023
a729756
Spelling on CallOuts - Joe Cacc
knapsack-cloud[bot] Nov 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
206 changes: 206 additions & 0 deletions knapsack/data/blocks/block.ArCwEQTs8K.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,206 @@
{
"id": "ArCwEQTs8K",
"data": {
"content": {
"type": "doc",
"content": [
{
"type": "heading",
"attrs": {
"level": 2,
"textAlign": "left"
},
"content": [
{
"text": "Color in Cedar",
"type": "text",
"marks": [
{
"type": "link",
"attrs": {
"href": "https://cedar.rei.com/guidelines/color#color-in-cedar",
"class": null,
"target": "_blank"
}
},
{
"type": "bold"
}
]
}
]
},
{
"type": "paragraph",
"attrs": {
"textAlign": "start"
},
"content": [
{
"text": "We manage and distribute color in Cedar by using design tokens. These atomic pieces of information codify design-related values such as colors, fonts, spaces, animations and more.",
"type": "text"
}
]
},
{
"type": "heading",
"attrs": {
"level": 3,
"textAlign": "start"
},
"content": [
{
"text": "Color design tokens",
"type": "text",
"marks": [
{
"type": "link",
"attrs": {
"href": "https://cedar.rei.com/guidelines/color#color-design-tokens",
"class": null,
"target": "_blank"
}
},
{
"type": "bold"
}
]
}
]
},
{
"type": "paragraph",
"attrs": {
"textAlign": "start"
},
"content": [
{
"text": "Cedar uses tokens to assign specific jobs to specific colors. This process decouples the role a color plays from its hex value. It allows designers to quickly identify the right color by referencing the token name. For example, instead of coding all instances of a background color as #F4F2ED, engineers might use the token cdr-color-background-secondary.",
"type": "text"
}
]
},
{
"type": "paragraph",
"attrs": {
"textAlign": "start"
},
"content": [
{
"text": "Tokens are useful for a few reasons:",
"type": "text"
}
]
},
{
"type": "bulletList",
"content": [
{
"type": "listItem",
"content": [
{
"type": "paragraph",
"attrs": {
"textAlign": "left"
},
"content": [
{
"text": "They eliminate the need to hard-code hex values and any errors associated with that process",
"type": "text"
}
]
}
]
},
{
"type": "listItem",
"content": [
{
"type": "paragraph",
"attrs": {
"textAlign": "left"
},
"content": [
{
"text": "Their naming conventions provide guidance on how to apply color",
"type": "text"
}
]
}
]
},
{
"type": "listItem",
"content": [
{
"type": "paragraph",
"attrs": {
"textAlign": "left"
},
"content": [
{
"text": "They make it much easier to update colors as the brand evolves",
"type": "text"
}
]
}
]
},
{
"type": "listItem",
"content": [
{
"type": "paragraph",
"attrs": {
"textAlign": "left"
},
"content": [
{
"text": "They open the door to functionality like theming",
"type": "text"
}
]
}
]
}
]
},
{
"type": "paragraph",
"attrs": {
"textAlign": "start"
},
"content": [
{
"text": "For more info on how to apply color tokens, see our ",
"type": "text"
},
{
"text": "Cedar Color Tutorial",
"type": "text",
"marks": [
{
"type": "link",
"attrs": {
"href": "https://www.figma.com/community/file/1057385750878897703",
"class": null,
"target": "_blank"
}
},
{
"type": "underline"
}
]
},
{
"text": " in Figma.",
"type": "text"
}
]
}
]
}
},
"size": null,
"blockType": "text-editor"
}
22 changes: 22 additions & 0 deletions knapsack/data/blocks/block.DMZjc-6PUi.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
{
"id": "DMZjc-6PUi",
"data": {
"type": "success",
"content": {
"type": "doc",
"content": [
{
"type": "paragraph",
"content": [
{
"text": "Do's",
"type": "text"
}
]
}
]
}
},
"size": "medium",
"blockType": "callout"
}
22 changes: 22 additions & 0 deletions knapsack/data/blocks/block.MgtI7z_pQf.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
{
"id": "MgtI7z_pQf",
"data": {
"type": "error",
"content": {
"type": "doc",
"content": [
{
"type": "paragraph",
"content": [
{
"text": "Don't",
"type": "text"
}
]
}
]
}
},
"size": "medium",
"blockType": "callout"
}
33 changes: 33 additions & 0 deletions knapsack/data/blocks/block.WN1732s-vO.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
{
"id": "WN1732s-vO",
"data": {
"content": {
"type": "doc",
"content": [
{
"type": "image",
"attrs": {
"alt": "Don’t alternate background colors in visually jarring ways.",
"src": "https://knapsack.imgix.net/site/rei-cedar/color_2_dont-nlwzhcya.jpeg",
"title": "Don’t alternate background colors in visually jarring ways."
}
},
{
"type": "paragraph",
"attrs": {
"textAlign": "left"
},
"content": [
{
"text": "Don’t alternate background colors in visually jarring ways.",
"type": "text"
}
]
}
]
}
},
"size": "medium",
"blockType": "text-editor",
"spacing": null
}
32 changes: 32 additions & 0 deletions knapsack/data/blocks/block.WUVoJVmi3w.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
{
"id": "WUVoJVmi3w",
"data": {
"content": {
"type": "doc",
"content": [
{
"type": "image",
"attrs": {
"alt": "Do arrange background colors to promote page hierarchy by minimizing shifts in background.",
"src": "https://knapsack.imgix.net/site/rei-cedar/color_2_do-n39urozxul.jpeg",
"title": "Do arrange background colors to promote page hierarchy by minimizing shifts in background."
}
},
{
"type": "paragraph",
"attrs": {
"textAlign": "left"
},
"content": [
{
"text": "Do arrange background colors to promote page hierarchy by minimizing shifts in background.",
"type": "text"
}
]
}
]
}
},
"size": "medium",
"blockType": "text-editor"
}
37 changes: 37 additions & 0 deletions knapsack/data/blocks/block.YqCMozbGda.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
{
"id": "YqCMozbGda",
"data": {
"content": {
"type": "doc",
"content": [
{
"type": "paragraph",
"content": [
{
"text": "Accessibility note:",
"type": "text",
"marks": [
{
"type": "bold"
}
]
},
{
"type": "hardBreak"
},
{
"type": "hardBreak"
},
{
"text": "We’ve carefully selected the color values in Cedar and tested them to meet WCAG accessibility requirements for contrast and color. Avoid using colors outside of this palette—it can create an inaccessible experience for some users.",
"type": "text"
}
]
}
]
},
"type": "warning"
},
"size": null,
"blockType": "callout"
}
29 changes: 29 additions & 0 deletions knapsack/data/blocks/block.kWU1cLoPSC.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
{
"id": "kWU1cLoPSC",
"data": {
"shortcuts": [
{
"id": "FTh7xnv0Qs",
"link": {
"path": "https://www.figma.com/proto/l2aaMAZxjUAuQ9VBDqQA4x/REI-Brand-Hub?page-id=616%3A605&node-id=43-464&viewport=725%2C865%2C1.439374327659607&scaling=scale-down-width&hotspot-hints=0&hide-ui=1",
"external": true
},
"image": "https://knapsack.imgix.net/site/rei-cedar/brand_examples-tpnpmjszc.jpeg",
"title": "Figma",
"description": "Brand guidelines - Color"
}
],
"gridStyles": {
"columns": "2",
"centered": false
},
"tileStyles": {
"rounded": true,
"outlined": true,
"imageSize": "medium",
"titleSize": "xsmall"
}
},
"size": "small",
"blockType": "shortcut-tiles"
}
Loading
Loading