Dashboard story

AGENTS.md

@@ -35,4 +35,5 @@ TypeScript and code style:
 
 When a component is done:
 - Move it and its css and story to `src/components`.
-- Update the story title in default export to `Components / <ComponentName>`.
+- Update the story title in default export to `Components / <ComponentName>`.
+- Add it to the exports in `src/index.ts`.

src/components/Button.css

@@ -9,7 +9,7 @@
 
   color: var(--alinea-button-color);
   font: inherit;
-  font-size: 14px;
+  font-size: var(--alinea-font-size-base);
   line-height: 24px;
   text-decoration: none;
   text-align: left;
@@ -75,20 +75,36 @@
   &[data-size="icon"] {
     width: 2rem;
     height: 2rem;
+    flex-shrink: 0;
     padding: 0;
     border-radius: 50%;
     display: inline-flex;
     align-items: center;
     justify-content: center;
 
     [data-slot="icon"] {
-      font-size: 14px;
+      font-size: var(--alinea-font-size-base);
     }
 
     &[data-appearance="active"] {
       background-color: var(--alinea-highlight-overlay);
       color: var(--alinea-highlight-background);
     }
+
+    &[data-appearance="outline"] {
+      background-color: transparent;
+      border-color: var(--alinea-border-color);
+      color: var(--alinea-text-color-base);
+    }
+
+    &[data-appearance="outline"][data-hovered] {
+      background-color: transparent;
+      color: var(--alinea-text-color);
+    }
+
+    &[data-appearance="outline"][data-pressed] {
+      background-color: transparent;
+    }
   }
 
   &[data-size="square-petite"] {

src/components/Button.stories.tsx

@@ -2,6 +2,7 @@ import {type HTMLAttributes, type PropsWithChildren, useState} from 'react'
 import {Stack} from '../stories/Stack.tsx'
 import {IcRoundAccountCircle} from '../stories/icons/IcRoundAccountCircle.tsx'
 import {IcRoundArchive} from '../stories/icons/IcRoundArchive.tsx'
+import {IcRoundClose} from '../stories/icons/IcRoundClose.tsx'
 import {IcRoundHistory} from '../stories/icons/IcRoundHistory.tsx'
 import {IcRoundLanguage} from '../stories/icons/IcRoundLanguage.tsx'
 import {IcRoundRefresh} from '../stories/icons/IcRoundRefresh.tsx'
@@ -213,6 +214,58 @@ export function Icons() {
   )
 }
 
+export function IconSize() {
+  return (
+    <Stack>
+      <HStack>
+        <Button size="icon">
+          <IcRoundRefresh data-slot="icon" />
+        </Button>
+        <Button size="icon" appearance="outline">
+          <IcRoundRefresh data-slot="icon" />
+        </Button>
+        <Button size="icon" appearance="plain">
+          <IcRoundRefresh data-slot="icon" />
+        </Button>
+        <Button size="icon" appearance="active">
+          <IcRoundRefresh data-slot="icon" />
+        </Button>
+      </HStack>
+      <HStack>
+        <Button size="icon" intent="secondary">
+          <IcRoundSearch data-slot="icon" />
+        </Button>
+        <Button size="icon" intent="secondary" appearance="outline">
+          <IcRoundSearch data-slot="icon" />
+        </Button>
+        <Button size="icon" intent="secondary" appearance="plain">
+          <IcRoundSearch data-slot="icon" />
+        </Button>
+        <Button size="icon" intent="danger">
+          <IcRoundClose data-slot="icon" />
+        </Button>
+        <Button size="icon" intent="danger" appearance="outline">
+          <IcRoundClose data-slot="icon" />
+        </Button>
+      </HStack>
+      <HStack>
+        <Button size="icon" isDisabled>
+          <IcRoundRefresh data-slot="icon" />
+        </Button>
+        <Button size="icon" appearance="outline" isDisabled>
+          <IcRoundRefresh data-slot="icon" />
+        </Button>
+        <Button size="icon" appearance="plain" isDisabled>
+          <IcRoundRefresh data-slot="icon" />
+        </Button>
+        <Button size="icon" intent="secondary" appearance="outline" isDisabled>
+          <IcRoundSearch data-slot="icon" />
+        </Button>
+      </HStack>
+    </Stack>
+  )
+}
+
 export default {
   title: 'Components / Button'
 }

src/components/Calendar.css

@@ -64,7 +64,7 @@
     align-items: center;
     justify-content: center;
     border-radius: var(--alinea-border-radius);
-    font-size: 0.875rem;
+    font-size: var(--alinea-font-size-base);
     text-align: center;
     transition: var(--alinea-transition);
 

src/components/Checkbox.css

@@ -9,7 +9,7 @@
   flex-wrap: wrap;
   align-items: center;
   gap: 0.571rem;
-  font-size: 0.875rem;
+  font-size: var(--alinea-font-size-base);
   line-height: 1;
   color: var(--alinea-text-color);
   forced-color-adjust: none;

src/components/ComboBox.css

@@ -8,7 +8,7 @@
   border: 1px solid var(--alinea-border-color);
   outline: 4px solid transparent;
   border-radius: 6px;
-  font-size: 0.875rem;
+  font-size: var(--alinea-font-size-base);
   line-height: 1.5;
   text-align: left;
   color: var(--alinea-field-text-color);
@@ -136,8 +136,7 @@
   border-radius: 100%;
   background-color: transparent;
   color: var(--alinea-icon-color);
-  font-size: 18px;
-  font-size: 14px;
+  font-size: var(--alinea-font-size-base);
   outline: none;
 
   &:after {
@@ -169,7 +168,7 @@
 
 .alinea-rac-ComboBoxItem {
   cursor: pointer;
-  font-size: 0.875rem;
+  font-size: var(--alinea-font-size-base);
   padding: 0.4rem;
   padding-right: 2.4rem;
   display: flex;

src/components/DateField.css

@@ -11,7 +11,7 @@
   border-radius: 6px;
   outline: 4px solid transparent;
   color: var(--alinea-field-text-color);
-  font-size: 0.875rem;
+  font-size: var(--alinea-font-size-base);
   line-height: 1.5;
   white-space: nowrap;
   transition: var(--alinea-transition);

src/components/DatePicker.css

@@ -12,7 +12,7 @@
   border-radius: 6px;
   outline: 4px solid transparent;
   color: var(--alinea-field-text-color);
-  font-size: 0.875rem;
+  font-size: var(--alinea-font-size-base);
   line-height: 1.5;
   transition: var(--alinea-transition);
 

src/components/DateRangePicker.css

@@ -12,7 +12,7 @@
   border-radius: 6px;
   outline: 4px solid transparent;
   color: var(--alinea-field-text-color);
-  font-size: 0.875rem;
+  font-size: var(--alinea-font-size-base);
   line-height: 1.5;
   transition: var(--alinea-transition);
 

src/components/Elevation.css

@@ -12,7 +12,7 @@
   border-radius: 4px;
   transition: box-shadow var(--alinea-transition);
   padding: 10px;
-  font-size: 13px;
+  font-size: var(--alinea-font-size-base);
   box-sizing: border-box;
 
   &:empty {

src/components/Label.css

@@ -19,13 +19,13 @@
   }
 
   .alinea-rac-Label-icon {
-    font-size: 14px;
+    font-size: var(--alinea-font-size-base);
     color: var(--alinea-text-color);
   }
 
   .alinea-rac-Label-label {
-    color: var(--alinea-text-color);
-    font-size: 13px;
+    color: var(--alinea-text-color-base);
+    font-size: var(--alinea-font-size-base);
     font-weight: 500;
     transition: var(--alinea-transition);
     transition-property: color;
@@ -35,7 +35,7 @@
     display: block;
     max-width: 100%;
     color: var(--alinea-text-color-base);
-    font-size: 12px;
+    font-size: var(--alinea-font-size-base);
     line-height: 1.1;
     font-weight: 400;
     font-style: italic;
@@ -45,12 +45,12 @@
 
   .alinea-rac-Label-error {
     color: var(--alinea-danger-500);
-    font-size: 12px;
+    font-size: var(--alinea-font-size-base);
     padding-top: 4px;
   }
 
   .alinea-rac-Label-required {
     color: var(--alinea-danger-500);
-    font-size: 12px;
+    font-size: var(--alinea-font-size-base);
   }
 }

src/components/Link.css

@@ -5,7 +5,7 @@
   cursor: pointer;
   position: relative;
   color: var(--alinea-link-color);
-  font-size: 14px;
+  font-size: var(--alinea-font-size-base);
   text-decoration: underline;
   text-decoration-color: transparent;
   text-underline-offset: 2px;

src/components/List.css

@@ -8,7 +8,7 @@
   cursor: default;
   overflow: hidden;
   position: relative;
-  font-size: 13px;
+  font-size: var(--alinea-font-size-base);
 }
 
 .alinea-rac-ListItem {

src/components/Menu.css

@@ -6,7 +6,7 @@
 
 .alinea-rac-MenuItem {
   cursor: pointer;
-  font-size: 0.875rem;
+  font-size: var(--alinea-font-size-base);
   padding: 0.4rem;
   display: flex;
   outline: none;

src/components/Menu.tsx

@@ -13,7 +13,7 @@ import {
 import {IcRoundKeyboardArrowRight} from '../stories/icons/IcRoundKeyboardArrowRight.tsx'
 import {Button} from './Button.tsx'
 import {Icon} from './Icon.tsx'
-import {Popover} from './Popover.tsx'
+import {Popover, type PopoverProps} from './Popover.tsx'
 import './Menu.css'
 import {IcRoundCheck} from '../stories/icons/IcRoundCheck.tsx'
 
@@ -59,23 +59,25 @@ export function MenuSeparator() {
 export interface MenuProps<T> extends MenuPrimitiveProps<T> {
   label: ReactNode
   children: ReactNode
+  popoverProps?: Omit<PopoverProps, 'children'>
 }
 
 export function Menu<T extends object>({
   label,
   children,
+  popoverProps,
   ...props
 }: MenuProps<T>) {
   const isInMenu = useContext(MenuContext)
   const Trigger = isInMenu ? SubmenuTrigger : MenuTrigger
   return (
     <Trigger>
       {typeof label === 'string' ? <Button>{label}</Button> : <>{label}</>}
-      <Popover>
+      <Popover {...popoverProps}>
         <PrimitiveMenu {...props} className="alinea-rac-Menu">
           {children}
         </PrimitiveMenu>
       </Popover>
     </Trigger>
   )
-}
+}

src/components/MultipleSelect.css

@@ -71,7 +71,7 @@
       padding: 0;
       color: var(--alinea-field-text-color);
       font: inherit;
-      font-size: 0.875rem;
+      font-size: var(--alinea-font-size-base);
       line-height: 1.5;
 
       &::placeholder {
@@ -119,7 +119,7 @@
   .alinea-rac-MultipleSelectPopover-empty {
     margin: 0;
     padding: 4px 8px;
-    font-size: 14px;
+    font-size: var(--alinea-font-size-base);
   }
 
   .alinea-rac-MultipleSelectPopover-listbox {
@@ -141,7 +141,7 @@
 .alinea-rac-MultipleSelectItem {
   scroll-snap-align: start;
   cursor: pointer;
-  font-size: 0.875rem;
+  font-size: var(--alinea-font-size-base);
   padding: 0.4rem;
   padding-right: 2.4rem;
   display: flex;

src/components/NumberField.css

@@ -39,7 +39,7 @@
       padding: 8px 10px;
       border: none;
       background: transparent;
-      font-size: 0.875rem;
+      font-size: var(--alinea-font-size-base);
       line-height: 1.5;
       color: var(--alinea-field-text-color);
       text-align: left;

src/components/RadioGroup.css

@@ -27,7 +27,7 @@
   display: flex;
   align-items: center;
   gap: 0.571rem;
-  font-size: 0.875rem;
+  font-size: var(--alinea-font-size-base);
   color: var(--alinea-text-color);
   forced-color-adjust: none;
 

src/components/SearchField.css

@@ -52,7 +52,7 @@
       padding: 8px 10px;
       color: var(--alinea-field-text-color);
       font: inherit;
-      font-size: 0.875rem;
+      font-size: var(--alinea-font-size-base);
       line-height: 1.5;
 
       &::placeholder {

src/components/Select.css

@@ -8,7 +8,7 @@
   border: 1px solid var(--alinea-border-color);
   outline: 4px solid transparent;
   border-radius: 6px;
-  font-size: 0.875rem;
+  font-size: var(--alinea-font-size-base);
   line-height: 1.5;
   min-width: 100px;
   text-align: left;
@@ -123,7 +123,7 @@
   background-color: transparent;
   color: var(--alinea-icon-color);
   font-size: 18px;
-  font-size: 14px;
+  font-size: var(--alinea-font-size-base);
   outline: none;
   z-index: 0;
 
@@ -158,7 +158,7 @@
 
 .alinea-rac-SelectItem {
   cursor: pointer;
-  font-size: 0.875rem;
+  font-size: var(--alinea-font-size-base);
   padding: 0.4rem;
 
   gap: 8px;