@descope/web-components-ui 1.0.276 → 1.0.278

package/dist/cjs/index.cjs.js

@@ -393,7 +393,7 @@ const genColors = (colors) => {
 
 const direction = 'ltr';
 
-const colors = genColors({
+const colors$1 = genColors({
   surface: {
     main: '#ffffff',
     dark: '#636c74',
@@ -557,7 +557,7 @@ const shadow = {
 };
 
 const globals = {
-  colors,
+  colors: colors$1,
   typography,
   spacing,
   border,
@@ -2723,17 +2723,27 @@ var button$1 = /*#__PURE__*/Object.freeze({
   vars: vars$x
 });
 
-const { host: host$g, label: label$9, placeholder: placeholder$3, requiredIndicator: requiredIndicator$b, inputField: inputField$6, input, helperText: helperText$9, errorMessage: errorMessage$b } =
-  {
-    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$g,
+  label: label$9,
+  placeholder: placeholder$3,
+  requiredIndicator: requiredIndicator$b,
+  inputField: inputField$6,
+  input,
+  helperText: helperText$9,
+  errorMessage: errorMessage$b,
+  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
@@ -2749,6 +2759,8 @@ var textFieldMappings = {
   labelTextColor: [
     { ...label$9, property: 'color' },
     { ...requiredIndicator$b, property: 'color' },
+    { ...label$9, property: '-webkit-text-fill-color' },
+    { ...requiredIndicator$b, property: '-webkit-text-fill-color' },
   ],
   errorMessageTextColor: { ...errorMessage$b, property: 'color' },
 
@@ -2775,7 +2787,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 useHostExternalPadding = (cssVarList) => `
@@ -9880,6 +9895,50 @@ const vars = Object.keys(components).reduce(
 const defaultTheme = { globals, components: theme };
 const themeVars = { globals: vars$y, components: vars };
 
+const colors = {
+  surface: {
+    main: '#181a1c',
+    dark: '#bec4ca',
+    light: '#555f68',
+    highlight: '#22262a',
+    contrast: '#f5f6f7',
+  },
+  primary: {
+    main: '#1f80ff',
+    dark: '#71aeff',
+    light: '#004094',
+    highlight: '#00214d',
+    contrast: '#000000',
+  },
+  secondary: {
+    main: '#a665eb',
+    dark: '#b9a0f3',
+    light: '#683ae6',
+    highlight: '#361299',
+    contrast: '#000000',
+  },
+  success: {
+    main: '#27963c',
+    dark: '#8bc3a2',
+    light: '#004d0f',
+    highlight: '#001f00',
+    contrast: '#000000',
+  },
+  error: {
+    main: '#f85249',
+    dark: '#fa7c75',
+    light: '#c51107',
+    highlight: '#4a0603',
+    contrast: '#000000',
+  },
+};
+
+const darkTheme = merge({}, defaultTheme, {
+  globals: {
+    colors,
+  },
+});
+
 const componentName$1 = getComponentName('recaptcha');
 
 const observedAttributes = ['enabled', 'site-key', 'action', 'enterprise'];
@@ -10171,6 +10230,7 @@ exports.UploadFileClass = UploadFileClass;
 exports.componentsThemeManager = componentsThemeManager;
 exports.createComponentsTheme = createComponentsTheme;
 exports.createHelperVars = createHelperVars;
+exports.darkTheme = darkTheme;
 exports.defaultTheme = defaultTheme;
 exports.genColor = genColor;
 exports.genColors = genColors;