@altruist03/ui 0.1.0 → 0.2.0

package/src/tokens/modal.ts

@@ -0,0 +1,42 @@
+import { ResolvedTokens } from './index';
+
+export interface ModalTokens {
+  background: string;
+  backdrop: {
+    background: string;
+    opacityVisible: string;
+    opacityHidden: string;
+  };
+  radius: string;
+  padding: string;
+  title: {
+    color: string;
+    background?: string;
+    typography: any;
+  };
+  size: {
+    sm: { width: string };
+    lg: { width: string };
+  };
+}
+
+export function getModalTokensFromResolved(resolved: ResolvedTokens): ModalTokens {
+  return (
+    (resolved.components?.modal as ModalTokens) || {
+      background: '#fff',
+      backdrop: {
+        background: 'rgba(107, 114, 128, 0.75)',
+        opacityVisible: '1',
+        opacityHidden: '0',
+      },
+      radius: '16px',
+      padding: '24px',
+      title: {
+        background: '#52760A',
+        color: '#FFFFFF',
+        typography: { fontSize: '16px', fontWeight: 600 },
+      },
+      size: { sm: { width: '550px' }, lg: { width: '1200px' } },
+    }
+  );
+}

package/src/tokens/semantic/color.json

@@ -0,0 +1,148 @@
+{
+  "color": {
+    "primary": {
+      "default": "{colors.green.500}",
+      "hover": "{colors.green.600}",
+      "active": "{colors.green.700}",
+      "light": "{colors.green.100}",
+      "dark": "{colors.green.800}"
+    },
+    "secondary": {
+      "default": "{colors.gray.200}",
+      "hover": "{colors.gray.300}",
+      "active": "{colors.gray.400}"
+    },
+    "destructive": {
+      "default": "{colors.red.50}",
+      "hover": "{colors.red.100}",
+      "active": "{colors.red.800}",
+      "text": "{colors.red.650}"
+    },
+    "neutral": {
+      "default": "{colors.gray.200}",
+      "hover": "{colors.gray.250}",
+      "active": "{colors.gray.800}"
+    },
+    "text": {
+      "primary": "{colors.gray.686}",
+      "secondary": "{colors.gray.700}",
+      "tertiary": "{colors.gray.850}",
+      "placeholder": "{colors.blue.650}",
+      "disabled": "{colors.gray.400}",
+      "inverse": "{colors.white}",
+      "fileupload": "{colors.blue.600}",
+      "badge": "{colors.gray.850}",
+      "description": "{colors.gray.1000}",
+      "cross": "{colors.white}",
+      "tableHeader": "{colors.white}"
+    },
+    "background": {
+      "default": "{colors.gray.75}",
+      "secondary": "{colors.gray.50}",
+      "tertiary": "{colors.gray.100}",
+      "disabled": "{colors.gray.200}",
+      "labelsDark": "{colors.background.labelsDark}",
+      "closeButton": "{colors.gray.200}",
+      "warm": "{colors.background.warmLight}",
+      "badge": "{colors.white}",
+      "chip": "{colors.white}",
+      "dropdown": "{colors.white}",
+      "groupHeading": "{colors.gray.1500}",
+      "filterpopover": "{colors.white}",
+      "tabsBackground": "{colors.white}",
+      "tableHeader": "{colors.green.500}",
+      "tableRow": "{colors.white}",
+      "tableRowStripe": "{colors.gray.75}",
+      "tableRowHover": "{colors.gray.150}",
+      "modalHeader": "{colors.green.500}",
+      "overlay": "rgba(107, 114, 128, 0.75)",
+      "selectBox": "{colors.white}",
+      "uploaddropzone": "{colors.white}"
+    },
+    "border": {
+      "default": "{colors.gray.400}",
+      "secondary": "{colors.gray.650}",
+      "transparent": "{colors.transparent}",
+      "active": "{colors.green.500}",
+      "error": "{colors.red.500}",
+      "disabled": "{colors.gray.200}",
+      "radio": "{colors.brand.alphaBorderRadio}",
+      "input": "{colors.border.input}",
+      "radioActive": "{colors.gray.850}",
+      "tableHeaderPartition": "{colors.white}",
+      "tableBorder": "{colors.gray.200}"
+    },
+    "error": {
+      "default": "{colors.red.650}",
+      "light": "{colors.red.100}",
+      "dark": "{colors.red.900}"
+    },
+    "success": {
+      "default": "{colors.green.500}",
+      "light": "{colors.green.100}",
+      "dark": "{colors.green.600}"
+    },
+    "warning": {
+      "default": "{colors.orange.warning}",
+      "light": "{colors.orange.warningLight}",
+      "tertiary": "{colors.blue.warningTertiary}",
+      "dark": "{colors.yellow.700}"
+    },
+    "info": {
+      "default": "{colors.blue.500}",
+      "light": "{colors.blue.100}",
+      "dark": "{colors.blue.600}"
+    },
+    "brand": {
+      "default": "{colors.brand.gold}",
+      "secondary": "{colors.brand.cream}",
+      "textDefault": "{colors.brand.goldDark}",
+      "textSecondary": "{colors.brand.arabianGulf}"
+    },
+    "icon": {
+      "default": "{colors.gray.850}",
+      "secondary": "{colors.gray.650}",
+      "tertiary": "{colors.icon.tertiary}",
+      "light": "{colors.icon.light}",
+      "caption": "{colors.gray.650}"
+    },
+    "radio": {
+      "color": {
+        "inactive": "{colors.gray.850}",
+        "active": "{colors.green.500}",
+        "dot": "{colors.green.500}"
+      },
+      "option": {
+        "border": {
+          "active": "{colors.green.500}",
+          "inactive": "{colors.border.input}"
+        },
+        "background": {
+          "active": "{colors.green.25}",
+          "inactive": "{colors.button.secondaryDefault}"
+        },
+        "text": {
+          "active": "{colors.green.500}",
+          "inactive": "{colors.gray.850}"
+        }
+      },
+      "label": {
+        "color": {
+          "active": "{colors.gray.850}",
+          "inactive": "{colors.blue.850}"
+        },
+        "background": "{colors.white}"
+      }
+    },
+    "button": {
+      "secondaryDefault": "{colors.button.secondaryDefault}",
+      "stroke": "{colors.button.stroke}"
+    },
+    "checkbox": {
+      "color": {
+        "active": "{colors.green.500}",
+        "inactive": "{colors.transparent}"
+      }
+    }
+  }
+}

package/src/tokens/semantic/field.json

@@ -0,0 +1,28 @@
+{
+  "field": {
+    "height": "{semantic.size.md.height}",
+    "otpWidth": "{semantic.size.md.otpWidth}",
+    "borderRadius": "{semantic.size.md.radius}",
+
+    "fontSize": "{semantic.size.md.fontSize}",
+
+    "color": "{color.text.primary}",
+    "background": "{color.background.default}",
+    "backgroundDisabled": "{color.background.disabled}",
+
+    "border": {
+      "default": "1px solid {color.border.default}",
+      "focus": "2px solid {color.primary.default}",
+      "error": "2px solid {color.error.default}"
+    },
+
+    "labelColor": "{color.text.primary}",
+    "labelRequiredColor": "{color.error.default}",
+
+    "helperColor": "{color.text.secondary}",
+    "helperErrorColor": "{color.error.default}",
+
+    "paddingY": "{semantic.size.md.paddingY}",
+    "paddingX": "{semantic.size.md.paddingX}"
+  }
+}

package/src/tokens/semantic/opacity.json

@@ -0,0 +1,5 @@
+{
+  "opacity": {
+    "disabled": "{opacity.50}"
+  }
+}