Big News: Socket raises $60M Series C at a $1B valuation to secure software supply chains for AI-driven development.Announcement →
Sign In

@gnist/themes

Package Overview
Dependencies
Maintainers
4
Versions
66
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@gnist/themes - npm Package Compare versions

Comparing version
3.30.0-alpha.2
 to
3.30.0
+11
-22
dist/atoms.css.js

@@ -1,19 +0,15 @@

import { globalStyle } from "@vanilla-extract/css";
import { globalStyle, style } from "@vanilla-extract/css";
import { createSprinkles, defineProperties } from "@vanilla-extract/sprinkles";
import { gnist, gnistStyle } from "./layers.css.js";
import { typography } from "./layers.css.js";
import { tokens } from "./tokens.css.js";
export const textContainer = gnistStyle({});
export const textContainer = style({});
globalStyle(`${textContainer} p, ${textContainer} ul, ${textContainer} ol`, {
"@layer": {
[gnist]: {
marginTop: tokens.type.small.body.paragraphSpacing,
"@media": {
"screen and (min-width: 768px)": {
marginTop: tokens.type.medium.body.paragraphSpacing,
},
"screen and (min-width: 1024px)": {
marginTop: tokens.type.large.body.paragraphSpacing,
},
},
marginTop: tokens.type.small.body.paragraphSpacing,
"@media": {
"screen and (min-width: 768px)": {
marginTop: tokens.type.medium.body.paragraphSpacing,
},
"screen and (min-width: 1024px)": {
marginTop: tokens.type.large.body.paragraphSpacing,
},
},

@@ -23,3 +19,2 @@ });

const responsiveProperties = defineProperties({
"@layer": gnist,
conditions: {

@@ -67,3 +62,2 @@ mobile: {},

const colorProperties = defineProperties({
"@layer": gnist,
properties: {

@@ -78,3 +72,2 @@ backgroundColor: color,

const radiusProperties = defineProperties({
"@layer": gnist,
properties: {

@@ -97,3 +90,2 @@ borderTopLeftRadius: radius,

const strokeProperties = defineProperties({
"@layer": gnist,
properties: {

@@ -116,3 +108,2 @@ borderTopWidth: stroke,

const elevationProperties = defineProperties({
"@layer": gnist,
properties: {

@@ -124,3 +115,2 @@ boxShadow: elevation,

const sizeProperties = defineProperties({
"@layer": gnist,
properties: {

@@ -149,3 +139,3 @@ width: size,

const responsiveTypeProperties = defineProperties({
"@layer": gnist,
"@layer": typography,
conditions: {

@@ -162,3 +152,2 @@ mobile: {},

const positionProperties = defineProperties({
"@layer": gnist,
properties: {

@@ -165,0 +154,0 @@ position: ["static", "relative", "absolute", "fixed", "sticky"],

+0
-58
dist/layers.css.d.ts

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

import { ComplexStyleRule } from "@vanilla-extract/css";
import { RecipeVariants, RuntimeFn } from "@vanilla-extract/recipes";
/** @deprecated No longer used internally. Will be removed in next major version. */
export declare const typography: string;
/** @deprecated No longer used internally. Will be removed in next major version. */
export declare const framework: string;
export declare const gnist = "gnist";
/**
* A custom style() function that wraps all styles in @layer gnist { }.
* Has the same API as vanilla-extract's style() function.
*
* @example
* ```ts
* import { gnistStyle } from "@gnist/themes/layers.css.js";
*
* const myClass = gnistStyle({
* color: "red",
* padding: "10px",
* });
* ```
*/
export declare function gnistStyle(rule: ComplexStyleRule, debugId?: string): string;
type RecipeStyleRule = ComplexStyleRule | string;
type VariantDefinitions = Record<string, RecipeStyleRule>;
type BooleanMap<T> = T extends "true" | "false" ? boolean : T;
type VariantGroups = Record<string, VariantDefinitions>;
type VariantSelection<Variants extends VariantGroups> = {
[VariantGroup in keyof Variants]?: BooleanMap<keyof Variants[VariantGroup]> | undefined;
};
interface CompoundVariant<Variants extends VariantGroups> {
variants: VariantSelection<Variants>;
style: RecipeStyleRule;
}
type PatternOptions<Variants extends VariantGroups> = {
base?: RecipeStyleRule;
variants?: Variants;
defaultVariants?: VariantSelection<Variants>;
compoundVariants?: Array<CompoundVariant<Variants>>;
};
/**
* A custom recipe() function that wraps all styles in @layer gnist { }.
* Has the same API as @vanilla-extract/recipes' recipe() function.
*
* @example
* ```ts
* import { gnistRecipe } from "@gnist/themes/layers.css.js";
*
* const myRecipe = gnistRecipe({
* base: { padding: "10px" },
* variants: {
* color: {
* primary: { backgroundColor: "blue" },
* secondary: { backgroundColor: "gray" },
* },
* },
* });
* ```
*/
export declare function gnistRecipe<Variants extends VariantGroups>(options: PatternOptions<Variants>, debugId?: string): RuntimeFn<Variants>;
export type { RecipeVariants };
+1
-128
dist/layers.css.js

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

import { layer, style, } from "@vanilla-extract/css";
import { recipe } from "@vanilla-extract/recipes";
/** @deprecated No longer used internally. Will be removed in next major version. */
import { layer } from "@vanilla-extract/css";
export const typography = layer("typography");
/** @deprecated No longer used internally. Will be removed in next major version. */
export const framework = layer("framework");
export const gnist = "gnist";
/**
* Wraps a StyleRule object with the gnist layer.
* Preserves any existing @layer rules by merging them.
*/
function wrapInGnistLayer(rule) {
if (rule["@layer"]) {
// If there's already a @layer, we need to merge
const existingLayer = rule["@layer"];
return {
...rule,
"@layer": {
[gnist]: existingLayer,
},
};
}
return {
"@layer": {
[gnist]: rule,
},
};
}
/**
* Processes a ComplexStyleRule, wrapping StyleRule objects with the gnist layer.
* Handles strings (class names), arrays, and StyleRule objects.
*/
function processComplexStyleRule(rule) {
if (typeof rule === "string") {
// Class name string - pass through unchanged
return rule;
}
if (Array.isArray(rule)) {
// Recursively process array items
return rule.map((item) => item ? processComplexStyleRule(item) : item);
}
// It's a StyleRule object - wrap it
return wrapInGnistLayer(rule);
}
/**
* A custom style() function that wraps all styles in @layer gnist { }.
* Has the same API as vanilla-extract's style() function.
*
* @example
* ```ts
* import { gnistStyle } from "@gnist/themes/layers.css.js";
*
* const myClass = gnistStyle({
* color: "red",
* padding: "10px",
* });
* ```
*/
export function gnistStyle(rule, debugId) {
const processedRule = processComplexStyleRule(rule);
return style(processedRule, debugId);
}
/**
* Processes a RecipeStyleRule, wrapping StyleRule objects with the gnist layer.
* Strings (class names) pass through unchanged.
*/
function processRecipeStyleRule(rule) {
if (typeof rule === "string") {
// Class name string - pass through unchanged
return rule;
}
return processComplexStyleRule(rule);
}
/**
* Processes recipe variants, wrapping each variant's styles with the gnist layer.
*/
function processRecipeVariants(variants) {
const processed = {};
for (const [variantName, variantValues] of Object.entries(variants)) {
processed[variantName] = {};
for (const [valueName, styles] of Object.entries(variantValues)) {
processed[variantName][valueName] = processRecipeStyleRule(styles);
}
}
return processed;
}
/**
* Processes compound variants, wrapping each compound variant's style with the gnist layer.
*/
function processCompoundVariants(compoundVariants) {
return compoundVariants.map((cv) => ({
...cv,
style: processRecipeStyleRule(cv.style),
}));
}
/**
* A custom recipe() function that wraps all styles in @layer gnist { }.
* Has the same API as @vanilla-extract/recipes' recipe() function.
*
* @example
* ```ts
* import { gnistRecipe } from "@gnist/themes/layers.css.js";
*
* const myRecipe = gnistRecipe({
* base: { padding: "10px" },
* variants: {
* color: {
* primary: { backgroundColor: "blue" },
* secondary: { backgroundColor: "gray" },
* },
* },
* });
* ```
*/
export function gnistRecipe(options, debugId) {
const processedOptions = {};
if (options.base !== undefined) {
processedOptions.base = processRecipeStyleRule(options.base);
}
if (options.variants) {
processedOptions.variants = processRecipeVariants(options.variants);
}
if (options.defaultVariants) {
processedOptions.defaultVariants = options.defaultVariants;
}
if (options.compoundVariants) {
processedOptions.compoundVariants = processCompoundVariants(options.compoundVariants);
}
return recipe(processedOptions, debugId);
}
+2
-2
dist/themes/bilholdLight.tailwind.css

@@ -119,4 +119,4 @@ /**

--color-interactive-95: #dddcff;
--font-brand: Figtree;
--font-brand-display: Figtree;
--font-brand: Geist Variable;
--font-brand-display: Geist Variable;
--font-weight-weight-light: 300;

@@ -123,0 +123,0 @@ --font-weight-weight-book: 400;

+26
-26
dist/themes/bilholdLightTokens.js

@@ -140,4 +140,4 @@ // Generated by style-dictionary. Do not edit directly.

typeface: {
brand: "Figtree",
"brand-display": "Figtree",
brand: "Geist Variable",
"brand-display": "Geist Variable",
weight: {

@@ -182,3 +182,3 @@ light: "300",

display: {
fontFamily: "Figtree",
fontFamily: "Geist Variable",
fontWeight: "600",

@@ -193,3 +193,3 @@ lineHeight: "1.4",

heading1: {
fontFamily: "Figtree",
fontFamily: "Geist Variable",
fontWeight: "600",

@@ -204,3 +204,3 @@ lineHeight: "1.4",

heading2: {
fontFamily: "Figtree",
fontFamily: "Geist Variable",
fontWeight: "600",

@@ -215,3 +215,3 @@ lineHeight: "1.4",

heading3: {
fontFamily: "Figtree",
fontFamily: "Geist Variable",
fontWeight: "600",

@@ -226,3 +226,3 @@ lineHeight: "1.4",

lead: {
fontFamily: "Figtree",
fontFamily: "Geist Variable",
fontWeight: "400",

@@ -237,3 +237,3 @@ fontSize: "1.25rem",

body: {
fontFamily: "Figtree",
fontFamily: "Geist Variable",
fontWeight: "400",

@@ -248,3 +248,3 @@ fontSize: "1rem",

link: {
fontFamily: "Figtree",
fontFamily: "Geist Variable",
fontWeight: "400",

@@ -259,3 +259,3 @@ fontSize: "1rem",

detail: {
fontFamily: "Figtree",
fontFamily: "Geist Variable",
fontWeight: "400",

@@ -272,3 +272,3 @@ fontSize: "0.875rem",

display: {
fontFamily: "Figtree",
fontFamily: "Geist Variable",
fontWeight: "600",

@@ -283,3 +283,3 @@ lineHeight: "1.4",

heading1: {
fontFamily: "Figtree",
fontFamily: "Geist Variable",
fontWeight: "600",

@@ -294,3 +294,3 @@ lineHeight: "1.4",

heading2: {
fontFamily: "Figtree",
fontFamily: "Geist Variable",
fontWeight: "600",

@@ -305,3 +305,3 @@ lineHeight: "1.4",

heading3: {
fontFamily: "Figtree",
fontFamily: "Geist Variable",
fontWeight: "600",

@@ -316,3 +316,3 @@ lineHeight: "1.4",

lead: {
fontFamily: "Figtree",
fontFamily: "Geist Variable",
fontWeight: "400",

@@ -327,3 +327,3 @@ fontSize: "1.125rem",

body: {
fontFamily: "Figtree",
fontFamily: "Geist Variable",
fontWeight: "400",

@@ -339,3 +339,3 @@ fontSize: "1rem",

paragraphSpacing: "1rem",
fontFamily: "Figtree",
fontFamily: "Geist Variable",
fontWeight: "400",

@@ -349,3 +349,3 @@ fontSize: "1rem",

detail: {
fontFamily: "Figtree",
fontFamily: "Geist Variable",
paragraphSpacing: "0.875rem",

@@ -362,3 +362,3 @@ fontWeight: "400",

display: {
fontFamily: "Figtree",
fontFamily: "Geist Variable",
fontWeight: "600",

@@ -373,3 +373,3 @@ lineHeight: "1.4",

heading1: {
fontFamily: "Figtree",
fontFamily: "Geist Variable",
fontWeight: "600",

@@ -384,3 +384,3 @@ lineHeight: "1.4",

heading2: {
fontFamily: "Figtree",
fontFamily: "Geist Variable",
fontWeight: "600",

@@ -395,3 +395,3 @@ lineHeight: "1.4",

heading3: {
fontFamily: "Figtree",
fontFamily: "Geist Variable",
fontWeight: "600",

@@ -406,3 +406,3 @@ lineHeight: "1.4",

lead: {
fontFamily: "Figtree",
fontFamily: "Geist Variable",
fontWeight: "400",

@@ -417,3 +417,3 @@ fontSize: "1.125rem",

body: {
fontFamily: "Figtree",
fontFamily: "Geist Variable",
fontWeight: "400",

@@ -428,3 +428,3 @@ fontSize: "1rem",

link: {
fontFamily: "Figtree",
fontFamily: "Geist Variable",
fontWeight: "400",

@@ -440,3 +440,3 @@ fontSize: "1rem",

paragraphSpacing: "0.875rem",
fontFamily: "Figtree",
fontFamily: "Geist Variable",
fontWeight: "400",

@@ -443,0 +443,0 @@ fontSize: "0.875rem",

+4
-9
dist/typography.css.js

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

import { globalStyle } from "@vanilla-extract/css";
import { globalStyle, style } from "@vanilla-extract/css";
import { atoms } from "./atoms.css.js";
import { gnist, gnistStyle } from "./layers.css.js";
import { tokens } from "./tokens.css.js";

@@ -29,3 +28,3 @@ /**

}));
export const globalTextStyles = gnistStyle([
export const globalTextStyles = style([
atoms({ backgroundColor: "background", color: "on-background" }),

@@ -35,8 +34,4 @@ responsiveTypography.body,

globalStyle("p, ul, ol", {
"@layer": {
[gnist]: {
margin: 0,
fontFamily: tokens.typeface.brand,
},
},
margin: 0,
fontFamily: tokens.typeface.brand,
});
+2
-6
package.json
{
"name": "@gnist/themes",
"version": "3.30.0-alpha.2",
"version": "3.30.0",
"license": "UNLICENSED",

@@ -8,6 +8,2 @@ "description": "",

"exports": {
"./layers.css.js": {
"import": "./dist/layers.css.js",
"types": "./dist/layers.css.d.ts"
},
"./atoms.css.js": {

@@ -71,3 +67,3 @@ "import": "./dist/atoms.css.js",

},
"gitHead": "a7a72c810de3a341dee37cad940f4a6e7bfb66be"
"gitHead": "85cdef0f0c8a849060f9c00e3408c50036d47a1f"
}
+9
-63
README.md

@@ -7,55 +7,2 @@ # Themes for @gnist/design-system

## CSS Layers
All styles produced by this library are wrapped in `@layer gnist { }`. This means consumers can override any design system style without specificity issues — unlayered styles always take precedence over layered styles.
To ensure correct layer ordering, add a `@layer` declaration at the top of your main CSS file (e.g. `globals.css`):
```css
@layer base, gnist;
```
This guarantees that `gnist` styles take precedence over `base` styles. Any global or reset CSS you write should be wrapped in `@layer base { }` so it doesn't unintentionally override design system styles:
```css
@layer base {
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
}
}
```
Styles written outside any `@layer` will still take the highest precedence, allowing you to override design system styles when needed.
## Development
When writing styles within the design system or gnist-app, use `gnistStyle` and `gnistRecipe` instead of vanilla-extract's `style` and `recipe`:
```ts
import { gnistStyle, gnistRecipe } from "@gnist/themes/layers.css.js";
const myClass = gnistStyle({ color: "red" });
const myRecipe = gnistRecipe({
base: { padding: "10px" },
variants: {
size: {
small: { fontSize: "12px" },
large: { fontSize: "18px" },
},
},
});
```
A lint rule enforces this — importing `style` from `@vanilla-extract/css` or `recipe` from `@vanilla-extract/recipes` will produce an error.
Note that `globalStyle` and `styleVariants` are not wrapped automatically and must be manually placed inside `@layer` when needed.
See DEVELOPMENT.md for more details.
## Overview

@@ -149,7 +96,7 @@

```ts
import { gnistStyle } from "@gnist/themes/layers.css.js";
import { style } from "@vanilla-extract/css";
import { tokens } from "@gnist/themes/tokens.css.js";
import { boxColors } from "@gnist/themes/colors.css.js";
const box = gnistStyle([
const box = style([
boxColors["primary-container"],

@@ -174,7 +121,7 @@ { borderWidth: tokens.stroke.medium },

```tsx
import { gnistStyle } from "@gnist/themes/layers.css.js";
import { style } from "@vanilla-extract/css";
import { atoms } from "@gnist/themes/atoms.css.js";
import { responsiveTypography } from "@gnist/themes/typography.css.js"
const someStyle = gnistStyle([
const someStyle = style([
atoms({ display: "flex", padding: "xs" }),

@@ -198,7 +145,7 @@ responsiveTypography.lead,

```ts
import { gnistRecipe } from "@gnist/themes/layers.css.js";
import { recipe } from "@vanilla-extract/recipes";
import { atoms } from "@gnist/themes/atoms.css.js";
import { densityTypography } from "@gnist/themes/typography.css.js";
const action = gnistRecipe({
const action = recipe({
base: atoms({ display: "block" }),

@@ -208,3 +155,3 @@ ...densityTypography.action,

const className = action({ density: "default" });
const className = recipe({ density: "default" });
```

@@ -215,7 +162,7 @@

```ts
import { gnistRecipe } from "@gnist/themes/layers.css.js";
import { recipe } from "@vanilla-extract/recipes";
import { atoms } from "@gnist/themes/atoms.css.js";
import { densityTypography } from "@gnist/themes/typography.css.js";
const box = gnistRecipe({
const box = recipe({
base: [atoms({ display: "block" })],

@@ -413,2 +360,1 @@ variants: {

**Note:** These tokens stay in sync with the vanilla-extract themes automatically when design tokens are updated from Figma.
dist/tsconfig.build.tsbuildinfo

Sorry, the diff of this file is not supported yet