@gnist/themes - npm Package Compare versions

Comparing version 3.27.0-alpha.1 to 3.27.0

dist/atoms.css.d.ts

@@ -115,2 +115,3 @@ export declare const textContainer: string;
     backgroundColor?: "progress" | "disabled" | "background" | "outline" | "primary" | "secondary" | "tertiary" | "tertiary-variant" | "error" | "warning" | "success" | "info" | "interactive" | "on-primary" | "primary-container" | "on-primary-container" | "on-secondary" | "secondary-container" | "on-secondary-container" | "on-tertiary" | "tertiary-container" | "on-tertiary-container" | "on-tertiary-variant" | "on-background" | "inverse-background" | "on-inverse-background" | "surface" | "on-surface" | "surface-variant" | "on-surface-variant" | "surface-tertiary-variant" | "on-surface-tertiary-variant" | "on-disabled" | "text-variant" | "inverse-text-variant" | "loader" | "on-loader" | "on-error" | "error-container" | "on-error-container" | "on-warning" | "warning-container" | "on-warning-container" | "on-success" | "success-container" | "on-success-container" | "on-info" | "info-container" | "on-info-container" | "highlight" | "on-progress" | undefined;
+    background?: "progress" | "disabled" | "background" | "outline" | "primary" | "secondary" | "tertiary" | "tertiary-variant" | "error" | "warning" | "success" | "info" | "interactive" | "on-primary" | "primary-container" | "on-primary-container" | "on-secondary" | "secondary-container" | "on-secondary-container" | "on-tertiary" | "tertiary-container" | "on-tertiary-container" | "on-tertiary-variant" | "on-background" | "inverse-background" | "on-inverse-background" | "surface" | "on-surface" | "surface-variant" | "on-surface-variant" | "surface-tertiary-variant" | "on-surface-tertiary-variant" | "on-disabled" | "text-variant" | "inverse-text-variant" | "loader" | "on-loader" | "on-error" | "error-container" | "on-error-container" | "on-warning" | "warning-container" | "on-warning-container" | "on-success" | "success-container" | "on-success-container" | "on-info" | "info-container" | "on-info-container" | "highlight" | "on-progress" | undefined;
     borderColor?: "progress" | "disabled" | "background" | "outline" | "primary" | "secondary" | "tertiary" | "tertiary-variant" | "error" | "warning" | "success" | "info" | "interactive" | "on-primary" | "primary-container" | "on-primary-container" | "on-secondary" | "secondary-container" | "on-secondary-container" | "on-tertiary" | "tertiary-container" | "on-tertiary-container" | "on-tertiary-variant" | "on-background" | "inverse-background" | "on-inverse-background" | "surface" | "on-surface" | "surface-variant" | "on-surface-variant" | "surface-tertiary-variant" | "on-surface-tertiary-variant" | "on-disabled" | "text-variant" | "inverse-text-variant" | "loader" | "on-loader" | "on-error" | "error-container" | "on-error-container" | "on-warning" | "warning-container" | "on-warning-container" | "on-success" | "success-container" | "on-success-container" | "on-info" | "info-container" | "on-info-container" | "highlight" | "on-progress" | undefined;
@@ -144,4 +145,4 @@ color?: "progress" | "disabled" | "background" | "outline" | "primary" | "secondary" | "tertiary" | "tertiary-variant" | "error" | "warning" | "success" | "info" | "interactive" | "on-primary" | "primary-container" | "on-primary-container" | "on-secondary" | "secondary-container" | "on-secondary-container" | "on-tertiary" | "tertiary-container" | "on-tertiary-container" | "on-tertiary-variant" | "on-background" | "inverse-background" | "on-inverse-background" | "surface" | "on-surface" | "surface-variant" | "on-surface-variant" | "surface-tertiary-variant" | "on-surface-tertiary-variant" | "on-disabled" | "text-variant" | "inverse-text-variant" | "loader" | "on-loader" | "on-error" | "error-container" | "on-error-container" | "on-warning" | "warning-container" | "on-warning-container" | "on-success" | "success-container" | "on-success-container" | "on-info" | "info-container" | "on-info-container" | "highlight" | "on-progress" | undefined;
 }) => string) & {
-    properties: Set<"color" | "position" | "alignItems" | "backgroundColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomWidth" | "borderLeftWidth" | "borderRightWidth" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopWidth" | "boxShadow" | "columnGap" | "display" | "flexDirection" | "flexWrap" | "height" | "justifyContent" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "rowGap" | "width" | "padding" | "borderColor" | "borderRadius" | "borderWidth" | "gap" | "margin" | "typography" | "marginX" | "marginY" | "paddingX" | "paddingY">;
+    properties: Set<"color" | "position" | "alignItems" | "backgroundColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomWidth" | "borderLeftWidth" | "borderRightWidth" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopWidth" | "boxShadow" | "columnGap" | "display" | "flexDirection" | "flexWrap" | "height" | "justifyContent" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "rowGap" | "width" | "padding" | "background" | "borderColor" | "borderRadius" | "borderWidth" | "gap" | "margin" | "typography" | "marginX" | "marginY" | "paddingX" | "paddingY">;
 };
 export type Atoms = Parameters<typeof atoms>[0];

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,5 +62,5 @@ mobile: {},
 const colorProperties = defineProperties({
-    "@layer": gnist,
     properties: {
         backgroundColor: color,
+        background: color,
         borderColor: color,
@@ -77,3 +72,2 @@ color: color,
 const radiusProperties = defineProperties({
-    "@layer": gnist,
     properties: {
@@ -96,3 +90,2 @@ borderTopLeftRadius: radius,
 const strokeProperties = defineProperties({
-    "@layer": gnist,
     properties: {
@@ -115,3 +108,2 @@ borderTopWidth: stroke,
 const elevationProperties = defineProperties({
-    "@layer": gnist,
     properties: {
@@ -123,3 +115,2 @@ boxShadow: elevation,
 const sizeProperties = defineProperties({
-    "@layer": gnist,
     properties: {
@@ -148,3 +139,3 @@ width: size,
 const responsiveTypeProperties = defineProperties({
-    "@layer": gnist,
+    "@layer": typography,
     conditions: {
@@ -161,3 +152,2 @@ mobile: {},
 const positionProperties = defineProperties({
-    "@layer": gnist,
     properties: {
@@ -164,0 +154,0 @@ position: ["static", "relative", "absolute", "fixed", "sticky"],

dist/colors.css.js

@@ -7,3 +7,3 @@ import { atoms } from "./atoms.css.js";
 const boxColorsInternal = (colorName) => atoms({
-    backgroundColor: colorName,
+    background: colorName,
     color: `on-${colorName}`,
@@ -10,0 +10,0 @@ borderColor: `on-${colorName}`,

dist/layers.css.d.ts

@@ -1,58 +0,2 @@
-import { ComplexStyleRule } from "@vanilla-extract/css";
-import { RecipeVariants, RuntimeFn } from "@vanilla-extract/recipes";
 export declare const typography: string;
 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 };

dist/layers.css.js

@@ -1,128 +0,3 @@
-import { layer, style, } from "@vanilla-extract/css";
-import { recipe } from "@vanilla-extract/recipes";
+import { layer } from "@vanilla-extract/css";
 export const typography = layer("typography");
 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);
-}

dist/themes/audi.tailwind.css

@@ -7,35 +7,35 @@ /**
 @theme {
-    --color-primary: #000000;
-    --color-secondary: #ffffff;
+    --color-primary: #657081;
+    --color-secondary: #181d25;
     --color-tertiary: #f50537;
-    --color-tertiary-variant: #737d86;
-    --color-neutral: #56616e;
-    --color-neutral-variant: #d4dee9;
-    --color-error: #fd2c4e;
-    --color-warning: #ffaa00;
-    --color-success: #26b82b;
-    --color-info: #556efe;
-    --color-interactive: #2526fe;
-    --color-black: #000000;
-    --color-white: #ffffff;
-    --color-primary-10: #000000;
-    --color-primary-20: #1a1a1a;
-    --color-primary-30: #262626;
-    --color-primary-40: #333333;
-    --color-primary-50: #666666;
-    --color-primary-60: #808080;
-    --color-primary-70: #b3b3b3;
-    --color-primary-80: #cccccc;
-    --color-primary-90: #e5e5e5;
-    --color-primary-95: #f2f2f2;
-    --color-secondary-10: #000000;
-    --color-secondary-20: #1a1a1a;
-    --color-secondary-30: #262626;
-    --color-secondary-40: #333333;
-    --color-secondary-50: #666666;
-    --color-secondary-60: #808080;
-    --color-secondary-70: #b3b3b3;
-    --color-secondary-80: #cccccc;
-    --color-secondary-90: #e5e5e5;
-    --color-secondary-95: #f2f2f2;
+    --color-tertiary-variant: #232a34;
+    --color-neutral: #101319;
+    --color-neutral-variant: #2c343f;
+    --color-error: #ff3e41;
+    --color-warning: #fcff5c;
+    --color-success: #89ff89;
+    --color-info: #6376ff;
+    --color-interactive: #0989ff;
+    --color-black: #020203;
+    --color-white: #fcfcfd;
+    --color-primary-10: #1f242c;
+    --color-primary-20: #2c343f;
+    --color-primary-30: #404a59;
+    --color-primary-40: #657081;
+    --color-primary-50: #707c90;
+    --color-primary-60: #78859b;
+    --color-primary-70: #8593ad;
+    --color-primary-80: #93a2bf;
+    --color-primary-90: #9baac8;
+    --color-primary-95: #9fafcf;
+    --color-secondary-10: #181d25;
+    --color-secondary-20: #2d3139;
+    --color-secondary-30: #41454e;
+    --color-secondary-40: #565a62;
+    --color-secondary-50: #6b6e76;
+    --color-secondary-60: #7f828a;
+    --color-secondary-70: #94979e;
+    --color-secondary-80: #aaabb1;
+    --color-secondary-90: #bfc0c5;
+    --color-secondary-95: #d4d5d8;
     --color-tertiary-10: #480000;
@@ -51,133 +51,137 @@ --color-tertiary-20: #570000;
     --color-tertiary-95: #ffdbdb;
-    --color-tertiary-variant-10: #13161a;
-    --color-tertiary-variant-20: #252a30;
-    --color-tertiary-variant-30: #4b545c;
-    --color-tertiary-variant-40: #737d86;
-    --color-tertiary-variant-50: #868f98;
-    --color-tertiary-variant-60: #99a1ab;
-    --color-tertiary-variant-70: #adb3bc;
-    --color-tertiary-variant-80: #c1c6ce;
-    --color-tertiary-variant-90: #d5d8de;
-    --color-tertiary-variant-95: #eaecef;
-    --color-neutral-10: #0f1215;
-    --color-neutral-20: #1e242a;
-    --color-neutral-30: #2c353f;
-    --color-neutral-40: #3b4754;
-    --color-neutral-50: #56616e;
-    --color-neutral-60: #707c87;
-    --color-neutral-70: #8c96a0;
-    --color-neutral-80: #a8b0b9;
-    --color-neutral-90: #c4cad1;
-    --color-neutral-95: #e2e5e8;
-    --color-neutral-variant-10: #35383a;
-    --color-neutral-variant-20: #6a6f75;
-    --color-neutral-variant-30: #9fa7af;
-    --color-neutral-variant-40: #d4dee9;
-    --color-neutral-variant-50: #d9e3ed;
-    --color-neutral-variant-60: #dee7f1;
-    --color-neutral-variant-70: #e4ecf5;
-    --color-neutral-variant-80: #eaf1f8;
-    --color-neutral-variant-90: #f1f6fb;
-    --color-neutral-variant-95: #f8fafd;
-    --color-error-10: #030000;
-    --color-error-20: #570008;
-    --color-error-30: #ab0622;
-    --color-error-40: #fd2c4e;
-    --color-error-50: #ff3d58;
-    --color-error-60: #ff5365;
-    --color-error-70: #ff6d78;
-    --color-error-80: #ff9292;
-    --color-error-90: #ffb6b6;
-    --color-error-95: #ffdbdb;
-    --color-warning-10: #3d1400;
-    --color-warning-20: #6b2400;
-    --color-warning-30: #a54600;
-    --color-warning-40: #ffaa00;
-    --color-warning-50: #ffab00;
-    --color-warning-60: #ffca41;
-    --color-warning-70: #ffd771;
-    --color-warning-80: #ffe692;
-    --color-warning-90: #fff0b6;
-    --color-warning-95: #fff8db;
-    --color-success-10: #000200;
-    --color-success-20: #004800;
-    --color-success-30: #007d00;
-    --color-success-40: #0da20d;
-    --color-success-50: #26b82b;
-    --color-success-60: #49cc4c;
-    --color-success-70: #6ddc6f;
-    --color-success-80: #92e992;
-    --color-success-90: #b6f4b7;
-    --color-success-95: #dbfbdb;
-    --color-info-10: #000003;
-    --color-info-20: #0a1657;
-    --color-info-30: #263bab;
-    --color-info-40: #556efe;
+    --color-tertiary-variant-10: #070a0f;
+    --color-tertiary-variant-20: #10151c;
+    --color-tertiary-variant-30: #191f29;
+    --color-tertiary-variant-40: #232a34;
+    --color-tertiary-variant-50: #414852;
+    --color-tertiary-variant-60: #606670;
+    --color-tertiary-variant-70: #7f848d;
+    --color-tertiary-variant-80: #9fa2aa;
+    --color-tertiary-variant-90: #bec0c7;
+    --color-tertiary-variant-95: #dfe0e3;
+    --color-neutral-10: #020203;
+    --color-neutral-20: #14141d;
+    --color-neutral-30: #0e1016;
+    --color-neutral-40: #101319;
+    --color-neutral-50: #2b313c;
+    --color-neutral-60: #37404e;
+    --color-neutral-70: #4d5766;
+    --color-neutral-80: #626f83;
+    --color-neutral-90: #728299;
+    --color-neutral-95: #8193ad;
+    --color-neutral-variant-10: #020203;
+    --color-neutral-variant-20: #111119;
+    --color-neutral-variant-30: #232333;
+    --color-neutral-variant-40: #2c343f;
+    --color-neutral-variant-50: #394452;
+    --color-neutral-variant-60: #4a5869;
+    --color-neutral-variant-70: #5e7087;
+    --color-neutral-variant-80: #9aa3b1;
+    --color-neutral-variant-90: #b3bdce;
+    --color-neutral-variant-95: #dbdfe6;
+    --color-error-10: #8c0000;
+    --color-error-20: #a90000;
+    --color-error-30: #c60b0b;
+    --color-error-40: #e22223;
+    --color-error-50: #ff3e41;
+    --color-error-60: #ff514e;
+    --color-error-70: #ff6b61;
+    --color-error-80: #ff8679;
+    --color-error-90: #ffa495;
+    --color-error-95: #ffc2b6;
+    --color-warning-10: #666604;
+    --color-warning-20: #8c8c11;
+    --color-warning-30: #b3b324;
+    --color-warning-40: #d9d93d;
+    --color-warning-50: #fcff5c;
+    --color-warning-60: #ffff69;
+    --color-warning-70: #ffff7a;
+    --color-warning-80: #ffff8e;
+    --color-warning-90: #ffffa5;
+    --color-warning-95: #ffffc0;
+    --color-success-10: #2b8c2f;
+    --color-success-20: #3da941;
+    --color-success-30: #53c656;
+    --color-success-40: #6de26e;
+    --color-success-50: #89ff89;
+    --color-success-60: #93ff97;
+    --color-success-70: #9fffa6;
+    --color-success-80: #adffb7;
+    --color-success-90: #beffc9;
+    --color-success-95: #d1ffdb;
+    --color-info-10: #001899;
+    --color-info-20: #0f29b3;
+    --color-info-30: #223dcc;
+    --color-info-40: #3a54e6;
     --color-info-50: #6376ff;
-    --color-info-60: #7481ff;
-    --color-info-70: #8990ff;
-    --color-info-80: #a1a3ff;
-    --color-info-90: #bfbdff;
-    --color-info-95: #dfdcff;
-    --color-interactive-10: #000003;
-    --color-interactive-20: #000057;
-    --color-interactive-30: #0201ab;
-    --color-interactive-40: #2526fe;
-    --color-interactive-50: #3d37ff;
-    --color-interactive-60: #5a4dff;
-    --color-interactive-70: #796dff;
-    --color-interactive-80: #9a92ff;
-    --color-interactive-90: #bcb6ff;
-    --color-interactive-95: #dedbff;
-    --color-primary: #f2f2f2;
-    --color-on-primary: #000000;
-    --color-secondary: #333333;
-    --color-on-secondary: #f2f2f2;
+    --color-info-60: #6376ff;
+    --color-info-70: #7481ff;
+    --color-info-80: #8990ff;
+    --color-info-90: #a1a3ff;
+    --color-info-95: #bfbdff;
+    --color-interactive-10: #00458c;
+    --color-interactive-20: #0056a9;
+    --color-interactive-30: #0067c6;
+    --color-interactive-40: #0078e2;
+    --color-interactive-50: #0989ff;
+    --color-interactive-60: #2492ff;
+    --color-interactive-70: #499dff;
+    --color-interactive-80: #6da9ff;
+    --color-interactive-90: #92b8ff;
+    --color-interactive-95: #b6caff;
+    --color-primary: #657081;
+    --color-on-primary: #fcfcfd;
+    --color-secondary: #181d25;
+    --color-on-secondary: #fcfcfd;
     --color-on-tertiary: #480000;
     --color-on-tertiary-container: #480000;
-    --color-background: #000000;
-    --color-on-background: #ffffff;
-    --color-inverse-background: #ffffff;
-    --color-on-inverse-background: #000000;
-    --color-surface: #333333;
-    --color-on-surface: #ffffff;
-    --color-disabled: #3b4754;
-    --color-on-disabled: #8c96a0;
-    --color-text-variant: #a8b0b9;
-    --color-outline: #56616e;
-    --color-loader: #3b4754;
-    --color-on-loader: #a8b0b9;
-    --color-surface-variant: #1a1a1a;
-    --color-on-surface-variant: #ffffff;
-    --color-success: #26b82b;
-    --color-interactive: #ffffff;
-    --color-highlight: #796dff;
-    --color-inverse-text-variant: #1e242a;
-    --color-surface-tertiary-variant: #9fa7af;
-    --color-on-surface-tertiary-variant: #000000;
-    --color-progress: #e2e5e8;
+    --color-background: #101319;
+    --color-on-background: #fcfcfd;
+    --color-inverse-background: #fcfcfd;
+    --color-on-inverse-background: #101319;
+    --color-surface: #181d25;
+    --color-on-surface: #fcfcfd;
+    --color-disabled: #4d5766;
+    --color-on-disabled: #8193ad;
+    --color-text-variant: #fcfcfd;
+    --color-outline: #2b313c;
+    --color-loader: #101319;
+    --color-on-loader: #626f83;
+    --color-surface-variant: linear-gradient(180deg, #232a34 0%, #181d25 100%);
+    --color-on-surface-variant: #fcfcfd;
+    --color-success: #89ff89;
+    --color-on-success: #020203;
+    --color-interactive: #fcfcfd;
+    --color-highlight: #499dff;
+    --color-inverse-text-variant: #020203;
+    --color-surface-tertiary-variant: linear-gradient(
+        180deg,
+        #404a59 0%,
+        #404a59 100%
+    );
+    --color-on-surface-tertiary-variant: #fcfcfd;
+    --color-progress: #8193ad;
     --color-on-progress: #f50537;
-    --color-primary-container: #e5e5e5;
-    --color-on-primary-container: #000000;
-    --color-secondary-container: #e5e5e5;
-    --color-on-secondary-container: #000000;
+    --color-primary-container: #9baac8;
+    --color-on-primary-container: #1f242c;
+    --color-secondary-container: #bfc0c5;
+    --color-on-secondary-container: #181d25;
     --color-tertiary: #f50537;
     --color-tertiary-container: #ffb6b6;
-    --color-tertiary-variant: #737d86;
-    --color-on-tertiary-variant: #000000;
-    --color-error: #fd2c4e;
-    --color-on-error: #ffffff;
-    --color-error-container: #ffdbdb;
-    --color-on-error-container: #030000;
-    --color-warning: #ffaa00;
-    --color-on-warning: #000000;
-    --color-warning-container: #fff8db;
-    --color-on-warning-container: #3d1400;
-    --color-on-success: #ffffff;
-    --color-success-container: #dbfbdb;
-    --color-on-success-container: #000200;
-    --color-info: #556efe;
-    --color-on-info: #ffffff;
-    --color-info-container: #dfdcff;
-    --color-on-info-container: #000003;
+    --color-tertiary-variant: #232a34;
+    --color-on-tertiary-variant: #020203;
+    --color-error: #e22223;
+    --color-on-error: #fcfcfd;
+    --color-error-container: #ffc2b6;
+    --color-on-error-container: #8c0000;
+    --color-warning: #d9d93d;
+    --color-on-warning: #020203;
+    --color-warning-container: #ffffc0;
+    --color-on-warning-container: #666604;
+    --color-success-container: #d1ffdb;
+    --color-on-success-container: #2b8c2f;
+    --color-info: #3a54e6;
+    --color-on-info: #fcfcfd;
+    --color-info-container: #bfbdff;
+    --color-on-info-container: #001899;
     --font-brand: Audi Type Variable;
@@ -184,0 +188,0 @@ --font-brand-display: Audi Type;

dist/themes/audiLight.tailwind.css

@@ -162,2 +162,3 @@ /**
     --color-on-progress: #f50537;
+    --color-on-success: #000000;
     --color-tertiary: #f50537;
@@ -175,3 +176,2 @@ --color-tertiary-container: #ffb6b6;
     --color-on-warning-container: #3d1400;
-    --color-on-success: #ffffff;
     --color-success-container: #dbfbdb;
@@ -178,0 +178,0 @@ --color-on-success-container: #000200;

dist/themes/audiLightTokens.d.ts

@@ -208,2 +208,3 @@ export declare const audiLightTokens: {
         "on-progress": string;
+        "on-success": string;
         tertiary: string;
@@ -221,3 +222,2 @@ "tertiary-container": string;
         "on-warning-container": string;
-        "on-success": string;
         "success-container": string;
@@ -547,2 +547,8 @@ "on-success-container": string;
     };
+    gradient: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        quaternary: string;
+    };
     "opacity-percentage": {
@@ -549,0 +555,0 @@ "8": string;

dist/themes/audiLightTokens.js

@@ -209,2 +209,3 @@ // Generated by style-dictionary. Do not edit directly.
         "on-progress": "#f50537",
+        "on-success": "#000000",
         tertiary: "#f50537",
@@ -222,3 +223,2 @@ "tertiary-container": "#ffb6b6",
         "on-warning-container": "#3d1400",
-        "on-success": "#ffffff",
         "success-container": "#dbfbdb",
@@ -548,2 +548,8 @@ "on-success-container": "#000200",
     },
+    gradient: {
+        primary: "linear-gradient(180deg, #737D86 0%, #000000 100%)",
+        secondary: "linear-gradient(180deg, #1A1A1A 0%, #1A1A1A 100%)",
+        tertiary: "linear-gradient(180deg, #262626 0%, #262626 100%)",
+        quaternary: "linear-gradient(180deg, #262626 0%, #262626 100%)",
+    },
     "opacity-percentage": {
@@ -550,0 +556,0 @@ "8": "0.08",

dist/themes/audiTokens.d.ts

@@ -197,2 +197,3 @@ export declare const audiTokens: {
         success: string;
+        "on-success": string;
         interactive: string;
@@ -221,3 +222,2 @@ highlight: string;
         "on-warning-container": string;
-        "on-success": string;
         "success-container": string;
@@ -547,2 +547,8 @@ "on-success-container": string;
     };
+    gradient: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        quaternary: string;
+    };
     "opacity-percentage": {
@@ -549,0 +555,0 @@ "8": string;

dist/themes/audiTokens.js

@@ -28,40 +28,40 @@ // Generated by style-dictionary. Do not edit directly.
     keycolor: {
-        primary: "#000000",
-        secondary: "#ffffff",
+        primary: "#657081",
+        secondary: "#181d25",
         tertiary: "#f50537",
-        "tertiary-variant": "#737d86",
-        neutral: "#56616e",
-        "neutral-variant": "#d4dee9",
-        error: "#fd2c4e",
-        warning: "#ffaa00",
-        success: "#26b82b",
-        info: "#556efe",
-        interactive: "#2526fe",
+        "tertiary-variant": "#232a34",
+        neutral: "#101319",
+        "neutral-variant": "#2c343f",
+        error: "#ff3e41",
+        warning: "#fcff5c",
+        success: "#89ff89",
+        info: "#6376ff",
+        interactive: "#0989ff",
     },
     palette: {
-        black: "#000000",
-        white: "#ffffff",
+        black: "#020203",
+        white: "#fcfcfd",
         primary: {
-            "10": "#000000",
-            "20": "#1a1a1a",
-            "30": "#262626",
-            "40": "#333333",
-            "50": "#666666",
-            "60": "#808080",
-            "70": "#b3b3b3",
-            "80": "#cccccc",
-            "90": "#e5e5e5",
-            "95": "#f2f2f2",
+            "10": "#1f242c",
+            "20": "#2c343f",
+            "30": "#404a59",
+            "40": "#657081",
+            "50": "#707c90",
+            "60": "#78859b",
+            "70": "#8593ad",
+            "80": "#93a2bf",
+            "90": "#9baac8",
+            "95": "#9fafcf",
         },
         secondary: {
-            "10": "#000000",
-            "20": "#1a1a1a",
-            "30": "#262626",
-            "40": "#333333",
-            "50": "#666666",
-            "60": "#808080",
-            "70": "#b3b3b3",
-            "80": "#cccccc",
-            "90": "#e5e5e5",
-            "95": "#f2f2f2",
+            "10": "#181d25",
+            "20": "#2d3139",
+            "30": "#41454e",
+            "40": "#565a62",
+            "50": "#6b6e76",
+            "60": "#7f828a",
+            "70": "#94979e",
+            "80": "#aaabb1",
+            "90": "#bfc0c5",
+            "95": "#d4d5d8",
         },
@@ -81,150 +81,150 @@ tertiary: {
         "tertiary-variant": {
-            "10": "#13161a",
-            "20": "#252a30",
-            "30": "#4b545c",
-            "40": "#737d86",
-            "50": "#868f98",
-            "60": "#99a1ab",
-            "70": "#adb3bc",
-            "80": "#c1c6ce",
-            "90": "#d5d8de",
-            "95": "#eaecef",
+            "10": "#070a0f",
+            "20": "#10151c",
+            "30": "#191f29",
+            "40": "#232a34",
+            "50": "#414852",
+            "60": "#606670",
+            "70": "#7f848d",
+            "80": "#9fa2aa",
+            "90": "#bec0c7",
+            "95": "#dfe0e3",
         },
         neutral: {
-            "10": "#0f1215",
-            "20": "#1e242a",
-            "30": "#2c353f",
-            "40": "#3b4754",
-            "50": "#56616e",
-            "60": "#707c87",
-            "70": "#8c96a0",
-            "80": "#a8b0b9",
-            "90": "#c4cad1",
-            "95": "#e2e5e8",
+            "10": "#020203",
+            "20": "#14141d",
+            "30": "#0e1016",
+            "40": "#101319",
+            "50": "#2b313c",
+            "60": "#37404e",
+            "70": "#4d5766",
+            "80": "#626f83",
+            "90": "#728299",
+            "95": "#8193ad",
         },
         "neutral-variant": {
-            "10": "#35383a",
-            "20": "#6a6f75",
-            "30": "#9fa7af",
-            "40": "#d4dee9",
-            "50": "#d9e3ed",
-            "60": "#dee7f1",
-            "70": "#e4ecf5",
-            "80": "#eaf1f8",
-            "90": "#f1f6fb",
-            "95": "#f8fafd",
+            "10": "#020203",
+            "20": "#111119",
+            "30": "#232333",
+            "40": "#2c343f",
+            "50": "#394452",
+            "60": "#4a5869",
+            "70": "#5e7087",
+            "80": "#9aa3b1",
+            "90": "#b3bdce",
+            "95": "#dbdfe6",
         },
         error: {
-            "10": "#030000",
-            "20": "#570008",
-            "30": "#ab0622",
-            "40": "#fd2c4e",
-            "50": "#ff3d58",
-            "60": "#ff5365",
-            "70": "#ff6d78",
-            "80": "#ff9292",
-            "90": "#ffb6b6",
-            "95": "#ffdbdb",
+            "10": "#8c0000",
+            "20": "#a90000",
+            "30": "#c60b0b",
+            "40": "#e22223",
+            "50": "#ff3e41",
+            "60": "#ff514e",
+            "70": "#ff6b61",
+            "80": "#ff8679",
+            "90": "#ffa495",
+            "95": "#ffc2b6",
         },
         warning: {
-            "10": "#3d1400",
-            "20": "#6b2400",
-            "30": "#a54600",
-            "40": "#ffaa00",
-            "50": "#ffab00",
-            "60": "#ffca41",
-            "70": "#ffd771",
-            "80": "#ffe692",
-            "90": "#fff0b6",
-            "95": "#fff8db",
+            "10": "#666604",
+            "20": "#8c8c11",
+            "30": "#b3b324",
+            "40": "#d9d93d",
+            "50": "#fcff5c",
+            "60": "#ffff69",
+            "70": "#ffff7a",
+            "80": "#ffff8e",
+            "90": "#ffffa5",
+            "95": "#ffffc0",
         },
         success: {
-            "10": "#000200",
-            "20": "#004800",
-            "30": "#007d00",
-            "40": "#0da20d",
-            "50": "#26b82b",
-            "60": "#49cc4c",
-            "70": "#6ddc6f",
-            "80": "#92e992",
-            "90": "#b6f4b7",
-            "95": "#dbfbdb",
+            "10": "#2b8c2f",
+            "20": "#3da941",
+            "30": "#53c656",
+            "40": "#6de26e",
+            "50": "#89ff89",
+            "60": "#93ff97",
+            "70": "#9fffa6",
+            "80": "#adffb7",
+            "90": "#beffc9",
+            "95": "#d1ffdb",
         },
         info: {
-            "10": "#000003",
-            "20": "#0a1657",
-            "30": "#263bab",
-            "40": "#556efe",
+            "10": "#001899",
+            "20": "#0f29b3",
+            "30": "#223dcc",
+            "40": "#3a54e6",
             "50": "#6376ff",
-            "60": "#7481ff",
-            "70": "#8990ff",
-            "80": "#a1a3ff",
-            "90": "#bfbdff",
-            "95": "#dfdcff",
+            "60": "#6376ff",
+            "70": "#7481ff",
+            "80": "#8990ff",
+            "90": "#a1a3ff",
+            "95": "#bfbdff",
         },
         interactive: {
-            "10": "#000003",
-            "20": "#000057",
-            "30": "#0201ab",
-            "40": "#2526fe",
-            "50": "#3d37ff",
-            "60": "#5a4dff",
-            "70": "#796dff",
-            "80": "#9a92ff",
-            "90": "#bcb6ff",
-            "95": "#dedbff",
+            "10": "#00458c",
+            "20": "#0056a9",
+            "30": "#0067c6",
+            "40": "#0078e2",
+            "50": "#0989ff",
+            "60": "#2492ff",
+            "70": "#499dff",
+            "80": "#6da9ff",
+            "90": "#92b8ff",
+            "95": "#b6caff",
         },
     },
     color: {
-        primary: "#f2f2f2",
-        "on-primary": "#000000",
-        secondary: "#333333",
-        "on-secondary": "#f2f2f2",
+        primary: "#657081",
+        "on-primary": "#fcfcfd",
+        secondary: "#181d25",
+        "on-secondary": "#fcfcfd",
         "on-tertiary": "#480000",
         "on-tertiary-container": "#480000",
-        background: "#000000",
-        "on-background": "#ffffff",
-        "inverse-background": "#ffffff",
-        "on-inverse-background": "#000000",
-        surface: "#333333",
-        "on-surface": "#ffffff",
-        disabled: "#3b4754",
-        "on-disabled": "#8c96a0",
-        "text-variant": "#a8b0b9",
-        outline: "#56616e",
-        loader: "#3b4754",
-        "on-loader": "#a8b0b9",
-        "surface-variant": "#1a1a1a",
-        "on-surface-variant": "#ffffff",
-        success: "#26b82b",
-        interactive: "#ffffff",
-        highlight: "#796dff",
-        "inverse-text-variant": "#1e242a",
-        "surface-tertiary-variant": "#9fa7af",
-        "on-surface-tertiary-variant": "#000000",
-        progress: "#e2e5e8",
+        background: "#101319",
+        "on-background": "#fcfcfd",
+        "inverse-background": "#fcfcfd",
+        "on-inverse-background": "#101319",
+        surface: "#181d25",
+        "on-surface": "#fcfcfd",
+        disabled: "#4d5766",
+        "on-disabled": "#8193ad",
+        "text-variant": "#fcfcfd",
+        outline: "#2b313c",
+        loader: "#101319",
+        "on-loader": "#626f83",
+        "surface-variant": "linear-gradient(180deg, #232a34 0%, #181d25 100%)",
+        "on-surface-variant": "#fcfcfd",
+        success: "#89ff89",
+        "on-success": "#020203",
+        interactive: "#fcfcfd",
+        highlight: "#499dff",
+        "inverse-text-variant": "#020203",
+        "surface-tertiary-variant": "linear-gradient(180deg, #404a59 0%, #404a59 100%)",
+        "on-surface-tertiary-variant": "#fcfcfd",
+        progress: "#8193ad",
         "on-progress": "#f50537",
-        "primary-container": "#e5e5e5",
-        "on-primary-container": "#000000",
-        "secondary-container": "#e5e5e5",
-        "on-secondary-container": "#000000",
+        "primary-container": "#9baac8",
+        "on-primary-container": "#1f242c",
+        "secondary-container": "#bfc0c5",
+        "on-secondary-container": "#181d25",
         tertiary: "#f50537",
         "tertiary-container": "#ffb6b6",
-        "tertiary-variant": "#737d86",
-        "on-tertiary-variant": "#000000",
-        error: "#fd2c4e",
-        "on-error": "#ffffff",
-        "error-container": "#ffdbdb",
-        "on-error-container": "#030000",
-        warning: "#ffaa00",
-        "on-warning": "#000000",
-        "warning-container": "#fff8db",
-        "on-warning-container": "#3d1400",
-        "on-success": "#ffffff",
-        "success-container": "#dbfbdb",
-        "on-success-container": "#000200",
-        info: "#556efe",
-        "on-info": "#ffffff",
-        "info-container": "#dfdcff",
-        "on-info-container": "#000003",
+        "tertiary-variant": "#232a34",
+        "on-tertiary-variant": "#020203",
+        error: "#e22223",
+        "on-error": "#fcfcfd",
+        "error-container": "#ffc2b6",
+        "on-error-container": "#8c0000",
+        warning: "#d9d93d",
+        "on-warning": "#020203",
+        "warning-container": "#ffffc0",
+        "on-warning-container": "#666604",
+        "success-container": "#d1ffdb",
+        "on-success-container": "#2b8c2f",
+        info: "#3a54e6",
+        "on-info": "#fcfcfd",
+        "info-container": "#bfbdff",
+        "on-info-container": "#001899",
     },
@@ -548,2 +548,8 @@ typeface: {
     },
+    gradient: {
+        primary: "linear-gradient(180deg, #232a34 0%, #181d25 100%)",
+        secondary: "linear-gradient(180deg, #2c343f 0%, #2c343f 100%)",
+        tertiary: "linear-gradient(180deg, #404a59 0%, #404a59 100%)",
+        quaternary: "linear-gradient(180deg, #404a59 0%, #404a59 100%)",
+    },
     "opacity-percentage": {
@@ -550,0 +556,0 @@ "8": "0.08",

dist/themes/autoriaTokens.d.ts

@@ -554,2 +554,8 @@ export declare const autoriaTokens: {
     };
+    gradient: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        quaternary: string;
+    };
 };

dist/themes/autoriaTokens.js

@@ -555,2 +555,8 @@ // Generated by style-dictionary. Do not edit directly.
     },
+    gradient: {
+        primary: "linear-gradient(180deg, #737D86 0%, #1B1B1B 100%)",
+        secondary: "linear-gradient(180deg, #656664 0%, #1B1B1B 100%)",
+        tertiary: "linear-gradient(180deg, #5E605B 0%, #191A18 100%)",
+        quaternary: "linear-gradient(180deg, #737D86 0%, #13161A 100%)",
+    },
 };

dist/themes/bilholdLightTokens.d.ts

@@ -554,2 +554,8 @@ export declare const bilholdLightTokens: {
     };
+    gradient: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        quaternary: string;
+    };
 };

dist/themes/bilholdLightTokens.js

@@ -555,2 +555,8 @@ // Generated by style-dictionary. Do not edit directly.
     },
+    gradient: {
+        primary: "linear-gradient(180deg, #E1E4EB 0%, #B7BB89 100%)",
+        secondary: "linear-gradient(180deg, #EDEFC8 0%, #B7BB89 100%)",
+        tertiary: "linear-gradient(180deg, #FBFC83 0%, #C2C241 100%)",
+        quaternary: "linear-gradient(180deg, #E1E4EB 0%, #22252E 100%)",
+    },
 };

dist/themes/brandlessTokens.d.ts

@@ -554,2 +554,8 @@ export declare const brandlessTokens: {
     };
+    gradient: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        quaternary: string;
+    };
 };

dist/themes/brandlessTokens.js

@@ -555,2 +555,8 @@ // Generated by style-dictionary. Do not edit directly.
     },
+    gradient: {
+        primary: "linear-gradient(180deg, #737D86 0%, #323537 100%)",
+        secondary: "linear-gradient(180deg, #c9d3dd 0%, #323537 100%)",
+        tertiary: "linear-gradient(180deg, #737D86 0%, #13161A 100%)",
+        quaternary: "linear-gradient(180deg, #737D86 0%, #13161A 100%)",
+    },
 };

dist/themes/cupraTokens.d.ts

@@ -554,2 +554,8 @@ export declare const cupraTokens: {
     };
+    gradient: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        quaternary: string;
+    };
 };

dist/themes/cupraTokens.js

@@ -555,2 +555,8 @@ // Generated by style-dictionary. Do not edit directly.
     },
+    gradient: {
+        primary: "linear-gradient(180deg, #373B47 0%, #404040 100%)",
+        secondary: "linear-gradient(180deg, #F8F8F8 0%, #404040 100%)",
+        tertiary: "linear-gradient(180deg, #836A4E 0%, #3C2C19 100%)",
+        quaternary: "linear-gradient(180deg, #373B47 0%, #14171F 100%)",
+    },
 };

dist/themes/dahlesTokens.d.ts

@@ -554,2 +554,8 @@ export declare const dahlesTokens: {
     };
+    gradient: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        quaternary: string;
+    };
 };

dist/themes/dahlesTokens.js

@@ -555,2 +555,8 @@ // Generated by style-dictionary. Do not edit directly.
     },
+    gradient: {
+        primary: "linear-gradient(180deg, #737D86 0%, #000001 100%)",
+        secondary: "linear-gradient(180deg, #161F28 0%, #000001 100%)",
+        tertiary: "linear-gradient(180deg, #5A635F 0%, #010101 100%)",
+        quaternary: "linear-gradient(180deg, #737D86 0%, #13161A 100%)",
+    },
 };

dist/themes/gnistTokens.d.ts

@@ -554,2 +554,8 @@ export declare const gnistTokens: {
     };
+    gradient: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        quaternary: string;
+    };
 };

dist/themes/gnistTokens.js

@@ -555,2 +555,8 @@ // Generated by style-dictionary. Do not edit directly.
     },
+    gradient: {
+        primary: "linear-gradient(180deg, #3E404D 0%, #1C1817 100%)",
+        secondary: "linear-gradient(180deg, #695F5D 0%, #1C1817 100%)",
+        tertiary: "linear-gradient(180deg, #938C79 0%, #19281E 100%)",
+        quaternary: "linear-gradient(180deg, #3E404D 0%, #030F16 100%)",
+    },
 };

dist/themes/gumpenTokens.d.ts

@@ -554,2 +554,8 @@ export declare const gumpenTokens: {
     };
+    gradient: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        quaternary: string;
+    };
 };

dist/themes/gumpenTokens.js

@@ -555,2 +555,8 @@ // Generated by style-dictionary. Do not edit directly.
     },
+    gradient: {
+        primary: "linear-gradient(180deg, #737D86 0%, #1B2A14 100%)",
+        secondary: "linear-gradient(180deg, #ADD596 0%, #1B2A14 100%)",
+        tertiary: "linear-gradient(180deg, #ADD596 0%, #1B2A14 100%)",
+        quaternary: "linear-gradient(180deg, #737D86 0%, #15191D 100%)",
+    },
 };

dist/themes/mollerBilTokens.d.ts

@@ -554,2 +554,8 @@ export declare const mollerBilTokens: {
     };
+    gradient: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        quaternary: string;
+    };
 };

dist/themes/mollerBilTokens.js

@@ -555,2 +555,8 @@ // Generated by style-dictionary. Do not edit directly.
     },
+    gradient: {
+        primary: "linear-gradient(180deg, #ce5646 0%, #000b1d 100%)",
+        secondary: "linear-gradient(180deg, #001740 0%, #000b1d 100%)",
+        tertiary: "linear-gradient(180deg, #e88969 0%, #6b3f30 100%)",
+        quaternary: "linear-gradient(180deg, #ce5646 0%, #5f2820 100%)",
+    },
 };

dist/themes/seatTokens.d.ts

@@ -554,2 +554,8 @@ export declare const seatTokens: {
     };
+    gradient: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        quaternary: string;
+    };
 };

dist/themes/seatTokens.js

@@ -555,2 +555,8 @@ // Generated by style-dictionary. Do not edit directly.
     },
+    gradient: {
+        primary: "linear-gradient(180deg, #1B0F4D 0%, #000E10 100%)",
+        secondary: "linear-gradient(180deg, #0A2B2F 0%, #000E10 100%)",
+        tertiary: "linear-gradient(180deg, #FF0036 0%, #420000 100%)",
+        quaternary: "linear-gradient(180deg, #1B0F4D 0%, #04001A 100%)",
+    },
 };

dist/themes/skodaTokens.d.ts

@@ -554,2 +554,8 @@ export declare const skodaTokens: {
     };
+    gradient: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        quaternary: string;
+    };
 };

dist/themes/skodaTokens.js

@@ -555,2 +555,8 @@ // Generated by style-dictionary. Do not edit directly.
     },
+    gradient: {
+        primary: "linear-gradient(180deg, #3A6558 0%, #263E31 100%)",
+        secondary: "linear-gradient(180deg, #419468 0%, #263E31 100%)",
+        tertiary: "linear-gradient(180deg, #419468 0%, #263E31 100%)",
+        quaternary: "linear-gradient(180deg, #3A6558 0%, #00271D 100%)",
+    },
 };

dist/themes/toolsDarkTokens.d.ts

@@ -554,2 +554,8 @@ export declare const toolsDarkTokens: {
     };
+    gradient: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        quaternary: string;
+    };
 };

dist/themes/toolsDarkTokens.js

@@ -555,2 +555,8 @@ // Generated by style-dictionary. Do not edit directly.
     },
+    gradient: {
+        primary: "linear-gradient(180deg, #7CAFC3 0%, #252527 100%)",
+        secondary: "linear-gradient(180deg, #5D5D60 0%, #252527 100%)",
+        tertiary: "linear-gradient(180deg, #FFF59E 0%, #E7E773 100%)",
+        quaternary: "linear-gradient(180deg, #7CAFC3 0%, #2A4A58 100%)",
+    },
 };

dist/themes/toolsTokens.d.ts

@@ -554,2 +554,8 @@ export declare const toolsTokens: {
     };
+    gradient: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        quaternary: string;
+    };
 };

dist/themes/toolsTokens.js

@@ -555,2 +555,8 @@ // Generated by style-dictionary. Do not edit directly.
     },
+    gradient: {
+        primary: "linear-gradient(180deg, #7CAFC3 0%, #252527 100%)",
+        secondary: "linear-gradient(180deg, #5D5D60 0%, #252527 100%)",
+        tertiary: "linear-gradient(180deg, #FFF59E 0%, #E7E773 100%)",
+        quaternary: "linear-gradient(180deg, #7CAFC3 0%, #2A4A58 100%)",
+    },
 };

dist/themes/vwTokens.d.ts

@@ -554,2 +554,8 @@ export declare const vwTokens: {
     };
+    gradient: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        quaternary: string;
+    };
 };

dist/themes/vwTokens.js

@@ -555,2 +555,8 @@ // Generated by style-dictionary. Do not edit directly.
     },
+    gradient: {
+        primary: "linear-gradient(180deg, #737D86 0%, #00252B 100%)",
+        secondary: "linear-gradient(180deg, #00B0F0 0%, #00252B 100%)",
+        tertiary: "linear-gradient(180deg, #00B0F0 0%, #00252B 100%)",
+        quaternary: "linear-gradient(180deg, #737D86 0%, #13161A 100%)",
+    },
 };

dist/tokens.css.d.ts

@@ -554,2 +554,8 @@ export declare const tokens: {
     };
+    gradient: {
+        primary: `var(--${string})`;
+        secondary: `var(--${string})`;
+        tertiary: `var(--${string})`;
+        quaternary: `var(--${string})`;
+    };
 };

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,
 });

package.json

 {
     "name": "@gnist/themes",
-    "version": "3.27.0-alpha.1",
+    "version": "3.27.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": "4bca1d580ddd2510fc1eccc7a4858f58e3b679a5"
+    "gitHead": "656788ba12ec6c41ea21cb49a2ba68830de30635"
 }

New alerts

Explicitly Unlicensed Item

License

Something was found which is explicitly marked as unlicensed.

Found 1 instance in 1 package

Fixed alerts

Explicitly Unlicensed Item

License

Something was found which is explicitly marked as unlicensed.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

756673

0.19%

Number of low quality alerts

1

-50%

Worsened metrics

Lines of code

21813

-0.01%

No dependency changes