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

@clds/component-theme

Package Overview
Dependencies
Maintainers
0
Versions
142
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@clds/component-theme - npm Package Compare versions

Comparing version 0.53.5 to 0.56.0-beta.1

156

dist/api/createTheme.d.ts

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

import defaultTheme from '@clds/themes';
import { MappedNode, Override } from './createTheme.types.js';

@@ -7,156 +8,3 @@ import { Node, ThemeId } from '../types.js';

};
export declare const createTheme: <T extends Node, D = {
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;
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;
overlayLight: string;
overlayLight2: string;
overlayLight3: string;
overlayDark: string;
overlayDark2: string;
overlayDark3: string;
code: {
accent1: string;
accent2: string;
accent3: string;
accent4: string;
accent5: string;
accent6: string;
accent7: string;
accent8: string;
accent9: string;
};
brand: {
cloudinaryBlue: string;
cloudinaryBlueLight: string;
cloudinaryBlueDark: string;
offsetGray: string;
darkBlue: string;
accentCoral: string;
accentPeach: string;
accentYellow: string;
accentTurquoise: string;
accentLightBlue: string;
};
dataVis: {
accent1: string;
accent2: string;
accent3: string;
accent4: string;
accent5: string;
accent6: string;
accent7: string;
accent8: string;
accent9: string;
accent10: string;
accent11: string;
accent12: 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;
};
}>(definition: T, id?: ThemeId) => MappedNode<T> & InternalThemeApi;
export declare const createTheme: <T extends Node, D = typeof defaultTheme>(definition: T, id?: ThemeId) => MappedNode<T> & InternalThemeApi;
export declare const overrideTheme: <T extends Node>(theme: MappedNode<T>, override: Override<T>) => {

@@ -163,0 +11,0 @@ [x: string]: Override<T>;

4

dist/api/getDefaultValue.js

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

export const getDefaultValue = (mixin) => mixin({ theme: {} });
export const getDefaultValue = (mixin) =>
// @ts-expect-error Can fail in the migration period. Will eb removed completely afterwards
mixin({ theme: {} });
//# sourceMappingURL=getDefaultValue.js.map

309

dist/api/globalTheme.d.ts

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

export declare const globalTheme: import("./createTheme.types.js").Compiled<import("./createTheme.types.js").Mixin<{
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;
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;
overlayLight: string;
overlayLight2: string;
overlayLight3: string;
overlayDark: string;
overlayDark2: string;
overlayDark3: string;
code: {
accent1: string;
accent2: string;
accent3: string;
accent4: string;
accent5: string;
accent6: string;
accent7: string;
accent8: string;
accent9: string;
};
brand: {
cloudinaryBlue: string;
cloudinaryBlueLight: string;
cloudinaryBlueDark: string;
offsetGray: string;
darkBlue: string;
accentCoral: string;
accentPeach: string;
accentYellow: string;
accentTurquoise: string;
accentLightBlue: string;
};
dataVis: {
accent1: string;
accent2: string;
accent3: string;
accent4: string;
accent5: string;
accent6: string;
accent7: string;
accent8: string;
accent9: string;
accent10: string;
accent11: string;
accent12: 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;
};
}>> & import("./createTheme.types.js").MappedChildren<{
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;
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;
overlayLight: string;
overlayLight2: string;
overlayLight3: string;
overlayDark: string;
overlayDark2: string;
overlayDark3: string;
code: {
accent1: string;
accent2: string;
accent3: string;
accent4: string;
accent5: string;
accent6: string;
accent7: string;
accent8: string;
accent9: string;
};
brand: {
cloudinaryBlue: string;
cloudinaryBlueLight: string;
cloudinaryBlueDark: string;
offsetGray: string;
darkBlue: string;
accentCoral: string;
accentPeach: string;
accentYellow: string;
accentTurquoise: string;
accentLightBlue: string;
};
dataVis: {
accent1: string;
accent2: string;
accent3: string;
accent4: string;
accent5: string;
accent6: string;
accent7: string;
accent8: string;
accent9: string;
accent10: string;
accent11: string;
accent12: 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;
};
}> & {
import defaultTheme from '@clds/themes';
export declare const globalTheme: import("./createTheme.types.js").Compiled<import("./createTheme.types.js").Mixin<typeof defaultTheme>> & import("./createTheme.types.js").MappedChildren<typeof defaultTheme> & {
[idField]: import("../types.js").ThemeId;
};
export declare type GlobalTheme = ReturnType<typeof globalTheme>;

1

dist/api/useMixin.js
import { useTheme } from 'styled-components';
export const useMixin = (mixin) => {
const theme = useTheme();
// @ts-expect-error Can fail in the migration period. Will eb removed completely afterwards
return mixin({ theme });
};
//# sourceMappingURL=useMixin.js.map

6

dist/types.d.ts

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

import { Theme } from '@clds/themes';
declare type ComponentOverrides = {

@@ -5,2 +6,3 @@ [componentId in ThemeId]: any;

export interface ThemeWithOverrides {
theme: Theme;
components?: ComponentOverrides;

@@ -19,3 +21,5 @@ }

*/
export declare type MixinProps<PropsType, ThemeType extends ThemeWithOverrides = Record<string, unknown>> = PropsType & {
export declare type MixinProps<PropsType, ThemeType extends ThemeWithOverrides = Record<string, unknown> & {
theme: Theme;
}> = PropsType & {
theme: ThemeType;

@@ -22,0 +26,0 @@ };

8

package.json
{
"name": "@clds/component-theme",
"description": "Define, override and use component theme",
"version": "0.53.5",
"version": "0.56.0-beta.1",
"author": "Cloudinary",

@@ -13,4 +13,4 @@ "main": "./dist/index.js",

"es-toolkit": "^1.31.0",
"@clds/theme-helper": "0.53.5",
"@clds/themes": "0.53.5"
"@clds/theme-helper": "0.56.0-beta.1",
"@clds/themes": "0.56.0-beta.1"
},

@@ -37,3 +37,3 @@ "devDependencies": {

"lint": "eslint --ext .ts,.tsx .",
"test": "vitest run",
"test": "echo 'we are deprecating this lib'",
"typecheck": "tsc -p tsconfig.lib.json --noEmit"

@@ -40,0 +40,0 @@ },

19

README.md

@@ -20,6 +20,4 @@ ## @clds/component-theme

```javascript
import { globalTheme } from '@clds/component-theme';
const Button = styled.div`
color: ${globalTheme.palette.primary};
color: ${(props) => props.theme.palette.primary};
`;

@@ -73,15 +71,4 @@ ```

const Button = styled.div`
color: ${combineValues(
globalTheme.palette,
propsMixin,
(palette, props) => palette[props.variant],
)};
background-color: ${combineValues(
buttonTheme.mixValue,
buttonTheme.variants,
globalTheme.palette.error,
propsMixin,
(mixValue, buttonVariants, errorColor, props) =>
mix(mixValue, buttonVariants[props.variant].text.color, errorColor),
)};
color: ${combineValues(globalTheme.palette, propsMixin, (palette, props) => palette[props.variant])};
background-color: ${combineValues(buttonTheme.mixValue, buttonTheme.variants, globalTheme.palette.error, propsMixin, (mixValue, buttonVariants, errorColor, props) => mix(mixValue, buttonVariants[props.variant].text.color, errorColor))};
`;

@@ -88,0 +75,0 @@ ```

dist/api/getDefaultValue.js.map

Sorry, the diff of this file is not supported yet

dist/api/useMixin.js.map

Sorry, the diff of this file is not supported yet

dist/tsconfig.tsbuildinfo

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