@roku-ui/preset 0.13.1 → 0.14.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/dist/index.cjs CHANGED
@@ -13,139 +13,8 @@ const colors = colorKeys.reduce((colors, key) => {
13
13
  pre[i] = cur;
14
14
  return pre;
15
15
  }, {});
16
- if (key === 'surface') {
17
- ['lowest', 'low', 'base', 'high', 'highest', 'on', 'border'].forEach((k) => {
18
- if (k === 'border') {
19
- colors[key][k] = {
20
- base: `rgb(var(--r-color-${key}-${k}-base))`,
21
- low: `rgb(var(--r-color-${key}-${k}-low))`,
22
- high: `rgb(var(--r-color-${key}-${k}-high))`,
23
- };
24
- }
25
- else if (k === 'on') {
26
- colors[key][k] = {
27
- DEFAULT: `rgb(var(--r-color-${key}-${k}))`,
28
- low: `rgb(var(--r-color-${key}-${k}-low))`,
29
- container: {
30
- DEFAULT: `rgb(var(--r-color-${key}-${k}-container))`,
31
- low: `rgb(var(--r-color-${key}-${k}-container-low))`,
32
- },
33
- };
34
- }
35
- else if (k === 'border') {
36
- colors[key][k] = {
37
- DEFAULT: `rgb(var(--r-color-${key}-${k}-base))`,
38
- base: `rgb(var(--r-color-${key}-${k}-base))`,
39
- low: `rgb(var(--r-color-${key}-${k}-low))`,
40
- high: `rgb(var(--r-color-${key}-${k}-high))`,
41
- };
42
- }
43
- else {
44
- colors[key][k] = `rgb(var(--r-color-${key}-${k}))`;
45
- }
46
- });
47
- }
48
- else {
49
- ['container', 'containerd', 'containerl', 'on', 'border'].forEach((k) => {
50
- colors[key][k] = `rgb(var(--r-color-${key}-${k}))`;
51
- if (k === 'on') {
52
- colors[key][k] = {
53
- DEFAULT: `rgb(var(--r-color-${key}-${k}))`,
54
- low: `rgb(var(--r-color-${key}-${k}-low))`,
55
- container: {
56
- DEFAULT: `rgb(var(--r-color-${key}-${k}-container))`,
57
- low: `rgb(var(--r-color-${key}-${k}-container-low))`,
58
- },
59
- };
60
- }
61
- });
62
- }
63
16
  return colors;
64
17
  }, {});
65
- const shortcuts = colorKeys.filter(d => d !== 'surface').reduce((shortcuts, color) => {
66
- shortcuts[`container-filled-${color}`] = `bg-${color}-container border-${color}-container border`;
67
- shortcuts[`container-light-${color}`] = `bg-${color}-container/10 border-${color}-container border-transparent`;
68
- shortcuts[`container-outline-${color}`] = `border-${color}-container border text-${color}-container`;
69
- shortcuts[`container-subtle-${color}`] = `bg-${color}-container/0 border-${color}-container border-transparent`;
70
- shortcuts[`container-transparent-${color}`] = `bg-transparent text-${color}-container border-transparent border-${color}-container`;
71
- shortcuts[`container-contrast-${color}`] = `text-${color}-container border-${color}-container border-transparent`;
72
- shortcuts[`btn-filled-${color}`] = `container-filled-${color} enabled:hover:bg-${color}-containerd enabled:hover:border-${color}-containerd text-${color}-on-container focus-visible:outline-2 outline-offset-2 focus-visible:outline-${color}-container outline-none`;
73
- shortcuts[`btn-light-${color}`] = `container-light-${color} enabled:hover:bg-${color}-6/25 text-${color}-container focus-visible:outline-2 outline-offset-2 focus-visible:outline-${color}-container outline-none`;
74
- shortcuts[`btn-outline-${color}`] = `container-outline-${color} enabled:hover:bg-${color}-container/10 text-${color}-container focus-visible:outline-2 outline-offset-2 focus-visible:outline-${color}-container outline-none`;
75
- shortcuts[`btn-subtle-${color}`] = `container-subtle-${color} enabled:hover:bg-${color}-container/10 text-${color}-container focus-visible:outline-2 outline-offset-2 focus-visible:outline-${color}-container outline-none`;
76
- shortcuts[`btn-transparent-${color}`] = `container-transparent-${color} hover:text-${color}-containerl focus-visible:outline-2 outline-offset-2 focus-visible:outline-${color}-container outline-none`;
77
- shortcuts[`btn-contrast-${color}`] = `container-contrast-${color} hover:text-surface-base enabled:hover:bg-${color}-container focus-visible:outline-2 outline-offset-2 focus-visible:outline-${color}-container outline-none`;
78
- return shortcuts;
79
- }, {});
80
- const themeShortCuts = {
81
- 'theme-default': [
82
- 'border dark:bg-[var(--d-surface-high)] light:bg-[var(--l-surface-high)] dark:border-[var(--d-surface-border)] light:border-[var(--l-surface-border)]',
83
- ],
84
- 'theme-filled': [
85
- 'border',
86
- 'border-transparent',
87
- 'dark:bg-[var(--d-fill)]',
88
- 'dark:text-[var(--d-on-fill)]',
89
- 'light:bg-[var(--l-fill)]',
90
- 'light:text-[var(--l-on-fill)]',
91
- ],
92
- 'theme-filled-hoverable': [
93
- 'theme-filled',
94
- 'hover:dark:bg-[var(--d-fill-h)]',
95
- 'hover:light:bg-[var(--l-fill-h)]',
96
- ],
97
- 'theme-outline': [
98
- 'border',
99
- 'dark:border-[var(--d-text)]',
100
- 'dark:text-[var(--d-text)]',
101
- 'light:border-[var(--l-text)]',
102
- 'light:text-[var(--l-text)]',
103
- ],
104
- 'theme-outline-hoverable': [
105
- 'theme-outline',
106
- 'hover:dark:bg-[var(--d-fill-t)]',
107
- 'hover:light:bg-[var(--l-fill-t)]',
108
- ],
109
- 'theme-light': [
110
- 'border',
111
- 'border-transparent',
112
- 'dark:bg-[var(--d-fill-t)]',
113
- 'dark:text-[var(--d-text)]',
114
- 'light:bg-[var(--l-fill-t)]',
115
- 'light:text-[var(--l-text)]',
116
- ],
117
- 'theme-light-hoverable': [
118
- 'theme-light',
119
- 'hover:dark:bg-[var(--d-fill-t-h)]',
120
- 'hover:light:bg-[var(--l-fill-t-h)]',
121
- ],
122
- 'theme-transparent': [
123
- 'border',
124
- 'border-transparent',
125
- 'bg-transparent',
126
- 'dark:text-[var(--d-text)]',
127
- 'light:text-[var(--l-text)]',
128
- ],
129
- 'theme-subtle': [
130
- 'theme-transparent',
131
- 'hover:dark:bg-[var(--d-fill-t)]',
132
- 'hover:light:bg-[var(--l-fill-t)]',
133
- ],
134
- 'theme-contrast': [
135
- 'theme-transparent',
136
- 'hover:dark:bg-[var(--d-fill)]',
137
- 'hover:light:bg-[var(--l-fill)]',
138
- 'hover:dark:text-[var(--d-on-fill)]',
139
- 'hover:light:text-[var(--l-on-fill)]',
140
- ],
141
- 'theme-white': [
142
- 'border',
143
- 'border-transparent',
144
- 'bg-white',
145
- 'dark:text-[var(--d-text)]',
146
- 'light:text-[var(--l-text)]',
147
- ],
148
- };
149
18
  const rokuPreset = (options = {}) => () => {
150
19
  let file = '';
151
20
  try {
@@ -161,12 +30,8 @@ const rokuPreset = (options = {}) => () => {
161
30
  },
162
31
  safelist: ['rounded-[var(--r-rounded)]'],
163
32
  shortcuts: {
164
- ...shortcuts,
165
- ...themeShortCuts,
166
- 'container-low': 'bg-surface-low border-surface-border-low border text-surface-on',
167
- 'container-base': 'bg-surface-base border-surface-border-base border text-surface-on',
168
- 'container-high': 'bg-surface-high border-surface-border-high border text-surface-on',
169
- 'btn-default': 'container-base enabled:hover:bg-surface-border-base focus-visible:outline-2 outline-offset-2 focus-visible:outline-surface-border-base outline-none',
33
+ 'custom-colors': 'border dark:text-[var(--d-text)] text-[var(--l-text)] dark:bg-[var(--d-bg)] bg-[var(--l-bg)] dark:border-[var(--d-border)] border-[var(--l-border)] dark:hover:bg-[var(--d-bg-h)] hover:bg-[var(--l-bg-h)] hover:text-[var(--l-text-h)] dark:hover:text-[var(--d-text-h)]',
34
+ 'custom-input-colors': 'border bg-[var(--l-bg)] dark:bg-[var(--d-bg)] text-[var(--l-text)] dark:text-[var(--d-text)] placeholder-[var(--l-placeholder)] dark:placeholder-[var(--d-placeholder)] border-[var(--l-border)] dark:border-[var(--d-border)] focus:border-[var(--l-border-f)] dark:focus:border-[var(--d-border-f)]',
170
35
  },
171
36
  presets: [
172
37
  unocss.presetUno({
package/dist/index.mjs CHANGED
@@ -11,139 +11,8 @@ const colors = colorKeys.reduce((colors, key) => {
11
11
  pre[i] = cur;
12
12
  return pre;
13
13
  }, {});
14
- if (key === 'surface') {
15
- ['lowest', 'low', 'base', 'high', 'highest', 'on', 'border'].forEach((k) => {
16
- if (k === 'border') {
17
- colors[key][k] = {
18
- base: `rgb(var(--r-color-${key}-${k}-base))`,
19
- low: `rgb(var(--r-color-${key}-${k}-low))`,
20
- high: `rgb(var(--r-color-${key}-${k}-high))`,
21
- };
22
- }
23
- else if (k === 'on') {
24
- colors[key][k] = {
25
- DEFAULT: `rgb(var(--r-color-${key}-${k}))`,
26
- low: `rgb(var(--r-color-${key}-${k}-low))`,
27
- container: {
28
- DEFAULT: `rgb(var(--r-color-${key}-${k}-container))`,
29
- low: `rgb(var(--r-color-${key}-${k}-container-low))`,
30
- },
31
- };
32
- }
33
- else if (k === 'border') {
34
- colors[key][k] = {
35
- DEFAULT: `rgb(var(--r-color-${key}-${k}-base))`,
36
- base: `rgb(var(--r-color-${key}-${k}-base))`,
37
- low: `rgb(var(--r-color-${key}-${k}-low))`,
38
- high: `rgb(var(--r-color-${key}-${k}-high))`,
39
- };
40
- }
41
- else {
42
- colors[key][k] = `rgb(var(--r-color-${key}-${k}))`;
43
- }
44
- });
45
- }
46
- else {
47
- ['container', 'containerd', 'containerl', 'on', 'border'].forEach((k) => {
48
- colors[key][k] = `rgb(var(--r-color-${key}-${k}))`;
49
- if (k === 'on') {
50
- colors[key][k] = {
51
- DEFAULT: `rgb(var(--r-color-${key}-${k}))`,
52
- low: `rgb(var(--r-color-${key}-${k}-low))`,
53
- container: {
54
- DEFAULT: `rgb(var(--r-color-${key}-${k}-container))`,
55
- low: `rgb(var(--r-color-${key}-${k}-container-low))`,
56
- },
57
- };
58
- }
59
- });
60
- }
61
14
  return colors;
62
15
  }, {});
63
- const shortcuts = colorKeys.filter(d => d !== 'surface').reduce((shortcuts, color) => {
64
- shortcuts[`container-filled-${color}`] = `bg-${color}-container border-${color}-container border`;
65
- shortcuts[`container-light-${color}`] = `bg-${color}-container/10 border-${color}-container border-transparent`;
66
- shortcuts[`container-outline-${color}`] = `border-${color}-container border text-${color}-container`;
67
- shortcuts[`container-subtle-${color}`] = `bg-${color}-container/0 border-${color}-container border-transparent`;
68
- shortcuts[`container-transparent-${color}`] = `bg-transparent text-${color}-container border-transparent border-${color}-container`;
69
- shortcuts[`container-contrast-${color}`] = `text-${color}-container border-${color}-container border-transparent`;
70
- shortcuts[`btn-filled-${color}`] = `container-filled-${color} enabled:hover:bg-${color}-containerd enabled:hover:border-${color}-containerd text-${color}-on-container focus-visible:outline-2 outline-offset-2 focus-visible:outline-${color}-container outline-none`;
71
- shortcuts[`btn-light-${color}`] = `container-light-${color} enabled:hover:bg-${color}-6/25 text-${color}-container focus-visible:outline-2 outline-offset-2 focus-visible:outline-${color}-container outline-none`;
72
- shortcuts[`btn-outline-${color}`] = `container-outline-${color} enabled:hover:bg-${color}-container/10 text-${color}-container focus-visible:outline-2 outline-offset-2 focus-visible:outline-${color}-container outline-none`;
73
- shortcuts[`btn-subtle-${color}`] = `container-subtle-${color} enabled:hover:bg-${color}-container/10 text-${color}-container focus-visible:outline-2 outline-offset-2 focus-visible:outline-${color}-container outline-none`;
74
- shortcuts[`btn-transparent-${color}`] = `container-transparent-${color} hover:text-${color}-containerl focus-visible:outline-2 outline-offset-2 focus-visible:outline-${color}-container outline-none`;
75
- shortcuts[`btn-contrast-${color}`] = `container-contrast-${color} hover:text-surface-base enabled:hover:bg-${color}-container focus-visible:outline-2 outline-offset-2 focus-visible:outline-${color}-container outline-none`;
76
- return shortcuts;
77
- }, {});
78
- const themeShortCuts = {
79
- 'theme-default': [
80
- 'border dark:bg-[var(--d-surface-high)] light:bg-[var(--l-surface-high)] dark:border-[var(--d-surface-border)] light:border-[var(--l-surface-border)]',
81
- ],
82
- 'theme-filled': [
83
- 'border',
84
- 'border-transparent',
85
- 'dark:bg-[var(--d-fill)]',
86
- 'dark:text-[var(--d-on-fill)]',
87
- 'light:bg-[var(--l-fill)]',
88
- 'light:text-[var(--l-on-fill)]',
89
- ],
90
- 'theme-filled-hoverable': [
91
- 'theme-filled',
92
- 'hover:dark:bg-[var(--d-fill-h)]',
93
- 'hover:light:bg-[var(--l-fill-h)]',
94
- ],
95
- 'theme-outline': [
96
- 'border',
97
- 'dark:border-[var(--d-text)]',
98
- 'dark:text-[var(--d-text)]',
99
- 'light:border-[var(--l-text)]',
100
- 'light:text-[var(--l-text)]',
101
- ],
102
- 'theme-outline-hoverable': [
103
- 'theme-outline',
104
- 'hover:dark:bg-[var(--d-fill-t)]',
105
- 'hover:light:bg-[var(--l-fill-t)]',
106
- ],
107
- 'theme-light': [
108
- 'border',
109
- 'border-transparent',
110
- 'dark:bg-[var(--d-fill-t)]',
111
- 'dark:text-[var(--d-text)]',
112
- 'light:bg-[var(--l-fill-t)]',
113
- 'light:text-[var(--l-text)]',
114
- ],
115
- 'theme-light-hoverable': [
116
- 'theme-light',
117
- 'hover:dark:bg-[var(--d-fill-t-h)]',
118
- 'hover:light:bg-[var(--l-fill-t-h)]',
119
- ],
120
- 'theme-transparent': [
121
- 'border',
122
- 'border-transparent',
123
- 'bg-transparent',
124
- 'dark:text-[var(--d-text)]',
125
- 'light:text-[var(--l-text)]',
126
- ],
127
- 'theme-subtle': [
128
- 'theme-transparent',
129
- 'hover:dark:bg-[var(--d-fill-t)]',
130
- 'hover:light:bg-[var(--l-fill-t)]',
131
- ],
132
- 'theme-contrast': [
133
- 'theme-transparent',
134
- 'hover:dark:bg-[var(--d-fill)]',
135
- 'hover:light:bg-[var(--l-fill)]',
136
- 'hover:dark:text-[var(--d-on-fill)]',
137
- 'hover:light:text-[var(--l-on-fill)]',
138
- ],
139
- 'theme-white': [
140
- 'border',
141
- 'border-transparent',
142
- 'bg-white',
143
- 'dark:text-[var(--d-text)]',
144
- 'light:text-[var(--l-text)]',
145
- ],
146
- };
147
16
  const rokuPreset = (options = {}) => () => {
148
17
  let file = '';
149
18
  try {
@@ -159,12 +28,8 @@ const rokuPreset = (options = {}) => () => {
159
28
  },
160
29
  safelist: ['rounded-[var(--r-rounded)]'],
161
30
  shortcuts: {
162
- ...shortcuts,
163
- ...themeShortCuts,
164
- 'container-low': 'bg-surface-low border-surface-border-low border text-surface-on',
165
- 'container-base': 'bg-surface-base border-surface-border-base border text-surface-on',
166
- 'container-high': 'bg-surface-high border-surface-border-high border text-surface-on',
167
- 'btn-default': 'container-base enabled:hover:bg-surface-border-base focus-visible:outline-2 outline-offset-2 focus-visible:outline-surface-border-base outline-none',
31
+ 'custom-colors': 'border dark:text-[var(--d-text)] text-[var(--l-text)] dark:bg-[var(--d-bg)] bg-[var(--l-bg)] dark:border-[var(--d-border)] border-[var(--l-border)] dark:hover:bg-[var(--d-bg-h)] hover:bg-[var(--l-bg-h)] hover:text-[var(--l-text-h)] dark:hover:text-[var(--d-text-h)]',
32
+ 'custom-input-colors': 'border bg-[var(--l-bg)] dark:bg-[var(--d-bg)] text-[var(--l-text)] dark:text-[var(--d-text)] placeholder-[var(--l-placeholder)] dark:placeholder-[var(--d-placeholder)] border-[var(--l-border)] dark:border-[var(--d-border)] focus:border-[var(--l-border-f)] dark:focus:border-[var(--d-border-f)]',
168
33
  },
169
34
  presets: [
170
35
  presetUno({
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@roku-ui/preset",
3
3
  "type": "module",
4
- "version": "0.13.1",
4
+ "version": "0.14.0",
5
5
  "author": "Jianqi Pan <jannchie@gmail.com>",
6
6
  "repository": {
7
7
  "type": "git",
@@ -28,21 +28,21 @@
28
28
  "index.d.ts"
29
29
  ],
30
30
  "devDependencies": {
31
- "@jannchie/eslint-config": "^3.2.2",
31
+ "@jannchie/eslint-config": "^3.4.0",
32
32
  "@rollup/plugin-commonjs": "^26.0.1",
33
33
  "@rollup/plugin-node-resolve": "^15.2.3",
34
34
  "@rollup/plugin-typescript": "^11.1.6",
35
- "@types/node": "^22.4.1",
36
- "@unocss/preset-icons": "^0.62.2",
37
- "@unocss/reset": "^0.62.2",
38
- "eslint": "^9.9.0",
35
+ "@types/node": "^22.5.5",
36
+ "@unocss/preset-icons": "^0.62.3",
37
+ "@unocss/reset": "^0.62.3",
38
+ "eslint": "^9.10.0",
39
39
  "eslint-plugin-format": "^0.1.2",
40
- "rollup": "^4.21.0",
40
+ "rollup": "^4.21.3",
41
41
  "rollup-plugin-dts": "^6.1.1",
42
42
  "rollup-plugin-import-css": "^3.5.1",
43
43
  "rollup-plugin-string": "^3.0.0",
44
- "typescript": "^5.5.4",
45
- "unocss": "^0.62.2"
44
+ "typescript": "^5.6.2",
45
+ "unocss": "^0.62.3"
46
46
  },
47
47
  "scripts": {
48
48
  "build": "rollup --config",