npm - @7onic-ui/tokens - Versions diffs - 0.1.0 - Mend

@7onic-ui/tokens 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/js/index.js ADDED Viewed

@@ -0,0 +1,763 @@
+/**
+ * 7onic Design Tokens — JavaScript export
+ * ⚠️ Auto-generated — DO NOT EDIT
+ */
+'use strict';
+const tokens = {
+  "colors": {
+    "white": "#FFFFFF",
+    "black": "#000000",
+    "gray": {
+      "50": "#F9F9FA",
+      "100": "#F4F4F5",
+      "200": "#E4E4E6",
+      "300": "#D4D4D5",
+      "400": "#9A9A9B",
+      "500": "#6B6B6C",
+      "600": "#4A4A4B",
+      "700": "#3A3A3E",
+      "800": "#2D2D31",
+      "900": "#222225"
+    },
+    "primary": {
+      "50": "#DBF8FB",
+      "100": "#B2F0F5",
+      "200": "#89E8F0",
+      "300": "#60E0EB",
+      "400": "#37D8E6",
+      "500": "#1AC6D5",
+      "600": "#15A0AC",
+      "700": "#107A84",
+      "800": "#0B545B",
+      "900": "#062E32"
+    },
+    "secondary": {
+      "50": "#F5F5FB",
+      "100": "#EBEBF5",
+      "200": "#D9D9E9",
+      "300": "#BCBCD2",
+      "400": "#8F8FA9",
+      "500": "#69697F",
+      "600": "#4E4E60",
+      "700": "#3B3B4A",
+      "800": "#2F2F3B",
+      "900": "#23232D"
+    },
+    "blue": {
+      "50": "#EFF6FF",
+      "100": "#DBEAFE",
+      "200": "#BFDBFE",
+      "300": "#93C5FD",
+      "400": "#60A5FA",
+      "500": "#3B82F6",
+      "600": "#2563EB",
+      "700": "#1D4ED8",
+      "800": "#1E40AF",
+      "900": "#1E3A8A"
+    },
+    "green": {
+      "50": "#ECFDF5",
+      "100": "#D1FAE5",
+      "200": "#A7F3D0",
+      "300": "#6EE7B7",
+      "400": "#34D399",
+      "500": "#10B981",
+      "600": "#059669",
+      "700": "#047857",
+      "800": "#065F46",
+      "900": "#064E3B"
+    },
+    "yellow": {
+      "50": "#FFFBEB",
+      "100": "#FEF3C7",
+      "200": "#FDE68A",
+      "300": "#FCD34D",
+      "400": "#FBBF24",
+      "500": "#F59E0B",
+      "600": "#D97706",
+      "700": "#B45309",
+      "800": "#92400E",
+      "900": "#78350F"
+    },
+    "red": {
+      "50": "#FEF2F2",
+      "100": "#FEE2E2",
+      "200": "#FECACA",
+      "300": "#FCA5A5",
+      "400": "#F87171",
+      "500": "#EF4444",
+      "600": "#DC2626",
+      "700": "#B91C1C",
+      "800": "#991B1B",
+      "900": "#7F1D1D"
+    },
+    "chart": {
+      "blue-light": "#4570E8",
+      "blue-dark": "#6B8FF5",
+      "pink-light": "#D94F9A",
+      "pink-dark": "#E870B8",
+      "lavender-light": "#A888F0",
+      "lavender-dark": "#C4A8F8",
+      "sky-light": "#68C8F5",
+      "sky-dark": "#8DD8F8",
+      "rose-light": "#F0A0CC",
+      "rose-dark": "#F8C0DE"
+    }
+  },
+  "spacing": {
+    "0": "0",
+    "1": "0.25rem",
+    "2": "0.5rem",
+    "3": "0.75rem",
+    "4": "1rem",
+    "5": "1.25rem",
+    "6": "1.5rem",
+    "7": "1.75rem",
+    "8": "2rem",
+    "10": "2.5rem",
+    "12": "3rem",
+    "14": "3.5rem",
+    "16": "4rem",
+    "20": "5rem",
+    "24": "6rem",
+    "0.5": "0.125rem",
+    "1.5": "0.375rem",
+    "2.5": "0.625rem"
+  },
+  "fontSize": {
+    "2xs": {
+      "size": "0.6875rem",
+      "lineHeight": "1rem"
+    },
+    "xs": {
+      "size": "0.75rem",
+      "lineHeight": "1.125rem"
+    },
+    "sm": {
+      "size": "0.8125rem",
+      "lineHeight": "1.25rem"
+    },
+    "md": {
+      "size": "0.875rem",
+      "lineHeight": "1.375rem"
+    },
+    "base": {
+      "size": "1rem",
+      "lineHeight": "1.625rem"
+    },
+    "lg": {
+      "size": "1.125rem",
+      "lineHeight": "1.75rem"
+    },
+    "xl": {
+      "size": "1.25rem",
+      "lineHeight": "1.875rem"
+    },
+    "2xl": {
+      "size": "1.5rem",
+      "lineHeight": "2.125rem"
+    },
+    "3xl": {
+      "size": "1.875rem",
+      "lineHeight": "2.5rem"
+    },
+    "4xl": {
+      "size": "2.25rem",
+      "lineHeight": "2.875rem"
+    },
+    "5xl": {
+      "size": "3rem",
+      "lineHeight": "3.625rem"
+    }
+  },
+  "borderRadius": {
+    "none": "0px",
+    "sm": "2px",
+    "base": "4px",
+    "md": "6px",
+    "lg": "8px",
+    "xl": "12px",
+    "2xl": "16px",
+    "3xl": "24px",
+    "full": "9999px"
+  },
+  "shadow": {
+    "xs": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+    "sm": "0 1px 3px 0 rgba(0, 0, 0, 0.1)",
+    "md": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+    "lg": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+    "xl": "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)",
+    "primary-glow": "0 0 0 4px color-mix(in srgb, var(--color-primary) 15%, transparent)"
+  },
+  "zIndex": {
+    "0": "0",
+    "10": "10",
+    "20": "20",
+    "30": "30",
+    "40": "40",
+    "50": "50",
+    "sticky": "100",
+    "dropdown": "1000",
+    "overlay": "1100",
+    "modal": "2000",
+    "popover": "2100",
+    "tooltip": "2200",
+    "toast": "3000"
+  },
+  "duration": {
+    "instant": "0ms",
+    "fast": "100ms",
+    "micro": "150ms",
+    "normal": "200ms",
+    "slow": "300ms",
+    "slower": "400ms",
+    "slowest": "500ms",
+    "spin": "1000ms"
+  },
+  "iconSize": {
+    "2xs": "0.75rem",
+    "xs": "0.875rem",
+    "sm": "1rem",
+    "md": "1.25rem",
+    "lg": "1.5rem",
+    "xl": "2rem"
+  },
+  "opacity": {
+    "0": "0",
+    "5": "0.05",
+    "10": "0.1",
+    "15": "0.15",
+    "20": "0.2",
+    "25": "0.25",
+    "30": "0.3",
+    "35": "0.35",
+    "40": "0.4",
+    "45": "0.45",
+    "50": "0.5",
+    "55": "0.55",
+    "60": "0.6",
+    "65": "0.65",
+    "70": "0.7",
+    "75": "0.75",
+    "80": "0.8",
+    "85": "0.85",
+    "90": "0.9",
+    "95": "0.95",
+    "100": "1"
+  },
+  "fontWeight": {
+    "normal": "400",
+    "semibold": "600",
+    "bold": "700"
+  },
+  "borderWidth": {
+    "0": "0px",
+    "1": "1px",
+    "2": "2px",
+    "4": "4px",
+    "8": "8px"
+  },
+  "scale": {
+    "50": "0.5",
+    "75": "0.75",
+    "95": "0.95",
+    "pressed": "0.98"
+  },
+  "easing": {
+    "linear": "linear",
+    "ease": "ease",
+    "easeIn": "ease-in",
+    "easeOut": "ease-out",
+    "easeInOut": "ease-in-out"
+  },
+  "breakpoint": {
+    "sm": "640px",
+    "md": "768px",
+    "lg": "1024px",
+    "xl": "1280px",
+    "2xl": "1536px"
+  },
+  "fontFamily": {
+    "sans": "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
+    "mono": "'Fira Code', 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace"
+  },
+  "componentSize": {
+    "switch": {
+      "track": {
+        "sm": {
+          "width": "24px",
+          "height": "14px"
+        },
+        "default": {
+          "width": "32px",
+          "height": "18px"
+        },
+        "lg": {
+          "width": "40px",
+          "height": "22px"
+        }
+      },
+      "thumb": {
+        "sm": "12px",
+        "default": "16px",
+        "lg": "20px"
+      }
+    },
+    "slider": {
+      "thumb": {
+        "sm": "14px",
+        "default": "18px",
+        "lg": "22px"
+      }
+    }
+  },
+  "animation": {
+    "checkbox-enter": {
+      "duration": "150ms",
+      "easing": "ease-out",
+      "opacity": "0",
+      "scale": "0.75"
+    },
+    "radio-enter": {
+      "duration": "150ms",
+      "easing": "ease-out",
+      "opacity": "0",
+      "scale": "0.5"
+    },
+    "fade-in": {
+      "duration": "200ms",
+      "easing": "ease-out",
+      "opacity": "0"
+    },
+    "fade-out": {
+      "duration": "200ms",
+      "easing": "ease-out",
+      "opacity": "0"
+    },
+    "modal-overlay-enter": {
+      "duration": "200ms",
+      "easing": "ease-out",
+      "opacity": "0"
+    },
+    "modal-overlay-exit": {
+      "duration": "100ms",
+      "easing": "ease-out",
+      "opacity": "0"
+    },
+    "modal-content-enter": {
+      "duration": "200ms",
+      "easing": "ease-out",
+      "opacity": "0",
+      "scale": "0.95",
+      "translateY": "8"
+    },
+    "modal-content-exit": {
+      "duration": "100ms",
+      "easing": "ease-out",
+      "opacity": "0",
+      "scale": "0.95",
+      "translateY": "8"
+    },
+    "nav-viewport-enter": {
+      "duration": "150ms",
+      "easing": "ease-out",
+      "opacity": "0",
+      "scale": "0.98",
+      "translateY": "2"
+    },
+    "nav-viewport-exit": {
+      "duration": "100ms",
+      "easing": "ease-out",
+      "opacity": "0",
+      "scale": "0.98",
+      "translateY": "2"
+    },
+    "accordion-down": {
+      "duration": "200ms",
+      "easing": "ease-out",
+      "heightVar": "--radix-accordion-content-height"
+    },
+    "accordion-up": {
+      "duration": "200ms",
+      "easing": "ease-out",
+      "heightVar": "--radix-accordion-content-height"
+    },
+    "collapsible-down": {
+      "duration": "200ms",
+      "easing": "ease-out",
+      "heightVar": "--radix-collapsible-content-height"
+    },
+    "collapsible-up": {
+      "duration": "200ms",
+      "easing": "ease-out",
+      "heightVar": "--radix-collapsible-content-height"
+    },
+    "drawer-right-enter": {
+      "duration": "300ms",
+      "easing": "ease-out",
+      "translateX": "100%"
+    },
+    "drawer-right-exit": {
+      "duration": "200ms",
+      "easing": "ease-out",
+      "translateX": "100%"
+    },
+    "drawer-left-enter": {
+      "duration": "300ms",
+      "easing": "ease-out",
+      "translateX": "100%"
+    },
+    "drawer-left-exit": {
+      "duration": "200ms",
+      "easing": "ease-out",
+      "translateX": "100%"
+    },
+    "drawer-top-enter": {
+      "duration": "300ms",
+      "easing": "ease-out",
+      "translateY": "100%"
+    },
+    "drawer-top-exit": {
+      "duration": "200ms",
+      "easing": "ease-out",
+      "translateY": "100%"
+    },
+    "drawer-bottom-enter": {
+      "duration": "300ms",
+      "easing": "ease-out",
+      "translateY": "100%"
+    },
+    "drawer-bottom-exit": {
+      "duration": "200ms",
+      "easing": "ease-out",
+      "translateY": "100%"
+    },
+    "tooltip-top-enter": {
+      "duration": "150ms",
+      "easing": "ease-out",
+      "opacity": "0",
+      "translateY": "4"
+    },
+    "tooltip-top-exit": {
+      "duration": "100ms",
+      "easing": "ease-out",
+      "opacity": "0",
+      "translateY": "4"
+    },
+    "tooltip-bottom-enter": {
+      "duration": "150ms",
+      "easing": "ease-out",
+      "opacity": "0",
+      "translateY": "4"
+    },
+    "tooltip-bottom-exit": {
+      "duration": "100ms",
+      "easing": "ease-out",
+      "opacity": "0",
+      "translateY": "4"
+    },
+    "tooltip-right-enter": {
+      "duration": "150ms",
+      "easing": "ease-out",
+      "opacity": "0",
+      "translateX": "4"
+    },
+    "tooltip-right-exit": {
+      "duration": "100ms",
+      "easing": "ease-out",
+      "opacity": "0",
+      "translateX": "4"
+    },
+    "tooltip-left-enter": {
+      "duration": "150ms",
+      "easing": "ease-out",
+      "opacity": "0",
+      "translateX": "4"
+    },
+    "tooltip-left-exit": {
+      "duration": "100ms",
+      "easing": "ease-out",
+      "opacity": "0",
+      "translateX": "4"
+    },
+    "popover-top-enter": {
+      "duration": "200ms",
+      "easing": "ease-out",
+      "opacity": "0",
+      "translateY": "4"
+    },
+    "popover-top-exit": {
+      "duration": "100ms",
+      "easing": "ease-out",
+      "opacity": "0",
+      "translateY": "4"
+    },
+    "popover-bottom-enter": {
+      "duration": "200ms",
+      "easing": "ease-out",
+      "opacity": "0",
+      "translateY": "4"
+    },
+    "popover-bottom-exit": {
+      "duration": "100ms",
+      "easing": "ease-out",
+      "opacity": "0",
+      "translateY": "4"
+    },
+    "popover-right-enter": {
+      "duration": "200ms",
+      "easing": "ease-out",
+      "opacity": "0",
+      "translateX": "4"
+    },
+    "popover-right-exit": {
+      "duration": "100ms",
+      "easing": "ease-out",
+      "opacity": "0",
+      "translateX": "4"
+    },
+    "popover-left-enter": {
+      "duration": "200ms",
+      "easing": "ease-out",
+      "opacity": "0",
+      "translateX": "4"
+    },
+    "popover-left-exit": {
+      "duration": "100ms",
+      "easing": "ease-out",
+      "opacity": "0",
+      "translateX": "4"
+    },
+    "toast-slide-in-right": {
+      "duration": "300ms",
+      "easing": "ease-out",
+      "opacity": "0",
+      "translateX": "100%"
+    },
+    "toast-slide-out-right": {
+      "duration": "200ms",
+      "easing": "ease-out",
+      "opacity": "0",
+      "translateX": "100%"
+    },
+    "toast-slide-in-left": {
+      "duration": "300ms",
+      "easing": "ease-out",
+      "opacity": "0",
+      "translateX": "100%"
+    },
+    "toast-slide-out-left": {
+      "duration": "200ms",
+      "easing": "ease-out",
+      "opacity": "0",
+      "translateX": "100%"
+    },
+    "toast-slide-in-top": {
+      "duration": "300ms",
+      "easing": "ease-out",
+      "opacity": "0",
+      "translateY": "100%"
+    },
+    "toast-slide-out-top": {
+      "duration": "200ms",
+      "easing": "ease-out",
+      "opacity": "0",
+      "translateY": "100%"
+    },
+    "toast-slide-in-bottom": {
+      "duration": "300ms",
+      "easing": "ease-out",
+      "opacity": "0",
+      "translateY": "100%"
+    },
+    "toast-slide-out-bottom": {
+      "duration": "200ms",
+      "easing": "ease-out",
+      "opacity": "0",
+      "translateY": "100%"
+    },
+    "spin": {
+      "duration": "1000ms",
+      "easing": "linear"
+    },
+    "progress-stripe": {
+      "duration": "1000ms",
+      "easing": "linear"
+    },
+    "spinner-orbit": {
+      "duration": "1000ms",
+      "easing": "linear"
+    },
+    "spinner-dot": {
+      "duration": "1000ms",
+      "easing": "ease-in-out"
+    },
+    "spinner-bar": {
+      "duration": "1000ms",
+      "easing": "ease-in-out"
+    },
+    "spinner-morph": {
+      "duration": "1000ms",
+      "easing": "ease-in-out"
+    },
+    "skeleton-pulse": {
+      "duration": "1000ms",
+      "easing": "ease-in-out"
+    },
+    "skeleton-wave": {
+      "duration": "1000ms",
+      "easing": "linear"
+    }
+  },
+  "typography": {
+    "heading": {
+      "1": {
+        "fontFamily": "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
+        "fontSize": "1.875rem",
+        "fontWeight": "700",
+        "lineHeight": "2.5rem"
+      },
+      "2": {
+        "fontFamily": "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
+        "fontSize": "1.5rem",
+        "fontWeight": "700",
+        "lineHeight": "2.125rem"
+      },
+      "3": {
+        "fontFamily": "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
+        "fontSize": "1.25rem",
+        "fontWeight": "600",
+        "lineHeight": "1.875rem"
+      },
+      "4": {
+        "fontFamily": "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
+        "fontSize": "1.125rem",
+        "fontWeight": "600",
+        "lineHeight": "1.75rem"
+      },
+      "5": {
+        "fontFamily": "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
+        "fontSize": "1rem",
+        "fontWeight": "600",
+        "lineHeight": "1.625rem"
+      },
+      "6": {
+        "fontFamily": "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
+        "fontSize": "0.875rem",
+        "fontWeight": "600",
+        "lineHeight": "1.375rem"
+      }
+    },
+    "body": {
+      "lg": {
+        "fontFamily": "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
+        "fontSize": "1.125rem",
+        "fontWeight": "400",
+        "lineHeight": "1.75rem"
+      },
+      "default": {
+        "fontFamily": "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
+        "fontSize": "1rem",
+        "fontWeight": "400",
+        "lineHeight": "1.625rem"
+      },
+      "md": {
+        "fontFamily": "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
+        "fontSize": "0.875rem",
+        "fontWeight": "400",
+        "lineHeight": "1.375rem"
+      },
+      "sm": {
+        "fontFamily": "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
+        "fontSize": "0.8125rem",
+        "fontWeight": "400",
+        "lineHeight": "1.25rem"
+      },
+      "xs": {
+        "fontFamily": "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
+        "fontSize": "0.75rem",
+        "fontWeight": "400",
+        "lineHeight": "1.125rem"
+      },
+      "2xs": {
+        "fontFamily": "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
+        "fontSize": "0.6875rem",
+        "fontWeight": "400",
+        "lineHeight": "1rem"
+      }
+    },
+    "label": {
+      "lg": {
+        "fontFamily": "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
+        "fontSize": "1rem",
+        "fontWeight": "600",
+        "lineHeight": "1.625rem"
+      },
+      "md": {
+        "fontFamily": "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
+        "fontSize": "0.875rem",
+        "fontWeight": "600",
+        "lineHeight": "1.375rem"
+      },
+      "default": {
+        "fontFamily": "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
+        "fontSize": "0.8125rem",
+        "fontWeight": "600",
+        "lineHeight": "1.25rem"
+      },
+      "sm": {
+        "fontFamily": "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
+        "fontSize": "0.75rem",
+        "fontWeight": "600",
+        "lineHeight": "1.125rem"
+      },
+      "xs": {
+        "fontFamily": "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
+        "fontSize": "0.6875rem",
+        "fontWeight": "600",
+        "lineHeight": "1rem"
+      }
+    },
+    "caption": {
+      "fontFamily": "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
+      "fontSize": "0.75rem",
+      "fontWeight": "400",
+      "lineHeight": "1.125rem"
+    },
+    "code": {
+      "block": {
+        "fontFamily": "'Fira Code', 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace",
+        "fontSize": "0.8125rem",
+        "fontWeight": "400",
+        "lineHeight": "1.375rem"
+      },
+      "inline": {
+        "fontFamily": "'Fira Code', 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace",
+        "fontSize": "0.8125rem",
+        "fontWeight": "400",
+        "lineHeight": "1.25rem"
+      }
+    }
+  }
+};
+module.exports.colors = tokens.colors;
+module.exports.spacing = tokens.spacing;
+module.exports.fontSize = tokens.fontSize;
+module.exports.borderRadius = tokens.borderRadius;
+module.exports.shadow = tokens.shadow;
+module.exports.zIndex = tokens.zIndex;
+module.exports.duration = tokens.duration;
+module.exports.iconSize = tokens.iconSize;
+module.exports.opacity = tokens.opacity;
+module.exports.fontWeight = tokens.fontWeight;
+module.exports.borderWidth = tokens.borderWidth;
+module.exports.scale = tokens.scale;
+module.exports.easing = tokens.easing;
+module.exports.breakpoint = tokens.breakpoint;
+module.exports.fontFamily = tokens.fontFamily;
+module.exports.componentSize = tokens.componentSize;
+module.exports.animation = tokens.animation;
+module.exports.typography = tokens.typography;
+module.exports.default = tokens;