-
Notifications
You must be signed in to change notification settings - Fork 2.9k
Theme generator: show in the website main nav #4251
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.
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
Changes from 10 commits
ac3909a
ff4a0ad
b0fc0c5
a0f2934
a99de6d
dfa806b
4f27327
39b6507
700f727
ca0f5cb
e67cb3d
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -38,7 +38,7 @@ export class ColorsPage extends React.Component<any, any> { | |
| /> | ||
| <div className={ css(pageStyles.u_maxTextWidth, styles.overview) }> | ||
| <h2 id='Overview'>Overview</h2> | ||
| <p>Fabric includes 9 theme colors and 11 neutral colors. Each has helper classes for text, background, border, and hover states. When selecting colors, refer to the <a className={ styles.colorsPageLink } href={ 'https://static2.sharepointonline.com/files/fabric/fabric-website/files/coloraccessibility_29sep2016.pdf' }>color accessibility guidance (PDF)</a> to ensure that your text can be ready by everyone.</p> | ||
| <p>Fabric includes 9 theme colors and 11 neutral colors. Each has helper classes for text, background, border, and hover states. When selecting colors, refer to the <a className={ styles.colorsPageLink } href={ 'https://static2.sharepointonline.com/files/fabric/fabric-website/files/coloraccessibility_29sep2016.pdf' }>color accessibility guidance (PDF)</a> to ensure that your text can be ready by everyone. If you need to customize your theme, see the <a className={ styles.colorsPageLink } href={ '#/styles/themegenerator' }>Theme generator</a>.</p> | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Is this true anymore? I thought we removed all the helper classes.
Collaborator
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. You tell me :)
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Yes, this blurb refers to Fabric Core which definitely still has these classes. |
||
| </div> | ||
| <h2 id='implementation'>Implementation</h2> | ||
| <p>Colors can be applied to text, backgrounds, or borders using the following class name conventions:</p> | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| { | ||
| "changes": [ | ||
| { | ||
| "packageName": "@uifabric/fabric-website", | ||
| "comment": "Theme generator: exposing to the website.", | ||
| "type": "minor" | ||
| } | ||
| ], | ||
| "packageName": "@uifabric/fabric-website", | ||
| "email": "lynam.emily@gmail.com" | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| { | ||
| "changes": [ | ||
| { | ||
| "packageName": "office-ui-fabric-react", | ||
| "comment": "Theme generator: exposing to the website.", | ||
| "type": "patch" | ||
| } | ||
| ], | ||
| "packageName": "office-ui-fabric-react", | ||
| "email": "lynam.emily@gmail.com" | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,70 +1,73 @@ | ||
| @import '../../common/common'; | ||
| :global { | ||
|
|
||
| .ms-themer { | ||
| padding: 12px; | ||
| h2, h3, h4 { | ||
| color: $ms-color-black; | ||
| .overview .themeGeneratorPageLink { | ||
| color: $ms-color-themePrimary; | ||
| } | ||
| } | ||
| .ms-themer h3 { | ||
| margin: 0; | ||
| } | ||
|
|
||
| .ms-themer-paletteSlot { | ||
| text-align: center; | ||
| padding: 16px; | ||
| } | ||
| .ms-themer { | ||
| padding: 12px; | ||
| h2, h3, h4 { | ||
| color: $ms-color-black; | ||
| } | ||
| } | ||
| .ms-themer h3 { | ||
| margin: 0; | ||
| } | ||
|
|
||
| .ms-themer-swatch { | ||
| display: inline-block; | ||
| flex-shrink: 0; | ||
| height: 36px; | ||
| width: 36px; | ||
| margin: 4px; | ||
| } | ||
| .ms-themer-paletteSlot { | ||
| text-align: center; | ||
| padding: 16px; | ||
| } | ||
|
|
||
| .ms-themer-swatchBg { | ||
| padding: 4px; | ||
| font-size: 0; | ||
| .ms-themer-swatch { | ||
| height: 28px; | ||
| width: 28px; | ||
| margin: 2px; | ||
| display: inline-block; | ||
| flex-shrink: 0; | ||
| height: 36px; | ||
| width: 36px; | ||
| margin: 4px; | ||
| } | ||
| } | ||
|
|
||
| .ms-themer-example { | ||
| padding: 20px; | ||
| max-width: 40%; | ||
| } | ||
| .ms-themer-swatchBg { | ||
| padding: 4px; | ||
| font-size: 0; | ||
| .ms-themer-swatch { | ||
| height: 28px; | ||
| width: 28px; | ||
| margin: 2px; | ||
| } | ||
| } | ||
|
|
||
| .ms-themer-fabricPalette-root { | ||
| display: flex; | ||
| > div { | ||
| padding-left: 20px; | ||
| .ms-themer-example { | ||
| padding: 20px; | ||
| max-width: 40%; | ||
| } | ||
| } | ||
|
|
||
| .ms-themer-accessibilityTable td { | ||
| padding: 4px; | ||
| text-align: center; | ||
| } | ||
| .ms-themer-fabricPalette-root { | ||
| display: flex; | ||
| > div { | ||
| padding-left: 20px; | ||
| } | ||
| } | ||
|
|
||
| .ms-themer-accessibilityTable td { | ||
| padding: 4px; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .ms-themer-slot { | ||
| display: flex; | ||
| align-items: center; | ||
| overflow: auto; | ||
| } | ||
| .ms-themer-slot { | ||
| display: flex; | ||
| align-items: center; | ||
| overflow: auto; | ||
| } | ||
|
|
||
| .ms-themer-output-root { | ||
| display: flex; | ||
| textarea { | ||
| height: 400px; | ||
| width: 280px; | ||
| margin-right: 28px; | ||
| background-color: white; | ||
| color: #333; | ||
| .ms-themer-output-root { | ||
| display: flex; | ||
| textarea { | ||
| height: 400px; | ||
| width: 280px; | ||
| margin-right: 28px; | ||
| background-color: white; | ||
| color: #333; | ||
| } | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Discussed in person--while it does indeed make sense for these to be consistent, doing this change will also break existing links. There may be a better way to handle a change/transition like this that won't result in a break--but we should probably look at doing that in a separate PR. That said--thanks for catching this!