@altruist03/ui 0.1.0 → 0.2.0

package/src/tokens/components/switch.json

@@ -0,0 +1,55 @@
+{
+  "switch": {
+    "size": {
+      "sm": {
+        "width": "{semantic.size.switch.sm.width}",
+        "height": "{semantic.size.switch.sm.height}",
+        "thumbSize": "{semantic.size.switch.sm.thumbSize}",
+        "trackPadding": "{semantic.size.switch.sm.trackPadding}",
+        "radius": "{semantic.size.switch.sm.radius}",
+        "borderWidth": "{semantic.size.switch.sm.borderWidth}"
+      },
+      "md": {
+        "width": "{semantic.size.switch.md.width}",
+        "height": "{semantic.size.switch.md.height}",
+        "thumbSize": "{semantic.size.switch.md.thumbSize}",
+        "trackPadding": "{semantic.size.switch.md.trackPadding}",
+        "radius": "{semantic.size.switch.md.radius}",
+        "borderWidth": "{semantic.size.switch.md.borderWidth}"
+      },
+      "lg": {
+        "width": "{semantic.size.switch.lg.width}",
+        "height": "{semantic.size.switch.lg.height}",
+        "thumbSize": "{semantic.size.switch.lg.thumbSize}",
+        "trackPadding": "{semantic.size.switch.lg.trackPadding}",
+        "radius": "{semantic.size.switch.lg.radius}",
+        "borderWidth": "{semantic.size.switch.lg.borderWidth}"
+      }
+    },
+    "track": {
+      "background": "{color.background.default}",
+      "border": "{color.text.primary}",
+      "backgroundActive": "{color.primary.default}",
+      "borderActive": "{color.primary.default}"
+    },
+    "thumb": {
+      "background": "{color.text.primary}",
+      "backgroundActive": "{color.text.inverse}"
+    },
+    "label": {
+      "fontSize": "{typography.label.large.fontSize}",
+      "fontWeight": "{typography.label.large.fontWeight}",
+      "color": "{color.text.primary}",
+      "fontFamily": "{typography.fontFamily.sans}",
+      "marginBottom": "{spacing.2}"
+    },
+    "caption": {
+      "fontSize": "{typography.body.medium.fontSize}",
+      "textColor": "{color.icon.caption}"
+    },
+    "helper": {
+      "textFontSize": "{typography.body.medium.fontSize}",
+      "textColor": "{color.icon.caption}"
+    }
+  }
+}

package/src/tokens/components/tabs.json

@@ -0,0 +1,38 @@
+{
+  "tabs": {
+    "activeBackground": "{color.primary.default}",
+    "activeColor": "{color.text.inverse}",
+    "inactiveColor": "{color.text.secondary}",
+    "inactiveBackground": "{color.border.transparent}",
+    "inactiveBackgroundWhite": "{colors.white}",
+    "containerBackground": "{color.background.tabsBackground}",
+    "containerBackgroundWhite": "{colors.white}",
+    "borderRadius": "{radius.md}",
+    "containerBorderRadius": "{radius.md}",
+    "paddingX": "{spacing.component.xxs}",
+    "paddingY": "0px",
+    "gap": "{spacing.component.sm}",
+    "fontSize": "{typography.body.medium.fontSize}",
+    "fontWeight": "{typography.body.medium.fontWeight}",
+    "size": {
+      "sm": {
+        "height": "{semantic.size.sm.height}",
+        "padding": "{semantic.size.sm.paddingY} {semantic.size.sm.paddingX}",
+        "fontSize": "{semantic.size.sm.fontSize}",
+        "borderRadius": "{radius.md}"
+      },
+      "md": {
+        "height": "{semantic.size.md.height}",
+        "padding": "{semantic.size.md.paddingY} {semantic.size.md.paddingX}",
+        "fontSize": "{semantic.size.md.fontSize}",
+        "borderRadius": "{radius.md}"
+      },
+      "lg": {
+        "height": "{semantic.size.lg.height}",
+        "padding": "{semantic.size.tabs.lg.padding}",
+        "fontSize": "{semantic.size.lg.fontSize}",
+        "borderRadius": "{radius.md}"
+      }
+    }
+  }
+}

package/src/tokens/components/textfield.json

@@ -0,0 +1,59 @@
+{
+  "textfield": {
+    "size": {
+      "sm": {
+        "height": "{semantic.size.sm.height}",
+        "padding": "{semantic.size.sm.paddingY} {semantic.size.sm.paddingX}",
+        "fontSize": "{semantic.size.sm.fontSize}",
+        "borderRadius": "{radius.md}"
+      },
+      "md": {
+        "height": "{semantic.size.md.height}",
+        "padding": "{semantic.size.md.paddingY} {semantic.size.md.paddingX}",
+        "fontSize": "{semantic.size.md.fontSize}",
+        "borderRadius": "{radius.md}"
+      },
+      "lg": {
+        "height": "{semantic.size.lg.height}",
+        "padding": "{semantic.size.lg.paddingY} {semantic.size.lg.paddingX}",
+        "fontSize": "{semantic.size.lg.fontSize}",
+        "borderRadius": "{radius.md}"
+      }
+    },
+    "fontFamily": "{typography.body.medium.fontFamily}",
+    "label": {
+      "fontSize": "{typography.label.medium.fontSize}",
+      "activeFontSize": "{typography.label.medium.fontSize}",
+      "fontWeight": "{typography.label.medium.fontWeight}",
+      "marginBottom": "{spacing.2}",
+      "color": "{color.text.primary}",
+      "activeColor": "{color.primary.default}"
+    },
+    "helper": {
+      "fontSize": "{typography.body.small.fontSize}"
+    },
+    "textColor": "{color.text.primary}",
+    "placeholderColor": "{color.text.placeholder}",
+    "outline": {
+      "default": "{color.border.input}",
+      "active": "{color.border.active}",
+      "error": "{color.error.default}"
+    },
+    "error": {
+      "color": "{color.error.default}"
+    },
+    "caption": {
+      "fontSize": "{typography.body.medium.fontSize}",
+      "textColor": "{color.icon.secondary}",
+      "labelCaptionColor": "{color.icon.caption}"
+    },
+    "background": "{color.background.default}",
+    "backgroundWhite": "{color.background.selectBox}",
+    "disabledOpacity": "{semantic.opacity.disabled}",
+    "iconPaddingLeft": "{spacing.9}",
+    "icon": {
+      "startLeft": "{spacing.4}",
+      "endRight": "{spacing.2}"
+    }
+  }
+}

package/src/tokens/components/togglebutton.json

@@ -0,0 +1,48 @@
+{
+  "toggleButton": {
+    "gap": "{spacing.0}",
+    "button": {
+      "fontFamily": "{semantic.typography.label.small.fontFamily}",
+      "lineHeight": "{semantic.typography.label.small.lineHeight}",
+      "fontWeight": "{semantic.typography.label.small.fontWeight}",
+      "activeFontWeight": "{semantic.typography.heading.h4.fontWeight}"
+    },
+    "size": {
+      "sm": {
+        "height": "{semantic.size.sm.height}",
+        "paddingX": "{semantic.size.sm.paddingX}",
+        "paddingY": "{semantic.size.sm.paddingY}",
+        "fontSize": "{semantic.size.sm.fontSize}",
+        "borderRadius": "{radius.lg}",
+        "borderWidth": "{semantic.size.toggleButton.borderWidth}"
+      },
+      "md": {
+        "height": "{semantic.size.md.height}",
+        "paddingX": "{semantic.size.md.paddingX}",
+        "paddingY": "{semantic.size.md.paddingY}",
+        "fontSize": "{semantic.size.md.fontSize}",
+        "borderRadius": "{radius.xl}",
+        "borderWidth": "{semantic.size.toggleButton.borderWidth}"
+      },
+      "lg": {
+        "height": "{semantic.size.lg.height}",
+        "paddingX": "{semantic.size.lg.paddingX}",
+        "paddingY": "{semantic.size.lg.paddingY}",
+        "fontSize": "{semantic.size.lg.fontSize}",
+        "borderRadius": "{radius.xl}",
+        "borderWidth": "{semantic.size.toggleButton.borderWidth}"
+      }
+    },
+    "inactive": {
+      "background": "{color.background.default}",
+      "backgroundWhite": "{colors.white}",
+      "color": "{color.text.primary}",
+      "border": "{color.border.default}"
+    },
+    "active": {
+      "background": "{color.primary.default}",
+      "color": "{color.text.inverse}",
+      "border": "{color.primary.default}"
+    }
+  }
+}

package/src/tokens/components/uploaddropzone.json

@@ -0,0 +1,61 @@
+{
+  "uploaddropzone": {
+    "title": {
+      "fontSize": "{typography.heading.h4.fontSize}",
+      "fontWeight": "{typography.fontWeight.bold}",
+      "fontFamily": "{typography.heading.h4.fontFamily}",
+      "lineHeight": "{typography.heading.h4.lineHeight}",
+      "color": "{color.text.primary}",
+      "marginBottom": "{spacing.4}"
+    },
+    "zone": {
+      "background": "{color.background.uploaddropzone}",
+      "border": "1px dashed {color.border.default}",
+      "borderRadius": "{radius.lg}",
+      "borderActive": "1px dashed {color.border.active}",
+      "backgroundActive": "{color.primary.light}",
+      "paddingY": "{spacing.6}",
+      "paddingX": "{spacing.2}",
+      "gap": "{spacing.0}"
+    },
+    "icon": {
+      "size": "{size.48}",
+      "marginBottom": "{spacing.2}",
+      "background": "{color.primary.light}",
+      "color": "{color.text.primary}",
+      "borderRadius": "{radius.lg}",
+      "border": "1px solid {color.primary.default}"
+    },
+    "instruction": {
+      "fontSize": "{typography.body.medium.fontSize}",
+      "fontWeight": "{typography.fontWeight.bold}",
+      "fontFamily": "{typography.body.medium.fontFamily}",
+      "lineHeight": "{typography.body.medium.lineHeight}",
+      "color": "{color.text.primary}",
+      "marginBottom": "{spacing.0}"
+    },
+    "hint": {
+      "fontSize": "{typography.body.small.fontSize}",
+      "fontWeight": "{typography.fontWeight.normal}",
+      "fontFamily": "{typography.body.small.fontFamily}",
+      "lineHeight": "{typography.body.small.lineHeight}",
+      "color": "{color.text.secondary}",
+      "marginBottom": "{spacing.2}"
+    },
+    "button": {
+      "fontWeight": "{typography.fontWeight.normal}",
+      "color": "{color.primary.default}",
+      "background": "{colors.white}",
+      "border": "1px solid {color.primary.default}"
+    },
+    "selectedFile": {
+      "fontSize": "{typography.body.small.fontSize}",
+      "fontFamily": "{typography.body.small.fontFamily}",
+      "color": "{color.text.secondary}",
+      "marginTop": "{spacing.4}"
+    },
+    "disabled": {
+      "opacity": "{semantic.opacity.disabled}"
+    }
+  }
+}

package/src/tokens/drawer.ts

@@ -0,0 +1,37 @@
+import type { ResolvedTokens } from './index';
+
+export interface DrawerTokens {
+  background: string;
+  backdrop: {
+    background: string;
+    opacityVisible: string;
+    opacityHidden: string;
+  };
+  radius: string;
+  transitionDuration: string;
+  size: {
+    sm: { width: string };
+    md: { width: string };
+    lg: { width: string };
+  };
+}
+
+export function getDrawerTokensFromResolved(resolved: ResolvedTokens): DrawerTokens {
+  return (
+    (resolved.components?.drawer as DrawerTokens) || {
+      background: '#fff',
+      backdrop: {
+        background: 'rgba(107, 114, 128, 0.75)',
+        opacityVisible: '1',
+        opacityHidden: '0',
+      },
+      radius: '16px',
+      transitionDuration: '300ms',
+      size: {
+        sm: { width: '550px' },
+        md: { width: '800px' },
+        lg: { width: '1200px' },
+      },
+    }
+  );
+}

package/src/tokens/foundation/breakpoints.json

@@ -0,0 +1,10 @@
+{
+  "breakpoints": {
+    "mobile": 0,
+    "tablet": 768,
+    "laptop": 1024,
+    "desktop": 1440,
+    "wide": 1920,
+    "ultra": 2560
+  }
+}

package/src/tokens/foundation/colors.json

@@ -0,0 +1,122 @@
+{
+  "colors": {
+    "white": "#FFFFFF",
+    "black": "#000000",
+    "transparent": "transparent",
+    "gray": {
+      "50": "#F9FAFB",
+      "75": "#F3F5F6",
+      "100": "#F3F4F6",
+      "150": "#F1EDE1",
+      "175": "#E5EEEF",
+      "200": "#E5E9EB",
+      "250": "#D6DCE0",
+      "300": "#D1D5DB",
+      "400": "#9CA3AF",
+      "500": "#6B7280",
+      "600": "#4B5563",
+      "650": "#5A6B77",
+      "686": "#686868",
+      "700": "#374151",
+      "750": "#353535",
+      "800": "#1F2937",
+      "850": "#1F1F1F",
+      "900": "#111827",
+      "925": "#131925",
+      "950": "#F2F2F7",
+      "1000": "#7B809A",
+      "1100": "#272727",
+      "1200": "#4C4C4C",
+      "1300": "#FFFFFF66",
+      "1400": "#FFFFFF10",
+      "1500": "#332F24"
+    },
+    "green": {
+      "25": "#F4FFDC",
+      "50": "#F0F9F4",
+      "100": "#DCF2E3",
+      "200": "#B8E5C7",
+      "300": "#94D8AB",
+      "400": "#70CB8F",
+      "500": "#52760A",
+      "600": "#384F0A",
+      "700": "#2A3D08",
+      "800": "#1C2B05",
+      "900": "#0E1A03",
+      "positive": "#1F7735",
+      "positiveLight": "#D6F4DE"
+    },
+    "red": {
+      "50": "#FFF2F4",
+      "100": "#FFD3DA",
+      "200": "#FECACA",
+      "300": "#FCA5A5",
+      "400": "#F87171",
+      "500": "#EF4444",
+      "600": "#DC2626",
+      "650": "#C72D44",
+      "700": "#BA0000",
+      "800": "#991B1B",
+      "900": "#7F1D1D"
+    },
+    "blue": {
+      "50": "#EFF6FF",
+      "100": "#DBEAFE",
+      "200": "#BFDBFE",
+      "300": "#93C5FD",
+      "400": "#60A5FA",
+      "500": "#3B82F6",
+      "600": "#00545E",
+      "650": "#5A6B77",
+      "700": "#00424A",
+      "800": "#00424A",
+      "900": "#1E3A8A",
+      "warningTertiary": "#DAF2FF"
+    },
+    "orange": {
+      "500": "#F5A623",
+      "warning": "#B16F15",
+      "warningLight": "#F9E6CC"
+    },
+    "yellow": {
+      "50": "#FEFCE8",
+      "100": "#FEF9C3",
+      "200": "#FEF08A",
+      "300": "#FDE047",
+      "400": "#FACC15",
+      "500": "#EAB308",
+      "600": "#CA8A04",
+      "700": "#A16207",
+      "800": "#854D0E",
+      "900": "#713F12",
+      "1000": "#826D3A",
+      "1100": "#826D3ACC"
+    },
+    "softRed": { "500": "#F0645A" },
+    "brand": {
+      "arabianGulf": "#00545E",
+      "gold": "#BBA367",
+      "goldDark": "#826D3A",
+      "cream": "#EAE3D1",
+      "alphaPrimary30": "#C9A6644D",
+      "alphaBlack10": "#1F1F1F1A",
+      "alphaBorderRadio": "#5A6B774D"
+    },
+    "icon": {
+      "tertiary": "#9BA7B5",
+      "light": "#CBD5E1"
+    },
+    "border": {
+      "default": "#E7EBEE",
+      "input": "#C7CED6"
+    },
+    "button": {
+      "secondaryDefault": "#F6F7F8",
+      "stroke": "#FFFFFF"
+    },
+    "background": {
+      "labelsDark": "#F3F5F6",
+      "warmLight": "#FAF8F4"
+    }
+  }
+}

package/src/tokens/foundation/opacity.json

@@ -0,0 +1,16 @@
+{
+  "opacity": {
+    "0": "0",
+    "10": "0.1",
+    "20": "0.2",
+    "30": "0.3",
+    "40": "0.4",
+    "50": "0.5",
+    "60": "0.6",
+    "70": "0.7",
+    "80": "0.8",
+    "90": "0.9",
+    "100": "1"
+  }
+}
+

package/src/tokens/foundation/radius.json

@@ -0,0 +1,14 @@
+{
+  "radius": {
+    "none": "0px",
+    "xs": "1px",
+    "sm": "2px",
+    "md": "8px",
+    "control": "6px",
+    "lg": "8px",
+    "xl": "12px",
+    "2xl": "16px",
+    "full": "9999px",
+    "pill": "50px"
+  }
+}

package/src/tokens/foundation/size.json

@@ -0,0 +1,38 @@
+{
+  "size": {
+    "0": "0px",
+    "1": "1px",
+    "2": "2px",
+    "4": "4px",
+    "8": "8px",
+    "12": "12px",
+    "15": "15px",
+    "16": "16px",
+    "20": "20px",
+    "24": "24px",
+    "28": "28px",
+    "30": "30px",
+    "32": "32px",
+    "34": "34px",
+    "36": "36px",
+    "38": "38px",
+    "40": "40px",
+    "44": "44px",
+    "48": "48px",
+    "52": "52px",
+    "56": "56px",
+    "60": "60px",
+    "64": "64px",
+    "76": "76px",
+    "116": "116px",
+    "180": "180px",
+    "320": "320px",
+    "380": "380px",
+    "420": "420px",
+    "480": "480px",
+    "520": "520px",
+    "550": "550px",
+    "1200": "1200px",
+    "60vh": "60vh"
+  }
+}

package/src/tokens/foundation/spacing.json

@@ -0,0 +1,19 @@
+{
+  "spacing": {
+    "0": "0px",
+    "xxs": "2px",
+    "1": "4px",
+    "1_25": "5px",
+    "1_5": "6px",
+    "1_75": "7px",
+    "2": "8px",
+    "3": "12px",
+    "4": "16px",
+    "5": "20px",
+    "6": "24px",
+    "7": "32px",
+    "8": "40px",
+    "9": "48px",
+    "10": "64px"
+  }
+}

package/src/tokens/foundation/typography.json

@@ -0,0 +1,43 @@
+{
+  "typography": {
+    "fontFamily": {
+      "sans": "\"Inter\", sans-serif",
+      "mono": "monospace"
+    },
+    "fontSize": {
+      "xs": "10px",
+      "sm": "12px",
+      "base": "14px",
+      "md": "16px",
+      "lg": "18px",
+      "xl": "20px",
+      "2xl": "24px",
+      "3xl": "30px"
+    },
+    "fontWeight": {
+      "light": 300,
+      "normal": 400,
+      "medium": 500,
+      "semibold": 600,
+      "bold": 700
+    },
+    "lineHeight": {
+      "xs": "18px",
+      "sm": "20px",
+      "md": "24px",
+      "lg": "28px",
+      "none": 1,
+      "tight": 1.25,
+      "snug": 1.375,
+      "normal": 1.5,
+      "relaxed": 1.625,
+      "loose": 2
+    },
+    "paragraphSpacing": {
+      "xs": "12px",
+      "sm": "14px",
+      "md": "16px",
+      "lg": "18px"
+    }
+  }
+}