nayya-wardrobe-json
v0.10.3
Published
Nayya's Dream Closet
Readme
nayya-wardrobe-json
Nayya's Dream Closet
Includes
- GlobalStyle.js to be used as styled components theme
- 2 themes to be used with the global styles and throughout your app
- Nayya theme
- ADP theme
- types for the themes
Installation
yarn add nayya-wardrobe
import the themes
import { nayyaTheme, adpTheme } from 'nayya-wardrobe-json/lib/nayya';and use them with styled components theme provider.
You can setup styled components global styles. like this
import NayyaStyles from 'nayya-wardrobe-json';
import { createGlobalStyle } from 'styled-components';
const GlobalStyle = createGlobalStyle`
${NayyaStyles}
`;
export { GlobalStyle };
Finally, in order to get the theme typings working properly you need to create a styled.d.ts alongside your custom types ex: src/types/styled.d.ts. Put this code into your styled.d.ts
import { ThemeObject } from 'nayya-wardrobe-json/lib/styled';
import 'styled-components';
declare module 'styled-components' {
// eslint-disable-next-line @typescript-eslint/no-empty-interface
export interface DefaultTheme extends ThemeObject {
// Add your own theme properties here
}
}
Usage
You can run the app with yarn dev to view the styles discussed here
Typography
h1-h5 will have styles applied automatically, span, p, a, etc tags will have some default styles applied. However, in order to use the rest some classes will be needed.
.super1, .super2, .super3
.body1, .body2, .body3
.label1, .label2, .label3, .label4For accessibility purposes we have also added in classes for the h tags. Accessibility requires h tags to be in order (shouldn't have an h2 tag in the structure before an h1 for example). So, you can add a h tag, and restyle it with classes
<h1 className='h3'>This h1 should look like an h3</h1>
<h1 className='label2'>This h1 should look like an a small label</h1>
Palette
The palette can be used like theme.[colorName][colorwWeight] for example:
nayyaPalette.isabelline[900];
The color names and weights can be seen in figma
Buttons
Buttons are not styled by default, this choice was made because there may be an instance where we have a one off button style we need to do, we don't want to have to override all the styles of our existing buttons. So, classes are required.
There is the light/dark mode which can be applied via .light or .dark.
Then we have the variants which are default (meaning no additional class besides the light/dark theme), .outlined, .text, and .marketing.
Next there are size classes that can be passed .mini & .large.
Finally we have different states that can be applied .active & .disabled (:disabled and :hover should be applied automatically via global styles).
You can view the different buttong in figma.
Pills
Pills are pretty straightforward
<span className="pill recommended">Recommended</span>
<span className="pill optional">Optional</span>
<span className="pill modified">Modified</span>
<span className="pill waived">Waived</span>Links
Links are similar to buttons
<a href="#" className="light">
Link
</a>
<a href="#" className="active light">
Active Link
</a>
<a href="#" className="disabled light">
Disabled Link
</a>Buttons can also be styled like links
<button type="button" className="light linkStyles">
Button as Link
</button>
<button type="button" className="light linkStyles active">
Active Button as Link
</button>
<button type="button" className="light linkStyles disabled">
Disabled Button as Link
</button>Theme Structure
id: string;
typography: {
super1: TypographyStyles;
super2: TypographyStyles;
super3: TypographyStyles;
h1: TypographyStyles;
h2: TypographyStyles;
h3: TypographyStyles;
h4: TypographyStyles;
h5: TypographyStyles;
finePrint: TypographyStyles;
body1: TypographyStyles;
body2: TypographyStyles;
body3: TypographyStyles;
label1: TypographyStyles;
label2: TypographyStyles;
label3: TypographyStyles;
label4: TypographyStyles;
bodyFont: string;
headerFont: string;
};
palette: {
colorName: ColorWeights;
};
pill: {
styles: {
fontFamily: string;
borderRadius: string;
padding: string;
fontSize: string;
fontWeight: string;
lineHeight: string;
color: string;
};
variants: {
recommended: {
backgroundColor: palette.color[number];
};
optional: {
backgroundColor: palette.color[number];
};
modified: {
backgroundColor: palette.color[number];
};
waived: {
backgroundColor: palette.color[number];
};
};
};
link: {
base: {
styles: {
fontFamily: string;
fontSize: string;
padding: string;
display: string;
letterSpacing: string;
textDecoration: string;
fontWeight: string;
};
states: {
hover: {
textDecoration: string;
textUnderlineOffset: string;
textDecorationThickness: string;
};
};
};
light: {
styles: {
color: string;
backgroundColor: string
};
states: {
hover: {
color: string;
textDecorationColor: string;
backgroundColor: string;
};
active: {
color: string;
backgroundColor: string;
};
disabled: {
color: string;
cursor: 'not-allowed';
textDecoration: string;
backgroundColor: string;
};
};
};
dark: {
styles: {
color: string;
backgroundColor: string
};
states: {
hover: {
color: string;
textDecorationColor: string;
backgroundColor: string;
};
active: {
color: string;
backgroundColor: string;
};
disabled: {
color: string;
cursor: 'not-allowed';
textDecoration: string;
backgroundColor: string;
};
};
};
};
buttons: {
base: {
styles: {
backgroundColor?: string;
fontSize?: string;
lineHeight?: string;
fontWeight?: string;
color?: string;
padding?: string;
borderRadius?: string;
border?: string;
borderColor?: string;
boxSizing?: 'border-box' | 'content-box';
cursor?: 'pointer' | 'default' | 'not-allowed' | 'wait';
};
states: {
hover?: {
backgroundColor?: string;
fontSize?: string;
lineHeight?: string;
fontWeight?: string;
color?: string;
padding?: string;
borderRadius?: string;
border?: string;
borderColor?: string;
boxSizing?: 'border-box' | 'content-box';
cursor?: 'pointer' | 'default' | 'not-allowed' | 'wait';
};
active?: {
backgroundColor?: string;
fontSize?: string;
lineHeight?: string;
fontWeight?: string;
color?: string;
padding?: string;
borderRadius?: string;
border?: string;
borderColor?: string;
boxSizing?: 'border-box' | 'content-box';
cursor?: 'pointer' | 'default' | 'not-allowed' | 'wait';
};
loading?: {
backgroundColor?: string;
fontSize?: string;
lineHeight?: string;
fontWeight?: string;
color?: string;
padding?: string;
borderRadius?: string;
border?: string;
borderColor?: string;
boxSizing?: 'border-box' | 'content-box';
cursor?: 'pointer' | 'default' | 'not-allowed' | 'wait';
};
disabled?: {
backgroundColor?: string;
fontSize?: string;
lineHeight?: string;
fontWeight?: string;
color?: string;
padding?: string;
borderRadius?: string;
border?: string;
borderColor?: string;
boxSizing?: 'border-box' | 'content-box';
cursor?: 'pointer' | 'default' | 'not-allowed' | 'wait';
};
};
variantStyles: {
mini: {
fontSize: string;
lineHeight: string;
padding: string;
};
large: {
lineHeight: string;
padding: string;
};
};
};
light: {
variants: {
outlined: {
styles: {
backgroundColor?: string;
fontSize?: string;
lineHeight?: string;
fontWeight?: string;
color?: string;
padding?: string;
borderRadius?: string;
border?: string;
borderColor?: string;
boxSizing?: 'border-box' | 'content-box';
cursor?: 'pointer' | 'default' | 'not-allowed' | 'wait';
};
states: ButtonStates;
};
text: {
styles: {
backgroundColor?: string;
fontSize?: string;
lineHeight?: string;
fontWeight?: string;
color?: string;
padding?: string;
borderRadius?: string;
border?: string;
borderColor?: string;
boxSizing?: 'border-box' | 'content-box';
cursor?: 'pointer' | 'default' | 'not-allowed' | 'wait';
};
states: ButtonStates;
};
marketing: {
styles: {
backgroundColor?: string;
fontSize?: string;
lineHeight?: string;
fontWeight?: string;
color?: string;
padding?: string;
borderRadius?: string;
border?: string;
borderColor?: string;
boxSizing?: 'border-box' | 'content-box';
cursor?: 'pointer' | 'default' | 'not-allowed' | 'wait';
};
states?: ButtonStates;
};
};
};
dark: {
variants: {
outlined: {
styles: {
backgroundColor?: string;
fontSize?: string;
lineHeight?: string;
fontWeight?: string;
color?: string;
padding?: string;
borderRadius?: string;
border?: string;
borderColor?: string;
boxSizing?: 'border-box' | 'content-box';
cursor?: 'pointer' | 'default' | 'not-allowed' | 'wait';
};
states: {
hover?: {
backgroundColor?: string;
fontSize?: string;
lineHeight?: string;
fontWeight?: string;
color?: string;
padding?: string;
borderRadius?: string;
border?: string;
borderColor?: string;
boxSizing?: 'border-box' | 'content-box';
cursor?: 'pointer' | 'default' | 'not-allowed' | 'wait';
};
active?: {
backgroundColor?: string;
fontSize?: string;
lineHeight?: string;
fontWeight?: string;
color?: string;
padding?: string;
borderRadius?: string;
border?: string;
borderColor?: string;
boxSizing?: 'border-box' | 'content-box';
cursor?: 'pointer' | 'default' | 'not-allowed' | 'wait';
};
loading?: {
backgroundColor?: string;
fontSize?: string;
lineHeight?: string;
fontWeight?: string;
color?: string;
padding?: string;
borderRadius?: string;
border?: string;
borderColor?: string;
boxSizing?: 'border-box' | 'content-box';
cursor?: 'pointer' | 'default' | 'not-allowed' | 'wait';
};
disabled?: {
backgroundColor?: string;
fontSize?: string;
lineHeight?: string;
fontWeight?: string;
color?: string;
padding?: string;
borderRadius?: string;
border?: string;
borderColor?: string;
boxSizing?: 'border-box' | 'content-box';
cursor?: 'pointer' | 'default' | 'not-allowed' | 'wait';
};
};
};
text: {
styles: {
backgroundColor?: string;
fontSize?: string;
lineHeight?: string;
fontWeight?: string;
color?: string;
padding?: string;
borderRadius?: string;
border?: string;
borderColor?: string;
boxSizing?: 'border-box' | 'content-box';
cursor?: 'pointer' | 'default' | 'not-allowed' | 'wait';
};
states: {
hover?: {
backgroundColor?: string;
fontSize?: string;
lineHeight?: string;
fontWeight?: string;
color?: string;
padding?: string;
borderRadius?: string;
border?: string;
borderColor?: string;
boxSizing?: 'border-box' | 'content-box';
cursor?: 'pointer' | 'default' | 'not-allowed' | 'wait';
};
active?: {
backgroundColor?: string;
fontSize?: string;
lineHeight?: string;
fontWeight?: string;
color?: string;
padding?: string;
borderRadius?: string;
border?: string;
borderColor?: string;
boxSizing?: 'border-box' | 'content-box';
cursor?: 'pointer' | 'default' | 'not-allowed' | 'wait';
};
loading?: {
backgroundColor?: string;
fontSize?: string;
lineHeight?: string;
fontWeight?: string;
color?: string;
padding?: string;
borderRadius?: string;
border?: string;
borderColor?: string;
boxSizing?: 'border-box' | 'content-box';
cursor?: 'pointer' | 'default' | 'not-allowed' | 'wait';
};
disabled?: {
backgroundColor?: string;
fontSize?: string;
lineHeight?: string;
fontWeight?: string;
color?: string;
padding?: string;
borderRadius?: string;
border?: string;
borderColor?: string;
boxSizing?: 'border-box' | 'content-box';
cursor?: 'pointer' | 'default' | 'not-allowed' | 'wait';
};
};
};
marketing: {
styles: {
backgroundColor?: string;
fontSize?: string;
lineHeight?: string;
fontWeight?: string;
color?: string;
padding?: string;
borderRadius?: string;
border?: string;
borderColor?: string;
boxSizing?: 'border-box' | 'content-box';
cursor?: 'pointer' | 'default' | 'not-allowed' | 'wait';
};
states?: {
hover?: {
backgroundColor?: string;
fontSize?: string;
lineHeight?: string;
fontWeight?: string;
color?: string;
padding?: string;
borderRadius?: string;
border?: string;
borderColor?: string;
boxSizing?: 'border-box' | 'content-box';
cursor?: 'pointer' | 'default' | 'not-allowed' | 'wait';
};
active?: {
backgroundColor?: string;
fontSize?: string;
lineHeight?: string;
fontWeight?: string;
color?: string;
padding?: string;
borderRadius?: string;
border?: string;
borderColor?: string;
boxSizing?: 'border-box' | 'content-box';
cursor?: 'pointer' | 'default' | 'not-allowed' | 'wait';
};
loading?: {
backgroundColor?: string;
fontSize?: string;
lineHeight?: string;
fontWeight?: string;
color?: string;
padding?: string;
borderRadius?: string;
border?: string;
borderColor?: string;
boxSizing?: 'border-box' | 'content-box';
cursor?: 'pointer' | 'default' | 'not-allowed' | 'wait';
};
disabled?: {
backgroundColor?: string;
fontSize?: string;
lineHeight?: string;
fontWeight?: string;
color?: string;
padding?: string;
borderRadius?: string;
border?: string;
borderColor?: string;
boxSizing?: 'border-box' | 'content-box';
cursor?: 'pointer' | 'default' | 'not-allowed' | 'wait';
};
};
};
};
};
};