@una-ui/preset 0.61.0 → 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 (8) hide show
  1. package/dist/index.d.mts +2 -1
  2. package/dist/index.d.ts +2 -1
  3. package/dist/index.mjs +71 -47
  4. package/dist/prefixes.mjs +6 -0
  5. package/dist/shared/{preset.f7nEHBBO.mjs → preset.DRPVRXmI.mjs} +247 -225
  6. package/dist/shortcuts.mjs +1 -1
  7. package/package.json +5 -4
  8. package/una.css +93 -136
package/dist/index.d.mts CHANGED
@@ -1,9 +1,10 @@
1
+ import { Theme } from '@unocss/preset-mini';
1
2
  import { Preset } from 'unocss';
2
3
 
3
4
  interface unaUIOptions {
4
5
  primary?: [];
5
6
  }
6
7
 
7
- declare function presetUna(options?: unaUIOptions): Preset;
8
+ declare function presetUna(options?: unaUIOptions): Preset<Theme>;
8
9
 
9
10
  export { presetUna as default };
package/dist/index.d.ts CHANGED
@@ -1,9 +1,10 @@
1
+ import { Theme } from '@unocss/preset-mini';
1
2
  import { Preset } from 'unocss';
2
3
 
3
4
  interface unaUIOptions {
4
5
  primary?: [];
5
6
  }
6
7
 
7
- declare function presetUna(options?: unaUIOptions): Preset;
8
+ declare function presetUna(options?: unaUIOptions): Preset<Theme>;
8
9
 
9
10
  export { presetUna as default };
package/dist/index.mjs CHANGED
@@ -1,9 +1,8 @@
1
- import { theme } from '@unocss/preset-mini';
2
- import { colors } from '@unocss/preset-mini/colors';
3
1
  import { fonts } from '@unocss/preset-mini/rules';
4
2
  import { handler, parseColor } from '@unocss/preset-mini/utils';
5
- import { mergeDeep } from 'unocss';
6
- import { s as shortcuts } from './shared/preset.f7nEHBBO.mjs';
3
+ import { colors } from '@unocss/preset-wind4/colors';
4
+ import { s as shortcuts } from './shared/preset.DRPVRXmI.mjs';
5
+ import '@unocss/preset-mini';
7
6
 
8
7
  function presetUna(options = {
9
8
  // TODO: add options
@@ -13,7 +12,7 @@ function presetUna(options = {
13
12
  options,
14
13
  shortcuts,
15
14
  separators: [":"],
16
- theme: mergeDeep(theme, {
15
+ theme: {
17
16
  container: {
18
17
  center: true,
19
18
  padding: "2rem",
@@ -22,55 +21,80 @@ function presetUna(options = {
22
21
  }
23
22
  },
24
23
  colors: {
25
- background: "rgba(var(--una-background) / <alpha-value>)",
26
- foreground: "rgba(var(--una-foreground) / <alpha-value>)",
27
- brand: "rgba(var(--una-brand) / <alpha-value>)",
28
- input: "rgba(var(--una-input) / <alpha-value>)",
24
+ ...colors,
25
+ brand: "oklch(var(--una-brand) / <alpha-value>)",
26
+ background: "oklch(var(--una-background) / <alpha-value>)",
27
+ foreground: "oklch(var(--una-foreground) / <alpha-value>)",
28
+ muted: "oklch(var(--una-muted) / <alpha-value>)",
29
+ mutedForeground: "oklch(var(--una-muted-foreground) / <alpha-value>)",
30
+ accent: "oklch(var(--una-accent) / <alpha-value>)",
31
+ accentForeground: "oklch(var(--una-accent-foreground) / <alpha-value>)",
32
+ secondary: "oklch(var(--una-secondary) / <alpha-value>)",
33
+ secondaryForeground: "oklch(var(--una-secondary-foreground) / <alpha-value>)",
34
+ popover: "oklch(var(--una-popover) / <alpha-value>)",
35
+ popoverForeground: "oklch(var(--una-popover-foreground) / <alpha-value>)",
36
+ selection: "oklch(var(--una-selection) / <alpha-value>)",
37
+ selectionForeground: "oklch(var(--una-selection-foreground) / <alpha-value>)",
38
+ input: "oklch(var(--una-input) / <alpha-value>)",
39
+ border: "oklch(var(--una-border) / <alpha-value>)",
40
+ ring: "oklch(var(--una-ring) / <alpha-value>)",
41
+ card: "oklch(var(--una-card) / <alpha-value>)",
42
+ cardForeground: "oklch(var(--una-card-foreground) / <alpha-value>)",
29
43
  primary: {
30
- DEFAULT: "rgba(var(--una-primary) / <alpha-value>)",
31
- active: "rgba(var(--una-primary-active) / <alpha-value>)",
32
- 50: "rgba(var(--una-primary-50) / <alpha-value>)",
33
- 100: "rgba(var(--una-primary-100) / <alpha-value>)",
34
- 200: "rgba(var(--una-primary-200) / <alpha-value>)",
35
- 300: "rgba(var(--una-primary-300) / <alpha-value>)",
36
- 400: "rgba(var(--una-primary-400) / <alpha-value>)",
37
- 500: "rgba(var(--una-primary-500) / <alpha-value>)",
38
- 600: "rgba(var(--una-primary-600) / <alpha-value>)",
39
- 700: "rgba(var(--una-primary-700) / <alpha-value>)",
40
- 800: "rgba(var(--una-primary-800) / <alpha-value>)",
41
- 900: "rgba(var(--una-primary-900) / <alpha-value>)",
42
- 950: "rgba(var(--una-primary-950) / <alpha-value>)"
44
+ DEFAULT: "oklch(var(--una-primary) / <alpha-value>)",
45
+ active: "oklch(var(--una-primary-active) / <alpha-value>)",
46
+ foreground: "oklch(var(--una-primary-foreground) / <alpha-value>)",
47
+ 50: "oklch(var(--una-primary-50) / <alpha-value>)",
48
+ 100: "oklch(var(--una-primary-100) / <alpha-value>)",
49
+ 200: "oklch(var(--una-primary-200) / <alpha-value>)",
50
+ 300: "oklch(var(--una-primary-300) / <alpha-value>)",
51
+ 400: "oklch(var(--una-primary-400) / <alpha-value>)",
52
+ 500: "oklch(var(--una-primary-500) / <alpha-value>)",
53
+ 600: "oklch(var(--una-primary-600) / <alpha-value>)",
54
+ 700: "oklch(var(--una-primary-700) / <alpha-value>)",
55
+ 800: "oklch(var(--una-primary-800) / <alpha-value>)",
56
+ 900: "oklch(var(--una-primary-900) / <alpha-value>)",
57
+ 950: "oklch(var(--una-primary-950) / <alpha-value>)"
43
58
  },
44
59
  gray: {
45
- DEFAULT: "rgba(var(--una-gray) / <alpha-value>)",
46
- active: "rgba(var(--una-gray-active) / <alpha-value>)",
47
- 50: "rgba(var(--una-gray-50) / <alpha-value>)",
48
- 100: "rgba(var(--una-gray-100) / <alpha-value>)",
49
- 200: "rgba(var(--una-gray-200) / <alpha-value>)",
50
- 300: "rgba(var(--una-gray-300) / <alpha-value>)",
51
- 400: "rgba(var(--una-gray-400) / <alpha-value>)",
52
- 500: "rgba(var(--una-gray-500) / <alpha-value>)",
53
- 600: "rgba(var(--una-gray-600) / <alpha-value>)",
54
- 700: "rgba(var(--una-gray-700) / <alpha-value>)",
55
- 800: "rgba(var(--una-gray-800) / <alpha-value>)",
56
- 900: "rgba(var(--una-gray-900) / <alpha-value>)",
57
- 950: "rgba(var(--una-gray-950) / <alpha-value>)"
60
+ DEFAULT: "oklch(var(--una-gray) / <alpha-value>)",
61
+ active: "oklch(var(--una-gray-active) / <alpha-value>)",
62
+ 50: "oklch(var(--una-gray-50) / <alpha-value>)",
63
+ 100: "oklch(var(--una-gray-100) / <alpha-value>)",
64
+ 200: "oklch(var(--una-gray-200) / <alpha-value>)",
65
+ 300: "oklch(var(--una-gray-300) / <alpha-value>)",
66
+ 400: "oklch(var(--una-gray-400) / <alpha-value>)",
67
+ 500: "oklch(var(--una-gray-500) / <alpha-value>)",
68
+ 600: "oklch(var(--una-gray-600) / <alpha-value>)",
69
+ 700: "oklch(var(--una-gray-700) / <alpha-value>)",
70
+ 800: "oklch(var(--una-gray-800) / <alpha-value>)",
71
+ 900: "oklch(var(--una-gray-900) / <alpha-value>)",
72
+ 950: "oklch(var(--una-gray-950) / <alpha-value>)"
58
73
  },
59
74
  sidebar: {
60
- DEFAULT: "rgba(var(--una-sidebar) / <alpha-value>)",
61
- foreground: "rgba(var(--una-sidebar-foreground) / <alpha-value>)",
62
- primary: "rgba(var(--una-sidebar-primary) / <alpha-value>)",
63
- primaryForeground: "rgba(var(--una-sidebar-primary-foreground) / <alpha-value>)",
64
- accent: "rgba(var(--una-sidebar-accent) / <alpha-value>)",
65
- accentForeground: "rgba(var(--una-sidebar-accent-foreground) / <alpha-value>)",
66
- border: "rgba(var(--una-sidebar-border) / <alpha-value>)",
67
- ring: "rgba(var(--una-sidebar-ring) / <alpha-value>)"
75
+ DEFAULT: "oklch(var(--una-sidebar) / <alpha-value>)",
76
+ foreground: "oklch(var(--una-sidebar-foreground) / <alpha-value>)",
77
+ primary: "oklch(var(--una-sidebar-primary) / <alpha-value>)",
78
+ primaryForeground: "oklch(var(--una-sidebar-primary-foreground) / <alpha-value>)",
79
+ accent: "oklch(var(--una-sidebar-accent) / <alpha-value>)",
80
+ accentForeground: "oklch(var(--una-sidebar-accent-foreground) / <alpha-value>)",
81
+ border: "oklch(var(--una-sidebar-border) / <alpha-value>)",
82
+ ring: "oklch(var(--una-sidebar-ring) / <alpha-value>)"
68
83
  },
69
84
  error: colors.red,
70
85
  success: colors.green,
71
86
  warning: colors.amber,
72
87
  info: colors.blue
73
88
  },
89
+ boxShadow: {
90
+ "2xs": "0 1px rgb(0 0 0 / 0.05)",
91
+ "xs": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
92
+ "sm": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
93
+ "md": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
94
+ "lg": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
95
+ "xl": "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
96
+ "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)"
97
+ },
74
98
  borderRadius: {
75
99
  xl: "calc(var(--una-radius) + 4px)",
76
100
  lg: "var(--una-radius)",
@@ -98,13 +122,13 @@ function presetUna(options = {
98
122
  "fadeOut": "ease-out"
99
123
  }
100
124
  }
101
- }),
125
+ },
102
126
  rules: [
103
127
  [/^n-(.*)$/, ([, body], { theme }) => {
104
128
  const color = parseColor(body, theme);
105
- if ((color?.cssColor?.type === "rgb" || color?.cssColor?.type === "rgba") && color.cssColor.components) {
129
+ if (color?.color && color.cssColor?.components) {
106
130
  return {
107
- "--una-brand": `${color.cssColor.components.join(",")}`
131
+ "--una-brand": `${color.cssColor.components.join(" ")}`
108
132
  };
109
133
  }
110
134
  }],
@@ -152,7 +176,7 @@ function presetUna(options = {
152
176
  {
153
177
  getCSS: () => `
154
178
  *:focus-visible {
155
- outline: 2px solid rgb(var(--una-primary)); /* 2 */
179
+ outline: 2px solid oklch(var(--una-primary)); /* 2 */
156
180
  border-radius: 0.25rem; /* 1 */
157
181
  outline-offset: 0.10rem; /* 1 */
158
182
  }
package/dist/prefixes.mjs CHANGED
@@ -1,6 +1,8 @@
1
1
  const prefixes = [
2
2
  "accordion",
3
3
  "alert",
4
+ "alert-close",
5
+ "alert-description",
4
6
  "alert-dialog",
5
7
  "alert-dialog-action",
6
8
  "alert-dialog-cancel",
@@ -11,6 +13,7 @@ const prefixes = [
11
13
  "alert-dialog-overlay",
12
14
  "alert-dialog-title",
13
15
  "alert-dialog-trigger",
16
+ "alert-title",
14
17
  "aspect-ratio",
15
18
  "avatar",
16
19
  "avatar-fallback",
@@ -30,6 +33,7 @@ const prefixes = [
30
33
  "btn",
31
34
  "button",
32
35
  "card",
36
+ "card-action",
33
37
  "card-content",
34
38
  "card-description",
35
39
  "card-footer",
@@ -60,6 +64,7 @@ const prefixes = [
60
64
  "dialog-overlay",
61
65
  "dialog-scroll-content",
62
66
  "dialog-title",
67
+ "dialog-trigger",
63
68
  "drawer",
64
69
  "drawer-close",
65
70
  "drawer-content",
@@ -157,6 +162,7 @@ const prefixes = [
157
162
  "sheet-description",
158
163
  "sheet-footer",
159
164
  "sheet-header",
165
+ "sheet-overlay",
160
166
  "sheet-title",
161
167
  "sheet-trigger",
162
168
  "sidebar",