@luokuiai/lumen-theme-paper 1.0.0-alpha.2

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 (3) hide show
  1. package/README.md +19 -0
  2. package/package.json +22 -0
  3. package/paper.css +136 -0
package/README.md ADDED
@@ -0,0 +1,19 @@
1
+ # Paper Theme
2
+
3
+ A monochrome, AI-focused theme for Lumen UI with canvas-like surfaces,
4
+ high-contrast actions, role-based radii, tabular numerals, and restrained
5
+ elevation.
6
+
7
+ ```ts
8
+ import '@luokuiai/lumen-ui/styles.css';
9
+ import '@luokuiai/lumen-theme-paper';
10
+ ```
11
+
12
+ Apply the theme and choose a color scheme on an application root:
13
+
14
+ ```html
15
+ <div data-lumen-theme="paper" data-color-scheme="light"></div>
16
+ ```
17
+
18
+ Both `light` and `dark` color schemes are included. Change
19
+ `data-color-scheme` at runtime to switch between them.
package/package.json ADDED
@@ -0,0 +1,22 @@
1
+ {
2
+ "name": "@luokuiai/lumen-theme-paper",
3
+ "version": "1.0.0-alpha.2",
4
+ "description": "Paper theme for Lumen UI",
5
+ "type": "module",
6
+ "repository": {
7
+ "type": "git",
8
+ "url": "git+https://github.com/luokuiai/lumen-design.git"
9
+ },
10
+ "publishConfig": {
11
+ "access": "public"
12
+ },
13
+ "sideEffects": true,
14
+ "files": ["paper.css", "README.md"],
15
+ "exports": {
16
+ ".": "./paper.css",
17
+ "./paper.css": "./paper.css"
18
+ },
19
+ "peerDependencies": {
20
+ "@luokuiai/lumen-ui": "^1.0.0-alpha.2"
21
+ }
22
+ }
package/paper.css ADDED
@@ -0,0 +1,136 @@
1
+ [data-lumen-theme='paper'] {
2
+ color-scheme: light;
3
+ font-variant-numeric: tabular-nums;
4
+ letter-spacing: 0;
5
+ --lumen-font-family: Geist, 'Geist Sans', Inter, 'SF Pro Text', 'PingFang SC', 'Microsoft YaHei UI', sans-serif;
6
+ --lumen-font-weight-normal: 400;
7
+ --lumen-font-weight-medium: 500;
8
+ --lumen-font-weight-strong: 600;
9
+ --lumen-color-primary: #111111;
10
+ --lumen-color-primary-hover: #292929;
11
+ --lumen-color-primary-active: #000000;
12
+ --lumen-color-primary-soft: #eeeeee;
13
+ --lumen-color-primary-soft-hover: #e4e4e4;
14
+ --lumen-color-on-primary: #ffffff;
15
+ --lumen-color-text-strong: #090909;
16
+ --lumen-color-text: #202020;
17
+ --lumen-color-text-secondary: #494949;
18
+ --lumen-color-text-muted: #717171;
19
+ --lumen-color-text-placeholder: #9a9a9a;
20
+ --lumen-color-surface: #ffffff;
21
+ --lumen-color-surface-muted: #f5f5f5;
22
+ --lumen-color-surface-subtle: #fafafa;
23
+ --lumen-color-surface-hover: #eeeeee;
24
+ --lumen-color-surface-glass: rgba(255, 255, 255, 0.94);
25
+ --lumen-color-overlay: rgba(0, 0, 0, 0.48);
26
+ --lumen-color-border: #e1e1e1;
27
+ --lumen-color-border-strong: #c8c8c8;
28
+ --lumen-color-border-hover: #a8a8a8;
29
+ --lumen-color-focus-ring: rgba(17, 17, 17, 0.2);
30
+ --lumen-color-danger: #a33e35;
31
+ --lumen-color-danger-hover: #873129;
32
+ --lumen-color-danger-soft: #f7ebe7;
33
+ --lumen-color-danger-border: #e4c4bc;
34
+ --lumen-color-danger-text: #792d27;
35
+ --lumen-color-success: #4c7450;
36
+ --lumen-color-success-soft: #edf3eb;
37
+ --lumen-color-success-border: #cadbc7;
38
+ --lumen-color-success-text: #36583b;
39
+ --lumen-color-warning: #a66b20;
40
+ --lumen-color-warning-soft: #fbf2df;
41
+ --lumen-color-warning-border: #ead6ac;
42
+ --lumen-color-warning-text: #7b4d17;
43
+ --lumen-color-info: #416b7d;
44
+ --lumen-color-info-soft: #eaf1f3;
45
+ --lumen-color-info-border: #c5d7dc;
46
+ --lumen-color-info-text: #315767;
47
+ --lumen-color-tooltip: #111111;
48
+ --lumen-color-tooltip-text: #ffffff;
49
+ --lumen-color-shadow: rgba(0, 0, 0, 0.13);
50
+ --lumen-radius-tag: 6px;
51
+ --lumen-radius-control: 6px;
52
+ --lumen-radius-icon: 6px;
53
+ --lumen-radius-card: 6px;
54
+ --lumen-radius-modal: 12px;
55
+ --lumen-radius-pill: 9999px;
56
+ --lumen-shadow-control: 0 1px 2px rgba(0, 0, 0, 0.04);
57
+ --lumen-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
58
+ --lumen-shadow-dropdown: 0 12px 32px rgba(0, 0, 0, 0.12);
59
+ --lumen-shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.2);
60
+ --lumen-control-height-sm: 32px;
61
+ --lumen-control-height-md: 36px;
62
+ --lumen-control-height-lg: 40px;
63
+ --lumen-motion-duration-fast: 120ms;
64
+ --lumen-motion-duration-normal: 200ms;
65
+ --lumen-motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
66
+ --lumen-motion-ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
67
+ --lumen-motion-ease-exit: cubic-bezier(0.4, 0, 1, 1);
68
+ }
69
+
70
+ [data-lumen-theme='paper'][data-color-scheme='dark'] {
71
+ color-scheme: dark;
72
+ --lumen-color-primary: #f2f2f2;
73
+ --lumen-color-primary-hover: #ffffff;
74
+ --lumen-color-primary-active: #d8d8d8;
75
+ --lumen-color-primary-soft: rgba(255, 255, 255, 0.1);
76
+ --lumen-color-primary-soft-hover: rgba(255, 255, 255, 0.16);
77
+ --lumen-color-on-primary: #0a0a0a;
78
+ --lumen-color-text-strong: #fafafa;
79
+ --lumen-color-text: #e5e5e5;
80
+ --lumen-color-text-secondary: #b8b8b8;
81
+ --lumen-color-text-muted: #8f8f8f;
82
+ --lumen-color-text-placeholder: #626262;
83
+ --lumen-color-surface: #101010;
84
+ --lumen-color-surface-muted: #191919;
85
+ --lumen-color-surface-subtle: #141414;
86
+ --lumen-color-surface-hover: #232323;
87
+ --lumen-color-surface-glass: rgba(16, 16, 16, 0.94);
88
+ --lumen-color-overlay: rgba(0, 0, 0, 0.72);
89
+ --lumen-color-border: #303030;
90
+ --lumen-color-border-strong: #464646;
91
+ --lumen-color-border-hover: #5e5e5e;
92
+ --lumen-color-focus-ring: rgba(255, 255, 255, 0.28);
93
+ --lumen-color-danger: #df8074;
94
+ --lumen-color-danger-hover: #eda096;
95
+ --lumen-color-danger-soft: rgba(223, 128, 116, 0.14);
96
+ --lumen-color-danger-border: rgba(223, 128, 116, 0.32);
97
+ --lumen-color-danger-text: #eda096;
98
+ --lumen-color-success: #91bd8f;
99
+ --lumen-color-success-soft: rgba(145, 189, 143, 0.14);
100
+ --lumen-color-success-border: rgba(145, 189, 143, 0.3);
101
+ --lumen-color-success-text: #afd0ac;
102
+ --lumen-color-warning: #d9aa62;
103
+ --lumen-color-warning-soft: rgba(217, 170, 98, 0.14);
104
+ --lumen-color-warning-border: rgba(217, 170, 98, 0.3);
105
+ --lumen-color-warning-text: #e7c287;
106
+ --lumen-color-info: #8eb8c7;
107
+ --lumen-color-info-soft: rgba(142, 184, 199, 0.14);
108
+ --lumen-color-info-border: rgba(142, 184, 199, 0.3);
109
+ --lumen-color-info-text: #afd0da;
110
+ --lumen-color-tooltip: #f3f3f3;
111
+ --lumen-color-tooltip-text: #111111;
112
+ --lumen-color-shadow: rgba(0, 0, 0, 0.36);
113
+ --lumen-shadow-control: 0 1px 2px rgba(0, 0, 0, 0.28);
114
+ --lumen-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2);
115
+ --lumen-shadow-dropdown: 0 12px 32px rgba(0, 0, 0, 0.44);
116
+ --lumen-shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.58);
117
+ }
118
+
119
+ [data-lumen-theme='paper'] [data-ui='card'] {
120
+ border-color: var(--lumen-color-border);
121
+ background-clip: padding-box;
122
+ box-shadow: var(--lumen-shadow-card);
123
+ }
124
+
125
+ [data-lumen-theme='paper'] [data-ui='chip'] {
126
+ border-radius: var(--lumen-radius-tag);
127
+ }
128
+
129
+ [data-lumen-theme='paper'] [data-ui='side-nav'] button {
130
+ border-radius: var(--lumen-radius-control);
131
+ }
132
+
133
+ [data-lumen-theme='paper'] [data-ui='popover'] {
134
+ border-radius: var(--lumen-radius-modal);
135
+ background-clip: padding-box;
136
+ }