@primer/primitives 10.4.0-rc.fd8ac4c9 → 10.5.0-rc.2284dc61

package/dist/build/schemas/shadowToken.js

@@ -17,6 +17,10 @@ export const shadowValue = z
     inset: z.boolean().optional(),
 })
     .strict();
+const baseShadowToken = baseToken.extend({
+    $value: z.union([shadowValue, referenceValue, z.array(shadowValue)]),
+});
+const override = z.union([referenceValue, baseShadowToken]).optional();
 export const shadowToken = baseToken
     .extend({
     $value: z.union([shadowValue, z.array(shadowValue), referenceValue]),
@@ -40,6 +44,29 @@ export const shadowToken = baseToken
             group: z.string().optional(),
         })
             .strict(),
+        'org.primer.overrides': z
+            .object({
+            light: override,
+            'light-tritanopia': override,
+            'light-protanopia-deuteranopia': override,
+            'light-high-contrast': override,
+            dark: override,
+            'dark-tritanopia': override,
+            'dark-protanopia-deuteranopia': override,
+            'dark-high-contrast': override,
+            'dark-dimmed': override,
+        }, {
+            errorMap: e => {
+                if (e.code === 'unrecognized_keys') {
+                    return {
+                        message: `Unrecognized key: "${e.keys.join(', ')}", must be one of: light, light-tritanopia, light-protanopia-deuteranopia, light-high-contrast, dark, dark-tritanopia, dark-protanopia-deuteranopia, dark-high-contrast, dark-dimmed`,
+                    };
+                }
+                return { message: `Error: ${e.code}` };
+            },
+        })
+            .strict()
+            .optional(),
     })
         .optional(),
 })

package/dist/build/schemas/stringToken.d.ts

@@ -4,15 +4,15 @@ export declare const stringToken: z.ZodObject<z.objectUtil.extendShape<{
     $deprecated: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodBoolean]>>;
 }, {
     $value: z.ZodUnion<[z.ZodString, z.ZodEffects<z.ZodString, string, string>]>;
-    $type: z.ZodLiteral<"string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange">;
+    $type: z.ZodLiteral<"string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange">;
 }>, "strict", z.ZodTypeAny, {
     $value: string;
-    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
     $description?: string | undefined;
     $deprecated?: string | boolean | undefined;
 }, {
     $value: string;
-    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
     $description?: string | undefined;
     $deprecated?: string | boolean | undefined;
 }>;

package/dist/build/schemas/tokenType.d.ts

@@ -1,3 +1,3 @@
 import { z } from 'zod';
 import type { TokenType } from './validTokenType.js';
-export declare const tokenType: ($type: TokenType) => z.ZodLiteral<"string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange">;
+export declare const tokenType: ($type: TokenType) => z.ZodLiteral<"string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange">;

package/dist/build/schemas/typographyToken.d.ts

@@ -35,7 +35,7 @@ export declare const typographyToken: z.ZodObject<z.objectUtil.extendShape<{
         fontWeight: string | number;
         lineHeight?: string | 0 | undefined;
     }>, z.ZodEffects<z.ZodString, string, string>]>;
-    $type: z.ZodLiteral<"string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange">;
+    $type: z.ZodLiteral<"string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange">;
 }>, "strict", z.ZodTypeAny, {
     $value: string | {
         fontFamily: string;
@@ -43,7 +43,7 @@ export declare const typographyToken: z.ZodObject<z.objectUtil.extendShape<{
         fontWeight: string | number;
         lineHeight?: string | 0 | undefined;
     };
-    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
     $description?: string | undefined;
     $deprecated?: string | boolean | undefined;
 }, {
@@ -53,7 +53,7 @@ export declare const typographyToken: z.ZodObject<z.objectUtil.extendShape<{
         fontWeight: string | number;
         lineHeight?: string | 0 | undefined;
     };
-    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
     $description?: string | undefined;
     $deprecated?: string | boolean | undefined;
 }>;

package/dist/build/schemas/validTokenType.d.ts

@@ -1,5 +1,5 @@
 import { z } from 'zod';
-declare const validTypes: readonly ["color", "cubicBezier", "typography", "dimension", "duration", "border", "shadow", "fontFamily", "fontWeight", "number", "string", "custom-viewportRange"];
+declare const validTypes: readonly ["color", "cubicBezier", "typography", "dimension", "duration", "border", "shadow", "fontFamily", "fontWeight", "gradient", "number", "string", "custom-viewportRange"];
 export type TokenType = (typeof validTypes)[number];
 export declare const validateType: z.ZodRecord<z.ZodString, z.ZodLazy<z.ZodTypeAny>>;
 export {};

package/dist/build/schemas/validTokenType.js

@@ -10,6 +10,7 @@ const validTypes = [
     'shadow',
     'fontFamily',
     'fontWeight',
+    'gradient',
     'number',
     'string',
     'custom-viewportRange',

package/dist/build/schemas/viewportRangeToken.d.ts

@@ -4,15 +4,15 @@ export declare const viewportRangeToken: z.ZodObject<z.objectUtil.extendShape<{
     $deprecated: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodBoolean]>>;
 }, {
     $value: z.ZodUnion<[z.ZodString, z.ZodEffects<z.ZodString, string, string>]>;
-    $type: z.ZodLiteral<"string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange">;
+    $type: z.ZodLiteral<"string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange">;
 }>, "strict", z.ZodTypeAny, {
     $value: string;
-    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
     $description?: string | undefined;
     $deprecated?: string | boolean | undefined;
 }, {
     $value: string;
-    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
     $description?: string | undefined;
     $deprecated?: string | boolean | undefined;
 }>;

package/dist/build/transformers/gradientToCss.d.ts

@@ -0,0 +1,8 @@
+import type { Transform } from 'style-dictionary/types';
+/**
+ * @description converts gradient tokens value to css gradient
+ * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
+ * @matcher matches all tokens of $type `gradient`
+ * @transformer returns a `css gradient` string
+ */
+export declare const gradientToCss: Transform;

package/dist/build/transformers/gradientToCss.js

@@ -0,0 +1,23 @@
+import { toHex } from 'color2k';
+import { isGradient } from '../filters/isGradient.js';
+import { getTokenValue } from './utilities/getTokenValue.js';
+/**
+ * @description converts gradient tokens value to css gradient
+ * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
+ * @matcher matches all tokens of $type `gradient`
+ * @transformer returns a `css gradient` string
+ */
+export const gradientToCss = {
+    name: 'gradient/css',
+    type: 'value',
+    transitive: true,
+    filter: isGradient,
+    transform: (token) => {
+        var _a, _b;
+        const { angle } = (_b = (_a = token.$extensions) === null || _a === void 0 ? void 0 : _a['org.primer.gradient']) !== null && _b !== void 0 ? _b : {};
+        const stops = getTokenValue(token).map(({ color, position }) => {
+            return `${toHex(color)} ${position * 100}%`;
+        });
+        return `linear-gradient(${angle || 180}deg, ${stops.join(', ')})`;
+    },
+};

package/dist/build/transformers/index.d.ts

@@ -5,6 +5,7 @@ export { colorToRgbaFloat } from './colorToRgbaFloat.js';
 export { cubicBezierToCss } from './cubicBezierToCss.js';
 export { floatToPixel } from './floatToPixel.js';
 export { floatToPixelUnitless } from './floatToPixel.js';
+export { gradientToCss } from './gradientToCss.js';
 export { dimensionToRem } from './dimensionToRem.js';
 export { dimensionToRemPxArray } from './dimensionToRemPxArray.js';
 export { dimensionToPixelUnitless } from './dimensionToPixelUnitless.js';

package/dist/build/transformers/index.js

@@ -5,6 +5,7 @@ export { colorToRgbaFloat } from './colorToRgbaFloat.js';
 export { cubicBezierToCss } from './cubicBezierToCss.js';
 export { floatToPixel } from './floatToPixel.js';
 export { floatToPixelUnitless } from './floatToPixel.js';
+export { gradientToCss } from './gradientToCss.js';
 export { dimensionToRem } from './dimensionToRem.js';
 export { dimensionToRemPxArray } from './dimensionToRemPxArray.js';
 export { dimensionToPixelUnitless } from './dimensionToPixelUnitless.js';

package/dist/css/functional/themes/dark-colorblind.css

@@ -175,14 +175,28 @@
   --data-auburn-color-muted: #271817;
   --data-blue-color-emphasis: #0576ff;
   --data-blue-color-muted: #001a47;
+  --data-brown-color-emphasis: #94774c;
+  --data-brown-color-muted: #241c14;
+  --data-coral-color-emphasis: #e1430e;
+  --data-coral-color-muted: #351008;
   --data-gray-color-emphasis: #576270;
   --data-gray-color-muted: #1c1c1c;
   --data-green-color-emphasis: #2f6f37;
   --data-green-color-muted: #122117;
+  --data-lemon-color-emphasis: #977b0c;
+  --data-lemon-color-muted: #291d00;
+  --data-lime-color-emphasis: #5f892f;
+  --data-lime-color-muted: #141f0f;
+  --data-olive-color-emphasis: #7a8321;
+  --data-olive-color-muted: #171e0b;
   --data-orange-color-emphasis: #984b10;
   --data-orange-color-muted: #311708;
+  --data-pine-color-emphasis: #18915e;
+  --data-pine-color-muted: #082119;
   --data-pink-color-emphasis: #d34591;
   --data-pink-color-muted: #2d1524;
+  --data-plum-color-emphasis: #b643ef;
+  --data-plum-color-muted: #2a0e3f;
   --data-purple-color-emphasis: #975bf1;
   --data-purple-color-muted: #211047;
   --data-red-color-emphasis: #eb3342;
@@ -538,6 +552,40 @@
   --controlTrack-fgColor-rest: var(--fgColor-muted);
   --counter-bgColor-emphasis: var(--bgColor-neutral-emphasis);
   --counter-bgColor-muted: var(--bgColor-neutral-muted);
+  --data-auburn-color-gradientStop-1: var(--data-auburn-color-muted);
+  --data-auburn-color-gradientStop-2: #27181700;
+  --data-blue-color-gradientStop-1: var(--data-blue-color-muted);
+  --data-blue-color-gradientStop-2: #001a4700;
+  --data-brown-color-gradientStop-1: var(--data-brown-color-muted);
+  --data-brown-color-gradientStop-2: #241c1400;
+  --data-coral-color-gradientStop-1: var(--data-coral-color-muted);
+  --data-coral-color-gradientStop-2: #35100800;
+  --data-gray-color-gradientStop-1: var(--data-gray-color-muted);
+  --data-gray-color-gradientStop-2: #1c1c1c00;
+  --data-green-color-gradientStop-1: var(--data-green-color-muted);
+  --data-green-color-gradientStop-2: #12211700;
+  --data-lemon-color-gradientStop-1: var(--data-lemon-color-muted);
+  --data-lemon-color-gradientStop-2: #291d0000;
+  --data-lime-color-gradientStop-1: var(--data-lime-color-muted);
+  --data-lime-color-gradientStop-2: #141f0f00;
+  --data-olive-color-gradientStop-1: var(--data-olive-color-muted);
+  --data-olive-color-gradientStop-2: #171e0b00;
+  --data-orange-color-gradientStop-1: var(--data-orange-color-muted);
+  --data-orange-color-gradientStop-2: #31170800;
+  --data-pine-color-gradientStop-1: var(--data-pine-color-muted);
+  --data-pine-color-gradientStop-2: #08211900;
+  --data-pink-color-gradientStop-1: var(--data-pink-color-muted);
+  --data-pink-color-gradientStop-2: #2d152400;
+  --data-plum-color-gradientStop-1: var(--data-plum-color-muted);
+  --data-plum-color-gradientStop-2: #2a0e3f00;
+  --data-purple-color-gradientStop-1: var(--data-purple-color-muted);
+  --data-purple-color-gradientStop-2: #21104700;
+  --data-red-color-gradientStop-1: var(--data-red-color-muted);
+  --data-red-color-gradientStop-2: #3c061400;
+  --data-teal-color-gradientStop-1: var(--data-teal-color-muted);
+  --data-teal-color-gradientStop-2: #041f2500;
+  --data-yellow-color-gradientStop-1: var(--data-yellow-color-muted);
+  --data-yellow-color-gradientStop-2: #2e1a0000;
   --diffBlob-additionLine-bgColor: #388bfd26;
   --diffBlob-additionLine-fgColor: var(--fgColor-default);
   --diffBlob-additionNum-fgColor: var(--fgColor-default);
@@ -565,9 +613,9 @@
   --selection-bgColor: #1f6febb3;
   --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
   --shadow-inset: inset 0px 1px 0px 0px #0104093d;
-  --shadow-resting-medium: 0px 3px 6px 0px #010409cc;
-  --shadow-resting-small: 0px 1px 0px 0px #01040966;
-  --shadow-resting-xsmall: 0px 1px 0px 0px #010409cc;
+  --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;
+  --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999;
+  --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc;
   --tooltip-bgColor: var(--bgColor-emphasis);
   --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
   --underlineNav-iconColor-rest: var(--fgColor-muted);
@@ -607,6 +655,23 @@
   --controlKnob-borderColor-disabled: var(--control-bgColor-disabled);
   --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
   --controlTrack-fgColor-disabled: var(--fgColor-onEmphasis);
+  --data-auburn-gradient: linear-gradient(180deg, #271817 0%, #27181700 100%);
+  --data-blue-gradient: linear-gradient(180deg, #001a47 0%, #001a4700 100%);
+  --data-brown-gradient: linear-gradient(180deg, #241c14 0%, #241c1400 100%);
+  --data-coral-gradient: linear-gradient(180deg, #351008 0%, #35100800 100%);
+  --data-gray-gradient: linear-gradient(180deg, #1c1c1c 0%, #1c1c1c00 100%);
+  --data-green-gradient: linear-gradient(180deg, #122117 0%, #12211700 100%);
+  --data-lemon-gradient: linear-gradient(180deg, #291d00 0%, #291d0000 100%);
+  --data-lime-gradient: linear-gradient(180deg, #141f0f 0%, #141f0f00 100%);
+  --data-olive-gradient: linear-gradient(180deg, #171e0b 0%, #171e0b00 100%);
+  --data-orange-gradient: linear-gradient(180deg, #311708 0%, #31170800 100%);
+  --data-pine-gradient: linear-gradient(180deg, #082119 0%, #08211900 100%);
+  --data-pink-gradient: linear-gradient(180deg, #2d1524 0%, #2d152400 100%);
+  --data-plum-gradient: linear-gradient(180deg, #2a0e3f 0%, #2a0e3f00 100%);
+  --data-purple-gradient: linear-gradient(180deg, #211047 0%, #21104700 100%);
+  --data-red-gradient: linear-gradient(180deg, #3c0614 0%, #3c061400 100%);
+  --data-teal-gradient: linear-gradient(180deg, #041f25 0%, #041f2500 100%);
+  --data-yellow-gradient: linear-gradient(180deg, #2e1a00 0%, #2e1a0000 100%);
   --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
   --focus-outline: 2px solid #1f6feb;
   --overlay-borderColor: var(--borderColor-muted);
@@ -621,7 +686,7 @@
   --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409;
   --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
   --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
-  --button-outline-borderColor-selected: var(--button-outline-borderColor-hover);
+  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
 }
 @media (prefers-color-scheme: dark) {
   [data-color-mode="auto"][data-dark-theme="dark_colorblind"],
@@ -799,14 +864,28 @@
     --data-auburn-color-muted: #271817;
     --data-blue-color-emphasis: #0576ff;
     --data-blue-color-muted: #001a47;
+    --data-brown-color-emphasis: #94774c;
+    --data-brown-color-muted: #241c14;
+    --data-coral-color-emphasis: #e1430e;
+    --data-coral-color-muted: #351008;
     --data-gray-color-emphasis: #576270;
     --data-gray-color-muted: #1c1c1c;
     --data-green-color-emphasis: #2f6f37;
     --data-green-color-muted: #122117;
+    --data-lemon-color-emphasis: #977b0c;
+    --data-lemon-color-muted: #291d00;
+    --data-lime-color-emphasis: #5f892f;
+    --data-lime-color-muted: #141f0f;
+    --data-olive-color-emphasis: #7a8321;
+    --data-olive-color-muted: #171e0b;
     --data-orange-color-emphasis: #984b10;
     --data-orange-color-muted: #311708;
+    --data-pine-color-emphasis: #18915e;
+    --data-pine-color-muted: #082119;
     --data-pink-color-emphasis: #d34591;
     --data-pink-color-muted: #2d1524;
+    --data-plum-color-emphasis: #b643ef;
+    --data-plum-color-muted: #2a0e3f;
     --data-purple-color-emphasis: #975bf1;
     --data-purple-color-muted: #211047;
     --data-red-color-emphasis: #eb3342;
@@ -1162,6 +1241,40 @@
     --controlTrack-fgColor-rest: var(--fgColor-muted);
     --counter-bgColor-emphasis: var(--bgColor-neutral-emphasis);
     --counter-bgColor-muted: var(--bgColor-neutral-muted);
+    --data-auburn-color-gradientStop-1: var(--data-auburn-color-muted);
+    --data-auburn-color-gradientStop-2: #27181700;
+    --data-blue-color-gradientStop-1: var(--data-blue-color-muted);
+    --data-blue-color-gradientStop-2: #001a4700;
+    --data-brown-color-gradientStop-1: var(--data-brown-color-muted);
+    --data-brown-color-gradientStop-2: #241c1400;
+    --data-coral-color-gradientStop-1: var(--data-coral-color-muted);
+    --data-coral-color-gradientStop-2: #35100800;
+    --data-gray-color-gradientStop-1: var(--data-gray-color-muted);
+    --data-gray-color-gradientStop-2: #1c1c1c00;
+    --data-green-color-gradientStop-1: var(--data-green-color-muted);
+    --data-green-color-gradientStop-2: #12211700;
+    --data-lemon-color-gradientStop-1: var(--data-lemon-color-muted);
+    --data-lemon-color-gradientStop-2: #291d0000;
+    --data-lime-color-gradientStop-1: var(--data-lime-color-muted);
+    --data-lime-color-gradientStop-2: #141f0f00;
+    --data-olive-color-gradientStop-1: var(--data-olive-color-muted);
+    --data-olive-color-gradientStop-2: #171e0b00;
+    --data-orange-color-gradientStop-1: var(--data-orange-color-muted);
+    --data-orange-color-gradientStop-2: #31170800;
+    --data-pine-color-gradientStop-1: var(--data-pine-color-muted);
+    --data-pine-color-gradientStop-2: #08211900;
+    --data-pink-color-gradientStop-1: var(--data-pink-color-muted);
+    --data-pink-color-gradientStop-2: #2d152400;
+    --data-plum-color-gradientStop-1: var(--data-plum-color-muted);
+    --data-plum-color-gradientStop-2: #2a0e3f00;
+    --data-purple-color-gradientStop-1: var(--data-purple-color-muted);
+    --data-purple-color-gradientStop-2: #21104700;
+    --data-red-color-gradientStop-1: var(--data-red-color-muted);
+    --data-red-color-gradientStop-2: #3c061400;
+    --data-teal-color-gradientStop-1: var(--data-teal-color-muted);
+    --data-teal-color-gradientStop-2: #041f2500;
+    --data-yellow-color-gradientStop-1: var(--data-yellow-color-muted);
+    --data-yellow-color-gradientStop-2: #2e1a0000;
     --diffBlob-additionLine-bgColor: #388bfd26;
     --diffBlob-additionLine-fgColor: var(--fgColor-default);
     --diffBlob-additionNum-fgColor: var(--fgColor-default);
@@ -1189,9 +1302,9 @@
     --selection-bgColor: #1f6febb3;
     --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
     --shadow-inset: inset 0px 1px 0px 0px #0104093d;
-    --shadow-resting-medium: 0px 3px 6px 0px #010409cc;
-    --shadow-resting-small: 0px 1px 0px 0px #01040966;
-    --shadow-resting-xsmall: 0px 1px 0px 0px #010409cc;
+    --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;
+    --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999;
+    --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc;
     --tooltip-bgColor: var(--bgColor-emphasis);
     --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
     --underlineNav-iconColor-rest: var(--fgColor-muted);
@@ -1231,6 +1344,23 @@
     --controlKnob-borderColor-disabled: var(--control-bgColor-disabled);
     --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
     --controlTrack-fgColor-disabled: var(--fgColor-onEmphasis);
+    --data-auburn-gradient: linear-gradient(180deg, #271817 0%, #27181700 100%);
+    --data-blue-gradient: linear-gradient(180deg, #001a47 0%, #001a4700 100%);
+    --data-brown-gradient: linear-gradient(180deg, #241c14 0%, #241c1400 100%);
+    --data-coral-gradient: linear-gradient(180deg, #351008 0%, #35100800 100%);
+    --data-gray-gradient: linear-gradient(180deg, #1c1c1c 0%, #1c1c1c00 100%);
+    --data-green-gradient: linear-gradient(180deg, #122117 0%, #12211700 100%);
+    --data-lemon-gradient: linear-gradient(180deg, #291d00 0%, #291d0000 100%);
+    --data-lime-gradient: linear-gradient(180deg, #141f0f 0%, #141f0f00 100%);
+    --data-olive-gradient: linear-gradient(180deg, #171e0b 0%, #171e0b00 100%);
+    --data-orange-gradient: linear-gradient(180deg, #311708 0%, #31170800 100%);
+    --data-pine-gradient: linear-gradient(180deg, #082119 0%, #08211900 100%);
+    --data-pink-gradient: linear-gradient(180deg, #2d1524 0%, #2d152400 100%);
+    --data-plum-gradient: linear-gradient(180deg, #2a0e3f 0%, #2a0e3f00 100%);
+    --data-purple-gradient: linear-gradient(180deg, #211047 0%, #21104700 100%);
+    --data-red-gradient: linear-gradient(180deg, #3c0614 0%, #3c061400 100%);
+    --data-teal-gradient: linear-gradient(180deg, #041f25 0%, #041f2500 100%);
+    --data-yellow-gradient: linear-gradient(180deg, #2e1a00 0%, #2e1a0000 100%);
     --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
     --focus-outline: 2px solid #1f6feb;
     --overlay-borderColor: var(--borderColor-muted);
@@ -1245,6 +1375,6 @@
     --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409;
     --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
     --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
-    --button-outline-borderColor-selected: var(--button-outline-borderColor-hover);
+    --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
   }
 }

package/dist/css/functional/themes/dark-dimmed.css

@@ -184,14 +184,28 @@
   --data-auburn-color-muted: #271817;
   --data-blue-color-emphasis: #0576ff;
   --data-blue-color-muted: #001a47;
+  --data-brown-color-emphasis: #94774c;
+  --data-brown-color-muted: #241c14;
+  --data-coral-color-emphasis: #e1430e;
+  --data-coral-color-muted: #351008;
   --data-gray-color-emphasis: #576270;
   --data-gray-color-muted: #1c1c1c;
   --data-green-color-emphasis: #2f6f37;
   --data-green-color-muted: #122117;
+  --data-lemon-color-emphasis: #977b0c;
+  --data-lemon-color-muted: #291d00;
+  --data-lime-color-emphasis: #5f892f;
+  --data-lime-color-muted: #141f0f;
+  --data-olive-color-emphasis: #7a8321;
+  --data-olive-color-muted: #171e0b;
   --data-orange-color-emphasis: #984b10;
   --data-orange-color-muted: #311708;
+  --data-pine-color-emphasis: #18915e;
+  --data-pine-color-muted: #082119;
   --data-pink-color-emphasis: #d34591;
   --data-pink-color-muted: #2d1524;
+  --data-plum-color-emphasis: #b643ef;
+  --data-plum-color-muted: #2a0e3f;
   --data-purple-color-emphasis: #975bf1;
   --data-purple-color-muted: #211047;
   --data-red-color-emphasis: #eb3342;
@@ -550,6 +564,40 @@
   --controlTrack-fgColor-rest: var(--fgColor-muted);
   --counter-bgColor-emphasis: var(--bgColor-neutral-emphasis);
   --counter-bgColor-muted: var(--bgColor-neutral-muted);
+  --data-auburn-color-gradientStop-1: var(--data-auburn-color-muted);
+  --data-auburn-color-gradientStop-2: #27181700;
+  --data-blue-color-gradientStop-1: var(--data-blue-color-muted);
+  --data-blue-color-gradientStop-2: #001a4700;
+  --data-brown-color-gradientStop-1: var(--data-brown-color-muted);
+  --data-brown-color-gradientStop-2: #241c1400;
+  --data-coral-color-gradientStop-1: var(--data-coral-color-muted);
+  --data-coral-color-gradientStop-2: #35100800;
+  --data-gray-color-gradientStop-1: var(--data-gray-color-muted);
+  --data-gray-color-gradientStop-2: #1c1c1c00;
+  --data-green-color-gradientStop-1: var(--data-green-color-muted);
+  --data-green-color-gradientStop-2: #12211700;
+  --data-lemon-color-gradientStop-1: var(--data-lemon-color-muted);
+  --data-lemon-color-gradientStop-2: #291d0000;
+  --data-lime-color-gradientStop-1: var(--data-lime-color-muted);
+  --data-lime-color-gradientStop-2: #141f0f00;
+  --data-olive-color-gradientStop-1: var(--data-olive-color-muted);
+  --data-olive-color-gradientStop-2: #171e0b00;
+  --data-orange-color-gradientStop-1: var(--data-orange-color-muted);
+  --data-orange-color-gradientStop-2: #31170800;
+  --data-pine-color-gradientStop-1: var(--data-pine-color-muted);
+  --data-pine-color-gradientStop-2: #08211900;
+  --data-pink-color-gradientStop-1: var(--data-pink-color-muted);
+  --data-pink-color-gradientStop-2: #2d152400;
+  --data-plum-color-gradientStop-1: var(--data-plum-color-muted);
+  --data-plum-color-gradientStop-2: #2a0e3f00;
+  --data-purple-color-gradientStop-1: var(--data-purple-color-muted);
+  --data-purple-color-gradientStop-2: #21104700;
+  --data-red-color-gradientStop-1: var(--data-red-color-muted);
+  --data-red-color-gradientStop-2: #3c061400;
+  --data-teal-color-gradientStop-1: var(--data-teal-color-muted);
+  --data-teal-color-gradientStop-2: #041f2500;
+  --data-yellow-color-gradientStop-1: var(--data-yellow-color-muted);
+  --data-yellow-color-gradientStop-2: #2e1a0000;
   --diffBlob-additionLine-bgColor: var(--bgColor-success-muted);
   --diffBlob-additionLine-fgColor: var(--fgColor-default);
   --diffBlob-additionNum-fgColor: var(--fgColor-default);
@@ -584,9 +632,9 @@
   --shadow-floating-small: 0px 0px 0px 1px #3d444d, 0px 6px 12px -3px #1c212866, 0px 6px 18px 0px #1c212866;
   --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #1c2128;
   --shadow-inset: inset 0px 1px 0px 0px #1c21283d;
-  --shadow-resting-medium: 0px 3px 6px 0px #1c2128cc;
-  --shadow-resting-small: 0px 1px 0px 0px #1c212866;
-  --shadow-resting-xsmall: 0px 1px 0px 0px #1c2128cc;
+  --shadow-resting-medium: 0px 1px 1px 0px #1c212866, 0px 3px 6px 0px #1c2128cc;
+  --shadow-resting-small: 0px 1px 1px 0px #1c212899, 0px 1px 3px 0px #1c212899;
+  --shadow-resting-xsmall: 0px 1px 1px 0px #1c2128cc;
   --tooltip-bgColor: var(--bgColor-emphasis);
   --tooltip-fgColor: var(--fgColor-onEmphasis);
   --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
@@ -619,9 +667,26 @@
   --controlKnob-borderColor-checked: var(--control-checked-bgColor-rest);
   --controlKnob-borderColor-disabled: var(--control-bgColor-disabled);
   --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
+  --data-auburn-gradient: linear-gradient(180deg, #271817 0%, #27181700 100%);
+  --data-blue-gradient: linear-gradient(180deg, #001a47 0%, #001a4700 100%);
+  --data-brown-gradient: linear-gradient(180deg, #241c14 0%, #241c1400 100%);
+  --data-coral-gradient: linear-gradient(180deg, #351008 0%, #35100800 100%);
+  --data-gray-gradient: linear-gradient(180deg, #1c1c1c 0%, #1c1c1c00 100%);
+  --data-green-gradient: linear-gradient(180deg, #122117 0%, #12211700 100%);
+  --data-lemon-gradient: linear-gradient(180deg, #291d00 0%, #291d0000 100%);
+  --data-lime-gradient: linear-gradient(180deg, #141f0f 0%, #141f0f00 100%);
+  --data-olive-gradient: linear-gradient(180deg, #171e0b 0%, #171e0b00 100%);
+  --data-orange-gradient: linear-gradient(180deg, #311708 0%, #31170800 100%);
+  --data-pine-gradient: linear-gradient(180deg, #082119 0%, #08211900 100%);
+  --data-pink-gradient: linear-gradient(180deg, #2d1524 0%, #2d152400 100%);
+  --data-plum-gradient: linear-gradient(180deg, #2a0e3f 0%, #2a0e3f00 100%);
+  --data-purple-gradient: linear-gradient(180deg, #211047 0%, #21104700 100%);
+  --data-red-gradient: linear-gradient(180deg, #3c0614 0%, #3c061400 100%);
+  --data-teal-gradient: linear-gradient(180deg, #041f25 0%, #041f2500 100%);
+  --data-yellow-gradient: linear-gradient(180deg, #2e1a00 0%, #2e1a0000 100%);
   --focus-outline: 2px solid #316dca;
   --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
-  --button-outline-borderColor-selected: var(--button-outline-borderColor-hover);
+  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
 }
 @media (prefers-color-scheme: dark) {
   [data-color-mode="auto"][data-dark-theme="dark_dimmed"],
@@ -808,14 +873,28 @@
     --data-auburn-color-muted: #271817;
     --data-blue-color-emphasis: #0576ff;
     --data-blue-color-muted: #001a47;
+    --data-brown-color-emphasis: #94774c;
+    --data-brown-color-muted: #241c14;
+    --data-coral-color-emphasis: #e1430e;
+    --data-coral-color-muted: #351008;
     --data-gray-color-emphasis: #576270;
     --data-gray-color-muted: #1c1c1c;
     --data-green-color-emphasis: #2f6f37;
     --data-green-color-muted: #122117;
+    --data-lemon-color-emphasis: #977b0c;
+    --data-lemon-color-muted: #291d00;
+    --data-lime-color-emphasis: #5f892f;
+    --data-lime-color-muted: #141f0f;
+    --data-olive-color-emphasis: #7a8321;
+    --data-olive-color-muted: #171e0b;
     --data-orange-color-emphasis: #984b10;
     --data-orange-color-muted: #311708;
+    --data-pine-color-emphasis: #18915e;
+    --data-pine-color-muted: #082119;
     --data-pink-color-emphasis: #d34591;
     --data-pink-color-muted: #2d1524;
+    --data-plum-color-emphasis: #b643ef;
+    --data-plum-color-muted: #2a0e3f;
     --data-purple-color-emphasis: #975bf1;
     --data-purple-color-muted: #211047;
     --data-red-color-emphasis: #eb3342;
@@ -1174,6 +1253,40 @@
     --controlTrack-fgColor-rest: var(--fgColor-muted);
     --counter-bgColor-emphasis: var(--bgColor-neutral-emphasis);
     --counter-bgColor-muted: var(--bgColor-neutral-muted);
+    --data-auburn-color-gradientStop-1: var(--data-auburn-color-muted);
+    --data-auburn-color-gradientStop-2: #27181700;
+    --data-blue-color-gradientStop-1: var(--data-blue-color-muted);
+    --data-blue-color-gradientStop-2: #001a4700;
+    --data-brown-color-gradientStop-1: var(--data-brown-color-muted);
+    --data-brown-color-gradientStop-2: #241c1400;
+    --data-coral-color-gradientStop-1: var(--data-coral-color-muted);
+    --data-coral-color-gradientStop-2: #35100800;
+    --data-gray-color-gradientStop-1: var(--data-gray-color-muted);
+    --data-gray-color-gradientStop-2: #1c1c1c00;
+    --data-green-color-gradientStop-1: var(--data-green-color-muted);
+    --data-green-color-gradientStop-2: #12211700;
+    --data-lemon-color-gradientStop-1: var(--data-lemon-color-muted);
+    --data-lemon-color-gradientStop-2: #291d0000;
+    --data-lime-color-gradientStop-1: var(--data-lime-color-muted);
+    --data-lime-color-gradientStop-2: #141f0f00;
+    --data-olive-color-gradientStop-1: var(--data-olive-color-muted);
+    --data-olive-color-gradientStop-2: #171e0b00;
+    --data-orange-color-gradientStop-1: var(--data-orange-color-muted);
+    --data-orange-color-gradientStop-2: #31170800;
+    --data-pine-color-gradientStop-1: var(--data-pine-color-muted);
+    --data-pine-color-gradientStop-2: #08211900;
+    --data-pink-color-gradientStop-1: var(--data-pink-color-muted);
+    --data-pink-color-gradientStop-2: #2d152400;
+    --data-plum-color-gradientStop-1: var(--data-plum-color-muted);
+    --data-plum-color-gradientStop-2: #2a0e3f00;
+    --data-purple-color-gradientStop-1: var(--data-purple-color-muted);
+    --data-purple-color-gradientStop-2: #21104700;
+    --data-red-color-gradientStop-1: var(--data-red-color-muted);
+    --data-red-color-gradientStop-2: #3c061400;
+    --data-teal-color-gradientStop-1: var(--data-teal-color-muted);
+    --data-teal-color-gradientStop-2: #041f2500;
+    --data-yellow-color-gradientStop-1: var(--data-yellow-color-muted);
+    --data-yellow-color-gradientStop-2: #2e1a0000;
     --diffBlob-additionLine-bgColor: var(--bgColor-success-muted);
     --diffBlob-additionLine-fgColor: var(--fgColor-default);
     --diffBlob-additionNum-fgColor: var(--fgColor-default);
@@ -1208,9 +1321,9 @@
     --shadow-floating-small: 0px 0px 0px 1px #3d444d, 0px 6px 12px -3px #1c212866, 0px 6px 18px 0px #1c212866;
     --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #1c2128;
     --shadow-inset: inset 0px 1px 0px 0px #1c21283d;
-    --shadow-resting-medium: 0px 3px 6px 0px #1c2128cc;
-    --shadow-resting-small: 0px 1px 0px 0px #1c212866;
-    --shadow-resting-xsmall: 0px 1px 0px 0px #1c2128cc;
+    --shadow-resting-medium: 0px 1px 1px 0px #1c212866, 0px 3px 6px 0px #1c2128cc;
+    --shadow-resting-small: 0px 1px 1px 0px #1c212899, 0px 1px 3px 0px #1c212899;
+    --shadow-resting-xsmall: 0px 1px 1px 0px #1c2128cc;
     --tooltip-bgColor: var(--bgColor-emphasis);
     --tooltip-fgColor: var(--fgColor-onEmphasis);
     --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
@@ -1243,8 +1356,25 @@
     --controlKnob-borderColor-checked: var(--control-checked-bgColor-rest);
     --controlKnob-borderColor-disabled: var(--control-bgColor-disabled);
     --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
+    --data-auburn-gradient: linear-gradient(180deg, #271817 0%, #27181700 100%);
+    --data-blue-gradient: linear-gradient(180deg, #001a47 0%, #001a4700 100%);
+    --data-brown-gradient: linear-gradient(180deg, #241c14 0%, #241c1400 100%);
+    --data-coral-gradient: linear-gradient(180deg, #351008 0%, #35100800 100%);
+    --data-gray-gradient: linear-gradient(180deg, #1c1c1c 0%, #1c1c1c00 100%);
+    --data-green-gradient: linear-gradient(180deg, #122117 0%, #12211700 100%);
+    --data-lemon-gradient: linear-gradient(180deg, #291d00 0%, #291d0000 100%);
+    --data-lime-gradient: linear-gradient(180deg, #141f0f 0%, #141f0f00 100%);
+    --data-olive-gradient: linear-gradient(180deg, #171e0b 0%, #171e0b00 100%);
+    --data-orange-gradient: linear-gradient(180deg, #311708 0%, #31170800 100%);
+    --data-pine-gradient: linear-gradient(180deg, #082119 0%, #08211900 100%);
+    --data-pink-gradient: linear-gradient(180deg, #2d1524 0%, #2d152400 100%);
+    --data-plum-gradient: linear-gradient(180deg, #2a0e3f 0%, #2a0e3f00 100%);
+    --data-purple-gradient: linear-gradient(180deg, #211047 0%, #21104700 100%);
+    --data-red-gradient: linear-gradient(180deg, #3c0614 0%, #3c061400 100%);
+    --data-teal-gradient: linear-gradient(180deg, #041f25 0%, #041f2500 100%);
+    --data-yellow-gradient: linear-gradient(180deg, #2e1a00 0%, #2e1a0000 100%);
     --focus-outline: 2px solid #316dca;
     --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
-    --button-outline-borderColor-selected: var(--button-outline-borderColor-hover);
+    --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
   }
 }