@infonomic/uikit 5.9.0 → 5.11.0

package/src/components/button/button.module.css

@@ -1,6 +1,7 @@
 @layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
 
 @layer infonomic-components {
+
   .button,
   :global(.button) {
     border: none;
@@ -113,6 +114,35 @@
     color: var(--button-variant-filled-foreground-disabled, oklch(from var(--button-variant-filled-foreground) calc(l * 0.9) calc(c * 0.85) h));
   }
 
+  /* -------------------------------------------------------- */
+  /* Weak variant for close button on selected button */
+
+  .filled-weak,
+  :global(.button-filled) {
+    color: var(--button-variant-filled-weak-foreground);
+    background-color: var(--button-variant-filled-weak);
+  }
+
+  .filled-weak:hover,
+  :global(.button-filled):hover {
+    background-color: var(--button-variant-filled-weak-hover);
+  }
+
+  .filled-weak:focus,
+  .filled-weak:active,
+  :global(.button-filled):focus,
+  :global(.button-filled):active {
+    --ring-color: var(--button-ring-color);
+  }
+
+  .filled-weak:disabled,
+  .filled[disabled],
+  :global(.button-filled):disabled,
+  :global(.button-filled)[disabled] {
+    background-color: var(--button-variant-filled-weak-disabled, oklch(from var(--button-variant-filled-weak) calc(l * 1.1) calc(c * 0.85) h));
+    color: var(--button-variant-filled-weak-foreground-disabled, oklch(from var(--button-variant-filled-weak-foreground) calc(l * 0.9) calc(c * 0.85) h));
+  }
+
   .outlined,
   :global(.button-outlined) {
     border: 1px solid var(--button-variant-outlined-border);
@@ -201,14 +231,21 @@
   .primary,
   :global(.button-primary) {
     --button-ring-color: var(--ring-primary);
-    
+
     /* Filled */
     --button-variant-filled: var(--fill-primary-strong);
     --button-variant-filled-foreground: var(--text-on-primary);
     --button-variant-filled-hover: var(--fill-primary-strong-hover);
     --button-variant-filled-disabled: var(--fill-primary-strong-disabled);
     --button-variant-filled-foreground-disabled: var(--text-on-primary-disabled);
-    
+
+    /* Filled Weak */
+    --button-variant-filled-weak: var(--fill-primary-weak);
+    --button-variant-filled-weak-foreground: var(--text-primary-weak);
+    --button-variant-filled-weak-hover: var(--fill-primary-weak-hover);
+    --button-variant-filled-weak-disabled: var(--fill-primary-weak-disabled);
+    --button-variant-filled-weak-foreground-disabled: var(--text-on-primary-disabled);
+
     /* Outlined */
     --button-variant-outlined: transparent;
     --button-variant-outlined-foreground: var(--text-primary-strong);
@@ -216,12 +253,12 @@
     --button-variant-outlined-border: var(--stroke-primary);
     --button-variant-outlined-border-disabled: var(--stroke-primary-disabled);
     --button-variant-outlined-foreground-disabled: var(--text-primary-disabled);
-    
+
     /* Text */
     --button-variant-text: transparent;
     --button-variant-text-foreground: var(--text-primary-weak);
     --button-variant-text-hover: var(--fill-primary-weak-hover);
-    
+
     /* Gradient */
     --button-variant-gradient-start: var(--gradient-primary-start);
     --button-variant-gradient-end: var(--gradient-primary-end);
@@ -233,14 +270,21 @@
   .secondary,
   :global(.button-secondary) {
     --button-ring-color: var(--ring-secondary);
-    
+
     /* Filled */
     --button-variant-filled: var(--fill-secondary-strong);
     --button-variant-filled-foreground: var(--text-on-secondary);
     --button-variant-filled-hover: var(--fill-secondary-strong-hover);
     --button-variant-filled-disabled: var(--fill-secondary-strong-disabled);
     --button-variant-filled-foreground-disabled: var(--text-on-secondary-disabled);
-    
+
+    /* Filled Weak */
+    --button-variant-filled-weak: var(--fill-secondary-weak);
+    --button-variant-filled-weak-foreground: var(--text-secondary-weak);
+    --button-variant-filled-weak-hover: var(--fill-secondary-weak-hover);
+    --button-variant-filled-weak-disabled: var(--fill-secondary-weak-disabled);
+    --button-variant-filled-weak-foreground-disabled: var(--text-secondary-weak-disabled);
+
     /* Outlined */
     --button-variant-outlined: transparent;
     --button-variant-outlined-foreground: var(--text-secondary-strong);
@@ -248,12 +292,12 @@
     --button-variant-outlined-border: var(--stroke-secondary);
     --button-variant-outlined-border-disabled: var(--stroke-secondary-disabled);
     --button-variant-outlined-foreground-disabled: var(--text-secondary-disabled);
-    
+
     /* Text */
     --button-variant-text: transparent;
     --button-variant-text-foreground: var(--text-secondary-weak);
     --button-variant-text-hover: var(--fill-secondary-weak-hover);
-    
+
     /* Gradient */
     --button-variant-gradient-start: var(--gradient-secondary-start);
     --button-variant-gradient-end: var(--gradient-secondary-end);
@@ -265,14 +309,21 @@
   .noeffect,
   :global(.button-noeffect) {
     --button-ring-color: var(--ring-noeffect);
-    
+
     /* Filled */
     --button-variant-filled: var(--fill-noeffect-strong);
     --button-variant-filled-foreground: var(--text-on-noeffect);
     --button-variant-filled-hover: var(--fill-noeffect-strong-hover);
     --button-variant-filled-disabled: var(--fill-noeffect-strong-disabled);
     --button-variant-filled-foreground-disabled: var(--text-on-noeffect-disabled);
-    
+
+    /* Filled Weak */
+    --button-variant-filled-weak: var(--fill-noeffect-weak);
+    --button-variant-filled-weak-foreground: var(--text-on-noeffect);
+    --button-variant-filled-weak-hover: var(--fill-noeffect-weak-hover);
+    --button-variant-filled-weak-disabled: var(--fill-noeffect-weak-disabled);
+    --button-variant-filled-weak-foreground-disabled: var(--text-on-noeffect-disabled);
+
     /* Outlined */
     --button-variant-outlined: transparent;
     --button-variant-outlined-foreground: var(--text-noeffect-strong);
@@ -280,12 +331,12 @@
     --button-variant-outlined-border: var(--stroke-noeffect);
     --button-variant-outlined-border-disabled: var(--stroke-noeffect-disabled);
     --button-variant-outlined-foreground-disabled: var(--text-noeffect-disabled);
-    
+
     /* Text */
     --button-variant-text: transparent;
     --button-variant-text-foreground: var(--text-noeffect-weak);
     --button-variant-text-hover: var(--fill-noeffect-weak-hover);
-    
+
     /* Gradient */
     --button-variant-gradient-start: var(--gradient-noeffect-start);
     --button-variant-gradient-end: var(--gradient-noeffect-end);
@@ -297,14 +348,21 @@
   .success,
   :global(.button-success) {
     --button-ring-color: var(--ring-success);
-    
+
     /* Filled */
     --button-variant-filled: var(--fill-success-strong);
     --button-variant-filled-foreground: var(--text-on-success);
     --button-variant-filled-hover: var(--fill-success-strong-hover);
     --button-variant-filled-disabled: var(--fill-success-strong-disabled);
     --button-variant-filled-foreground-disabled: var(--text-on-success-disabled);
-    
+
+    /* Filled Weak */
+    --button-variant-filled-weak: var(--fill-success-weak);
+    --button-variant-filled-weak-foreground: var(--text-success-weak);
+    --button-variant-filled-weak-hover: var(--fill-success-weak-hover);
+    --button-variant-filled-weak-disabled: var(--fill-success-weak-disabled);
+    --button-variant-filled-weak-foreground-disabled: var(--text-success-weak-disabled);
+
     /* Outlined */
     --button-variant-outlined: transparent;
     --button-variant-outlined-foreground: var(--text-success-strong);
@@ -312,12 +370,12 @@
     --button-variant-outlined-border: var(--stroke-success);
     --button-variant-outlined-border-disabled: var(--stroke-success-disabled);
     --button-variant-outlined-foreground-disabled: var(--text-success-disabled);
-    
+
     /* Text */
     --button-variant-text: transparent;
     --button-variant-text-foreground: var(--text-success-weak);
     --button-variant-text-hover: var(--fill-success-weak-hover);
-    
+
     /* Gradient */
     --button-variant-gradient-start: var(--gradient-success-start);
     --button-variant-gradient-end: var(--gradient-success-end);
@@ -329,14 +387,21 @@
   .info,
   :global(.button-info) {
     --button-ring-color: var(--ring-info);
-    
+
     /* Filled */
     --button-variant-filled: var(--fill-info-strong);
     --button-variant-filled-foreground: var(--text-on-info);
     --button-variant-filled-hover: var(--fill-info-strong-hover);
     --button-variant-filled-disabled: var(--fill-info-strong-disabled);
     --button-variant-filled-foreground-disabled: var(--text-on-info-disabled);
-    
+
+    /* Filled Weak */
+    --button-variant-filled-weak: var(--fill-info-weak);
+    --button-variant-filled-weak-foreground: var(--text-info-weak);
+    --button-variant-filled-weak-hover: var(--fill-info-weak-hover);
+    --button-variant-filled-weak-disabled: var(--fill-info-weak-disabled);
+    --button-variant-filled-weak-foreground-disabled: var(--text-info-weak-disabled);
+
     /* Outlined */
     --button-variant-outlined: transparent;
     --button-variant-outlined-foreground: var(--text-info-strong);
@@ -344,12 +409,12 @@
     --button-variant-outlined-border: var(--stroke-info);
     --button-variant-outlined-border-disabled: var(--stroke-info-disabled);
     --button-variant-outlined-foreground-disabled: var(--text-info-disabled);
-    
+
     /* Text */
     --button-variant-text: transparent;
     --button-variant-text-foreground: var(--text-info-weak);
     --button-variant-text-hover: var(--fill-info-weak-hover);
-    
+
     /* Gradient */
     --button-variant-gradient-start: var(--gradient-info-start);
     --button-variant-gradient-end: var(--gradient-info-end);
@@ -361,14 +426,21 @@
   .warning,
   :global(.button-warning) {
     --button-ring-color: var(--ring-warning);
-    
+
     /* Filled */
     --button-variant-filled: var(--fill-warning-strong);
     --button-variant-filled-foreground: var(--text-on-warning);
     --button-variant-filled-hover: var(--fill-warning-strong-hover);
     --button-variant-filled-disabled: var(--fill-warning-strong-disabled);
     --button-variant-filled-foreground-disabled: var(--text-on-warning-disabled);
-    
+
+    /* Filled Weak */
+    --button-variant-filled-weak: var(--fill-warning-weak);
+    --button-variant-filled-weak-foreground: var(--text-warning-weak);
+    --button-variant-filled-weak-hover: var(--fill-warning-weak-hover);
+    --button-variant-filled-weak-disabled: var(--fill-warning-weak-disabled);
+    --button-variant-filled-weak-foreground-disabled: var(--text-warning-weak-disabled);
+
     /* Outlined */
     --button-variant-outlined: transparent;
     --button-variant-outlined-foreground: var(--text-warning-strong);
@@ -376,12 +448,12 @@
     --button-variant-outlined-border: var(--stroke-warning);
     --button-variant-outlined-border-disabled: var(--stroke-warning-disabled);
     --button-variant-outlined-foreground-disabled: var(--text-warning-disabled);
-    
+
     /* Text */
     --button-variant-text: transparent;
     --button-variant-text-foreground: var(--text-warning-weak);
     --button-variant-text-hover: var(--fill-warning-weak-hover);
-    
+
     /* Gradient */
     --button-variant-gradient-start: var(--gradient-warning-start);
     --button-variant-gradient-end: var(--gradient-warning-end);
@@ -393,14 +465,21 @@
   .danger,
   :global(.button-danger) {
     --button-ring-color: var(--ring-danger);
-    
+
     /* Filled */
     --button-variant-filled: var(--fill-danger-strong);
     --button-variant-filled-foreground: var(--text-on-danger);
     --button-variant-filled-hover: var(--fill-danger-strong-hover);
     --button-variant-filled-disabled: var(--fill-danger-strong-disabled);
     --button-variant-filled-foreground-disabled: var(--text-on-danger-disabled);
-    
+
+    /* Filled Weak */
+    --button-variant-filled-weak: var(--fill-danger-weak);
+    --button-variant-filled-weak-foreground: var(--text-danger-weak);
+    --button-variant-filled-weak-hover: var(--fill-danger-weak-hover);
+    --button-variant-filled-weak-disabled: var(--fill-danger-weak-disabled);
+    --button-variant-filled-weak-foreground-disabled: var(--text-danger-weak-disabled);
+
     /* Outlined */
     --button-variant-outlined: transparent;
     --button-variant-outlined-foreground: var(--text-danger-strong);
@@ -408,12 +487,12 @@
     --button-variant-outlined-border: var(--stroke-danger);
     --button-variant-outlined-border-disabled: var(--stroke-danger-disabled);
     --button-variant-outlined-foreground-disabled: var(--text-danger-disabled);
-    
+
     /* Text */
     --button-variant-text: transparent;
     --button-variant-text-foreground: var(--text-danger-weak);
     --button-variant-text-hover: var(--fill-danger-weak-hover);
-    
+
     /* Gradient */
     --button-variant-gradient-start: var(--gradient-danger-start);
     --button-variant-gradient-end: var(--gradient-danger-end);

package/src/components/chips/@types/chip.ts

@@ -0,0 +1,7 @@
+import type { Intent, Size } from '../../@types/shared.js'
+
+export const chipVariant = ['assist', 'selectable', 'removable', 'selectable-removable'] as const
+export type ChipVariant = (typeof chipVariant)[number]
+
+export type ChipIntent = Intent
+export type ChipSize = Size