@infonomic/uikit 5.41.0 → 5.43.0

package/dist/widgets/modal/modal-content.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal-content.d.ts","sourceRoot":"","sources":["../../../src/widgets/modal/modal-content.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AAMnC,KAAK,0BAA0B,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAA;AACpE,MAAM,WAAW,iBAAkB,SAAQ,0BAA0B;IACnE,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,YAAY,GAAyB,uCAK/C,iBAAiB,GAAG;IACrB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;CACtC,sBAMA,CAAA"}
+{"version":3,"file":"modal-content.d.ts","sourceRoot":"","sources":["../../../src/widgets/modal/modal-content.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AAMnC,KAAK,0BAA0B,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAA;AACpE,MAAM,WAAW,iBAAkB,SAAQ,0BAA0B;IACnE,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,YAAY,GAAyB,uCAK/C,iBAAiB,GAAG;IACrB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;CACtC,sBAUA,CAAA"}

package/dist/widgets/modal/modal.module.css

@@ -1,7 +1,6 @@
 @layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-components;
 
 @layer infonomic-components {
-
   .modal-wrapper,
   :global(.infonomic-modal-open) {
     position: fixed;
@@ -36,7 +35,6 @@
   }
 
   @media screen and (min-width: 40rem) {
-
     .modal-container,
     :global(.infonomic-modal-container) {
       max-height: calc(100vh - 24px);
@@ -88,4 +86,4 @@
     padding-left: var(--spacing-16);
     padding-right: var(--spacing-16);
   }
-}
+}

package/dist/widgets/timeline/timeline.module.css

@@ -1,12 +1,11 @@
 @layer infonomic-base,
-infonomic-functional,
-infonomic-utilities,
-infonomic-theme,
-infonomic-typography,
-infonomic-components;
+  infonomic-functional,
+  infonomic-utilities,
+  infonomic-theme,
+  infonomic-typography,
+  infonomic-components;
 
 @layer infonomic-components {
-
   .timeline,
   :global(.infonomic-timeline) {
     margin-left: var(--spacing-8);
@@ -95,10 +94,9 @@ infonomic-components;
   */
   :global(.dark),
   :global([data-theme="dark"]) {
-
     :global(.infonomic-timeline-icon),
     .timeline-icon {
       border-color: var(--canvas-600);
     }
   }
-}
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@infonomic/uikit",
   "private": false,
   "license": "MIT",
-  "version": "5.41.0",
+  "version": "5.43.0",
   "type": "module",
   "description": "Infonomic UI kit is a collection of reusable UI components and utilities for React and Astro.",
   "keywords": [

package/src/components/@types/shared.ts

@@ -2,9 +2,29 @@
 
 // Arrays make available an iterator for easy storybook layout
 
+/**
+ * Available size tokens, ordered from smallest to largest.
+ * Most components default to `'md'`.
+ */
 export const size = ['xs', 'sm', 'md', 'lg', 'xl'] as const
+
+/**
+ * Visual size of a component.
+ *
+ * - `xs` — extra-small, compact inline use
+ * - `sm` — small, tight layouts
+ * - `md` — standard size (default for most components)
+ * - `lg` — large, prominent elements
+ * - `xl` — extra-large, hero or display use
+ *
+ * @default 'md'
+ */
 export type Size = (typeof size)[number]
 
+/**
+ * Available semantic color intents.
+ * Controls the visual meaning (color, icon) of a component.
+ */
 export const intent = [
   'primary',
   'secondary',
@@ -15,10 +35,45 @@ export const intent = [
   'danger',
 ] as const
 
+/**
+ * Semantic color intent applied to a component.
+ *
+ * - `primary`   — brand/main action (blue by default)
+ * - `secondary` — alternate/supporting action
+ * - `noeffect`  — neutral, no color emphasis (gray)
+ * - `success`   — positive outcome or confirmation (green)
+ * - `info`      — informational, non-critical (cyan/blue)
+ * - `warning`   — caution, needs attention (yellow/amber)
+ * - `danger`    — destructive action or error state (red)
+ *
+ * @default 'primary'
+ */
 export type Intent = (typeof intent)[number]
 
+/**
+ * Status icon variants used inside notification components.
+ */
 export const icons = ['success', 'info', 'success', 'warning', 'danger'] as const
+
+/**
+ * Icon variant shown inside a notification (e.g. Toast, Alert).
+ * Maps to the corresponding status icon.
+ */
 export type Icons = (typeof icons)[number]
 
+/**
+ * Screen corner positions for floating elements.
+ */
 export const position = ['top-left', 'top-right', 'bottom-left', 'bottom-right'] as const
+
+/**
+ * Corner position for floating/overlay elements such as toasts and popovers.
+ *
+ * - `top-left`     — top-left corner of the viewport
+ * - `top-right`    — top-right corner of the viewport (default for toasts)
+ * - `bottom-left`  — bottom-left corner of the viewport
+ * - `bottom-right` — bottom-right corner of the viewport
+ *
+ * @default 'top-right'
+ */
 export type Position = (typeof position)[number]

package/src/components/accordion/accordion.module.css

@@ -1,7 +1,6 @@
 @layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-components;
 
 @layer infonomic-components {
-
   .item,
   :global(.infonomic-accordion-item) {
     overflow: hidden;
@@ -54,4 +53,4 @@
       height: 0;
     }
   }
-}
+}

package/src/components/accordion/accordion.stories.tsx

@@ -16,11 +16,10 @@ export default meta
 
 type Story = StoryObj<typeof AccordionComponent.Root>
 
-
 /**
  * NOTE: Accordions are very much context specific in terms of styling
  * and so we apply very little styling to the default accordion component.
- * Below is an example of a custom (albeit basic) styled accordion for demo 
+ * Below is an example of a custom (albeit basic) styled accordion for demo
  * purposes.
  */
 export const Accordion: Story = {

package/src/components/accordion/accordion.tsx

@@ -26,7 +26,11 @@ const Root = ({
   ref?: React.RefObject<AccordionRootElement>
 } & (AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps)) => {
   return (
-    <AccordionPrimitive.Root ref={ref} className={cx('infonomic-accordion-root', className)} {...props}>
+    <AccordionPrimitive.Root
+      ref={ref}
+      className={cx('infonomic-accordion-root', className)}
+      {...props}
+    >
       {children}
     </AccordionPrimitive.Root>
   )
@@ -42,7 +46,11 @@ const Item = function AccordionItem({
   ref?: React.RefObject<AccordionItemElement>
 }) {
   return (
-    <AccordionPrimitive.Item className={cx('infonomic-accordion-item', className)} {...props} ref={ref}>
+    <AccordionPrimitive.Item
+      className={cx('infonomic-accordion-item', className)}
+      {...props}
+      ref={ref}
+    >
       {children}
     </AccordionPrimitive.Item>
   )
@@ -58,7 +66,11 @@ const Header = function AccordionHeader({
   ref?: React.RefObject<AccordionHeaderElement>
 }) {
   return (
-    <AccordionPrimitive.Header className={cx('infonomic-accordion-header', className)} {...props} ref={ref}>
+    <AccordionPrimitive.Header
+      className={cx('infonomic-accordion-header', className)}
+      {...props}
+      ref={ref}
+    >
       {children}
     </AccordionPrimitive.Header>
   )
@@ -74,7 +86,11 @@ const Trigger = function AccordionTrigger({
   ref?: React.RefObject<AccordionTriggerElement>
 }) {
   return (
-    <AccordionPrimitive.Trigger ref={ref} className={cx('infonomic-accordion-trigger', styles.trigger, className)} {...props}>
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cx('infonomic-accordion-trigger', styles.trigger, className)}
+      {...props}
+    >
       {children}
     </AccordionPrimitive.Trigger>
   )
@@ -90,7 +106,11 @@ const Content = function AccordionContent({
   ref?: React.RefObject<AccordionContentElement>
 }) {
   return (
-    <AccordionPrimitive.Content className={cx('infonomic-accordion-content', styles.content, className)} {...props} ref={ref}>
+    <AccordionPrimitive.Content
+      className={cx('infonomic-accordion-content', styles.content, className)}
+      {...props}
+      ref={ref}
+    >
       {children}
     </AccordionPrimitive.Content>
   )

package/src/components/avatar/avatar.module.css

@@ -1,12 +1,11 @@
 @layer infonomic-base,
-infonomic-functional,
-infonomic-utilities,
-infonomic-theme,
-infonomic-typography,
-infonomic-components;
+  infonomic-functional,
+  infonomic-utilities,
+  infonomic-theme,
+  infonomic-typography,
+  infonomic-components;
 
 @layer infonomic-components {
-
   /* relative inline-flex h-10 w-10 rounded-full */
   .avatar-root,
   :global(.infonomic-avatar-root) {
@@ -60,4 +59,4 @@ infonomic-components;
       color: var(--gray-400);
     }
   }
-}
+}

package/src/components/avatar/avatar.tsx

@@ -12,8 +12,15 @@ const url = 'https://picsum.photos/150'
 export const Avatar = ({ initials }: { initials: string }): React.JSX.Element => {
   return (
     <AvatarPrimitive.Root className={cx('infonomic-avatar-root', styles['avatar-root'])}>
-      <AvatarPrimitive.Image src={url} alt="Avatar" className={cx('infonomic-avatar-image', styles['avatar-image'])} />
-      <AvatarPrimitive.Fallback className={cx('infonomic-avatar-fallback', styles['avatar-fallback'])} delayMs={600}>
+      <AvatarPrimitive.Image
+        src={url}
+        alt="Avatar"
+        className={cx('infonomic-avatar-image', styles['avatar-image'])}
+      />
+      <AvatarPrimitive.Fallback
+        className={cx('infonomic-avatar-fallback', styles['avatar-fallback'])}
+        delayMs={600}
+      >
         <span className={cx('infonomic-avatar-text', styles['avatar-text'])}>{initials}</span>
       </AvatarPrimitive.Fallback>
     </AvatarPrimitive.Root>

package/src/components/badge/badge.module.css

@@ -1,12 +1,11 @@
 @layer infonomic-base,
-infonomic-functional,
-infonomic-utilities,
-infonomic-theme,
-infonomic-typography,
-infonomic-components;
+  infonomic-functional,
+  infonomic-utilities,
+  infonomic-theme,
+  infonomic-typography,
+  infonomic-components;
 
 @layer infonomic-components {
-
   .badge,
   :global(.infonomic-badge) {
     display: inline-block;
@@ -64,4 +63,4 @@ infonomic-components;
 
   /* Dark mode - All intents now handled by semantic tokens in theme layer */
   /* No overrides needed! Tokens automatically switch in .dark and respect .not-dark */
-}
+}

package/src/components/badge/badge.tsx

@@ -34,7 +34,13 @@ export const Badge = <C extends React.ElementType = 'div'>({
   return (
     <Comp
       ref={ref}
-      className={cx('infonomic-badge', `infonomic-badge-${intent}`, styles.badge, styles[intent], className)}
+      className={cx(
+        'infonomic-badge',
+        `infonomic-badge-${intent}`,
+        styles.badge,
+        styles[intent],
+        className
+      )}
       {...rest}
     >
       {children}

package/src/components/button/@types/button.ts

@@ -2,14 +2,49 @@
 import type { Size as s, Intent as t } from '../../@types/shared.js'
 
 /**
- * This file contains the types and prop-types for Button and IconButton component.
+ * This file contains the types and prop-types for the Button and IconButton components.
  */
 
 // typescript types
+
+/**
+ * Available visual style variants for Button and IconButton.
+ */
 export const variant = ['filled', 'filled-weak', 'outlined', 'gradient', 'text'] as const
+
+/**
+ * Visual style variant of the button.
+ *
+ * - `filled`      — solid background fill using the intent color (default)
+ * - `filled-weak` — lightly tinted background, lower visual weight than `filled`
+ * - `outlined`    — transparent background with an intent-colored border
+ * - `gradient`    — gradient background from intent start to end color
+ * - `text`        — no background or border, label only (like a hyperlink)
+ *
+ * @default 'filled'
+ */
 export type Variant = (typeof variant)[number]
 
+/**
+ * Size of the button. Inherits from the shared `Size` type.
+ * @default 'md'
+ */
 export type Size = 'md' | s
+
+/**
+ * Semantic color intent of the button. Inherits from the shared `Intent` type.
+ * @default 'primary'
+ */
 export type Intent = 'primary' | t
+
+/**
+ * When `true`, the button expands to fill 100% of its container width.
+ * @default false
+ */
 export type FullWidth = boolean
+
+/**
+ * When `true`, enables a Material-style ripple animation on click/tap.
+ * @default false
+ */
 export type EnableRipple = boolean

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

@@ -1,7 +1,6 @@
 @layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-components;
 
 @layer infonomic-components {
-
   .button-group,
   :global(.infonomic-button-group) {
     display: flex;
@@ -12,10 +11,9 @@
   }
 
   @media screen and (min-width: 40rem) {
-
     .button-group,
     :global(.infonomic-button-group) {
       flex-direction: row;
     }
   }
-}
+}

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

@@ -1,12 +1,11 @@
 @layer infonomic-base,
-infonomic-functional,
-infonomic-utilities,
-infonomic-theme,
-infonomic-typography,
-infonomic-components;
+  infonomic-functional,
+  infonomic-utilities,
+  infonomic-theme,
+  infonomic-typography,
+  infonomic-components;
 
 @layer infonomic-components {
-
   .button,
   :global(.infonomic-button) {
     border: none;
@@ -117,10 +116,14 @@ infonomic-components;
   .filled[disabled],
   :global(.infonomic-button-filled):disabled,
   :global(.infonomic-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));
+    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)
+    );
   }
 
   /* -------------------------------------------------------- */
@@ -148,10 +151,14 @@ infonomic-components;
   .filled-weak[disabled],
   :global(.infonomic-button-filled-weak):disabled,
   :global(.infonomic-button-filled-weak)[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));
+    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,
@@ -165,10 +172,14 @@ infonomic-components;
   .outlined[disabled],
   :global(.infonomic-button-outlined):disabled,
   :global(.infonomic-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));
+    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,
@@ -186,9 +197,11 @@ infonomic-components;
   .gradient,
   :global(.infonomic-button-gradient) {
     color: var(--button-variant-gradient-foreground);
-    background: linear-gradient(45deg,
-        var(--button-variant-gradient-start),
-        var(--button-variant-gradient-end));
+    background: linear-gradient(
+      45deg,
+      var(--button-variant-gradient-start),
+      var(--button-variant-gradient-end)
+    );
   }
 
   .gradient:disabled,
@@ -196,18 +209,24 @@ infonomic-components;
   :global(.infonomic-button-gradient):disabled,
   :global(.infonomic-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));
+    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(.infonomic-button-gradient):hover {
     color: var(--button-variant-gradient-foreground);
-    background: linear-gradient(45deg,
-        var(--button-variant-gradient-start),
-        var(--button-variant-gradient-end));
+    background: linear-gradient(
+      45deg,
+      var(--button-variant-gradient-start),
+      var(--button-variant-gradient-end)
+    );
   }
 
   .gradient:focus,
@@ -274,7 +293,6 @@ infonomic-components;
     --button-variant-text-hover: var(--fill-primary-text-hover);
     --button-variant-text-foreground: var(--text-primary);
 
-
     /* Gradient */
     --button-variant-gradient-start: var(--gradient-primary-start);
     --button-variant-gradient-end: var(--gradient-primary-end);
@@ -340,7 +358,6 @@ infonomic-components;
     --button-variant-filled-weak-foreground: var(--text-on-noeffect-weak);
     --button-variant-filled-weak-foreground-disabled: var(--text-on-noeffect-weak-disabled);
 
-
     /* Outlined */
     --button-variant-outlined: var(--fill-noeffect-outlined);
     --button-variant-outlined-hover: var(--fill-noeffect-outlined-hover);
@@ -525,4 +542,4 @@ infonomic-components;
     width: 100%;
     display: flex;
   }
-}
+}

package/src/components/button/button.tsx

@@ -51,7 +51,7 @@ export const Button = <C extends React.ElementType = 'button'>({
     const rippleEffect = new Ripple()
     onMouseDown = (e: React.MouseEvent<HTMLButtonElement>) => {
       if (rest.onMouseDown) {
-        ; (rest.onMouseDown as React.MouseEventHandler<HTMLButtonElement>)(e)
+        ;(rest.onMouseDown as React.MouseEventHandler<HTMLButtonElement>)(e)
       }
       rippleEffect.create(e, variant === 'filled' || variant === 'gradient' ? 'light' : 'dark')
     }

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

@@ -1,7 +1,6 @@
 @layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-components;
 
 @layer infonomic-components {
-
   .combo-button-wrapper,
   :global(.infonomic-combo-button-wrapper) {
     display: flex;
@@ -39,5 +38,6 @@
   }
 
   .combo-button-options-item,
-  :global(.infonomic-combo-button-options-item) {}
-}
+  :global(.infonomic-combo-button-options-item) {
+  }
+}

package/src/components/button/combo-button.tsx

@@ -15,13 +15,12 @@ export type ComboButtonProps = ButtonProps & {
   children?: React.ReactNode
   align?: 'start' | 'center' | 'end'
   dataSide?: 'top' | 'bottom' | 'left' | 'right'
-  sideOffset?: number,
+  sideOffset?: number
   className?: string
   buttonClassName?: string
   triggerClassName?: string
 }
 
-
 export const ComboButton = ({
   options,
   onButtonClick,
@@ -40,12 +39,21 @@ export const ComboButton = ({
 }: ComboButtonProps) => {
   return (
     <div className={cx('combo-button-wrapper', styles['combo-button-wrapper'], className)}>
-      <Button className={cx('combo-button-button', styles['combo-button-button'], buttonClassName)} disabled={disabled || buttonDisabled} {...rest} onClick={onButtonClick}>
+      <Button
+        className={cx('combo-button-button', styles['combo-button-button'], buttonClassName)}
+        disabled={disabled || buttonDisabled}
+        {...rest}
+        onClick={onButtonClick}
+      >
         {children}
       </Button>
       <DropdownComponent.Root>
         <DropdownComponent.Trigger asChild>
-          <Button className={cx('combo-button-trigger', styles['combo-button-trigger'], triggerClassName)} disabled={disabled || optionsDisabled} {...rest}>
+          <Button
+            className={cx('combo-button-trigger', styles['combo-button-trigger'], triggerClassName)}
+            disabled={disabled || optionsDisabled}
+            {...rest}
+          >
             <ChevronDownIcon width="16px" height="16px" />
           </Button>
         </DropdownComponent.Trigger>
@@ -63,7 +71,11 @@ export const ComboButton = ({
                   key={option.value}
                   onSelect={() => onOptionSelect?.(option.value)}
                 >
-                  <div className={cx('combo-button-options-item', styles['combo-button-options-item'])}>{option.label}</div>
+                  <div
+                    className={cx('combo-button-options-item', styles['combo-button-options-item'])}
+                  >
+                    {option.label}
+                  </div>
                 </DropdownComponent.Item>
               ))}
             </DropdownComponent.Content>

package/src/components/button/combo-buttons.stories.tsx

@@ -28,7 +28,8 @@ const ComboButtonDemo = (): React.JSX.Element => {
             size="sm"
             options={options}
             onButtonClick={handleButtonClick}
-            onOptionSelect={handleOptionSelect} >
+            onOptionSelect={handleOptionSelect}
+          >
             Combo Button
           </ComboButton>
         </div>
@@ -40,7 +41,8 @@ const ComboButtonDemo = (): React.JSX.Element => {
             size="sm"
             options={[]}
             onButtonClick={handleButtonClick}
-            onOptionSelect={handleOptionSelect} >
+            onOptionSelect={handleOptionSelect}
+          >
             Combo Button
           </ComboButton>
         </div>
@@ -54,7 +56,8 @@ const ComboButtonDemo = (): React.JSX.Element => {
             options={options}
             onButtonClick={handleButtonClick}
             onOptionSelect={handleOptionSelect}
-            disabled={true}>
+            disabled={true}
+          >
             Combo Button
           </ComboButton>
         </div>

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

@@ -1,7 +1,6 @@
 @layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-components;
 
 @layer infonomic-components {
-
   .stop-button,
   .play-button,
   .directional-button,
@@ -132,4 +131,4 @@
   /* No dark theme overrides needed! 
    * Tokens automatically switch in .dark and respect .not-dark 
   */
-}
+}