@lightsparkdev/ui 1.0.1 → 1.0.3

package/dist/styles/common.js

@@ -21,12 +21,12 @@ import {
   standardFocusOutline,
   standardLineHeightEms,
   subtext
-} from "../chunk-52POF2W4.js";
-import "../chunk-ZFDYANKZ.js";
+} from "../chunk-PG2W2HVB.js";
+import "../chunk-IBZBPQMZ.js";
 import "../chunk-ENBUKLVT.js";
 import "../chunk-JSGRNWSB.js";
-import "../chunk-GKBQAEH5.js";
-import "../chunk-KYTOF4WO.js";
+import "../chunk-FO7I4E45.js";
+import "../chunk-XUWFUTR4.js";
 import "../chunk-LOPKRCGI.js";
 export {
   Subtext,

package/dist/styles/fields.cjs

@@ -237,7 +237,7 @@ var colors = baseColors;
 function isColorKey(key) {
   return key in colors;
 }
-function hcNeutralFromBg(bgHex, defaultHex, altHex) {
+function hcNeutralFromBg(bgHex, defaultHex = colors.black, altHex = colors.white) {
   const bgRGB = hexToRGB(bgHex);
   const hcRGB = hexToRGB(defaultHex);
   if (!bgRGB || !hcRGB)
@@ -278,7 +278,8 @@ var import_deepmerge = __toESM(require("deepmerge"), 1);
 // src/styles/buttons.tsx
 var buttonsThemeBase = {
   defaultSize: "Small",
-  defaultTypography: "Body Strong",
+  defaultTypographyType: "Body Strong",
+  defaultColor: "text",
   defaultBorderRadius: 32,
   defaultBorderWidth: 1,
   defaultBackgroundColor: "bg",
@@ -302,6 +303,7 @@ var buttonsThemeBase = {
 var defaultButtonsTheme = __spreadProps(__spreadValues({}, buttonsThemeBase), {
   kinds: {
     primary: {
+      defaultColor: "bg",
       defaultBorderWidth: 0,
       defaultBackgroundColor: "c9Neutral",
       defaultBorderColor: "c9Neutral",
@@ -329,7 +331,20 @@ var defaultButtonsTheme = __spreadProps(__spreadValues({}, buttonsThemeBase), {
       defaultHoverBorderColor: ["gray90", "gray20"]
     },
     blue39: {
-      defaultBorderColor: "blue39"
+      defaultBorderColor: "blue39",
+      defaultColor: "gray98"
+    },
+    blue43: {
+      defaultColor: "white"
+    },
+    green33: {
+      defaultColor: "white"
+    },
+    purple55: {
+      defaultColor: "white"
+    },
+    danger: {
+      defaultColor: "white"
     }
   }
 });
@@ -3572,7 +3587,8 @@ var baseThemeColors = {
   success: colors.success,
   text: colors.black,
   vlcNeutral: colors.gray95,
-  warning: colors.warning
+  warning: colors.warning,
+  inputBackground: colors.white
 };
 var themeOrColorKeyValues = [
   ...Object.keys(baseThemeColors),
@@ -3620,7 +3636,8 @@ var darkBaseTheme = {
   vlcNeutral: colors.gray20,
   warning: colors.warning,
   buttons: defaultButtonsTheme,
-  loading: "LoadingSpinner"
+  loading: "LoadingSpinner",
+  inputBackground: colors.black
 };
 var lightTheme = extend(lightBaseTheme, {
   header: extendBase(lightBaseTheme, {
@@ -3659,6 +3676,7 @@ var umameDocsLightTheme = extend(lightTheme, {
   secondary: colors.grayBlue43,
   text: colors.grayBlue9,
   link: colors.blue39,
+  inputBackground: colors.white,
   typography: getTypography("UmameDocs" /* UmameDocs */, {
     main: "Manrope",
     code: "Monaco"
@@ -3703,28 +3721,30 @@ var bridgeBaseSettings = {
     code: "Monaco"
   }),
   buttons: (0, import_deepmerge.default)(buttonsThemeBase, {
-    defaultTypography: "Title",
+    defaultTypographyType: "Title",
     defaultSize: "Medium",
     defaultBorderRadius: 8,
     defaultBorderWidth: 0,
+    defaultPaddingsY: {
+      ExtraSmall: 14,
+      Small: 14,
+      Schmedium: 14,
+      Medium: 14,
+      Mlarge: 14,
+      Large: 14
+    },
     kinds: {
       primary: {
+        defaultColor: "bg",
         defaultBackgroundColor: "blue39",
         defaultHoverBackgroundColor: "blue37"
       },
       ghost: {
+        defaultColor: "secondary",
         defaultBackgroundColor: "transparent",
         defaultBorderWidth: 0,
         defaultHoverBackgroundColor: "transparent",
-        defaultHoverBorderColor: "transparent",
-        defaultPaddingsY: {
-          ExtraSmall: 0,
-          Small: 0,
-          Schmedium: 0,
-          Medium: 0,
-          Mlarge: 0,
-          Large: 0
-        }
+        defaultHoverBorderColor: "transparent"
       },
       secondary: {
         defaultBackgroundColor: "transparent",
@@ -3741,7 +3761,8 @@ var bridgeLightTheme = extend(lightTheme, __spreadProps(__spreadValues({}, bridg
   bg: colors.gray98,
   smBg: colors.gray98,
   text: colors.grayBlue9,
-  secondary: colors.grayBlue43
+  secondary: colors.grayBlue43,
+  inputBackground: colors.white
 }));
 var bridgeDarkTheme = extend(darkTheme, __spreadProps(__spreadValues({}, bridgeBaseSettings), {
   type: "bridgeDark" /* BridgeDark */
@@ -3963,7 +3984,7 @@ var textInputStyle = ({
   var _a;
   return import_react5.css`
   border-radius: ${textInputBorderRadiusPx}px;
-  background-color: ${disabled ? theme.vlcNeutral : theme.bg};
+  background-color: ${disabled ? theme.vlcNeutral : theme.inputBackground};
   cursor: ${disabled ? "not-allowed" : "auto"};
   box-sizing: border-box;
   font-weight: ${textInputFontWeight};

package/dist/styles/fields.d.cts

@@ -2,7 +2,7 @@ import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import * as _emotion_styled from '@emotion/styled';
 import * as react from 'react';
 import * as _emotion_react from '@emotion/react';
-import { a as ThemeProp, W as WithTheme } from '../buttons-a63671c2.js';
+import { b as ThemeProp, W as WithTheme } from '../buttons-36cdd0fe.js';
 import { SimpleTypographyProps } from './typography.cjs';
 import './tokens/typography.cjs';
 import '@emotion/css';

package/dist/styles/fields.d.ts

@@ -2,7 +2,7 @@ import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import * as _emotion_styled from '@emotion/styled';
 import * as react from 'react';
 import * as _emotion_react from '@emotion/react';
-import { a as ThemeProp, W as WithTheme } from '../buttons-38b5823f.js';
+import { b as ThemeProp, W as WithTheme } from '../buttons-35280bfe.js';
 import { SimpleTypographyProps } from './typography.js';
 import './tokens/typography.js';
 import '@emotion/css';

package/dist/styles/fields.js

@@ -22,15 +22,15 @@ import {
   textInputPaddingPx,
   textInputPlaceholderColor,
   textInputStyle
-} from "../chunk-FEJU2K4L.js";
-import "../chunk-WIFHFWAN.js";
+} from "../chunk-6CNJ5ZCC.js";
+import "../chunk-4C2TISN7.js";
 import "../chunk-55OQPFLF.js";
-import "../chunk-52POF2W4.js";
-import "../chunk-ZFDYANKZ.js";
+import "../chunk-PG2W2HVB.js";
+import "../chunk-IBZBPQMZ.js";
 import "../chunk-ENBUKLVT.js";
 import "../chunk-JSGRNWSB.js";
-import "../chunk-GKBQAEH5.js";
-import "../chunk-KYTOF4WO.js";
+import "../chunk-FO7I4E45.js";
+import "../chunk-XUWFUTR4.js";
 import "../chunk-LOPKRCGI.js";
 export {
   FieldError,

package/dist/styles/global.cjs

@@ -233,7 +233,7 @@ var baseColors = __spreadProps(__spreadValues({}, neutral), {
   secondary: neutral.black
 });
 var colors = baseColors;
-function hcNeutralFromBg(bgHex, defaultHex, altHex) {
+function hcNeutralFromBg(bgHex, defaultHex = colors.black, altHex = colors.white) {
   const bgRGB = hexToRGB(bgHex);
   const hcRGB = hexToRGB(defaultHex);
   if (!bgRGB || !hcRGB)
@@ -274,7 +274,8 @@ var import_deepmerge = __toESM(require("deepmerge"), 1);
 // src/styles/buttons.tsx
 var buttonsThemeBase = {
   defaultSize: "Small",
-  defaultTypography: "Body Strong",
+  defaultTypographyType: "Body Strong",
+  defaultColor: "text",
   defaultBorderRadius: 32,
   defaultBorderWidth: 1,
   defaultBackgroundColor: "bg",
@@ -298,6 +299,7 @@ var buttonsThemeBase = {
 var defaultButtonsTheme = __spreadProps(__spreadValues({}, buttonsThemeBase), {
   kinds: {
     primary: {
+      defaultColor: "bg",
       defaultBorderWidth: 0,
       defaultBackgroundColor: "c9Neutral",
       defaultBorderColor: "c9Neutral",
@@ -325,7 +327,20 @@ var defaultButtonsTheme = __spreadProps(__spreadValues({}, buttonsThemeBase), {
       defaultHoverBorderColor: ["gray90", "gray20"]
     },
     blue39: {
-      defaultBorderColor: "blue39"
+      defaultBorderColor: "blue39",
+      defaultColor: "gray98"
+    },
+    blue43: {
+      defaultColor: "white"
+    },
+    green33: {
+      defaultColor: "white"
+    },
+    purple55: {
+      defaultColor: "white"
+    },
+    danger: {
+      defaultColor: "white"
     }
   }
 });
@@ -3516,7 +3531,8 @@ var baseThemeColors = {
   success: colors.success,
   text: colors.black,
   vlcNeutral: colors.gray95,
-  warning: colors.warning
+  warning: colors.warning,
+  inputBackground: colors.white
 };
 var themeOrColorKeyValues = [
   ...Object.keys(baseThemeColors),
@@ -3564,7 +3580,8 @@ var darkBaseTheme = {
   vlcNeutral: colors.gray20,
   warning: colors.warning,
   buttons: defaultButtonsTheme,
-  loading: "LoadingSpinner"
+  loading: "LoadingSpinner",
+  inputBackground: colors.black
 };
 var lightTheme = extend(lightBaseTheme, {
   header: extendBase(lightBaseTheme, {
@@ -3603,6 +3620,7 @@ var umameDocsLightTheme = extend(lightTheme, {
   secondary: colors.grayBlue43,
   text: colors.grayBlue9,
   link: colors.blue39,
+  inputBackground: colors.white,
   typography: getTypography("UmameDocs" /* UmameDocs */, {
     main: "Manrope",
     code: "Monaco"
@@ -3647,28 +3665,30 @@ var bridgeBaseSettings = {
     code: "Monaco"
   }),
   buttons: (0, import_deepmerge.default)(buttonsThemeBase, {
-    defaultTypography: "Title",
+    defaultTypographyType: "Title",
     defaultSize: "Medium",
     defaultBorderRadius: 8,
     defaultBorderWidth: 0,
+    defaultPaddingsY: {
+      ExtraSmall: 14,
+      Small: 14,
+      Schmedium: 14,
+      Medium: 14,
+      Mlarge: 14,
+      Large: 14
+    },
     kinds: {
       primary: {
+        defaultColor: "bg",
         defaultBackgroundColor: "blue39",
         defaultHoverBackgroundColor: "blue37"
       },
       ghost: {
+        defaultColor: "secondary",
         defaultBackgroundColor: "transparent",
         defaultBorderWidth: 0,
         defaultHoverBackgroundColor: "transparent",
-        defaultHoverBorderColor: "transparent",
-        defaultPaddingsY: {
-          ExtraSmall: 0,
-          Small: 0,
-          Schmedium: 0,
-          Medium: 0,
-          Mlarge: 0,
-          Large: 0
-        }
+        defaultHoverBorderColor: "transparent"
       },
       secondary: {
         defaultBackgroundColor: "transparent",
@@ -3685,7 +3705,8 @@ var bridgeLightTheme = extend(lightTheme, __spreadProps(__spreadValues({}, bridg
   bg: colors.gray98,
   smBg: colors.gray98,
   text: colors.grayBlue9,
-  secondary: colors.grayBlue43
+  secondary: colors.grayBlue43,
+  inputBackground: colors.white
 }));
 var bridgeDarkTheme = extend(darkTheme, __spreadProps(__spreadValues({}, bridgeBaseSettings), {
   type: "bridgeDark" /* BridgeDark */

package/dist/styles/global.d.cts

@@ -1,6 +1,6 @@
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import * as _emotion_react from '@emotion/react';
-import { a as ThemeProp } from '../buttons-a63671c2.js';
+import { b as ThemeProp } from '../buttons-36cdd0fe.js';
 import './tokens/typography.cjs';
 import '@emotion/css';
 import './colors.cjs';

package/dist/styles/global.d.ts

@@ -1,6 +1,6 @@
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import * as _emotion_react from '@emotion/react';
-import { a as ThemeProp } from '../buttons-38b5823f.js';
+import { b as ThemeProp } from '../buttons-35280bfe.js';
 import './tokens/typography.js';
 import '@emotion/css';
 import './colors.js';

package/dist/styles/global.js

@@ -1,14 +1,14 @@
 import {
   GlobalStyles,
   globalComponentStyles
-} from "../chunk-UKAPI3BN.js";
+} from "../chunk-7IHNYMFQ.js";
 import "../chunk-VQVEZVAG.js";
-import "../chunk-52POF2W4.js";
-import "../chunk-ZFDYANKZ.js";
+import "../chunk-PG2W2HVB.js";
+import "../chunk-IBZBPQMZ.js";
 import "../chunk-ENBUKLVT.js";
 import "../chunk-JSGRNWSB.js";
-import "../chunk-GKBQAEH5.js";
-import "../chunk-KYTOF4WO.js";
+import "../chunk-FO7I4E45.js";
+import "../chunk-XUWFUTR4.js";
 import "../chunk-LOPKRCGI.js";
 export {
   GlobalStyles,

package/dist/styles/themes.cjs

@@ -187,7 +187,8 @@ function useBreakpoints() {
 // src/styles/buttons.tsx
 var buttonsThemeBase = {
   defaultSize: "Small",
-  defaultTypography: "Body Strong",
+  defaultTypographyType: "Body Strong",
+  defaultColor: "text",
   defaultBorderRadius: 32,
   defaultBorderWidth: 1,
   defaultBackgroundColor: "bg",
@@ -211,6 +212,7 @@ var buttonsThemeBase = {
 var defaultButtonsTheme = __spreadProps(__spreadValues({}, buttonsThemeBase), {
   kinds: {
     primary: {
+      defaultColor: "bg",
       defaultBorderWidth: 0,
       defaultBackgroundColor: "c9Neutral",
       defaultBorderColor: "c9Neutral",
@@ -238,7 +240,20 @@ var defaultButtonsTheme = __spreadProps(__spreadValues({}, buttonsThemeBase), {
       defaultHoverBorderColor: ["gray90", "gray20"]
     },
     blue39: {
-      defaultBorderColor: "blue39"
+      defaultBorderColor: "blue39",
+      defaultColor: "gray98"
+    },
+    blue43: {
+      defaultColor: "white"
+    },
+    green33: {
+      defaultColor: "white"
+    },
+    purple55: {
+      defaultColor: "white"
+    },
+    danger: {
+      defaultColor: "white"
     }
   }
 });
@@ -304,7 +319,7 @@ var colors = baseColors;
 function isColorKey(key) {
   return key in colors;
 }
-function hcNeutralFromBg(bgHex, defaultHex, altHex) {
+function hcNeutralFromBg(bgHex, defaultHex = colors.black, altHex = colors.white) {
   const bgRGB = hexToRGB(bgHex);
   const hcRGB = hexToRGB(defaultHex);
   if (!bgRGB || !hcRGB)
@@ -3535,7 +3550,8 @@ var baseThemeColors = {
   success: colors.success,
   text: colors.black,
   vlcNeutral: colors.gray95,
-  warning: colors.warning
+  warning: colors.warning,
+  inputBackground: colors.white
 };
 var themeOrColorKeyValues = [
   ...Object.keys(baseThemeColors),
@@ -3583,7 +3599,8 @@ var darkBaseTheme = {
   vlcNeutral: colors.gray20,
   warning: colors.warning,
   buttons: defaultButtonsTheme,
-  loading: "LoadingSpinner"
+  loading: "LoadingSpinner",
+  inputBackground: colors.black
 };
 var lightTheme = extend(lightBaseTheme, {
   header: extendBase(lightBaseTheme, {
@@ -3622,6 +3639,7 @@ var umameDocsLightTheme = extend(lightTheme, {
   secondary: colors.grayBlue43,
   text: colors.grayBlue9,
   link: colors.blue39,
+  inputBackground: colors.white,
   typography: getTypography("UmameDocs" /* UmameDocs */, {
     main: "Manrope",
     code: "Monaco"
@@ -3666,28 +3684,30 @@ var bridgeBaseSettings = {
     code: "Monaco"
   }),
   buttons: (0, import_deepmerge.default)(buttonsThemeBase, {
-    defaultTypography: "Title",
+    defaultTypographyType: "Title",
     defaultSize: "Medium",
     defaultBorderRadius: 8,
     defaultBorderWidth: 0,
+    defaultPaddingsY: {
+      ExtraSmall: 14,
+      Small: 14,
+      Schmedium: 14,
+      Medium: 14,
+      Mlarge: 14,
+      Large: 14
+    },
     kinds: {
       primary: {
+        defaultColor: "bg",
         defaultBackgroundColor: "blue39",
         defaultHoverBackgroundColor: "blue37"
       },
       ghost: {
+        defaultColor: "secondary",
         defaultBackgroundColor: "transparent",
         defaultBorderWidth: 0,
         defaultHoverBackgroundColor: "transparent",
-        defaultHoverBorderColor: "transparent",
-        defaultPaddingsY: {
-          ExtraSmall: 0,
-          Small: 0,
-          Schmedium: 0,
-          Medium: 0,
-          Mlarge: 0,
-          Large: 0
-        }
+        defaultHoverBorderColor: "transparent"
       },
       secondary: {
         defaultBackgroundColor: "transparent",
@@ -3704,7 +3724,8 @@ var bridgeLightTheme = extend(lightTheme, __spreadProps(__spreadValues({}, bridg
   bg: colors.gray98,
   smBg: colors.gray98,
   text: colors.grayBlue9,
-  secondary: colors.grayBlue43
+  secondary: colors.grayBlue43,
+  inputBackground: colors.white
 }));
 var bridgeDarkTheme = extend(darkTheme, __spreadProps(__spreadValues({}, bridgeBaseSettings), {
   type: "bridgeDark" /* BridgeDark */

package/dist/styles/themes.d.cts

@@ -1,5 +1,5 @@
 import '@emotion/react';
-export { f as BackgroundColorKey, h as BackgroundColorKeyArg, F as FontColorKey, L as LightsparkTheme, S as SurfaceThemeColorKey, T as ThemeOrColorKey, a as ThemeProp, b as Themes, W as WithTheme, l as getBackgroundColor, g as getColor, e as getFontColor, q as ifDark, p as ifLight, j as isBackgroundColorKey, k as isBackgroundColorKeyTuple, m as isDark, n as isLight, i as isThemeColorKey, d as isThemeOrColorKey, s as setFonts, o as themeOr, t as themeOrColorKeyValues, c as themes, u as useThemeBg } from '../buttons-a63671c2.js';
+export { h as BackgroundColorKey, j as BackgroundColorKeyArg, F as FontColorKey, L as LightsparkTheme, S as SurfaceThemeColorKey, T as ThemeOrColorKey, b as ThemeProp, c as Themes, W as WithTheme, m as getBackgroundColor, g as getColor, f as getFontColor, r as ifDark, q as ifLight, k as isBackgroundColorKey, l as isBackgroundColorKeyTuple, n as isDark, o as isLight, i as isThemeColorKey, e as isThemeOrColorKey, s as setFonts, p as themeOr, t as themeOrColorKeyValues, d as themes, u as useThemeBg } from '../buttons-36cdd0fe.js';
 import './tokens/typography.cjs';
 import '@emotion/css';
 import './colors.cjs';

package/dist/styles/themes.d.ts

@@ -1,5 +1,5 @@
 import '@emotion/react';
-export { f as BackgroundColorKey, h as BackgroundColorKeyArg, F as FontColorKey, L as LightsparkTheme, S as SurfaceThemeColorKey, T as ThemeOrColorKey, a as ThemeProp, b as Themes, W as WithTheme, l as getBackgroundColor, g as getColor, e as getFontColor, q as ifDark, p as ifLight, j as isBackgroundColorKey, k as isBackgroundColorKeyTuple, m as isDark, n as isLight, i as isThemeColorKey, d as isThemeOrColorKey, s as setFonts, o as themeOr, t as themeOrColorKeyValues, c as themes, u as useThemeBg } from '../buttons-38b5823f.js';
+export { h as BackgroundColorKey, j as BackgroundColorKeyArg, F as FontColorKey, L as LightsparkTheme, S as SurfaceThemeColorKey, T as ThemeOrColorKey, b as ThemeProp, c as Themes, W as WithTheme, m as getBackgroundColor, g as getColor, f as getFontColor, r as ifDark, q as ifLight, k as isBackgroundColorKey, l as isBackgroundColorKeyTuple, n as isDark, o as isLight, i as isThemeColorKey, e as isThemeOrColorKey, s as setFonts, p as themeOr, t as themeOrColorKeyValues, d as themes, u as useThemeBg } from '../buttons-35280bfe.js';
 import './tokens/typography.js';
 import '@emotion/css';
 import './colors.js';

package/dist/styles/themes.js

@@ -16,11 +16,11 @@ import {
   themeOrColorKeyValues,
   themes,
   useThemeBg
-} from "../chunk-ZFDYANKZ.js";
+} from "../chunk-IBZBPQMZ.js";
 import "../chunk-ENBUKLVT.js";
 import "../chunk-JSGRNWSB.js";
-import "../chunk-GKBQAEH5.js";
-import "../chunk-KYTOF4WO.js";
+import "../chunk-FO7I4E45.js";
+import "../chunk-XUWFUTR4.js";
 import "../chunk-LOPKRCGI.js";
 export {
   Themes,

package/dist/styles/type.d.cts

@@ -1,6 +1,6 @@
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import _emotion_styled__default from '@emotion/styled';
-import '../buttons-a63671c2.js';
+import '../buttons-36cdd0fe.js';
 import '@emotion/react';
 import './tokens/typography.cjs';
 import '@emotion/css';

package/dist/styles/type.d.ts

@@ -1,6 +1,6 @@
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import _emotion_styled__default from '@emotion/styled';
-import '../buttons-38b5823f.js';
+import '../buttons-35280bfe.js';
 import '@emotion/react';
 import './tokens/typography.js';
 import '@emotion/css';

package/dist/styles/type.js

@@ -3,14 +3,14 @@ import {
   Heading,
   headingWithDefaults,
   headings
-} from "../chunk-BPZ7AV7W.js";
-import "../chunk-JXXIU52B.js";
-import "../chunk-52POF2W4.js";
-import "../chunk-ZFDYANKZ.js";
+} from "../chunk-BHP5YL2N.js";
+import "../chunk-7WDAN3OC.js";
+import "../chunk-PG2W2HVB.js";
+import "../chunk-IBZBPQMZ.js";
 import "../chunk-ENBUKLVT.js";
 import "../chunk-JSGRNWSB.js";
-import "../chunk-GKBQAEH5.js";
-import "../chunk-KYTOF4WO.js";
+import "../chunk-FO7I4E45.js";
+import "../chunk-XUWFUTR4.js";
 import "../chunk-LOPKRCGI.js";
 export {
   Heading,