-
Notifications
You must be signed in to change notification settings - Fork 69
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
[New Theme] Rename to Next
#835
Changes from all commits
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 |
---|---|---|
|
@@ -10,9 +10,9 @@ | |
*/ | ||
|
||
// sass-lint:disable no-url-domains, no-url-protocols | ||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Roboto+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap'); | ||
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. Same as previous comment |
||
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap'); | ||
|
||
@import '../../src/theme_cascadia_light'; | ||
@import '../../src/theme_next_light'; | ||
@import './components/guide_components'; | ||
@import './services/playground/index'; | ||
@import './views/suggest/global_filter_group'; | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -168,10 +168,8 @@ export const PanelExample = { | |
title="Certain allowed combinations of shadow, border, and color depend on the current theme."> | ||
<p> | ||
For instance, only plain or transparent panels can have a border | ||
and/or shadow. The Cascadia theme doesn't allow combining the{' '} | ||
<OuiCode>hasBorder</OuiCode> option with{' '} | ||
<OuiCode>hasShadow</OuiCode>. The default theme only allows | ||
removing the border if both <OuiCode>hasShadow</OuiCode> and{' '} | ||
and/or shadow. The default theme only allows removing the border | ||
if both <OuiCode>hasShadow</OuiCode> and{' '} | ||
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. Are we renaming I see difference in the comment here. Is it intended?
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. cas* was a temporary reference to a temporary and incomplete theme; that was reset to default in #816. The new colors are just named "Next" |
||
<OuiCode>hasBorder</OuiCode> are set to <OuiCode>false</OuiCode>. | ||
</p> | ||
</OuiCallOut> | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -9,15 +9,11 @@ | |
* GitHub history for details. | ||
*/ | ||
|
||
import React, { useContext } from 'react'; | ||
import React from 'react'; | ||
|
||
import { OuiPanel, OuiCode, OuiSpacer } from '../../../../src/components'; | ||
import { ThemeContext } from '../../components'; | ||
|
||
export default () => { | ||
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. Does it mean we have only one theme now (default one)? and do not need theme context anymore to determine the theme? 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. The previous beta theme had limitations and |
||
const themeContext = useContext(ThemeContext); | ||
Comment on lines
-15
to
-18
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. What is the theme context, and do we still use it elsewhere? 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. This guy is responsible for switching between light and dark themes. I donno how we switch from default to "Next" in the docs but will figure it out. 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. 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. Also, theme context is responsible for switching between themes in general on docsite, not just light/dark 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. Matt is right; for OUI, light, dark, next-light, and next-dark are individual themes. |
||
const isCascadiaTheme = themeContext.theme.includes('cascadia'); | ||
|
||
return ( | ||
<div> | ||
<OuiPanel hasShadow={false}> | ||
|
@@ -26,16 +22,6 @@ export default () => { | |
|
||
<OuiSpacer /> | ||
|
||
{/* This example only works for the Cascadia theme. The default theme has `hasBorder={true}` by default. */} | ||
{isCascadiaTheme && ( | ||
<> | ||
<OuiPanel hasBorder={true}> | ||
<OuiCode>{'hasBorder={true}'}</OuiCode> | ||
</OuiPanel> | ||
<OuiSpacer /> | ||
</> | ||
)} | ||
|
||
<OuiPanel hasShadow={false} hasBorder={false}> | ||
<OuiCode>{'hasShadow={false} hasBorder={false}'}</OuiCode> | ||
</OuiPanel> | ||
|
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.
Should this be replaced with Source Sans & Source Code fonts?
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.
Yeah, good question - @AMoo-Miki I understand we're not packaging the new fonts with OUI, but do we want to do the same thing where we hot link for the purpose of the doc site?
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.
Yep! i knew i forgot something. Thanks.
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.
To note: here, this is to enable the fonts on the docsite, not to package the fonts with OUI. OUI doesn't package any fonts out of the box, that is up to the implementor