Skip to content

Commit e8655f4

Browse files
Johnkat-MjJohnkat-Mj
authored
Merge pull request #59 from unoforge/next
Next
2 parents 3e7470b + d021ce4 commit e8655f4

7 files changed

Lines changed: 66 additions & 27 deletions

File tree

‎example/src/config-ui.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313

1414

1515
--uno-ring-offset-color: hsl(var(--bg));
16-
--uno-input-image-color: red;
16+
--uno-input-image-color: hsl(0, 100%, 50%);
1717
}
1818

1919

‎package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/preset-ui/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@unifydev/preset-ui",
3-
"version": "1.2.8",
3+
"version": "1.2.9",
44
"description": "UnoCSS Theming Toolkit, create modern and beautifull Web Ui",
55
"publishConfig": {
66
"access": "public"

‎packages/preset-ui/src/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ function presetUIHelper(config?: UiHelperConfig): Preset {
2525
return {
2626
name: "preset-ui-helper",
2727
shortcuts,
28-
theme: getUiTheme(colorFormat, varPrefix)
28+
theme: getUiTheme(colorFormat, varPrefix, config?.defineColor || true)
2929
};
3030
}
3131

‎packages/preset-ui/src/types/types.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,8 @@ export type UiHelperConfig = {
3434
button?: UiButton
3535
},
3636
exclude?: ThingsToExclude,
37-
appearance?: Appearance
37+
appearance?: Appearance,
38+
defineColor?:boolean
3839
}
3940

4041
export type presetUiConfig = {

‎packages/preset-ui/src/ui-theme/ui.ts‎

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,23 @@ import { themeColors } from "@/colors/getPreconfigColors";
33
import { uiColorFormat } from "@/types";
44
import type { Theme } from "@unocss/preset-uno";
55

6-
export const getUiTheme = (colorMode: uiColorFormat, colorPrefix?: string) => {
7-
const colors = themeColors(colorMode, colorPrefix);
6+
const getWhite = (format: uiColorFormat): string => {
7+
const formats = {
8+
rgb: 'rgb(255,255,255, <alpha-value>)',
9+
hex: '',
10+
oklch: 'oklch(1 0 0)',
11+
hsl: 'hsl(0 0% 100%)'
12+
};
13+
return formats[format as keyof typeof formats] ?? '#ffffff';
14+
};
15+
16+
export const getUiTheme = (colorMode: uiColorFormat, colorPrefix?: string, defineColor?: boolean) => {
17+
const colors = defineColor ?
18+
{
19+
dark: getBrice(colorMode, "gray-950", colorPrefix),
20+
white: getWhite(colorMode),
21+
...themeColors(colorMode, colorPrefix)
22+
} : {};
823
const theme: Theme = {
924
colors: {
1025
bg: {
@@ -13,15 +28,15 @@ export const getUiTheme = (colorMode: uiColorFormat, colorPrefix?: string) => {
1328
subtle: getBrice(colorMode, "bg-subtle", "none"),
1429
muted: getBrice(colorMode, "bg-muted", "none"),
1530
'surface-elevated': getBrice(colorMode, "bg-surface-elevated", "none"),
16-
input:getBrice(colorMode, "bg-input", "none"),
17-
'input-gray':getBrice(colorMode, "bg-input-gray", "none"),
31+
input: getBrice(colorMode, "bg-input", "none"),
32+
'input-gray': getBrice(colorMode, "bg-input-gray", "none"),
1833
},
1934
fg: {
2035
DEFAULT: getBrice(colorMode, "fg", "none"),
2136
title: getBrice(colorMode, "fg-title", "none"),
2237
subtitle: getBrice(colorMode, "fg-subtitle", "none"),
2338
muted: getBrice(colorMode, "fg-muted", "none"),
24-
input:getBrice(colorMode, "fg-input", "none"),
39+
input: getBrice(colorMode, "fg-input", "none"),
2540
},
2641
border: {
2742
DEFAULT: getBrice(colorMode, "border", "none"),
@@ -31,21 +46,18 @@ export const getUiTheme = (colorMode: uiColorFormat, colorPrefix?: string) => {
3146
emphasis: getBrice(colorMode, "border-emphasis", "none"),
3247
input: getBrice(colorMode, "border-input", "none"),
3348
},
34-
card:{
49+
card: {
3550
DEFAULT: getBrice(colorMode, "card", "none"),
3651
elevated: getBrice(colorMode, "card-elevated", "none"),
3752
surface: getBrice(colorMode, "card-surface", "none"),
3853
gray: getBrice(colorMode, "card-gray", "none"),
3954
},
40-
popover:{
55+
popover: {
4156
DEFAULT: getBrice(colorMode, "popover", "none"),
4257
surface: getBrice(colorMode, "popover-surface", "none"),
4358
elevated: getBrice(colorMode, "popover-elevated", "none"),
4459
gray: getBrice(colorMode, "popover-gray", "none"),
4560
},
46-
47-
dark: getBrice(colorMode, "gray-950", colorPrefix),
48-
white: getBrice(colorMode, "white", colorPrefix),
4961
...colors
5062
}
5163
};

‎packages/preset-ui/src/utils/colors-utils.ts‎

Lines changed: 38 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,27 +6,53 @@ import { ColorShade } from "@/types/ui-t";
66
export const getColorFormat = (color: string, format_?: uiColorFormat, defaultVar_?: string) => {
77
const defaultVar = defaultVar_ && defaultVar_ !== '' ? `,${defaultVar_}` : '';
88
const format = format_ || "hsl";
9-
return format === "rgb" ? `rgb(var(${color}${defaultVar}))` : format === "hex" ? `var(${color}${defaultVar})` : format === "oklch" ? `oklch(var(${color}${defaultVar}))` : format === "hsl" ? `hsl(var(${color}))` : `var(${color})`;
10-
}
9+
const val_out = format === "rgb" ? `rgb(var(${color}${defaultVar}))` : format === "hex" ? `var(${color}${defaultVar})` : format === "oklch" ? `oklch(var(${color}${defaultVar}))` : format === "hsl" ? `hsl(var(${color}))` : `var(${color})`;
1110

12-
export const getColorFormatWithOpacity = (color: string, opacity: number, format_?: uiColorFormat, defaultVar_?: string) => {
13-
const defaultVar = defaultVar_ && defaultVar_ !== '' ? `,${defaultVar_}` : '';
14-
const format = format_ || "hsl";
15-
return format === "rgb" ? `rgb(var(${color}${defaultVar})/${getRealOpacityValue(opacity)})`
16-
: format === "hex" ? `var(${color}${defaultVar})`
17-
: format === "oklch" ? `oklch(var(${color}${defaultVar})/${getRealOpacityValue(opacity)})`
18-
: format === "hsl" ? `hsl(var(${color})/${getRealOpacityValue(opacity)})`
19-
: `var(${color}/${opacity})`;
11+
const isWhite = color === 'white'
12+
const whiteVal = format === "rgb" ? `rgb(255,_255,_255)` : format === "hex" ? `#ffffff` : format === "oklch" ? `oklch()` : format === "hsl" ? `hsl(0_0%_100%)` : `#ffffff`;
13+
return isWhite ? whiteVal : val_out
2014
}
2115

16+
export const getColorFormatWithOpacity = (
17+
color: string,
18+
opacity: number,
19+
format_?: uiColorFormat,
20+
defaultVar_?: string
21+
) => {
22+
const format = format_ || "hsl";
23+
const realOpacity = getRealOpacityValue(opacity);
24+
const defaultVar = defaultVar_ && defaultVar_ !== '' ? `,${defaultVar_}` : '';
25+
26+
if (color === 'white') {
27+
const colorFormats = {
28+
rgb: `rgb(255,_255,_255/${realOpacity})`,
29+
hex: '',
30+
oklch: `oklch(1_0_0/${realOpacity})`,
31+
hsl: `hsl(0_0%_100%/${realOpacity})`,
32+
default: '#ffffff'
33+
};
34+
return colorFormats[format as keyof typeof colorFormats] || colorFormats.default;
35+
}
36+
37+
const colorFormats = {
38+
rgb: `rgb(var(${color}${defaultVar})/${realOpacity})`,
39+
hex: `var(${color}${defaultVar})`,
40+
oklch: `oklch(var(${color}${defaultVar})/${realOpacity})`,
41+
hsl: `hsl(var(${color})/${realOpacity})`,
42+
default: `var(${color}/${opacity})`
43+
};
44+
45+
return colorFormats[format as keyof typeof colorFormats] || colorFormats.default;
46+
};
47+
2248

23-
export const getVarName = (color: string, shade?: ColorShade|string, prefix: string = 'c') => {
49+
export const getVarName = (color: string, shade?: ColorShade | string, prefix: string = 'c') => {
2450
const shadeList = ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900", "950", "white"]
2551
const colorName = color === 'white' || color === 'neutral' ? 'gray' : color;
2652
const prefixStr = prefix === 'none' || prefix === '' ? '' : `${prefix}-`;
2753

2854
if (shade === 'white') {
29-
return `--${prefixStr}white`;
55+
return 'white';
3056
}
3157
if (!shadeList.includes(shade as string)) {
3258
return `--${prefixStr}${shadeList[0]}`;

0 commit comments

Comments
 (0)