@infonomic/uikit 5.2.1 → 5.4.0

package/dist/components/button/button.module.css

@@ -0,0 +1,431 @@
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+@layer infonomic-components {
+  .button,
+  :global(.button) {
+    border: none;
+    cursor: pointer;
+    font-weight: normal;
+    text-align: center;
+    display: inline-flex;
+    gap: var(--gap-2);
+    line-height: 0;
+    align-items: center;
+    white-space: nowrap;
+    justify-content: center;
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+    transition: background-color var(--transition-normal), box-shadow var(--transition-normal);
+    border-radius: var(--border-radius-sm);
+  }
+
+  .button:disabled,
+  .button[disabled],
+  :global(.button):disabled,
+  :global(.button)[disabled] {
+    pointer-events: none;
+  }
+
+  .button:focus,
+  .button:active,
+  :global(.button):focus,
+  :global(.button):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);
+  }
+
+  .button.square,
+  :global(.button-square) {
+    aspect-ratio: 1 / 1;
+    padding: 0;
+    border-radius: var(--border-radius-sm);
+  }
+
+  .button.round,
+  :global(.button-round) {
+    aspect-ratio: 1 / 1;
+    padding: 0;
+    border-radius: var(--border-radius-full);
+  }
+
+  /* Sizes */
+  .xs,
+  :global(.button-xs) {
+    min-height: 26px;
+    font-size: 0.7rem;
+    padding: 0.2rem 0.4rem;
+  }
+
+  .sm,
+  :global(.button-sm) {
+    min-height: 32px;
+    font-size: 0.775rem;
+    padding: 0.25rem 0.5rem;
+  }
+
+  .md,
+  :global(.button-md) {
+    min-height: 38px;
+    font-size: 0.95rem;
+    padding: 0.625rem 1.25rem;
+  }
+
+  .lg,
+  :global(.button-lg) {
+    min-height: 46px;
+    font-size: 1.1rem;
+    padding: 0.75rem 1.5rem;
+  }
+
+  .xl,
+  :global(.button-xl) {
+    min-height: 54px;
+    font-size: 1.2rem;
+    padding: 0.75rem 1.5rem;
+  }
+
+  /* Variants - Consuming Variables */
+  .filled,
+  :global(.button-filled) {
+    color: var(--button-variant-filled-foreground);
+    background-color: var(--button-variant-filled);
+  }
+
+  .filled:hover,
+  :global(.button-filled):hover {
+    background-color: var(--button-variant-filled-hover);
+  }
+
+  .filled:focus,
+  .filled:active,
+  :global(.button-filled):focus,
+  :global(.button-filled):active {
+    --ring-color: var(--button-ring-color);
+  }
+
+  .filled:disabled,
+  .filled[disabled],
+  :global(.button-filled):disabled,
+  :global(.button-filled)[disabled] {
+    background-color: var(--button-variant-filled-disabled, oklch(from var(--button-variant-filled) calc(l * 1.1) calc(c * 0.85) h));
+    color: var(--button-variant-filled-foreground-disabled, oklch(from var(--button-variant-filled-foreground) calc(l * 0.9) calc(c * 0.85) h));
+  }
+
+  .outlined,
+  :global(.button-outlined) {
+    border: 1px solid var(--button-variant-outlined-border);
+    color: var(--button-variant-outlined-foreground);
+    background-color: var(--button-variant-outlined);
+  }
+
+  .outlined:disabled,
+  .outlined[disabled],
+  :global(.button-outlined):disabled,
+  :global(.button-outlined)[disabled] {
+    border-color: var(--button-variant-outlined-border-disabled, oklch(from var(--button-variant-outlined-border) calc(l * 1.5) calc(c * 0.8) h));
+    color: var(--button-variant-outlined-foreground-disabled, oklch(from var(--button-variant-outlined-foreground) calc(l * 1.1) calc(c * 0.7) h));
+  }
+
+  .outlined:hover,
+  :global(.button-outlined):hover {
+    background-color: var(--button-variant-outlined-hover);
+  }
+
+  .outlined:focus,
+  .outlined:active,
+  :global(.button-outlined):focus,
+  :global(.button-outlined):active {
+    --ring-color: var(--button-ring-color);
+  }
+
+  .gradient,
+  :global(.button-gradient) {
+    color: var(--button-variant-gradient-foreground);
+    background: linear-gradient(45deg,
+        var(--button-variant-gradient-start),
+        var(--button-variant-gradient-end));
+  }
+
+  .gradient:disabled,
+  .gradient[disabled],
+  :global(.button-gradient):disabled,
+  :global(.button-gradient)[disabled] {
+    background: unset;
+    background-color: var(--button-variant-gradient-disabled, oklch(from var(--button-variant-gradient-end) calc(l * 1.2) calc(c * 0.85) h));
+    color: var(--button-variant-gradient-foreground-disabled, oklch(from var(--button-variant-gradient-foreground) calc(l * 0.9) calc(c * 0.85) h));
+  }
+
+  .gradient:hover,
+  :global(.button-gradient):hover {
+    color: var(--button-variant-gradient-foreground);
+    background: linear-gradient(45deg,
+        var(--button-variant-gradient-start),
+        var(--button-variant-gradient-end));
+  }
+
+  .gradient:focus,
+  .gradient:active,
+  :global(.button-gradient):focus,
+  :global(.button-gradient):active {
+    --ring-color: var(--button-ring-color);
+  }
+
+  .text,
+  :global(.button-text) {
+    background-color: var(--button-variant-text);
+    color: var(--button-variant-text-foreground);
+  }
+
+  .text:disabled,
+  .text[disabled],
+  :global(.button-text):disabled,
+  :global(.button-text)[disabled] {
+    color: oklch(from var(--button-variant-text-foreground) calc(l * 1.5) calc(c * 0.5) h);
+  }
+
+  .text:hover,
+  :global(.button-text):hover {
+    background-color: var(--button-variant-text-hover);
+  }
+
+  .text:focus,
+  .text:active,
+  :global(.button-text):focus,
+  :global(.button-text):active {
+    --ring-color: var(--button-ring-color);
+  }
+
+  /* Intents - Defining Variables */
+  .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);
+    
+    /* Outlined */
+    --button-variant-outlined: transparent;
+    --button-variant-outlined-foreground: var(--text-primary-strong);
+    --button-variant-outlined-hover: var(--fill-primary-weak);
+    --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);
+    --button-variant-gradient-foreground: var(--gradient-primary-foreground);
+    --button-variant-gradient-disabled: var(--gradient-primary-disabled);
+    --button-variant-gradient-foreground-disabled: var(--text-on-primary-disabled);
+  }
+
+  .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);
+    
+    /* Outlined */
+    --button-variant-outlined: transparent;
+    --button-variant-outlined-foreground: var(--text-secondary-strong);
+    --button-variant-outlined-hover: var(--fill-secondary-weak);
+    --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);
+    --button-variant-gradient-foreground: var(--gradient-secondary-foreground);
+    --button-variant-gradient-disabled: var(--gradient-secondary-disabled);
+    --button-variant-gradient-foreground-disabled: var(--text-on-secondary-disabled);
+  }
+
+  .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);
+    
+    /* Outlined */
+    --button-variant-outlined: transparent;
+    --button-variant-outlined-foreground: var(--text-noeffect-strong);
+    --button-variant-outlined-hover: var(--fill-noeffect-weak);
+    --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);
+    --button-variant-gradient-foreground: var(--gradient-noeffect-foreground);
+    --button-variant-gradient-disabled: var(--gradient-noeffect-disabled);
+    --button-variant-gradient-foreground-disabled: var(--text-on-noeffect-disabled);
+  }
+
+  .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);
+    
+    /* Outlined */
+    --button-variant-outlined: transparent;
+    --button-variant-outlined-foreground: var(--text-success-strong);
+    --button-variant-outlined-hover: var(--fill-success-weak);
+    --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);
+    --button-variant-gradient-foreground: var(--gradient-success-foreground);
+    --button-variant-gradient-disabled: var(--gradient-success-disabled);
+    --button-variant-gradient-foreground-disabled: var(--text-on-success-disabled);
+  }
+
+  .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);
+    
+    /* Outlined */
+    --button-variant-outlined: transparent;
+    --button-variant-outlined-foreground: var(--text-info-strong);
+    --button-variant-outlined-hover: var(--fill-info-weak);
+    --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);
+    --button-variant-gradient-foreground: var(--gradient-info-foreground);
+    --button-variant-gradient-disabled: var(--gradient-info-disabled);
+    --button-variant-gradient-foreground-disabled: var(--text-on-info-disabled);
+  }
+
+  .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);
+    
+    /* Outlined */
+    --button-variant-outlined: transparent;
+    --button-variant-outlined-foreground: var(--text-warning-strong);
+    --button-variant-outlined-hover: var(--fill-warning-weak);
+    --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);
+    --button-variant-gradient-foreground: var(--gradient-warning-foreground);
+    --button-variant-gradient-disabled: var(--gradient-warning-disabled);
+    --button-variant-gradient-foreground-disabled: var(--text-on-warning-disabled);
+  }
+
+  .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);
+    
+    /* Outlined */
+    --button-variant-outlined: transparent;
+    --button-variant-outlined-foreground: var(--text-danger-strong);
+    --button-variant-outlined-hover: var(--fill-danger-weak);
+    --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);
+    --button-variant-gradient-foreground: var(--gradient-danger-foreground);
+    --button-variant-gradient-disabled: var(--gradient-danger-disabled);
+    --button-variant-gradient-foreground-disabled: var(--text-on-danger-disabled);
+  }
+
+  /* Full width */
+  .fullWidth,
+  :global(.button-full-width) {
+    width: 100%;
+    display: flex;
+  }
+}

package/dist/components/button/control-buttons.module.css

@@ -0,0 +1,132 @@
+@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-components;
+
+@layer infonomic-components {
+
+  .stop-button,
+  .play-button,
+  .directional-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
+    border-style: none;
+    border-radius: 100%;
+    padding: 0;
+    margin: 0;
+    outline: none;
+    color: white;
+    background-color: var(--fill-primary-strong);
+    transition-property: all, color;
+    transition-duration: 0.3s, 1ms;
+    transition-timing-function: cubic-bezier(0.25, 0.8, 0.5, 1), ease;
+    transition-delay: 0s, 0s;
+    cursor: pointer;
+  }
+
+  .directional-button span {
+    width: 40%;
+    padding-bottom: 3px;
+  }
+
+  .play-button span {
+    width: 80%;
+    height: 80%;
+  }
+
+  .stop-button span {
+    width: 50%;
+    height: 50%;
+  }
+
+  .directional-button span .icon path {
+    stroke: none;
+    fill: white;
+  }
+
+  .stop-button:hover,
+  .play-button:hover,
+  .stop-button:focus,
+  .play-button:focus,
+  .directional-button:hover,
+  .directional-button:focus {
+    color: white;
+    background-color: var(--fill-primary-strong-hover);
+    transform: translateY(-5px);
+  }
+
+  /* Sizes */
+  .xs {
+    width: 20px;
+    min-width: 20px;
+    height: 20px;
+    min-height: 20px;
+  }
+
+  .sm {
+    width: 30px;
+    min-width: 30px;
+    height: 30px;
+    min-height: 30px;
+  }
+
+  .md {
+    width: 40px;
+    min-width: 40px;
+    height: 40px;
+    min-height: 40px;
+  }
+
+  .lg {
+    width: 50px;
+    min-width: 50px;
+    height: 50px;
+    min-height: 50px;
+  }
+
+  .xl {
+    width: 40px;
+    min-width: 40px;
+    height: 40px;
+    min-height: 40px;
+  }
+
+  /* Up is default so no need to rotate */
+  .up:hover,
+  .up:focus {
+    transform: translateY(-5px);
+  }
+
+  .down span,
+  .down span {
+    transform: rotate(180deg);
+  }
+
+  .down:hover,
+  .down:focus {
+    transform: translateY(5px);
+  }
+
+  .left span,
+  .left span {
+    transform: rotate(-90deg);
+  }
+
+  .left:hover,
+  .left:focus {
+    transform: translateX(-5px);
+  }
+
+  .right span,
+  .right span {
+    transform: rotate(90deg);
+  }
+
+  .right:hover,
+  .right:focus {
+    transform: translateX(5px);
+  }
+
+  /* No dark theme overrides needed! 
+   * Tokens automatically switch in .dark and respect .not-dark 
+  */
+}

package/dist/components/button/copy-button.module.css

@@ -0,0 +1,56 @@
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+@layer infonomic-components {
+  .copy-button-container,
+  :global(.copy-button-container) {
+    display: inline-block;
+  }
+
+  .copy-button svg,
+  :global(.copy-button) svg {
+    width: 90%;
+    height: 90%;
+    display: block;
+  }
+
+  /* Sizes */
+  .xs,
+  :global(.copy-button-xs) {
+    width: 26px;
+    height: 26px;
+    min-height: 26px;
+    padding: 0.25rem;
+  }
+
+  .sm,
+  :global(.copy-button-sm) {
+    width: 32px;
+    height: 32px;
+    min-height: 32px;
+    padding: 0.35rem;
+  }
+
+  .md,
+  :global(.copy-button-md) {
+    width: 38px;
+    height: 38px;
+    min-height: 38px;
+    padding: 0.45rem;
+  }
+
+  .lg,
+  :global(.copy-button-lg) {
+    width: 46px;
+    height: 46px;
+    min-height: 46px;
+    padding: 0.55rem;
+  }
+
+  .xl,
+  :global(.copy-button-xl) {
+    width: 54px;
+    height: 54px;
+    min-height: 54px;
+    padding: 0.65rem;
+  }
+}

package/dist/components/button/icon-button.astro

@@ -0,0 +1,47 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import type { Intent, Size, Variant } from './@types/button.js'
+import Button from './button.astro'
+
+import styles from './button.module.css'
+
+interface Props extends HTMLAttributes<'button'>, Omit<HTMLAttributes<'a'>, 'type'> {
+  variant?: Variant
+  size?: Size
+  type?: 'submit' | 'reset' | 'button'
+  intent?: Intent
+  fullWidth?: boolean
+  ripple?: boolean
+  class?: string
+  as?: 'button' | 'a'
+  href?: string
+  square?: boolean
+  round?: boolean
+}
+
+const {
+  square = false,
+  round = true,
+  variant,
+  size,
+  type,
+  intent,
+  class: className,
+  ...rest
+} = Astro.props as Props
+---
+
+<Button
+  class:list={[
+    'icon-button',
+    variant,
+    size,
+    intent,
+    { [styles.square]: square },
+    { [styles.round]: !square && round },
+    className
+  ]}
+  {...rest}
+>
+  <slot />
+</Button>

package/dist/components/card/card-content.astro

@@ -0,0 +1,14 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+interface Props extends HTMLAttributes<'div'> {
+  class?: string
+}
+
+import styles from './card.module.css'
+
+const { class: className, ...rest } = Astro.props as Props
+---
+
+<div class:list={[styles['card-content'], className]} {...rest}>
+  <slot />
+</div>

package/dist/components/card/card-description.astro

@@ -0,0 +1,14 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+interface Props extends HTMLAttributes<'div'> {
+  class?: string
+}
+
+import styles from './card.module.css'
+
+const { class: className, ...rest } = Astro.props as Props
+---
+
+<div class:list={[styles['card-description'], className]} {...rest}>
+  <slot />
+</div>

package/dist/components/card/card-footer.astro

@@ -0,0 +1,14 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+interface Props extends HTMLAttributes<'div'> {
+  class?: string
+}
+
+import styles from './card.module.css'
+
+const { class: className, ...rest } = Astro.props as Props
+---
+
+<div class:list={[styles['card-footer'], className]} {...rest}>
+  <slot />
+</div>