@infonomic/uikit 3.7.0 → 3.9.0

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.module.css

@@ -3,29 +3,30 @@
 @layer infonomic-components {
   .container {
     width: 100%;
-    padding: 0 16px;
+    padding: 0 1rem;
     margin: 0 auto;
-    max-width: 960px;
+    max-width: 60rem;
   }
 
+  /* Shy edges */
   /* Large */
-  @media (min-width: 1050px) {
+  @media (min-width: 66rem) {
     .container {
-      max-width: 1024px;
+      max-width: 64rem;
     }
   }
 
   /* X-Large */
-  @media (min-width: 1230px) {
+  @media (min-width: 77rem) {
     .container {
-      max-width: 1190px;
+      max-width: 74.375rem;
     }
   }
 
   /* 2X-Large */
-  @media (min-width: 1500px) {
+  @media (min-width: 94rem) {
     .container {
-      max-width: 1400px;
+      max-width: 87.5rem;
     }
   }
 }

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/dropdown/dropdown.stories.tsx

@@ -62,7 +62,7 @@ export const Dropdown: Story = {
             </DropdownComponent.Trigger>
 
             <DropdownComponent.Portal>
-              <DropdownComponent.Content align="end" sideOffset={10}>
+              <DropdownComponent.Content align="end" data-side="top" sideOffset={10}>
                 <DropdownComponent.Item>
                   <div className="dropdown-item-content">
                     <span className="dropdown-item-content-icon">

package/src/components/dropdown/dropdown.tsx

@@ -149,7 +149,7 @@ const SubContent = ({
   return (
     <DropdownMenuPrimitive.SubContent
       ref={ref}
-      className={cx('dropdown-menu-subcontent', className)}
+      className={cx('dropdown-menu-subcontent', styles['dropdown-subcontent'], className)}
       {...rest}
     >
       {children}

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);
   }
 
@@ -234,7 +234,7 @@
     color: var(--foreground);
   }
 
-  @media (min-width: 640px) {
+  @media (min-width: 40rem) {
     .months {
       flex-direction: row;
     }
@@ -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/notifications/toast.module.css

@@ -127,7 +127,7 @@
     left: 16px;
   }
 
-  @media (min-width: 768px) {
+  @media (min-width: 48rem) {
 
     .root.top-right[data-state="open"],
     .root.bottom-right[data-state="open"] {

package/src/components/pager/pagination.module.css

@@ -124,7 +124,7 @@
     display: none;
   }
 
-  @media(min-width: 640px) {
+  @media(min-width: 40rem) {
 
     .mobile-toggle {
       display: flex;

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/icons/icon-element.tsx

@@ -1,6 +1,8 @@
 import type { ReactNode } from 'react'
 import type React from 'react'
 
+import styles from './icons.module.css'
+
 import cx from 'classnames'
 
 export interface IconElementProps extends React.ComponentProps<'div'> {
@@ -23,7 +25,7 @@ export const IconElement = (props: IconElementProps): React.JSX.Element => {
         justifyContent: 'center',
         marginRight: menuItem != null && menuItem ? '1.2rem' : '0',
       }}
-      className={cx('component--icon-element-root', className)}
+      className={cx(styles['element-root'], className)}
       {...rest}
     >
       {children}

package/src/icons/icons.module.css

@@ -2,6 +2,13 @@
 
 @layer infonomic-components {
 
+  .element-root svg {
+    display: block;
+    margin: auto;
+    max-width: 100%;
+    max-height: 100%;
+  }
+
   .stroke-none {
     stroke: none;
   }

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

@@ -1,4 +1,14 @@
 @import "./reset.css";
+
+@import "./animations.css";
+@import "./borders.css";
+@import "./breakpoints.css";
 @import "./colors.css";
-@import "./vars.css";
-@import "./animations.css";
+@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/borders.css

@@ -0,0 +1,30 @@
+@layer infonomic-base {
+  :root {
+    /* ========================================
+       BORDER & RADIUS
+    ======================================== */
+    --border-width-thin: 1px;
+    --border-width-normal: 2px;
+    --border-width-thick: 4px;
+
+    --border-style-solid: solid;
+    --border-style-dashed: dashed;
+    --border-style-dotted: dotted;
+
+    --border-radius-none: 0px;
+    --border-radius-sm: 4px;
+    --border-radius-md: 8px;
+    --border-radius-lg: 12px;
+    --border-radius-xl: 16px;
+    --border-radius-2xl: 24px;
+    --border-radius-full: 9999px;
+
+    /* ========================================
+       RINGS
+    ======================================== */
+
+    --ring-offset-width: 2px;
+    --ring-inset: ;
+    --ring-shadow: 0 0 #0000;
+  }
+}

package/src/styles/base/breakpoints.css

@@ -0,0 +1,15 @@
+@layer infonomic-base {
+  :root {
+    /* ========================================
+       BREAKPOINTS - must match any that are used in Tailwind CSS
+       Note: Values in rem (1rem = 16px at default font size)
+    ======================================== */
+    --breakpoint-xs: 30rem; /* 480px */
+    --breakpoint-sm: 40rem; /* 640px */
+    --breakpoint-md: 48rem; /* 768px */
+    --breakpoint-lg: 66rem; /* 1056px */
+      /* our container component will set max width to common screen size */
+    --breakpoint-xl: 77rem; /* 1232px */
+    --breakpoint-2xl: 94rem; /* 1504px */
+  }
+}

package/src/styles/base/opacity.css

@@ -0,0 +1,12 @@
+@layer infonomic-base {
+:root {
+    /* ========================================
+        OPACITY LEVELS
+    ======================================== */
+    --opacity-0: 0;
+    --opacity-25: 0.25;
+    --opacity-50: 0.5;
+    --opacity-75: 0.75;
+    --opacity-100: 1;
+  }
+}

package/src/styles/base/shadows.css

@@ -0,0 +1,13 @@
+@layer infonomic-base {
+  :root {
+    /* ========================================
+       SHADOWS
+    ======================================== */
+    --shadow: 0 0 #0000;
+    --shadow-xs: 0px 1px 2px rgba(0, 0, 0, 0.05);
+    --shadow-sm: 0px 2px 4px rgba(0, 0, 0, 0.1);
+    --shadow-md: 0px 4px 6px rgba(0, 0, 0, 0.1);
+    --shadow-lg: 0px 6px 12px rgba(0, 0, 0, 0.15);
+    --shadow-xl: 0px 8px 16px rgba(0, 0, 0, 0.2);
+  }
+}