@infonomic/uikit 3.11.0 → 4.0.0

package/src/components/card/card.module.css

@@ -1,7 +1,8 @@
 @layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
 
 @layer infonomic-components {
-  .card {
+  .card,
+  :global(.card) {
     display: flex;
     flex-direction: column;
     text-decoration: none;
@@ -16,30 +17,36 @@
     box-shadow: var(--shadow-sm)
   }
 
-  .card:is(:global(.dark) *) {
+  .card:is(:global(.dark) *),
+  :global(.card):is(:global(.dark) *) {
     background: var(--canvas-800);
   }
 
-  .cardHover {
+  .card-hover,
+  :global(.card-hover) {
     transition: background 0.2s ease-in-out;
   }
 
-  .cardHover:hover {
+  .card-hover:hover,
+  :global(.card-hover):hover {
     background: oklch(from var(--theme-50) 1 0.03 h);
   }
 
-  .cardHover:hover:is(:global(.dark) *) {
+  .card-hover:hover:is(:global(.dark) *),
+  :global(.card-hover):hover:is(:global(.dark) *) {
     background: oklch(from var(--canvas-800) 0.2 c h);
   }
 
-  .cardHeader {
+  .card-header,
+  :global(.card-header) {
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
     padding: 1rem;
   }
 
-  .cardTitle {
+  .card-title,
+  :global(.card-title) {
     color: var(--headings);
     font-size: 1.8rem;
     font-weight: bold;
@@ -47,18 +54,21 @@
     letter-spacing: -0.015em;
   }
 
-  .cardDescription {
+  .card-description,
+  :global(.card-description) {
     font-size: 0.875rem;
     color: var(--muted);
   }
 
-  .cardContent {
+  .card-content,
+  :global(.card-content) {
     flex: 1;
     padding: 1rem;
     padding-top: 0;
   }
 
-  .cardFooter {
+  .card-footer,
+  :global(.card-footer) {
     display: flex;
     align-items: center;
     padding: 1rem;

package/src/components/card/card.tsx

@@ -31,7 +31,7 @@ const Card = <C extends React.ElementType = 'div'>({
   ...rest
 }: CardProps<C>) => {
   const Comp: React.ElementType = asChild === true ? Slot : 'div'
-  const hoverClasses = hover != null && hover === true ? styles.cardHover : undefined
+  const hoverClasses = hover != null && hover === true ? styles['card-hover'] : undefined
   const classes = cx(styles.card, hoverClasses, className)
 
   return (
@@ -48,7 +48,7 @@ interface OtherProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 const Header = ({ className, ref, ...props }: OtherProps) => (
-  <div ref={ref} className={cx(styles.cardHeader, className)} {...props} />
+  <div ref={ref} className={cx(styles['card-header'], className)} {...props} />
 )
 
 Header.displayName = 'CardHeader'
@@ -56,24 +56,24 @@ Header.displayName = 'CardHeader'
 const Title = ({ className, ref, ...props }: OtherProps) => (
   <div
     ref={ref as React.Ref<HTMLDivElement>}
-    className={cx(styles.cardTitle, className)}
+    className={cx(styles['card-title'], className)}
     {...props}
   />
 )
 Title.displayName = 'CardTitle'
 
 const Description = ({ className, ref, ...props }: OtherProps) => (
-  <div ref={ref} className={cx(styles.cardDescription, className)} {...props} />
+  <div ref={ref} className={cx(styles['card-description'], className)} {...props} />
 )
 Description.displayName = 'CardDescription'
 
 const Content = ({ className, ref, ...props }: OtherProps) => (
-  <div ref={ref} className={cx(styles.cardContent, className)} {...props} />
+  <div ref={ref} className={cx(styles['card-content'], className)} {...props} />
 )
 Content.displayName = 'CardContent'
 
 const Footer = ({ className, ref, ...props }: OtherProps) => (
-  <div ref={ref} className={cx(styles.cardFooter, className)} {...props} />
+  <div ref={ref} className={cx(styles['card-footer'], className)} {...props} />
 )
 Footer.displayName = 'CardFooter'
 

package/src/components/container/container.module.css

@@ -1,7 +1,8 @@
 @layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
 
 @layer infonomic-components {
-  .container {
+  .container,
+  :global(.container) {
     width: 100%;
     padding: 0 1rem;
     margin: 0 auto;
@@ -11,21 +12,24 @@
   /* Shy edges */
   /* Large */
   @media (min-width: 66rem) {
-    .container {
+    .container,
+    :global(.container) {
       max-width: 64rem;
     }
   }
 
   /* X-Large */
   @media (min-width: 77rem) {
-    .container {
+    .container,
+    :global(.container) {
       max-width: 74.375rem;
     }
   }
 
   /* 2X-Large */
   @media (min-width: 94rem) {
-    .container {
+    .container,
+    :global(.container) {
       max-width: 87.5rem;
     }
   }

package/src/components/forms/error-text.module.css

@@ -1,19 +1,9 @@
 @layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
 
 @layer infonomic-components {
-  .text {
+  .text,
+  :global(.error-text) {
     font-size: 0.875rem;
-    color: var(--red-500)
-  }
-
-  /* 🌙 Dark via `.dark` class. We rely on the 
-  * consuming application to detect a user's preferred
-  * color scheme - either by header or cookie, and set
-  * a root html class accordingly
-  */
-  :global(.dark) {
-    .text:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      color: var(--red-400);
-    }
+    color: var(--error)
   }
 }

package/src/components/forms/help-text.module.css

@@ -1,7 +1,8 @@
 @layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
 
 @layer infonomic-components {
-  .text {
+  .text,
+  :global(.help-text) {
     font-size: 0.875rem;
     color: var(--muted)
   }

package/src/components/forms/input-adornment.module.css

@@ -1,18 +1,21 @@
 @layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
 
 @layer infonomic-components {
-  .adornment {
+  .adornment,
+  :global(.input-adornment) {
     display: flex;
     align-items: center;
     line-height: 0;
     white-space: nowrap;
   }
 
-  .start {
+  .start,
+  :global(.input-adornment-start) {
     justify-content: flex-start;
   }
 
-  .end {
+  .end,
+  :global(.input-adornment-end) {
     justify-content: flex-end;
   }
 }

package/src/components/forms/input.astro

@@ -44,12 +44,12 @@ const {
 } = Astro.props as Props
 ---
 
-<div class:list={['input-wrapper', styles.inputWrapper]}>
+<div class:list={['input-wrapper', styles['input-wrapper']]}>
   {label != null && <Label id={id} for={id} required={required} label={label} />}
-  <div class:list={['input-container', styles.inputContainer]}>
+  <div class:list={['input-container', styles['input-container']]}>
     {
       startAdornment != null && (
-        <div class:list={[styles.startAdornment, styles[variant]]}>
+        <div class:list={[styles['start-adornment'], styles[variant]]}>
           <slot name="start-adornment" />
         </div>
       )
@@ -74,8 +74,8 @@ const {
         styles[variant],
         styles[inputSize],
         styles[intent],
-        startAdornment != null && styles.startAdornmentPadding,
-        endAdornment != null && styles.endAdornmentPadding,
+        startAdornment != null && styles['start-adornment-padding'],
+        endAdornment != null && styles['end-adornment-padding'],
         error && styles.error,
         className
       ]}
@@ -83,7 +83,7 @@ const {
     />
     {
       endAdornment != null && (
-        <div class:list={[styles.endAdornment, styles[variant]]}>
+        <div class:list={[styles['end-adornment'], styles[variant]]}>
           <slot name="end-adornment" />
         </div>
       )

package/src/components/forms/input.module.css

@@ -1,20 +1,23 @@
 @layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
 
 @layer infonomic-components {
-  .inputWrapper {
+  .input-wrapper,
+  :global(.input-wrapper) {
     display: flex;
     flex-direction: column;
     gap: var(--gap-1);
   }
 
-  .inputContainer {
+  .input-container,
+  :global(.input-container) {
     position: relative;
     display: flex;
     align-items: center;
     gap: var(--gap-2);
   }
 
-  .input {
+  .input,
+  :global(.input) {
     border: none;
     outline: none;
     font-weight: normal;
@@ -27,7 +30,9 @@
   }
 
   .input:focus,
-  .input:active {
+  .input:active,
+  :global(.input):focus,
+  :global(.input):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);
@@ -35,74 +40,90 @@
   }
 
   .input:disabled,
-  .input[disabled] {
+  .input[disabled],
+  :global(.input):disabled,
+  :global(.input)[disabled] {
     pointer-events: none;
   }
 
-  .label {
+  .label,
+  :global(.input-label) {
     font-size: 0.875rem;
     font-weight: 500;
     color: var(--label-color);
   }
 
   /* Sizes */
-  .sm {
+  .sm,
+  :global(.input-sm) {
     min-height: 32px;
     font-size: 0.875rem;
     line-height: 0;
     padding: 0.25rem 0.5rem;
   }
 
-  .md {
+  .md,
+  :global(.input-md) {
     min-height: 38px;
     font-size: 1.1rem;
     line-height: 0;
     padding: 0.4rem 0.5rem;
   }
 
-  .lg {
+  .lg,
+  :global(.input-lg) {
     min-height: 46px;
     font-size: 1.2rem;
     line-height: 0;
     padding: 0.5rem 0.5rem;
   }
 
-  .startAdornment,
-  .endAdornment {
+  .start-adornment,
+  .end-adornment,
+  :global(.input-start-adornment),
+  :global(.input-end-adornment) {
     position: absolute;
     display: flex;
     align-items: center;
   }
 
-  .startAdornment {
+  .start-adornment,
+  :global(.input-start-adornment) {
     left: 5px;
   }
 
-  .endAdornment {
+  .end-adornment,
+  :global(.input-end-adornment) {
     right: 5px;
   }
 
-  .helpText {
+  .help-text,
+  :global(.input-help-text) {
     font-size: 0.75rem;
     color: var(--help-text-color);
   }
 
   /* Variants */
-  .outlined {
+  .outlined,
+  :global(.input-outlined) {
     border: 1px solid var(--input-variant-outlined-border);
     background-color: transparent;
   }
 
-  .outlined:hover {
+  .outlined:hover,
+  :global(.input-outlined):hover {
     border: 1px solid var(--input-variant-outlined-hover-border);
   }
 
   .outlined:focus,
-  .outlined:active {
+  .outlined:active,
+  :global(.input-outlined):focus,
+  :global(.input-outlined):active {
     --ring-color: var(--input-variant-outline-ring-color);
   }
 
-  .underlined {
+  .underlined,
+  :global(.input-underlined) {
     border-bottom: 1px solid var(--input-variant-underlined-border);
     border-radius: 0;
     gap: var(--gap-1);
@@ -110,65 +131,81 @@
   }
 
   /* Sizes */
-  .underlined.sm {
+  .underlined.sm,
+  :global(.input-underlined.input-sm) {
     padding: 0.25rem 0.1rem;
     min-height: 26px
   }
 
-  .underlined.md {
+  .underlined.md,
+  :global(.input-underlined.input-md) {
     padding: 0.25rem 0.1rem;
     min-height: 30px;
   }
 
-  .underlined.lg {
+  .underlined.lg,
+  :global(.input-underlined.input-lg) {
     padding: 0 0.1rem;
     min-height: 34px;
   }
 
-  .underlined:hover {
+  .underlined:hover,
+  :global(.input-underlined):hover {
     border-bottom: 1px solid var(--input-variant-underlined-hover-border);
   }
 
-  .filled {
+  .filled,
+  :global(.input-filled) {
     background-color: var(--input-variant-filled);
   }
 
 
   /* Error classes last, so that they override all 
     of the above */
-  .error {
+  .error,
+  :global(.input-error) {
     border: 1px solid var(--red-400);
   }
 
-  .error:hover {
+  .error:hover,
+  :global(.input-error):hover {
     border: 1px solid var(--red-400);
   }
 
   .error:focus,
-  .error:active {
+  .error:active,
+  :global(.input-error):focus,
+  :global(.input-error):active {
     --ring-color: var(--red-300);
   }
 
-  .underlined.startAdornmentPadding,
-  .startAdornmentPadding {
+  .underlined.start-adornment-padding,
+  .start-adornment-padding,
+  :global(.input-underlined.input-start-adornment-padding),
+  :global(.input-start-adornment-padding) {
     padding-left: 2rem;
   }
 
-  .underlined.endAdornmentPadding,
-  .endAdornmentPadding {
+  .underlined.end-adornment-padding,
+  .end-adornment-padding,
+  :global(.input-underlined.input-end-adornment-padding),
+  :global(.input-end-adornment-padding) {
     padding-right: 2rem;
   }
 
-  .underlined.startAdornment {
+  .underlined.start-adornment,
+  :global(.input-underlined.input-start-adornment) {
     left: 0;
   }
 
-  .underlined.endAdornment {
+  .underlined.end-adornment,
+  :global(.input-underlined.input-end-adornment) {
     right: 0;
   }
 
   /* Intents */
-  .primary {
+  .primary,
+  :global(.input-primary) {
     --input-variant-outlined-border: var(--stroke-primary);
     --input-variant-outlined-hover-border: var(--stroke-primary-hover);
     --input-variant-outline-ring-color: var(--ring-primary);
@@ -177,7 +214,8 @@
     --input-variant-filled: var(--fill-primary-weak);
   }
 
-  .secondary {
+  .secondary,
+  :global(.input-secondary) {
     --input-variant-outlined-border: var(--stroke-secondary);
     --input-variant-outlined-hover-border: var(--stroke-secondary-hover);
     --input-variant-outline-ring-color: var(--ring-secondary);
@@ -186,7 +224,8 @@
     --input-variant-filled: var(--fill-secondary-weak);
   }
 
-  .noeffect {
+  .noeffect,
+  :global(.input-noeffect) {
     --input-variant-outlined-border: var(--stroke-noeffect);
     --input-variant-outlined-hover-border: var(--stroke-noeffect-hover);
     --input-variant-outline-ring-color: var(--ring-noeffect);
@@ -195,7 +234,8 @@
     --input-variant-filled: var(--fill-noeffect-weak);
   }
 
-  .success {
+  .success,
+  :global(.input-success) {
     --input-variant-outlined-border: var(--stroke-success);
     --input-variant-outlined-hover-border: var(--stroke-success-hover);
     --input-variant-outline-ring-color: var(--ring-success);
@@ -204,7 +244,8 @@
     --input-variant-filled: var(--fill-success-weak);
   }
 
-  .info {
+  .info,
+  :global(.input-info) {
     --input-variant-outlined-border: var(--stroke-info);
     --input-variant-outlined-hover-border: var(--stroke-info-hover);
     --input-variant-outline-ring-color: var(--ring-info);
@@ -213,7 +254,8 @@
     --input-variant-filled: var(--fill-info-weak);
   }
 
-  .warning {
+  .warning,
+  :global(.input-warning) {
     --input-variant-outlined-border: var(--stroke-warning);
     --input-variant-outlined-hover-border: var(--stroke-warning-hover);
     --input-variant-outline-ring-color: var(--ring-warning);
@@ -222,7 +264,8 @@
     --input-variant-filled: var(--fill-warning-weak);
   }
 
-  .danger {
+  .danger,
+  :global(.input-danger) {
     --input-variant-outlined-border: var(--stroke-danger);
     --input-variant-outlined-hover-border: var(--stroke-danger-hover);
     --input-variant-outline-ring-color: var(--ring-danger);

package/src/components/forms/input.tsx

@@ -54,11 +54,11 @@ export const Input = <C extends React.ElementType = 'input'>({
   ...rest
 }: InputProps) => {
   return (
-    <div className={cx('input-wrapper', styles.inputWrapper, inputWrapperClassName)}>
+    <div className={cx('input-wrapper', styles['input-wrapper'], inputWrapperClassName)}>
       {label != null && <Label id={id} htmlFor={id} required={required} label={label} />}
-      <div className={cx('input-container', styles.inputContainer)}>
+      <div className={cx('input-container', styles['input-container'])}>
         {startAdornment != null && (
-          <div className={cx(styles.startAdornment, styles[variant])}>{startAdornment}</div>
+          <div className={cx(styles['start-adornment'], styles[variant])}>{startAdornment}</div>
         )}
         <input
           ref={ref}
@@ -82,15 +82,15 @@ export const Input = <C extends React.ElementType = 'input'>({
             styles[variant],
             styles[inputSize],
             styles[intent],
-            { [styles.startAdornmentPadding]: startAdornment != null },
-            { [styles.endAdornmentPadding]: endAdornment != null },
+            { [styles['start-adornment-padding']]: startAdornment != null },
+            { [styles['end-adornment-padding']]: endAdornment != null },
             { [styles.error]: error },
             className
           )}
           {...rest}
         />
         {endAdornment != null && (
-          <div className={cx(styles.endAdornment, styles[variant])}>{endAdornment}</div>
+          <div className={cx(styles['end-adornment'], styles[variant])}>{endAdornment}</div>
         )}
       </div>
       {error ? (

package/src/components/forms/label.module.css

@@ -1,28 +1,15 @@
 @layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
 
 @layer infonomic-components {
-  .label {
+  .label,
+  :global(.label) {
     display: block;
     font-weight: 500;
-    color: var(--gray-900)
+    color: var(--text)
   }
 
-  .required {
-    color: var(--red-500);
-  }
-
-  /* 🌙 Dark via `.dark` class. We rely on the 
-  * consuming application to detect a user's preferred
-  * color scheme - either by header or cookie, and set
-  * a root html class accordingly
-  */
-  :global(.dark) {
-    .label:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      color: var(--gray-50);
-    }
-
-    .required:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      color: var(--red-400);
-    }
+  .required,
+  :global(.label-required) {
+    color: var(--error);
   }
 }

package/src/components/forms/text-area.module.css

@@ -1,7 +1,8 @@
 @layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
 
 @layer infonomic-components {
-  .text-area {
+  .text-area,
+  :global(.text-area) {
     font-size: 1.1rem;
     width: 100%;
     padding: 0.5rem;

package/src/components/forms/text-area.tsx

@@ -43,7 +43,7 @@ export const TextArea = function TextArea({
   ...rest
 }: TextAreaProps): React.JSX.Element {
   return (
-    <fieldset className={cx('text-area-wrapper', inputStyles.inputWrapper)}>
+    <fieldset className={cx('text-area-wrapper', inputStyles['input-wrapper'])}>
       <Label id={id} htmlFor={id} required={required} label={label} />
       <textarea
         ref={ref}

package/src/components/section/section.module.css

@@ -1,7 +1,8 @@
 @layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
 
 @layer infonomic-components {
-  .section {
+  .section,
+  :global(.section) {
     position: relative;
   }
 }

package/src/styles/functional/colors.css

@@ -602,28 +602,5 @@
     --gradient-danger-end: var(--red-700);
     --gradient-danger-foreground: white;
     --gradient-danger-disabled: oklch(from var(--red-700) calc(l * 1.2) calc(c * 0.85) h);
-
-    /* SURFACE TOKENS (Force Light Mode)
-       ----------------------------------------------------------------- */
-    
-    /* Panel/container backgrounds - identical to :root */
-    --surface-panel: var(--canvas-25);
-    --surface-panel-elevated: white;
-    --surface-panel-border: var(--border-color);
-    
-    /* Item backgrounds */
-    --surface-item: transparent;
-    --surface-item-hover: var(--canvas-50);
-    --surface-item-active: var(--canvas-100);
-    
-    /* Item text colors */
-    --surface-item-text: var(--text);
-    --surface-item-text-hover: var(--text);
-    --surface-item-text-active: var(--text);
-    --surface-item-text-disabled: var(--gray-400);
-
-    /* Panel scrollers */
-    --surface-panel-scrollbar: var(--gray-50);
-    --surface-panel-scrollbar-thumb: var(--primary-100);
   }
 }