@primer/primitives 10.2.0 → 10.3.0-rc.22c9c6cf

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) {
+        if (alphaValue === null || alphaValue === undefined || alphaValue === 1) {
             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/figmaAttributes.js

@@ -1,3 +1,4 @@
+import { asArray } from '../utilities/asArray.js';
 const figmaScopes = {
     all: ['ALL_SCOPES'],
     radius: ['CORNER_RADIUS'],
@@ -45,7 +46,7 @@ export const figmaAttributes = {
         var _a, _b;
         const { modeOverride, collection, scopes, group, codeSyntax } = ((_a = token.$extensions) === null || _a === void 0 ? void 0 : _a['org.primer.figma']) || {};
         return {
-            mode: ((_b = platform.options) === null || _b === void 0 ? void 0 : _b.theme) || modeOverride || 'default',
+            mode: asArray((_b = platform.options) === null || _b === void 0 ? void 0 : _b.theme)[0] || modeOverride || 'default',
             collection,
             group: group || collection,
             scopes: getScopes(scopes),

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 '../../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/types/styleDictionaryConfigGenerator.d.ts

@@ -4,7 +4,7 @@ export type ConfigGeneratorOptions = {
   buildPath: string
   prefix?: string
   themed?: boolean
-  theme?: string
+  theme?: string | [string | undefined, string | undefined]
 }
 
 export type StyleDictionaryConfigGenerator = (

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

@@ -0,0 +1 @@
+export declare const asArray: (item: unknown) => any[];

package/dist/build/utilities/asArray.js

@@ -0,0 +1 @@
+export const asArray = (item) => (Array.isArray(item) ? item : [item]).filter(Boolean);

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/size/border.css

@@ -1,16 +1,16 @@
 :root {
-  --borderRadius-default: 0.375rem;
   --borderRadius-full: 624.9375rem; /* Use this border radius for pill shaped elements */
   --borderRadius-large: 0.75rem;
   --borderRadius-medium: 0.375rem;
   --borderRadius-small: 0.1875rem;
-  --borderWidth-default: 0.0625rem;
   --borderWidth-thick: 0.125rem;
   --borderWidth-thicker: 0.25rem;
   --borderWidth-thin: 0.0625rem;
-  --boxShadow-thick: inset 0 0 0 0.125rem;
-  --boxShadow-thicker: inset 0 0 0 0.25rem;
-  --boxShadow-thin: inset 0 0 0 0.0625rem; /* Thin shadow for borders */
   --outline-focus-offset: -0.125rem;
   --outline-focus-width: 0.125rem;
+  --borderRadius-default: var(--borderRadius-medium);
+  --borderWidth-default: var(--borderWidth-thin);
+  --boxShadow-thick: inset 0 0 0 var(--borderWidth-thick);
+  --boxShadow-thicker: inset 0 0 0 var(--borderWidth-thicker);
+  --boxShadow-thin: inset 0 0 0 var(--borderWidth-thin); /* Thin shadow for borders */
 }

package/dist/css/functional/size/size.css

@@ -1,13 +1,26 @@
 :root {
+  --control-large-paddingBlock: 0.625rem;
+  --control-medium-paddingBlock: 0.375rem;
+  --control-xlarge-paddingBlock: 0.875rem;
+  --control-xsmall-paddingBlock: 0.125rem;
+  --overlay-height-large: 27rem;
+  --overlay-height-medium: 20rem;
+  --overlay-height-small: 16rem;
+  --overlay-height-xlarge: 37.5rem;
+  --overlay-offset: 0.25rem;
+  --overlay-width-large: 40rem;
+  --overlay-width-medium: 30rem;
+  --overlay-width-small: 20rem;
+  --overlay-width-xlarge: 60rem;
+  --overlay-width-xsmall: 12rem;
+  --spinner-strokeWidth-default: 0.125rem;
   --control-large-gap: 0.5rem;
   --control-large-lineBoxHeight: 1.25rem;
-  --control-large-paddingBlock: 0.625rem;
   --control-large-paddingInline-normal: 0.75rem;
   --control-large-paddingInline-spacious: 1rem;
   --control-large-size: 2.5rem;
   --control-medium-gap: 0.5rem;
   --control-medium-lineBoxHeight: 1.25rem;
-  --control-medium-paddingBlock: 0.375rem;
   --control-medium-paddingInline-condensed: 0.5rem;
   --control-medium-paddingInline-normal: 0.75rem;
   --control-medium-paddingInline-spacious: 1rem;
@@ -22,13 +35,11 @@
   --control-small-size: 1.75rem;
   --control-xlarge-gap: 0.5rem;
   --control-xlarge-lineBoxHeight: 1.25rem;
-  --control-xlarge-paddingBlock: 0.875rem;
   --control-xlarge-paddingInline-normal: 0.75rem;
   --control-xlarge-paddingInline-spacious: 1rem;
   --control-xlarge-size: 3rem;
   --control-xsmall-gap: 0.25rem;
   --control-xsmall-lineBoxHeight: 1.25rem;
-  --control-xsmall-paddingBlock: 0.125rem;
   --control-xsmall-paddingInline-condensed: 0.25rem;
   --control-xsmall-paddingInline-normal: 0.5rem;
   --control-xsmall-paddingInline-spacious: 0.75rem;
@@ -41,24 +52,13 @@
   --controlStack-small-gap-condensed: 0.5rem;
   --controlStack-small-gap-spacious: 1rem;
   --overlay-borderRadius: 0.375rem;
-  --overlay-height-large: 27rem;
-  --overlay-height-medium: 20rem;
-  --overlay-height-small: 16rem;
-  --overlay-height-xlarge: 37.5rem;
-  --overlay-offset: 0.25rem;
   --overlay-padding-condensed: 0.5rem;
   --overlay-padding-normal: 1rem;
   --overlay-paddingBlock-condensed: 0.25rem;
   --overlay-paddingBlock-normal: 0.75rem;
-  --overlay-width-large: 40rem;
-  --overlay-width-medium: 30rem;
-  --overlay-width-small: 20rem;
-  --overlay-width-xlarge: 60rem;
-  --overlay-width-xsmall: 12rem;
   --spinner-size-large: 4rem;
   --spinner-size-medium: 2rem;
   --spinner-size-small: 1rem;
-  --spinner-strokeWidth-default: 0.125rem;
   --stack-gap-condensed: 0.5rem;
   --stack-gap-normal: 1rem;
   --stack-gap-spacious: 1.5rem;

package/dist/css/functional/size/viewport.css

@@ -1,6 +1,6 @@
+@custom-media --viewportRange-landscape (orientation: landscape);
 @custom-media --viewportRange-narrow (max-width: calc(48rem - 0.02px));
 @custom-media --viewportRange-narrowLandscape (max-width: calc(63.25rem - 0.02px) and (max-height: calc(34rem - 0.02px)) and (orientation: landscape));
+@custom-media --viewportRange-portrait (orientation: portrait);
 @custom-media --viewportRange-regular (min-width: 48rem);
 @custom-media --viewportRange-wide (min-width: 87.5rem);
-@custom-media --viewportRange-portrait (orientation: portrait);
-@custom-media --viewportRange-landscape (orientation: landscape);