@dynatrace/strato-components 0.84.51 → 0.85.10

package/styles/field.css

@@ -0,0 +1,208 @@
+.field_fieldColorsCSS_color_primary__bx32h6 {
+  --vars_text__bx32h0: var(--dt-colors-text-primary-default, #454cc9);
+  --vars_icon__bx32h1: var(--dt-colors-icon-primary-default, #454cc9);
+}
+.field_fieldColorsCSS_color_primary__bx32h6:hover {
+  --vars_background__bx32h3: var(--dt-colors-background-field-primary-default-hover, #ccd3f3);
+}
+.field_fieldColorsCSS_color_primary__bx32h6:active {
+  --vars_background__bx32h3: var(--dt-colors-background-field-primary-default-active, #c3cbf1);
+}
+.field_fieldColorsCSS_color_neutral__bx32h7 {
+  --vars_text__bx32h0: var(--dt-colors-text-neutral-default, #2b2a58);
+  --vars_icon__bx32h1: var(--dt-colors-icon-neutral-default, #2b2a58);
+}
+.field_fieldColorsCSS_color_neutral__bx32h7:hover {
+  --vars_background__bx32h3: var(--dt-colors-background-field-neutral-default-hover, #d2d3e1);
+}
+.field_fieldColorsCSS_color_neutral__bx32h7:active {
+  --vars_background__bx32h3: var(--dt-colors-background-field-neutral-default-active, #cacbdc);
+}
+.field_fieldColorsCSS_color_success__bx32h8 {
+  --vars_text__bx32h0: var(--dt-colors-text-success-default, #2c6360);
+  --vars_icon__bx32h1: var(--dt-colors-icon-success-default, #2c6360);
+}
+.field_fieldColorsCSS_color_success__bx32h8:hover {
+  --vars_background__bx32h3: var(--dt-colors-background-field-success-default-hover, #cad6d7);
+}
+.field_fieldColorsCSS_color_success__bx32h8:active {
+  --vars_background__bx32h3: var(--dt-colors-background-field-success-default-active, #c0cfcf);
+}
+.field_fieldColorsCSS_color_critical__bx32h9 {
+  --vars_text__bx32h0: var(--dt-colors-text-critical-default, #b80031);
+  --vars_icon__bx32h1: var(--dt-colors-icon-critical-default, #b80031);
+}
+.field_fieldColorsCSS_color_critical__bx32h9:hover {
+  --vars_background__bx32h3: var(--dt-colors-background-field-critical-default-hover, #f1cdcf);
+}
+.field_fieldColorsCSS_color_critical__bx32h9:active {
+  --vars_background__bx32h3: var(--dt-colors-background-field-critical-default-active, #f0c4c5);
+}
+.field_fieldColorsCSS_color_warning__bx32ha {
+  --vars_text__bx32h0: var(--dt-colors-text-warning-default, #805100);
+  --vars_icon__bx32h1: var(--dt-colors-icon-warning-default, #805100);
+}
+.field_fieldColorsCSS_color_warning__bx32ha:hover {
+  --vars_background__bx32h3: var(--dt-colors-background-field-warning-default-hover, #f4e5d5);
+}
+.field_fieldColorsCSS_color_warning__bx32ha:active {
+  --vars_background__bx32h3: var(--dt-colors-background-field-warning-default-active, #f5e1cd);
+}
+.field_fieldColorsCSS_variant_default__bx32hb {
+  --vars_background__bx32h3: transparent;
+  --vars_backgroundStatic__bx32h2: transparent;
+}
+.field_fieldColorsCSS_variant_accent__bx32hd {
+  --vars_text__bx32h0: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --vars_icon__bx32h1: var(--dt-colors-icon-neutral-on-accent-default, #f3f3f6);
+}
+.field_fieldColorsCSS_compound_0__bx32he {
+  --vars_background__bx32h3: var(--dt-colors-background-field-primary-emphasized, #d6dbf4);
+  --vars_backgroundStatic__bx32h2: var(--dt-colors-background-field-primary-emphasized, #d6dbf4);
+}
+.field_fieldColorsCSS_compound_1__bx32hf {
+  --vars_text__bx32h0: var(--dt-colors-text-primary-on-accent-default, #f4f4fb);
+  --vars_icon__bx32h1: var(--dt-colors-icon-primary-on-accent-default, #f4f4fb);
+  --vars_background__bx32h3: var(--dt-colors-background-field-primary-accent, #474ecf);
+  --vars_backgroundStatic__bx32h2: var(--dt-colors-background-field-primary-accent, #474ecf);
+}
+.field_fieldColorsCSS_compound_1__bx32hf:hover {
+  --vars_background__bx32h3: var(--dt-colors-background-field-primary-accent-hover, #3b3ebe);
+}
+.field_fieldColorsCSS_compound_1__bx32hf:active {
+  --vars_background__bx32h3: var(--dt-colors-background-field-primary-accent-active, #312cad);
+}
+.field_fieldColorsCSS_compound_2__bx32hg {
+  --vars_background__bx32h3: var(--dt-colors-background-field-neutral-emphasized, #dadbe7);
+  --vars_backgroundStatic__bx32h2: var(--dt-colors-background-field-neutral-emphasized, #dadbe7);
+}
+.field_fieldColorsCSS_compound_3__bx32hh {
+  --vars_text__bx32h0: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --vars_icon__bx32h1: var(--dt-colors-icon-neutral-on-accent-default, #f3f3f6);
+  --vars_background__bx32h3: var(--dt-colors-background-field-neutral-accent, #5a5b8c);
+  --vars_backgroundStatic__bx32h2: var(--dt-colors-background-field-neutral-accent, #5a5b8c);
+}
+.field_fieldColorsCSS_compound_3__bx32hh:hover {
+  --vars_background__bx32h3: var(--dt-colors-background-field-neutral-accent-hover, #4c4d7d);
+}
+.field_fieldColorsCSS_compound_3__bx32hh:active {
+  --vars_background__bx32h3: var(--dt-colors-background-field-neutral-accent-active, #3f3f6e);
+}
+.field_fieldColorsCSS_compound_4__bx32hi {
+  --vars_background__bx32h3: var(--dt-colors-background-field-success-emphasized, #d4dddf);
+  --vars_backgroundStatic__bx32h2: var(--dt-colors-background-field-success-emphasized, #d4dddf);
+}
+.field_fieldColorsCSS_compound_5__bx32hj {
+  --vars_background__bx32h3: var(--dt-colors-background-field-success-accent, #2f6863);
+  --vars_backgroundStatic__bx32h2: var(--dt-colors-background-field-success-accent, #2f6863);
+}
+.field_fieldColorsCSS_compound_5__bx32hj:hover {
+  --vars_background__bx32h3: var(--dt-colors-background-field-success-accent-hover, #1f5a55);
+}
+.field_fieldColorsCSS_compound_5__bx32hj:active {
+  --vars_background__bx32h3: var(--dt-colors-background-field-success-accent-active, #0d4c47);
+}
+.field_fieldColorsCSS_compound_6__bx32hk {
+  --vars_background__bx32h3: var(--dt-colors-background-field-critical-emphasized, #f2d7d9);
+  --vars_backgroundStatic__bx32h2: var(--dt-colors-background-field-critical-emphasized, #f2d7d9);
+}
+.field_fieldColorsCSS_compound_7__bx32hl {
+  --vars_background__bx32h3: var(--dt-colors-background-field-critical-accent, #c4233b);
+  --vars_backgroundStatic__bx32h2: var(--dt-colors-background-field-critical-accent, #c4233b);
+  --vars_text__bx32h0: var(--dt-colors-text-critical-on-accent-default, #f9f1f3);
+  --vars_icon__bx32h1: var(--dt-colors-icon-critical-on-accent-default, #f9f1f3);
+}
+.field_fieldColorsCSS_compound_7__bx32hl:hover {
+  --vars_background__bx32h3: var(--dt-colors-background-field-critical-accent-hover, #b2012d);
+}
+.field_fieldColorsCSS_compound_7__bx32hl:active {
+  --vars_background__bx32h3: var(--dt-colors-background-field-critical-accent-active, #a0001f);
+}
+.field_fieldColorsCSS_compound_8__bx32hm {
+  --vars_background__bx32h3: var(--dt-colors-background-field-warning-emphasized, #f4e8de);
+  --vars_backgroundStatic__bx32h2: var(--dt-colors-background-field-warning-emphasized, #f4e8de);
+}
+.field_fieldColorsCSS_compound_9__bx32hn {
+  --vars_text__bx32h0: var(--dt-colors-text-warning-on-accent-default, #272025);
+  --vars_icon__bx32h1: var(--dt-colors-icon-warning-on-accent-default, #272025);
+  --vars_background__bx32h3: var(--dt-colors-background-field-warning-accent, #eca440);
+  --vars_backgroundStatic__bx32h2: var(--dt-colors-background-field-warning-accent, #eca440);
+}
+.field_fieldColorsCSS_compound_9__bx32hn:hover {
+  --vars_background__bx32h3: var(--dt-colors-background-field-warning-accent-hover, #fdb452);
+}
+.field_fieldColorsCSS_compound_9__bx32hn:active {
+  --vars_background__bx32h3: var(--dt-colors-background-field-warning-accent-active, #ffc56a);
+}
+.field_fieldColorsCSS_compound_10__bx32ho {
+  --vars_text__bx32h0: var(--dt-colors-text-neutral-disabled, #54558780);
+  --vars_icon__bx32h1: var(--dt-colors-icon-neutral-disabled, #54558780);
+  --vars_background__bx32h3: var(--dt-colors-background-field-neutral-disabled, #dadbe780);
+  --vars_backgroundStatic__bx32h2: var(--dt-colors-background-field-neutral-disabled, #dadbe780);
+}
+.field_fieldColorsCSS_compound_10__bx32ho:hover {
+  --vars_background__bx32h3: var(--dt-colors-background-field-neutral-disabled, #dadbe780);
+}
+.field_fieldColorsCSS_compound_10__bx32ho:active {
+  --vars_background__bx32h3: var(--dt-colors-background-field-neutral-disabled, #dadbe780);
+}
+.field_fieldColorsCSS_compound_11__bx32hp {
+  --vars_text__bx32h0: var(--dt-colors-text-primary-disabled, #54558780);
+  --vars_icon__bx32h1: var(--dt-colors-icon-primary-disabled, #54558780);
+  --vars_background__bx32h3: var(--dt-colors-background-field-primary-disabled, #dadbe780);
+  --vars_backgroundStatic__bx32h2: var(--dt-colors-background-field-primary-disabled, #dadbe780);
+}
+.field_fieldColorsCSS_compound_11__bx32hp:hover {
+  --vars_background__bx32h3: var(--dt-colors-background-field-primary-disabled, #dadbe780);
+}
+.field_fieldColorsCSS_compound_11__bx32hp:active {
+  --vars_background__bx32h3: var(--dt-colors-background-field-primary-disabled, #dadbe780);
+}
+.field_fieldColorsCSS_compound_12__bx32hq {
+  --vars_text__bx32h0: var(--dt-colors-text-warning-disabled, #54558780);
+  --vars_icon__bx32h1: var(--dt-colors-icon-warning-disabled, #54558780);
+  --vars_background__bx32h3: var(--dt-colors-background-field-warning-disabled, #dadbe780);
+  --vars_backgroundStatic__bx32h2: var(--dt-colors-background-field-warning-disabled, #dadbe780);
+}
+.field_fieldColorsCSS_compound_12__bx32hq:hover {
+  --vars_background__bx32h3: var(--dt-colors-background-field-warning-disabled, #dadbe780);
+}
+.field_fieldColorsCSS_compound_12__bx32hq:active {
+  --vars_background__bx32h3: var(--dt-colors-background-field-warning-disabled, #dadbe780);
+}
+.field_fieldColorsCSS_compound_13__bx32hr {
+  --vars_text__bx32h0: var(--dt-colors-text-success-disabled, #54558780);
+  --vars_icon__bx32h1: var(--dt-colors-icon-success-disabled, #54558780);
+  --vars_background__bx32h3: var(--dt-colors-background-field-success-disabled, #dadbe780);
+  --vars_backgroundStatic__bx32h2: var(--dt-colors-background-field-success-disabled, #dadbe780);
+}
+.field_fieldColorsCSS_compound_13__bx32hr:hover {
+  --vars_background__bx32h3: var(--dt-colors-background-field-success-disabled, #dadbe780);
+}
+.field_fieldColorsCSS_compound_13__bx32hr:active {
+  --vars_background__bx32h3: var(--dt-colors-background-field-success-disabled, #dadbe780);
+}
+.field_fieldColorsCSS_compound_14__bx32hs {
+  --vars_text__bx32h0: var(--dt-colors-text-critical-disabled, #54558780);
+  --vars_icon__bx32h1: var(--dt-colors-icon-critical-disabled, #54558780);
+  --vars_background__bx32h3: var(--dt-colors-background-field-critical-disabled, #dadbe780);
+  --vars_backgroundStatic__bx32h2: var(--dt-colors-background-field-critical-disabled, #dadbe780);
+}
+.field_fieldColorsCSS_compound_14__bx32hs:hover {
+  --vars_background__bx32h3: var(--dt-colors-background-field-critical-disabled, #dadbe780);
+}
+.field_fieldColorsCSS_compound_14__bx32hs:active {
+  --vars_background__bx32h3: var(--dt-colors-background-field-critical-disabled, #dadbe780);
+}
+.field_fieldColorsCSS_compound_15__bx32ht {
+  --vars_text__bx32h0: var(--dt-colors-text-neutral-disabled, #54558780);
+  --vars_icon__bx32h1: var(--dt-colors-icon-neutral-disabled, #54558780);
+  --vars_background__bx32h3: transparent;
+  --vars_backgroundStatic__bx32h2: transparent;
+}
+.field_fieldColorsCSS_compound_15__bx32ht:hover {
+  --vars_background__bx32h3: transparent;
+}
+.field_fieldColorsCSS_compound_15__bx32ht:active {
+  --vars_background__bx32h3: transparent;
+}

package/styles/field.sty.d.ts

@@ -0,0 +1,102 @@
+declare const vars: {
+    text: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    icon: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    backgroundStatic: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+export declare const fieldColorsCSS: import("@vanilla-extract/recipes").RuntimeFn<{
+    disabled: {
+        true: {};
+    };
+    color: {
+        primary: {
+            vars: {
+                [x: string]: string;
+            };
+            ':hover': {
+                vars: {
+                    [x: string]: string;
+                };
+            };
+            ':active': {
+                vars: {
+                    [x: string]: string;
+                };
+            };
+        };
+        neutral: {
+            vars: {
+                [x: string]: string;
+            };
+            ':hover': {
+                vars: {
+                    [x: string]: string;
+                };
+            };
+            ':active': {
+                vars: {
+                    [x: string]: string;
+                };
+            };
+        };
+        success: {
+            vars: {
+                [x: string]: string;
+            };
+            ':hover': {
+                vars: {
+                    [x: string]: string;
+                };
+            };
+            ':active': {
+                vars: {
+                    [x: string]: string;
+                };
+            };
+        };
+        critical: {
+            vars: {
+                [x: string]: string;
+            };
+            ':hover': {
+                vars: {
+                    [x: string]: string;
+                };
+            };
+            ':active': {
+                vars: {
+                    [x: string]: string;
+                };
+            };
+        };
+        warning: {
+            vars: {
+                [x: string]: string;
+            };
+            ':hover': {
+                vars: {
+                    [x: string]: string;
+                };
+            };
+            ':active': {
+                vars: {
+                    [x: string]: string;
+                };
+            };
+        };
+    };
+    variant: {
+        default: {
+            vars: {
+                [x: string]: string;
+            };
+        };
+        emphasized: {};
+        accent: {
+            vars: {
+                [x: string]: string;
+            };
+        };
+    };
+}>;
+export { vars as fieldColorVars };

package/styles/field.sty.js

@@ -0,0 +1,27 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var field_css_exports = {};
+__export(field_css_exports, {
+  fieldColorVars: () => fieldColorVars,
+  fieldColorsCSS: () => fieldColorsCSS
+});
+module.exports = __toCommonJS(field_css_exports);
+var import_field_css_ts_vanilla = require("./field.css");
+var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
+var fieldColorVars = { text: "var(--vars_text__bx32h0)", icon: "var(--vars_icon__bx32h1)", backgroundStatic: "var(--vars_backgroundStatic__bx32h2)", background: "var(--vars_background__bx32h3)" };
+var fieldColorsCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "field__bx32h4", variantClassNames: { disabled: { true: "field_fieldColorsCSS_disabled_true__bx32h5" }, color: { primary: "field_fieldColorsCSS_color_primary__bx32h6", neutral: "field_fieldColorsCSS_color_neutral__bx32h7", success: "field_fieldColorsCSS_color_success__bx32h8", critical: "field_fieldColorsCSS_color_critical__bx32h9", warning: "field_fieldColorsCSS_color_warning__bx32ha" }, variant: { "default": "field_fieldColorsCSS_variant_default__bx32hb", emphasized: "field_fieldColorsCSS_variant_emphasized__bx32hc", accent: "field_fieldColorsCSS_variant_accent__bx32hd" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", variant: "emphasized" }, "field_fieldColorsCSS_compound_0__bx32he"], [{ color: "primary", variant: "accent" }, "field_fieldColorsCSS_compound_1__bx32hf"], [{ color: "neutral", variant: "emphasized" }, "field_fieldColorsCSS_compound_2__bx32hg"], [{ color: "neutral", variant: "accent" }, "field_fieldColorsCSS_compound_3__bx32hh"], [{ color: "success", variant: "emphasized" }, "field_fieldColorsCSS_compound_4__bx32hi"], [{ color: "success", variant: "accent" }, "field_fieldColorsCSS_compound_5__bx32hj"], [{ color: "critical", variant: "emphasized" }, "field_fieldColorsCSS_compound_6__bx32hk"], [{ color: "critical", variant: "accent" }, "field_fieldColorsCSS_compound_7__bx32hl"], [{ color: "warning", variant: "emphasized" }, "field_fieldColorsCSS_compound_8__bx32hm"], [{ color: "warning", variant: "accent" }, "field_fieldColorsCSS_compound_9__bx32hn"], [{ color: "neutral", disabled: true }, "field_fieldColorsCSS_compound_10__bx32ho"], [{ color: "primary", disabled: true }, "field_fieldColorsCSS_compound_11__bx32hp"], [{ color: "warning", disabled: true }, "field_fieldColorsCSS_compound_12__bx32hq"], [{ color: "success", disabled: true }, "field_fieldColorsCSS_compound_13__bx32hr"], [{ color: "critical", disabled: true }, "field_fieldColorsCSS_compound_14__bx32hs"], [{ variant: "default", disabled: true }, "field_fieldColorsCSS_compound_15__bx32ht"]] });