Socket
Socket
Sign inDemoInstall

@kaze-style/themes

Package Overview
Dependencies
Maintainers
1
Versions
42
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@kaze-style/themes - npm Package Compare versions

Comparing version 0.15.0 to 0.16.0

dist/cjs/globalTheme/reset.js

2

dist/cjs/globalTheme.js

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

"use strict";var m=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var c=(o,e)=>{for(var t in e)m(o,t,{get:e[t],enumerable:!0})},f=(o,e,t,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of a(e))!b.call(o,r)&&r!==t&&m(o,r,{get:()=>e[r],enumerable:!(s=p(e,r))||s.enumerable});return o};var g=o=>f(m({},"__esModule",{value:!0}),o);var i={};c(i,{globalTheme:()=>h});module.exports=g(i);var l=require("./global/reset");const h={reset:()=>l.reset};0&&(module.exports={globalTheme});
"use strict";var m=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var c=(o,e)=>{for(var t in e)m(o,t,{get:e[t],enumerable:!0})},f=(o,e,t,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of a(e))!b.call(o,r)&&r!==t&&m(o,r,{get:()=>e[r],enumerable:!(s=p(e,r))||s.enumerable});return o};var g=o=>f(m({},"__esModule",{value:!0}),o);var i={};c(i,{globalTheme:()=>h});module.exports=g(i);var l=require("./globalTheme/reset");const h={reset:()=>l.reset};0&&(module.exports={globalTheme});

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

"use strict";var m=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var s=Object.getOwnPropertyNames;var a=Object.prototype.hasOwnProperty;var b=(o,e)=>{for(var t in e)m(o,t,{get:e[t],enumerable:!0})},g=(o,e,t,f)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of s(e))!a.call(o,r)&&r!==t&&m(o,r,{get:()=>e[r],enumerable:!(f=n(e,r))||f.enumerable});return o};var h=o=>g(m({},"__esModule",{value:!0}),o);var y={};b(y,{globalTheme:()=>k.globalTheme,resetStyle:()=>p.resetStyle,token:()=>x.token,tokens:()=>l.tokens});module.exports=h(y);var p=require("./global/reset"),x=require("./token"),l=require("./tokens"),k=require("./globalTheme");0&&(module.exports={globalTheme,resetStyle,token,tokens});
"use strict";var f=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var n=Object.prototype.hasOwnProperty;var s=(o,e)=>{for(var m in e)f(o,m,{get:e[m],enumerable:!0})},a=(o,e,m,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of k(e))!n.call(o,r)&&r!==m&&f(o,r,{get:()=>e[r],enumerable:!(l=h(e,r))||l.enumerable});return o};var b=o=>a(f({},"__esModule",{value:!0}),o);var g={};s(g,{globalTheme:()=>x.globalTheme,resetStyle:()=>p.resetStyle,theme:()=>t.theme,token:()=>t.token,tokens:()=>t.tokens});module.exports=b(g);var p=require("./globalTheme/reset"),t=require("./theme"),x=require("./globalTheme");0&&(module.exports={globalTheme,resetStyle,theme,token,tokens});

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

import{reset as e}from"./global/reset.js";var r={reset:()=>e};export{r as globalTheme};
import{reset as e}from"./globalTheme/reset.js";var r={reset:()=>e};export{r as globalTheme};

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

import{resetStyle as r}from"./global/reset.js";import{token as m}from"./token.js";import{tokens as p}from"./tokens.js";import{globalTheme as l}from"./globalTheme.js";export{l as globalTheme,r as resetStyle,m as token,p as tokens};
import{resetStyle as t}from"./globalTheme/reset.js";import{theme as m,token as f,tokens as l}from"./theme.js";import{globalTheme as x}from"./globalTheme.js";export{x as globalTheme,t as resetStyle,m as theme,f as token,l as tokens};

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

export { resetStyle } from './global/reset';
export { token } from './token';
export { tokens } from './tokens';
export { resetStyle } from './globalTheme/reset';
export { theme, token, tokens } from './theme';
export { globalTheme } from './globalTheme';
{
"name": "@kaze-style/themes",
"version": "0.15.0",
"version": "0.16.0",
"license": "MIT",

@@ -35,7 +35,7 @@ "author": "Taishi Naritomi",

"devDependencies": {
"@kaze-style/core": "^0.15.0"
"@kaze-style/core": "^0.16.0"
},
"peerDependencies": {
"@kaze-style/core": "^0.15.0"
"@kaze-style/core": "^0.16.0"
}
}

@@ -14,7 +14,7 @@ <div>

<br />
<p align="center">Kaze [風] zero-runtime CSS in JS for React<p>
<p align="center">Kaze [風] zero-runtime CSS in JS<p>
<p align="center"><b>🚧 under development 🚧</b></p>
<div align="center">
<a href='https://www.npmjs.com/package/@kaze-style/react'>
<img src='https://img.shields.io/npm/v/@kaze-style/react?style=for-the-badge'>
<a href='https://www.npmjs.com/package/@kaze-style/core'>
<img src='https://img.shields.io/npm/v/@kaze-style/core?style=for-the-badge'>
</a>

@@ -24,7 +24,7 @@ <a href='https://github.com/taishinaritomi/kaze-style/blob/main/LICENSE'>

</a>
<a href='https://bundlephobia.com/package/@kaze-style/react'>
<img src='https://img.shields.io/bundlephobia/minzip/@kaze-style/react?style=for-the-badge'>
<a href='https://bundlephobia.com/package/@kaze-style/core'>
<img src='https://img.shields.io/bundlephobia/minzip/@kaze-style/core?style=for-the-badge'>
</a>
<a href='https://github.com/microsoft/typescript'>
<img src='https://img.shields.io/npm/types/@kaze-style/react?style=for-the-badge'>
<img src='https://img.shields.io/npm/types/@kaze-style/core?style=for-the-badge'>
</a>

@@ -37,6 +37,7 @@ </div>

- **Build** - can choose when to extract css (build time & run time)
- **Extract** - Can choose when to extract css is buildtime or runtime(RSC is buildtime only)
- **Atomic** - Select atomic css with $
- **Merge** - Style merging ignoring css specificity (atomic css only)
- **Minimal** - [0.3kb](https://shakerphobia.netlify.app/?imports=ClassName,mergeStyle,__globalStyle,__style&pkg=@kaze-style/core) runtime by buildtime extract
- **TypeScript** - Type-safe styles via [csstype](https://github.com/frenic/csstype)
- **Minimal** - [0.3kb](https://shakerphobia.netlify.app/?imports=ClassName,mergeStyle,__globalStyle,__style&pkg=@kaze-style/react) runtime by build time extract
- **Merge** - Style merging ignoring css specificity
- **Theme** - Consistent styling using "@kaze-style/themes"

@@ -48,3 +49,3 @@

// App.style.ts
import { createStyle, createGlobalStyle } from '@kaze-style/react';
import { createStyle, createGlobalStyle } from '@kaze-style/core';

@@ -57,11 +58,15 @@ createGlobalStyle({

export const style = createStyle({
export const classes = createStyle({
//Not Atomic CSS
container: {
margin: '20px',
padding: '20px',
},
base: {
//Atomic CSS
$base: {
color: 'red',
background: 'black',
},
action: {
//Atomic CSS
$action: {
color: 'blue',

@@ -74,4 +79,4 @@ },

// App.tsx
import { mergeStyle } from '@kaze-style/react';
import { style } from './App.style';
import { mergeStyle } from '@kaze-style/core';
import { classes } from './App.style';

@@ -81,3 +86,3 @@ export const App = ({ action }) => {

<div className={style.container}>
<p className={mergeStyle(style.base, action && style.action)}></p>
<p className={mergeStyle(classes.$base, action && classes.$action)}></p>
</div>

@@ -88,3 +93,3 @@ );

### Setup Next.js(build time extract)
### Setup Next.js(buildtime extract)

@@ -91,0 +96,0 @@ ```ts

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