@altruist03/ui 0.1.0 → 0.2.1

package/src/tokens/brands/firebird/themes/dark.json

@@ -0,0 +1,28 @@
+{
+  "color": {
+    "primary": {
+      "default": "{colors.gray.600}",
+      "hover": "{colors.gray.700}",
+      "active": "{colors.gray.800}"
+    },
+    "border": {
+      "default": "{colors.gray.600}",
+      "active": "{colors.gray.500}",
+      "disabled": "{colors.gray.600}"
+    },
+    "background": {
+      "default": "{colors.gray.900}",
+      "secondary": "{colors.gray.800}",
+      "tertiary": "{colors.gray.700}",
+      "disabled": "{colors.gray.600}",
+      "modalHeader": "{colors.gray.800}"
+    },
+    "text": {
+      "primary": "{colors.white}",
+      "secondary": "{colors.gray.300}",
+      "tertiary": "{colors.gray.400}",
+      "disabled": "{colors.gray.500}",
+      "inverse": "{colors.gray.900}"
+    }
+  }
+}

package/src/tokens/brands/firebird/themes/light.json

@@ -0,0 +1,20 @@
+{
+  "color": {
+    "primary": {
+      "default": "{colors.blue.600}",
+      "hover": "{colors.blue.700}",
+      "active": "{colors.blue.800}"
+    },
+    "brand": {
+      "default": "{colors.brand.gold}",
+      "secondary": "{colors.brand.cream}",
+      "textDefault": "{colors.brand.goldDark}",
+      "textSecondary": "{colors.brand.arabianGulf}"
+    },
+    "background": {
+      "default": "{colors.gray.75}",
+      "brandDefault": "{colors.brand.gold}",
+      "brandSecondary": "{colors.brand.cream}"
+    }
+  }
+}

package/src/tokens/button.ts

@@ -0,0 +1,24 @@
+export type ButtonVariant = "blue" | "red" | "grey";
+
+export type ButtonSize = "sm" | "md" | "lg";
+
+export type ButtonShape = "rounded" | "square" | "pill";
+
+export interface ButtonColorToken {
+  background: string;
+  color: string;
+  hover: string;
+  border?: string;
+  /** Optional: override text/icon color on hover */
+  hoverTextColor?: string;
+}
+
+export interface ButtonSizeToken {
+  width?: string;
+  height: string;
+  padding: string;
+  fontSize: number;
+  borderRadius: string;
+  /** Space between icon/spinner and label (px). */
+  contentGap?: number;
+}

package/src/tokens/components/accordion.json

@@ -0,0 +1,52 @@
+{
+  "accordion": {
+    "container": {
+      "width": "100%",
+      "borderWidth": "{size.1}",
+      "borderColor": "{color.border.default}",
+      "borderRadius": "{radius.lg}",
+      "background": "{color.background.default}"
+    },
+    "header": {
+      "padding": "{spacing.5}",
+      "gap": "{spacing.4}",
+      "contentGap": "{spacing.4}",
+      "defaultBackground": "{color.background.subtle}",
+      "hoverBackground": "{color.background.surface}",
+      "expandedBackground": "{color.success.light}"
+    },
+    "statusIcon": {
+      "size": "{size.40}",
+      "background": "{color.success.default}",
+      "color": "{color.text.inverse}",
+      "symbol": "✓",
+      "fontSize": "{typography.fontSize.2xl}",
+      "fontWeight": "{typography.fontWeight.bold}",
+      "lineHeight": "{typography.lineHeight.tight}"
+    },
+    "title": {
+      "fontFamily": "{typography.fontFamily.sans}",
+      "fontSize": "{typography.fontSize.base}",
+      "fontWeight": "{typography.fontWeight.bold}",
+      "lineHeight": "{typography.lineHeight.normal}",
+      "color": "{color.text.primary}"
+    },
+    "subtitle": {
+      "fontFamily": "{typography.fontFamily.sans}",
+      "fontSize": "{typography.fontSize.sm}",
+      "fontStyle": "italic",
+      "fontWeight": "{typography.fontWeight.medium}",
+      "lineHeight": "{typography.lineHeight.normal}",
+      "color": "{color.text.secondary}"
+    },
+    "actionIcon": {
+      "size": "{size.24}",
+      "color": "{color.success.default}",
+      "strokeWidth": "{size.2}"
+    },
+    "content": {
+      "padding": "{spacing.5}",
+      "background": "{color.background.default}"
+    }
+  }
+}

package/src/tokens/components/avatar.json

@@ -0,0 +1,40 @@
+{
+  "avatar": {
+    "background": "{color.background.secondary}",
+    "textColor": "{color.text.primary}",
+    "iconColor": "{color.icon.default}",
+    "placeholderBackground": "{color.background.tertiary}",
+    "placeholderShape": "{color.border.secondary}",
+    "shape": {
+      "circle": "{radius.full}",
+      "square": "{radius.sm}"
+    },
+    "size": {
+      "xs": "{size.avatar.xs.size}",
+      "sm": "{size.avatar.sm.size}",
+      "md": "{size.avatar.md.size}",
+      "lg": "{size.avatar.lg.size}",
+      "xl": "{size.avatar.xl.size}",
+      "xxl": "{size.avatar.xxl.size}",
+      "xxxl": "{size.avatar.xxxl.size}"
+    },
+    "fontSize": {
+      "xs": "{size.avatar.xs.fontSize}",
+      "sm": "{size.avatar.sm.fontSize}",
+      "md": "{size.avatar.md.fontSize}",
+      "lg": "{size.avatar.lg.fontSize}",
+      "xl": "{size.avatar.xl.fontSize}",
+      "xxl": "{size.avatar.xxl.fontSize}",
+      "xxxl": "{size.avatar.xxxl.fontSize}"
+    },
+    "iconSize": {
+      "xs": "{size.avatar.xs.iconSize}",
+      "sm": "{size.avatar.sm.iconSize}",
+      "md": "{size.avatar.md.iconSize}",
+      "lg": "{size.avatar.lg.iconSize}",
+      "xl": "{size.avatar.xl.iconSize}",
+      "xxl": "{size.avatar.xxl.iconSize}",
+      "xxxl": "{size.avatar.xxxl.iconSize}"
+    }
+  }
+}

package/src/tokens/components/badge.json

@@ -0,0 +1,41 @@
+{
+  "badge": {
+    "size": {
+      "xs": {
+        "height": "{size.20}",
+        "padding": "{spacing.xxs} {spacing.1_5}",
+        "fontSize": "{typography.fontSize.xs}",
+        "borderRadius": "{radius.xl}",
+        "removeIconSize": "{typography.fontSize.xs}"
+      },
+      "sm": {
+        "height": "{semantic.size.sm.height}",
+        "padding": "{semantic.size.sm.paddingY} {semantic.size.sm.paddingX}",
+        "fontSize": "{semantic.size.sm.fontSize}",
+        "borderRadius": "{radius.xl}",
+        "removeIconSize": "{typography.fontSize.sm}"
+      },
+      "md": {
+        "height": "{semantic.size.md.height}",
+        "padding": "{semantic.size.md.paddingY} {semantic.size.md.paddingX}",
+        "fontSize": "{semantic.size.md.fontSize}",
+        "borderRadius": "{radius.xl}",
+        "removeIconSize": "{typography.fontSize.sm}"
+      },
+      "lg": {
+        "height": "{semantic.size.lg.height}",
+        "padding": "{semantic.size.lg.paddingY} {semantic.size.lg.paddingX}",
+        "fontSize": "{semantic.size.lg.fontSize}",
+        "borderRadius": "{radius.xl}",
+        "removeIconSize": "{typography.fontSize.base}"
+      }
+    },
+    "background": "{color.background.badge}",
+    "backgroundWhite": "{colors.white}",
+    "color": "{color.text.badge}",
+    "removeButtonColor": "{color.text.primary}",
+    "removeButtonHoverColor": "{color.text.secondary}",
+    "boxShadow": "0 1px 2px rgba(0, 0, 0, 0.05)",
+    "borderColor": "{color.border.default}"
+  }
+}

package/src/tokens/components/breadcrumb.json

@@ -0,0 +1,13 @@
+{
+  "breadcrumb": {
+    "itemColor": "{color.text.primary}",
+    "currentColor": "{color.text.primary}",
+    "separatorColor": "{color.text.primary}",
+    "fontFamily": "{typography.fontFamily.sans}",
+    "fontSize": "{typography.fontSize.base}",
+    "fontWeight": "{typography.fontWeight.normal}",
+    "itemFontWeight": "{typography.fontWeight.semibold}",
+    "lineHeight": "{typography.lineHeight.md}",
+    "gap": "{spacing.2}"
+  }
+}

package/src/tokens/components/button.json

@@ -0,0 +1,67 @@
+{
+  "button": {
+    "variant": {
+      "blue": {
+        "background": "{color.primary.default}",
+        "color": "{color.text.inverse}",
+        "hover": {
+          "background": "{color.primary.hover}",
+          "color": "{color.text.inverse}"
+        },
+        "border": "none"
+      },
+      "red": {
+        "background": "#c82f2f",
+        "color": "{color.text.inverse}",
+        "hover": {
+          "background": "{color.destructive.active}",
+          "color": "{color.text.inverse}"
+        },
+        "border": "none"
+      },
+      "grey": {
+        "background": "{color.neutral.default}",
+        "color": "{color.text.primary}",
+        "hover": {
+          "background": "{color.neutral.hover}",
+          "color": "{color.text.primary}"
+        },
+        "border": "none"
+      }
+    },
+    "size": {
+      "sm": {
+        "height": "{semantic.size.sm.height}",
+        "padding": "{semantic.size.sm.paddingY} {semantic.size.sm.paddingX}",
+        "fontSize": "{semantic.size.sm.fontSize}",
+        "borderRadius": "{radius.md}",
+        "contentGap": "{spacing.1_25}"
+      },
+      "md": {
+        "height": "{semantic.size.md.height}",
+        "padding": "{semantic.size.md.paddingY} {semantic.size.md.paddingX}",
+        "fontSize": "{semantic.size.md.fontSize}",
+        "borderRadius": "{radius.md}",
+        "contentGap": "{spacing.2}"
+      },
+      "lg": {
+        "height": "{semantic.size.lg.height}",
+        "padding": "{semantic.size.lg.paddingY} {semantic.size.lg.paddingX}",
+        "fontSize": "{semantic.size.lg.fontSize}",
+        "borderRadius": "{radius.md}",
+        "contentGap": "{spacing.3}"
+      }
+    },
+    "shape": {
+      "rounded": "{radius.xl}",
+      "square": "{radius.sm}",
+      "pill": "{radius.pill}"
+    },
+    "fontFamily": "{typography.body.medium.fontFamily}",
+    "fontWeight": "{typography.label.medium.fontWeight}",
+    "lineHeight": "{typography.body.medium.lineHeight}",
+    "disabled": {
+      "opacity": "0.3"
+    }
+  }
+}

package/src/tokens/components/card.json

@@ -0,0 +1,39 @@
+{
+  "card": {
+    "background": "{color.background.default}",
+    "border": "1px solid {color.border.default}",
+    "borderRadius": "{semantic.size.md.radius}",
+    "padding": {
+      "sm": "{semantic.size.sm.paddingY} {semantic.size.sm.paddingX}",
+      "md": "{semantic.size.md.paddingY} {semantic.size.md.paddingX}",
+      "lg": "{semantic.size.lg.paddingY} {semantic.size.lg.paddingX}"
+    },
+    "shadow": {
+      "sm": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+      "md": "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
+      "lg": "0 10px 15px -3px rgba(0, 0, 0, 0.1)"
+    }
+  },
+  "statCard": {
+    "surfaceBackground": "{color.background.badge}",
+    "border": "1px solid {color.border.default}",
+    "borderRadius": "{radius.xl}",
+    "padding": "{spacing.3} {spacing.4}",
+    "gap": "{spacing.3}",
+    "iconWell": {
+      "size": "{size.34}",
+      "borderRadius": "{radius.md}",
+      "accentMixPercent": "14"
+    },
+    "label": {
+      "fontSize": "{typography.fontSize.sm}",
+      "fontWeight": "{typography.fontWeight.semibold}",
+      "color": "{color.text.primary}"
+    },
+    "value": {
+      "fontSize": "{typography.fontSize.lg}",
+      "fontWeight": "{typography.fontWeight.bold}",
+      "color": "{color.text.description}"
+    }
+  }
+}

package/src/tokens/components/checkbox.json

@@ -0,0 +1,64 @@
+{
+  "checkbox": {
+    "heading": {
+      "fontSize": "{typography.label.medium.fontSize}",
+      "fontWeight": "{typography.label.medium.fontWeight}",
+      "color": "{color.text.primary}",
+      "marginBottom": "{spacing.2}"
+    },
+    "label": {
+      "fontSize": "{typography.body.medium.fontSize}",
+      "fontWeight": "{typography.body.medium.fontWeight}",
+      "color": {
+        "active": "{color.text.primary}",
+        "inactive": "{color.text.secondary}"
+      },
+      "marginLeft": "{spacing.2}"
+    },
+    "group": {
+      "gapHorizontal": "{spacing.4}",
+      "gapVertical": "{spacing.3}"
+    },
+    "checkbox": {
+      "size": "18px",
+      "borderRadius": "{radius.sm}",
+      "color": {
+        "active": "{color.checkbox.color.active}",
+        "inactive": "{colors.gray.650}"
+      },
+      "background": {
+        "inactive": "{color.background.default}"
+      },
+      "border": {
+        "checked": "{colors.blue.600}"
+      }
+    },
+    "size": {
+      "sm": {
+        "checkboxSize": "{size.16}",
+        "borderRadius": "{radius.sm}",
+        "labelFontSize": "{typography.body.small.fontSize}",
+        "headingFontSize": "{typography.label.medium.fontSize}"
+      },
+      "md": {
+        "checkboxSize": "18px",
+        "borderRadius": "{radius.sm}",
+        "labelFontSize": "{typography.body.medium.fontSize}",
+        "headingFontSize": "{typography.label.medium.fontSize}"
+      },
+      "lg": {
+        "checkboxSize": "{size.20}",
+        "borderRadius": "{radius.sm}",
+        "labelFontSize": "{typography.body.large.fontSize}",
+        "headingFontSize": "{typography.label.medium.fontSize}"
+      }
+    },
+    "helper": {
+      "textFontSizes": "{typography.body.medium.fontSize}",
+      "textFontWeight": "{typography.body.small.fontWeight}",
+      "textColor": "{color.icon.caption}",
+      "errorColor": "{color.error.default}",
+      "marginTop": "{spacing.1}"
+    }
+  }
+}

package/src/tokens/components/closebutton.json

@@ -0,0 +1,55 @@
+{
+  "closebutton": {
+    "variant": {
+      "filled": {
+        "background": "{color.background.closeButton}",
+        "backgroundWhite": "{colors.white}",
+        "color": "{color.icon.default}",
+        "hover": {
+          "background": "{color.background.tertiary}",
+          "backgroundWhite": "{colors.white}",
+          "color": "{color.icon.default}"
+        },
+        "border": "none"
+      },
+      "outline": {
+        "background": "transparent",
+        "color": "{color.icon.default}",
+        "border": "{color.border.default}",
+        "hover": {
+          "border": "{color.border.secondary}",
+          "color": "{color.icon.secondary}"
+        }
+      }
+    },
+    "size": {
+      "xs": {
+        "size": "{size.closebutton.xs.size}",
+        "padding": "{size.closebutton.xs.padding}",
+        "iconSize": "{size.closebutton.xs.iconSize}",
+        "borderRadius": "{size.closebutton.xs.borderRadius}"
+      },
+      "sm": {
+        "size": "{size.closebutton.sm.size}",
+        "padding": "{size.closebutton.sm.padding}",
+        "iconSize": "{size.closebutton.sm.iconSize}",
+        "borderRadius": "{size.closebutton.sm.borderRadius}"
+      },
+      "md": {
+        "size": "{size.closebutton.md.size}",
+        "padding": "{size.closebutton.md.padding}",
+        "iconSize": "{size.closebutton.md.iconSize}",
+        "borderRadius": "{size.closebutton.md.borderRadius}"
+      },
+      "lg": {
+        "size": "{size.closebutton.lg.size}",
+        "padding": "{size.closebutton.lg.padding}",
+        "iconSize": "{size.closebutton.lg.iconSize}",
+        "borderRadius": "{size.closebutton.lg.borderRadius}"
+      }
+    },
+    "disabled": {
+      "opacity": "0.5"
+    }
+  }
+}

package/src/tokens/components/datatable.json

@@ -0,0 +1,40 @@
+{
+  "datatable": {
+    "header": {
+      "background": "{color.background.tableHeader}",
+      "color": "{color.text.tableHeader}",
+      "fontWeight": "{typography.fontWeight.medium}",
+      "fontSize": "{typography.fontSize.sm}",
+      "padding": "{spacing.4}",
+      "borderBottom": "{color.border.default}",
+      "borderRight": "{color.border.tableHeaderPartition}"
+    },
+    "cell": {
+      "padding": "{spacing.4}",
+      "fontSize": "{typography.fontSize.sm}",
+      "color": "{color.text.primary}",
+      "borderBottom": "{color.border.default}"
+    },
+    "row": {
+      "background": "{color.background.tableRow}",
+      "stripeBackground": "{color.background.tableRowStripe}",
+      "hoverBackground": "{color.background.tableRowHover}"
+    },
+    "skeleton": {
+      "baseColor": "{color.background.tertiary}",
+      "height": "{spacing.4}",
+      "borderRadius": "{radius.md}"
+    },
+    "emptyState": {
+      "color": "{color.text.secondary}",
+      "fontSize": "{typography.fontSize.md}"
+    },
+    "table": {
+      "border": "{color.border.tableBorder}"
+    },
+    "sortIcon": {
+      "width": "{typography.fontSize.md}",
+      "height": "{typography.fontSize.md}"
+    }
+  }
+}

package/src/tokens/components/datepicker.json

@@ -0,0 +1,99 @@
+{
+  "datepicker": {
+    "wrapper": {
+      "padding": "{semantic.size.md.paddingY} {semantic.size.md.paddingX}",
+      "paddingRightIcon": "56px",
+      "border": {
+        "default": "1px solid {color.border.default}",
+        "active": "2px solid {color.border.active}",
+        "error": "2px solid {color.error.default}"
+      },
+      "borderRadius": "{semantic.size.md.radius}",
+      "background": "{color.background.default}",
+      "backgroundDisabled": "{color.background.disabled}"
+    },
+    "input": {
+      "fontSize": "{semantic.typography.size.md.fontSize}",
+      "color": "{color.text.primary}",
+      "fontFamily": "{typography.body.medium.fontFamily}"
+    },
+    "header": {
+      "padding": "{spacing.component.xs} {spacing.component.sm}",
+      "borderBottom": "1px solid {color.border.default}",
+      "fontSize": "{typography.body.small.fontSize}"
+    },
+    "headerButton": {
+      "padding": "2px",
+      "fontSize": "{typography.body.large.fontSize}"
+    },
+    "headerSelect": {
+      "padding": "2px 6px",
+      "borderRadius": "{radius.md}",
+      "border": "1px solid {color.border.default}",
+      "background": "{color.background.default}",
+      "fontSize": "{typography.body.small.fontSize}"
+    },
+    "label": {
+      "fontSize": "{typography.label.medium.fontSize}",
+      "color": "{color.text.primary}",
+      "requiredColor": "{color.error.default}"
+    },
+    "helper": {
+      "fontSize": "{typography.body.medium.fontSize}",
+      "bgColor": "{color.text.secondary}",
+      "color": "{color.text.primary}",
+      "errorColor": "{color.error.default}"
+    },
+    "placeholderColor": "{color.text.tertiary}",
+    "calendar": {
+      "border": "1px solid {color.border.default}",
+      "borderRadius": "{radius.xl}",
+      "headerBackground": "{color.background.default}",
+      "selectedBackground": "{color.primary.default}",
+      "selectedColor": "{color.text.inverse}",
+      "hoverBackground": "{color.background.tertiary}",
+      "disabledColor": "{color.border.default}"
+    },
+    "size": {
+      "sm": {
+        "inputFontSize": "{semantic.typography.size.sm.fontSize}",
+        "wrapperBorderRadius": "{semantic.size.sm.radius}",
+        "wrapperPadding": "{semantic.size.sm.paddingY} {semantic.size.sm.paddingX}",
+        "labelFontSize": "{typography.label.small.fontSize}",
+        "wrapperBorder": {
+          "default": "1px solid {color.border.default}",
+          "active": "2px solid {color.border.active}",
+          "error": "2px solid {color.error.default}"
+        },
+        "wrapperBackground": "{color.background.default}",
+        "wrapperBackgroundDisabled": "{color.background.disabled}"
+      },
+      "md": {
+        "inputFontSize": "{semantic.typography.size.md.fontSize}",
+        "wrapperBorderRadius": "{semantic.size.md.radius}",
+        "wrapperPadding": "{semantic.size.md.paddingY} {semantic.size.md.paddingX}",
+        "labelFontSize": "{typography.label.medium.fontSize}",
+        "wrapperBorder": {
+          "default": "1px solid {color.border.default}",
+          "active": "2px solid {color.border.active}",
+          "error": "2px solid {color.error.default}"
+        },
+        "wrapperBackground": "{color.background.default}",
+        "wrapperBackgroundDisabled": "{color.background.disabled}"
+      },
+      "lg": {
+        "inputFontSize": "{semantic.typography.size.lg.fontSize}",
+        "wrapperBorderRadius": "{semantic.size.lg.radius}",
+        "wrapperPadding": "{semantic.size.lg.paddingY} {semantic.size.lg.paddingX}",
+        "labelFontSize": "{typography.label.large.fontSize}",
+        "wrapperBorder": {
+          "default": "1px solid {color.border.default}",
+          "active": "2px solid {color.border.active}",
+          "error": "2px solid {color.error.default}"
+        },
+        "wrapperBackground": "{color.background.default}",
+        "wrapperBackgroundDisabled": "{color.background.disabled}"
+      }
+    }
+  }
+}

package/src/tokens/components/drawer.json

@@ -0,0 +1,23 @@
+{
+  "drawer": {
+    "background": "{color.background.dropdown}",
+    "backdrop": {
+      "background": "{color.background.overlay}",
+      "opacityVisible": "1",
+      "opacityHidden": "0"
+    },
+    "radius": "{radius.md}",
+    "transitionDuration": "300ms",
+    "size": {
+      "sm": {
+        "width": "{size.550}"
+      },
+      "md": {
+        "width": "800px"
+      },
+      "lg": {
+        "width": "{size.1200}"
+      }
+    }
+  }
+}

package/src/tokens/components/field.json

@@ -0,0 +1,29 @@
+{
+  "field": {
+    "input": {
+      "height": "{semantic.field.height}",
+      "padding": "{semantic.field.paddingY} {semantic.field.paddingX}",
+      "borderRadius": "{semantic.field.borderRadius}",
+      "fontSize": "{semantic.field.fontSize}",
+      "color": "{semantic.field.color}",
+      "background": "{semantic.field.background}",
+      "backgroundDisabled": "{semantic.field.backgroundDisabled}",
+
+      "border": {
+        "default": "{semantic.field.border.default}",
+        "focus": "{semantic.field.border.focus}",
+        "error": "{semantic.field.border.error}"
+      }
+    },
+
+    "label": {
+      "color": "{semantic.field.labelColor}",
+      "requiredColor": "{semantic.field.labelRequiredColor}"
+    },
+
+    "helper": {
+      "color": "{semantic.field.helperColor}",
+      "errorColor": "{semantic.field.helperErrorColor}"
+    }
+  }
+}