@sxo/theme-material 0.0.1 → 0.1.1

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 (6) hide show
  1. package/README.md +44 -44
  2. package/dist/index.cjs +163 -1
  3. package/dist/index.js +64 -44
  4. package/package.json +6 -7
  5. package/dist/theme-material/src/index.d.ts +0 -2
  6. package/dist/theme-material/src/tokens.d.ts +0 -3
package/README.md CHANGED
@@ -1,44 +1,44 @@
1
- <div align="center">
2
- <h1>@sxo/theme-material</h1>
3
- <p><b>Material Design (M3) style theme for the SXO design system. A modern, tactile, and expressive aesthetic.</b></p>
4
-
5
- <p>
6
- <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>
7
- <img src="https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square" alt="license">
8
- <img src="https://img.shields.io/npm/dm/@sxo/theme-material.svg?style=flat-square" alt="downloads">
9
- </p>
10
- </div>
11
-
12
- ---
13
-
14
- `@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.
15
-
16
- ## ✨ Features
17
-
18
- - 📐 **M3 Specifications**: Follows the latest Material Design 3 guidelines.
19
- - 🎨 **Expressive Color**: Optimized for dynamic color schemes and high legibility.
20
- - 🏔️ **Elevation & Depth**: Signature use of shadows and surfaces to indicate hierarchy.
21
- - 🧩 **Universal**: Fully compatible with all SXO framework adaptors.
22
-
23
- ## 🚀 Quick Start
24
-
25
- ### Installation
26
-
27
- ```bash
28
- pnpm add @sxo/theme-material
29
- ```
30
-
31
- ### Usage (Vue 3 Example)
32
-
33
- ```typescript
34
- import { createSxo } from '@sxo/vue';
35
- import materialTheme from '@sxo/theme-material';
36
-
37
- app.use(createSxo({
38
- tokens: materialTheme
39
- }));
40
- ```
41
-
42
- ## 📄 License
43
-
44
- MIT License.
1
+ <div align="center">
2
+ <h1>@sxo/theme-material</h1>
3
+ <p><b>Material Design (M3) style theme for the SXO design system. A modern, tactile, and expressive aesthetic.</b></p>
4
+
5
+ <p>
6
+ <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>
7
+ <img src="https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square" alt="license">
8
+ <img src="https://img.shields.io/npm/dm/@sxo/theme-material.svg?style=flat-square" alt="downloads">
9
+ </p>
10
+ </div>
11
+
12
+ ---
13
+
14
+ `@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.
15
+
16
+ ## ✨ Features
17
+
18
+ - 📐 **M3 Specifications**: Follows the latest Material Design 3 guidelines.
19
+ - 🎨 **Expressive Color**: Optimized for dynamic color schemes and high legibility.
20
+ - 🏔️ **Elevation & Depth**: Signature use of shadows and surfaces to indicate hierarchy.
21
+ - 🧩 **Universal**: Fully compatible with all SXO framework adaptors.
22
+
23
+ ## 🚀 Quick Start
24
+
25
+ ### Installation
26
+
27
+ ```bash
28
+ pnpm add @sxo/theme-material
29
+ ```
30
+
31
+ ### Usage (Vue 3 Example)
32
+
33
+ ```typescript
34
+ import { createSxo } from '@sxo/plugin-vue';
35
+ import materialTheme from '@sxo/theme-material';
36
+
37
+ app.use(createSxo({
38
+ tokens: materialTheme
39
+ }));
40
+ ```
41
+
42
+ ## 📄 License
43
+
44
+ MIT License.
package/dist/index.cjs CHANGED
@@ -1 +1,163 @@
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:{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;
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __export = (target, all) => {
7
+ for (var name in all)
8
+ __defProp(target, name, { get: all[name], enumerable: true });
9
+ };
10
+ var __copyProps = (to, from, except, desc) => {
11
+ if (from && typeof from === "object" || typeof from === "function") {
12
+ for (let key of __getOwnPropNames(from))
13
+ if (!__hasOwnProp.call(to, key) && key !== except)
14
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
+ }
16
+ return to;
17
+ };
18
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
+
20
+ // src/index.ts
21
+ var index_exports = {};
22
+ __export(index_exports, {
23
+ default: () => tokens_default,
24
+ materialTheme: () => materialTheme
25
+ });
26
+ module.exports = __toCommonJS(index_exports);
27
+
28
+ // src/tokens.ts
29
+ var import_design = require("@sxo/design");
30
+ var materialTheme = {
31
+ ...import_design.defaultTokens,
32
+ color: {
33
+ ...import_design.defaultTokens.color,
34
+ primary: {
35
+ DEFAULT: "#6750A4",
36
+ // M3 Primary
37
+ foreground: "#FFFFFF"
38
+ },
39
+ secondary: {
40
+ DEFAULT: "#625B71",
41
+ // M3 Secondary
42
+ foreground: "#FFFFFF"
43
+ },
44
+ accent: {
45
+ DEFAULT: "#7D5260",
46
+ // M3 Tertiary
47
+ neon: "#B3261E",
48
+ // M3 Error
49
+ vivid: "#6750A4"
50
+ },
51
+ success: {
52
+ DEFAULT: "#4CAF50"
53
+ },
54
+ warning: {
55
+ DEFAULT: "#FFC107"
56
+ },
57
+ error: {
58
+ DEFAULT: "#B3261E"
59
+ },
60
+ info: {
61
+ DEFAULT: "#2196F3"
62
+ },
63
+ neutral: {
64
+ 0: "#FFFFFF",
65
+ 50: "#F7F2FA",
66
+ 100: "#F3EDF7",
67
+ 200: "#E6E1E5",
68
+ 300: "#CAC4D0",
69
+ 400: "#938F99",
70
+ 500: "#79747E",
71
+ 600: "#49454F",
72
+ 700: "#1D1B20",
73
+ 800: "#1C1B1F",
74
+ 900: "#19171A",
75
+ 950: "#000000",
76
+ 1e3: "#000000"
77
+ },
78
+ background: {
79
+ primary: "#FFFBFE",
80
+ secondary: "#F3EDF7",
81
+ inverse: "#313033"
82
+ },
83
+ text: {
84
+ primary: "#1C1B1F",
85
+ secondary: "#49454F",
86
+ muted: "#79747E",
87
+ inverse: "#F4EFF4"
88
+ }
89
+ },
90
+ borderRadius: {
91
+ DEFAULT: "12px",
92
+ none: "0px",
93
+ xs: "4px",
94
+ sm: "8px",
95
+ md: "12px",
96
+ lg: "16px",
97
+ full: "9999px",
98
+ xl: "12px"
99
+ },
100
+ boxShadow: {
101
+ none: "none",
102
+ sm: "0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15)",
103
+ DEFAULT: "0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15)",
104
+ md: "0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3)",
105
+ lg: "0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3)",
106
+ hard: "0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px rgba(0, 0, 0, 0.3)",
107
+ "hard-accent": "0px 8px 12px 6px rgba(103, 80, 164, 0.15), 0px 4px 4px rgba(103, 80, 164, 0.3)",
108
+ xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)"
109
+ },
110
+ typography: {
111
+ ...import_design.defaultTokens.typography,
112
+ fontFamily: {
113
+ sans: '"Roboto", "Segoe UI", Tahoma, sans-serif',
114
+ serif: '"Roboto Serif", Georgia, serif',
115
+ mono: '"Roboto Mono", monospace'
116
+ }
117
+ },
118
+ modes: {
119
+ dark: {
120
+ primary: {
121
+ DEFAULT: "#D0BCFF",
122
+ // M3 Dark Primary
123
+ foreground: "#381E72"
124
+ },
125
+ secondary: {
126
+ DEFAULT: "#CCC2DC",
127
+ // M3 Dark Secondary
128
+ foreground: "#332D41"
129
+ },
130
+ accent: {
131
+ DEFAULT: "#EFB8C8",
132
+ // M3 Dark Tertiary
133
+ neon: "#F2B8B5",
134
+ // M3 Dark Error
135
+ vivid: "#D0BCFF"
136
+ },
137
+ neutral: {
138
+ 0: "#1C1B1F",
139
+ 50: "#1C1B1F",
140
+ 100: "#1D1B20",
141
+ 200: "#313033",
142
+ 300: "#49454F",
143
+ 400: "#79747E",
144
+ 500: "#938F99",
145
+ 600: "#CAC4D0",
146
+ 700: "#E6E1E5",
147
+ 800: "#F3EDF7",
148
+ 900: "#F7F2FA",
149
+ 1e3: "#FFFFFF"
150
+ },
151
+ background: {
152
+ primary: "#1C1B1F",
153
+ secondary: "#1D1B20",
154
+ inverse: "#E6E1E5"
155
+ }
156
+ }
157
+ }
158
+ };
159
+ var tokens_default = materialTheme;
160
+ // Annotate the CommonJS export names for ESM import in node:
161
+ 0 && (module.exports = {
162
+ materialTheme
163
+ });
package/dist/index.js CHANGED
@@ -1,25 +1,38 @@
1
- import { defaultTokens as F } from "@sxo/design";
2
- const r = {
3
- ...F,
1
+ // src/tokens.ts
2
+ import { defaultTokens } from "@sxo/design";
3
+ var materialTheme = {
4
+ ...defaultTokens,
4
5
  color: {
5
- ...F.color,
6
+ ...defaultTokens.color,
6
7
  primary: {
7
8
  DEFAULT: "#6750A4",
9
+ // M3 Primary
8
10
  foreground: "#FFFFFF"
9
11
  },
10
12
  secondary: {
11
13
  DEFAULT: "#625B71",
14
+ // M3 Secondary
12
15
  foreground: "#FFFFFF"
13
16
  },
14
17
  accent: {
15
18
  DEFAULT: "#7D5260",
19
+ // M3 Tertiary
16
20
  neon: "#B3261E",
21
+ // M3 Error
17
22
  vivid: "#6750A4"
18
23
  },
19
- success: { DEFAULT: "#4CAF50" },
20
- warning: { DEFAULT: "#FFC107" },
21
- error: { DEFAULT: "#B3261E" },
22
- info: { DEFAULT: "#2196F3" },
24
+ success: {
25
+ DEFAULT: "#4CAF50"
26
+ },
27
+ warning: {
28
+ DEFAULT: "#FFC107"
29
+ },
30
+ error: {
31
+ DEFAULT: "#B3261E"
32
+ },
33
+ info: {
34
+ DEFAULT: "#2196F3"
35
+ },
23
36
  neutral: {
24
37
  0: "#FFFFFF",
25
38
  50: "#F7F2FA",
@@ -68,49 +81,56 @@ const r = {
68
81
  xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)"
69
82
  },
70
83
  typography: {
71
- ...F.typography,
84
+ ...defaultTokens.typography,
72
85
  fontFamily: {
73
86
  sans: '"Roboto", "Segoe UI", Tahoma, sans-serif',
74
87
  serif: '"Roboto Serif", Georgia, serif',
75
88
  mono: '"Roboto Mono", monospace'
76
89
  }
77
90
  },
78
- modes: { dark: {
79
- primary: {
80
- DEFAULT: "#D0BCFF",
81
- foreground: "#381E72"
82
- },
83
- secondary: {
84
- DEFAULT: "#CCC2DC",
85
- foreground: "#332D41"
86
- },
87
- accent: {
88
- DEFAULT: "#EFB8C8",
89
- neon: "#F2B8B5",
90
- vivid: "#D0BCFF"
91
- },
92
- neutral: {
93
- 0: "#1C1B1F",
94
- 50: "#1C1B1F",
95
- 100: "#1D1B20",
96
- 200: "#313033",
97
- 300: "#49454F",
98
- 400: "#79747E",
99
- 500: "#938F99",
100
- 600: "#CAC4D0",
101
- 700: "#E6E1E5",
102
- 800: "#F3EDF7",
103
- 900: "#F7F2FA",
104
- 1e3: "#FFFFFF"
105
- },
106
- background: {
107
- primary: "#1C1B1F",
108
- secondary: "#1D1B20",
109
- inverse: "#E6E1E5"
91
+ modes: {
92
+ dark: {
93
+ primary: {
94
+ DEFAULT: "#D0BCFF",
95
+ // M3 Dark Primary
96
+ foreground: "#381E72"
97
+ },
98
+ secondary: {
99
+ DEFAULT: "#CCC2DC",
100
+ // M3 Dark Secondary
101
+ foreground: "#332D41"
102
+ },
103
+ accent: {
104
+ DEFAULT: "#EFB8C8",
105
+ // M3 Dark Tertiary
106
+ neon: "#F2B8B5",
107
+ // M3 Dark Error
108
+ vivid: "#D0BCFF"
109
+ },
110
+ neutral: {
111
+ 0: "#1C1B1F",
112
+ 50: "#1C1B1F",
113
+ 100: "#1D1B20",
114
+ 200: "#313033",
115
+ 300: "#49454F",
116
+ 400: "#79747E",
117
+ 500: "#938F99",
118
+ 600: "#CAC4D0",
119
+ 700: "#E6E1E5",
120
+ 800: "#F3EDF7",
121
+ 900: "#F7F2FA",
122
+ 1e3: "#FFFFFF"
123
+ },
124
+ background: {
125
+ primary: "#1C1B1F",
126
+ secondary: "#1D1B20",
127
+ inverse: "#E6E1E5"
128
+ }
110
129
  }
111
- } }
130
+ }
112
131
  };
132
+ var tokens_default = materialTheme;
113
133
  export {
114
- r as default,
115
- r as materialTheme
134
+ tokens_default as default,
135
+ materialTheme
116
136
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sxo/theme-material",
3
- "version": "0.0.1",
3
+ "version": "0.1.1",
4
4
  "description": "Material theme for SXO Design System.",
5
5
  "keywords": [
6
6
  "sxo",
@@ -27,7 +27,7 @@
27
27
  "dist"
28
28
  ],
29
29
  "dependencies": {
30
- "@sxo/design": "0.0.1"
30
+ "@sxo/design": "0.1.1"
31
31
  },
32
32
  "repository": {
33
33
  "type": "git",
@@ -42,12 +42,11 @@
42
42
  "access": "public"
43
43
  },
44
44
  "devDependencies": {
45
- "typescript": "^5.9.3",
46
- "vite": "^7.3.1",
47
- "vite-plugin-dts": "^4.5.4"
45
+ "tsup": "^8.3.6",
46
+ "typescript": "^5.9.3"
48
47
  },
49
48
  "scripts": {
50
- "build": "vite build",
51
- "dev": "vite build --watch"
49
+ "build": "tsup src/index.ts --format cjs --format esm --dts",
50
+ "dev": "tsup src/index.ts --format cjs --format esm --dts --watch"
52
51
  }
53
52
  }
package/dist/theme-material/src/index.d.ts DELETED
@@ -1,2 +0,0 @@
1
- export * from './tokens.ts';
2
- export { default } from './tokens.ts';
package/dist/theme-material/src/tokens.d.ts DELETED
@@ -1,3 +0,0 @@
1
- import { DesignTokens } from '../../sxo-design/src';
2
- export declare const materialTheme: DesignTokens;
3
- export default materialTheme;