@roku-ui/preset 0.28.0 → 0.29.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.
Files changed (3) hide show
  1. package/dist/index.cjs +43 -28
  2. package/dist/index.mjs +43 -28
  3. package/package.json +9 -9
package/dist/index.cjs CHANGED
@@ -25,41 +25,38 @@ function rokuPresetImpl() {
25
25
  // Dynamic rules generator - replaces many static shortcuts
26
26
  const dynamicRules = [
27
27
  // Color-mix transparency: bg-{color}-mix-{percentage}
28
- [/^bg-([a-z]+)-mix-(\d+)$/, ([, color, percentage]) => {
29
- return `background-color: color-mix(in oklch, var(--r-${color}-background-color) ${percentage}%, transparent);`;
30
- }],
28
+ [/^bg-([a-z]+)-mix-(\d+)$/, ([, color, percentage]) => ({
29
+ 'background-color': `color-mix(in oklch, var(--r-${color}-background-color) ${percentage}%, transparent)`,
30
+ })],
31
31
  // Color-mix transparency: text-{color}-mix-{percentage}
32
- [/^text-([a-z]+)-mix-(\d+)$/, ([, color, percentage]) => {
33
- return `color: color-mix(in oklch, var(--r-${color}-text-color) ${percentage}%, transparent);`;
34
- }],
32
+ [/^text-([a-z]+)-mix-(\d+)$/, ([, color, percentage]) => ({
33
+ color: `color-mix(in oklch, var(--r-${color}-text-color) ${percentage}%, transparent)`,
34
+ })],
35
35
  // Color-mix transparency: border-{color}-mix-{percentage}
36
- [/^border-([a-z]+)-mix-(\d+)$/, ([, color, percentage]) => {
37
- return `border-color: color-mix(in oklch, var(--r-${color}-background-color) ${percentage}%, transparent);`;
38
- }],
36
+ [/^border-([a-z]+)-mix-(\d+)$/, ([, color, percentage]) => ({
37
+ 'border-color': `color-mix(in oklch, var(--r-${color}-background-color) ${percentage}%, transparent)`,
38
+ })],
39
39
  // Standard color backgrounds: bg-{color}
40
- [/^bg-(secondary|tertiary|error)$/, ([, color]) => {
41
- return `background-color: var(--r-${color}-background-color);`;
42
- }],
40
+ [/^bg-(secondary|tertiary|error)$/, ([, color]) => ({
41
+ 'background-color': `var(--r-${color}-background-color)`,
42
+ })],
43
43
  // Standard color text: text-{color}
44
- [/^text-(secondary|tertiary|error)$/, ([, color]) => {
45
- return `color: var(--r-${color}-text-color);`;
46
- }],
47
- // Standard color borders: border-{color}
48
- [/^border-(primary|secondary|tertiary|error)$/, ([, color]) => {
49
- return `border-color: var(--r-${color}-background-color);`;
50
- }],
44
+ [/^text-(secondary|tertiary|error)$/, ([, color]) => ({
45
+ color: `var(--r-${color}-text-color)`,
46
+ })],
47
+ // Note: border-{color} handled via shortcuts below to avoid raw declarations
51
48
  // Standard color outlines: outline-{color}
52
- [/^outline-(primary|secondary|tertiary|error)$/, ([, color]) => {
53
- return `outline-color: var(--r-${color}-background-color);`;
54
- }],
49
+ [/^outline-(primary|secondary|tertiary|error)$/, ([, color]) => ({
50
+ 'outline-color': `var(--r-${color}-background-color)`,
51
+ })],
55
52
  // Surface variants: bg-surface-variant-{number}
56
- [/^bg-surface-variant-([12])$/, ([, variant]) => {
57
- return `background-color: var(--r-surface-background-variant-${variant}-color);`;
58
- }],
53
+ [/^bg-surface-variant-([12])$/, ([, variant]) => ({
54
+ 'background-color': `var(--r-surface-background-variant-${variant}-color)`,
55
+ })],
59
56
  // Surface border variants: border-surface-variant
60
- [/^border-surface-variant$/, () => {
61
- return `border-color: var(--r-surface-border-variant-color);`;
62
- }],
57
+ [/^border-surface-variant$/, () => ({
58
+ 'border-color': 'var(--r-surface-border-variant-color)',
59
+ })],
63
60
  ];
64
61
  return {
65
62
  name: 'roku',
@@ -86,6 +83,24 @@ function rokuPresetImpl() {
86
83
  // Core color shortcuts (most commonly used)
87
84
  'bg-primary': 'bg-[--r-primary-background-color]',
88
85
  'text-primary': 'text-[--r-primary-text-color]',
86
+ // Background shortcuts for other semantic colors
87
+ 'bg-secondary': 'bg-[--r-secondary-background-color]',
88
+ 'bg-tertiary': 'bg-[--r-tertiary-background-color]',
89
+ 'bg-error': 'bg-[--r-error-background-color]',
90
+ // Text shortcuts for other semantic colors
91
+ 'text-secondary': 'text-[--r-secondary-text-color]',
92
+ 'text-tertiary': 'text-[--r-tertiary-text-color]',
93
+ 'text-error': 'text-[--r-error-text-color]',
94
+ // Border color shortcuts using arbitrary values
95
+ 'border-primary': 'border-[--r-primary-background-color]',
96
+ 'border-secondary': 'border-[--r-secondary-background-color]',
97
+ 'border-tertiary': 'border-[--r-tertiary-background-color]',
98
+ 'border-error': 'border-[--r-error-background-color]',
99
+ // Outline color shortcuts
100
+ 'outline-primary': 'outline-[--r-primary-background-color]',
101
+ 'outline-secondary': 'outline-[--r-secondary-background-color]',
102
+ 'outline-tertiary': 'outline-[--r-tertiary-background-color]',
103
+ 'outline-error': 'outline-[--r-error-background-color]',
89
104
  // Note: Other color combinations (bg-secondary, text-tertiary, etc.) are handled by dynamic rules
90
105
  // Note: Color-mix transparency (bg-primary-mix-30, etc.) is handled by dynamic rules
91
106
  },
package/dist/index.mjs CHANGED
@@ -23,41 +23,38 @@ function rokuPresetImpl() {
23
23
  // Dynamic rules generator - replaces many static shortcuts
24
24
  const dynamicRules = [
25
25
  // Color-mix transparency: bg-{color}-mix-{percentage}
26
- [/^bg-([a-z]+)-mix-(\d+)$/, ([, color, percentage]) => {
27
- return `background-color: color-mix(in oklch, var(--r-${color}-background-color) ${percentage}%, transparent);`;
28
- }],
26
+ [/^bg-([a-z]+)-mix-(\d+)$/, ([, color, percentage]) => ({
27
+ 'background-color': `color-mix(in oklch, var(--r-${color}-background-color) ${percentage}%, transparent)`,
28
+ })],
29
29
  // Color-mix transparency: text-{color}-mix-{percentage}
30
- [/^text-([a-z]+)-mix-(\d+)$/, ([, color, percentage]) => {
31
- return `color: color-mix(in oklch, var(--r-${color}-text-color) ${percentage}%, transparent);`;
32
- }],
30
+ [/^text-([a-z]+)-mix-(\d+)$/, ([, color, percentage]) => ({
31
+ color: `color-mix(in oklch, var(--r-${color}-text-color) ${percentage}%, transparent)`,
32
+ })],
33
33
  // Color-mix transparency: border-{color}-mix-{percentage}
34
- [/^border-([a-z]+)-mix-(\d+)$/, ([, color, percentage]) => {
35
- return `border-color: color-mix(in oklch, var(--r-${color}-background-color) ${percentage}%, transparent);`;
36
- }],
34
+ [/^border-([a-z]+)-mix-(\d+)$/, ([, color, percentage]) => ({
35
+ 'border-color': `color-mix(in oklch, var(--r-${color}-background-color) ${percentage}%, transparent)`,
36
+ })],
37
37
  // Standard color backgrounds: bg-{color}
38
- [/^bg-(secondary|tertiary|error)$/, ([, color]) => {
39
- return `background-color: var(--r-${color}-background-color);`;
40
- }],
38
+ [/^bg-(secondary|tertiary|error)$/, ([, color]) => ({
39
+ 'background-color': `var(--r-${color}-background-color)`,
40
+ })],
41
41
  // Standard color text: text-{color}
42
- [/^text-(secondary|tertiary|error)$/, ([, color]) => {
43
- return `color: var(--r-${color}-text-color);`;
44
- }],
45
- // Standard color borders: border-{color}
46
- [/^border-(primary|secondary|tertiary|error)$/, ([, color]) => {
47
- return `border-color: var(--r-${color}-background-color);`;
48
- }],
42
+ [/^text-(secondary|tertiary|error)$/, ([, color]) => ({
43
+ color: `var(--r-${color}-text-color)`,
44
+ })],
45
+ // Note: border-{color} handled via shortcuts below to avoid raw declarations
49
46
  // Standard color outlines: outline-{color}
50
- [/^outline-(primary|secondary|tertiary|error)$/, ([, color]) => {
51
- return `outline-color: var(--r-${color}-background-color);`;
52
- }],
47
+ [/^outline-(primary|secondary|tertiary|error)$/, ([, color]) => ({
48
+ 'outline-color': `var(--r-${color}-background-color)`,
49
+ })],
53
50
  // Surface variants: bg-surface-variant-{number}
54
- [/^bg-surface-variant-([12])$/, ([, variant]) => {
55
- return `background-color: var(--r-surface-background-variant-${variant}-color);`;
56
- }],
51
+ [/^bg-surface-variant-([12])$/, ([, variant]) => ({
52
+ 'background-color': `var(--r-surface-background-variant-${variant}-color)`,
53
+ })],
57
54
  // Surface border variants: border-surface-variant
58
- [/^border-surface-variant$/, () => {
59
- return `border-color: var(--r-surface-border-variant-color);`;
60
- }],
55
+ [/^border-surface-variant$/, () => ({
56
+ 'border-color': 'var(--r-surface-border-variant-color)',
57
+ })],
61
58
  ];
62
59
  return {
63
60
  name: 'roku',
@@ -84,6 +81,24 @@ function rokuPresetImpl() {
84
81
  // Core color shortcuts (most commonly used)
85
82
  'bg-primary': 'bg-[--r-primary-background-color]',
86
83
  'text-primary': 'text-[--r-primary-text-color]',
84
+ // Background shortcuts for other semantic colors
85
+ 'bg-secondary': 'bg-[--r-secondary-background-color]',
86
+ 'bg-tertiary': 'bg-[--r-tertiary-background-color]',
87
+ 'bg-error': 'bg-[--r-error-background-color]',
88
+ // Text shortcuts for other semantic colors
89
+ 'text-secondary': 'text-[--r-secondary-text-color]',
90
+ 'text-tertiary': 'text-[--r-tertiary-text-color]',
91
+ 'text-error': 'text-[--r-error-text-color]',
92
+ // Border color shortcuts using arbitrary values
93
+ 'border-primary': 'border-[--r-primary-background-color]',
94
+ 'border-secondary': 'border-[--r-secondary-background-color]',
95
+ 'border-tertiary': 'border-[--r-tertiary-background-color]',
96
+ 'border-error': 'border-[--r-error-background-color]',
97
+ // Outline color shortcuts
98
+ 'outline-primary': 'outline-[--r-primary-background-color]',
99
+ 'outline-secondary': 'outline-[--r-secondary-background-color]',
100
+ 'outline-tertiary': 'outline-[--r-tertiary-background-color]',
101
+ 'outline-error': 'outline-[--r-error-background-color]',
87
102
  // Note: Other color combinations (bg-secondary, text-tertiary, etc.) are handled by dynamic rules
88
103
  // Note: Color-mix transparency (bg-primary-mix-30, etc.) is handled by dynamic rules
89
104
  },
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@roku-ui/preset",
3
3
  "type": "module",
4
- "version": "0.28.0",
4
+ "version": "0.29.0",
5
5
  "author": "Jianqi Pan <jannchie@gmail.com>",
6
6
  "repository": {
7
7
  "type": "git",
@@ -28,22 +28,22 @@
28
28
  "index.d.ts"
29
29
  ],
30
30
  "devDependencies": {
31
- "@jannchie/eslint-config": "^3.7.0",
31
+ "@jannchie/eslint-config": "^3.7.1",
32
32
  "@rollup/plugin-commonjs": "^28.0.6",
33
33
  "@rollup/plugin-node-resolve": "^16.0.1",
34
34
  "@rollup/plugin-typescript": "^12.1.4",
35
- "@types/node": "^24.3.0",
36
- "@unocss/preset-icons": "66.4.2",
37
- "@unocss/preset-mini": "66.4.2",
38
- "@unocss/reset": "66.4.2",
39
- "eslint": "^9.33.0",
35
+ "@types/node": "^24.3.1",
36
+ "@unocss/preset-icons": "66.5.0",
37
+ "@unocss/preset-mini": "66.5.0",
38
+ "@unocss/reset": "66.5.0",
39
+ "eslint": "^9.35.0",
40
40
  "eslint-plugin-format": "^1.0.1",
41
- "rollup": "^4.47.1",
41
+ "rollup": "^4.50.0",
42
42
  "rollup-plugin-dts": "^6.2.3",
43
43
  "rollup-plugin-import-css": "^4.0.2",
44
44
  "rollup-plugin-string": "^3.0.0",
45
45
  "typescript": "^5.9.2",
46
- "unocss": "66.4.2",
46
+ "unocss": "66.5.0",
47
47
  "unocss-preset-scrollbar": "^3.2.0"
48
48
  },
49
49
  "scripts": {