@orca-so/design-system - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

dist/index.d.ts

 export * from "./stories/Button";
 export * from "./stories/Colors";
-export * from "./stories/Icons";

dist/index.js

@@ -19,3 +19,2 @@ "use strict";
 __exportStar(require("./stories/Colors"), exports);
-__exportStar(require("./stories/Icons"), exports);
 //# sourceMappingURL=index.js.map

dist/stories/Button/index.d.ts

@@ -1,5 +0,11 @@
-import React from "react";
-export declare function Button({ primary, size, ...props }: {
-    primary?: boolean;
-    size?: "small" | "medium" | "large";
-} & React.ButtonHTMLAttributes<HTMLButtonElement>): React.JSX.Element;
+import * as React from "react";
+import type { VariantProps } from "class-variance-authority";
+declare const buttonVariants: (props?: {
+    variant?: "link" | "primary" | "destructive" | "secondary" | "ghost";
+    size?: "full" | "intrinsic" | "icon";
+} & import("class-variance-authority/dist/types").ClassProp) => string;
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { Button, buttonVariants };

dist/stories/Button/index.js

 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -6,15 +29,34 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Button = void 0;
-const react_1 = __importDefault(require("react"));
+exports.buttonVariants = exports.Button = void 0;
+const React = __importStar(require("react"));
+const react_slot_1 = require("@radix-ui/react-slot");
+const class_variance_authority_1 = require("class-variance-authority");
 const clsx_1 = __importDefault(require("clsx"));
-function Button({ primary = false, size = "medium", ...props }) {
-    return (react_1.default.createElement("button", { type: "button", className: (0, clsx_1.default)("font-bold rounded py-2 px-4 border", primary
-            ? "bg-cobalt hover:bg-sapphire text-white"
-            : "text-cobalt border-sapphire hover:bg-arctic", {
-            "text-sm": size === "small",
-            "text-md": size === "medium",
-            "text-lg": size === "large",
-        }), ...props }, props.children));
-}
+const buttonVariants = (0, class_variance_authority_1.cva)((0, clsx_1.default)("inline-flex items-center justify-center", "whitespace-nowrap rounded-md text-sm font-medium", "disabled:cursor-not-allowed", "outline-offset-2 outline-focus focus-visible:outline-1"), {
+    variants: {
+        variant: {
+            primary: (0, clsx_1.default)("enabled:bg-primary enabled:hover:bg-primary-hover", "disabled:bg-disabled"),
+            destructive: (0, clsx_1.default)("enabled:bg-destructive enabled:hover:bg-destructive-hover", "disabled:bg-disabled"),
+            secondary: (0, clsx_1.default)("text-primary enabled:bg-secondary enabled:hover:bg-secondary-hover", "disabled:bg-disabled"),
+            ghost: (0, clsx_1.default)("text-link enabled:bg-transparent enabled:hover:bg-surface", "disabled:text-tertiary"),
+            link: (0, clsx_1.default)("enabled:text-link enabled:bg-transparent enabled:hover:underline"),
+        },
+        size: {
+            full: "w-full py-2",
+            intrinsic: "px-3 py-2",
+            icon: "p-2",
+        },
+    },
+    defaultVariants: {
+        variant: "primary",
+        size: "intrinsic",
+    },
+});
+exports.buttonVariants = buttonVariants;
+const Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? react_slot_1.Slot : "button";
+    return React.createElement(Comp, { className: buttonVariants({ variant, size, className }), ref: ref, ...props });
+});
 exports.Button = Button;
+Button.displayName = "Button";
 //# sourceMappingURL=index.js.map

dist/stories/Colors/index.d.ts

 export declare const Colors: Record<string, string>;
+export declare const ColorsWithAlpha: (alpha: number) => Record<string, string>;

dist/stories/Colors/index.js

@@ -6,15 +6,33 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Colors = void 0;
+exports.ColorsWithAlpha = exports.Colors = void 0;
 const tailwind_config_1 = __importDefault(require("../../tailwind.config"));
-const handler = {
-    get(_target, prop) {
-        const colors = tailwind_config_1.default.theme?.colors;
-        const key = prop.toString().toLowerCase();
-        if (colors && Object.hasOwn(colors, key)) {
-            return colors[key];
-        }
-        return "#ffffff";
-    },
+const tiny_invariant_1 = __importDefault(require("tiny-invariant"));
+const handler = (alpha) => {
+    let alphaHex = "";
+    if (alpha) {
+        (0, tiny_invariant_1.default)(alpha > 0 && alpha <= 1, "Alpha channel must be between 0 and 1");
+        alphaHex = Math.round(alpha * 255).toString(16);
+    }
+    return {
+        get(_target, prop) {
+            const colors = tailwind_config_1.default.theme.colors;
+            const [name, weight] = prop.toString().toLowerCase().split("-");
+            if (colors && Object.hasOwn(colors, name)) {
+                if (typeof colors[name] === "string") {
+                    return `${colors[name]}${alphaHex}`;
+                }
+                if (!weight) {
+                    return `${colors[name][500]}${alphaHex}`;
+                }
+                if (Object.hasOwn(colors[name], weight)) {
+                    return `${colors[name][weight]}${alphaHex}`;
+                }
+            }
+            return `#ffffff${alphaHex}`;
+        },
+    };
 };
-exports.Colors = new Proxy({}, handler);
+exports.Colors = new Proxy({}, handler());
+const ColorsWithAlpha = (alpha) => new Proxy({}, handler(alpha));
+exports.ColorsWithAlpha = ColorsWithAlpha;
 //# sourceMappingURL=index.js.map

dist/tailwind.config.d.ts

@@ -1,2 +0,155 @@
-declare const _exports: import('tailwindcss').Config;
-export = _exports;
+declare const _default: {
+    content: string[];
+    theme: {
+        colors: {
+            gold: {
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            blue: {
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            green: {
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            red: {
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            slate: {
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            dark: {
+                800: string;
+                900: string;
+            };
+            white: string;
+            black: string;
+            transparent: string;
+        };
+        fontSize: {
+            xxs: [string, string];
+            xs: [string, string];
+            sm: [string, string];
+            base: [string, string];
+            xl: [string, string];
+            "2xl": [string, string];
+            "3xl": [string, string];
+        };
+        fontWeight: {
+            regular: string;
+            medium: string;
+            semibold: string;
+        };
+        fontFamily: {
+            sans: [string, ...string[]];
+            mono: [string, ...string[]];
+        };
+        extend: {
+            textColor: {
+                primary: string;
+                secondary: string;
+                tertiary: string;
+                quarternary: string;
+                inverse: string;
+                link: string;
+                "link-hover": string;
+                error: string;
+                success: string;
+                warning: string;
+            };
+            fill: {
+                primary: string;
+                secondary: string;
+                tertiary: string;
+                quarternary: string;
+                inverse: string;
+                link: string;
+                "link-hover": string;
+                error: string;
+                success: string;
+                warning: string;
+            };
+            borderColor: {
+                primary: string;
+                focus: string;
+                "secondary-active": string;
+                error: string;
+            };
+            ringColor: {
+                primary: string;
+                focus: string;
+                "secondary-active": string;
+                error: string;
+            };
+            outlineColor: {
+                primary: string;
+                focus: string;
+                "secondary-active": string;
+                error: string;
+            };
+            backgroundColor: {
+                default: string;
+                surface: string;
+                "surface-hover": string;
+                disabled: string;
+            };
+            backgroundImage: {
+                primary: string;
+                "primary-hover": string;
+                secondary: string;
+                "secondary-hover": string;
+                destructive: string;
+                "destructive-hover": string;
+            };
+        };
+    };
+    plugins: {
+        handler: import("tailwindcss/types/config").PluginCreator;
+        config?: Partial<import("tailwindcss/types/config").Config>;
+    }[];
+};
+export default _default;

dist/tailwind.config.js

@@ -1,48 +0,151 @@
-const { fontFamily } = require("tailwindcss/defaultTheme");
-module.exports = {
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const defaultTheme_1 = require("tailwindcss/defaultTheme");
+const plugin_1 = __importDefault(require("./stories/Typography/plugin"));
+const colors = {
+    gold: {
+        50: "#FEF7E6",
+        100: "#FCEFCF",
+        200: "#FAE09E",
+        300: "#F7D16E",
+        400: "#F5C13D",
+        500: "#F0B10D",
+        600: "#CC9300",
+        700: "#996E00",
+        800: "#664900",
+        900: "#332500",
+    },
+    blue: {
+        50: "#E5E9FF",
+        100: "#CCD5FF",
+        200: "#99AAFF",
+        300: "#6E85F7",
+        400: "#5670F6",
+        500: "#4755EB",
+        600: "#3340CC",
+        700: "#2933A3",
+        800: "#1F277A",
+        900: "#141952",
+    },
+    green: {
+        50: "#E8FCF6",
+        100: "#D2F9ED",
+        200: "#A6F2DB",
+        300: "#79ECC9",
+        400: "#36E2AE",
+        500: "#00CC8F",
+        600: "#00B27D",
+        700: "#00825B",
+        800: "#006446",
+        900: "#003324",
+    },
+    red: {
+        50: "#FDE7EB",
+        100: "#FBD0D7",
+        200: "#F9B8C3",
+        300: "#F5899A",
+        400: "#F37186",
+        500: "#F04260",
+        600: "#E21235",
+        700: "#BD0F2D",
+        800: "#750A1B",
+        900: "#470611",
+    },
+    slate: {
+        50: "#EEEFF6",
+        100: "#DEDFED",
+        200: "#BEC1DC",
+        300: "#9CA0C9",
+        400: "#7C81B8",
+        500: "#60659F",
+        600: "#4D5180",
+        700: "#393D60",
+        800: "#303350",
+        900: "#1D1F30",
+    },
+    dark: {
+        800: "#111545",
+        900: "#0E1139",
+    },
+    white: "#FFFFFF",
+    black: "#000000",
+    transparent: "transparent",
+};
+const borderRingOutline = {
+    primary: colors.blue[800],
+    focus: colors.slate[400],
+    "secondary-active": colors.blue[600],
+    error: colors.red[500],
+};
+exports.default = {
     content: ["./stories/**/*.{js,ts,jsx,tsx,mdx}"],
     theme: {
-        colors: {
-            transparent: "transparent",
-            white: "#FFFFFF",
-            black: "#000000",
-            green: "#00C88C",
-            algae: "#37EAAC",
-            kelp: "#00C88C",
-            teal: "#0A4852",
-            treasure: "#FFDC81",
-            gold: "#FFD15C",
-            goldfish: "#F0B10D",
-            red: "#F24461",
-            coral: "#FF657E",
-            lobster: "#FF657EFF",
-            maroon: "#522045",
-            arctic: "#B5C9FF",
-            atlantic: "#9AB3FF",
-            ocean: "#7F9DFF",
-            pacific: "#6988FF",
-            marine: "#5266FA",
-            sapphire: "#3F53E6",
-            cobalt: "#333DCC",
-            twilight: "#242B8F",
-            midnight: "#182072",
-            abyss: "#141852",
-            vapor: "#C2C5F0",
-            shark: "#7C80B8",
-            manta: "#474B7F",
-            barracuda: "#A1ACFD",
-            tang: "#6375FB",
-            marlin: "#1C2271",
-            meridian: "#161B5A",
-            azure: "#111546",
-            navy: "#0E1139",
+        colors,
+        fontSize: {
+            xxs: ["0.625rem", "0.75rem"],
+            xs: ["0.75rem", "1rem"],
+            sm: ["0.875rem", "1.25rem"],
+            base: ["1rem", "1.5rem"],
+            xl: ["1.25rem", "1.75rem"],
+            "2xl": ["1.5rem", "2rem"],
+            "3xl": ["1.875rem", "2.25rem"],
         },
+        fontWeight: {
+            regular: "400",
+            medium: "500",
+            semibold: "600",
+        },
         fontFamily: {
-            sans: ["var(--font-suisse-intl)", ...fontFamily.sans],
-            mono: [...fontFamily.mono],
+            sans: ["SuisseIntl", ...defaultTheme_1.fontFamily.sans],
+            mono: ["SuisseIntlMono", ...defaultTheme_1.fontFamily.mono],
         },
-        extend: {},
+        extend: {
+            textColor: {
+                primary: colors.slate[50],
+                secondary: colors.slate[300],
+                tertiary: colors.slate[400],
+                quarternary: colors.slate[500],
+                inverse: colors.dark[900],
+                link: colors.blue[200],
+                "link-hover": colors.blue[100],
+                error: colors.red[400],
+                success: colors.green[400],
+                warning: colors.gold[300],
+            },
+            fill: {
+                primary: colors.slate[50],
+                secondary: colors.slate[300],
+                tertiary: colors.slate[400],
+                quarternary: colors.slate[500],
+                inverse: colors.dark[900],
+                link: colors.blue[200],
+                "link-hover": colors.blue[100],
+                error: colors.red[400],
+                success: colors.green[400],
+                warning: colors.gold[300],
+            },
+            borderColor: borderRingOutline,
+            ringColor: borderRingOutline,
+            outlineColor: borderRingOutline,
+            backgroundColor: {
+                default: colors.dark[900],
+                surface: colors.dark[800],
+                "surface-hover": colors.blue[900],
+                disabled: colors.slate[500],
+            },
+            backgroundImage: {
+                primary: `linear-gradient(180deg, ${colors.gold[300]}, #F6C955)`,
+                "primary-hover": `linear-gradient(180deg, #F8D67D, ${colors.gold[300]})`,
+                secondary: `linear-gradient(180deg, ${colors.blue[800]}, #1D2472)`,
+                "secondary-hover": `linear-gradient(180deg, #222B87, ${colors.blue[800]})`,
+                destructive: `linear-gradient(180deg, ${colors.red[400]}, #F25A73)`,
+                "destructive-hover": `linear-gradient(180deg, #F58093, ${colors.red[400]})`,
+            },
+        },
     },
-    plugins: [],
+    plugins: [plugin_1.default],
 };
 //# sourceMappingURL=tailwind.config.js.map

package.json

 {
   "name": "@orca-so/design-system",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Orca Design System",
@@ -21,3 +21,6 @@ "main": "dist/index.js",
   "dependencies": {
-    "clsx": "^2.0.0"
+    "@radix-ui/react-slot": "^1.0.2",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "tiny-invariant": "^1.3.1"
   },
@@ -45,9 +48,9 @@ "peerDependencies": {
     "@types/react": "^18.2.45",
-    "@typescript-eslint/eslint-plugin": "^6.15.0",
-    "@typescript-eslint/parser": "^6.15.0",
+    "@typescript-eslint/eslint-plugin": "^7.0.2",
+    "@typescript-eslint/parser": "^7.0.2",
     "autoprefixer": "^10.4.16",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-storybook": "^0.6.15",
-    "jsdom": "^23.0.1",
+    "eslint-plugin-storybook": "^0.8.0",
+    "jsdom": "^24.0.0",
     "mocha": "^10.2.0",
@@ -54,0 +57,0 @@ "next": "^14.0.4",

README.md

@@ -5,2 +5,4 @@ # Orca Design System
 
+> **This repository contains proprietary fonts that should be removed before open-sourcing this repo.**
+
 ## What is the Orca Design System?
@@ -32,2 +34,29 @@
 
+Add the SuisseIntl font to your project (optional):
+```css
+@layer base {
+  @font-face {
+    font-family: "SuisseIntl";
+    font-weight: 400;
+    src: url("path/to/SuisseIntl-Regular-WebS.woff") format("woff");
+  }
+  @font-face {
+    font-family: "SuisseIntl";
+    font-weight: 500;
+    src: url("path/to/SuisseIntl-Medium-WebS.woff") format("woff");
+  }
+  @font-face {
+    font-family: "SuisseIntl";
+    font-weight: 600;
+    src: url("path/to/SuisseIntl-SemiBold-WebS.woff") format("woff");
+  }
+  @font-face {
+    font-family: "SuisseIntlMono";
+    font-weight: 400;
+    src: url("path/to/SuisseIntlMono-Regular-WebS.woff") format("woff");
+  }
+}
+
+```
+
 Then, you can import the components you need:
@@ -34,0 +63,0 @@

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

28800

increased by145.4%

Lines of code

471

increased by167.61%

Number of lines in readme file

79

increased by58%

Worsened metrics

Dependency count

6

increased by100%

Number of package files

18

decreased by-5.26%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@radix-ui/react-slot@^1.0.2

• + Addedclass-variance-authority@^0.7.0

• + Addedtiny-invariant@^1.3.1

• + Added@radix-ui/react-compose-refs@1.1.0(transitive)

• + Added@radix-ui/react-slot@1.1.0(transitive)

• + Addedclass-variance-authority@0.7.0(transitive)

• + Addedclsx@2.0.0(transitive)

• + Addedtiny-invariant@1.3.3(transitive)

• Updatedclsx@^2.1.0