New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

@cloudflare/style-const

Package Overview
Dependencies
Maintainers
13
Versions
402
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@cloudflare/style-const - npm Package Compare versions

Comparing version 2.5.3 to 3.0.0

89

dist/variables.d.ts

@@ -6,2 +6,10 @@ import { ValueOfArray } from '@cloudflare/types';

}[ColorOnScale];
declare type FocusBoxShadowProps = {
invalid?: boolean;
space?: number;
outline?: number;
};
declare type FocusProps = {
borderRadius?: number;
} & FocusBoxShadowProps;
declare const theme: {

@@ -18,3 +26,3 @@ readonly breakpoints: {

};
readonly fontSizes: readonly [10, 12, 14, 16, 20, 24, 32, 48, 64, 80];
readonly fontSizes: number[];
readonly space: readonly [0, 4, 8, 16, 32, 64, 128, 256];

@@ -44,37 +52,54 @@ readonly radii: readonly [0, 3, 5];

readonly colors: {
readonly black: "#000";
readonly white: "#fff";
readonly cfOrange: "#F6821F";
readonly marketing: {
readonly orange: "#F6821F";
readonly lightOrange: "#FBAD41";
readonly red: "#e04e64";
readonly lightRed: "#e27179";
readonly green: "#71c492";
readonly lightGreen: "#9fd3b5";
readonly cyan: "#2da7cb";
readonly lightCyan: "#89c4e1";
readonly purple: "#7d4788";
readonly lightPurple: "#af7baf";
readonly blue: "#00517f";
readonly lightBlue: "#4f8cc8";
readonly gray: readonly ["#404242", "#707070", "#aaaaaa", "#dddddd", "#f5f5f5"];
black: string;
white: string;
cfOrange: string;
marketing: {
orange: string;
lightOrange: string;
red: string;
lightRed: string;
green: string;
lightGreen: string;
cyan: string;
lightCyan: string;
purple: string;
lightPurple: string;
blue: string;
lightBlue: string;
gray: string[];
};
readonly vendor: {
readonly twitter: "#00aced";
readonly facebook: "#3b5998";
vendor: {
twitter: string;
facebook: string;
};
readonly red: readonly ["#3c0501", "#5a0801", "#780a02", "#970d02", "#b20f03", "#e81403", "#fc574a", "#fe9f97", "#feccc8", "#ffefee"];
readonly orange: readonly ["#361a02", "#482303", "#592b04", "#763905", "#8d4406", "#c05d08", "#ee730a", "#f8a054", "#fbcda5", "#fef1e6"];
readonly gold: readonly ["#261c00", "#3e2d00", "#4c3700", "#644900", "#735400", "#a77a00", "#dda100", "#ffce4b", "#ffeab2", "#fff8e4"];
readonly green: readonly ["#0a2614", "#0e381d", "#104122", "#15562d", "#196535", "#228b49", "#2db35e", "#55d584", "#a8e9c0", "#e3f8eb"];
readonly cyan: readonly ["#061b20", "#0b333e", "#0d3e4b", "#115061", "#156074", "#1e89a5", "#30b6da", "#73cee6", "#ace2f0", "#e9f7fb"];
readonly blue: readonly ["#001c43", "#002b67", "#003681", "#0045a6", "#0051c3", "#086fff", "#4693ff", "#82b6ff", "#b9d6ff", "#ecf4ff"];
readonly indigo: readonly ["#170f58", "#221785", "#2c1ea9", "#3524cd", "#4b3bdc", "#7366e4", "#9d94ec", "#c2bdf3", "#dfdcf9", "#f1f0fc"];
readonly violet: readonly ["#350b42", "#490f5c", "#5f1477", "#741892", "#8d1eb1", "#b73cdf", "#cf7ee9", "#dfa8f1", "#ebcaf6", "#f7eafb"];
readonly pink: readonly ["#2d0210", "#4e031c", "#6a0426", "#8d0633", "#af0740", "#e80954", "#f85189", "#fb97b9", "#fdc9db", "#fef1f5"];
readonly gray: readonly ["#1d1d1d", "#313131", "#3d3d3d", "#4a4a4a", "#595959", "#797979", "#999999", "#b6b6b6", "#d9d9d9", "#f2f2f2"];
readonly categorical: readonly ["#4693FF", "#82B6FF", "#FBAD41", "#FCC373", "#55D584", "#7EDFA2", "#F85189", "#FB97B9", "#B73CDF", "#CF7EE9", "#FFE43E", "#FFEAB2", "#73CEE6", "#ACE2F0", "#E81403", "#FC574A"];
red: string[];
orange: string[];
gold: string[];
green: string[];
cyan: string[];
blue: string[];
indigo: string[];
violet: string[];
pink: string[];
gray: string[];
categorical: string[];
};
readonly color: {};
readonly focusBoxShadow: ({ invalid, space, outline }?: FocusBoxShadowProps) => string;
readonly mixin: {
readonly focus: ({ borderRadius, ...boxShadowProps }?: FocusProps) => {
'&:focus': {
outline: string;
};
'&:focus-within': {
outline: string;
boxShadow: string;
borderRadius: string;
};
};
readonly error: () => {
color: string;
fontSize: number;
};
};
readonly fontSize: "15px";

@@ -81,0 +106,0 @@ readonly boxShadow: "0 0 20px 0 rgba(136,136,136,0.50)";

@@ -0,1 +1,5 @@

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
import lighten from 'polished/lib/color/lighten';

@@ -6,2 +10,70 @@ import darken from 'polished/lib/color/darken';

const colorOffsetLight = 0.15;
const colors = {
black: '#000',
white: '#fff',
cfOrange: '#F6821F',
marketing: {
orange: '#F6821F',
lightOrange: '#FBAD41',
red: '#e04e64',
lightRed: '#e27179',
green: '#71c492',
lightGreen: '#9fd3b5',
cyan: '#2da7cb',
lightCyan: '#89c4e1',
purple: '#7d4788',
lightPurple: '#af7baf',
blue: '#00517f',
lightBlue: '#4f8cc8',
gray: ['#404242', '#707070', '#aaaaaa', '#dddddd', '#f5f5f5']
},
vendor: {
twitter: '#00aced',
facebook: '#3b5998'
},
red: ['#3c0501', '#5a0801', '#780a02', '#970d02', '#b20f03', '#e81403', '#fc574a', '#fe9f97', '#feccc8', '#ffefee'],
orange: ['#361a02', '#482303', '#592b04', '#763905', '#8d4406', '#c05d08', '#ee730a', '#f8a054', '#fbcda5', '#fef1e6'],
gold: ['#261c00', '#3e2d00', '#4c3700', '#644900', '#735400', '#a77a00', '#dda100', '#ffce4b', '#ffeab2', '#fff8e4'],
green: ['#0a2614', '#0e381d', '#104122', '#15562d', '#196535', '#228b49', '#2db35e', '#55d584', '#a8e9c0', '#e3f8eb'],
cyan: ['#061b20', '#0b333e', '#0d3e4b', '#115061', '#156074', '#1e89a5', '#30b6da', '#73cee6', '#ace2f0', '#e9f7fb'],
blue: ['#001c43', '#002b67', '#003681', '#0045a6', '#0051c3', '#086fff', '#4693ff', '#82b6ff', '#b9d6ff', '#ecf4ff'],
indigo: ['#170f58', '#221785', '#2c1ea9', '#3524cd', '#4b3bdc', '#7366e4', '#9d94ec', '#c2bdf3', '#dfdcf9', '#f1f0fc'],
violet: ['#350b42', '#490f5c', '#5f1477', '#741892', '#8d1eb1', '#b73cdf', '#cf7ee9', '#dfa8f1', '#ebcaf6', '#f7eafb'],
pink: ['#2d0210', '#4e031c', '#6a0426', '#8d0633', '#af0740', '#e80954', '#f85189', '#fb97b9', '#fdc9db', '#fef1f5'],
gray: ['#1d1d1d', '#313131', '#3d3d3d', '#4a4a4a', '#595959', '#797979', '#999999', '#b6b6b6', '#d9d9d9', '#f2f2f2'],
categorical: ['#4693FF', '#82B6FF', '#FBAD41', '#FCC373', '#55D584', '#7EDFA2', '#F85189', '#FB97B9', '#B73CDF', '#CF7EE9', '#FFE43E', '#FFEAB2', '#73CEE6', '#ACE2F0', '#E81403', '#FC574A']
};
const fontSizes = [10, 12, 14, 16, 20, 24, 32, 48, 64, 80];
const focusBoxShadow = ({
invalid,
space = 3,
outline = 2
} = {}) => {
const outlineColor = invalid ? colors.red[3] : colors.blue[4];
return `0 0 0 ${space}px ${colors.white}, 0 0 0 ${space + outline}px ${outlineColor}`;
};
const focusMixin = (_ref = {}) => {
let _ref$borderRadius = _ref.borderRadius,
borderRadius = _ref$borderRadius === void 0 ? 4 : _ref$borderRadius,
boxShadowProps = _objectWithoutProperties(_ref, ["borderRadius"]);
return {
'&:focus': {
outline: 'none'
},
'&:focus-within': {
outline: 'none',
boxShadow: focusBoxShadow(boxShadowProps),
borderRadius: `${borderRadius}px`
}
};
};
const errorMixin = () => ({
color: colors.red[4],
fontSize: fontSizes[2]
});
const theme = {

@@ -18,3 +90,3 @@ breakpoints: {

},
fontSizes: [10, 12, 14, 16, 20, 24, 32, 48, 64, 80],
fontSizes,
space: [0, 4, 8, 16, 32, 64, 128, 256],

@@ -43,38 +115,9 @@ radii: [0, 3, 5],

shadows: ['0 0 20px 0 rgba(136,136,136,0.50)'],
colors: {
black: '#000',
white: '#fff',
cfOrange: '#F6821F',
marketing: {
orange: '#F6821F',
lightOrange: '#FBAD41',
red: '#e04e64',
lightRed: '#e27179',
green: '#71c492',
lightGreen: '#9fd3b5',
cyan: '#2da7cb',
lightCyan: '#89c4e1',
purple: '#7d4788',
lightPurple: '#af7baf',
blue: '#00517f',
lightBlue: '#4f8cc8',
gray: ['#404242', '#707070', '#aaaaaa', '#dddddd', '#f5f5f5']
},
vendor: {
twitter: '#00aced',
facebook: '#3b5998'
},
red: ['#3c0501', '#5a0801', '#780a02', '#970d02', '#b20f03', '#e81403', '#fc574a', '#fe9f97', '#feccc8', '#ffefee'],
orange: ['#361a02', '#482303', '#592b04', '#763905', '#8d4406', '#c05d08', '#ee730a', '#f8a054', '#fbcda5', '#fef1e6'],
gold: ['#261c00', '#3e2d00', '#4c3700', '#644900', '#735400', '#a77a00', '#dda100', '#ffce4b', '#ffeab2', '#fff8e4'],
green: ['#0a2614', '#0e381d', '#104122', '#15562d', '#196535', '#228b49', '#2db35e', '#55d584', '#a8e9c0', '#e3f8eb'],
cyan: ['#061b20', '#0b333e', '#0d3e4b', '#115061', '#156074', '#1e89a5', '#30b6da', '#73cee6', '#ace2f0', '#e9f7fb'],
blue: ['#001c43', '#002b67', '#003681', '#0045a6', '#0051c3', '#086fff', '#4693ff', '#82b6ff', '#b9d6ff', '#ecf4ff'],
indigo: ['#170f58', '#221785', '#2c1ea9', '#3524cd', '#4b3bdc', '#7366e4', '#9d94ec', '#c2bdf3', '#dfdcf9', '#f1f0fc'],
violet: ['#350b42', '#490f5c', '#5f1477', '#741892', '#8d1eb1', '#b73cdf', '#cf7ee9', '#dfa8f1', '#ebcaf6', '#f7eafb'],
pink: ['#2d0210', '#4e031c', '#6a0426', '#8d0633', '#af0740', '#e80954', '#f85189', '#fb97b9', '#fdc9db', '#fef1f5'],
gray: ['#1d1d1d', '#313131', '#3d3d3d', '#4a4a4a', '#595959', '#797979', '#999999', '#b6b6b6', '#d9d9d9', '#f2f2f2'],
categorical: ['#4693FF', '#82B6FF', '#FBAD41', '#FCC373', '#55D584', '#7EDFA2', '#F85189', '#FB97B9', '#B73CDF', '#CF7EE9', '#FFE43E', '#FFEAB2', '#73CEE6', '#ACE2F0', '#E81403', '#FC574A']
colors,
color: {},
focusBoxShadow,
mixin: {
focus: focusMixin,
error: errorMixin
},
color: {},
fontSize: '15px',

@@ -95,3 +138,3 @@ boxShadow: '0 0 20px 0 rgba(136,136,136,0.50)',

fontWeightLight: 300,
borderRadius: '2px',
borderRadius: `2px`,
fontColor: darken(0.8, '#fff'),

@@ -98,0 +141,0 @@ colorOffsetDark,

@@ -14,5 +14,84 @@ "use strict";

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
var showWarnings = ['production', 'test'].indexOf(process.env.NODE_ENV) === -1;
var colorOffsetDark = 0.07;
var colorOffsetLight = 0.15;
var colors = {
black: '#000',
white: '#fff',
cfOrange: '#F6821F',
marketing: {
orange: '#F6821F',
lightOrange: '#FBAD41',
red: '#e04e64',
lightRed: '#e27179',
green: '#71c492',
lightGreen: '#9fd3b5',
cyan: '#2da7cb',
lightCyan: '#89c4e1',
purple: '#7d4788',
lightPurple: '#af7baf',
blue: '#00517f',
lightBlue: '#4f8cc8',
gray: ['#404242', '#707070', '#aaaaaa', '#dddddd', '#f5f5f5']
},
vendor: {
twitter: '#00aced',
facebook: '#3b5998'
},
red: ['#3c0501', '#5a0801', '#780a02', '#970d02', '#b20f03', '#e81403', '#fc574a', '#fe9f97', '#feccc8', '#ffefee'],
orange: ['#361a02', '#482303', '#592b04', '#763905', '#8d4406', '#c05d08', '#ee730a', '#f8a054', '#fbcda5', '#fef1e6'],
gold: ['#261c00', '#3e2d00', '#4c3700', '#644900', '#735400', '#a77a00', '#dda100', '#ffce4b', '#ffeab2', '#fff8e4'],
green: ['#0a2614', '#0e381d', '#104122', '#15562d', '#196535', '#228b49', '#2db35e', '#55d584', '#a8e9c0', '#e3f8eb'],
cyan: ['#061b20', '#0b333e', '#0d3e4b', '#115061', '#156074', '#1e89a5', '#30b6da', '#73cee6', '#ace2f0', '#e9f7fb'],
blue: ['#001c43', '#002b67', '#003681', '#0045a6', '#0051c3', '#086fff', '#4693ff', '#82b6ff', '#b9d6ff', '#ecf4ff'],
indigo: ['#170f58', '#221785', '#2c1ea9', '#3524cd', '#4b3bdc', '#7366e4', '#9d94ec', '#c2bdf3', '#dfdcf9', '#f1f0fc'],
violet: ['#350b42', '#490f5c', '#5f1477', '#741892', '#8d1eb1', '#b73cdf', '#cf7ee9', '#dfa8f1', '#ebcaf6', '#f7eafb'],
pink: ['#2d0210', '#4e031c', '#6a0426', '#8d0633', '#af0740', '#e80954', '#f85189', '#fb97b9', '#fdc9db', '#fef1f5'],
gray: ['#1d1d1d', '#313131', '#3d3d3d', '#4a4a4a', '#595959', '#797979', '#999999', '#b6b6b6', '#d9d9d9', '#f2f2f2'],
categorical: ['#4693FF', '#82B6FF', '#FBAD41', '#FCC373', '#55D584', '#7EDFA2', '#F85189', '#FB97B9', '#B73CDF', '#CF7EE9', '#FFE43E', '#FFEAB2', '#73CEE6', '#ACE2F0', '#E81403', '#FC574A']
};
var fontSizes = [10, 12, 14, 16, 20, 24, 32, 48, 64, 80];
var focusBoxShadow = function focusBoxShadow() {
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
invalid = _ref.invalid,
_ref$space = _ref.space,
space = _ref$space === void 0 ? 3 : _ref$space,
_ref$outline = _ref.outline,
outline = _ref$outline === void 0 ? 2 : _ref$outline;
var outlineColor = invalid ? colors.red[3] : colors.blue[4];
return "0 0 0 ".concat(space, "px ").concat(colors.white, ", 0 0 0 ").concat(space + outline, "px ").concat(outlineColor);
};
var focusMixin = function focusMixin() {
var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _ref2$borderRadius = _ref2.borderRadius,
borderRadius = _ref2$borderRadius === void 0 ? 4 : _ref2$borderRadius,
boxShadowProps = _objectWithoutProperties(_ref2, ["borderRadius"]);
return {
'&:focus': {
outline: 'none'
},
'&:focus-within': {
outline: 'none',
boxShadow: focusBoxShadow(boxShadowProps),
borderRadius: "".concat(borderRadius, "px")
}
};
};
var errorMixin = function errorMixin() {
return {
color: colors.red[4],
fontSize: fontSizes[2]
};
};
var theme = {

@@ -29,3 +108,3 @@ breakpoints: {

},
fontSizes: [10, 12, 14, 16, 20, 24, 32, 48, 64, 80],
fontSizes: fontSizes,
space: [0, 4, 8, 16, 32, 64, 128, 256],

@@ -54,38 +133,9 @@ radii: [0, 3, 5],

shadows: ['0 0 20px 0 rgba(136,136,136,0.50)'],
colors: {
black: '#000',
white: '#fff',
cfOrange: '#F6821F',
marketing: {
orange: '#F6821F',
lightOrange: '#FBAD41',
red: '#e04e64',
lightRed: '#e27179',
green: '#71c492',
lightGreen: '#9fd3b5',
cyan: '#2da7cb',
lightCyan: '#89c4e1',
purple: '#7d4788',
lightPurple: '#af7baf',
blue: '#00517f',
lightBlue: '#4f8cc8',
gray: ['#404242', '#707070', '#aaaaaa', '#dddddd', '#f5f5f5']
},
vendor: {
twitter: '#00aced',
facebook: '#3b5998'
},
red: ['#3c0501', '#5a0801', '#780a02', '#970d02', '#b20f03', '#e81403', '#fc574a', '#fe9f97', '#feccc8', '#ffefee'],
orange: ['#361a02', '#482303', '#592b04', '#763905', '#8d4406', '#c05d08', '#ee730a', '#f8a054', '#fbcda5', '#fef1e6'],
gold: ['#261c00', '#3e2d00', '#4c3700', '#644900', '#735400', '#a77a00', '#dda100', '#ffce4b', '#ffeab2', '#fff8e4'],
green: ['#0a2614', '#0e381d', '#104122', '#15562d', '#196535', '#228b49', '#2db35e', '#55d584', '#a8e9c0', '#e3f8eb'],
cyan: ['#061b20', '#0b333e', '#0d3e4b', '#115061', '#156074', '#1e89a5', '#30b6da', '#73cee6', '#ace2f0', '#e9f7fb'],
blue: ['#001c43', '#002b67', '#003681', '#0045a6', '#0051c3', '#086fff', '#4693ff', '#82b6ff', '#b9d6ff', '#ecf4ff'],
indigo: ['#170f58', '#221785', '#2c1ea9', '#3524cd', '#4b3bdc', '#7366e4', '#9d94ec', '#c2bdf3', '#dfdcf9', '#f1f0fc'],
violet: ['#350b42', '#490f5c', '#5f1477', '#741892', '#8d1eb1', '#b73cdf', '#cf7ee9', '#dfa8f1', '#ebcaf6', '#f7eafb'],
pink: ['#2d0210', '#4e031c', '#6a0426', '#8d0633', '#af0740', '#e80954', '#f85189', '#fb97b9', '#fdc9db', '#fef1f5'],
gray: ['#1d1d1d', '#313131', '#3d3d3d', '#4a4a4a', '#595959', '#797979', '#999999', '#b6b6b6', '#d9d9d9', '#f2f2f2'],
categorical: ['#4693FF', '#82B6FF', '#FBAD41', '#FCC373', '#55D584', '#7EDFA2', '#F85189', '#FB97B9', '#B73CDF', '#CF7EE9', '#FFE43E', '#FFEAB2', '#73CEE6', '#ACE2F0', '#E81403', '#FC574A']
colors: colors,
color: {},
focusBoxShadow: focusBoxShadow,
mixin: {
focus: focusMixin,
error: errorMixin
},
color: {},
fontSize: '15px',

@@ -106,3 +156,3 @@ boxShadow: '0 0 20px 0 rgba(136,136,136,0.50)',

fontWeightLight: 300,
borderRadius: '2px',
borderRadius: "2px",
fontColor: (0, _darken.default)(0.8, '#fff'),

@@ -109,0 +159,0 @@ colorOffsetDark: colorOffsetDark,

{
"name": "@cloudflare/style-const",
"description": "Cloudflare Style Constants",
"version": "2.5.3",
"version": "3.0.0",
"main": "lib/index.js",

@@ -28,3 +28,3 @@ "module": "es/index.js",

},
"gitHead": "ca8aa7d0196cf8242f40b9e5bc364ae758e48708"
"gitHead": "4dcedec5e7e98609f80c206738ddfbebda4128f6"
}

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

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

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc