@descope/web-components-ui 1.0.275 → 1.0.277

package/dist/index.esm.js

@@ -2316,17 +2316,27 @@ customElements.define(componentName$B, TextClass);
 
 customElements.define(componentName$A, DividerClass);
 
-const { host: host$c, label: label$9, placeholder: placeholder$3, requiredIndicator: requiredIndicator$9, inputField: inputField$6, input, helperText: helperText$7, errorMessage: errorMessage$9 } =
-  {
-    host: { selector: () => ':host' },
-    label: { selector: '::part(label)' },
-    requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
-    placeholder: { selector: '> input:placeholder-shown' },
-    inputField: { selector: '::part(input-field)' },
-    input: { selector: 'input' },
-    helperText: { selector: '::part(helper-text)' },
-    errorMessage: { selector: '::part(error-message)' },
-  };
+const {
+  host: host$c,
+  label: label$9,
+  placeholder: placeholder$3,
+  requiredIndicator: requiredIndicator$9,
+  inputField: inputField$6,
+  input,
+  helperText: helperText$7,
+  errorMessage: errorMessage$9,
+  disabledPlaceholder,
+} = {
+  host: { selector: () => ':host' },
+  label: { selector: '::part(label)' },
+  requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
+  placeholder: { selector: '> input:placeholder-shown' },
+  disabledPlaceholder: { selector: '> input:disabled::placeholder' },
+  inputField: { selector: '::part(input-field)' },
+  input: { selector: 'input' },
+  helperText: { selector: '::part(helper-text)' },
+  errorMessage: { selector: '::part(error-message)' },
+};
 
 var textFieldMappings = {
   // we apply font-size also on the host so we can set its width with em
@@ -2342,6 +2352,8 @@ var textFieldMappings = {
   labelTextColor: [
     { ...label$9, property: 'color' },
     { ...requiredIndicator$9, property: 'color' },
+    { ...label$9, property: '-webkit-text-fill-color' },
+    { ...requiredIndicator$9, property: '-webkit-text-fill-color' },
   ],
   errorMessageTextColor: { ...errorMessage$9, property: 'color' },
 
@@ -2368,7 +2380,10 @@ var textFieldMappings = {
 
   inputTextAlign: { ...input, property: 'text-align' },
 
-  inputPlaceholderColor: { ...placeholder$3, property: 'color' },
+  inputPlaceholderColor: [
+    { ...placeholder$3, property: 'color' },
+    { ...disabledPlaceholder, property: '-webkit-text-fill-color' },
+  ],
 };
 
 const componentName$z = getComponentName('email-field');
@@ -8650,101 +8665,45 @@ const createHelperVars = (theme, prefix) => {
   return [res.theme, res.useVars, res.vars];
 };
 
-const colorGaps = {
-  darkLight: 0.4,
-  highlight: 0.8,
-  contrast: 1,
-  edgeColor: {
-    darkLight: 0.25,
-    highlight: 0.1,
-  },
-};
-
-const darken = (c, percentage) => c.darken(percentage).hex();
-
-const contrast = (c) => {
+// TODO: fix generated colors strategy
+const genDark = (c, percentage = 0.5) => c.darken(percentage).hex();
+const genLight = (c, percentage = 0.5) => c.lighten(percentage).hex();
+const genContrast = (c, percentage = 0.9) => {
   const isDark = c.isDark();
   return c
-    .mix(Color(isDark ? 'white' : 'black'), colorGaps.contrast)
+    .mix(Color(isDark ? 'white' : 'black'), percentage)
     .saturate(1)
     .hex();
 };
 
-const lighten = (c, percentage) => {
-  const isDark = c.lightness() < 0.5;
-
-  if (isDark) {
-    return c.lightness(percentage * 100).hex();
-  }
-
-  return c.lighten(percentage).hex();
-};
-
-const isNearBlack = (color) => color.luminosity() < 0.01;
-const isNearWhite = (color) => color.luminosity() > 0.99;
-
-const generateDarkColor = (color, theme) => {
-  if (color.dark) return color.dark;
-
-  if (theme === 'dark') {
-    return isNearWhite(color)
-      ? darken(color, colorGaps.edgeColor.darkLight)
-      : lighten(color, colorGaps.darkLight);
-  }
-
-  return isNearBlack(color)
-    ? lighten(color, colorGaps.edgeColor.darkLight)
-    : darken(color, colorGaps.darkLight);
-};
-
-const generateLightColor = (color, theme) => {
-  if (color.light) return color.light;
-
-  if (theme === 'dark') {
-    return isNearBlack(color)
-      ? lighten(color, colorGaps.edgeColor.darkLight)
-      : darken(color, colorGaps.darkLight);
-  }
-
-  return isNearWhite(color)
-    ? darken(color, colorGaps.edgeColor.darkLight)
-    : lighten(color, colorGaps.darkLight);
-};
-
-const generateHighlightColor = (color, theme) => {
-  if (color.highlight) return color.highlight;
-
-  if (theme === 'dark') {
-    return isNearBlack(color)
-      ? lighten(color, colorGaps.edgeColor.highlight)
-      : darken(color, colorGaps.highlight);
-  }
-
-  return isNearWhite(color)
-    ? darken(color, colorGaps.edgeColor.highlight)
-    : lighten(color, colorGaps.highlight);
-};
-
-const genColor = (color, theme) => {
+const genColor = (color) => {
   const mainColor = new Color(color.main || color);
 
-  const res = {
+  return {
     main: mainColor.hex(),
-    dark: generateDarkColor(mainColor, theme),
-    light: generateLightColor(mainColor, theme),
-    highlight: generateHighlightColor(mainColor, theme),
-    contrast: color.contrast || contrast(mainColor),
+    dark: color.dark || genDark(mainColor),
+    light: color.light || genLight(mainColor),
+    highlight: color.highlight || genLight(mainColor),
+    contrast: color.contrast || genContrast(mainColor),
   };
+};
+
+const genColors = (colors) => {
+  return Object.keys(colors).reduce((acc, colorName) => {
+    const currentColor = colors[colorName];
 
-  return res;
+    return Object.assign(acc, {
+      [colorName]: genColor(currentColor),
+    });
+  }, {});
 };
 
 const direction = 'ltr';
 
-const colors$1 = {
+const colors$1 = genColors({
   surface: {
-    dark: '#636c74',
     main: '#ffffff',
+    dark: '#636c74',
     light: '#cfd3d7',
     highlight: '#f4f5f6',
     contrast: '#181a1c',
@@ -8757,8 +8716,8 @@ const colors$1 = {
     contrast: '#ffffff',
   },
   secondary: {
-    dark: '#6410bc',
     main: '#802ed6',
+    dark: '#6410bc',
     light: '#be89f5',
     highlight: '#ede7f6',
     contrast: '#ffffff',
@@ -8777,7 +8736,7 @@ const colors$1 = {
     highlight: '#fef1f1',
     contrast: '#ffffff',
   },
-};
+});
 
 const fonts = {
   font1: {