@infonomic/uikit 5.9.0 → 5.10.0

package/dist/components/chips/chip.module.css

@@ -0,0 +1,425 @@
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+@layer infonomic-components {
+
+  .chip,
+  :global(.chip) {
+    --chip-border: var(--surface-panel-border);
+    --chip-font-size: 0.9rem;
+    --chip-height: 34px;
+    --chip-padding-y: 0.35rem;
+    --chip-padding-x: 0.4rem;
+    --chip-icon-size: 1rem;
+
+    appearance: none;
+    border: 1px solid var(--chip-border);
+    display: inline-flex;
+    align-items: center;
+    gap: var(--gap-1);
+    border-radius: var(--border-radius-sm);
+    cursor: pointer;
+    line-height: 1.1;
+    font-weight: 500;
+    text-decoration: none;
+    min-height: var(--chip-height);
+    padding: var(--chip-padding-y) var(--chip-padding-x);
+    font-size: var(--chip-font-size);
+    transition: background-color var(--transition-normal), box-shadow var(--transition-normal);
+  }
+
+  .chip:disabled,
+  .chip[disabled],
+  :global(.chip):disabled,
+  :global(.chip)[disabled] {
+    pointer-events: none;
+  }
+
+  .chip:focus,
+  .chip:active,
+  :global(.chip):focus,
+  :global(.chip):active {
+    --ring-offset-color: var(--background);
+    --ring-offset-shadow: var(--ring-inset) 0 0 0 var(--ring-offset-width) var(--ring-offset-color);
+    --ring-shadow: var(--ring-inset) 0 0 0 calc(1px + var(--ring-offset-width)) var(--ring-color);
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--shadow, 0 0 #0000);
+  }
+
+  .label {
+    display: inline-flex;
+    align-items: center;
+    white-space: nowrap;
+  }
+
+  .icon {
+    width: var(--chip-icon-size);
+    height: var(--chip-icon-size);
+  }
+
+  .end-icon {
+    margin-left: 0.3rem;
+  }
+
+  .iconWrapper {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 0;
+  }
+
+  .remove {
+    width: calc(var(--chip-icon-size) * 0.85);
+    height: calc(var(--chip-icon-size) * 0.85);
+    min-height: calc(var(--chip-icon-size) * 0.85);
+  }
+
+  /* Sizes ----------------------------------------------------------- */
+  .xs,
+  :global(.chip-xs) {
+    --chip-height: 24px;
+    --chip-padding-y: 0.15rem;
+    --chip-padding-x: 0.3rem;
+    --chip-font-size: 0.75rem;
+    --chip-icon-size: 1rem;
+    gap: var(--gap-1);
+  }
+
+  .sm,
+  :global(.chip-sm) {
+    --chip-height: 28px;
+    --chip-padding-y: 0.2rem;
+    --chip-padding-x: 0.4rem;
+    --chip-font-size: 0.82rem;
+    --chip-icon-size: 1.2rem;
+  }
+
+  .md,
+  :global(.chip-md) {
+    --chip-height: 32px;
+    --chip-padding-y: 0.25rem;
+    --chip-padding-x: 0.5rem;
+    --chip-font-size: 0.9rem;
+    --chip-icon-size: 1.3rem;
+  }
+
+  .lg,
+  :global(.chip-lg) {
+    --chip-height: 36px;
+    --chip-padding-y: 0.3rem;
+    --chip-padding-x: 0.6rem;
+    --chip-font-size: 0.98rem;
+    --chip-icon-size: 1.35rem;
+  }
+
+  .xl,
+  :global(.chip-xl) {
+    --chip-height: 40px;
+    --chip-padding-y: 0.3rem;
+    --chip-padding-x: 0.7rem;
+    --chip-font-size: 1rem;
+    --chip-icon-size: 1.4rem;
+  }
+
+  /* Variants -------------------------------------------------------- */
+  /* Variants - Consuming Variables */
+  .filled,
+  :global(.chip-filled) {
+    color: var(--chip-variant-filled-foreground);
+    background-color: var(--chip-variant-filled);
+  }
+
+  .filled:hover,
+  :global(.chip-filled):hover {
+    background-color: var(--chip-variant-filled-hover);
+  }
+
+  .filled:focus,
+  .filled:active,
+  :global(.chip-filled):focus,
+  :global(.chip-filled):active {
+    --ring-color: var(--chip-ring-color);
+  }
+
+  .filled:disabled,
+  .filled[disabled],
+  :global(.chip-filled):disabled,
+  :global(.chip-filled)[disabled] {
+    background-color: var(--chip-variant-filled-disabled, oklch(from var(--chip-variant-filled) calc(l * 1.1) calc(c * 0.85) h));
+    color: var(--chip-variant-filled-foreground-disabled, oklch(from var(--chip-variant-filled-foreground) calc(l * 0.9) calc(c * 0.85) h));
+  }
+
+  /* -------------------------------------------------------- */
+  /* Weak variant for close button on selected chip */
+
+  .filled-weak,
+  :global(.chip-filled) {
+    color: var(--chip-variant-filled-weak-foreground);
+    background-color: var(--chip-variant-filled-weak);
+  }
+
+  .filled-weak:hover,
+  :global(.chip-filled):hover {
+    background-color: var(--chip-variant-filled-weak-hover);
+  }
+
+  .filled-weak:focus,
+  .filled-weak:active,
+  :global(.chip-filled):focus,
+  :global(.chip-filled):active {
+    --ring-color: var(--chip-ring-color);
+  }
+
+  .filled-weak:disabled,
+  .filled[disabled],
+  :global(.chip-filled):disabled,
+  :global(.chip-filled)[disabled] {
+    background-color: var(--chip-variant-filled-weak-disabled, oklch(from var(--chip-variant-filled-weak) calc(l * 1.1) calc(c * 0.85) h));
+    color: var(--chip-variant-filled-weak-foreground-disabled, oklch(from var(--chip-variant-filled-weak-foreground) calc(l * 0.9) calc(c * 0.85) h));
+  }
+
+  /* -------------------------------------------------------- */
+  /* Outlined variant */
+
+  .outlined,
+  :global(.chip-outlined) {
+    border: 1px solid var(--chip-variant-outlined-border);
+    color: var(--chip-variant-outlined-foreground);
+    background-color: var(--chip-variant-outlined);
+  }
+
+  .outlined:disabled,
+  .outlined[disabled],
+  :global(.chip-outlined):disabled,
+  :global(.chip-outlined)[disabled] {
+    border-color: var(--chip-variant-outlined-border-disabled, oklch(from var(--chip-variant-outlined-border) calc(l * 1.5) calc(c * 0.8) h));
+    color: var(--chip-variant-outlined-foreground-disabled, oklch(from var(--chip-variant-outlined-foreground) calc(l * 1.1) calc(c * 0.7) h));
+  }
+
+  .outlined:hover,
+  :global(.chip-outlined):hover {
+    background-color: var(--chip-variant-outlined-hover);
+  }
+
+  .outlined:focus,
+  .outlined:active,
+  :global(.chip-outlined):focus,
+  :global(.chip-outlined):active {
+    --ring-color: var(--chip-ring-color);
+  }
+
+  .text,
+  :global(.chip-text) {
+    background-color: var(--chip-variant-text);
+    color: var(--chip-variant-text-foreground);
+  }
+
+  .text:disabled,
+  .text[disabled],
+  :global(.chip-text):disabled,
+  :global(.chip-text)[disabled] {
+    color: oklch(from var(--chip-variant-text-foreground) calc(l * 1.5) calc(c * 0.5) h);
+  }
+
+  .text:hover,
+  :global(.chip-text):hover {
+    background-color: var(--chip-variant-text-hover);
+  }
+
+  .text:focus,
+  .text:active,
+  :global(.chip-text):focus,
+  :global(.chip-text):active {
+    --ring-color: var(--chip-ring-color);
+  }
+
+  /* Intents - Defining Variables */
+  .primary,
+  :global(.chip-primary) {
+    --chip-ring-color: var(--ring-primary);
+
+    /* Filled */
+    --chip-variant-filled: var(--fill-primary-strong);
+    --chip-variant-filled-foreground: var(--text-on-primary);
+    --chip-variant-filled-hover: var(--fill-primary-strong-hover);
+    --chip-variant-filled-disabled: var(--fill-primary-strong-disabled);
+    --chip-variant-filled-foreground-disabled: var(--text-on-primary-disabled);
+
+    /* Filled Weak */
+    --chip-variant-filled-weak: var(--fill-primary-weak);
+    --chip-variant-filled-weak-foreground: var(--text-on-primary);
+    --chip-variant-filled-weak-hover: var(--fill-primary-weak-hover);
+    --chip-variant-filled-weak-disabled: var(--fill-primary-weak-disabled);
+    --chip-variant-filled-weak-foreground-disabled: var(--text-on-primary-disabled);
+
+    /* Outlined */
+    --chip-variant-outlined: transparent;
+    --chip-variant-outlined-foreground: var(--text-primary-strong);
+    --chip-variant-outlined-hover: var(--fill-primary-weak);
+    --chip-variant-outlined-border: var(--stroke-primary);
+    --chip-variant-outlined-border-disabled: var(--stroke-primary-disabled);
+    --chip-variant-outlined-foreground-disabled: var(--text-primary-disabled);
+  }
+
+  .secondary,
+  :global(.chip-secondary) {
+    --chip-ring-color: var(--ring-secondary);
+
+    /* Filled */
+    --chip-variant-filled: var(--fill-secondary-strong);
+    --chip-variant-filled-foreground: var(--text-on-secondary);
+    --chip-variant-filled-hover: var(--fill-secondary-strong-hover);
+    --chip-variant-filled-disabled: var(--fill-secondary-strong-disabled);
+    --chip-variant-filled-foreground-disabled: var(--text-on-secondary-disabled);
+
+    /* Filled Weak */
+    --chip-variant-filled-weak: var(--fill-secondary-weak);
+    --chip-variant-filled-weak-foreground: var(--text-on-secondary);
+    --chip-variant-filled-weak-hover: var(--fill-secondary-weak-hover);
+    --chip-variant-filled-weak-disabled: var(--fill-secondary-weak-disabled);
+    --chip-variant-filled-weak-foreground-disabled: var(--text-on-secondary-disabled);
+
+
+    /* Outlined */
+    --chip-variant-outlined: transparent;
+    --chip-variant-outlined-foreground: var(--text-secondary-strong);
+    --chip-variant-outlined-hover: var(--fill-secondary-weak);
+    --chip-variant-outlined-border: var(--stroke-secondary);
+    --chip-variant-outlined-border-disabled: var(--stroke-secondary-disabled);
+    --chip-variant-outlined-foreground-disabled: var(--text-secondary-disabled);
+  }
+
+  .noeffect,
+  :global(.chip-noeffect) {
+    --chip-ring-color: var(--ring-noeffect);
+
+    /* Filled */
+    --chip-variant-filled: var(--fill-noeffect-strong);
+    --chip-variant-filled-foreground: var(--text-on-noeffect);
+    --chip-variant-filled-hover: var(--fill-noeffect-strong-hover);
+    --chip-variant-filled-disabled: var(--fill-noeffect-strong-disabled);
+    --chip-variant-filled-foreground-disabled: var(--text-on-noeffect-disabled);
+
+    /* Filled Weak */
+    --chip-variant-filled-weak: var(--fill-noeffect-weak);
+    --chip-variant-filled-weak-foreground: var(--text-on-noeffect);
+    --chip-variant-filled-weak-hover: var(--fill-noeffect-weak-hover);
+    --chip-variant-filled-weak-disabled: var(--fill-noeffect-weak-disabled);
+    --chip-variant-filled-weak-foreground-disabled: var(--text-on-noeffect-disabled);
+
+    /* Outlined */
+    --chip-variant-outlined: transparent;
+    --chip-variant-outlined-foreground: var(--text-noeffect-strong);
+    --chip-variant-outlined-hover: var(--fill-noeffect-weak);
+    --chip-variant-outlined-border: var(--stroke-noeffect);
+    --chip-variant-outlined-border-disabled: var(--stroke-noeffect-disabled);
+    --chip-variant-outlined-foreground-disabled: var(--text-noeffect-disabled);
+  }
+
+  .success,
+  :global(.chip-success) {
+    --chip-ring-color: var(--ring-success);
+
+    /* Filled */
+    --chip-variant-filled: var(--fill-success-strong);
+    --chip-variant-filled-foreground: var(--text-on-success);
+    --chip-variant-filled-hover: var(--fill-success-strong-hover);
+    --chip-variant-filled-disabled: var(--fill-success-strong-disabled);
+    --chip-variant-filled-foreground-disabled: var(--text-on-success-disabled);
+
+    /* Filled Weak */
+    --chip-variant-filled-weak: var(--fill-success-weak);
+    --chip-variant-filled-weak-foreground: var(--text-on-success);
+    --chip-variant-filled-weak-hover: var(--fill-success-weak-hover);
+    --chip-variant-filled-weak-disabled: var(--fill-success-weak-disabled);
+    --chip-variant-filled-weak-foreground-disabled: var(--text-on-success-disabled);
+
+
+    /* Outlined */
+    --chip-variant-outlined: transparent;
+    --chip-variant-outlined-foreground: var(--text-success-strong);
+    --chip-variant-outlined-hover: var(--fill-success-weak);
+    --chip-variant-outlined-border: var(--stroke-success);
+    --chip-variant-outlined-border-disabled: var(--stroke-success-disabled);
+    --chip-variant-outlined-foreground-disabled: var(--text-success-disabled);
+  }
+
+  .info,
+  :global(.chip-info) {
+    --chip-ring-color: var(--ring-info);
+
+    /* Filled */
+    --chip-variant-filled: var(--fill-info-strong);
+    --chip-variant-filled-foreground: var(--text-on-info);
+    --chip-variant-filled-hover: var(--fill-info-strong-hover);
+    --chip-variant-filled-disabled: var(--fill-info-strong-disabled);
+    --chip-variant-filled-foreground-disabled: var(--text-on-info-disabled);
+
+    /* Filled Weak */
+    --chip-variant-filled-weak: var(--fill-info-weak);
+    --chip-variant-filled-weak-foreground: var(--text-on-info);
+    --chip-variant-filled-weak-hover: var(--fill-info-weak-hover);
+    --chip-variant-filled-weak-disabled: var(--fill-info-weak-disabled);
+    --chip-variant-filled-weak-foreground-disabled: var(--text-on-info-disabled);
+
+    /* Outlined */
+    --chip-variant-outlined: transparent;
+    --chip-variant-outlined-foreground: var(--text-info-strong);
+    --chip-variant-outlined-hover: var(--fill-info-weak);
+    --chip-variant-outlined-border: var(--stroke-info);
+    --chip-variant-outlined-border-disabled: var(--stroke-info-disabled);
+    --chip-variant-outlined-foreground-disabled: var(--text-info-disabled);
+  }
+
+  .warning,
+  :global(.chip-warning) {
+    --chip-ring-color: var(--ring-warning);
+
+    /* Filled */
+    --chip-variant-filled: var(--fill-warning-strong);
+    --chip-variant-filled-foreground: var(--text-on-warning);
+    --chip-variant-filled-hover: var(--fill-warning-strong-hover);
+    --chip-variant-filled-disabled: var(--fill-warning-strong-disabled);
+    --chip-variant-filled-foreground-disabled: var(--text-on-warning-disabled);
+
+    /* Filled Weak */
+    --chip-variant-filled-weak: var(--fill-warning-weak);
+    --chip-variant-filled-weak-foreground: var(--text-on-warning);
+    --chip-variant-filled-weak-hover: var(--fill-warning-weak-hover);
+    --chip-variant-filled-weak-disabled: var(--fill-warning-weak-disabled);
+    --chip-variant-filled-weak-foreground-disabled: var(--text-on-warning-disabled);
+
+    /* Outlined */
+    --chip-variant-outlined: transparent;
+    --chip-variant-outlined-foreground: var(--text-warning-strong);
+    --chip-variant-outlined-hover: var(--fill-warning-weak);
+    --chip-variant-outlined-border: var(--stroke-warning);
+    --chip-variant-outlined-border-disabled: var(--stroke-warning-disabled);
+    --chip-variant-outlined-foreground-disabled: var(--text-warning-disabled);
+  }
+
+  .danger,
+  :global(.chip-danger) {
+    --chip-ring-color: var(--ring-danger);
+
+    /* Filled */
+    --chip-variant-filled: var(--fill-danger-strong);
+    --chip-variant-filled-foreground: var(--text-on-danger);
+    --chip-variant-filled-hover: var(--fill-danger-strong-hover);
+    --chip-variant-filled-disabled: var(--fill-danger-strong-disabled);
+    --chip-variant-filled-foreground-disabled: var(--text-on-danger-disabled);
+
+    /* Filled Weak */
+    --chip-variant-filled-weak: var(--fill-danger-weak);
+    --chip-variant-filled-weak-foreground: var(--text-on-danger);
+    --chip-variant-filled-weak-hover: var(--fill-danger-weak-hover);
+    --chip-variant-filled-weak-disabled: var(--fill-danger-weak-disabled);
+    --chip-variant-filled-weak-foreground-disabled: var(--text-on-danger-disabled);
+
+    /* Outlined */
+    --chip-variant-outlined: transparent;
+    --chip-variant-outlined-foreground: var(--text-danger-strong);
+    --chip-variant-outlined-hover: var(--fill-danger-weak);
+    --chip-variant-outlined-border: var(--stroke-danger);
+    --chip-variant-outlined-border-disabled: var(--stroke-danger-disabled);
+    --chip-variant-outlined-foreground-disabled: var(--text-danger-disabled);
+  }
+}

package/dist/components/chips/chip.module.js

@@ -0,0 +1,28 @@
+import "./chip_module.css";
+const chip_module = {
+    chip: "chip-AhhT7N",
+    label: "label-gboVZj",
+    icon: "icon-Kyxxoz",
+    "end-icon": "end-icon-HThd0U",
+    endIcon: "end-icon-HThd0U",
+    iconWrapper: "iconWrapper-vJCUgN",
+    remove: "remove-lw7BYl",
+    xs: "xs-APyCes",
+    sm: "sm-J7CErO",
+    md: "md-Dqq6Vk",
+    lg: "lg-V_RSlk",
+    xl: "xl-XTZIz8",
+    filled: "filled-IPrtjU",
+    "filled-weak": "filled-weak-R_EHbg",
+    filledWeak: "filled-weak-R_EHbg",
+    outlined: "outlined-ND2TjQ",
+    text: "text-mY_7iA",
+    primary: "primary-Dknrel",
+    secondary: "secondary-Oeq6j4",
+    noeffect: "noeffect-DIkyR0",
+    success: "success-Qciyio",
+    info: "info-Ddpo4H",
+    warning: "warning-ua4NGH",
+    danger: "danger-ftQS7Y"
+};
+export { chip_module as default };