futsuno-ui 0.1.0

package/dist/tokens/index.d.ts

@@ -0,0 +1,432 @@
+/**
+ * Futsuno Design System - Color Tokens
+ * Extracted from Figma Design System
+ */
+declare const colors: {
+    /** Primary black color - #040404 */
+    readonly black: "#040404";
+    /** Primary white color - #FFFFFF */
+    readonly white: "#FFFFFF";
+    /** Gray scale colors */
+    readonly gray: {
+        /** Dark gray - #464646 - Used for buttons, secondary text */
+        readonly 900: "#464646";
+        /** Medium gray - #BDC1C2 - Used for borders */
+        readonly 400: "#BDC1C2";
+        /** Light gray - #E5E6E6 - Used for backgrounds */
+        readonly 200: "#E5E6E6";
+        /** Lightest gray - #E5E6E6 */
+        readonly 100: "#E5E6E6";
+    };
+    /** Background colors */
+    readonly background: {
+        /** Section background gray - #F2F3F1 */
+        readonly gray: "#F2F3F1";
+    };
+    /** Accent colors */
+    readonly accent: {
+        /** Gold accent - #978E5F - Used for badges, premium elements */
+        readonly gold: "#978E5F";
+        /** Blue accent - #457D99 */
+        readonly blue: "#457D99";
+        /** Red accent - #CC5E58 - Used for CTAs, emphasis */
+        readonly red: "#CC5E58";
+    };
+    /** Button colors - semantic aliases */
+    readonly button: {
+        readonly black: "#464646";
+        readonly red: "#CC5E58";
+        readonly gold: "#978E5F";
+        readonly white: "#FFFFFF";
+    };
+    /** Text colors - semantic aliases */
+    readonly text: {
+        readonly primary: "#040404";
+        readonly secondary: "#464646";
+        readonly inverse: "#FFFFFF";
+        readonly accent: "#CC5E58";
+    };
+};
+/** Type for color tokens */
+type Colors = typeof colors;
+/** Flat color palette for CSS variables */
+declare const colorPalette: {
+    readonly '--color-black': "#040404";
+    readonly '--color-white': "#FFFFFF";
+    readonly '--color-gray-900': "#464646";
+    readonly '--color-gray-400': "#BDC1C2";
+    readonly '--color-gray-200': "#E5E6E6";
+    readonly '--color-gray-100': "#E5E6E6";
+    readonly '--color-background-gray': "#F2F3F1";
+    readonly '--color-accent-gold': "#978E5F";
+    readonly '--color-accent-blue': "#457D99";
+    readonly '--color-accent-red': "#CC5E58";
+};
+
+/**
+ * Futsuno Design System - Typography Tokens
+ * Extracted from Figma Design System
+ */
+/** Font families */
+declare const fontFamily: {
+    /** Primary font - Noto Sans JP */
+    readonly primary: "\"Noto Sans JP\", sans-serif";
+    /** Secondary font for prices - A-OTF Shuei NGo Kin StdN */
+    readonly price: "\"A-OTF Shuei NGo Kin StdN\", \"Noto Sans JP\", sans-serif";
+};
+/** Font weights */
+declare const fontWeight: {
+    readonly regular: 400;
+    readonly medium: 500;
+    readonly bold: 700;
+};
+/** Typography scale */
+declare const typography: {
+    /** Heading 1 - 24px */
+    readonly h1: {
+        readonly fontSize: "24px";
+        readonly lineHeight: 1.55;
+        readonly letterSpacing: "0.16em";
+        readonly fontWeight: 500;
+        readonly fontFamily: "\"Noto Sans JP\", sans-serif";
+    };
+    /** Heading 2 - 22px */
+    readonly h2: {
+        readonly fontSize: "22px";
+        readonly lineHeight: 1.55;
+        readonly letterSpacing: "0.16em";
+        readonly fontWeight: 500;
+        readonly fontFamily: "\"Noto Sans JP\", sans-serif";
+    };
+    /** Heading 3 - 20px */
+    readonly h3: {
+        readonly fontSize: "20px";
+        readonly lineHeight: 1.35;
+        readonly letterSpacing: "0.16em";
+        readonly fontWeight: 500;
+        readonly fontFamily: "\"Noto Sans JP\", sans-serif";
+    };
+    /** Heading 4 - 18px */
+    readonly h4: {
+        readonly fontSize: "18px";
+        readonly lineHeight: 1.45;
+        readonly letterSpacing: "0.16em";
+        readonly fontWeight: 500;
+        readonly fontFamily: "\"Noto Sans JP\", sans-serif";
+    };
+    /** Body large - 16px */
+    readonly bodyLg: {
+        readonly fontSize: "16px";
+        readonly lineHeight: 1.95;
+        readonly letterSpacing: "0.08em";
+        readonly fontWeight: 500;
+        readonly fontFamily: "\"Noto Sans JP\", sans-serif";
+    };
+    /** Body medium - 15px */
+    readonly bodyMd: {
+        readonly fontSize: "15px";
+        readonly lineHeight: 1.85;
+        readonly letterSpacing: "0.08em";
+        readonly fontWeight: 500;
+        readonly fontFamily: "\"Noto Sans JP\", sans-serif";
+    };
+    /** Body small - 13px */
+    readonly bodySm: {
+        readonly fontSize: "13px";
+        readonly lineHeight: 1.85;
+        readonly letterSpacing: "0.08em";
+        readonly fontWeight: 500;
+        readonly fontFamily: "\"Noto Sans JP\", sans-serif";
+    };
+    /** Caption large - 12px */
+    readonly captionLg: {
+        readonly fontSize: "12px";
+        readonly lineHeight: 1.45;
+        readonly letterSpacing: "0.08em";
+        readonly fontWeight: 500;
+        readonly fontFamily: "\"Noto Sans JP\", sans-serif";
+    };
+    /** Caption medium - 11px */
+    readonly captionMd: {
+        readonly fontSize: "11px";
+        readonly lineHeight: 1.45;
+        readonly letterSpacing: "0.08em";
+        readonly fontWeight: 500;
+        readonly fontFamily: "\"Noto Sans JP\", sans-serif";
+    };
+    /** Caption small - 10px */
+    readonly captionSm: {
+        readonly fontSize: "10px";
+        readonly lineHeight: 1.45;
+        readonly letterSpacing: "0.08em";
+        readonly fontWeight: 500;
+        readonly fontFamily: "\"Noto Sans JP\", sans-serif";
+    };
+    /** Caption extra small - 8px */
+    readonly captionXs: {
+        readonly fontSize: "8px";
+        readonly lineHeight: 1.45;
+        readonly letterSpacing: "0.08em";
+        readonly fontWeight: 500;
+        readonly fontFamily: "\"Noto Sans JP\", sans-serif";
+    };
+    /** Button text - 20px bold */
+    readonly buttonLg: {
+        readonly fontSize: "20px";
+        readonly lineHeight: 1.45;
+        readonly letterSpacing: "0.05em";
+        readonly fontWeight: 700;
+        readonly fontFamily: "\"Noto Sans JP\", sans-serif";
+    };
+    /** Button text - 18px bold */
+    readonly buttonMd: {
+        readonly fontSize: "18px";
+        readonly lineHeight: 1.45;
+        readonly letterSpacing: "0.05em";
+        readonly fontWeight: 700;
+        readonly fontFamily: "\"Noto Sans JP\", sans-serif";
+    };
+    /** Price text - 25px */
+    readonly priceLg: {
+        readonly fontSize: "25px";
+        readonly lineHeight: 1.45;
+        readonly letterSpacing: "0.05em";
+        readonly fontWeight: 700;
+        readonly fontFamily: "\"A-OTF Shuei NGo Kin StdN\", \"Noto Sans JP\", sans-serif";
+    };
+    /** Price text - 14px */
+    readonly priceSm: {
+        readonly fontSize: "14px";
+        readonly lineHeight: 1.45;
+        readonly letterSpacing: "0.05em";
+        readonly fontWeight: 700;
+        readonly fontFamily: "\"A-OTF Shuei NGo Kin StdN\", \"Noto Sans JP\", sans-serif";
+    };
+};
+/** Type for typography tokens */
+type Typography = typeof typography;
+type TypographyKey = keyof Typography;
+
+/**
+ * Futsuno Design System - Spacing Tokens
+ * Extracted from Figma Design System
+ */
+/** Spacing scale in pixels */
+declare const spacing: {
+    /** 4px */
+    readonly '4': "4px";
+    /** 8px */
+    readonly '8': "8px";
+    /** 12px */
+    readonly '12': "12px";
+    /** 16px */
+    readonly '16': "16px";
+    /** 24px */
+    readonly '24': "24px";
+    /** 32px */
+    readonly '32': "32px";
+    /** 40px */
+    readonly '40': "40px";
+    /** 48px */
+    readonly '48': "48px";
+};
+/** Spacing as numbers (for calculations) */
+declare const spacingValues: {
+    readonly '4': 4;
+    readonly '8': 8;
+    readonly '12': 12;
+    readonly '16': 16;
+    readonly '24': 24;
+    readonly '32': 32;
+    readonly '40': 40;
+    readonly '48': 48;
+};
+/** Border radius tokens */
+declare const borderRadius: {
+    /** Button border radius - 3px */
+    readonly button: "3px";
+    /** Small radius - 2px */
+    readonly sm: "2px";
+    /** Badge radius - 55px (circular) */
+    readonly badge: "55px";
+    /** Full circle */
+    readonly full: "9999px";
+};
+/** Box shadow tokens */
+declare const boxShadow: {
+    /** Button shadow */
+    readonly button: "0px 4px 16px 0px rgba(4, 4, 4, 0.4)";
+    /** None */
+    readonly none: "none";
+};
+/** Type for spacing tokens */
+type Spacing = typeof spacing;
+type SpacingKey = keyof Spacing;
+
+/**
+ * Futsuno Design System - Design Tokens
+ * All design tokens extracted from Figma
+ */
+
+/** Combined tokens object for convenience */
+declare const tokens: {
+    readonly colors: {
+        readonly black: "#040404";
+        readonly white: "#FFFFFF";
+        readonly gray: {
+            readonly 900: "#464646";
+            readonly 400: "#BDC1C2";
+            readonly 200: "#E5E6E6";
+            readonly 100: "#E5E6E6";
+        };
+        readonly background: {
+            readonly gray: "#F2F3F1";
+        };
+        readonly accent: {
+            readonly gold: "#978E5F";
+            readonly blue: "#457D99";
+            readonly red: "#CC5E58";
+        };
+        readonly button: {
+            readonly black: "#464646";
+            readonly red: "#CC5E58";
+            readonly gold: "#978E5F";
+            readonly white: "#FFFFFF";
+        };
+        readonly text: {
+            readonly primary: "#040404";
+            readonly secondary: "#464646";
+            readonly inverse: "#FFFFFF";
+            readonly accent: "#CC5E58";
+        };
+    };
+    readonly typography: {
+        readonly h1: {
+            readonly fontSize: "24px";
+            readonly lineHeight: 1.55;
+            readonly letterSpacing: "0.16em";
+            readonly fontWeight: 500;
+            readonly fontFamily: "\"Noto Sans JP\", sans-serif";
+        };
+        readonly h2: {
+            readonly fontSize: "22px";
+            readonly lineHeight: 1.55;
+            readonly letterSpacing: "0.16em";
+            readonly fontWeight: 500;
+            readonly fontFamily: "\"Noto Sans JP\", sans-serif";
+        };
+        readonly h3: {
+            readonly fontSize: "20px";
+            readonly lineHeight: 1.35;
+            readonly letterSpacing: "0.16em";
+            readonly fontWeight: 500;
+            readonly fontFamily: "\"Noto Sans JP\", sans-serif";
+        };
+        readonly h4: {
+            readonly fontSize: "18px";
+            readonly lineHeight: 1.45;
+            readonly letterSpacing: "0.16em";
+            readonly fontWeight: 500;
+            readonly fontFamily: "\"Noto Sans JP\", sans-serif";
+        };
+        readonly bodyLg: {
+            readonly fontSize: "16px";
+            readonly lineHeight: 1.95;
+            readonly letterSpacing: "0.08em";
+            readonly fontWeight: 500;
+            readonly fontFamily: "\"Noto Sans JP\", sans-serif";
+        };
+        readonly bodyMd: {
+            readonly fontSize: "15px";
+            readonly lineHeight: 1.85;
+            readonly letterSpacing: "0.08em";
+            readonly fontWeight: 500;
+            readonly fontFamily: "\"Noto Sans JP\", sans-serif";
+        };
+        readonly bodySm: {
+            readonly fontSize: "13px";
+            readonly lineHeight: 1.85;
+            readonly letterSpacing: "0.08em";
+            readonly fontWeight: 500;
+            readonly fontFamily: "\"Noto Sans JP\", sans-serif";
+        };
+        readonly captionLg: {
+            readonly fontSize: "12px";
+            readonly lineHeight: 1.45;
+            readonly letterSpacing: "0.08em";
+            readonly fontWeight: 500;
+            readonly fontFamily: "\"Noto Sans JP\", sans-serif";
+        };
+        readonly captionMd: {
+            readonly fontSize: "11px";
+            readonly lineHeight: 1.45;
+            readonly letterSpacing: "0.08em";
+            readonly fontWeight: 500;
+            readonly fontFamily: "\"Noto Sans JP\", sans-serif";
+        };
+        readonly captionSm: {
+            readonly fontSize: "10px";
+            readonly lineHeight: 1.45;
+            readonly letterSpacing: "0.08em";
+            readonly fontWeight: 500;
+            readonly fontFamily: "\"Noto Sans JP\", sans-serif";
+        };
+        readonly captionXs: {
+            readonly fontSize: "8px";
+            readonly lineHeight: 1.45;
+            readonly letterSpacing: "0.08em";
+            readonly fontWeight: 500;
+            readonly fontFamily: "\"Noto Sans JP\", sans-serif";
+        };
+        readonly buttonLg: {
+            readonly fontSize: "20px";
+            readonly lineHeight: 1.45;
+            readonly letterSpacing: "0.05em";
+            readonly fontWeight: 700;
+            readonly fontFamily: "\"Noto Sans JP\", sans-serif";
+        };
+        readonly buttonMd: {
+            readonly fontSize: "18px";
+            readonly lineHeight: 1.45;
+            readonly letterSpacing: "0.05em";
+            readonly fontWeight: 700;
+            readonly fontFamily: "\"Noto Sans JP\", sans-serif";
+        };
+        readonly priceLg: {
+            readonly fontSize: "25px";
+            readonly lineHeight: 1.45;
+            readonly letterSpacing: "0.05em";
+            readonly fontWeight: 700;
+            readonly fontFamily: "\"A-OTF Shuei NGo Kin StdN\", \"Noto Sans JP\", sans-serif";
+        };
+        readonly priceSm: {
+            readonly fontSize: "14px";
+            readonly lineHeight: 1.45;
+            readonly letterSpacing: "0.05em";
+            readonly fontWeight: 700;
+            readonly fontFamily: "\"A-OTF Shuei NGo Kin StdN\", \"Noto Sans JP\", sans-serif";
+        };
+    };
+    readonly spacing: {
+        readonly '4': "4px";
+        readonly '8': "8px";
+        readonly '12': "12px";
+        readonly '16': "16px";
+        readonly '24': "24px";
+        readonly '32': "32px";
+        readonly '40': "40px";
+        readonly '48': "48px";
+    };
+    readonly borderRadius: {
+        readonly button: "3px";
+        readonly sm: "2px";
+        readonly badge: "55px";
+        readonly full: "9999px";
+    };
+    readonly boxShadow: {
+        readonly button: "0px 4px 16px 0px rgba(4, 4, 4, 0.4)";
+        readonly none: "none";
+    };
+};
+
+export { type Colors, type Spacing, type SpacingKey, type Typography, type TypographyKey, borderRadius, boxShadow, colorPalette, colors, fontFamily, fontWeight, spacing, spacingValues, tokens, typography };

package/dist/tokens/index.js

@@ -0,0 +1,252 @@
+// src/tokens/colors.ts
+var colors = {
+  /** Primary black color - #040404 */
+  black: "#040404",
+  /** Primary white color - #FFFFFF */
+  white: "#FFFFFF",
+  /** Gray scale colors */
+  gray: {
+    /** Dark gray - #464646 - Used for buttons, secondary text */
+    900: "#464646",
+    /** Medium gray - #BDC1C2 - Used for borders */
+    400: "#BDC1C2",
+    /** Light gray - #E5E6E6 - Used for backgrounds */
+    200: "#E5E6E6",
+    /** Lightest gray - #E5E6E6 */
+    100: "#E5E6E6"
+  },
+  /** Background colors */
+  background: {
+    /** Section background gray - #F2F3F1 */
+    gray: "#F2F3F1"
+  },
+  /** Accent colors */
+  accent: {
+    /** Gold accent - #978E5F - Used for badges, premium elements */
+    gold: "#978E5F",
+    /** Blue accent - #457D99 */
+    blue: "#457D99",
+    /** Red accent - #CC5E58 - Used for CTAs, emphasis */
+    red: "#CC5E58"
+  },
+  /** Button colors - semantic aliases */
+  button: {
+    black: "#464646",
+    red: "#CC5E58",
+    gold: "#978E5F",
+    white: "#FFFFFF"
+  },
+  /** Text colors - semantic aliases */
+  text: {
+    primary: "#040404",
+    secondary: "#464646",
+    inverse: "#FFFFFF",
+    accent: "#CC5E58"
+  }
+};
+var colorPalette = {
+  "--color-black": colors.black,
+  "--color-white": colors.white,
+  "--color-gray-900": colors.gray[900],
+  "--color-gray-400": colors.gray[400],
+  "--color-gray-200": colors.gray[200],
+  "--color-gray-100": colors.gray[100],
+  "--color-background-gray": colors.background.gray,
+  "--color-accent-gold": colors.accent.gold,
+  "--color-accent-blue": colors.accent.blue,
+  "--color-accent-red": colors.accent.red
+};
+
+// src/tokens/typography.ts
+var fontFamily = {
+  /** Primary font - Noto Sans JP */
+  primary: '"Noto Sans JP", sans-serif',
+  /** Secondary font for prices - A-OTF Shuei NGo Kin StdN */
+  price: '"A-OTF Shuei NGo Kin StdN", "Noto Sans JP", sans-serif'
+};
+var fontWeight = {
+  regular: 400,
+  medium: 500,
+  bold: 700
+};
+var typography = {
+  /** Heading 1 - 24px */
+  h1: {
+    fontSize: "24px",
+    lineHeight: 1.55,
+    letterSpacing: "0.16em",
+    fontWeight: fontWeight.medium,
+    fontFamily: fontFamily.primary
+  },
+  /** Heading 2 - 22px */
+  h2: {
+    fontSize: "22px",
+    lineHeight: 1.55,
+    letterSpacing: "0.16em",
+    fontWeight: fontWeight.medium,
+    fontFamily: fontFamily.primary
+  },
+  /** Heading 3 - 20px */
+  h3: {
+    fontSize: "20px",
+    lineHeight: 1.35,
+    letterSpacing: "0.16em",
+    fontWeight: fontWeight.medium,
+    fontFamily: fontFamily.primary
+  },
+  /** Heading 4 - 18px */
+  h4: {
+    fontSize: "18px",
+    lineHeight: 1.45,
+    letterSpacing: "0.16em",
+    fontWeight: fontWeight.medium,
+    fontFamily: fontFamily.primary
+  },
+  /** Body large - 16px */
+  bodyLg: {
+    fontSize: "16px",
+    lineHeight: 1.95,
+    letterSpacing: "0.08em",
+    fontWeight: fontWeight.medium,
+    fontFamily: fontFamily.primary
+  },
+  /** Body medium - 15px */
+  bodyMd: {
+    fontSize: "15px",
+    lineHeight: 1.85,
+    letterSpacing: "0.08em",
+    fontWeight: fontWeight.medium,
+    fontFamily: fontFamily.primary
+  },
+  /** Body small - 13px */
+  bodySm: {
+    fontSize: "13px",
+    lineHeight: 1.85,
+    letterSpacing: "0.08em",
+    fontWeight: fontWeight.medium,
+    fontFamily: fontFamily.primary
+  },
+  /** Caption large - 12px */
+  captionLg: {
+    fontSize: "12px",
+    lineHeight: 1.45,
+    letterSpacing: "0.08em",
+    fontWeight: fontWeight.medium,
+    fontFamily: fontFamily.primary
+  },
+  /** Caption medium - 11px */
+  captionMd: {
+    fontSize: "11px",
+    lineHeight: 1.45,
+    letterSpacing: "0.08em",
+    fontWeight: fontWeight.medium,
+    fontFamily: fontFamily.primary
+  },
+  /** Caption small - 10px */
+  captionSm: {
+    fontSize: "10px",
+    lineHeight: 1.45,
+    letterSpacing: "0.08em",
+    fontWeight: fontWeight.medium,
+    fontFamily: fontFamily.primary
+  },
+  /** Caption extra small - 8px */
+  captionXs: {
+    fontSize: "8px",
+    lineHeight: 1.45,
+    letterSpacing: "0.08em",
+    fontWeight: fontWeight.medium,
+    fontFamily: fontFamily.primary
+  },
+  /** Button text - 20px bold */
+  buttonLg: {
+    fontSize: "20px",
+    lineHeight: 1.45,
+    letterSpacing: "0.05em",
+    fontWeight: fontWeight.bold,
+    fontFamily: fontFamily.primary
+  },
+  /** Button text - 18px bold */
+  buttonMd: {
+    fontSize: "18px",
+    lineHeight: 1.45,
+    letterSpacing: "0.05em",
+    fontWeight: fontWeight.bold,
+    fontFamily: fontFamily.primary
+  },
+  /** Price text - 25px */
+  priceLg: {
+    fontSize: "25px",
+    lineHeight: 1.45,
+    letterSpacing: "0.05em",
+    fontWeight: fontWeight.bold,
+    fontFamily: fontFamily.price
+  },
+  /** Price text - 14px */
+  priceSm: {
+    fontSize: "14px",
+    lineHeight: 1.45,
+    letterSpacing: "0.05em",
+    fontWeight: fontWeight.bold,
+    fontFamily: fontFamily.price
+  }
+};
+
+// src/tokens/spacing.ts
+var spacing = {
+  /** 4px */
+  "4": "4px",
+  /** 8px */
+  "8": "8px",
+  /** 12px */
+  "12": "12px",
+  /** 16px */
+  "16": "16px",
+  /** 24px */
+  "24": "24px",
+  /** 32px */
+  "32": "32px",
+  /** 40px */
+  "40": "40px",
+  /** 48px */
+  "48": "48px"
+};
+var spacingValues = {
+  "4": 4,
+  "8": 8,
+  "12": 12,
+  "16": 16,
+  "24": 24,
+  "32": 32,
+  "40": 40,
+  "48": 48
+};
+var borderRadius = {
+  /** Button border radius - 3px */
+  button: "3px",
+  /** Small radius - 2px */
+  sm: "2px",
+  /** Badge radius - 55px (circular) */
+  badge: "55px",
+  /** Full circle */
+  full: "9999px"
+};
+var boxShadow = {
+  /** Button shadow */
+  button: "0px 4px 16px 0px rgba(4, 4, 4, 0.4)",
+  /** None */
+  none: "none"
+};
+
+// src/tokens/index.ts
+var tokens = {
+  colors,
+  typography,
+  spacing,
+  borderRadius,
+  boxShadow
+};
+
+export { borderRadius, boxShadow, colorPalette, colors, fontFamily, fontWeight, spacing, spacingValues, tokens, typography };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map