Big News: Socket raises $60M Series C at a $1B valuation to secure software supply chains for AI-driven development.Announcement →
Sign In

@retriever-ui/theme

Package Overview
Dependencies
Maintainers
2
Versions
15
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@retriever-ui/theme - npm Package Compare versions

Comparing version
0.1.4
 to
1.0.0
+11
-0
CHANGELOG.md
# @retriever-ui/theme
## 1.0.0
### Major Changes
- [#32](https://github.com/indahousi/retriever/pull/32) [`9d79849`](https://github.com/indahousi/retriever/commit/9d7984990963625179a290d0b129454c0ebf9572) Thanks [@gandarfh](https://github.com/gandarfh)! - Change structure of the color schema, change global styles and fix de rem unit in typography and button size
### Patch Changes
- Updated dependencies [[`9d79849`](https://github.com/indahousi/retriever/commit/9d7984990963625179a290d0b129454c0ebf9572)]:
- @retriever-ui/type@0.0.10
## 0.1.4

@@ -4,0 +15,0 @@ 

+2
-2
lib/breakpoint.d.ts
import { BreakpointsType } from '@retriever-ui/type';
declare const breakpointFunc: (breakpoint: keyof BreakpointsType) => string;
export default breakpointFunc;
declare const breakpoint: (breakpoint: keyof BreakpointsType) => string;
export default breakpoint;
+2
-2
lib/breakpoint.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var theme_1 = require("./theme");
var breakpointFunc = function (breakpoint) {
var breakpoint = function (breakpoint) {
var size = theme_1.defaultTheme.breakpoints[breakpoint];
return "@media screen and (min-width: " + size + ")";
};
exports.default = breakpointFunc;
exports.default = breakpoint;
+10
-10
lib/button.js

@@ -5,22 +5,22 @@ "use strict";

extraSmall: {
height: '24rem',
font: '11rem',
height: '1.5rem',
font: '0.6rem',
},
small: {
height: '30rem',
font: '12rem',
height: '1.8rem',
font: '0.7rem',
},
medium: {
height: '40rem',
font: '14rem',
height: '2.5rem',
font: '0.8rem',
},
large: {
height: '46rem',
font: '16rem',
height: '2.8rem',
font: '1rem',
},
extraLarge: {
height: '50rem',
font: '18rem',
height: '3.1rem',
font: '1.1rem',
},
};
exports.default = button;
+86
-3
lib/colors.d.ts

@@ -1,6 +0,89 @@

import { ColorsType } from '@retriever-ui/type';
import { Theme } from '@emotion/react';
declare const _default: {
light: ColorsType;
dark: ColorsType;
light: {
'primary.100': string;
'primary.200': string;
'primary.300': string;
'primary.400': string;
'primary.500': string;
'primary.600': string;
'primary.700': string;
'secondary.100': string;
'secondary.200': string;
'secondary.300': string;
'secondary.400': string;
'secondary.500': string;
'secondary.600': string;
'secondary.700': string;
'black.0': string;
'black.50': string;
'black.100': string;
'black.200': string;
'black.300': string;
'black.400': string;
'black.500': string;
'black.600': string;
'black.700': string;
'black.800': string;
'black.900': string;
'green.100': string;
'green.200': string;
'green.300': string;
'green.400': string;
'green.500': string;
'green.600': string;
'green.700': string;
'red.400': string;
'red.500': string;
'red.600': string;
'red.700': string;
'yellow.400': string;
'yellow.500': string;
'yellow.600': string;
'yellow.700': string;
};
dark: {
'primary.100': string;
'primary.200': string;
'primary.300': string;
'primary.400': string;
'primary.500': string;
'primary.600': string;
'primary.700': string;
'secondary.100': string;
'secondary.200': string;
'secondary.300': string;
'secondary.400': string;
'secondary.500': string;
'secondary.600': string;
'secondary.700': string;
'black.0': string;
'black.50': string;
'black.100': string;
'black.200': string;
'black.300': string;
'black.400': string;
'black.500': string;
'black.600': string;
'black.700': string;
'black.800': string;
'black.900': string;
'green.100': string;
'green.200': string;
'green.300': string;
'green.400': string;
'green.500': string;
'green.600': string;
'green.700': string;
'red.400': string;
'red.500': string;
'red.600': string;
'red.700': string;
'yellow.400': string;
'yellow.500': string;
'yellow.600': string;
'yellow.700': string;
};
};
export default _default;
export declare type ColorsProperties<T extends Theme> = keyof T['colors'];
+80
-110
lib/colors.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var lightColor = {
primary: {
100: '#FEC5D4',
200: '#FC8AA8',
300: '#FB638B',
400: '#FA3C6E',
500: '#E13663',
600: '#AF2A4D',
700: '#7D1E37',
},
secondary: {
100: '#B3B3CB',
200: '#666696',
300: '#333373',
400: '#000050',
500: '#000040',
600: '#000030',
700: '#000020',
},
black: {
100: '#DADADA',
200: '#A3A3A3',
300: '#6C6C6C',
400: '#474747',
500: '#393939',
600: '#2B2B2B',
700: '#1C1C1C',
},
gray: {
50: '#FCFCFC',
100: '#F5F5F5',
150: '#EEEEEE',
200: '#E0E0E0',
},
green: {
100: '#CEF2E0',
200: '#86E0B2',
300: '#3DCD84',
400: '#0CC065',
500: '#0A9A51',
600: '#07733D',
700: '#054D28',
},
red: {
400: '#DF1642',
500: '#B21235',
600: '#860D28',
700: '#59091A',
},
yellow: {
400: '#FF8A00',
500: '#E67C00',
600: '#B36100',
700: '#804500',
},
white: '#FFFFFF',
'primary.100': '#FEC5D4',
'primary.200': '#FC8AA8',
'primary.300': '#FB638B',
'primary.400': '#FA3C6E',
'primary.500': '#E13663',
'primary.600': '#AF2A4D',
'primary.700': '#7D1E37',
'secondary.100': '#B3B3CB',
'secondary.200': '#666696',
'secondary.300': '#333373',
'secondary.400': '#000050',
'secondary.500': '#000040',
'secondary.600': '#000030',
'secondary.700': '#000020',
'black.0': '#FFFFFF',
'black.50': '#FCFCFC',
'black.100': '#F5F5F5',
'black.200': '#EEEEEE',
'black.300': '#A3A3A3',
'black.400': '#6C6C6C',
'black.500': '#474747',
'black.600': '#393939',
'black.700': '#2B2B2B',
'black.800': '#1C1C1C',
'black.900': '#000000',
'green.100': '#CEF2E0',
'green.200': '#86E0B2',
'green.300': '#3DCD84',
'green.400': '#0CC065',
'green.500': '#0A9A51',
'green.600': '#07733D',
'green.700': '#054D28',
'red.400': '#DF1642',
'red.500': '#B21235',
'red.600': '#860D28',
'red.700': '#59091A',
'yellow.400': '#FF8A00',
'yellow.500': '#E67C00',
'yellow.600': '#B36100',
'yellow.700': '#804500',
};
var darkColor = {
primary: {
100: '#FEC5D4',
200: '#FC8AA8',
300: '#FB638B',
400: '#FA3C6E',
500: '#E13663',
600: '#AF2A4D',
700: '#7D1E37',
},
secondary: {
100: '#B3B3CB',
200: '#666696',
300: '#333373',
400: '#000050',
500: '#000040',
600: '#000030',
700: '#000020',
},
black: {
100: '#DADADA',
200: '#A3A3A3',
300: '#6C6C6C',
400: '#474747',
500: '#393939',
600: '#2B2B2B',
700: '#1C1C1C',
},
gray: {
50: '#FCFCFC',
100: '#F5F5F5',
150: '#EEEEEE',
200: '#E0E0E0',
},
green: {
100: '#CEF2E0',
200: '#86E0B2',
300: '#3DCD84',
400: '#0CC065',
500: '#0A9A51',
600: '#07733D',
700: '#054D28',
},
red: {
400: '#DF1642',
500: '#B21235',
600: '#860D28',
700: '#59091A',
},
yellow: {
400: '#FF8A00',
500: '#E67C00',
600: '#B36100',
700: '#804500',
},
white: '#FFFFFF',
'primary.100': '#FEC5D4',
'primary.200': '#FC8AA8',
'primary.300': '#FB638B',
'primary.400': '#FA3C6E',
'primary.500': '#E13663',
'primary.600': '#AF2A4D',
'primary.700': '#7D1E37',
'secondary.100': '#B3B3CB',
'secondary.200': '#666696',
'secondary.300': '#333373',
'secondary.400': '#000050',
'secondary.500': '#000040',
'secondary.600': '#000030',
'secondary.700': '#000020',
'black.0': '#FFFFFF',
'black.50': '#FCFCFC',
'black.100': '#F5F5F5',
'black.200': '#EEEEEE',
'black.300': '#A3A3A3',
'black.400': '#6C6C6C',
'black.500': '#474747',
'black.600': '#393939',
'black.700': '#2B2B2B',
'black.800': '#1C1C1C',
'black.900': '#000000',
'green.100': '#CEF2E0',
'green.200': '#86E0B2',
'green.300': '#3DCD84',
'green.400': '#0CC065',
'green.500': '#0A9A51',
'green.600': '#07733D',
'green.700': '#054D28',
'red.400': '#DF1642',
'red.500': '#B21235',
'red.600': '#860D28',
'red.700': '#59091A',
'yellow.400': '#FF8A00',
'yellow.500': '#E67C00',
'yellow.600': '#B36100',
'yellow.700': '#804500',
};

@@ -117,0 +87,0 @@ exports.default = {

+1
-1
lib/Global.js

@@ -12,4 +12,4 @@ "use strict";

var react_2 = require("@emotion/react");
var GlobalStyles = function () { return (react_1.default.createElement(react_2.Global, { styles: function (theme) { return react_2.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n * {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n font-family: 'Montserrat', sans-serif;\n font-size: ", ";\n color: ", ";\n\n ", " {\n font-size: ", ";\n }\n }\n html {\n font-size: 6.25%;\n }\n body {\n background-color: ", ";\n font-family: 'Montserrat', sans-serif;\n transition: background 0.5s;\n }\n "], ["\n * {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n font-family: 'Montserrat', sans-serif;\n font-size: ", ";\n color: ", ";\n\n ", " {\n font-size: ", ";\n }\n }\n html {\n font-size: 6.25%;\n }\n body {\n background-color: ", ";\n font-family: 'Montserrat', sans-serif;\n transition: background 0.5s;\n }\n "])), theme.font.sizes.mobile.text.medium, theme.colors.black[400], theme.breakpointFunc('md'), theme.font.sizes.desktop.text.medium, theme.colors.gray[100]); } })); };
var GlobalStyles = function () { return (react_1.default.createElement(react_2.Global, { styles: function (theme) { return react_2.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n * {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n font-family: 'Montserrat', sans-serif;\n font-size: ", ";\n\n ", " {\n font-size: ", ";\n }\n }\n body {\n font-family: 'Montserrat', sans-serif;\n transition: background 0.5s;\n }\n "], ["\n * {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n font-family: 'Montserrat', sans-serif;\n font-size: ", ";\n\n ", " {\n font-size: ", ";\n }\n }\n body {\n font-family: 'Montserrat', sans-serif;\n transition: background 0.5s;\n }\n "])), theme.font.sizes.mobile.text.medium, theme.breakpoint('md'), theme.font.sizes.desktop.text.medium); } })); };
exports.default = GlobalStyles;
var templateObject_1;
+1
-0
lib/index.d.ts

@@ -5,2 +5,3 @@ import ThemeProvider from './ThemeProvider';

export { default as GlobalStyles } from './Global';
export { ColorsProperties } from './colors';
export { BreakpointsType, ButtonType, ColorsType, FontSizeType, FontType, FontWeightType, ITheme, LayersType, ScreensType, } from '@retriever-ui/type';
+2
-2
lib/spacings.d.ts
declare type SpacingArg = string | number;
declare const spacingsFunc: (...spacingArgs: SpacingArg[]) => string;
export default spacingsFunc;
declare const spacing: (...spacingArgs: SpacingArg[]) => string;
export default spacing;
+2
-2
lib/spacings.js

@@ -48,3 +48,3 @@ "use strict";

};
var spacingsFunc = function () {
var spacing = function () {
var spacingArgs = [];

@@ -64,2 +64,2 @@ for (var _i = 0; _i < arguments.length; _i++) {

};
exports.default = spacingsFunc;
exports.default = spacing;
+144
-4
lib/theme.d.ts

@@ -1,4 +0,144 @@

import { ITheme } from '@retriever-ui/type';
export declare const defaultTheme: Omit<ITheme, 'colors'>;
export declare const darkTheme: ITheme;
export declare const lightTheme: ITheme;
export declare const defaultTheme: {
breakpoints: {
sm: string;
md: string;
lg: string;
xl: string;
};
breakpoint: (breakpoint: keyof import("@retriever-ui/type").BreakpointsType) => string;
spacing: (...spacingArgs: (string | number)[]) => string;
font: import("@retriever-ui/type").FontType;
button: import("@retriever-ui/type").ButtonType;
layers: {
base: number;
header: number;
menu: number;
overlay: number;
modal: number;
alwaysOnTop: number;
};
};
export declare const darkTheme: {
colors: {
'primary.100': string;
'primary.200': string;
'primary.300': string;
'primary.400': string;
'primary.500': string;
'primary.600': string;
'primary.700': string;
'secondary.100': string;
'secondary.200': string;
'secondary.300': string;
'secondary.400': string;
'secondary.500': string;
'secondary.600': string;
'secondary.700': string;
'black.0': string;
'black.50': string;
'black.100': string;
'black.200': string;
'black.300': string;
'black.400': string;
'black.500': string;
'black.600': string;
'black.700': string;
'black.800': string;
'black.900': string;
'green.100': string;
'green.200': string;
'green.300': string;
'green.400': string;
'green.500': string;
'green.600': string;
'green.700': string;
'red.400': string;
'red.500': string;
'red.600': string;
'red.700': string;
'yellow.400': string;
'yellow.500': string;
'yellow.600': string;
'yellow.700': string;
};
breakpoints: {
sm: string;
md: string;
lg: string;
xl: string;
};
breakpoint: (breakpoint: keyof import("@retriever-ui/type").BreakpointsType) => string;
spacing: (...spacingArgs: (string | number)[]) => string;
font: import("@retriever-ui/type").FontType;
button: import("@retriever-ui/type").ButtonType;
layers: {
base: number;
header: number;
menu: number;
overlay: number;
modal: number;
alwaysOnTop: number;
};
};
export declare const lightTheme: {
colors: {
'primary.100': string;
'primary.200': string;
'primary.300': string;
'primary.400': string;
'primary.500': string;
'primary.600': string;
'primary.700': string;
'secondary.100': string;
'secondary.200': string;
'secondary.300': string;
'secondary.400': string;
'secondary.500': string;
'secondary.600': string;
'secondary.700': string;
'black.0': string;
'black.50': string;
'black.100': string;
'black.200': string;
'black.300': string;
'black.400': string;
'black.500': string;
'black.600': string;
'black.700': string;
'black.800': string;
'black.900': string;
'green.100': string;
'green.200': string;
'green.300': string;
'green.400': string;
'green.500': string;
'green.600': string;
'green.700': string;
'red.400': string;
'red.500': string;
'red.600': string;
'red.700': string;
'yellow.400': string;
'yellow.500': string;
'yellow.600': string;
'yellow.700': string;
};
breakpoints: {
sm: string;
md: string;
lg: string;
xl: string;
};
breakpoint: (breakpoint: keyof import("@retriever-ui/type").BreakpointsType) => string;
spacing: (...spacingArgs: (string | number)[]) => string;
font: import("@retriever-ui/type").FontType;
button: import("@retriever-ui/type").ButtonType;
layers: {
base: number;
header: number;
menu: number;
overlay: number;
modal: number;
alwaysOnTop: number;
};
};
+2
-3
lib/theme.js

@@ -30,5 +30,4 @@ "use strict";

},
breakpointFunc: breakpoint_1.default,
spacingsFunc: spacings_1.default,
spacingsMultiplier: 8,
breakpoint: breakpoint_1.default,
spacing: spacings_1.default,
font: typography_1.default,

@@ -35,0 +34,0 @@ button: button_1.default,

+25
-25
lib/typography.js

@@ -15,14 +15,14 @@ "use strict";

text: {
extraSmall: '10rem',
small: '10rem',
medium: '12rem',
large: '14rem',
extraLarge: '16rem',
extraSmall: '0.625rem',
small: '0.625rem',
medium: '0.75rem',
large: '0.875rem',
extraLarge: '1rem',
},
title: {
extraSmall: '14rem',
small: '16rem',
medium: '20rem',
large: '24rem',
extraLarge: '32rem',
extraSmall: '0.875rem',
small: '1rem',
medium: '1.25rem',
large: '1.5rem',
extraLarge: '2rem',
},

@@ -32,14 +32,14 @@ },

text: {
extraSmall: '10rem',
small: '12rem',
medium: '14rem',
large: '16rem',
extraLarge: '18rem',
extraSmall: '0.625rem',
small: '0.75rem',
medium: '0.875rem',
large: '1rem',
extraLarge: '1.125rem',
},
title: {
extraSmall: '16rem',
small: '20rem',
medium: '24rem',
large: '32rem',
extraLarge: '40rem',
extraSmall: '1rem',
small: '1.25rem',
medium: '1.5rem',
large: '2rem',
extraLarge: '2.5rem',
},

@@ -49,9 +49,9 @@ },

fixedSize: {
extraSmall: '10rem',
small: '12rem',
medium: '14rem',
large: '16rem',
extraLarge: '20rem',
extraSmall: '0.625rem',
small: '0.75rem',
medium: '0.875rem',
large: '1rem',
extraLarge: '1.25rem',
},
};
exports.default = typography;
+6
-5
package.json
{
"private": false,
"name": "@retriever-ui/theme",
"version": "0.1.4",
"version": "1.0.0",
"description": "Configuraçao dos temas e styleguide",

@@ -30,9 +30,10 @@ "license": "MIT",

"@types/react-dom": "^17.0.3",
"@types/styled-components": "^5.1.9",
"polished": "^4.1.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"styled-components": "^5.2.3",
"typescript": "^4.2.4"
},
"peerDependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"scripts": {

@@ -42,5 +43,5 @@ "build": "rm -rf lib && tsc"

"dependencies": {
"@retriever-ui/type": "^0.0.9"
"@retriever-ui/type": "^0.0.10"
},
"gitHead": "c01a9cf342f17503489f4ee9e86bc8a53228c28b"
}