Skip to content

Commit

Permalink
chore: update styling
Browse files Browse the repository at this point in the history
  • Loading branch information
brionmario committed Dec 16, 2022
1 parent 9ab2f50 commit bcab566
Show file tree
Hide file tree
Showing 27 changed files with 491 additions and 290 deletions.
8 changes: 4 additions & 4 deletions docs/pages/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ const Index = (): ReactElement => (
Primitives
</h2>
<code>@oxygen-ui/primitives</code>
<p className={spaceGrotesk.className}>Low level building blocks of Oxygen Design System.</p>
<p className={spaceGrotesk.className}>Low level building blocks of the Design System.</p>
</a>
<a
href="https://oxygen-react.vercel.app/?path=/docs/welcome--page"
Expand All @@ -77,7 +77,7 @@ const Index = (): ReactElement => (
React Components
</h2>
<code>@oxygen-ui/react</code>
<p className={spaceGrotesk.className}>The React implementation of Oxygen Design System.</p>
<p className={spaceGrotesk.className}>The React implementation of the Design System.</p>
</a>

<a
Expand All @@ -91,7 +91,7 @@ const Index = (): ReactElement => (
Figma
</h2>
<code>@oxygen-ui/figma</code>
<p className={spaceGrotesk.className}>The origin of Oxygen Design System in Figma</p>
<p className={spaceGrotesk.className}>The place where the designing and brainstorming happens.</p>
</a>
</div>
<div className={styles.divider} />
Expand All @@ -106,7 +106,7 @@ const Index = (): ReactElement => (
<h2>Multi Brand Identity Example</h2>
<code>@oxygen-ui-examples/multi-brand-identity</code>
<p className={spaceGrotesk.className}>
Sample app to showcase Oxygen Design System&apos; multi-branding capabilities
Sample app to showcase the Design System&apos; multi-branding capabilities
</p>
</a>
</div>
Expand Down
45 changes: 11 additions & 34 deletions docs/styles/Home.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
}

.title a {
color: #0070f3;
color: var(--oxygen-palette-primary-main);
text-decoration: none;
}

Expand Down Expand Up @@ -130,8 +130,7 @@
.card:hover,
.card:focus,
.card:active {
color: #0070f3;
border-color: #0070f3;
border-color: var(--oxygen-palette-primary-main);
}

.card h2 {
Expand Down Expand Up @@ -163,35 +162,13 @@
margin-left: 0.5rem;
}

@media (max-width: 600px) {
.grid {
width: 100%;
flex-direction: column;
}
}

@media (prefers-color-scheme: dark) {
.card,
.footer {
border-color: #222;
}
.code {
background: #111;
}
.logo img {
filter: invert(0);
}
}

@media (prefers-color-scheme: light) {
.card,
.footer {
border-color: #222;
}
.code {
background: #111;
}
.logo img {
filter: invert(1);
}
.card,
.footer {
border-color: #222;
}
.code {
background: #111;
}
.logo img {
filter: invert(0);
}
5 changes: 3 additions & 2 deletions docs/styles/globals.css
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
:root {
--oxygen-palette-primary-main: #FF5000;
--oxygen-palette-primary-dark: rgb(49, 164, 151);
--oxygen-palette-primary-dark: rgb(178, 80, 0);
--oxygen-palette-background-default: #121212;
}

html,
Expand All @@ -10,7 +11,7 @@ body {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
color: white;
background: black;
background: var(--oxygen-palette-background-default);
}

a {
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
30 changes: 16 additions & 14 deletions examples/multi-brand-identity/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,14 @@
* under the License.
*/

import {AppBar, ColorModeToggle, Toolbar, ThemeProvider, IconButton, Theme} from '@oxygen-ui/react';
import {AppBar, ColorModeToggle, Toolbar, ThemeProvider, IconButton, Theme, Tooltip} from '@oxygen-ui/react';
import React, {ReactElement, useReducer, useState} from 'react';
import {BrandingActions, brandingReducer, defaultTheme} from './branding';
import {BrandingActions, brandingReducer, DefaultTheme} from './branding';
import {BrandSwitcher, BuildingIcon, OrganizationSelectionDialog} from './components';
import {LoginPage} from './pages';

const App = (): ReactElement => {
const [theme, dispatch] = useReducer(brandingReducer, defaultTheme as never);
const [theme, dispatch] = useReducer(brandingReducer, DefaultTheme as never);

const [isOrganizationSelectionOpen, setIsOrganizationSelectionOpen] = useState<boolean>(false);
const [selectedOrganization, setSelectedOrganization] = useState<string | undefined>('');
Expand All @@ -40,17 +40,19 @@ const App = (): ReactElement => {
<AppBar className="app-header" elevation={0} color="transparent" variant="outlined">
<Toolbar className="app-header-toolbar">
<div>
<IconButton
sx={{height: 40, width: 40}}
color="inherit"
onClick={(): void => {
if (!isOrganizationSelectionOpen) {
setIsOrganizationSelectionOpen(true);
}
}}
>
<BuildingIcon theme={theme} />
</IconButton>
<Tooltip title="Connect with Asgardeo Branding">
<IconButton
sx={{height: 40, width: 40}}
color="inherit"
onClick={(): void => {
if (!isOrganizationSelectionOpen) {
setIsOrganizationSelectionOpen(true);
}
}}
>
<BuildingIcon theme={theme} />
</IconButton>
</Tooltip>
<div className="selected-organization">{selectedOrganization}</div>
</div>
<BrandSwitcher onBrandChange={handleBrandChange} />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
*/

import {Theme} from '@oxygen-ui/react';
import {asgardeoTheme, choreoTheme, defaultTheme} from '../themes';
import {AsgardeoTheme, BallerinaTheme, ChoreoTheme, DefaultTheme} from '../themes';

export enum BrandingActions {
ChangeTheme = 'ChangeTheme',
Expand All @@ -26,14 +26,17 @@ export enum BrandingActions {
export const brandingReducer = (theme: Theme, action: any): Theme => {
switch (action.type) {
case BrandingActions.ChangeTheme: {
if (action.brand === 'Oxygen') {
return defaultTheme;
if (action.brand === 'WSO2') {
return DefaultTheme;
}
if (action.brand === 'Choreo') {
return choreoTheme;
return ChoreoTheme;
}
if (action.brand === 'Asgardeo') {
return asgardeoTheme;
return AsgardeoTheme;
}
if (action.brand === 'Ballerina') {
return BallerinaTheme;
}

if (action.theme) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@

import {extendTheme, Theme} from '@oxygen-ui/react';

export const asgardeoTheme: Theme = extendTheme({
export const AsgardeoTheme: Theme = extendTheme({
colorSchemes: {
dark: {
brand: {
Expand Down
127 changes: 127 additions & 0 deletions examples/multi-brand-identity/src/branding/themes/ballerina.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
/**
* Copyright (c) 2022, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
*
* WSO2 LLC. licenses this file to you under the Apache License,
* Version 2.0 (the "License"); you may not use this file except
* in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/

import {extendTheme, Theme} from '@oxygen-ui/react';

export const BallerinaTheme: Theme = extendTheme({
colorSchemes: {
dark: {
brand: {
logo: {
main: `${process.env.PUBLIC_URL}/assets/brands/ballerina/images/ballerina-logo.svg`,
},
},
palette: {
primary: {
main: '#20b6b0',
},
},
},
light: {
brand: {
logo: {
main: `${process.env.PUBLIC_URL}/assets/brands/ballerina/images/ballerina-logo-inverted.svg`,
},
},
palette: {
primary: {
main: '#20b6b0',
},
},
},
},
components: {
MuiCssBaseline: {
styleOverrides: `
/* roboto-300 - latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: url('../fonts/roboto-v30-latin-300.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/roboto-v30-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/roboto-v30-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/roboto-v30-latin-300.woff') format('woff'), /* Modern Browsers */
url('../fonts/roboto-v30-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/roboto-v30-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-regular - latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url('../fonts/roboto-v30-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/roboto-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/roboto-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/roboto-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/roboto-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/roboto-v30-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-500 - latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: url('../fonts/roboto-v30-latin-500.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/roboto-v30-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/roboto-v30-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/roboto-v30-latin-500.woff') format('woff'), /* Modern Browsers */
url('../fonts/roboto-v30-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/roboto-v30-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
}
`,
},
MuiOutlinedInput: {
styleOverrides: {
input: {
padding: '5px 10px',
},
},
},
MuiPaper: {
styleOverrides: {
root: {
borderRadius: 0,
},
},
},
},
shape: {
borderRadius: 0,
},
typography: {
fontFamily: [
'-apple-system',
'BlinkMacSystemFont',
'"Segoe UI"',
'Roboto',
'"Helvetica Neue"',
'Arial',
'sans-serif',
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
].join(','),
h1: {
fontWeight: 700,
},
},
});
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
/* eslint-disable sort-keys */
import {extendTheme, Theme} from '@oxygen-ui/react';

export const choreoTheme: Theme = extendTheme({
export const ChoreoTheme: Theme = extendTheme({
components: {
MuiTooltip: {
styleOverrides: {
Expand Down
Loading

0 comments on commit bcab566

Please sign in to comment.