@sxo/theme-pornhub 0.0.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.
- package/README.md +36 -0
- package/dist/index.cjs +1 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +98 -0
- package/dist/tokens.d.ts +3 -0
- package/dist/tokens.js +66 -0
- package/package.json +53 -0
package/README.md
ADDED
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
# @sxo/theme-pornhub
|
|
2
|
+
|
|
3
|
+
SXO 设计系统的 Pornhub 风格主题。
|
|
4
|
+
|
|
5
|
+
## 安装
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
pnpm add @sxo/theme-pornhub @sxo/engine @sxo/design
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## 用法
|
|
12
|
+
|
|
13
|
+
配合 `vue-sxo` 或 `@sxo/engine` 使用：
|
|
14
|
+
|
|
15
|
+
```typescript
|
|
16
|
+
import { createSxo } from 'vue-sxo';
|
|
17
|
+
import pornhubTheme from '@sxo/theme-pornhub';
|
|
18
|
+
|
|
19
|
+
// 在 Vue 插件中使用
|
|
20
|
+
app.use(createSxo({
|
|
21
|
+
tokens: pornhubTheme
|
|
22
|
+
}));
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
或者直接在引擎中使用：
|
|
26
|
+
|
|
27
|
+
```typescript
|
|
28
|
+
import { StyleEngine } from '@sxo/engine';
|
|
29
|
+
import pornhubTheme from '@sxo/theme-pornhub';
|
|
30
|
+
|
|
31
|
+
const engine = new StyleEngine(pornhubTheme);
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
## 主题特色
|
|
35
|
+
- **经典配色**: 黑色背景搭配醒目的橙色 (#FF9900)。
|
|
36
|
+
- **高对比度**: 优化的文本可读性。
|
package/dist/index.cjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@sxo/design"),o={...e.defaultTokens,color:{...e.defaultTokens.color,primary:{DEFAULT:"#FF9900",foreground:"#000000"},secondary:{DEFAULT:"#1B1B1B",foreground:"#FFFFFF"},accent:{DEFAULT:"#FF9900",neon:"#FF9900",vivid:"#FFA31A"},neutral:{0:"#FFFFFF",50:"#F4F4F4",100:"#E0E0E0",200:"#B2B2B2",300:"#757575",400:"#424242",500:"#282828",600:"#1B1B1B",700:"#1A1A1A",800:"#111111",900:"#0A0A0A",950:"#050505",1e3:"#000000"},background:{primary:"#000000",secondary:"#1B1B1B",inverse:"#FFFFFF"},text:{primary:"#FFFFFF",secondary:"#E0E0E0",muted:"#757575",inverse:"#000000"}},modes:{dark:{background:{primary:"#000000",secondary:"#0a0a0a",inverse:"#ffffff"},neutral:{0:"#ffffff",900:"#1a1a1a",1e3:"#000000"}}},borderRadius:{none:"0px",xs:"2px",sm:"4px",md:"8px",lg:"12px",full:"9999px",xl:"12px"},boxShadow:{...e.defaultTokens.boxShadow,none:"none",sm:"none",DEFAULT:"none",md:"none",lg:"none",hard:"0 0 0 1px #1A1A1A","hard-accent":"0 0 0 1px #FF9900",xl:"0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)"},typography:{...e.defaultTokens.typography,fontFamily:{sans:"Arial, Helvetica, sans-serif",serif:"Georgia, serif",mono:"monospace"}}};exports.default=o;exports.pornhubTheme=o;
|
package/dist/index.d.ts
ADDED
package/dist/index.js
ADDED
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
import { defaultTokens as e } from "@sxo/design";
|
|
2
|
+
const o = {
|
|
3
|
+
...e,
|
|
4
|
+
color: {
|
|
5
|
+
...e.color,
|
|
6
|
+
primary: {
|
|
7
|
+
DEFAULT: "#FF9900",
|
|
8
|
+
// PornHub Brand Orange
|
|
9
|
+
foreground: "#000000"
|
|
10
|
+
},
|
|
11
|
+
secondary: {
|
|
12
|
+
DEFAULT: "#1B1B1B",
|
|
13
|
+
// PornHub Container Background
|
|
14
|
+
foreground: "#FFFFFF"
|
|
15
|
+
},
|
|
16
|
+
accent: {
|
|
17
|
+
DEFAULT: "#FF9900",
|
|
18
|
+
neon: "#FF9900",
|
|
19
|
+
vivid: "#FFA31A"
|
|
20
|
+
},
|
|
21
|
+
neutral: {
|
|
22
|
+
0: "#FFFFFF",
|
|
23
|
+
50: "#F4F4F4",
|
|
24
|
+
100: "#E0E0E0",
|
|
25
|
+
200: "#B2B2B2",
|
|
26
|
+
300: "#757575",
|
|
27
|
+
400: "#424242",
|
|
28
|
+
500: "#282828",
|
|
29
|
+
600: "#1B1B1B",
|
|
30
|
+
700: "#1A1A1A",
|
|
31
|
+
800: "#111111",
|
|
32
|
+
900: "#0A0A0A",
|
|
33
|
+
950: "#050505",
|
|
34
|
+
1e3: "#000000"
|
|
35
|
+
},
|
|
36
|
+
background: {
|
|
37
|
+
primary: "#000000",
|
|
38
|
+
// Main Background
|
|
39
|
+
secondary: "#1B1B1B",
|
|
40
|
+
// Container Background
|
|
41
|
+
inverse: "#FFFFFF"
|
|
42
|
+
},
|
|
43
|
+
text: {
|
|
44
|
+
primary: "#FFFFFF",
|
|
45
|
+
secondary: "#E0E0E0",
|
|
46
|
+
muted: "#757575",
|
|
47
|
+
inverse: "#000000"
|
|
48
|
+
}
|
|
49
|
+
},
|
|
50
|
+
modes: {
|
|
51
|
+
dark: {
|
|
52
|
+
background: {
|
|
53
|
+
primary: "#000000",
|
|
54
|
+
secondary: "#0a0a0a",
|
|
55
|
+
inverse: "#ffffff"
|
|
56
|
+
},
|
|
57
|
+
neutral: {
|
|
58
|
+
0: "#ffffff",
|
|
59
|
+
900: "#1a1a1a",
|
|
60
|
+
1e3: "#000000"
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
borderRadius: {
|
|
65
|
+
none: "0px",
|
|
66
|
+
xs: "2px",
|
|
67
|
+
sm: "4px",
|
|
68
|
+
// Standard Hub Radius
|
|
69
|
+
md: "8px",
|
|
70
|
+
lg: "12px",
|
|
71
|
+
full: "9999px",
|
|
72
|
+
xl: "12px"
|
|
73
|
+
},
|
|
74
|
+
boxShadow: {
|
|
75
|
+
...e.boxShadow,
|
|
76
|
+
none: "none",
|
|
77
|
+
sm: "none",
|
|
78
|
+
DEFAULT: "none",
|
|
79
|
+
md: "none",
|
|
80
|
+
lg: "none",
|
|
81
|
+
hard: "0 0 0 1px #1A1A1A",
|
|
82
|
+
"hard-accent": "0 0 0 1px #FF9900",
|
|
83
|
+
xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)"
|
|
84
|
+
},
|
|
85
|
+
typography: {
|
|
86
|
+
...e.typography,
|
|
87
|
+
fontFamily: {
|
|
88
|
+
sans: "Arial, Helvetica, sans-serif",
|
|
89
|
+
// Clean, professional sans-serif
|
|
90
|
+
serif: "Georgia, serif",
|
|
91
|
+
mono: "monospace"
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
};
|
|
95
|
+
export {
|
|
96
|
+
o as default,
|
|
97
|
+
o as pornhubTheme
|
|
98
|
+
};
|
package/dist/tokens.d.ts
ADDED
package/dist/tokens.js
ADDED
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import { defaultTokens } from '@sxo/design';
|
|
2
|
+
export const pornhubTheme = {
|
|
3
|
+
...defaultTokens,
|
|
4
|
+
color: {
|
|
5
|
+
...defaultTokens.color,
|
|
6
|
+
primary: {
|
|
7
|
+
DEFAULT: '#FF9900', // PornHub Brand Orange
|
|
8
|
+
foreground: '#000000',
|
|
9
|
+
},
|
|
10
|
+
secondary: {
|
|
11
|
+
DEFAULT: '#1B1B1B', // PornHub Container Background
|
|
12
|
+
foreground: '#FFFFFF',
|
|
13
|
+
},
|
|
14
|
+
accent: {
|
|
15
|
+
DEFAULT: '#FF9900',
|
|
16
|
+
neon: '#FF9900',
|
|
17
|
+
vivid: '#FFA31A',
|
|
18
|
+
},
|
|
19
|
+
neutral: {
|
|
20
|
+
0: '#FFFFFF',
|
|
21
|
+
50: '#F4F4F4',
|
|
22
|
+
100: '#E0E0E0',
|
|
23
|
+
200: '#B2B2B2',
|
|
24
|
+
300: '#757575',
|
|
25
|
+
400: '#424242',
|
|
26
|
+
500: '#282828',
|
|
27
|
+
600: '#1B1B1B',
|
|
28
|
+
700: '#1A1A1A',
|
|
29
|
+
800: '#111111',
|
|
30
|
+
900: '#0A0A0A',
|
|
31
|
+
950: '#050505',
|
|
32
|
+
1000: '#000000',
|
|
33
|
+
},
|
|
34
|
+
background: {
|
|
35
|
+
primary: '#000000', // Main Background
|
|
36
|
+
secondary: '#1B1B1B', // Container Background
|
|
37
|
+
inverse: '#FFFFFF',
|
|
38
|
+
},
|
|
39
|
+
},
|
|
40
|
+
borderRadius: {
|
|
41
|
+
none: '0px',
|
|
42
|
+
xs: '2px',
|
|
43
|
+
sm: '4px', // Standard Hub Radius
|
|
44
|
+
md: '8px',
|
|
45
|
+
lg: '12px',
|
|
46
|
+
full: '9999px',
|
|
47
|
+
},
|
|
48
|
+
boxShadow: {
|
|
49
|
+
...defaultTokens.boxShadow,
|
|
50
|
+
sm: 'none',
|
|
51
|
+
DEFAULT: 'none',
|
|
52
|
+
md: 'none',
|
|
53
|
+
lg: 'none',
|
|
54
|
+
hard: '0 0 0 1px #1A1A1A',
|
|
55
|
+
'hard-accent': '0 0 0 1px #FF9900',
|
|
56
|
+
},
|
|
57
|
+
typography: {
|
|
58
|
+
...defaultTokens.typography,
|
|
59
|
+
fontFamily: {
|
|
60
|
+
sans: 'Arial, Helvetica, sans-serif', // Clean, professional sans-serif
|
|
61
|
+
serif: 'Georgia, serif',
|
|
62
|
+
mono: 'monospace',
|
|
63
|
+
},
|
|
64
|
+
},
|
|
65
|
+
};
|
|
66
|
+
export default pornhubTheme;
|
package/package.json
ADDED
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@sxo/theme-pornhub",
|
|
3
|
+
"version": "0.0.0",
|
|
4
|
+
"description": "Pornhub theme for SXO Design System.",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"sxo",
|
|
7
|
+
"design-system",
|
|
8
|
+
"ui",
|
|
9
|
+
"components",
|
|
10
|
+
"theme",
|
|
11
|
+
"pornhub"
|
|
12
|
+
],
|
|
13
|
+
"license": "MIT",
|
|
14
|
+
"author": "sxo team",
|
|
15
|
+
"type": "module",
|
|
16
|
+
"main": "./dist/index.cjs",
|
|
17
|
+
"module": "./dist/index.js",
|
|
18
|
+
"types": "./dist/index.d.ts",
|
|
19
|
+
"exports": {
|
|
20
|
+
".": {
|
|
21
|
+
"types": "./dist/index.d.ts",
|
|
22
|
+
"import": "./dist/index.js",
|
|
23
|
+
"require": "./dist/index.cjs"
|
|
24
|
+
}
|
|
25
|
+
},
|
|
26
|
+
"files": [
|
|
27
|
+
"dist"
|
|
28
|
+
],
|
|
29
|
+
"dependencies": {
|
|
30
|
+
"@sxo/design": "0.0.0"
|
|
31
|
+
},
|
|
32
|
+
"repository": {
|
|
33
|
+
"type": "git",
|
|
34
|
+
"url": "git+https://github.com/doki-land/sxo-engine.git",
|
|
35
|
+
"directory": "packages/theme-pornhub"
|
|
36
|
+
},
|
|
37
|
+
"bugs": {
|
|
38
|
+
"url": "https://github.com/doki-land/sxo-engine/issues"
|
|
39
|
+
},
|
|
40
|
+
"homepage": "https://github.com/doki-land/sxo-engine/tree/main/packages/theme-pornhub#readme",
|
|
41
|
+
"publishConfig": {
|
|
42
|
+
"access": "public"
|
|
43
|
+
},
|
|
44
|
+
"devDependencies": {
|
|
45
|
+
"vite": "^5.0.0",
|
|
46
|
+
"vite-plugin-dts": "^4.0.0",
|
|
47
|
+
"typescript": "^5.0.0"
|
|
48
|
+
},
|
|
49
|
+
"scripts": {
|
|
50
|
+
"build": "vite build",
|
|
51
|
+
"dev": "vite build --watch"
|
|
52
|
+
}
|
|
53
|
+
}
|