@impulse-ui-native/theme 11.4.0 → 14.0.0

package/dist/index.d.mts

@@ -25,7 +25,7 @@ export { BorderProps } from './types/border.types.mjs';
 export { ColorProps } from './types/color.types.mjs';
 export { ChartColorPalette } from './types/chart.types.mjs';
 export { ChartsLabelTokens, ChartsTokens } from './types/charts-tokens.types.mjs';
-export { ActionState, ActionVariant, ActionVisualState, AvailabilityState, AvailabilityVisualState, ComponentSize, ComponentVariant, ControlState, ControlVisualState, DisplayVariant, FieldState, FieldVariant, FieldVisualState, SelectionItemState, SelectionItemVisualState, SelectionState, SelectionVariant, SelectionVisualState, VisualStateTokens } from './types/components.types.mjs';
+export { ActionState, ActionVariant, ActionVisualState, AvailabilityState, AvailabilityVisualState, ButtonTone, ComponentSize, ComponentTone, ComponentVariant, ControlState, ControlVisualState, DisplayVariant, FieldState, FieldTone, FieldVariant, FieldVisualState, SelectionItemState, SelectionItemVisualState, SelectionState, SelectionVariant, SelectionVisualState, VisualStateTokens } from './types/components.types.mjs';
 export { DimensionProps } from './types/dimension.types.mjs';
 export { FlexProps } from './types/flex.types.mjs';
 export { ShadowIntensity, ShadowLevel, ShadowPosition, ShadowProps, ShadowScaleTokens } from './types/shadow.types.mjs';
@@ -40,7 +40,7 @@ export { AvatarSizeTokens, AvatarStatus, AvatarTokens, AvatarVariantTokens } fro
 export { BadgeColorTokens, BadgeSizeTokens, BadgeTokens, BadgeTone, BadgeVariantTokens } from './types/badge-tokens.types.mjs';
 export { CardSectionTokens, CardTokens } from './types/card-tokens.types.mjs';
 export { CheckboxAppearanceTokens, CheckboxSizeTokens, CheckboxTokens, CheckboxVariantTokens } from './types/checkbox-tokens.types.mjs';
-export { TagAppearanceTokens, TagColor, TagColorTokens, TagSizeTokens, TagTokens, TagVariantTokens } from './types/tag-tokens.types.mjs';
+export { TagAppearanceTokens, TagSizeTokens, TagTokens, TagTone, TagToneTokens, TagVariantTokens } from './types/tag-tokens.types.mjs';
 export { ControlAddonAppearanceTokens, ControlAddonTokens, ControlAddonVariantTokens, ControlContainerAppearanceTokens, ControlContainerSizeTokens, ControlContainerTokens, ControlContainerVariantTokens, ControlErrorTokens, ControlInputAppearanceTokens, ControlInputSizeTokens, ControlInputTokens, ControlInputVariantTokens, ControlLabelAppearanceTokens, ControlLabelTokens } from './types/control-tokens.types.mjs';
 export { SelectOptionAppearanceTokens, SelectOptionTokens, SelectTokens } from './types/select-tokens.types.mjs';
 export { DatePickerFlyoutTokens, DatetimePickerCalendarTokens, DatetimePickerDayAppearanceTokens, DatetimePickerDayState, DatetimePickerDayTokens, DatetimePickerDayVisualState, DatetimePickerFlyoutActionsTokens, DatetimePickerFlyoutTokens, DatetimePickerQuickDateOptionsTokens, DatetimePickerTokens, DatetimePickerVisibleDateSelectTokens, DatetimeRangePickerFlyoutTokens } from './types/datetime-picker-tokens.types.mjs';

package/dist/theme/create-avatar-tokens.js

@@ -3,6 +3,11 @@ function createAvatarTokens(tokens) {
   const primaryContrast = tokens.colors.primary.contrast;
   const secondary = tokens.colors.secondary.value;
   const secondaryContrast = tokens.colors.secondary.contrast;
+  const neutral = tokens.colors.text.secondary;
+  const neutralContrast = tokens.colors.text.inverse;
+  const neutralSoft = tokens.colors.surface.subtle.value;
+  const neutralSoftContrast = tokens.colors.text.primary;
+  const subtle = tokens.colors.subtle.value;
   return {
     borderWidth: tokens.borderSize.sm,
     fontFamily: tokens.fontFamily.normal[tokens.fontWeight.semiBold],
@@ -33,21 +38,57 @@ function createAvatarTokens(tokens) {
       away: tokens.colors.feedback.warning.value,
       busy: tokens.colors.feedback.error.value
     },
-    variants: {
-      filled: {
-        backgroundColor: primary,
-        borderColor: primary,
-        color: primaryContrast
+    colors: {
+      neutral: {
+        filled: {
+          backgroundColor: neutral,
+          borderColor: neutral,
+          color: neutralContrast
+        },
+        outlined: {
+          backgroundColor: "transparent",
+          borderColor: neutral,
+          color: neutral
+        },
+        soft: {
+          backgroundColor: neutralSoft,
+          borderColor: neutralSoft,
+          color: neutralSoftContrast
+        }
       },
-      outlined: {
-        backgroundColor: "transparent",
-        borderColor: primary,
-        color: primary
+      primary: {
+        filled: {
+          backgroundColor: primary,
+          borderColor: primary,
+          color: primaryContrast
+        },
+        outlined: {
+          backgroundColor: "transparent",
+          borderColor: primary,
+          color: primary
+        },
+        soft: {
+          backgroundColor: secondary,
+          borderColor: secondary,
+          color: secondaryContrast
+        }
       },
-      soft: {
-        backgroundColor: secondary,
-        borderColor: secondary,
-        color: secondaryContrast
+      secondary: {
+        filled: {
+          backgroundColor: secondary,
+          borderColor: secondary,
+          color: secondaryContrast
+        },
+        outlined: {
+          backgroundColor: "transparent",
+          borderColor: secondaryContrast,
+          color: secondaryContrast
+        },
+        soft: {
+          backgroundColor: subtle,
+          borderColor: subtle,
+          color: secondaryContrast
+        }
       }
     }
   };

package/dist/theme/create-avatar-tokens.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/create-avatar-tokens.ts"],"sourcesContent":["import type { AvatarTokens, PrimitiveThemeTokens } from \"../types\";\n\nexport function createAvatarTokens(tokens: PrimitiveThemeTokens): AvatarTokens {\n  const primary = tokens.colors.primary.value;\n  const primaryContrast = tokens.colors.primary.contrast;\n  const secondary = tokens.colors.secondary.value;\n  const secondaryContrast = tokens.colors.secondary.contrast;\n\n  return {\n    borderWidth: tokens.borderSize.sm,\n    fontFamily: tokens.fontFamily.normal[tokens.fontWeight.semiBold],\n    sizes: {\n      small: {\n        fontSize: tokens.fontSize.xs,\n        size: 32,\n        statusBorderWidth: tokens.borderSize.sm,\n        statusSize: 8,\n      },\n      medium: {\n        fontSize: tokens.fontSize.xsm,\n        size: 40,\n        statusBorderWidth: tokens.borderSize.md,\n        statusSize: 10,\n      },\n      large: {\n        fontSize: tokens.fontSize.sm,\n        size: 48,\n        statusBorderWidth: tokens.borderSize.md,\n        statusSize: 12,\n      },\n    },\n    statusBorderColor: tokens.colors.surface.elevated.value,\n    statusColors: {\n      online: tokens.colors.feedback.success.value,\n      offline: tokens.colors.text.disabled,\n      away: tokens.colors.feedback.warning.value,\n      busy: tokens.colors.feedback.error.value,\n    },\n    variants: {\n      filled: {\n        backgroundColor: primary,\n        borderColor: primary,\n        color: primaryContrast,\n      },\n      outlined: {\n        backgroundColor: \"transparent\",\n        borderColor: primary,\n        color: primary,\n      },\n      soft: {\n        backgroundColor: secondary,\n        borderColor: secondary,\n        color: secondaryContrast,\n      },\n    },\n  };\n}\n"],"mappings":"AAEO,SAAS,mBAAmB,QAA4C;AAC7E,QAAM,UAAU,OAAO,OAAO,QAAQ;AACtC,QAAM,kBAAkB,OAAO,OAAO,QAAQ;AAC9C,QAAM,YAAY,OAAO,OAAO,UAAU;AAC1C,QAAM,oBAAoB,OAAO,OAAO,UAAU;AAElD,SAAO;AAAA,IACL,aAAa,OAAO,WAAW;AAAA,IAC/B,YAAY,OAAO,WAAW,OAAO,OAAO,WAAW,QAAQ;AAAA,IAC/D,OAAO;AAAA,MACL,OAAO;AAAA,QACL,UAAU,OAAO,SAAS;AAAA,QAC1B,MAAM;AAAA,QACN,mBAAmB,OAAO,WAAW;AAAA,QACrC,YAAY;AAAA,MACd;AAAA,MACA,QAAQ;AAAA,QACN,UAAU,OAAO,SAAS;AAAA,QAC1B,MAAM;AAAA,QACN,mBAAmB,OAAO,WAAW;AAAA,QACrC,YAAY;AAAA,MACd;AAAA,MACA,OAAO;AAAA,QACL,UAAU,OAAO,SAAS;AAAA,QAC1B,MAAM;AAAA,QACN,mBAAmB,OAAO,WAAW;AAAA,QACrC,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IACA,mBAAmB,OAAO,OAAO,QAAQ,SAAS;AAAA,IAClD,cAAc;AAAA,MACZ,QAAQ,OAAO,OAAO,SAAS,QAAQ;AAAA,MACvC,SAAS,OAAO,OAAO,KAAK;AAAA,MAC5B,MAAM,OAAO,OAAO,SAAS,QAAQ;AAAA,MACrC,MAAM,OAAO,OAAO,SAAS,MAAM;AAAA,IACrC;AAAA,IACA,UAAU;AAAA,MACR,QAAQ;AAAA,QACN,iBAAiB;AAAA,QACjB,aAAa;AAAA,QACb,OAAO;AAAA,MACT;AAAA,MACA,UAAU;AAAA,QACR,iBAAiB;AAAA,QACjB,aAAa;AAAA,QACb,OAAO;AAAA,MACT;AAAA,MACA,MAAM;AAAA,QACJ,iBAAiB;AAAA,QACjB,aAAa;AAAA,QACb,OAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../../src/theme/create-avatar-tokens.ts"],"sourcesContent":["import type { AvatarTokens, PrimitiveThemeTokens } from \"../types\";\n\nexport function createAvatarTokens(tokens: PrimitiveThemeTokens): AvatarTokens {\n  const primary = tokens.colors.primary.value;\n  const primaryContrast = tokens.colors.primary.contrast;\n  const secondary = tokens.colors.secondary.value;\n  const secondaryContrast = tokens.colors.secondary.contrast;\n\n  const neutral = tokens.colors.text.secondary;\n  const neutralContrast = tokens.colors.text.inverse;\n  const neutralSoft = tokens.colors.surface.subtle.value;\n  const neutralSoftContrast = tokens.colors.text.primary;\n  const subtle = tokens.colors.subtle.value;\n\n  return {\n    borderWidth: tokens.borderSize.sm,\n    fontFamily: tokens.fontFamily.normal[tokens.fontWeight.semiBold],\n    sizes: {\n      small: {\n        fontSize: tokens.fontSize.xs,\n        size: 32,\n        statusBorderWidth: tokens.borderSize.sm,\n        statusSize: 8,\n      },\n      medium: {\n        fontSize: tokens.fontSize.xsm,\n        size: 40,\n        statusBorderWidth: tokens.borderSize.md,\n        statusSize: 10,\n      },\n      large: {\n        fontSize: tokens.fontSize.sm,\n        size: 48,\n        statusBorderWidth: tokens.borderSize.md,\n        statusSize: 12,\n      },\n    },\n    statusBorderColor: tokens.colors.surface.elevated.value,\n    statusColors: {\n      online: tokens.colors.feedback.success.value,\n      offline: tokens.colors.text.disabled,\n      away: tokens.colors.feedback.warning.value,\n      busy: tokens.colors.feedback.error.value,\n    },\n    colors: {\n      neutral: {\n        filled: {\n          backgroundColor: neutral,\n          borderColor: neutral,\n          color: neutralContrast,\n        },\n        outlined: {\n          backgroundColor: \"transparent\",\n          borderColor: neutral,\n          color: neutral,\n        },\n        soft: {\n          backgroundColor: neutralSoft,\n          borderColor: neutralSoft,\n          color: neutralSoftContrast,\n        },\n      },\n      primary: {\n        filled: {\n          backgroundColor: primary,\n          borderColor: primary,\n          color: primaryContrast,\n        },\n        outlined: {\n          backgroundColor: \"transparent\",\n          borderColor: primary,\n          color: primary,\n        },\n        soft: {\n          backgroundColor: secondary,\n          borderColor: secondary,\n          color: secondaryContrast,\n        },\n      },\n      secondary: {\n        filled: {\n          backgroundColor: secondary,\n          borderColor: secondary,\n          color: secondaryContrast,\n        },\n        outlined: {\n          backgroundColor: \"transparent\",\n          borderColor: secondaryContrast,\n          color: secondaryContrast,\n        },\n        soft: {\n          backgroundColor: subtle,\n          borderColor: subtle,\n          color: secondaryContrast,\n        },\n      },\n    },\n  };\n}\n"],"mappings":"AAEO,SAAS,mBAAmB,QAA4C;AAC7E,QAAM,UAAU,OAAO,OAAO,QAAQ;AACtC,QAAM,kBAAkB,OAAO,OAAO,QAAQ;AAC9C,QAAM,YAAY,OAAO,OAAO,UAAU;AAC1C,QAAM,oBAAoB,OAAO,OAAO,UAAU;AAElD,QAAM,UAAU,OAAO,OAAO,KAAK;AACnC,QAAM,kBAAkB,OAAO,OAAO,KAAK;AAC3C,QAAM,cAAc,OAAO,OAAO,QAAQ,OAAO;AACjD,QAAM,sBAAsB,OAAO,OAAO,KAAK;AAC/C,QAAM,SAAS,OAAO,OAAO,OAAO;AAEpC,SAAO;AAAA,IACL,aAAa,OAAO,WAAW;AAAA,IAC/B,YAAY,OAAO,WAAW,OAAO,OAAO,WAAW,QAAQ;AAAA,IAC/D,OAAO;AAAA,MACL,OAAO;AAAA,QACL,UAAU,OAAO,SAAS;AAAA,QAC1B,MAAM;AAAA,QACN,mBAAmB,OAAO,WAAW;AAAA,QACrC,YAAY;AAAA,MACd;AAAA,MACA,QAAQ;AAAA,QACN,UAAU,OAAO,SAAS;AAAA,QAC1B,MAAM;AAAA,QACN,mBAAmB,OAAO,WAAW;AAAA,QACrC,YAAY;AAAA,MACd;AAAA,MACA,OAAO;AAAA,QACL,UAAU,OAAO,SAAS;AAAA,QAC1B,MAAM;AAAA,QACN,mBAAmB,OAAO,WAAW;AAAA,QACrC,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IACA,mBAAmB,OAAO,OAAO,QAAQ,SAAS;AAAA,IAClD,cAAc;AAAA,MACZ,QAAQ,OAAO,OAAO,SAAS,QAAQ;AAAA,MACvC,SAAS,OAAO,OAAO,KAAK;AAAA,MAC5B,MAAM,OAAO,OAAO,SAAS,QAAQ;AAAA,MACrC,MAAM,OAAO,OAAO,SAAS,MAAM;AAAA,IACrC;AAAA,IACA,QAAQ;AAAA,MACN,SAAS;AAAA,QACP,QAAQ;AAAA,UACN,iBAAiB;AAAA,UACjB,aAAa;AAAA,UACb,OAAO;AAAA,QACT;AAAA,QACA,UAAU;AAAA,UACR,iBAAiB;AAAA,UACjB,aAAa;AAAA,UACb,OAAO;AAAA,QACT;AAAA,QACA,MAAM;AAAA,UACJ,iBAAiB;AAAA,UACjB,aAAa;AAAA,UACb,OAAO;AAAA,QACT;AAAA,MACF;AAAA,MACA,SAAS;AAAA,QACP,QAAQ;AAAA,UACN,iBAAiB;AAAA,UACjB,aAAa;AAAA,UACb,OAAO;AAAA,QACT;AAAA,QACA,UAAU;AAAA,UACR,iBAAiB;AAAA,UACjB,aAAa;AAAA,UACb,OAAO;AAAA,QACT;AAAA,QACA,MAAM;AAAA,UACJ,iBAAiB;AAAA,UACjB,aAAa;AAAA,UACb,OAAO;AAAA,QACT;AAAA,MACF;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,UACN,iBAAiB;AAAA,UACjB,aAAa;AAAA,UACb,OAAO;AAAA,QACT;AAAA,QACA,UAAU;AAAA,UACR,iBAAiB;AAAA,UACjB,aAAa;AAAA,UACb,OAAO;AAAA,QACT;AAAA,QACA,MAAM;AAAA,UACJ,iBAAiB;AAAA,UACjB,aAAa;AAAA,UACb,OAAO;AAAA,QACT;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;","names":[]}

package/dist/theme/create-button-tokens.js

@@ -3,6 +3,14 @@ function createButtonTokens(tokens) {
   const primaryContrast = tokens.colors.primary.contrast;
   const secondary = tokens.colors.secondary.value;
   const secondaryContrast = tokens.colors.secondary.contrast;
+  const neutral = tokens.colors.text.secondary;
+  const neutralContrast = tokens.colors.text.inverse;
+  const neutralSoft = tokens.colors.surface.subtle.value;
+  const textColor = tokens.colors.text.primary;
+  const subtle = tokens.colors.subtle.value;
+  const disabledBackground = tokens.colors.surface.subtle.value;
+  const disabledBorder = tokens.colors.border.default.value;
+  const disabledSoftBorder = tokens.colors.border.subtle.value;
   const disabledColor = tokens.colors.text.disabled;
   return {
     borderWidth: tokens.borderSize.sm,
@@ -27,73 +35,215 @@ function createButtonTokens(tokens) {
         fontSize: tokens.fontSize.sm
       }
     },
-    variants: {
-      filled: {
-        default: {
-          backgroundColor: primary,
-          borderColor: primary,
-          color: primaryContrast
+    colors: {
+      neutral: {
+        filled: {
+          default: {
+            backgroundColor: neutral,
+            borderColor: neutral,
+            color: neutralContrast
+          },
+          loading: {
+            backgroundColor: neutral,
+            borderColor: neutral,
+            color: neutralContrast
+          },
+          disabled: {
+            backgroundColor: disabledBackground,
+            borderColor: disabledBorder,
+            color: disabledColor
+          }
         },
-        loading: {
-          backgroundColor: primary,
-          borderColor: primary,
-          color: primaryContrast
+        outlined: {
+          default: {
+            backgroundColor: "transparent",
+            borderColor: neutral,
+            color: neutral
+          },
+          loading: {
+            backgroundColor: "transparent",
+            borderColor: neutral,
+            color: neutral
+          },
+          disabled: {
+            backgroundColor: "transparent",
+            borderColor: disabledBorder,
+            color: disabledColor
+          }
         },
-        disabled: {
-          backgroundColor: tokens.colors.surface.subtle.value,
-          borderColor: tokens.colors.border.default.value,
-          color: disabledColor
-        }
-      },
-      outlined: {
-        default: {
-          backgroundColor: "transparent",
-          borderColor: primary,
-          color: primary
-        },
-        loading: {
-          backgroundColor: "transparent",
-          borderColor: primary,
-          color: primary
+        soft: {
+          default: {
+            backgroundColor: neutralSoft,
+            borderColor: neutralSoft,
+            color: textColor
+          },
+          loading: {
+            backgroundColor: neutralSoft,
+            borderColor: neutralSoft,
+            color: textColor
+          },
+          disabled: {
+            backgroundColor: disabledBackground,
+            borderColor: disabledSoftBorder,
+            color: disabledColor
+          }
         },
-        disabled: {
-          backgroundColor: "transparent",
-          borderColor: tokens.colors.border.default.value,
-          color: disabledColor
+        ghost: {
+          default: {
+            backgroundColor: "transparent",
+            borderColor: "transparent",
+            color: neutral
+          },
+          loading: {
+            backgroundColor: "transparent",
+            borderColor: "transparent",
+            color: neutral
+          },
+          disabled: {
+            backgroundColor: "transparent",
+            borderColor: "transparent",
+            color: disabledColor
+          }
         }
       },
-      soft: {
-        default: {
-          backgroundColor: secondary,
-          borderColor: secondary,
-          color: secondaryContrast
+      primary: {
+        filled: {
+          default: {
+            backgroundColor: primary,
+            borderColor: primary,
+            color: primaryContrast
+          },
+          loading: {
+            backgroundColor: primary,
+            borderColor: primary,
+            color: primaryContrast
+          },
+          disabled: {
+            backgroundColor: disabledBackground,
+            borderColor: disabledBorder,
+            color: disabledColor
+          }
         },
-        loading: {
-          backgroundColor: secondary,
-          borderColor: secondary,
-          color: secondaryContrast
+        outlined: {
+          default: {
+            backgroundColor: "transparent",
+            borderColor: primary,
+            color: primary
+          },
+          loading: {
+            backgroundColor: "transparent",
+            borderColor: primary,
+            color: primary
+          },
+          disabled: {
+            backgroundColor: "transparent",
+            borderColor: disabledBorder,
+            color: disabledColor
+          }
         },
-        disabled: {
-          backgroundColor: tokens.colors.surface.subtle.value,
-          borderColor: tokens.colors.border.subtle.value,
-          color: disabledColor
+        soft: {
+          default: {
+            backgroundColor: secondary,
+            borderColor: secondary,
+            color: secondaryContrast
+          },
+          loading: {
+            backgroundColor: secondary,
+            borderColor: secondary,
+            color: secondaryContrast
+          },
+          disabled: {
+            backgroundColor: disabledBackground,
+            borderColor: disabledSoftBorder,
+            color: disabledColor
+          }
+        },
+        ghost: {
+          default: {
+            backgroundColor: "transparent",
+            borderColor: "transparent",
+            color: primary
+          },
+          loading: {
+            backgroundColor: "transparent",
+            borderColor: "transparent",
+            color: primary
+          },
+          disabled: {
+            backgroundColor: "transparent",
+            borderColor: "transparent",
+            color: disabledColor
+          }
         }
       },
-      ghost: {
-        default: {
-          backgroundColor: "transparent",
-          borderColor: "transparent",
-          color: primary
+      secondary: {
+        filled: {
+          default: {
+            backgroundColor: secondary,
+            borderColor: secondary,
+            color: secondaryContrast
+          },
+          loading: {
+            backgroundColor: secondary,
+            borderColor: secondary,
+            color: secondaryContrast
+          },
+          disabled: {
+            backgroundColor: disabledBackground,
+            borderColor: disabledBorder,
+            color: disabledColor
+          }
+        },
+        outlined: {
+          default: {
+            backgroundColor: "transparent",
+            borderColor: secondaryContrast,
+            color: secondaryContrast
+          },
+          loading: {
+            backgroundColor: "transparent",
+            borderColor: secondaryContrast,
+            color: secondaryContrast
+          },
+          disabled: {
+            backgroundColor: "transparent",
+            borderColor: disabledBorder,
+            color: disabledColor
+          }
         },
-        loading: {
-          backgroundColor: "transparent",
-          borderColor: "transparent",
-          color: primary
+        soft: {
+          default: {
+            backgroundColor: subtle,
+            borderColor: subtle,
+            color: secondaryContrast
+          },
+          loading: {
+            backgroundColor: subtle,
+            borderColor: subtle,
+            color: secondaryContrast
+          },
+          disabled: {
+            backgroundColor: disabledBackground,
+            borderColor: disabledSoftBorder,
+            color: disabledColor
+          }
         },
-        disabled: {
-          backgroundColor: "transparent",
-          borderColor: "transparent",
-          color: disabledColor
+        ghost: {
+          default: {
+            backgroundColor: "transparent",
+            borderColor: "transparent",
+            color: secondaryContrast
+          },
+          loading: {
+            backgroundColor: "transparent",
+            borderColor: "transparent",
+            color: secondaryContrast
+          },
+          disabled: {
+            backgroundColor: "transparent",
+            borderColor: "transparent",
+            color: disabledColor
+          }
         }
       }
     }

package/dist/theme/create-button-tokens.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/create-button-tokens.ts"],"sourcesContent":["import { ButtonTokens, PrimitiveThemeTokens } from \"../types\";\n\nexport function createButtonTokens(tokens: PrimitiveThemeTokens): ButtonTokens {\n  const primary = tokens.colors.primary.value;\n  const primaryContrast = tokens.colors.primary.contrast;\n\n  const secondary = tokens.colors.secondary.value;\n  const secondaryContrast = tokens.colors.secondary.contrast;\n\n  const disabledColor = tokens.colors.text.disabled;\n\n  return {\n    borderWidth: tokens.borderSize.sm,\n    borderRadius: tokens.radii.md,\n\n    sizes: {\n      small: {\n        height: 32,\n        paddingVertical: 6,\n        paddingHorizontal: 12,\n        fontSize: tokens.fontSize.xsm,\n      },\n      medium: {\n        height: 40,\n        paddingVertical: 8,\n        paddingHorizontal: 16,\n        fontSize: tokens.fontSize.sm,\n      },\n      large: {\n        height: 48,\n        paddingVertical: 10,\n        paddingHorizontal: 20,\n        fontSize: tokens.fontSize.sm,\n      },\n    },\n\n    variants: {\n      filled: {\n        default: {\n          backgroundColor: primary,\n          borderColor: primary,\n          color: primaryContrast,\n        },\n        loading: {\n          backgroundColor: primary,\n          borderColor: primary,\n          color: primaryContrast,\n        },\n        disabled: {\n          backgroundColor: tokens.colors.surface.subtle.value,\n          borderColor: tokens.colors.border.default.value,\n          color: disabledColor,\n        },\n      },\n\n      outlined: {\n        default: {\n          backgroundColor: \"transparent\",\n          borderColor: primary,\n          color: primary,\n        },\n        loading: {\n          backgroundColor: \"transparent\",\n          borderColor: primary,\n          color: primary,\n        },\n        disabled: {\n          backgroundColor: \"transparent\",\n          borderColor: tokens.colors.border.default.value,\n          color: disabledColor,\n        },\n      },\n\n      soft: {\n        default: {\n          backgroundColor: secondary,\n          borderColor: secondary,\n          color: secondaryContrast,\n        },\n        loading: {\n          backgroundColor: secondary,\n          borderColor: secondary,\n          color: secondaryContrast,\n        },\n        disabled: {\n          backgroundColor: tokens.colors.surface.subtle.value,\n          borderColor: tokens.colors.border.subtle.value,\n          color: disabledColor,\n        },\n      },\n\n      ghost: {\n        default: {\n          backgroundColor: \"transparent\",\n          borderColor: \"transparent\",\n          color: primary,\n        },\n        loading: {\n          backgroundColor: \"transparent\",\n          borderColor: \"transparent\",\n          color: primary,\n        },\n        disabled: {\n          backgroundColor: \"transparent\",\n          borderColor: \"transparent\",\n          color: disabledColor,\n        },\n      },\n    },\n  };\n}\n"],"mappings":"AAEO,SAAS,mBAAmB,QAA4C;AAC7E,QAAM,UAAU,OAAO,OAAO,QAAQ;AACtC,QAAM,kBAAkB,OAAO,OAAO,QAAQ;AAE9C,QAAM,YAAY,OAAO,OAAO,UAAU;AAC1C,QAAM,oBAAoB,OAAO,OAAO,UAAU;AAElD,QAAM,gBAAgB,OAAO,OAAO,KAAK;AAEzC,SAAO;AAAA,IACL,aAAa,OAAO,WAAW;AAAA,IAC/B,cAAc,OAAO,MAAM;AAAA,IAE3B,OAAO;AAAA,MACL,OAAO;AAAA,QACL,QAAQ;AAAA,QACR,iBAAiB;AAAA,QACjB,mBAAmB;AAAA,QACnB,UAAU,OAAO,SAAS;AAAA,MAC5B;AAAA,MACA,QAAQ;AAAA,QACN,QAAQ;AAAA,QACR,iBAAiB;AAAA,QACjB,mBAAmB;AAAA,QACnB,UAAU,OAAO,SAAS;AAAA,MAC5B;AAAA,MACA,OAAO;AAAA,QACL,QAAQ;AAAA,QACR,iBAAiB;AAAA,QACjB,mBAAmB;AAAA,QACnB,UAAU,OAAO,SAAS;AAAA,MAC5B;AAAA,IACF;AAAA,IAEA,UAAU;AAAA,MACR,QAAQ;AAAA,QACN,SAAS;AAAA,UACP,iBAAiB;AAAA,UACjB,aAAa;AAAA,UACb,OAAO;AAAA,QACT;AAAA,QACA,SAAS;AAAA,UACP,iBAAiB;AAAA,UACjB,aAAa;AAAA,UACb,OAAO;AAAA,QACT;AAAA,QACA,UAAU;AAAA,UACR,iBAAiB,OAAO,OAAO,QAAQ,OAAO;AAAA,UAC9C,aAAa,OAAO,OAAO,OAAO,QAAQ;AAAA,UAC1C,OAAO;AAAA,QACT;AAAA,MACF;AAAA,MAEA,UAAU;AAAA,QACR,SAAS;AAAA,UACP,iBAAiB;AAAA,UACjB,aAAa;AAAA,UACb,OAAO;AAAA,QACT;AAAA,QACA,SAAS;AAAA,UACP,iBAAiB;AAAA,UACjB,aAAa;AAAA,UACb,OAAO;AAAA,QACT;AAAA,QACA,UAAU;AAAA,UACR,iBAAiB;AAAA,UACjB,aAAa,OAAO,OAAO,OAAO,QAAQ;AAAA,UAC1C,OAAO;AAAA,QACT;AAAA,MACF;AAAA,MAEA,MAAM;AAAA,QACJ,SAAS;AAAA,UACP,iBAAiB;AAAA,UACjB,aAAa;AAAA,UACb,OAAO;AAAA,QACT;AAAA,QACA,SAAS;AAAA,UACP,iBAAiB;AAAA,UACjB,aAAa;AAAA,UACb,OAAO;AAAA,QACT;AAAA,QACA,UAAU;AAAA,UACR,iBAAiB,OAAO,OAAO,QAAQ,OAAO;AAAA,UAC9C,aAAa,OAAO,OAAO,OAAO,OAAO;AAAA,UACzC,OAAO;AAAA,QACT;AAAA,MACF;AAAA,MAEA,OAAO;AAAA,QACL,SAAS;AAAA,UACP,iBAAiB;AAAA,UACjB,aAAa;AAAA,UACb,OAAO;AAAA,QACT;AAAA,QACA,SAAS;AAAA,UACP,iBAAiB;AAAA,UACjB,aAAa;AAAA,UACb,OAAO;AAAA,QACT;AAAA,QACA,UAAU;AAAA,UACR,iBAAiB;AAAA,UACjB,aAAa;AAAA,UACb,OAAO;AAAA,QACT;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../../src/theme/create-button-tokens.ts"],"sourcesContent":["import { ButtonTokens, PrimitiveThemeTokens } from \"../types\";\n\nexport function createButtonTokens(tokens: PrimitiveThemeTokens): ButtonTokens {\n  const primary = tokens.colors.primary.value;\n  const primaryContrast = tokens.colors.primary.contrast;\n\n  const secondary = tokens.colors.secondary.value;\n  const secondaryContrast = tokens.colors.secondary.contrast;\n\n  const neutral = tokens.colors.text.secondary;\n  const neutralContrast = tokens.colors.text.inverse;\n  const neutralSoft = tokens.colors.surface.subtle.value;\n  const textColor = tokens.colors.text.primary;\n  const subtle = tokens.colors.subtle.value;\n\n  const disabledBackground = tokens.colors.surface.subtle.value;\n  const disabledBorder = tokens.colors.border.default.value;\n  const disabledSoftBorder = tokens.colors.border.subtle.value;\n\n  const disabledColor = tokens.colors.text.disabled;\n\n  return {\n    borderWidth: tokens.borderSize.sm,\n    borderRadius: tokens.radii.md,\n\n    sizes: {\n      small: {\n        height: 32,\n        paddingVertical: 6,\n        paddingHorizontal: 12,\n        fontSize: tokens.fontSize.xsm,\n      },\n      medium: {\n        height: 40,\n        paddingVertical: 8,\n        paddingHorizontal: 16,\n        fontSize: tokens.fontSize.sm,\n      },\n      large: {\n        height: 48,\n        paddingVertical: 10,\n        paddingHorizontal: 20,\n        fontSize: tokens.fontSize.sm,\n      },\n    },\n\n    colors: {\n      neutral: {\n        filled: {\n          default: {\n            backgroundColor: neutral,\n            borderColor: neutral,\n            color: neutralContrast,\n          },\n          loading: {\n            backgroundColor: neutral,\n            borderColor: neutral,\n            color: neutralContrast,\n          },\n          disabled: {\n            backgroundColor: disabledBackground,\n            borderColor: disabledBorder,\n            color: disabledColor,\n          },\n        },\n        outlined: {\n          default: {\n            backgroundColor: \"transparent\",\n            borderColor: neutral,\n            color: neutral,\n          },\n          loading: {\n            backgroundColor: \"transparent\",\n            borderColor: neutral,\n            color: neutral,\n          },\n          disabled: {\n            backgroundColor: \"transparent\",\n            borderColor: disabledBorder,\n            color: disabledColor,\n          },\n        },\n        soft: {\n          default: {\n            backgroundColor: neutralSoft,\n            borderColor: neutralSoft,\n            color: textColor,\n          },\n          loading: {\n            backgroundColor: neutralSoft,\n            borderColor: neutralSoft,\n            color: textColor,\n          },\n          disabled: {\n            backgroundColor: disabledBackground,\n            borderColor: disabledSoftBorder,\n            color: disabledColor,\n          },\n        },\n        ghost: {\n          default: {\n            backgroundColor: \"transparent\",\n            borderColor: \"transparent\",\n            color: neutral,\n          },\n          loading: {\n            backgroundColor: \"transparent\",\n            borderColor: \"transparent\",\n            color: neutral,\n          },\n          disabled: {\n            backgroundColor: \"transparent\",\n            borderColor: \"transparent\",\n            color: disabledColor,\n          },\n        },\n      },\n      primary: {\n        filled: {\n          default: {\n            backgroundColor: primary,\n            borderColor: primary,\n            color: primaryContrast,\n          },\n          loading: {\n            backgroundColor: primary,\n            borderColor: primary,\n            color: primaryContrast,\n          },\n          disabled: {\n            backgroundColor: disabledBackground,\n            borderColor: disabledBorder,\n            color: disabledColor,\n          },\n        },\n        outlined: {\n          default: {\n            backgroundColor: \"transparent\",\n            borderColor: primary,\n            color: primary,\n          },\n          loading: {\n            backgroundColor: \"transparent\",\n            borderColor: primary,\n            color: primary,\n          },\n          disabled: {\n            backgroundColor: \"transparent\",\n            borderColor: disabledBorder,\n            color: disabledColor,\n          },\n        },\n        soft: {\n          default: {\n            backgroundColor: secondary,\n            borderColor: secondary,\n            color: secondaryContrast,\n          },\n          loading: {\n            backgroundColor: secondary,\n            borderColor: secondary,\n            color: secondaryContrast,\n          },\n          disabled: {\n            backgroundColor: disabledBackground,\n            borderColor: disabledSoftBorder,\n            color: disabledColor,\n          },\n        },\n        ghost: {\n          default: {\n            backgroundColor: \"transparent\",\n            borderColor: \"transparent\",\n            color: primary,\n          },\n          loading: {\n            backgroundColor: \"transparent\",\n            borderColor: \"transparent\",\n            color: primary,\n          },\n          disabled: {\n            backgroundColor: \"transparent\",\n            borderColor: \"transparent\",\n            color: disabledColor,\n          },\n        },\n      },\n      secondary: {\n        filled: {\n          default: {\n            backgroundColor: secondary,\n            borderColor: secondary,\n            color: secondaryContrast,\n          },\n          loading: {\n            backgroundColor: secondary,\n            borderColor: secondary,\n            color: secondaryContrast,\n          },\n          disabled: {\n            backgroundColor: disabledBackground,\n            borderColor: disabledBorder,\n            color: disabledColor,\n          },\n        },\n        outlined: {\n          default: {\n            backgroundColor: \"transparent\",\n            borderColor: secondaryContrast,\n            color: secondaryContrast,\n          },\n          loading: {\n            backgroundColor: \"transparent\",\n            borderColor: secondaryContrast,\n            color: secondaryContrast,\n          },\n          disabled: {\n            backgroundColor: \"transparent\",\n            borderColor: disabledBorder,\n            color: disabledColor,\n          },\n        },\n        soft: {\n          default: {\n            backgroundColor: subtle,\n            borderColor: subtle,\n            color: secondaryContrast,\n          },\n          loading: {\n            backgroundColor: subtle,\n            borderColor: subtle,\n            color: secondaryContrast,\n          },\n          disabled: {\n            backgroundColor: disabledBackground,\n            borderColor: disabledSoftBorder,\n            color: disabledColor,\n          },\n        },\n        ghost: {\n          default: {\n            backgroundColor: \"transparent\",\n            borderColor: \"transparent\",\n            color: secondaryContrast,\n          },\n          loading: {\n            backgroundColor: \"transparent\",\n            borderColor: \"transparent\",\n            color: secondaryContrast,\n          },\n          disabled: {\n            backgroundColor: \"transparent\",\n            borderColor: \"transparent\",\n            color: disabledColor,\n          },\n        },\n      },\n    },\n  };\n}\n"],"mappings":"AAEO,SAAS,mBAAmB,QAA4C;AAC7E,QAAM,UAAU,OAAO,OAAO,QAAQ;AACtC,QAAM,kBAAkB,OAAO,OAAO,QAAQ;AAE9C,QAAM,YAAY,OAAO,OAAO,UAAU;AAC1C,QAAM,oBAAoB,OAAO,OAAO,UAAU;AAElD,QAAM,UAAU,OAAO,OAAO,KAAK;AACnC,QAAM,kBAAkB,OAAO,OAAO,KAAK;AAC3C,QAAM,cAAc,OAAO,OAAO,QAAQ,OAAO;AACjD,QAAM,YAAY,OAAO,OAAO,KAAK;AACrC,QAAM,SAAS,OAAO,OAAO,OAAO;AAEpC,QAAM,qBAAqB,OAAO,OAAO,QAAQ,OAAO;AACxD,QAAM,iBAAiB,OAAO,OAAO,OAAO,QAAQ;AACpD,QAAM,qBAAqB,OAAO,OAAO,OAAO,OAAO;AAEvD,QAAM,gBAAgB,OAAO,OAAO,KAAK;AAEzC,SAAO;AAAA,IACL,aAAa,OAAO,WAAW;AAAA,IAC/B,cAAc,OAAO,MAAM;AAAA,IAE3B,OAAO;AAAA,MACL,OAAO;AAAA,QACL,QAAQ;AAAA,QACR,iBAAiB;AAAA,QACjB,mBAAmB;AAAA,QACnB,UAAU,OAAO,SAAS;AAAA,MAC5B;AAAA,MACA,QAAQ;AAAA,QACN,QAAQ;AAAA,QACR,iBAAiB;AAAA,QACjB,mBAAmB;AAAA,QACnB,UAAU,OAAO,SAAS;AAAA,MAC5B;AAAA,MACA,OAAO;AAAA,QACL,QAAQ;AAAA,QACR,iBAAiB;AAAA,QACjB,mBAAmB;AAAA,QACnB,UAAU,OAAO,SAAS;AAAA,MAC5B;AAAA,IACF;AAAA,IAEA,QAAQ;AAAA,MACN,SAAS;AAAA,QACP,QAAQ;AAAA,UACN,SAAS;AAAA,YACP,iBAAiB;AAAA,YACjB,aAAa;AAAA,YACb,OAAO;AAAA,UACT;AAAA,UACA,SAAS;AAAA,YACP,iBAAiB;AAAA,YACjB,aAAa;AAAA,YACb,OAAO;AAAA,UACT;AAAA,UACA,UAAU;AAAA,YACR,iBAAiB;AAAA,YACjB,aAAa;AAAA,YACb,OAAO;AAAA,UACT;AAAA,QACF;AAAA,QACA,UAAU;AAAA,UACR,SAAS;AAAA,YACP,iBAAiB;AAAA,YACjB,aAAa;AAAA,YACb,OAAO;AAAA,UACT;AAAA,UACA,SAAS;AAAA,YACP,iBAAiB;AAAA,YACjB,aAAa;AAAA,YACb,OAAO;AAAA,UACT;AAAA,UACA,UAAU;AAAA,YACR,iBAAiB;AAAA,YACjB,aAAa;AAAA,YACb,OAAO;AAAA,UACT;AAAA,QACF;AAAA,QACA,MAAM;AAAA,UACJ,SAAS;AAAA,YACP,iBAAiB;AAAA,YACjB,aAAa;AAAA,YACb,OAAO;AAAA,UACT;AAAA,UACA,SAAS;AAAA,YACP,iBAAiB;AAAA,YACjB,aAAa;AAAA,YACb,OAAO;AAAA,UACT;AAAA,UACA,UAAU;AAAA,YACR,iBAAiB;AAAA,YACjB,aAAa;AAAA,YACb,OAAO;AAAA,UACT;AAAA,QACF;AAAA,QACA,OAAO;AAAA,UACL,SAAS;AAAA,YACP,iBAAiB;AAAA,YACjB,aAAa;AAAA,YACb,OAAO;AAAA,UACT;AAAA,UACA,SAAS;AAAA,YACP,iBAAiB;AAAA,YACjB,aAAa;AAAA,YACb,OAAO;AAAA,UACT;AAAA,UACA,UAAU;AAAA,YACR,iBAAiB;AAAA,YACjB,aAAa;AAAA,YACb,OAAO;AAAA,UACT;AAAA,QACF;AAAA,MACF;AAAA,MACA,SAAS;AAAA,QACP,QAAQ;AAAA,UACN,SAAS;AAAA,YACP,iBAAiB;AAAA,YACjB,aAAa;AAAA,YACb,OAAO;AAAA,UACT;AAAA,UACA,SAAS;AAAA,YACP,iBAAiB;AAAA,YACjB,aAAa;AAAA,YACb,OAAO;AAAA,UACT;AAAA,UACA,UAAU;AAAA,YACR,iBAAiB;AAAA,YACjB,aAAa;AAAA,YACb,OAAO;AAAA,UACT;AAAA,QACF;AAAA,QACA,UAAU;AAAA,UACR,SAAS;AAAA,YACP,iBAAiB;AAAA,YACjB,aAAa;AAAA,YACb,OAAO;AAAA,UACT;AAAA,UACA,SAAS;AAAA,YACP,iBAAiB;AAAA,YACjB,aAAa;AAAA,YACb,OAAO;AAAA,UACT;AAAA,UACA,UAAU;AAAA,YACR,iBAAiB;AAAA,YACjB,aAAa;AAAA,YACb,OAAO;AAAA,UACT;AAAA,QACF;AAAA,QACA,MAAM;AAAA,UACJ,SAAS;AAAA,YACP,iBAAiB;AAAA,YACjB,aAAa;AAAA,YACb,OAAO;AAAA,UACT;AAAA,UACA,SAAS;AAAA,YACP,iBAAiB;AAAA,YACjB,aAAa;AAAA,YACb,OAAO;AAAA,UACT;AAAA,UACA,UAAU;AAAA,YACR,iBAAiB;AAAA,YACjB,aAAa;AAAA,YACb,OAAO;AAAA,UACT;AAAA,QACF;AAAA,QACA,OAAO;AAAA,UACL,SAAS;AAAA,YACP,iBAAiB;AAAA,YACjB,aAAa;AAAA,YACb,OAAO;AAAA,UACT;AAAA,UACA,SAAS;AAAA,YACP,iBAAiB;AAAA,YACjB,aAAa;AAAA,YACb,OAAO;AAAA,UACT;AAAA,UACA,UAAU;AAAA,YACR,iBAAiB;AAAA,YACjB,aAAa;AAAA,YACb,OAAO;AAAA,UACT;AAAA,QACF;AAAA,MACF;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,UACN,SAAS;AAAA,YACP,iBAAiB;AAAA,YACjB,aAAa;AAAA,YACb,OAAO;AAAA,UACT;AAAA,UACA,SAAS;AAAA,YACP,iBAAiB;AAAA,YACjB,aAAa;AAAA,YACb,OAAO;AAAA,UACT;AAAA,UACA,UAAU;AAAA,YACR,iBAAiB;AAAA,YACjB,aAAa;AAAA,YACb,OAAO;AAAA,UACT;AAAA,QACF;AAAA,QACA,UAAU;AAAA,UACR,SAAS;AAAA,YACP,iBAAiB;AAAA,YACjB,aAAa;AAAA,YACb,OAAO;AAAA,UACT;AAAA,UACA,SAAS;AAAA,YACP,iBAAiB;AAAA,YACjB,aAAa;AAAA,YACb,OAAO;AAAA,UACT;AAAA,UACA,UAAU;AAAA,YACR,iBAAiB;AAAA,YACjB,aAAa;AAAA,YACb,OAAO;AAAA,UACT;AAAA,QACF;AAAA,QACA,MAAM;AAAA,UACJ,SAAS;AAAA,YACP,iBAAiB;AAAA,YACjB,aAAa;AAAA,YACb,OAAO;AAAA,UACT;AAAA,UACA,SAAS;AAAA,YACP,iBAAiB;AAAA,YACjB,aAAa;AAAA,YACb,OAAO;AAAA,UACT;AAAA,UACA,UAAU;AAAA,YACR,iBAAiB;AAAA,YACjB,aAAa;AAAA,YACb,OAAO;AAAA,UACT;AAAA,QACF;AAAA,QACA,OAAO;AAAA,UACL,SAAS;AAAA,YACP,iBAAiB;AAAA,YACjB,aAAa;AAAA,YACb,OAAO;AAAA,UACT;AAAA,UACA,SAAS;AAAA,YACP,iBAAiB;AAAA,YACjB,aAAa;AAAA,YACb,OAAO;AAAA,UACT;AAAA,UACA,UAAU;AAAA,YACR,iBAAiB;AAAA,YACjB,aAAa;AAAA,YACb,OAAO;AAAA,UACT;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;","names":[]}