Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@devseed-ui/theme-provider

Package Overview
Dependencies
Maintainers
3
Versions
6
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@devseed-ui/theme-provider - npm Package Compare versions

Comparing version 3.0.0 to 4.0.0

dist/index.cjs.js
dist/index.cjs.js.map
dist/index.es.js
dist/index.es.js.map
src/color-palette.d.ts
src/color-palette.js
src/helpers.d.ts
src/index.d.ts
src/math.d.ts
src/media-queries.d.ts
src/provider.d.ts
src/story-colors.js
src/story-elevation.js
src/story-theme-explorer.js
src/theme-provider.spec.js
src/theme-provider.stories.mdx
src/theme.d.ts
src/utils.d.ts

7

CHANGELOG.md
# @devseed-ui/theme-provider
## 4.0.0
`@devseed-ui/*` Now uses a fixed versioning system.
The global changelog is at the root of the repo.
----
## 3.0.0

@@ -4,0 +11,0 @@

15

package.json
{
"name": "@devseed-ui/theme-provider",
"version": "3.0.0",
"version": "4.0.0",
"description": "devseed UI Kit Theme",
"browser": "./dist/index.web.js",
"main": "./dist/index.node.js",
"main": "dist/index.cjs.js",
"module": "dist/index.es.js",
"types": "./src/index.d.ts",
"sideEffects": false,
"scripts": {
"build": "yarn webpack --config ../../webpack.config.js",
"watch": "yarn webpack --watch --config ../../webpack.config.js"
"build": "yarn rollup -c ../../rollup.config.js",
"watch": "yarn rollup -c ../../rollup.config.js -w"
},

@@ -30,3 +32,4 @@ "license": "MIT",

"polished": "^3.4.2"
}
},
"gitHead": "6d2abc5d6d83c14f401f0c29fc01d9a6888bdf8f"
}

115

README.md

@@ -8,4 +8,6 @@ # @devseed-ui/theme-provider

GlobalStyles,
createUITheme,
theme,
themeVal,
createColorPalette,

@@ -88,14 +90,12 @@ // Stylizing function

If a function is passed to the `theme` prop, it will be called with the ui-library theme.
This allows for specific overrides and is the preferred way to provide a new theme. The returned value is used as a new theme.
The best way to provide a new theme is to use the `createUITheme` helper and override the base theme variables, while also being able to add new variables.
This helper will ensure that defaults are set when no custom values are provided. Check (./src/theme.d.ts)[theme.d.ts] for a list of all theme properties.
```code
const myCustomTheme = (uiLibTheme) => {
return {
...uiLibTheme,
color: {
...uiLibTheme.color,
primary: 'teal'
}
const myCustomTheme = createUITheme({
color: {
base: '#F00',
// This is a custom color.
infographicColor: '#FF0'
}
};
});

@@ -112,91 +112,4 @@ ...

The default ui-library theme has the following values.
Check [theme.d.ts](./src/theme.d.ts) for the default ui-library theme values.
```code
color: {
baseLight: '#FFFFFF'
baseDark: '#443F3F'
primary: '#CF3F02'
secondary: '#E2C044'
tertiary: '#4DA167'
quaternary: '#2E86AB'
base: color.baseDark
background: color.baseLight
surface: color.baseLight
link: color.primary
danger: '#A71D31'
warning: color.secondary
success: color.tertiary
info: color.quaternary
baseAlphaA: rgba(color.base, 0.02)
baseAlphaB: rgba(color.base, 0.04)
baseAlphaC: rgba(color.base, 0.08)
baseAlphaD: rgba(color.base, 0.16)
baseAlphaE: rgba(color.base, 0.32)
silkLight: `radial-gradient(farthest-side, ${color.baseLight}, ${rgba(color.baseLight, 0.64)})`
silkDark: `radial-gradient(farthest-side, ${color.baseDark}, ${rgba(color.baseDark, 0.64)})`
}
type: {
base: {
root: '16px'
size: '1rem'
line: '1.5'
color: color.base
family: '"Open Sans", sans-serif'
style: 'normal'
settings: 'normal'
case: 'none'
light: 300
regular: 400
medium: 600
bold: 700
weight: 300
antialiasing: true
}
heading: {
family: '"Open Sans", sans-serif'
style: 'normal'
settings: 'normal'
case: 'none'
light: 300
regular: 400
medium: 600
bold: 700
weight: 700
}
button: {
family: '"Open Sans", sans-serif'
style: 'normal'
settings: 'normal'
case: 'none'
weight: 700
}
}
shape: {
rounded: '0.25rem'
ellipsoid: '320rem'
}
layout: {
space: '1rem'
border: '1px'
min: '320px'
max: '1280px'
}
boxShadow: {
inset: `inset 0px 0px 3px 0px ${color.baseAlphaA};`
input: `0 -1px 1px 0 ${color.baseAlphaC}, 0 2px 6px 0 ${color.baseAlphaD};`
elevationA: `0 0 4px 0 ${color.baseAlphaC}, 0 2px 2px 0 ${color.baseAlphaC};`
elevationB: `0 0 4px 0 ${color.baseAlphaC}, 0 4px 4px 0 ${color.baseAlphaC};`
elevationC: `0 0 4px 0 ${color.baseAlphaC}, 0 8px 12px 0 ${color.baseAlphaC};`
elevationD: `0 0 4px 0 ${color.baseAlphaC}, 0 12px 24px 0 ${color.baseAlphaC};`
}
mediaRanges {
xsmall: [null, 543]
small: [544, 767]
medium: [768, 991]
large: [992, 1199]
xlarge: [1216, null]
}
```
# API Documentation

@@ -212,5 +125,7 @@

- Global styled applied by the ui-library. It is included in the `DevseedUiThemeProvider`, so this is not used often.
- `createUITheme(definition)` [function]
- Creates a UI theme by combining the provided options with the default ones.
- `theme` [object]
- Default ui-library theme.
- `themeVal` [function]
- `themeVal(path)` [function]
- Function to be used with styled-components to get a value from the theme.

@@ -222,2 +137,4 @@ ```code

```
- `createColorPalette(name, baseColor)` [function]
- Function to create a color palette base off of the provided base color including lightened/darkened/transparent versions of that color.

@@ -224,0 +141,0 @@ ### Stylizing function

1

src/helpers.js

@@ -40,3 +40,2 @@ import { css } from 'styled-components';

pointer-events: none;
cursor: not-allowed;
`;

@@ -43,0 +42,0 @@

11

src/index.js
import { GlobalStyles, DevseedUiThemeProvider } from './provider';
import theme from './theme';
import { createUITheme, theme } from './theme';
import {

@@ -11,3 +11,3 @@ antialiased,

unscrollableY,
unscrollableX,
unscrollableX
} from './helpers';

@@ -23,11 +23,14 @@ import {

glsp,
rgba,
rgba
} from './utils';
import { multiply, divide, add, subtract, min, max } from './math';
import media from './media-queries';
import { createColorPalette } from './color-palette';
export {
createUITheme,
DevseedUiThemeProvider,
GlobalStyles,
theme,
createColorPalette,
unitify,

@@ -56,3 +59,3 @@ rem,

unscrollableX,
media,
media
};

90

src/math.js

@@ -19,21 +19,24 @@ /**

*/
const createMathOperation = op => (a, b) => (...args) => {
a = typeof a === 'function' ? a(...args) : a;
b = typeof b === 'function' ? b(...args) : b;
const createMathOperation =
(op) =>
(a, b) =>
(...args) => {
a = typeof a === 'function' ? a(...args) : a;
b = typeof b === 'function' ? b(...args) : b;
// The final unit is driven by the `a` value.
const unit = (a + '').match(/[0-9]*(?:.[0-9]+)?(.*)/)[1];
const aVal = parseFloat(a);
const bVal = parseFloat(b);
// The final unit is driven by the `a` value.
const unit = (a + '').match(/[0-9]*(?:.[0-9]+)?(.*)/)[1];
const aVal = parseFloat(a);
const bVal = parseFloat(b);
if (op === '+') {
return `${aVal + bVal}${unit}`;
} else if (op === '-') {
return `${aVal - bVal}${unit}`;
} else if (op === '/') {
return `${aVal / bVal}${unit}`;
} else if (op === '*') {
return `${aVal * bVal}${unit}`;
}
};
if (op === '+') {
return `${aVal + bVal}${unit}`;
} else if (op === '-') {
return `${aVal - bVal}${unit}`;
} else if (op === '/') {
return `${aVal / bVal}${unit}`;
} else if (op === '*') {
return `${aVal * bVal}${unit}`;
}
};

@@ -84,31 +87,34 @@ /**

const createMinMaxOp = op => (a, b) => (...args) => {
a = typeof a === 'function' ? a(...args) : a;
b = typeof b === 'function' ? b(...args) : b;
const createMinMaxOp =
(op) =>
(a, b) =>
(...args) => {
a = typeof a === 'function' ? a(...args) : a;
b = typeof b === 'function' ? b(...args) : b;
const unitRx = /[0-9]*(?:.[0-9]+)?(.*)/;
const aUnit = (a + '').match(unitRx)[1];
const bUnit = (b + '').match(unitRx)[1];
const aVal = parseFloat(a);
const bVal = parseFloat(b);
const unitRx = /[0-9]*(?:.[0-9]+)?(.*)/;
const aUnit = (a + '').match(unitRx)[1];
const bUnit = (b + '').match(unitRx)[1];
const aVal = parseFloat(a);
const bVal = parseFloat(b);
// If the values are different but set, return no unit, otherwise return the
// unit of the value that has it. this is useful when comparing for example
// 10px with 16.
let unit = '';
// If the values are different but set, return no unit, otherwise return the
// unit of the value that has it. this is useful when comparing for example
// 10px with 16.
let unit = '';
if (aUnit === bUnit) {
unit = aUnit;
} else if (aUnit && !bUnit) {
unit = aUnit;
} else if (!aUnit && bUnit) {
unit = bUnit;
}
if (aUnit === bUnit) {
unit = aUnit;
} else if (aUnit && !bUnit) {
unit = aUnit;
} else if (!aUnit && bUnit) {
unit = bUnit;
}
if (op === 'min') {
return `${Math.min(aVal, bVal)}${unit}`;
} else if (op === 'max') {
return `${Math.max(aVal, bVal)}${unit}`;
}
};
if (op === 'min') {
return `${Math.min(aVal, bVal)}${unit}`;
} else if (op === 'max') {
return `${Math.max(aVal, bVal)}${unit}`;
}
};

@@ -115,0 +121,0 @@ /**

8

src/media-queries.js

@@ -76,3 +76,3 @@ import { css } from 'styled-components';

[`${label}${type}`]: (...args) => {
return props => {
return (props) => {
const range = get(props.theme, ['mediaRanges', label]);

@@ -94,5 +94,5 @@

};
},
}
}),
{},
{}
);

@@ -122,3 +122,3 @@ }

...acc,
...createMediaRangeBounds(label),
...createMediaRangeBounds(label)
};

@@ -125,0 +125,0 @@ }, {});

159

src/provider.js
import React from 'react';
import { createGlobalStyle, css, ThemeProvider } from 'styled-components';
import { normalize } from 'polished';
import { themeVal, rgba } from './utils';
import theme from './theme';
import { themeVal } from './utils';
import { theme } from './theme';

@@ -14,19 +13,53 @@ import { unscrollableY, unscrollableX } from './helpers';

const baseStyles = css`
html {
box-sizing: border-box;
font-size: ${themeVal('type.base.root')};
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/**
* Based on
* https://hankchizljaw.com/wrote/a-modern-css-reset/
*/
/* Box sizing rules */
*,
*::before,
*::after {
box-sizing: inherit;
box-sizing: border-box;
}
/* Set core root defaults */
html:focus-within {
scroll-behavior: smooth;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* Set default line-height */
* {
line-height: ${themeVal('type.base.line')};
}
/* Remove default margin */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
figure,
blockquote,
dl,
dd {
margin: 0;
}
/* Remove list styles on ul, ol elements with a list role, which suggests
default styling will be removed */
ul[role='list'],
ol[role='list'] {
list-style: none;
padding: 0;
}
/* Set core <body> defaults */
body {

@@ -36,3 +69,2 @@ background-color: ${themeVal('color.background')};

font-size: ${themeVal('type.base.size')};
line-height: ${themeVal('type.base.line')};
/* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */

@@ -45,2 +77,4 @@ font-family: ${themeVal('type.base.family')};

min-width: ${themeVal('layout.min')};
min-height: 100vh;
text-rendering: optimizeSpeed;

@@ -55,6 +89,4 @@ ${({ theme }) =>

/* Links
========================================================================== */
a {
/* Apply some default styles to <a> elements without a class */
a:not([class]) {
cursor: pointer;

@@ -64,70 +96,32 @@ color: ${themeVal('color.link')};

transition: opacity 0.24s ease 0s;
}
a:visited {
color: ${themeVal('color.link')};
}
&:visited {
color: ${themeVal('color.link')};
}
a:hover {
opacity: 0.64;
}
&:hover {
opacity: 0.64;
}
a:active {
transform: translate(0, 1px);
&:active {
transform: translate(0, 1px);
}
}
/* Buttons
========================================================================== */
[role='button'] {
cursor: pointer;
/* Make images easier to work with */
img,
picture {
max-width: 100%;
display: block;
}
/* Forms
========================================================================== */
/* Inherit fonts for <input> and <button> */
input,
select,
textarea {
button,
textarea,
select {
font: inherit;
height: auto;
width: auto;
margin: 0;
}
/* Tables
========================================================================== */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* Lists
========================================================================== */
ol,
ul {
list-style: none;
}
/* Blockquotes
========================================================================== */
blockquote,
q {
quotes: none;
}
blockquote::before,
blockquote::after,
q::before,
q::after {
content: '';
content: none;
}
/* Text-level semantics
========================================================================== */
/* Text-level semantics */
b,

@@ -138,8 +132,22 @@ strong {

/* Misc
========================================================================== */
/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
html:focus-within {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* Misc */
::selection {
background-color: ${rgba(themeVal('color.base'), 0.64)};
color: ${themeVal('color.baseLight')};
background-color: ${themeVal('color.base-400a')};
color: ${themeVal('color.surface')};
}

@@ -161,3 +169,2 @@

const GlobalStyles = createGlobalStyle`
${normalize()}
${baseStyles}

@@ -164,0 +171,0 @@ `;

385

src/theme.js

@@ -1,117 +0,288 @@

import { rgba } from 'polished';
import { createColorPalette } from './color-palette';
let color = {
baseLight: '#FFFFFF',
baseDark: '#443F3F',
primary: '#CF3F02',
secondary: '#E2C044',
tertiary: '#4DA167',
quaternary: '#2E86AB',
};
/**
* Creates a UI theme by combining the provided options with the default ones.
* When an override for a value is provided, it gets propagated to all the
* variables that use that value. For example: The primary color will be used
* for links unless a color for "link" is provided.
*
* @param {DevseedUITheme} definition The theme definition
*
* @returns DevseedUITheme
*/
export function createUITheme(definition = {}) {
const {
color = {},
type = {},
shape = {},
layout = {},
button = {},
boxShadow = {},
mediaRanges = {},
...customDefinition
} = definition;
color = {
...color,
base: color.baseDark,
background: color.baseLight,
surface: color.baseLight,
link: color.primary,
danger: '#A71D31',
warning: color.secondary,
success: color.tertiary,
info: color.quaternary,
};
const {
surface = '#FFFFFF',
base = '#443F3F',
primary = '#CF3F02',
secondary = '#E2C044',
danger = '#A71D31',
warning = '#E2C044',
success = '#4DA167',
info = '#2E86AB',
background,
link,
...customColors
} = color;
color = {
...color,
baseAlphaA: rgba(color.base, 0.02),
baseAlphaB: rgba(color.base, 0.04),
baseAlphaC: rgba(color.base, 0.08),
baseAlphaD: rgba(color.base, 0.16),
baseAlphaE: rgba(color.base, 0.32),
silkLight: `radial-gradient(farthest-side, ${color.baseLight}, ${rgba(
color.baseLight,
0.64,
)})`,
silkDark: `radial-gradient(farthest-side, ${color.baseDark}, ${rgba(
color.baseDark,
0.64,
)})`,
};
const colorScales = {
...createColorPalette('base', base),
...createColorPalette('surface', surface),
...createColorPalette('primary', primary),
...createColorPalette('secondary', secondary),
...createColorPalette('danger', danger),
...createColorPalette('warning', warning),
...createColorPalette('success', success),
...createColorPalette('info', info)
};
const type = {
base: {
root: '16px',
size: '1rem',
line: '1.5',
color: color.base,
family: '"Open Sans", sans-serif',
style: 'normal',
settings: 'normal',
case: 'none',
light: 300,
regular: 400,
medium: 600,
bold: 700,
weight: 300,
antialiasing: true,
},
heading: {
family: '"Open Sans", sans-serif',
style: 'normal',
settings: 'normal',
case: 'none',
light: 300,
regular: 400,
medium: 600,
bold: 700,
weight: 700,
textTransform: 'none',
},
button: {
family: '"Open Sans", sans-serif',
style: 'normal',
settings: 'normal',
case: 'none',
weight: 700,
},
};
const {
base: typeBase = {},
heading: typeHeading = {},
overline: typeOverline = {},
...customType
} = type;
const shape = {
rounded: '0.25rem',
ellipsoid: '320rem',
};
const {
size: typeBaseSize = '1rem',
line: typeBaseLine = 'calc(0.5rem + 1em)',
color: typeBaseColor = base,
family: typeBaseFamily = '"Open Sans", sans-serif',
style: typeBaseStyle = 'normal',
settings: typeBaseSettings = "'pnum' 0",
case: typeBaseCase = 'none',
light: typeBaseLight = 300,
regular: typeBaseRegular = 400,
medium: typeBaseMedium = 600,
bold: typeBaseBold = 700,
weight: typeBaseWeight = 300,
antialiasing: typeBaseAntialiasing = true,
...customTypeBase
} = typeBase;
const layout = {
space: '1rem',
border: '1px',
min: '320px',
max: '1280px',
};
const { leadSize: typeLeadSize = `calc(${typeBaseSize} * 1.5)` } = typeBase;
const boxShadow = {
inset: `inset 0px 0px 3px 0px ${color.baseAlphaA};`,
input: `0 -1px 1px 0 ${color.baseAlphaC}, 0 2px 6px 0 ${color.baseAlphaD};`,
elevationA: `0 0 4px 0 ${color.baseAlphaC}, 0 2px 2px 0 ${color.baseAlphaC};`,
elevationB: `0 0 4px 0 ${color.baseAlphaC}, 0 4px 4px 0 ${color.baseAlphaC};`,
elevationC: `0 0 4px 0 ${color.baseAlphaC}, 0 8px 12px 0 ${color.baseAlphaC};`,
elevationD: `0 0 4px 0 ${color.baseAlphaC}, 0 12px 24px 0 ${color.baseAlphaC};`,
};
const {
family: typeHeadingFamily = typeBaseFamily,
style: typeHeadingStyle = typeBaseStyle,
settings: typeHeadingSettings = '"wdth" 80, "wght" 780',
case: typeHeadingCase = typeBaseCase,
light: typeHeadingLight = typeBaseLight,
regular: typeHeadingRegular = typeBaseRegular,
medium: typeHeadingMedium = typeBaseMedium,
bold: typeHeadingBold = typeBaseBold,
weight: typeHeadingWeight = typeBaseBold,
textTransform: typeHeadingTextTransform = 'none',
...customTypeHeading
} = typeHeading;
const mediaRanges = {
xsmall: [null, 543],
small: [544, 767],
medium: [768, 991],
large: [992, 1199],
xlarge: [1216, null],
};
const {
family: typeOverlineFamily = typeBaseFamily,
style: typeOverlineStyle = typeBaseStyle,
settings: typeOverlineSettings = typeBaseSettings,
case: typeOverlineCase = typeBaseCase,
light: typeOverlineLight = typeBaseLight,
regular: typeOverlineRegular = typeBaseRegular,
medium: typeOverlineMedium = typeBaseMedium,
bold: typeOverlineBold = typeBaseBold,
weight: typeOverlineWeight = typeBaseBold,
textTransform: typeOverlineTextTransform = 'uppercase',
...customTypeOverline
} = typeOverline;
export default {
main: {
layout,
color,
type,
shape,
boxShadow,
mediaRanges,
},
const { rounded = '0.25rem', ellipsoid = '320rem', ...customShape } = shape;
const {
space = '1rem',
border = '1px',
min = '320px',
max = '1280px',
...customLayout
} = layout;
const {
type: buttonType = {},
shape: buttonShape = {},
...customButton
} = button;
const {
family: buttonTypeFamily = typeBaseFamily,
style: buttonTypeStyle = typeBaseStyle,
settings: buttonTypeSettings = typeBaseSettings,
case: buttonTypeCase = typeBaseCase,
weight: buttonTypeWeight = typeBaseBold,
...customButtonType
} = buttonType;
const {
border: buttonShapeBorder = border,
rounded: buttonShapeRounded = rounded,
...customButtonShape
} = buttonShape;
const {
inset = `inset 0px 0px 3px 0px ${colorScales['base-50a']};`,
input = `0 -1px 1px 0 ${colorScales['base-100a']}, 0 2px 6px 0 ${colorScales['base-200a']};`,
elevationA = `0 0 4px 0 ${colorScales['base-100a']}, 0 2px 2px 0 ${colorScales['base-100a']};`,
elevationB = `0 0 4px 0 ${colorScales['base-100a']}, 0 4px 4px 0 ${colorScales['base-100a']};`,
elevationC = `0 0 4px 0 ${colorScales['base-100a']}, 0 8px 12px 0 ${colorScales['base-100a']};`,
elevationD = `0 0 4px 0 ${colorScales['base-100a']}, 0 12px 24px 0 ${colorScales['base-100a']};`,
...customBoxShadow
} = boxShadow;
const {
xsmall = [null, 543],
small = [544, 767],
medium = [768, 991],
large = [992, 1199],
xlarge = [1216, null]
} = mediaRanges;
//
// Theme object definition
return {
...customDefinition,
color: {
// base color for the site. Text and all elements that are not colored.
// required
base,
// Background color for filled elements that sit on top of the body.
// (cards, panel, modal...)
// required
surface,
// required
primary,
// required
secondary,
// States colors
// required
danger,
// required
warning,
// required
success,
// required
info,
// Only used for body color. Uses surface if not provided.
background: background || surface,
// Color for links. Uses primary if not defined
link: link || primary,
// User defined colors which may include scales.
...customColors,
// Scales
...colorScales
},
type: {
base: {
size: typeBaseSize,
leadSize: typeLeadSize,
line: typeBaseLine,
color: typeBaseColor,
family: typeBaseFamily,
style: typeBaseStyle,
settings: typeBaseSettings,
case: typeBaseCase,
light: typeBaseLight,
regular: typeBaseRegular,
medium: typeBaseMedium,
bold: typeBaseBold,
weight: typeBaseWeight,
antialiasing: typeBaseAntialiasing,
...customTypeBase
},
heading: {
family: typeHeadingFamily,
style: typeHeadingStyle,
settings: typeHeadingSettings,
case: typeHeadingCase,
light: typeHeadingLight,
regular: typeHeadingRegular,
medium: typeHeadingMedium,
bold: typeHeadingBold,
weight: typeHeadingWeight,
textTransform: typeHeadingTextTransform,
...customTypeHeading
},
overline: {
family: typeOverlineFamily,
style: typeOverlineStyle,
settings: typeOverlineSettings,
case: typeOverlineCase,
light: typeOverlineLight,
regular: typeOverlineRegular,
medium: typeOverlineMedium,
bold: typeOverlineBold,
weight: typeOverlineWeight,
textTransform: typeOverlineTextTransform,
...customTypeOverline
},
...customType
},
shape: {
rounded,
ellipsoid,
...customShape
},
layout: {
space,
border,
min,
max,
...customLayout
},
button: {
type: {
family: buttonTypeFamily,
style: buttonTypeStyle,
settings: buttonTypeSettings,
case: buttonTypeCase,
weight: buttonTypeWeight,
...customButtonType
},
shape: {
border: buttonShapeBorder,
rounded: buttonShapeRounded,
...customButtonShape
},
...customButton
},
boxShadow: {
inset,
input,
elevationA,
elevationB,
elevationC,
elevationD,
...customBoxShadow
},
mediaRanges: {
xsmall,
small,
medium,
large,
xlarge
}
};
}
export const theme = {
main: createUITheme()
};

85

src/utils.js

@@ -16,3 +16,3 @@ import get from 'lodash.get';

*/
export const unitify = unit => v =>
export const unitify = (unit) => (v) =>
typeof v === 'function' ? (...args) => `${v(...args)}${unit}` : `${v}${unit}`;

@@ -63,26 +63,30 @@

*/
const rp2rp = (v, unit) => (...args) => {
v = typeof v === 'function' ? v(...args) : v;
unit = typeof unit === 'function' ? unit(...args) : unit;
const rp2rp =
(v, unit) =>
(...args) => {
v = typeof v === 'function' ? v(...args) : v;
unit = typeof unit === 'function' ? unit(...args) : unit;
const rootV = get(args[0], 'theme.type.base.root', null);
const rootV = get(args[0], 'theme.type.base.root', null);
if (rootV === null) {
throw new Error('Root type pixel value not found in theme.type.base.root');
}
if (rootV === null) {
throw new Error(
'Root type pixel value not found in theme.type.base.root'
);
}
const srcUnit = (v + '').match(/[0-9]*(?:.[0-9]+)?(.*)/)[1];
const srcVal = parseFloat(v);
const srcUnit = (v + '').match(/[0-9]*(?:.[0-9]+)?(.*)/)[1];
const srcVal = parseFloat(v);
if (unit === 'px') {
return px(srcUnit === 'rem' ? srcVal * parseFloat(rootV) : srcVal);
}
if (unit === 'px') {
return px(srcUnit === 'rem' ? srcVal * parseFloat(rootV) : srcVal);
}
if (unit === 'rem') {
return rem(srcUnit === 'px' ? srcVal / parseFloat(rootV) : srcVal);
}
if (unit === 'rem') {
return rem(srcUnit === 'px' ? srcVal / parseFloat(rootV) : srcVal);
}
// Invalid unit - return as is.
return v;
};
// Invalid unit - return as is.
return v;
};

@@ -104,3 +108,3 @@ /**

*/
export const val2px = val => {
export const val2px = (val) => {
return rp2rp(val, 'px');

@@ -124,3 +128,3 @@ };

*/
export const val2rem = val => {
export const val2rem = (val) => {
return rp2rp(val, 'rem');

@@ -135,15 +139,17 @@ };

*/
export const themeVal = path => ({ theme }) => {
const v = get(theme, path, undefined);
export const themeVal =
(path) =>
({ theme }) => {
const v = get(theme, path, undefined);
if (v === undefined) {
console.error(
if (v === undefined) {
console.error(
// eslint-disable-line
`Theme Value Error: path [${path}] not found in theme.`,
theme,
);
}
`Theme Value Error: path [${path}] not found in theme.`,
theme
);
}
return v;
};
return v;
};

@@ -164,9 +170,10 @@ /**

*/
export const stylizeFunction = fn => {
return (...fnArgs) => (...props) => {
const mappedArgs = fnArgs.map(arg =>
typeof arg === 'function' ? arg(...props) : arg,
);
return fn(...mappedArgs);
};
export const stylizeFunction = (fn) => {
return (...fnArgs) =>
(...props) => {
const mappedArgs = fnArgs.map((arg) =>
typeof arg === 'function' ? arg(...props) : arg
);
return fn(...mappedArgs);
};
};

@@ -182,3 +189,3 @@

args = args.length ? args : [1];
const fns = args.map(m => multiply(themeVal('layout.space'), m));
const fns = args.map((m) => multiply(themeVal('layout.space'), m));
// If the there's only one argument return in value format to be used by

@@ -185,0 +192,0 @@ // other methods that need this to resolve to a number.

dist/index.node.js
dist/index.web.js
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc