@sxo/theme-material 0.0.0 → 0.0.1

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 sxo team
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,9 +1,44 @@
-# @sxo/theme-material
+<div align="center">
+  <h1>@sxo/theme-material</h1>
+  <p><b>Material Design (M3) style theme for the SXO design system. A modern, tactile, and expressive aesthetic.</b></p>
 
-SXO 设计系统的 Material Design (M3) 风格主题。
+  <p>
+    <a href="https://www.npmjs.com/package/@sxo/theme-material"><img src="https://img.shields.io/npm/v/@sxo/theme-material.svg?style=flat-square" alt="npm version"></a>
+    <img src="https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square" alt="license">
+    <img src="https://img.shields.io/npm/dm/@sxo/theme-material.svg?style=flat-square" alt="downloads">
+  </p>
+</div>
 
-## 安装
+---
+
+`@sxo/theme-material` brings Google's Material You (M3) design philosophy to the SXO ecosystem, featuring dynamic color capabilities and a focus on tactile surfaces.
+
+## ✨ Features
+
+- 📐 **M3 Specifications**: Follows the latest Material Design 3 guidelines.
+- 🎨 **Expressive Color**: Optimized for dynamic color schemes and high legibility.
+- 🏔️ **Elevation & Depth**: Signature use of shadows and surfaces to indicate hierarchy.
+- 🧩 **Universal**: Fully compatible with all SXO framework adaptors.
+
+## 🚀 Quick Start
+
+### Installation
 
 ```bash
-pnpm add @sxo/theme-material @sxo/engine @sxo/design
+pnpm add @sxo/theme-material
 ```
+
+### Usage (Vue 3 Example)
+
+```typescript
+import { createSxo } from '@sxo/vue';
+import materialTheme from '@sxo/theme-material';
+
+app.use(createSxo({
+    tokens: materialTheme
+}));
+```
+
+## 📄 License
+
+MIT License.

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const F=require("@sxo/design"),r={...F.defaultTokens,color:{...F.defaultTokens.color,primary:{DEFAULT:"#6750A4",foreground:"#FFFFFF"},secondary:{DEFAULT:"#625B71",foreground:"#FFFFFF"},accent:{DEFAULT:"#7D5260",neon:"#B3261E",vivid:"#6750A4"},success:{DEFAULT:"#4CAF50"},warning:{DEFAULT:"#FFC107"},error:{DEFAULT:"#B3261E"},info:{DEFAULT:"#2196F3"},neutral:{0:"#FFFFFF",50:"#F7F2FA",100:"#F3EDF7",200:"#E6E1E5",300:"#CAC4D0",400:"#938F99",500:"#79747E",600:"#49454F",700:"#1D1B20",800:"#1C1B1F",900:"#19171A",950:"#000000",1e3:"#000000"},background:{primary:"#FFFBFE",secondary:"#F3EDF7",inverse:"#313033"},text:{primary:"#1C1B1F",secondary:"#49454F",muted:"#79747E",inverse:"#F4EFF4"}},borderRadius:{none:"0px",xs:"4px",sm:"8px",md:"12px",lg:"16px",full:"9999px",xl:"12px"},boxShadow:{none:"none",sm:"0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15)",DEFAULT:"0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15)",md:"0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3)",lg:"0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3)",hard:"0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px rgba(0, 0, 0, 0.3)","hard-accent":"0px 8px 12px 6px rgba(103, 80, 164, 0.15), 0px 4px 4px rgba(103, 80, 164, 0.3)",xl:"0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)"},typography:{...F.defaultTokens.typography,fontFamily:{sans:'"Roboto", "Segoe UI", Tahoma, sans-serif',serif:'"Roboto Serif", Georgia, serif',mono:'"Roboto Mono", monospace'}},modes:{dark:{primary:{DEFAULT:"#D0BCFF",foreground:"#381E72"},secondary:{DEFAULT:"#CCC2DC",foreground:"#332D41"},accent:{DEFAULT:"#EFB8C8",neon:"#F2B8B5",vivid:"#D0BCFF"},neutral:{0:"#1C1B1F",50:"#1C1B1F",100:"#1D1B20",200:"#313033",300:"#49454F",400:"#79747E",500:"#938F99",600:"#CAC4D0",700:"#E6E1E5",800:"#F3EDF7",900:"#F7F2FA",1e3:"#FFFFFF"},background:{primary:"#1C1B1F",secondary:"#1D1B20",inverse:"#E6E1E5"}}}};exports.default=r;exports.materialTheme=r;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const F=require("@sxo/design"),r={...F.defaultTokens,color:{...F.defaultTokens.color,primary:{DEFAULT:"#6750A4",foreground:"#FFFFFF"},secondary:{DEFAULT:"#625B71",foreground:"#FFFFFF"},accent:{DEFAULT:"#7D5260",neon:"#B3261E",vivid:"#6750A4"},success:{DEFAULT:"#4CAF50"},warning:{DEFAULT:"#FFC107"},error:{DEFAULT:"#B3261E"},info:{DEFAULT:"#2196F3"},neutral:{0:"#FFFFFF",50:"#F7F2FA",100:"#F3EDF7",200:"#E6E1E5",300:"#CAC4D0",400:"#938F99",500:"#79747E",600:"#49454F",700:"#1D1B20",800:"#1C1B1F",900:"#19171A",950:"#000000",1e3:"#000000"},background:{primary:"#FFFBFE",secondary:"#F3EDF7",inverse:"#313033"},text:{primary:"#1C1B1F",secondary:"#49454F",muted:"#79747E",inverse:"#F4EFF4"}},borderRadius:{DEFAULT:"12px",none:"0px",xs:"4px",sm:"8px",md:"12px",lg:"16px",full:"9999px",xl:"12px"},boxShadow:{none:"none",sm:"0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15)",DEFAULT:"0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15)",md:"0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3)",lg:"0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3)",hard:"0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px rgba(0, 0, 0, 0.3)","hard-accent":"0px 8px 12px 6px rgba(103, 80, 164, 0.15), 0px 4px 4px rgba(103, 80, 164, 0.3)",xl:"0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)"},typography:{...F.defaultTokens.typography,fontFamily:{sans:'"Roboto", "Segoe UI", Tahoma, sans-serif',serif:'"Roboto Serif", Georgia, serif',mono:'"Roboto Mono", monospace'}},modes:{dark:{primary:{DEFAULT:"#D0BCFF",foreground:"#381E72"},secondary:{DEFAULT:"#CCC2DC",foreground:"#332D41"},accent:{DEFAULT:"#EFB8C8",neon:"#F2B8B5",vivid:"#D0BCFF"},neutral:{0:"#1C1B1F",50:"#1C1B1F",100:"#1D1B20",200:"#313033",300:"#49454F",400:"#79747E",500:"#938F99",600:"#CAC4D0",700:"#E6E1E5",800:"#F3EDF7",900:"#F7F2FA",1e3:"#FFFFFF"},background:{primary:"#1C1B1F",secondary:"#1D1B20",inverse:"#E6E1E5"}}}};exports.default=r;exports.materialTheme=r;

package/dist/index.js

@@ -5,33 +5,21 @@ const r = {
     ...F.color,
     primary: {
       DEFAULT: "#6750A4",
-      // M3 Primary
       foreground: "#FFFFFF"
     },
     secondary: {
       DEFAULT: "#625B71",
-      // M3 Secondary
       foreground: "#FFFFFF"
     },
     accent: {
       DEFAULT: "#7D5260",
-      // M3 Tertiary
       neon: "#B3261E",
-      // M3 Error
       vivid: "#6750A4"
     },
-    success: {
-      DEFAULT: "#4CAF50"
-    },
-    warning: {
-      DEFAULT: "#FFC107"
-    },
-    error: {
-      DEFAULT: "#B3261E"
-    },
-    info: {
-      DEFAULT: "#2196F3"
-    },
+    success: { DEFAULT: "#4CAF50" },
+    warning: { DEFAULT: "#FFC107" },
+    error: { DEFAULT: "#B3261E" },
+    info: { DEFAULT: "#2196F3" },
     neutral: {
       0: "#FFFFFF",
       50: "#F7F2FA",
@@ -60,6 +48,7 @@ const r = {
     }
   },
   borderRadius: {
+    DEFAULT: "12px",
     none: "0px",
     xs: "4px",
     sm: "8px",
@@ -86,46 +75,40 @@ const r = {
       mono: '"Roboto Mono", monospace'
     }
   },
-  modes: {
-    dark: {
-      primary: {
-        DEFAULT: "#D0BCFF",
-        // M3 Dark Primary
-        foreground: "#381E72"
-      },
-      secondary: {
-        DEFAULT: "#CCC2DC",
-        // M3 Dark Secondary
-        foreground: "#332D41"
-      },
-      accent: {
-        DEFAULT: "#EFB8C8",
-        // M3 Dark Tertiary
-        neon: "#F2B8B5",
-        // M3 Dark Error
-        vivid: "#D0BCFF"
-      },
-      neutral: {
-        0: "#1C1B1F",
-        50: "#1C1B1F",
-        100: "#1D1B20",
-        200: "#313033",
-        300: "#49454F",
-        400: "#79747E",
-        500: "#938F99",
-        600: "#CAC4D0",
-        700: "#E6E1E5",
-        800: "#F3EDF7",
-        900: "#F7F2FA",
-        1e3: "#FFFFFF"
-      },
-      background: {
-        primary: "#1C1B1F",
-        secondary: "#1D1B20",
-        inverse: "#E6E1E5"
-      }
+  modes: { dark: {
+    primary: {
+      DEFAULT: "#D0BCFF",
+      foreground: "#381E72"
+    },
+    secondary: {
+      DEFAULT: "#CCC2DC",
+      foreground: "#332D41"
+    },
+    accent: {
+      DEFAULT: "#EFB8C8",
+      neon: "#F2B8B5",
+      vivid: "#D0BCFF"
+    },
+    neutral: {
+      0: "#1C1B1F",
+      50: "#1C1B1F",
+      100: "#1D1B20",
+      200: "#313033",
+      300: "#49454F",
+      400: "#79747E",
+      500: "#938F99",
+      600: "#CAC4D0",
+      700: "#E6E1E5",
+      800: "#F3EDF7",
+      900: "#F7F2FA",
+      1e3: "#FFFFFF"
+    },
+    background: {
+      primary: "#1C1B1F",
+      secondary: "#1D1B20",
+      inverse: "#E6E1E5"
     }
-  }
+  } }
 };
 export {
   r as default,

package/dist/{tokens.d.ts → theme-material/src/tokens.d.ts}

@@ -1,3 +1,3 @@
-import { DesignTokens } from '../../design/src';
+import { DesignTokens } from '../../sxo-design/src';
 export declare const materialTheme: DesignTokens;
 export default materialTheme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sxo/theme-material",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "description": "Material theme for SXO Design System.",
   "keywords": [
     "sxo",
@@ -27,7 +27,7 @@
     "dist"
   ],
   "dependencies": {
-    "@sxo/design": "0.0.0"
+    "@sxo/design": "0.0.1"
   },
   "repository": {
     "type": "git",
@@ -42,9 +42,9 @@
     "access": "public"
   },
   "devDependencies": {
-    "vite": "^5.0.0",
-    "vite-plugin-dts": "^4.0.0",
-    "typescript": "^5.0.0"
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4"
   },
   "scripts": {
     "build": "vite build",