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

@clds/themes

Package Overview
Dependencies
Maintainers
1
Versions
119
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@clds/themes - npm Package Compare versions

Comparing version 0.39.2 to 0.40.0

112

dist/cjs/dark.theme.d.ts

@@ -1,3 +0,42 @@

declare const _default: {
export declare const darkTheme: {
radius: {
sm: string;
md: string;
lg: string;
xl: string;
round: string;
unstable_new: {
sm: string;
md: string;
lg: string;
xl: string;
};
};
font: {
size: {
xxl: string;
xl: string;
lg: string;
md: string;
sm: string;
xs: string;
xxs: string;
};
color: {
base: string;
primary: string;
secondary: string;
};
};
spacing: {
xxs: string;
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
xxl: string;
};
palette: {
mode: string;
primary: string;

@@ -42,4 +81,73 @@ contrastHigh: string;

};
overlayLight: string;
overlayLight2: string;
overlayLight3: string;
overlayDark: string;
overlayDark2: string;
overlayDark3: string;
brand: {
cloudinaryBlue: string;
cloudinaryBlueLight: string;
cloudinaryBlueDark: string;
offsetGray: string;
darkBlue: string;
accentCoral: string;
accentPeach: string;
accentYellow: string;
accentTurquoise: string;
accentLightBlue: string;
};
};
shadow: {
sm: string;
md: string;
lg: string;
};
globals: {
font: {
size: string;
family: string;
url: string;
};
focus: {
color: string;
};
background: {
color: string;
};
};
color: {
darkBlue: string;
blue: string;
lightBlue: string;
lighterBlue: string;
orange: string;
lightOrange: string;
lightGreen: string;
green: string;
darkGreen: string;
lightRed: string;
red: string;
darkRed: string;
purple: string;
teal: string;
lime: string;
pink: string;
yellow: string;
brown: string;
gray: string;
cyan: string;
olive: string;
white: string;
gray00: string;
gray20: string;
gray40: string;
gray50: string;
gray60: string;
gray70: string;
gray80: string;
gray90: string;
gray100: string;
black: string;
};
};
export default _default;

61

dist/cjs/dark.theme.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
/* eslint-disable import/no-anonymous-default-export,import/no-default-export */
exports.default = {
palette: {
primary: '#0D9AFF',
contrastHigh: '#f9fafb',
contrastLow: '#d1d6e0',
contrastInvert: '#000000',
surface: '#1f242e',
surfaceAlt: '#14181e',
background: '#090c0f',
backgroundAlt: '#000000',
secondary: '#3d475c',
secondaryAlt: '#535f7a',
error: '#ff5959',
errorAlt: '#ff5959',
warning: '#ffa359',
warningAlt: '#ffa359',
success: '#9affa6',
successAlt: '#59ff67',
code: {
accent1: '#ff9ae1',
accent2: '#9affa6',
accent3: '#8ee8ff',
accent4: '#c6d1db',
accent5: '#c792ea',
accent6: '#ffa359',
accent7: '#9affe1',
accent8: '#f2ff00',
accent9: '#ff5959',
},
dataVis: {
accent1: '#5188ff',
accent2: '#7dedff',
accent3: '#ff5469',
accent4: '#a76fff',
accent5: '#ff5bd4',
accent6: '#ed2d22',
accent7: '#ffac4a',
accent8: '#8aff6d',
accent9: '#77869b',
accent10: '#e0edff',
},
},
exports.darkTheme = void 0;
const tslib_1 = require("tslib");
const color_1 = tslib_1.__importDefault(require("./tokens/color"));
const font_1 = tslib_1.__importDefault(require("./tokens/font"));
const globals_1 = require("./tokens/globals");
const palette_1 = require("./tokens/palette");
const radius_1 = tslib_1.__importDefault(require("./tokens/radius"));
const shadow_1 = tslib_1.__importDefault(require("./tokens/shadow"));
const spacing_1 = tslib_1.__importDefault(require("./tokens/spacing"));
exports.darkTheme = {
radius: radius_1.default,
font: font_1.default,
spacing: spacing_1.default,
palette: palette_1.dark,
shadow: shadow_1.default,
globals: globals_1.globals,
// ! need to deprecate
color: color_1.default,
};
//# sourceMappingURL=dark.theme.js.map

3

dist/cjs/default.theme.d.ts

@@ -1,2 +0,2 @@

export declare const theme: {
export declare const lightTheme: {
radius: {

@@ -41,2 +41,3 @@ sm: string;

palette: {
mode: string;
primary: string;

@@ -43,0 +44,0 @@ contrastHigh: string;

8

dist/cjs/default.theme.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.theme = void 0;
exports.lightTheme = void 0;
const tslib_1 = require("tslib");

@@ -8,11 +8,11 @@ const color_1 = tslib_1.__importDefault(require("./tokens/color"));

const globals_1 = require("./tokens/globals");
const palette_1 = tslib_1.__importDefault(require("./tokens/palette"));
const palette_1 = require("./tokens/palette");
const radius_1 = tslib_1.__importDefault(require("./tokens/radius"));
const shadow_1 = tslib_1.__importDefault(require("./tokens/shadow"));
const spacing_1 = tslib_1.__importDefault(require("./tokens/spacing"));
exports.theme = {
exports.lightTheme = {
radius: radius_1.default,
font: font_1.default,
spacing: spacing_1.default,
palette: palette_1.default,
palette: palette_1.light,
shadow: shadow_1.default,

@@ -19,0 +19,0 @@ globals: globals_1.globals,

4

dist/cjs/index.d.ts

@@ -1,2 +0,2 @@

export { default as dark } from './dark.theme';
export { theme as default } from './default.theme';
export { darkTheme, darkTheme as dark } from './dark.theme';
export { lightTheme, lightTheme as default } from './default.theme';

11

dist/cjs/index.js
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = exports.dark = void 0;
exports.default = exports.lightTheme = exports.dark = exports.darkTheme = void 0;
/* eslint-disable import/no-default-export */
var dark_theme_1 = require("./dark.theme");
Object.defineProperty(exports, "dark", { enumerable: true, get: function () { return __importDefault(dark_theme_1).default; } });
Object.defineProperty(exports, "darkTheme", { enumerable: true, get: function () { return dark_theme_1.darkTheme; } });
Object.defineProperty(exports, "dark", { enumerable: true, get: function () { return dark_theme_1.darkTheme; } });
var default_theme_1 = require("./default.theme");
Object.defineProperty(exports, "default", { enumerable: true, get: function () { return default_theme_1.theme; } });
Object.defineProperty(exports, "lightTheme", { enumerable: true, get: function () { return default_theme_1.lightTheme; } });
Object.defineProperty(exports, "default", { enumerable: true, get: function () { return default_theme_1.lightTheme; } });
//# sourceMappingURL=index.js.map

64

dist/cjs/tokens/palette.d.ts

@@ -1,2 +0,3 @@

declare const _default: {
export declare const light: {
mode: string;
primary: string;

@@ -60,2 +61,61 @@ contrastHigh: string;

};
export default _default;
export declare const dark: {
mode: string;
primary: string;
contrastHigh: string;
contrastLow: string;
contrastInvert: string;
surface: string;
surfaceAlt: string;
background: string;
backgroundAlt: string;
secondary: string;
secondaryAlt: string;
error: string;
errorAlt: string;
warning: string;
warningAlt: string;
success: string;
successAlt: string;
code: {
accent1: string;
accent2: string;
accent3: string;
accent4: string;
accent5: string;
accent6: string;
accent7: string;
accent8: string;
accent9: string;
};
dataVis: {
accent1: string;
accent2: string;
accent3: string;
accent4: string;
accent5: string;
accent6: string;
accent7: string;
accent8: string;
accent9: string;
accent10: string;
};
overlayLight: string;
overlayLight2: string;
overlayLight3: string;
overlayDark: string;
overlayDark2: string;
overlayDark3: string;
brand: {
cloudinaryBlue: string;
cloudinaryBlueLight: string;
cloudinaryBlueDark: string;
offsetGray: string;
darkBlue: string;
accentCoral: string;
accentPeach: string;
accentYellow: string;
accentTurquoise: string;
accentLightBlue: string;
};
};

27

dist/cjs/tokens/palette.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
/* eslint-disable import/no-anonymous-default-export,import/no-default-export */
exports.default = {
exports.dark = exports.light = void 0;
exports.light = {
mode: 'light',
primary: '#3448c5',

@@ -63,2 +64,24 @@ contrastHigh: '#0a0c0f',

};
exports.dark = Object.assign(Object.assign({}, exports.light), { mode: 'dark', primary: '#0D9AFF', contrastHigh: '#f9fafb', contrastLow: '#d1d6e0', contrastInvert: '#000000', surface: '#1f242e', surfaceAlt: '#14181e', background: '#090c0f', backgroundAlt: '#000000', secondary: '#3d475c', secondaryAlt: '#535f7a', error: '#ff5959', errorAlt: '#ff5959', warning: '#ffa359', warningAlt: '#ffa359', success: '#9affa6', successAlt: '#59ff67', code: {
accent1: '#ff9ae1',
accent2: '#9affa6',
accent3: '#8ee8ff',
accent4: '#c6d1db',
accent5: '#c792ea',
accent6: '#ffa359',
accent7: '#9affe1',
accent8: '#f2ff00',
accent9: '#ff5959',
}, dataVis: {
accent1: '#5188ff',
accent2: '#7dedff',
accent3: '#ff5469',
accent4: '#a76fff',
accent5: '#ff5bd4',
accent6: '#ed2d22',
accent7: '#ffac4a',
accent8: '#8aff6d',
accent9: '#77869b',
accent10: '#e0edff',
} });
//# sourceMappingURL=palette.js.map

112

dist/esm/dark.theme.d.ts

@@ -1,3 +0,42 @@

declare const _default: {
export declare const darkTheme: {
radius: {
sm: string;
md: string;
lg: string;
xl: string;
round: string;
unstable_new: {
sm: string;
md: string;
lg: string;
xl: string;
};
};
font: {
size: {
xxl: string;
xl: string;
lg: string;
md: string;
sm: string;
xs: string;
xxs: string;
};
color: {
base: string;
primary: string;
secondary: string;
};
};
spacing: {
xxs: string;
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
xxl: string;
};
palette: {
mode: string;
primary: string;

@@ -42,4 +81,73 @@ contrastHigh: string;

};
overlayLight: string;
overlayLight2: string;
overlayLight3: string;
overlayDark: string;
overlayDark2: string;
overlayDark3: string;
brand: {
cloudinaryBlue: string;
cloudinaryBlueLight: string;
cloudinaryBlueDark: string;
offsetGray: string;
darkBlue: string;
accentCoral: string;
accentPeach: string;
accentYellow: string;
accentTurquoise: string;
accentLightBlue: string;
};
};
shadow: {
sm: string;
md: string;
lg: string;
};
globals: {
font: {
size: string;
family: string;
url: string;
};
focus: {
color: string;
};
background: {
color: string;
};
};
color: {
darkBlue: string;
blue: string;
lightBlue: string;
lighterBlue: string;
orange: string;
lightOrange: string;
lightGreen: string;
green: string;
darkGreen: string;
lightRed: string;
red: string;
darkRed: string;
purple: string;
teal: string;
lime: string;
pink: string;
yellow: string;
brown: string;
gray: string;
cyan: string;
olive: string;
white: string;
gray00: string;
gray20: string;
gray40: string;
gray50: string;
gray60: string;
gray70: string;
gray80: string;
gray90: string;
gray100: string;
black: string;
};
};
export default _default;

59

dist/esm/dark.theme.js

@@ -1,45 +0,18 @@

/* eslint-disable import/no-anonymous-default-export,import/no-default-export */
export default {
palette: {
primary: '#0D9AFF',
contrastHigh: '#f9fafb',
contrastLow: '#d1d6e0',
contrastInvert: '#000000',
surface: '#1f242e',
surfaceAlt: '#14181e',
background: '#090c0f',
backgroundAlt: '#000000',
secondary: '#3d475c',
secondaryAlt: '#535f7a',
error: '#ff5959',
errorAlt: '#ff5959',
warning: '#ffa359',
warningAlt: '#ffa359',
success: '#9affa6',
successAlt: '#59ff67',
code: {
accent1: '#ff9ae1',
accent2: '#9affa6',
accent3: '#8ee8ff',
accent4: '#c6d1db',
accent5: '#c792ea',
accent6: '#ffa359',
accent7: '#9affe1',
accent8: '#f2ff00',
accent9: '#ff5959',
},
dataVis: {
accent1: '#5188ff',
accent2: '#7dedff',
accent3: '#ff5469',
accent4: '#a76fff',
accent5: '#ff5bd4',
accent6: '#ed2d22',
accent7: '#ffac4a',
accent8: '#8aff6d',
accent9: '#77869b',
accent10: '#e0edff',
},
},
import color from './tokens/color';
import font from './tokens/font';
import { globals } from './tokens/globals';
import { dark } from './tokens/palette';
import radius from './tokens/radius';
import shadow from './tokens/shadow';
import spacing from './tokens/spacing';
export const darkTheme = {
radius,
font,
spacing,
palette: dark,
shadow,
globals,
// ! need to deprecate
color,
};
//# sourceMappingURL=dark.theme.js.map

3

dist/esm/default.theme.d.ts

@@ -1,2 +0,2 @@

export declare const theme: {
export declare const lightTheme: {
radius: {

@@ -41,2 +41,3 @@ sm: string;

palette: {
mode: string;
primary: string;

@@ -43,0 +44,0 @@ contrastHigh: string;

6

dist/esm/default.theme.js
import color from './tokens/color';
import font from './tokens/font';
import { globals } from './tokens/globals';
import palette from './tokens/palette';
import { light } from './tokens/palette';
import radius from './tokens/radius';
import shadow from './tokens/shadow';
import spacing from './tokens/spacing';
export const theme = {
export const lightTheme = {
radius,
font,
spacing,
palette,
palette: light,
shadow,

@@ -14,0 +14,0 @@ globals,

4

dist/esm/index.d.ts

@@ -1,2 +0,2 @@

export { default as dark } from './dark.theme';
export { theme as default } from './default.theme';
export { darkTheme, darkTheme as dark } from './dark.theme';
export { lightTheme, lightTheme as default } from './default.theme';

4

dist/esm/index.js
/* eslint-disable import/no-default-export */
export { default as dark } from './dark.theme';
export { theme as default } from './default.theme';
export { darkTheme, darkTheme as dark } from './dark.theme';
export { lightTheme, lightTheme as default } from './default.theme';
//# sourceMappingURL=index.js.map

64

dist/esm/tokens/palette.d.ts

@@ -1,2 +0,3 @@

declare const _default: {
export declare const light: {
mode: string;
primary: string;

@@ -60,2 +61,61 @@ contrastHigh: string;

};
export default _default;
export declare const dark: {
mode: string;
primary: string;
contrastHigh: string;
contrastLow: string;
contrastInvert: string;
surface: string;
surfaceAlt: string;
background: string;
backgroundAlt: string;
secondary: string;
secondaryAlt: string;
error: string;
errorAlt: string;
warning: string;
warningAlt: string;
success: string;
successAlt: string;
code: {
accent1: string;
accent2: string;
accent3: string;
accent4: string;
accent5: string;
accent6: string;
accent7: string;
accent8: string;
accent9: string;
};
dataVis: {
accent1: string;
accent2: string;
accent3: string;
accent4: string;
accent5: string;
accent6: string;
accent7: string;
accent8: string;
accent9: string;
accent10: string;
};
overlayLight: string;
overlayLight2: string;
overlayLight3: string;
overlayDark: string;
overlayDark2: string;
overlayDark3: string;
brand: {
cloudinaryBlue: string;
cloudinaryBlueLight: string;
cloudinaryBlueDark: string;
offsetGray: string;
darkBlue: string;
accentCoral: string;
accentPeach: string;
accentYellow: string;
accentTurquoise: string;
accentLightBlue: string;
};
};

26

dist/esm/tokens/palette.js

@@ -1,3 +0,3 @@

/* eslint-disable import/no-anonymous-default-export,import/no-default-export */
export default {
export const light = {
mode: 'light',
primary: '#3448c5',

@@ -61,2 +61,24 @@ contrastHigh: '#0a0c0f',

};
export const dark = Object.assign(Object.assign({}, light), { mode: 'dark', primary: '#0D9AFF', contrastHigh: '#f9fafb', contrastLow: '#d1d6e0', contrastInvert: '#000000', surface: '#1f242e', surfaceAlt: '#14181e', background: '#090c0f', backgroundAlt: '#000000', secondary: '#3d475c', secondaryAlt: '#535f7a', error: '#ff5959', errorAlt: '#ff5959', warning: '#ffa359', warningAlt: '#ffa359', success: '#9affa6', successAlt: '#59ff67', code: {
accent1: '#ff9ae1',
accent2: '#9affa6',
accent3: '#8ee8ff',
accent4: '#c6d1db',
accent5: '#c792ea',
accent6: '#ffa359',
accent7: '#9affe1',
accent8: '#f2ff00',
accent9: '#ff5959',
}, dataVis: {
accent1: '#5188ff',
accent2: '#7dedff',
accent3: '#ff5469',
accent4: '#a76fff',
accent5: '#ff5bd4',
accent6: '#ed2d22',
accent7: '#ffac4a',
accent8: '#8aff6d',
accent9: '#77869b',
accent10: '#e0edff',
} });
//# sourceMappingURL=palette.js.map

2

package.json
{
"name": "@clds/themes",
"description": "Cloudinary themes",
"version": "0.39.2",
"version": "0.40.0",
"author": "Cloudinary",

@@ -6,0 +6,0 @@ "main": "./dist/cjs/index.js",

60

src/dark.theme.ts

@@ -1,44 +0,18 @@

/* eslint-disable import/no-anonymous-default-export,import/no-default-export */
export default {
palette: {
primary: '#0D9AFF',
contrastHigh: '#f9fafb',
contrastLow: '#d1d6e0',
contrastInvert: '#000000',
surface: '#1f242e',
surfaceAlt: '#14181e',
background: '#090c0f',
backgroundAlt: '#000000',
secondary: '#3d475c',
secondaryAlt: '#535f7a',
error: '#ff5959',
errorAlt: '#ff5959',
warning: '#ffa359',
warningAlt: '#ffa359',
success: '#9affa6',
successAlt: '#59ff67',
code: {
accent1: '#ff9ae1',
accent2: '#9affa6',
accent3: '#8ee8ff',
accent4: '#c6d1db',
accent5: '#c792ea',
accent6: '#ffa359',
accent7: '#9affe1',
accent8: '#f2ff00',
accent9: '#ff5959',
},
dataVis: {
accent1: '#5188ff',
accent2: '#7dedff',
accent3: '#ff5469',
accent4: '#a76fff',
accent5: '#ff5bd4',
accent6: '#ed2d22',
accent7: '#ffac4a',
accent8: '#8aff6d',
accent9: '#77869b',
accent10: '#e0edff',
},
},
import color from './tokens/color';
import font from './tokens/font';
import { globals } from './tokens/globals';
import { dark } from './tokens/palette';
import radius from './tokens/radius';
import shadow from './tokens/shadow';
import spacing from './tokens/spacing';
export const darkTheme = {
radius,
font,
spacing,
palette: dark,
shadow,
globals,
// ! need to deprecate
color,
};

6

src/default.theme.ts
import color from './tokens/color';
import font from './tokens/font';
import { globals } from './tokens/globals';
import palette from './tokens/palette';
import { light } from './tokens/palette';
import radius from './tokens/radius';

@@ -9,7 +9,7 @@ import shadow from './tokens/shadow';

export const theme = {
export const lightTheme = {
radius,
font,
spacing,
palette,
palette: light,
shadow,

@@ -16,0 +16,0 @@ globals,

4

src/index.ts
/* eslint-disable import/no-default-export */
export { default as dark } from './dark.theme';
export { theme as default } from './default.theme';
export { darkTheme, darkTheme as dark } from './dark.theme';
export { lightTheme, lightTheme as default } from './default.theme';

48

src/tokens/palette.ts

@@ -1,3 +0,3 @@

/* eslint-disable import/no-anonymous-default-export,import/no-default-export */
export default {
export const light = {
mode: 'light',
primary: '#3448c5',

@@ -61,1 +61,45 @@ contrastHigh: '#0a0c0f',

};
export const dark = {
...light,
mode: 'dark',
primary: '#0D9AFF',
contrastHigh: '#f9fafb',
contrastLow: '#d1d6e0',
contrastInvert: '#000000',
surface: '#1f242e',
surfaceAlt: '#14181e',
background: '#090c0f',
backgroundAlt: '#000000',
secondary: '#3d475c',
secondaryAlt: '#535f7a',
error: '#ff5959',
errorAlt: '#ff5959',
warning: '#ffa359',
warningAlt: '#ffa359',
success: '#9affa6',
successAlt: '#59ff67',
code: {
accent1: '#ff9ae1',
accent2: '#9affa6',
accent3: '#8ee8ff',
accent4: '#c6d1db',
accent5: '#c792ea',
accent6: '#ffa359',
accent7: '#9affe1',
accent8: '#f2ff00',
accent9: '#ff5959',
},
dataVis: {
accent1: '#5188ff',
accent2: '#7dedff',
accent3: '#ff5469',
accent4: '#a76fff',
accent5: '#ff5bd4',
accent6: '#ed2d22',
accent7: '#ffac4a',
accent8: '#8aff6d',
accent9: '#77869b',
accent10: '#e0edff',
},
};
dist/cjs/dark.theme.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/default.theme.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/index.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/tokens/palette.js.map

Sorry, the diff of this file is not supported yet

dist/esm/dark.theme.js.map

Sorry, the diff of this file is not supported yet

dist/esm/default.theme.js.map

Sorry, the diff of this file is not supported yet

dist/esm/index.js.map

Sorry, the diff of this file is not supported yet

dist/esm/tokens/palette.js.map

Sorry, the diff of this file is not supported yet

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