@infonomic/uikit 3.8.0 → 3.9.0

package/dist/widgets/drawer/drawer_module.css

@@ -61,9 +61,9 @@
   }
 
   .drawer-top-actions-FiHu4U {
-    padding-top: var(--spacing-3);
-    padding-left: var(--spacing-6);
-    padding-right: var(--spacing-6);
+    padding-top: var(--spacing-12);
+    padding-left: var(--spacing-12);
+    padding-right: var(--spacing-12);
     justify-content: flex-end;
     align-items: center;
     max-width: 100%;
@@ -76,8 +76,8 @@
     align-items: center;
     gap: var(--gap-3);
     padding-top: 0;
-    padding-left: var(--spacing-6);
-    padding-right: var(--spacing-6);
+    padding-left: var(--spacing-12);
+    padding-right: var(--spacing-12);
     max-width: 100%;
     display: flex;
   }
@@ -87,7 +87,7 @@
   }
 
   .drawer-content-QQqzOR {
-    padding: var(--spacing-6);
+    padding: var(--spacing-12);
   }
 
   @keyframes slideIn-dDQJvD {

package/dist/widgets/modal/modal_module.css

@@ -21,8 +21,8 @@
     width: 100%;
     min-height: 300px;
     max-height: 88vh;
-    margin-left: var(--spacing-2);
-    margin-right: var(--spacing-2);
+    margin-left: var(--spacing-8);
+    margin-right: var(--spacing-8);
     flex-direction: column;
     display: flex;
     position: absolute;
@@ -42,9 +42,9 @@
     justify-content: space-between;
     align-items: center;
     gap: var(--gap-3);
-    padding-left: var(--spacing-6);
-    padding-right: var(--spacing-6);
-    padding-top: var(--spacing-5);
+    padding-left: var(--spacing-16);
+    padding-right: var(--spacing-16);
+    padding-top: var(--spacing-20);
     max-width: 100%;
     display: flex;
   }
@@ -55,9 +55,9 @@
 
   .modal-content-eDnix2 {
     gap: var(--gap-3);
-    padding-left: var(--spacing-6);
-    padding-right: var(--spacing-6);
-    padding-bottom: var(--spacing-3);
+    padding-left: var(--spacing-16);
+    padding-right: var(--spacing-16);
+    padding-bottom: var(--spacing-12);
     flex-direction: column;
     flex: 1;
     max-width: 100%;
@@ -68,10 +68,10 @@
     justify-content: flex-end;
     align-items: center;
     gap: var(--gap-3);
-    padding-top: var(--spacing-2);
-    padding-bottom: var(--spacing-5);
-    padding-left: var(--spacing-6);
-    padding-right: var(--spacing-6);
+    padding-top: var(--spacing-8);
+    padding-bottom: var(--spacing-20);
+    padding-left: var(--spacing-16);
+    padding-right: var(--spacing-16);
     display: flex;
   }
 }

package/dist/widgets/timeline/timeline_module.css

@@ -2,11 +2,11 @@
 
 @layer infonomic-components {
   .timeline-qJOU85 {
-    margin-left: var(--spacing-2);
+    margin-left: var(--spacing-8);
   }
 
   .timeline-root-kIek3q {
-    margin-left: var(--spacing-2);
+    margin-left: var(--spacing-8);
     padding-left: var(--spacing-8);
     border-left-width: var(--border-width-thin);
     border-left-color: var(--border-color);
@@ -16,7 +16,7 @@
   }
 
   .timeline-item-VoOzOk {
-    margin: 0 0 var(--spacing-6) 0;
+    margin: 0 0 var(--spacing-16) var(--spacing-20);
   }
 
   .timeline-icon-xO1p1F {
@@ -49,8 +49,8 @@
   }
 
   .timeline-date-U7Pr_G {
-    margin-top: var(--spacing-2);
-    margin-bottom: var(--spacing-2);
+    margin-top: var(--spacing-8);
+    margin-bottom: var(--spacing-8);
     font-size: .9em;
     font-weight: var(--font-weight-medium);
     color: var(--gray-600);
@@ -60,14 +60,14 @@
 
   .timeline-content-rwFfPc {
     margin: 0;
-    margin-bottom: var(--spacing-4);
+    margin-bottom: var(--spacing-16);
     font-size: 1.125rem;
     font-weight: var(--font-weight-normal);
   }
 
   .timeline-content-rwFfPc p {
     margin: 0;
-    margin-bottom: var(--spacing-4);
+    margin-bottom: var(--spacing-16);
   }
 
   .dark .timeline-icon-xO1p1F:not(:where([class~="not-dark"], [class~="not-dark"] *)) {

package/package.json

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

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

@@ -26,7 +26,7 @@ export const Accordion: Story = {
     className: 'accordion-root border',
   },
   render: (args) => (
-    <>
+    <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
       <style>
         {`
       .accordion-root {
@@ -112,6 +112,6 @@ export const Accordion: Story = {
           </AccordionComponent.Item>
         </nav>
       </AccordionComponent.Root>
-    </>
+    </div>
   ),
 }

package/src/components/avatar/avatar.stories.tsx

@@ -18,7 +18,7 @@ export const Avatar = (): React.JSX.Element => (
   <div
     style={{
       maxWidth: '300px',
-      marginBottom: '24px',
+      margin: '2rem auto',
       display: 'flex',
       gap: '24px',
       alignItems: 'center',

package/src/components/badge/badge.stories.tsx

@@ -9,7 +9,7 @@ type Story = StoryObj<typeof Badge>
 
 const AllIntents = (): React.JSX.Element => {
   return (
-    <div style={{ maxWidth: '800px', margin: '0 auto' }}>
+    <div style={{ maxWidth: '800px', margin: '2rem auto' }}>
       {intent.map((i) => {
         return (
           <div

package/src/components/button/button-group.stories.tsx

@@ -25,7 +25,7 @@ const ButtonGroupDemo = (): React.JSX.Element => {
     setValue(value)
   }
   return (
-    <div className="ml-12 mb-6 max-w-[500px]">
+    <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
       <ButtonGroupComponent
         type="single"
         expandToFit={true}

package/src/components/button/button-intents.stories.tsx

@@ -10,7 +10,7 @@ type Story = StoryObj<typeof Button>
 
 const AllIntents = (): React.JSX.Element => {
   return (
-    <div style={{ maxWidth: '800px', margin: '0 auto' }}>
+    <div style={{ maxWidth: '800px', margin: '2rem auto' }}>
       {intent.map((i) => {
         return (
           <div

package/src/components/button/button-variants.stories.tsx

@@ -13,7 +13,7 @@ type Story = StoryObj<typeof Button>
 const AllVariants = (): React.JSX.Element => {
   return (
     <>
-      <div style={{ maxWidth: '800px', margin: '0 auto' }}>
+      <div style={{ maxWidth: '800px', margin: '2rem auto' }}>
         {variant.map((variant: any) => {
           return (
             <div

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

@@ -6,7 +6,7 @@ type Story = StoryObj<typeof DirectionalButton>
 
 const ControlsDemo = (): React.JSX.Element => {
   return (
-    <>
+     <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
       <div className="ml-12 mb-6">
         <h2 style={{ fontSize: '1.2rem', margin: '1rem 0' }}>Small</h2>
         <div className="flex items-center gap-4 mb-6">
@@ -40,7 +40,7 @@ const ControlsDemo = (): React.JSX.Element => {
           <DirectionalButton direction="down" size="lg" />
         </div>
       </div>
-    </>
+    </div>
   )
 }
 

package/src/components/button/icon-button.stories.tsx

@@ -28,7 +28,7 @@ const getUserIconSize = (size: string) => {
 export const IconButtonsRound = (): React.JSX.Element => {
   return (
     <>
-      <div style={{ maxWidth: '800px', margin: '0 auto' }}>
+      <div style={{ maxWidth: '800px', margin: '2rem auto' }}>
         {variant.map((variant: any) => {
           return (
             <div
@@ -82,7 +82,7 @@ export const IconButtonsRound = (): React.JSX.Element => {
 export const IconButtonsSquare = (): React.JSX.Element => {
   return (
     <>
-      <div style={{ maxWidth: '800px', margin: '0 auto' }}>
+      <div style={{ maxWidth: '800px', margin: '2rem auto' }}>
         {variant.map((variant: any) => {
           return (
             <div

package/src/components/card/card.stories.tsx

@@ -17,7 +17,7 @@ export default meta
 
 export const Card = (): React.JSX.Element => {
   return (
-    <>
+    <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
       <div style={{ marginBottom: '48px' }} className="mb-6">
         <div style={{ maxWidth: '400px', marginBottom: '24px' }}>
           <CardComponent>
@@ -56,6 +56,6 @@ export const Card = (): React.JSX.Element => {
           </CardComponent>
         </div>
       </div>
-    </>
+    </div>
   )
 }

package/src/components/container/container.stories.tsx

@@ -1,7 +1,7 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import type React from 'react'
 
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import type { Meta } from '@storybook/react-vite'
 
 import { Section } from '../section/section.js'
 import { Container as ContainerComponent } from './container.js'
@@ -17,14 +17,12 @@ const meta: Meta<typeof ContainerComponent> = {
 
 export default meta
 
-type Story = StoryObj<typeof ContainerComponent>
-
 export const Container = (): React.JSX.Element => {
   return (
     <Section style={{ height: '100vh' }}>
       <ContainerComponent
+        className="primary-strong"
         style={{
-          backgroundColor: 'lightblue',
           height: '400px',
           display: 'flex',
           alignItems: 'center',
@@ -36,7 +34,3 @@ export const Container = (): React.JSX.Element => {
     </Section>
   )
 }
-
-// export const Default: Story = {
-//   render: () => <DivDemo />,
-// }

package/src/components/dropdown/dropdown.module.css

@@ -61,7 +61,7 @@
     margin: 0 auto;
     width: 90%;
     background-color: var(--surface-panel-border);
-    margin: var(--spacing-1) 0;
+    margin: var(--spacing-4) 0;
     border-top-width: var(--border-width-thin);
     border-top-color: var(--surface-panel-border);
     border-top-style: var(--border-style-solid);

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

@@ -2,7 +2,7 @@
 
 @layer infonomic-components {
   .day-picker {
-    padding: var(--spacing-3)
+    padding: var(--spacing-12)
   }
 
   /* relative flex flex-col gap-4 sm:flex-row */
@@ -10,7 +10,7 @@
     position: relative;
     display: flex;
     flex-direction: column;
-    gap: var(--spacing-4);
+    gap: var(--spacing-16);
   }
 
   /* 'relative flex h-7 items-center justify-center', */
@@ -28,7 +28,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: var(--spacing-2);
+    gap: var(--spacing-8);
     width: 100%;
   }
 
@@ -103,7 +103,7 @@
 
   /* 'pt-3 text-sm' */
   .footer {
-    padding-top: var(--spacing-3);
+    padding-top: var(--spacing-12);
     font-size: 0.875rem;
     /* 14px */
   }
@@ -136,12 +136,12 @@
   .month-grid {
     margin-left: auto;
     margin-right: auto;
-    margin-top: var(--spacing-4);
+    margin-top: var(--spacing-16);
   }
 
   /* 'mt-2 flex w-max items-start' */
   .week {
-    margin-top: var(--spacing-2);
+    margin-top: var(--spacing-8);
     display: flex;
     width: max-content;
     align-items: flex-start;
@@ -170,13 +170,13 @@
   /* '[&>button]:bg-accent [&>button]:text-accent-foreground', */
   .today>button {
     /* background-color: var(--gray-50); */
-    border: solid 1px var(--primary-300);
+    border: solid 1px var(--stroke-primary);
     color: var(--foreground);
   }
 
   .day>button:hover,
   .day-selected>button {
-    background-color: var(--primary-400);
+    background-color: var(--fill-primary-strong);
     color: white;
   }
 
@@ -198,17 +198,17 @@
 
   /* 'bg-accent [&>button]:bg-primary [&>button]:text-primary-foreground [&>button]:hover:bg-primary [&>button]:hover:text-primary-foreground' */
   .button-range {
-    background-color: var(--gray-100);
+    background-color: var(--fill-primary-weak);
     color: var(--foreground);
   }
 
   .button-range>button {
-    background-color: var(--primary-400);
+    background-color: var(--fill-primary-strong);
     color: white;
   }
 
   .button-range>button:hover {
-    background-color: var(--primary-400);
+    background-color: var(--fill-primary-strong);
     color: var(--foreground);
   }
 
@@ -224,7 +224,7 @@
 
   /* 'bg-accent !text-foreground [&>button]:bg-transparent [&>button]:!text-foreground [&>button]:hover:bg-transparent [&>button]:hover:!text-foreground', */
   .range-middle {
-    background-color: var(--gray-50);
+    background-color: var(--fill-primary-weak);
     color: var(--foreground);
   }
 
@@ -265,51 +265,5 @@
       stroke: var(--primary-200);
       opacity: 0.7;
     }
-
-    .footer {
-      color: var(--muted);
-    }
-
-    .day>button {
-      color: var(--foreground);
-    }
-
-    .day>button:hover,
-    .day-selected>button {
-      background-color: var(--primary-400);
-      color: var(--foreground);
-    }
-
-    /* '[&>button]:bg-accent [&>button]:text-accent-foreground', */
-    .today>button {
-      /* background-color: var(--canvas-700); */
-      border: solid 1px var(--primary-300);
-      color: var(--foreground);
-    }
-
-    .button-range {
-      background-color: var(--canvas-700);
-      color: var(--foreground);
-    }
-
-    .button-range>button {
-      background-color: var(--primary-400);
-      color: var(--foreground);
-    }
-
-    .button-range>button:hover {
-      background-color: var(--primary-400);
-      color: var(--foreground);
-    }
-
-    .range-middle {
-      background-color: var(--canvas-700);
-      color: var(--foreground);
-    }
-
-    .range-middle>button {
-      background-color: var(--canvas-700);
-      color: var(--foreground);
-    }
   }
 }

package/src/components/forms/radio-group.module.css

@@ -78,12 +78,12 @@
     color: var(--foreground);
     font-size: 15px;
     line-height: 1;
-    padding-left: var(--spacing-2);
+    padding-left: var(--spacing-8);
   }
 
   .row .label {
     padding-left: 0;
-    padding-right: var(--spacing-4)
+    padding-right: var(--spacing-16)
   }
 
 

package/src/components/notifications/alert.module.css

@@ -51,7 +51,7 @@
     display: flex;
     align-items: start;
     width: 100%;
-    margin-bottom: var(--spacing-2);
+    margin-bottom: var(--spacing-8);
     gap: var(--gap-2);
   }
 
@@ -74,37 +74,37 @@
 
   /* Intents */
   .primary {
-    --alert-border: var(--primary-300);
-    --alert-background: oklch(from var(--primary-500) l c h / 0.1);
+    --alert-border: var(--stroke-primary);
+    --alert-background: var(--fill-primary-weak);
   }
 
   .secondary {
-    --alert-border: var(--secondary-300);
-    --alert-background: oklch(from var(--secondary-500) l c h / 0.1);
+    --alert-border: var(--stroke-secondary);
+    --alert-background: var(--fill-secondary-weak);
   }
 
   .noeffect {
-    --alert-border: var(--gray-300);
-    --alert-background: oklch(from var(--gray-500) l c h / 0.1);
+    --alert-border: var(--stroke-noeffect);
+    --alert-background: var(--fill-noeffect-weak);
   }
 
   .success {
-    --alert-border: var(--green-300);
-    --alert-background: oklch(from var(--green-500) l c h / 0.1);
+    --alert-border: var(--stroke-success);
+    --alert-background: var(--fill-success-weak);
   }
 
   .info {
-    --alert-border: var(--blue-300);
-    --alert-background: oklch(from var(--blue-500) l c h / 0.1);
+    --alert-border: var(--stroke-info);
+    --alert-background: var(--fill-info-weak);
   }
 
   .warning {
-    --alert-border: var(--yellow-300);
-    --alert-background: oklch(from var(--yellow-500) l c h / 0.1);
+    --alert-border: var(--stroke-warning);
+    --alert-background: var(--fill-warning-weak);
   }
 
   .danger {
-    --alert-border: var(--red-300);
-    --alert-background: oklch(from var(--red-500) l c h / 0.1);
+    --alert-border: var(--stroke-danger);
+    --alert-background: var(--fill-danger-weak);
   }
 }

package/src/components/notifications/alert.stories.tsx

@@ -7,7 +7,7 @@ import { Alert as AlertComponent } from './alert.js'
 
 export const Alerts = (): React.JSX.Element => {
   return (
-    <div style={{ maxWidth: '600px', margin: '0 auto' }}>
+    <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
       {intent.map((intent: Intent) => {
         if (intent !== 'noeffect') {
           return (

package/src/components/table/table.module.css

@@ -47,7 +47,7 @@
   /* 'whitespace-nowrap px-2 py-4 text-sm text-gray-700 uppercase bg-canvas-100/50 dark:bg-canvas-800/50 dark:text-gray-200', */
   .table-heading-cell {
     white-space: nowrap;
-    padding: var(--spacing-2) var(--spacing-2);
+    padding: var(--spacing-8) var(--spacing-8);
     font-size: 0.975rem; /* 15.6px */
     /* text-transform: uppercase; */
     background-color: var(--canvas-50);
@@ -55,7 +55,7 @@
 
   /* not-prose px-2 py-2 text-sm [&_a]:underline */
   .table-cell {
-    padding: var(--spacing-2);
+    padding: var(--spacing-8);
     font-size: var(--font-size-sm);
 
     & a {

package/src/components/tabs/tabs.module.css

@@ -4,9 +4,9 @@
 
   .tabs-root {
     display: flex;
-    padding: var(--spacing-2);
+    padding: var(--spacing-8);
     flex-direction: column;
-    gap: var(--spacing-1);
+    gap: var(--spacing-4);
     border-radius: var(--border-radius-md);
     border: 1px solid var(--border-color);
   }
@@ -17,7 +17,7 @@
     gap: var(--gap-2);
     align-items: center;
     border-radius: var(--border-radius-md);
-    padding: var(--spacing-1);
+    padding: var(--spacing-4);
     border: 1px solid var(--border-color);
 
     &:focus-visible {
@@ -40,12 +40,14 @@
 
     &:focus {
       position: relative;
-      box-shadow: 0 0 0 2px black;
+      /* NOTE: will override ring shadows for buttons */
+      /* Will revisit as we're going to rewrite our uikit tabs component */
+      /* box-shadow: 0 0 0 2px black; */
     }
   }
 
   .tabs-content {
-    margin-top: var(--spacing-2);
+    margin-top: var(--spacing-8);
     padding: 6px;
     outline: none;
 

package/src/components/tabs/tabs.stories.tsx

@@ -20,7 +20,7 @@ export const Tabs = (): React.JSX.Element => (
   <div
     style={{
       maxWidth: '700px',
-      marginBottom: '24px',
+      margin: '2rem auto',
       display: 'flex',
       justifyContent: 'center',
     }}

package/src/loaders/loaders.stories.tsx

@@ -1,8 +1,8 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import type React from 'react'
 
-import { LoaderEllipsis } from './ellipses.js'
 import { LoaderRing } from './ring.js'
+import { LoaderEllipsis } from './ellipses.js'
 import { LoaderSpinner } from './spinner.js'
 
 interface LoaderProps {

package/src/styles/base/base.css

@@ -7,6 +7,7 @@
 @import "./opacity.css";
 @import "./shadows.css";
 @import "./spacing.css";
+@import "./size.css";
 @import "./transitions.css";
 @import "./typography.css";
 @import "./z-index.css";

package/src/styles/base/size.css

@@ -0,0 +1,24 @@
+@layer infonomic-base {
+  :root {
+  --size-0: 0;
+  --size-2: 0.125rem;
+  --size-4: 0.25rem;
+  --size-6: 0.375rem;
+  --size-8: 0.5rem;
+  --size-12: 0.75rem;
+  --size-16: 1rem;
+  --size-20: 1.25rem;
+  --size-24: 1.5rem;
+  --size-28: 1.75rem;
+  --size-32: 2rem;
+  --size-36: 2.25rem;
+  --size-40: 2.5rem;
+  --size-44: 2.75rem;
+  --size-48: 3rem;
+  --size-64: 4rem;
+  --size-80: 5rem;
+  --size-96: 6rem;
+  --size-112: 7rem;
+  --size-128: 8rem;
+  }
+}