@primer/primitives 0.0.0-20241219081703 → 0.0.0-20241219103104

package/dist/build/transformers/colorToHex.js

@@ -13,11 +13,11 @@ export const colorToHex = {
     type: 'value',
     transitive: true,
     filter: isColor,
-    transform: (token) => {
+    transform: (token, config) => {
         const alphaValue = token.alpha;
         if (alphaValue === null || alphaValue === undefined) {
             return toHex(getTokenValue(token));
         }
-        return toHex(alpha(getTokenValue(token), alphaValue, token));
+        return toHex(alpha(getTokenValue(token), alphaValue, token, config));
     },
 };

package/dist/build/transformers/colorToRgbAlpha.js

@@ -12,9 +12,9 @@ export const colorToRgbAlpha = {
     type: 'value',
     transitive: true,
     filter: isColorWithAlpha,
-    transform: (token) => {
+    transform: (token, config) => {
         if (token.alpha === null)
             return getTokenValue(token);
-        return alpha(getTokenValue(token), token.alpha, token);
+        return alpha(getTokenValue(token), token.alpha, token, config);
     },
 };

package/dist/build/transformers/shadowToCss.js

@@ -14,7 +14,7 @@ export const shadowToCss = {
     type: 'value',
     transitive: true,
     filter: isShadow,
-    transform: (token) => {
+    transform: (token, config) => {
         // extract value
         const value = getTokenValue(token);
         const valueProp = token.$value ? '$value' : 'value';
@@ -27,7 +27,7 @@ export const shadowToCss = {
                 return shadow;
             checkRequiredTokenProperties(shadow, ['color', 'offsetX', 'offsetY', 'blur', 'spread']);
             /*css box shadow:  inset? | offset-x | offset-y | blur-radius | spread-radius | color */
-            return `${shadow.inset === true ? 'inset ' : ''}${shadow.offsetX} ${shadow.offsetY} ${shadow.blur} ${shadow.spread} ${toHex(alpha(getTokenValue(Object.assign(Object.assign({}, token), { [valueProp]: shadow }), 'color'), shadow.alpha || 1, token))}`;
+            return `${shadow.inset === true ? 'inset ' : ''}${shadow.offsetX} ${shadow.offsetY} ${shadow.blur} ${shadow.spread} ${toHex(alpha(getTokenValue(Object.assign(Object.assign({}, token), { [valueProp]: shadow }), 'color'), shadow.alpha || 1, token, config))}`;
         })
             .join(', ');
     },

package/dist/build/transformers/utilities/alpha.d.ts

@@ -1,4 +1,4 @@
-import type { TransformedToken } from 'style-dictionary/types';
+import type { PlatformConfig, TransformedToken } from 'style-dictionary/types';
 /**
  * alpha
  * @description takes a colors string like hex or rgba and returns an rgba color with the specified alpha value
@@ -6,4 +6,4 @@ import type { TransformedToken } from 'style-dictionary/types';
  * @param desiredAlpha number
  * @returns rgba value
  */
-export declare const alpha: (color: string, desiredAlpha: number, token?: TransformedToken) => string;
+export declare const alpha: (color: string, desiredAlpha: number, token?: TransformedToken, config?: PlatformConfig) => string;

package/dist/build/transformers/utilities/alpha.js

@@ -1,4 +1,5 @@
 import { rgba, parseToRgba } from 'color2k';
+import { log } from '~/src/utilities/log.js';
 /**
  * alpha
  * @description takes a colors string like hex or rgba and returns an rgba color with the specified alpha value
@@ -6,11 +7,10 @@ import { rgba, parseToRgba } from 'color2k';
  * @param desiredAlpha number
  * @returns rgba value
  */
-export const alpha = (color, desiredAlpha, token) => {
+export const alpha = (color, desiredAlpha, token, config) => {
     const [r, g, b, a] = parseToRgba(color);
     if (a < 1 && desiredAlpha < 1) {
-        // eslint-disable-next-line no-console
-        console.warn(`🚨 You are setting an alpha value of "${desiredAlpha}" for a color with an alpha value (${color}). The previous alpha value will be disregarded as if the color would have been 100% opaque.${token !== undefined ? `\n ↳ Token: "${token.name}" in file: "${token.filePath}"` : ''}`);
+        log.info(`🚨 You are setting an alpha value of "${desiredAlpha}" for a color with an alpha value (${color}). The previous alpha value will be disregarded as if the color would have been 100% opaque.${token !== undefined ? `\n ↳ Token: "${token.name}" in file: "${token.filePath}"` : ''}`, config);
     }
     return rgba(r, g, b, desiredAlpha);
 };

package/dist/build/utilities/log.d.ts

@@ -0,0 +1,6 @@
+import type { PlatformConfig } from 'style-dictionary/types';
+export declare const log: {
+    info: (message: string, config?: PlatformConfig) => void;
+    warning: (message: string, config?: PlatformConfig) => void;
+    error: (message: string, config?: PlatformConfig) => void;
+};

package/dist/build/utilities/log.js

@@ -0,0 +1,34 @@
+const logMessage = (message, type = 'warning', config) => {
+    var _a, _b, _c, _d, _e;
+    // early return if verbosity is silent
+    if (((_a = config === null || config === void 0 ? void 0 : config.log) === null || _a === void 0 ? void 0 : _a.verbosity) === 'silent' && type !== 'error') {
+        return;
+    }
+    // early return if verbosity is default and type is info
+    if (((_b = config === null || config === void 0 ? void 0 : config.log) === null || _b === void 0 ? void 0 : _b.verbosity) === 'default' && type === 'info') {
+        return;
+    }
+    // early return
+    if ((((_c = config === null || config === void 0 ? void 0 : config.log) === null || _c === void 0 ? void 0 : _c.warnings) === 'disabled' || ((_d = config === null || config === void 0 ? void 0 : config.log) === null || _d === void 0 ? void 0 : _d.warnings) === 'warn') && type === 'info') {
+        return;
+    }
+    // early return
+    if (((_e = config === null || config === void 0 ? void 0 : config.log) === null || _e === void 0 ? void 0 : _e.warnings) === 'disabled' && type === 'warning') {
+        return;
+    }
+    if (type === 'warning') {
+        // eslint-disable-next-line no-console
+        return console.warn(message);
+    }
+    if (type === 'error') {
+        // eslint-disable-next-line no-console
+        return console.error(message);
+    }
+    // eslint-disable-next-line no-console
+    console.log(message);
+};
+export const log = {
+    info: (message, config) => logMessage(message, 'info', config),
+    warning: (message, config) => logMessage(message, 'warning', config),
+    error: (message, config) => logMessage(message, 'error', config),
+};

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

@@ -591,7 +591,7 @@
   --controlTrack-fgColor-disabled: var(--fgColor-onEmphasis);
   --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
   --focus-outline: 2px solid #1f6feb;
-  --overlay-borderColor: #3d444d;
+  --overlay-borderColor: var(--borderColor-muted);
   --tooltip-fgColor: var(--fgColor-onEmphasis);
   --border-neutral-muted: 0.0625rem solid #3d444db3;
   --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
@@ -1197,7 +1197,7 @@
     --controlTrack-fgColor-disabled: var(--fgColor-onEmphasis);
     --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
     --focus-outline: 2px solid #1f6feb;
-    --overlay-borderColor: #3d444d;
+    --overlay-borderColor: var(--borderColor-muted);
     --tooltip-fgColor: var(--fgColor-onEmphasis);
     --border-neutral-muted: 0.0625rem solid #3d444db3;
     --button-danger-borderColor-active: var(--button-danger-borderColor-hover);

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

@@ -591,7 +591,7 @@
   --controlTrack-fgColor-disabled: var(--fgColor-onEmphasis);
   --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
   --focus-outline: 2px solid #1f6feb;
-  --overlay-borderColor: #3d444d;
+  --overlay-borderColor: var(--borderColor-muted);
   --tooltip-fgColor: var(--fgColor-onEmphasis);
   --border-neutral-muted: 0.0625rem solid #3d444db3;
   --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
@@ -1197,7 +1197,7 @@
     --controlTrack-fgColor-disabled: var(--fgColor-onEmphasis);
     --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
     --focus-outline: 2px solid #1f6feb;
-    --overlay-borderColor: #3d444d;
+    --overlay-borderColor: var(--borderColor-muted);
     --tooltip-fgColor: var(--fgColor-onEmphasis);
     --border-neutral-muted: 0.0625rem solid #3d444db3;
     --button-danger-borderColor-active: var(--button-danger-borderColor-hover);

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

@@ -591,7 +591,7 @@
   --controlTrack-fgColor-disabled: var(--fgColor-onEmphasis);
   --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
   --focus-outline: 2px solid #1f6feb;
-  --overlay-borderColor: #3d444d;
+  --overlay-borderColor: var(--borderColor-muted);
   --tooltip-fgColor: var(--fgColor-onEmphasis);
   --border-neutral-muted: 0.0625rem solid #3d444db3;
   --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
@@ -1197,7 +1197,7 @@
     --controlTrack-fgColor-disabled: var(--fgColor-onEmphasis);
     --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
     --focus-outline: 2px solid #1f6feb;
-    --overlay-borderColor: #3d444d;
+    --overlay-borderColor: var(--borderColor-muted);
     --tooltip-fgColor: var(--fgColor-onEmphasis);
     --border-neutral-muted: 0.0625rem solid #3d444db3;
     --button-danger-borderColor-active: var(--button-danger-borderColor-hover);

package/dist/docs/functional/themes/dark-colorblind.json

@@ -12338,20 +12338,11 @@
         "collection": "mode",
         "group": "component (internal)",
         "scopes": ["bgColor"]
-      },
-      "org.primer.overrides": {
-        "dark": {
-          "$value": "#151b23",
-          "alpha": 0.95,
-          "filePath": "src/tokens/component/header.json5",
-          "isSource": true,
-          "$type": "color"
-        }
       }
     },
-    "filePath": "src/tokens/component/header.json5",
-    "isSource": true,
     "alpha": 0.95,
+    "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
+    "isSource": true,
     "original": {
       "$value": "{base.color.neutral.2}",
       "$type": "color",
@@ -12360,15 +12351,6 @@
           "collection": "mode",
           "group": "component (internal)",
           "scopes": ["bgColor"]
-        },
-        "org.primer.overrides": {
-          "dark": {
-            "$value": "{base.color.neutral.2}",
-            "alpha": 0.95,
-            "filePath": "src/tokens/component/header.json5",
-            "isSource": true,
-            "$type": "color"
-          }
         }
       },
       "alpha": 0.95
@@ -12388,7 +12370,7 @@
         "scopes": ["borderColor"]
       }
     },
-    "filePath": "src/tokens/component/header.json5",
+    "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
       "$value": "{base.color.neutral.8}",
@@ -12414,13 +12396,10 @@
         "collection": "mode",
         "group": "component (internal)",
         "scopes": ["fgColor"]
-      },
-      "org.primer.overrides": {
-        "dark": "#ffffff"
       }
     },
     "alpha": 0.7,
-    "filePath": "src/tokens/component/header.json5",
+    "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
       "$value": "{base.color.neutral.13}",
@@ -12430,9 +12409,6 @@
           "collection": "mode",
           "group": "component (internal)",
           "scopes": ["fgColor"]
-        },
-        "org.primer.overrides": {
-          "dark": "{base.color.neutral.13}"
         }
       },
       "alpha": 0.7
@@ -12450,12 +12426,9 @@
         "collection": "mode",
         "group": "component (internal)",
         "scopes": ["fgColor"]
-      },
-      "org.primer.overrides": {
-        "dark": "#f0f6fc"
       }
     },
-    "filePath": "src/tokens/component/header.json5",
+    "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
       "$value": "{base.color.neutral.12}",
@@ -12465,9 +12438,6 @@
           "collection": "mode",
           "group": "component (internal)",
           "scopes": ["fgColor"]
-        },
-        "org.primer.overrides": {
-          "dark": "{base.color.neutral.12}"
         }
       }
     },
@@ -12484,12 +12454,9 @@
         "collection": "mode",
         "group": "component (internal)",
         "scopes": ["bgColor"]
-      },
-      "org.primer.overrides": {
-        "dark": "#0d1117"
       }
     },
-    "filePath": "src/tokens/component/headerSerach.json5",
+    "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
       "$value": "{base.color.neutral.1}",
@@ -12499,9 +12466,6 @@
           "collection": "mode",
           "group": "component (internal)",
           "scopes": ["bgColor"]
-        },
-        "org.primer.overrides": {
-          "dark": "{base.color.neutral.1}"
         }
       }
     },
@@ -12518,12 +12482,9 @@
         "collection": "mode",
         "group": "component (internal)",
         "scopes": ["borderColor"]
-      },
-      "org.primer.overrides": {
-        "dark": "#2a313c"
       }
     },
-    "filePath": "src/tokens/component/headerSerach.json5",
+    "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
       "$value": "{base.color.neutral.5}",
@@ -12533,9 +12494,6 @@
           "collection": "mode",
           "group": "component (internal)",
           "scopes": ["borderColor"]
-        },
-        "org.primer.overrides": {
-          "dark": "{base.color.neutral.5}"
         }
       }
     },
@@ -15820,16 +15778,10 @@
         "collection": "mode",
         "group": "component (internal)",
         "scopes": ["bgColor"]
-      },
-      "org.primer.overrides": {
-        "dark": "#212830",
-        "dark-dimmed": "#262c36",
-        "light-high-contrast": "#d1d7e0",
-        "dark-high-contrast": "#d1d7e0"
       }
     },
     "alpha": 0.4,
-    "filePath": "src/tokens/component/overlay.json5",
+    "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
       "$value": "{base.color.neutral.3}",
@@ -15839,12 +15791,6 @@
           "collection": "mode",
           "group": "component (internal)",
           "scopes": ["bgColor"]
-        },
-        "org.primer.overrides": {
-          "dark": "{base.color.neutral.3}",
-          "dark-dimmed": "{base.color.neutral.4}",
-          "light-high-contrast": "{base.color.neutral.11}",
-          "dark-high-contrast": "{base.color.neutral.11}"
         }
       },
       "alpha": 0.4
@@ -15862,13 +15808,9 @@
         "collection": "mode",
         "group": "component (internal)",
         "scopes": ["bgColor"]
-      },
-      "org.primer.overrides": {
-        "dark": "#151b23",
-        "dark-dimmed": "#2a313c"
       }
     },
-    "filePath": "src/tokens/component/overlay.json5",
+    "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
       "$value": "{bgColor.muted}",
@@ -15878,10 +15820,6 @@
           "collection": "mode",
           "group": "component (internal)",
           "scopes": ["bgColor"]
-        },
-        "org.primer.overrides": {
-          "dark": "{bgColor.muted}",
-          "dark-dimmed": "{base.color.neutral.5}"
         }
       }
     },
@@ -15897,36 +15835,9 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "component (internal)"
-      },
-      "org.primer.overrides": {
-        "dark": {
-          "alpha": 1
-        },
-        "dark-dimmed": {
-          "$value": "#3d444d",
-          "alpha": 0.7,
-          "filePath": "src/tokens/component/overlay.json5",
-          "isSource": true,
-          "$type": "color"
-        },
-        "light-high-contrast": {
-          "alpha": 1,
-          "$value": "#3d444d",
-          "filePath": "src/tokens/component/overlay.json5",
-          "isSource": true,
-          "$type": "color"
-        },
-        "dark-high-contrast": {
-          "$value": "#3d444d",
-          "alpha": 1,
-          "filePath": "src/tokens/component/overlay.json5",
-          "isSource": true,
-          "$type": "color"
-        }
       }
     },
-    "alpha": 1,
-    "filePath": "src/tokens/component/overlay.json5",
+    "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
       "$value": "{borderColor.muted}",
@@ -15935,41 +15846,14 @@
         "org.primer.figma": {
           "collection": "mode",
           "group": "component (internal)"
-        },
-        "org.primer.overrides": {
-          "dark": {
-            "alpha": 1
-          },
-          "dark-dimmed": {
-            "$value": "{base.color.neutral.7}",
-            "alpha": 0.7,
-            "filePath": "src/tokens/component/overlay.json5",
-            "isSource": true,
-            "$type": "color"
-          },
-          "light-high-contrast": {
-            "alpha": 1,
-            "$value": "{borderColor.default}",
-            "filePath": "src/tokens/component/overlay.json5",
-            "isSource": true,
-            "$type": "color"
-          },
-          "dark-high-contrast": {
-            "$value": "{borderColor.default}",
-            "alpha": 1,
-            "filePath": "src/tokens/component/overlay.json5",
-            "isSource": true,
-            "$type": "color"
-          }
         }
-      },
-      "alpha": 1
+      }
     },
     "name": "overlay-borderColor",
     "attributes": {},
     "path": ["overlay", "borderColor"],
     "key": "{overlay.borderColor}",
-    "value": "#3d444d",
+    "value": "#3d444db3",
     "type": "color"
   },
   "page-header-bgColor": {
@@ -16700,29 +16584,10 @@
         "collection": "mode",
         "group": "component",
         "scopes": ["bgColor"]
-      },
-      "org.primer.overrides": {
-        "dark": {
-          "alpha": 0.2
-        },
-        "light-high-contrast": {
-          "$value": "#2a313c",
-          "alpha": 1,
-          "filePath": "src/tokens/component/skeletonLoader.json5",
-          "isSource": true,
-          "$type": "color"
-        },
-        "dark-high-contrast": {
-          "$value": "#2a313c",
-          "alpha": 1,
-          "filePath": "src/tokens/component/skeletonLoader.json5",
-          "isSource": true,
-          "$type": "color"
-        }
       }
     },
     "alpha": 0.2,
-    "filePath": "src/tokens/component/skeletonLoader.json5",
+    "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
       "$value": "{base.color.neutral.8}",
@@ -16732,25 +16597,6 @@
           "collection": "mode",
           "group": "component",
           "scopes": ["bgColor"]
-        },
-        "org.primer.overrides": {
-          "dark": {
-            "alpha": 0.2
-          },
-          "light-high-contrast": {
-            "$value": "{base.color.neutral.5}",
-            "alpha": 1,
-            "filePath": "src/tokens/component/skeletonLoader.json5",
-            "isSource": true,
-            "$type": "color"
-          },
-          "dark-high-contrast": {
-            "$value": "{base.color.neutral.5}",
-            "alpha": 1,
-            "filePath": "src/tokens/component/skeletonLoader.json5",
-            "isSource": true,
-            "$type": "color"
-          }
         }
       },
       "alpha": 0.2