nuance-ui 0.2.32 → 0.2.34
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/module.json +1 -1
- package/dist/runtime/components/alert.d.vue.ts +5 -3
- package/dist/runtime/components/alert.vue +6 -3
- package/dist/runtime/components/alert.vue.d.ts +5 -3
- package/dist/runtime/components/app-shell/app-shell.vue +1 -1
- package/dist/runtime/components/dialog/ui/dialog-title.vue +1 -0
- package/dist/runtime/components/divider.d.vue.ts +40 -0
- package/dist/runtime/components/divider.vue +49 -0
- package/dist/runtime/components/divider.vue.d.ts +40 -0
- package/dist/runtime/components/drawer/drawer-title.vue +1 -0
- package/dist/runtime/components/index.d.ts +1 -0
- package/dist/runtime/components/link/link.vue +1 -0
- package/dist/runtime/components/modal/modal-title.vue +1 -0
- package/dist/runtime/components/table/ui/table.vue +1 -1
- package/dist/runtime/components/text.d.vue.ts +2 -0
- package/dist/runtime/components/text.vue +4 -1
- package/dist/runtime/components/text.vue.d.ts +2 -0
- package/dist/runtime/components/title.vue +3 -0
- package/dist/runtime/styles/baseline.css +1 -1
- package/dist/runtime/styles/dark-theme.css +1 -1
- package/dist/runtime/styles/light-theme.css +1 -1
- package/dist/runtime/utils/style/create-variant-color-resolver.d.ts +1 -1
- package/dist/runtime/utils/style/create-variant-color-resolver.js +16 -0
- package/package.json +1 -1
package/dist/module.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import type { Classes, NuanceColor, NuanceRadius } from '@nui/types';
|
|
1
|
+
import type { Classes, NuanceColor, NuanceRadius, NuanceSize } from '@nui/types';
|
|
2
2
|
import type { BoxProps } from './box.vue.js';
|
|
3
3
|
export type AlertClasses = 'root' | 'icon' | 'body' | 'title' | 'label' | 'message' | 'closeButton';
|
|
4
|
-
export type AlertVariant = 'filled' | 'light' | 'outline' | 'default';
|
|
4
|
+
export type AlertVariant = 'filled' | 'light' | 'outline' | 'light-outline' | 'default';
|
|
5
5
|
export interface AlertVars {
|
|
6
|
-
root: '--alert-radius' | '--alert-bg' | '--alert-color' | '--alert-bd';
|
|
6
|
+
root: '--alert-radius' | '--alert-bg' | '--alert-color' | '--alert-bd' | '--alert-font-size';
|
|
7
7
|
}
|
|
8
8
|
export interface AlertProps extends BoxProps {
|
|
9
9
|
/** Border radius */
|
|
@@ -20,6 +20,8 @@ export interface AlertProps extends BoxProps {
|
|
|
20
20
|
onClose?: () => void;
|
|
21
21
|
/** `aria-label` for the close button */
|
|
22
22
|
closeButtonLabel?: string;
|
|
23
|
+
/** Component size */
|
|
24
|
+
size?: NuanceSize;
|
|
23
25
|
/** Visual variant */
|
|
24
26
|
variant?: AlertVariant;
|
|
25
27
|
/** Styles API */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<script setup>
|
|
2
2
|
import { useConfig, useVarsResolver } from "@nui/composables";
|
|
3
|
-
import { getRadius } from "@nui/utils";
|
|
3
|
+
import { getFontSize, getRadius } from "@nui/utils";
|
|
4
4
|
import { useId } from "vue";
|
|
5
5
|
import ActionIcon from "./action-icon/action-icon.vue";
|
|
6
6
|
import Box from "./box.vue";
|
|
@@ -10,6 +10,7 @@ const {
|
|
|
10
10
|
color,
|
|
11
11
|
title,
|
|
12
12
|
radius,
|
|
13
|
+
size = "md",
|
|
13
14
|
variant = "light",
|
|
14
15
|
withCloseButton,
|
|
15
16
|
classes
|
|
@@ -21,6 +22,7 @@ const {
|
|
|
21
22
|
withCloseButton: { type: Boolean, required: false },
|
|
22
23
|
onClose: { type: Function, required: false },
|
|
23
24
|
closeButtonLabel: { type: String, required: false },
|
|
25
|
+
size: { type: String, required: false },
|
|
24
26
|
variant: { type: String, required: false },
|
|
25
27
|
classes: { type: Object, required: false },
|
|
26
28
|
is: { type: null, required: false },
|
|
@@ -36,7 +38,8 @@ const style = useVarsResolver((theme) => {
|
|
|
36
38
|
"--alert-radius": radius === void 0 ? void 0 : getRadius(radius),
|
|
37
39
|
"--alert-bg": color || variant ? background : void 0,
|
|
38
40
|
"--alert-color": text,
|
|
39
|
-
"--alert-bd": color || variant ? border : void 0
|
|
41
|
+
"--alert-bd": color || variant ? border : void 0,
|
|
42
|
+
"--alert-font-size": getFontSize(size)
|
|
40
43
|
}
|
|
41
44
|
};
|
|
42
45
|
});
|
|
@@ -89,5 +92,5 @@ const style = useVarsResolver((theme) => {
|
|
|
89
92
|
</template>
|
|
90
93
|
|
|
91
94
|
<style module>
|
|
92
|
-
.root{--alert-radius:var(--radius-default);--alert-bg:var(--color-primary-light);--alert-bd:1px solid transparent;--alert-color:var(--color-primary-light-color);background-color:var(--alert-bg);border:var(--alert-bd);border-radius:var(--alert-radius);color:var(--alert-color);gap:var(--spacing-
|
|
95
|
+
.root{--alert-radius:var(--radius-default);--alert-bg:var(--color-primary-light);--alert-bd:1px solid transparent;--alert-color:var(--color-primary-light-color);background-color:var(--alert-bg);border:var(--alert-bd);border-radius:var(--alert-radius);color:var(--alert-color);gap:var(--spacing-xs);overflow:hidden;padding:var(--spacing-sm);position:relative}.body,.root{display:flex}.body{flex:1;flex-direction:column}.title{align-items:center;display:flex;font-size:var(--alert-font-size,var(--font-size-md));font-weight:700;justify-content:space-between}.label{display:block;overflow:hidden;text-overflow:ellipsis}.icon{align-items:center;display:flex;font-size:var(--alert-font-size);height:calc(var(--alert-font-size)*1.3);justify-content:flex-start;line-height:1;margin-top:1px;width:calc(var(--alert-font-size)*1.3)}.message{font-size:var(--alert-font-size,var(--font-size-md));overflow:hidden;text-overflow:ellipsis}:where([data-mantine-color-scheme=light]) .message{color:var(--color-black)}:where([data-mantine-color-scheme=dark]) .message{color:var(--color-white)}.message:where([data-variant=filled]){color:var(--alert-color)}.message:where([data-variant=white]){color:var(--color-black)}.closeButton{color:var(--alert-color);height:20px;width:20px}
|
|
93
96
|
</style>
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import type { Classes, NuanceColor, NuanceRadius } from '@nui/types';
|
|
1
|
+
import type { Classes, NuanceColor, NuanceRadius, NuanceSize } from '@nui/types';
|
|
2
2
|
import type { BoxProps } from './box.vue.js';
|
|
3
3
|
export type AlertClasses = 'root' | 'icon' | 'body' | 'title' | 'label' | 'message' | 'closeButton';
|
|
4
|
-
export type AlertVariant = 'filled' | 'light' | 'outline' | 'default';
|
|
4
|
+
export type AlertVariant = 'filled' | 'light' | 'outline' | 'light-outline' | 'default';
|
|
5
5
|
export interface AlertVars {
|
|
6
|
-
root: '--alert-radius' | '--alert-bg' | '--alert-color' | '--alert-bd';
|
|
6
|
+
root: '--alert-radius' | '--alert-bg' | '--alert-color' | '--alert-bd' | '--alert-font-size';
|
|
7
7
|
}
|
|
8
8
|
export interface AlertProps extends BoxProps {
|
|
9
9
|
/** Border radius */
|
|
@@ -20,6 +20,8 @@ export interface AlertProps extends BoxProps {
|
|
|
20
20
|
onClose?: () => void;
|
|
21
21
|
/** `aria-label` for the close button */
|
|
22
22
|
closeButtonLabel?: string;
|
|
23
|
+
/** Component size */
|
|
24
|
+
size?: NuanceSize;
|
|
23
25
|
/** Visual variant */
|
|
24
26
|
variant?: AlertVariant;
|
|
25
27
|
/** Styles API */
|
|
@@ -51,5 +51,5 @@ const style = useVarsResolver(() => ({
|
|
|
51
51
|
</template>
|
|
52
52
|
|
|
53
53
|
<style module>
|
|
54
|
-
.root{--app-shell-padding:var(--spacing-sm);--app-shell-element-padding:.25rem;--app-shell-transition-duration:200ms;--app-shell-transition-timing-function:ease;--app-shell-navbar-width:rem(56px);--app-shell-navbar-offset:var(--app-shell-navbar-width);--app-shell-navbar-transform:none;--app-shell-aside-width:rem(56px);--app-shell-aside-offset:var(--app-shell-aside-width);--app-shell-aside-transform:none;--app-shell-header-height:rem(56px);--app-shell-header-offset:var(--app-shell-header-height);--app-shell-header-transform:none;--app-shell-footer-height:rem(100px);--app-shell-footer-offset:var(--app-shell-footer-height);--app-shell-footer-transform:none;@mixin where-light{--app-shell-border-color:var(--color-gray-3)}@mixin where-dark{--app-shell-border-color:var(--color-dark-8)}}
|
|
54
|
+
.root{--app-shell-padding:var(--spacing-sm);--app-shell-element-padding:.25rem;--app-shell-transition-duration:200ms;--app-shell-transition-timing-function:ease;--app-shell-navbar-width:rem(56px);--app-shell-navbar-offset:var(--app-shell-navbar-width);--app-shell-navbar-transform:none;--app-shell-aside-width:rem(56px);--app-shell-aside-offset:var(--app-shell-aside-width);--app-shell-aside-transform:none;--app-shell-header-height:rem(56px);--app-shell-header-offset:var(--app-shell-header-height);--app-shell-header-transform:none;--app-shell-footer-height:rem(100px);--app-shell-footer-offset:var(--app-shell-footer-height);--app-shell-footer-transform:none;--color-navbar:var(--color-body);--color-aside:var(--color-body);--color-header:var(--color-body);--color-footer:var(--color-body);@mixin where-light{--app-shell-border-color:var(--color-gray-3)}@mixin where-dark{--app-shell-border-color:var(--color-dark-8)}}
|
|
55
55
|
</style>
|
|
@@ -11,6 +11,7 @@ const { size = "md", lh = "1", ...props } = defineProps({
|
|
|
11
11
|
inherit: { type: Boolean, required: false },
|
|
12
12
|
gradient: { type: Object, required: false },
|
|
13
13
|
fz: { type: null, required: false },
|
|
14
|
+
ff: { type: [String, Object], required: false },
|
|
14
15
|
lh: { type: [String, Object], required: false },
|
|
15
16
|
fw: { type: void 0, required: false },
|
|
16
17
|
c: { type: null, required: false },
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import type { AnyString, NuanceColor, NuanceSize } from '@nui/types';
|
|
2
|
+
import type { BoxProps } from './box.vue.js';
|
|
3
|
+
export type DividerVariant = 'solid' | 'dashed' | 'dotted';
|
|
4
|
+
export interface DividerVars {
|
|
5
|
+
root: '--divider-color' | '--divider-border-style' | '--divider-size';
|
|
6
|
+
}
|
|
7
|
+
export interface DividerProps extends BoxProps {
|
|
8
|
+
/** Color from theme */
|
|
9
|
+
color?: NuanceColor | AnyString;
|
|
10
|
+
/**
|
|
11
|
+
* Controls width/height depending on orientation
|
|
12
|
+
* @default `'xs'`
|
|
13
|
+
*/
|
|
14
|
+
size?: NuanceSize | AnyString;
|
|
15
|
+
/**
|
|
16
|
+
* Label position
|
|
17
|
+
* @default `'center'`
|
|
18
|
+
*/
|
|
19
|
+
labelPosition?: 'left' | 'center' | 'right';
|
|
20
|
+
/**
|
|
21
|
+
* Divider orientation
|
|
22
|
+
* @default `'horizontal'`
|
|
23
|
+
*/
|
|
24
|
+
orientation?: 'horizontal' | 'vertical';
|
|
25
|
+
/** Visual variant */
|
|
26
|
+
variant?: DividerVariant;
|
|
27
|
+
}
|
|
28
|
+
declare var __VLS_14: {};
|
|
29
|
+
type __VLS_Slots = {} & {
|
|
30
|
+
default?: (props: typeof __VLS_14) => any;
|
|
31
|
+
};
|
|
32
|
+
declare const __VLS_base: import("vue").DefineComponent<DividerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DividerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
33
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
34
|
+
declare const _default: typeof __VLS_export;
|
|
35
|
+
export default _default;
|
|
36
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
37
|
+
new (): {
|
|
38
|
+
$slots: S;
|
|
39
|
+
};
|
|
40
|
+
};
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import { useVarsResolver } from "@nui/composables";
|
|
3
|
+
import { getSize, getThemeColor } from "@nui/utils";
|
|
4
|
+
import Box from "./box.vue";
|
|
5
|
+
const {
|
|
6
|
+
color,
|
|
7
|
+
size,
|
|
8
|
+
labelPosition = "center",
|
|
9
|
+
orientation = "horizontal",
|
|
10
|
+
variant
|
|
11
|
+
} = defineProps({
|
|
12
|
+
color: { type: null, required: false },
|
|
13
|
+
size: { type: [String, Object], required: false },
|
|
14
|
+
labelPosition: { type: String, required: false },
|
|
15
|
+
orientation: { type: String, required: false },
|
|
16
|
+
variant: { type: String, required: false },
|
|
17
|
+
is: { type: null, required: false },
|
|
18
|
+
mod: { type: [Object, Array, null], required: false }
|
|
19
|
+
});
|
|
20
|
+
const style = useVarsResolver((theme) => ({
|
|
21
|
+
root: {
|
|
22
|
+
"--divider-color": color ? getThemeColor(color, theme) : void 0,
|
|
23
|
+
"--divider-border-style": variant,
|
|
24
|
+
"--divider-size": getSize(size, "divider-size")
|
|
25
|
+
}
|
|
26
|
+
}));
|
|
27
|
+
</script>
|
|
28
|
+
|
|
29
|
+
<template>
|
|
30
|
+
<Box
|
|
31
|
+
role='separator'
|
|
32
|
+
:style='style.root'
|
|
33
|
+
:class='$style.root'
|
|
34
|
+
:mod="[{ orientation, 'with-label': !!$slots.default }, mod]"
|
|
35
|
+
>
|
|
36
|
+
<Box
|
|
37
|
+
is='span'
|
|
38
|
+
v-if='$slots.default'
|
|
39
|
+
:class='$style.label'
|
|
40
|
+
:mod='{ position: labelPosition }'
|
|
41
|
+
>
|
|
42
|
+
<slot />
|
|
43
|
+
</Box>
|
|
44
|
+
</Box>
|
|
45
|
+
</template>
|
|
46
|
+
|
|
47
|
+
<style module>
|
|
48
|
+
.root{--divider-size-xs:1px;--divider-size-sm:2px;--divider-size-md:3px;--divider-size-lg:4px;--divider-size-xl:5px;--divider-size:var(--divider-size-xs);@mixin where-light{--divider-color:var(--color-gray-3)}@mixin where-dark{--divider-color:var(--color-dark-4)}}.root:where([data-orientation=horizontal]){border-top:var(--divider-size) var(--divider-border-style,solid) var(--divider-color)}.root:where([data-orientation=vertical]){align-self:stretch;border-inline-start:var(--divider-size) var(--divider-border-style,solid) var(--divider-color);height:auto}.root:where([data-with-label]){border:0}.label{align-items:center;color:var(--color-dimmed);display:flex;font-size:var(--font-size-xs);white-space:nowrap}.label:where([data-position=left]):before{display:none}.label:where([data-position=right]):after{display:none}.label:before{margin-inline-end:var(--spacing-xs)}.label:after,.label:before{border-top:var(--divider-size) var(--divider-border-style,solid) var(--divider-color);content:"";flex:1;height:1px}.label:after{margin-inline-start:var(--spacing-xs)}
|
|
49
|
+
</style>
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import type { AnyString, NuanceColor, NuanceSize } from '@nui/types';
|
|
2
|
+
import type { BoxProps } from './box.vue.js';
|
|
3
|
+
export type DividerVariant = 'solid' | 'dashed' | 'dotted';
|
|
4
|
+
export interface DividerVars {
|
|
5
|
+
root: '--divider-color' | '--divider-border-style' | '--divider-size';
|
|
6
|
+
}
|
|
7
|
+
export interface DividerProps extends BoxProps {
|
|
8
|
+
/** Color from theme */
|
|
9
|
+
color?: NuanceColor | AnyString;
|
|
10
|
+
/**
|
|
11
|
+
* Controls width/height depending on orientation
|
|
12
|
+
* @default `'xs'`
|
|
13
|
+
*/
|
|
14
|
+
size?: NuanceSize | AnyString;
|
|
15
|
+
/**
|
|
16
|
+
* Label position
|
|
17
|
+
* @default `'center'`
|
|
18
|
+
*/
|
|
19
|
+
labelPosition?: 'left' | 'center' | 'right';
|
|
20
|
+
/**
|
|
21
|
+
* Divider orientation
|
|
22
|
+
* @default `'horizontal'`
|
|
23
|
+
*/
|
|
24
|
+
orientation?: 'horizontal' | 'vertical';
|
|
25
|
+
/** Visual variant */
|
|
26
|
+
variant?: DividerVariant;
|
|
27
|
+
}
|
|
28
|
+
declare var __VLS_14: {};
|
|
29
|
+
type __VLS_Slots = {} & {
|
|
30
|
+
default?: (props: typeof __VLS_14) => any;
|
|
31
|
+
};
|
|
32
|
+
declare const __VLS_base: import("vue").DefineComponent<DividerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DividerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
33
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
34
|
+
declare const _default: typeof __VLS_export;
|
|
35
|
+
export default _default;
|
|
36
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
37
|
+
new (): {
|
|
38
|
+
$slots: S;
|
|
39
|
+
};
|
|
40
|
+
};
|
|
@@ -10,6 +10,7 @@ const props = defineProps({
|
|
|
10
10
|
inherit: { type: Boolean, required: false },
|
|
11
11
|
gradient: { type: Object, required: false },
|
|
12
12
|
fz: { type: null, required: false },
|
|
13
|
+
ff: { type: [String, Object], required: false },
|
|
13
14
|
lh: { type: [String, Object], required: false },
|
|
14
15
|
fw: { type: void 0, required: false },
|
|
15
16
|
c: { type: null, required: false },
|
|
@@ -14,6 +14,7 @@ export * from './combobox/index.js';
|
|
|
14
14
|
export type * from './container.vue';
|
|
15
15
|
export type * from './date-time-picker.vue';
|
|
16
16
|
export * from './dialog/index.js';
|
|
17
|
+
export type * from './divider.vue';
|
|
17
18
|
export * from './drawer/index.js';
|
|
18
19
|
export * from './files/index.js';
|
|
19
20
|
export type * from './floating-indicator.vue';
|
|
@@ -27,6 +27,7 @@ const props = defineProps({
|
|
|
27
27
|
inherit: { type: Boolean, required: false },
|
|
28
28
|
gradient: { type: Object, required: false },
|
|
29
29
|
fz: { type: null, required: false },
|
|
30
|
+
ff: { type: [String, Object], required: false },
|
|
30
31
|
lh: { type: [String, Object], required: false },
|
|
31
32
|
fw: { type: void 0, required: false },
|
|
32
33
|
c: { type: null, required: false },
|
|
@@ -10,6 +10,7 @@ const props = defineProps({
|
|
|
10
10
|
inherit: { type: Boolean, required: false },
|
|
11
11
|
gradient: { type: Object, required: false },
|
|
12
12
|
fz: { type: null, required: false },
|
|
13
|
+
ff: { type: [String, Object], required: false },
|
|
13
14
|
lh: { type: [String, Object], required: false },
|
|
14
15
|
fw: { type: void 0, required: false },
|
|
15
16
|
c: { type: null, required: false },
|
|
@@ -371,5 +371,5 @@ defineExpose({
|
|
|
371
371
|
</template>
|
|
372
372
|
|
|
373
373
|
<style module>
|
|
374
|
-
.root{--table-color:var(--color-primary-4);--table-loader-color:var(--table-color);--table-loader-animation:carousel 2s ease-in-out infinite;--table-padding-x:.5rem;--table-padding-y:.5rem;--vertical-align:baseline;--table-active-bg:var(--color-default);--table-c:var(--color-text);overflow:auto;position:relative}.root:where([data-variant=colored]){--table-padding-x:1rem;--table-padding-y:.75rem;--vertical-align:middle;border:1px solid var(--color-default-border);border-radius:var(--radius-default)}.root:not([data-virtualize]) .table{overflow:clip}.root:not([data-virtualize]) .tbody>tr:not(:last-of-type){border-bottom:1px solid var(--color-default-border)}.table{border-collapse:collapse;min-width:100%}.thead{position:relative}.thead[data-loading]:after{animation:var(--table-loader-animation);background-color:alpha(var(--table-loader-color),.75);content:"";height:1px;position:absolute;z-index:1}.thead[data-sticky]{backdrop-filter:blur(8px);background-color:alpha(var(--color-body),.75);position:sticky;top:0;inset-inline:0;z-index:1}.th{color:var(--table-c);font-weight:600;padding-block:var(--table-padding-y);padding-inline:var(--table-padding-x);text-align:left;vertical-align:var(--vertical-align)}.th:has([role=checkbox]){padding-inline-end:0}.root:where([data-variant=colored]) .th{@mixin where-light{background-color:var(--color-gray-
|
|
374
|
+
.root{--table-color:var(--color-primary-4);--table-loader-color:var(--table-color);--table-loader-animation:carousel 2s ease-in-out infinite;--table-padding-x:.5rem;--table-padding-y:.5rem;--vertical-align:baseline;--table-active-bg:var(--color-default);--table-c:var(--color-text);overflow:auto;position:relative}.root:where([data-variant=colored]){--table-padding-x:1rem;--table-padding-y:.75rem;--vertical-align:middle;background-color:var(--color-body);border:1px solid var(--color-default-border);border-radius:var(--radius-default)}.root:not([data-virtualize]) .table{overflow:clip}.root:not([data-virtualize]) .tbody>tr:not(:last-of-type){border-bottom:1px solid var(--color-default-border)}.table{border-collapse:collapse;min-width:100%}.thead{position:relative}.thead[data-loading]:after{animation:var(--table-loader-animation);background-color:alpha(var(--table-loader-color),.75);content:"";height:1px;position:absolute;z-index:1}.thead[data-sticky]{backdrop-filter:blur(8px);background-color:alpha(var(--color-body),.75);position:sticky;top:0;inset-inline:0;z-index:1}.th{color:var(--table-c);font-weight:600;padding-block:var(--table-padding-y);padding-inline:var(--table-padding-x);text-align:left;vertical-align:var(--vertical-align)}.th:has([role=checkbox]){padding-inline-end:0}.root:where([data-variant=colored]) .th{@mixin where-light{background-color:var(--color-gray-1)}@mixin where-dark{background-color:var(--color-dark-6)}}.th[data-pinned],.tr td[data-pinned]{background-color:alpha(var(--color-body),.75);position:sticky;z-index:1}.tbody{isolation:isolate}.tfoot{position:relative}.tfoot[data-sticky]{backdrop-filter:blur(8px);background-color:var(--color-body);bottom:0;inset-inline:0;position:sticky;z-index:1}.tr[data-selectable]:hover{background-color:var(--table-active-bg)}.tr[data-selectable]:focus-visible{outline:1px solid var(--table-color)}.tr[data-selected]{background-color:var(--table-active-bg)}.tr td{color:var(--table-c);padding-block:var(--table-padding-y);padding-inline:var(--table-padding-x);vertical-align:var(--vertical-align);white-space:nowrap}.tr td:has([role=checkbox]){padding-inline-end:0}.separator{background-color:var(--color-default-border);height:1px;left:0;position:absolute;width:100%;z-index:1}.empty,.loading{padding-inline:1.5rem;text-align:center}@keyframes carousel{0%{transform:translate(-100%);width:50%}to{transform:translate(200%);width:50%}}
|
|
375
375
|
</style>
|
|
@@ -19,6 +19,8 @@ export interface TextProps extends BoxProps {
|
|
|
19
19
|
gradient?: NuanceGradient;
|
|
20
20
|
/** Font size token */
|
|
21
21
|
fz?: NuanceFontSize | `h${TitleOrder}` | AnyString;
|
|
22
|
+
/** Font family token @default 'text' */
|
|
23
|
+
ff?: 'mono' | 'headings' | 'text' | AnyString;
|
|
22
24
|
/** Line height token */
|
|
23
25
|
lh?: NuanceSize | AnyString;
|
|
24
26
|
/** Font weight */
|
|
@@ -13,6 +13,7 @@ const {
|
|
|
13
13
|
variant,
|
|
14
14
|
gradient,
|
|
15
15
|
fz,
|
|
16
|
+
ff,
|
|
16
17
|
fw,
|
|
17
18
|
lh,
|
|
18
19
|
c,
|
|
@@ -26,6 +27,7 @@ const {
|
|
|
26
27
|
inherit: { type: Boolean, required: false },
|
|
27
28
|
gradient: { type: Object, required: false },
|
|
28
29
|
fz: { type: null, required: false },
|
|
30
|
+
ff: { type: [String, Object], required: false },
|
|
29
31
|
lh: { type: [String, Object], required: false },
|
|
30
32
|
fw: { type: void 0, required: false },
|
|
31
33
|
c: { type: null, required: false },
|
|
@@ -43,6 +45,7 @@ const _mod = computed(() => [{
|
|
|
43
45
|
const style = useVarsResolver((theme) => ({
|
|
44
46
|
root: {
|
|
45
47
|
"--text-fz": getFontSize(fz || size),
|
|
48
|
+
"--text-ff": ff ? `var(--font-family${ff === "text" ? "" : ff})` : void 0,
|
|
46
49
|
"--text-fw": fw?.toString(),
|
|
47
50
|
"--text-lh": getLineHeight(lh || size),
|
|
48
51
|
"--text-gradient": variant === "gradient" ? getGradient(gradient, theme) : void 0,
|
|
@@ -59,5 +62,5 @@ const style = useVarsResolver((theme) => ({
|
|
|
59
62
|
</template>
|
|
60
63
|
|
|
61
64
|
<style module>
|
|
62
|
-
.root{--text-fz:var(--font-size-md);--text-lh:var(--line-height-md);--text-color:inherit;--text-fw:normal;--text-gradient:none;--text-line-clamp:none;color:var(--text-color);font-size:var(--text-fz);font-weight:var(--text-fw);line-height:var(--text-lh);margin:0;padding:0;text-decoration:none;-webkit-tap-highlight-color:transparent}.root:where([data-truncate]){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.root:where([data-truncate=start]){direction:rtl;text-align:right;@mixin where-rtl{direction:ltr;text-align:left}}.root:where([data-variant=gradient]){-webkit-background-clip:text;background-clip:text;background-image:var(--text-gradient);-webkit-text-fill-color:transparent}.root:where([data-line-clamp]){display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--text-line-clamp);text-overflow:ellipsis}.root:where([data-inherit]){color:inherit;font-size:inherit;font-weight:inherit;line-height:inherit}.root:where([data-inline]){line-height:1}
|
|
65
|
+
.root{--text-fz:var(--font-size-md);--text-lh:var(--line-height-md);--text-color:inherit;--text-fw:normal;--text-gradient:none;--text-line-clamp:none;color:var(--text-color);font-family:var(--text-ff,var(--font-family));font-size:var(--text-fz);font-weight:var(--text-fw);line-height:var(--text-lh);margin:0;padding:0;text-decoration:none;-webkit-tap-highlight-color:transparent}.root:where([data-truncate]){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.root:where([data-truncate=start]){direction:rtl;text-align:right;@mixin where-rtl{direction:ltr;text-align:left}}.root:where([data-variant=gradient]){-webkit-background-clip:text;background-clip:text;background-image:var(--text-gradient);-webkit-text-fill-color:transparent}.root:where([data-line-clamp]){display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--text-line-clamp);text-overflow:ellipsis}.root:where([data-inherit]){color:inherit;font-size:inherit;font-weight:inherit;line-height:inherit}.root:where([data-inline]){line-height:1}
|
|
63
66
|
</style>
|
|
@@ -19,6 +19,8 @@ export interface TextProps extends BoxProps {
|
|
|
19
19
|
gradient?: NuanceGradient;
|
|
20
20
|
/** Font size token */
|
|
21
21
|
fz?: NuanceFontSize | `h${TitleOrder}` | AnyString;
|
|
22
|
+
/** Font family token @default 'text' */
|
|
23
|
+
ff?: 'mono' | 'headings' | 'text' | AnyString;
|
|
22
24
|
/** Line height token */
|
|
23
25
|
lh?: NuanceSize | AnyString;
|
|
24
26
|
/** Font weight */
|
|
@@ -5,6 +5,7 @@ const {
|
|
|
5
5
|
order = "2",
|
|
6
6
|
textWrap,
|
|
7
7
|
size,
|
|
8
|
+
ff = "headings",
|
|
8
9
|
...rest
|
|
9
10
|
} = defineProps({
|
|
10
11
|
order: { type: String, required: false },
|
|
@@ -16,6 +17,7 @@ const {
|
|
|
16
17
|
inherit: { type: Boolean, required: false },
|
|
17
18
|
gradient: { type: Object, required: false },
|
|
18
19
|
fz: { type: null, required: false },
|
|
20
|
+
ff: { type: [String, Object], required: false },
|
|
19
21
|
lh: { type: [String, Object], required: false },
|
|
20
22
|
fw: { type: void 0, required: false },
|
|
21
23
|
c: { type: null, required: false },
|
|
@@ -29,6 +31,7 @@ const style = computed(() => ({ "--title-text-wrap": textWrap }));
|
|
|
29
31
|
<Text
|
|
30
32
|
:is='`h${order}`'
|
|
31
33
|
v-bind='rest'
|
|
34
|
+
:ff
|
|
32
35
|
:size='size || `h${order}`'
|
|
33
36
|
:class='$style.root'
|
|
34
37
|
:style
|
|
@@ -1 +1 @@
|
|
|
1
|
-
*,:after,:before{box-sizing:border-box}*{margin:0}@media (prefers-reduced-motion:no-preference){html{interpolate-size:allow-keywords}}body{background-color:var(--color-body);color:var(--color-text);font-family:var(--font-family),sans-serif;font-size:var(--font-size-md);line-height:var(--line-height);margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media screen and (max-device-width:em(500px)){body{-webkit-text-size-adjust:100%}}body:has(dialog[data-modal][open]){overflow:hidden}canvas,img,picture,svg,video{display:block;max-width:100%}button,input,select,textarea{font:inherit}button{border:0}button,select{text-transform:none}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}ol,ul{list-style:none;margin:0;padding:0}
|
|
1
|
+
*,:after,:before{box-sizing:border-box}*{margin:0}@media (prefers-reduced-motion:no-preference){html{interpolate-size:allow-keywords}}body{background-color:var(--color-body-bg);color:var(--color-text);font-family:var(--font-family),sans-serif;font-size:var(--font-size-md);line-height:var(--line-height);margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media screen and (max-device-width:em(500px)){body{-webkit-text-size-adjust:100%}}body:has(dialog[data-modal][open]){overflow:hidden}canvas,img,picture,svg,video{display:block;max-width:100%}button,input,select,textarea{font:inherit}button{border:0}button,select{text-transform:none}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}ol,ul{list-style:none;margin:0;padding:0}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{@mixin dark-root{--primary-color-contrast:var(--color-white);--color-bright:var(--color-white);--color-text:var(--color-dark-0);--color-body:var(--color-dark-7);--color-
|
|
1
|
+
:root{@mixin dark-root{--primary-color-contrast:var(--color-white);--color-bright:var(--color-white);--color-text:var(--color-dark-0);--color-body:var(--color-dark-7);--color-body-bg:var(--color-dark-9);--color-error:var(--color-red-8);--color-placeholder:var(--color-dark-3);--color-anchor:var(--color-blue-4);--color-default:var(--color-dark-6);--color-default-hover:var(--color-dark-5);--color-default-color:var(--color-white);--color-default-border:var(--color-dark-4);--color-dimmed:var(--color-dark-2);--color-disabled:var(--color-dark-6);--color-disabled-text:var(--color-dark-3);--color-disabled-border:var(--color-dark-4);--color-dark-color:var(--color-dark-4);--color-dark-filled:var(--color-dark-8);--color-dark-filled-hover:var(--color-dark-9);--color-dark-light:alpha(var(--color-dark-6),0.15);--color-dark-light-hover:alpha(var(--color-dark-6),0.2);--color-dark-light-color:var(--color-dark-0);--color-dark-outline:var(--color-dark-4);--color-dark-outline-hover:alpha(var(--color-dark-4),0.05);--color-gray-color:var(--color-gray-4);--color-gray-filled:var(--color-gray-8);--color-gray-filled-hover:var(--color-gray-9);--color-gray-light:alpha(var(--color-gray-6),0.15);--color-gray-light-hover:alpha(var(--color-gray-6),0.2);--color-gray-light-color:var(--color-gray-0);--color-gray-outline:var(--color-gray-4);--color-gray-outline-hover:alpha(var(--color-gray-4),0.05);--color-red-color:var(--color-red-4);--color-red-filled:var(--color-red-8);--color-red-filled-hover:var(--color-red-9);--color-red-light:alpha(var(--color-red-8),0.15);--color-red-light-hover:alpha(var(--color-red-8),0.2);--color-red-light-color:var(--color-red-0);--color-red-outline:var(--color-red-4);--color-red-outline-hover:alpha(var(--color-red-4),0.05);--color-pink-color:var(--color-pink-4);--color-pink-filled:var(--color-pink-8);--color-pink-filled-hover:var(--color-pink-9);--color-pink-light:alpha(var(--color-pink-8),0.15);--color-pink-light-hover:alpha(var(--color-pink-8),0.2);--color-pink-light-color:var(--color-pink-0);--color-pink-outline:var(--color-pink-4);--color-pink-outline-hover:alpha(var(--color-pink-4),0.05);--color-grape-color:var(--color-grape-4);--color-grape-filled:var(--color-grape-8);--color-grape-filled-hover:var(--color-grape-9);--color-grape-light:alpha(var(--color-grape-8),0.15);--color-grape-light-hover:alpha(var(--color-grape-8),0.2);--color-grape-light-color:var(--color-grape-0);--color-grape-outline:var(--color-grape-4);--color-grape-outline-hover:alpha(var(--color-grape-4),0.05);--color-violet-color:var(--color-violet-4);--color-violet-filled:var(--color-violet-8);--color-violet-filled-hover:var(--color-violet-9);--color-violet-light:alpha(var(--color-violet-8),0.15);--color-violet-light-hover:alpha(var(--color-violet-8),0.2);--color-violet-light-color:var(--color-violet-0);--color-violet-outline:var(--color-violet-4);--color-violet-outline-hover:alpha(var(--color-violet-4),0.05);--color-indigo-color:var(--color-indigo-4);--color-indigo-filled:var(--color-indigo-8);--color-indigo-filled-hover:var(--color-indigo-9);--color-indigo-light:alpha(var(--color-indigo-8),0.15);--color-indigo-light-hover:alpha(var(--color-indigo-8),0.2);--color-indigo-light-color:var(--color-indigo-0);--color-indigo-outline:var(--color-indigo-4);--color-indigo-outline-hover:alpha(var(--color-indigo-4),0.05);--color-blue-color:var(--color-blue-4);--color-blue-filled:var(--color-blue-8);--color-blue-filled-hover:var(--color-blue-9);--color-blue-light:alpha(var(--color-blue-8),0.15);--color-blue-light-hover:alpha(var(--color-blue-8),0.2);--color-blue-light-color:var(--color-blue-0);--color-blue-outline:var(--color-blue-4);--color-blue-outline-hover:alpha(var(--color-blue-4),0.05);--color-cyan-color:var(--color-cyan-4);--color-cyan-filled:var(--color-cyan-8);--color-cyan-filled-hover:var(--color-cyan-9);--color-cyan-light:alpha(var(--color-cyan-8),0.15);--color-cyan-light-hover:alpha(var(--color-cyan-8),0.2);--color-cyan-light-color:var(--color-cyan-0);--color-cyan-outline:var(--color-cyan-4);--color-cyan-outline-hover:alpha(var(--color-cyan-4),0.05);--color-teal-color:var(--color-teal-4);--color-teal-filled:var(--color-teal-8);--color-teal-filled-hover:var(--color-teal-9);--color-teal-light:alpha(var(--color-teal-8),0.15);--color-teal-light-hover:alpha(var(--color-teal-8),0.2);--color-teal-light-color:var(--color-teal-0);--color-teal-outline:var(--color-teal-4);--color-teal-outline-hover:alpha(var(--color-teal-4),0.05);--color-green-color:var(--color-green-4);--color-green-filled:var(--color-green-8);--color-green-filled-hover:var(--color-green-9);--color-green-light:alpha(var(--color-green-8),0.15);--color-green-light-hover:alpha(var(--color-green-8),0.2);--color-green-light-color:var(--color-green-0);--color-green-outline:var(--color-green-4);--color-green-outline-hover:alpha(var(--color-green-4),0.05);--color-lime-color:var(--color-lime-4);--color-lime-filled:var(--color-lime-8);--color-lime-filled-hover:var(--color-lime-9);--color-lime-light:alpha(var(--color-lime-8),0.15);--color-lime-light-hover:alpha(var(--color-lime-8),0.2);--color-lime-light-color:var(--color-lime-0);--color-lime-outline:var(--color-lime-4);--color-lime-outline-hover:alpha(var(--color-lime-4),0.05);--color-yellow-color:var(--color-yellow-4);--color-yellow-filled:var(--color-yellow-8);--color-yellow-filled-hover:var(--color-yellow-9);--color-yellow-light:alpha(var(--color-yellow-8),0.15);--color-yellow-light-hover:alpha(var(--color-yellow-8),0.2);--color-yellow-light-color:var(--color-yellow-0);--color-yellow-outline:var(--color-yellow-4);--color-yellow-outline-hover:alpha(var(--color-yellow-4),0.05);--color-orange-color:var(--color-orange-4);--color-orange-filled:var(--color-orange-8);--color-orange-filled-hover:var(--color-orange-9);--color-orange-light:alpha(var(--color-orange-8),0.15);--color-orange-light-hover:alpha(var(--color-orange-8),0.2);--color-orange-light-color:var(--color-orange-0);--color-orange-outline:var(--color-orange-4);--color-orange-outline-hover:alpha(var(--color-orange-4),0.05)}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{@mixin light-root{--primary-color-contrast:var(--color-white);--color-bright:var(--color-black);--color-text:#000;--color-body:#fff;--color-error:var(--color-red-6);--color-placeholder:var(--color-gray-5);--color-anchor:var(--color-blue-6);--color-default:var(--color-white);--color-default-hover:var(--color-gray-0);--color-default-color:var(--color-black);--color-default-border:var(--color-gray-4);--color-dimmed:var(--color-gray-6);--color-disabled:var(--color-gray-2);--color-disabled-text:var(--color-gray-5);--color-disabled-border:var(--color-gray-3);--color-dark-color:var(--color-dark-filled);--color-dark-filled:var(--color-dark-6);--color-dark-filled-hover:var(--color-dark-7);--color-dark-light:alpha(var(--color-dark-6),0.1);--color-dark-light-hover:alpha(var(--color-dark-6),0.12);--color-dark-light-color:var(--color-dark-6);--color-dark-outline:var(--color-dark-6);--color-dark-outline-hover:alpha(var(--color-dark-6),0.05);--color-gray-color:var(--color-gray-filled);--color-gray-filled:var(--color-gray-6);--color-gray-filled-hover:var(--color-gray-7);--color-gray-light:alpha(var(--color-gray-6),0.1);--color-gray-light-hover:alpha(var(--color-gray-6),0.12);--color-gray-light-color:var(--color-gray-8);--color-gray-outline:var(--color-gray-8);--color-gray-outline-hover:alpha(var(--color-gray-6),0.05);--color-red-color:var(--color-red-filled);--color-red-filled:var(--color-red-6);--color-red-filled-hover:var(--color-red-7);--color-red-light:alpha(var(--color-red-8),.1);--color-red-light-hover:alpha(var(--color-red-8),.12);--color-red-light-color:var(--color-red-6);--color-red-outline:var(--color-red-6);--color-red-outline-hover:alpha(var(--color-red-8),.01);--color-pink-color:var(--color-pink-filled);--color-pink-filled:var(--color-pink-6);--color-pink-filled-hover:var(--color-pink-7);--color-pink-light:alpha(var(--color-pink-6),0.1);--color-pink-light-hover:alpha(var(--color-pink-6),0.12);--color-pink-light-color:var(--color-pink-6);--color-pink-outline:var(--color-pink-6);--color-pink-outline-hover:alpha(var(--color-pink-6),0.05);--color-grape-color:var(--color-grape-filled);--color-grape-filled:var(--color-grape-6);--color-grape-filled-hover:var(--color-grape-7);--color-grape-light:alpha(var(--color-grape-6),0.1);--color-grape-light-hover:alpha(var(--color-grape-6),0.12);--color-grape-light-color:var(--color-grape-6);--color-grape-outline:var(--color-grape-6);--color-grape-outline-hover:alpha(var(--color-grape-6),0.05);--color-violet-color:var(--color-violet-filled);--color-violet-filled:var(--color-violet-6);--color-violet-filled-hover:var(--color-violet-7);--color-violet-light:alpha(var(--color-violet-6),0.1);--color-violet-light-hover:alpha(var(--color-violet-6),0.12);--color-violet-light-color:var(--color-violet-6);--color-violet-outline:var(--color-violet-6);--color-violet-outline-hover:alpha(var(--color-violet-6),0.05);--color-indigo-color:var(--color-indigo-filled);--color-indigo-filled:var(--color-indigo-6);--color-indigo-filled-hover:var(--color-indigo-7);--color-indigo-light:alpha(var(--color-indigo-6),0.1);--color-indigo-light-hover:alpha(var(--color-indigo-6),0.12);--color-indigo-light-color:var(--color-indigo-6);--color-indigo-outline:var(--color-indigo-6);--color-indigo-outline-hover:alpha(var(--color-indigo-6),0.05);--color-blue-color:var(--color-blue-filled);--color-blue-filled:var(--color-blue-6);--color-blue-filled-hover:var(--color-blue-7);--color-blue-light:alpha(var(--color-blue-6),0.1);--color-blue-light-hover:alpha(var(--color-blue-6),0.12);--color-blue-light-color:var(--color-blue-6);--color-blue-outline:var(--color-blue-6);--color-blue-outline-hover:alpha(var(--color-blue-6),0.05);--color-cyan-color:var(--color-cyan-filled);--color-cyan-filled:var(--color-cyan-6);--color-cyan-filled-hover:var(--color-cyan-7);--color-cyan-light:alpha(var(--color-cyan-6),0.1);--color-cyan-light-hover:alpha(var(--color-cyan-6),0.12);--color-cyan-light-color:var(--color-cyan-6);--color-cyan-outline:var(--color-cyan-6);--color-cyan-outline-hover:alpha(var(--color-cyan-6),0.05);--color-teal-color:var(--color-teal-filled);--color-teal-filled:var(--color-teal-6);--color-teal-filled-hover:var(--color-teal-7);--color-teal-light:alpha(var(--color-teal-6),0.1);--color-teal-light-hover:alpha(var(--color-teal-6),0.12);--color-teal-light-color:var(--color-teal-6);--color-teal-outline:var(--color-teal-6);--color-teal-outline-hover:alpha(var(--color-teal-6),0.05);--color-green-color:var(--color-green-filled);--color-green-filled:var(--color-green-6);--color-green-filled-hover:var(--color-green-7);--color-green-light:alpha(var(--color-green-6),0.1);--color-green-light-hover:alpha(var(--color-green-6),0.12);--color-green-light-color:var(--color-green-6);--color-green-outline:var(--color-green-6);--color-green-outline-hover:alpha(var(--color-green-6),0.05);--color-lime-color:var(--color-lime-filled);--color-lime-filled:var(--color-lime-6);--color-lime-filled-hover:var(--color-lime-7);--color-lime-light:alpha(var(--color-lime-6),0.1);--color-lime-light-hover:alpha(var(--color-lime-6),0.12);--color-lime-light-color:var(--color-lime-6);--color-lime-outline:var(--color-lime-6);--color-lime-outline-hover:alpha(var(--color-lime-6),0.05);--color-yellow-color:var(--color-yellow-filled);--color-yellow-filled:var(--color-yellow-6);--color-yellow-filled-hover:var(--color-yellow-7);--color-yellow-light:alpha(var(--color-yellow-6),0.1);--color-yellow-light-hover:alpha(var(--color-yellow-6),0.12);--color-yellow-light-color:var(--color-yellow-6);--color-yellow-outline:var(--color-yellow-6);--color-yellow-outline-hover:alpha(var(--color-yellow-6),0.05);--color-orange-color:var(--color-orange-filled);--color-orange-filled:var(--color-orange-6);--color-orange-filled-hover:var(--color-orange-7);--color-orange-light:alpha(var(--color-orange-6),0.1);--color-orange-light-hover:alpha(var(--color-orange-6),0.12);--color-orange-light-color:var(--color-orange-6);--color-orange-outline:var(--color-orange-6);--color-orange-outline-hover:alpha(var(--color-orange-6),0.05)}}
|
|
1
|
+
:root{@mixin light-root{--primary-color-contrast:var(--color-white);--color-bright:var(--color-black);--color-text:#000;--color-body:#fff;--color-body-bg:var(--color-gray-0);--color-error:var(--color-red-6);--color-placeholder:var(--color-gray-5);--color-anchor:var(--color-blue-6);--color-default:var(--color-white);--color-default-hover:var(--color-gray-0);--color-default-color:var(--color-black);--color-default-border:var(--color-gray-4);--color-dimmed:var(--color-gray-6);--color-disabled:var(--color-gray-2);--color-disabled-text:var(--color-gray-5);--color-disabled-border:var(--color-gray-3);--color-dark-color:var(--color-dark-filled);--color-dark-filled:var(--color-dark-6);--color-dark-filled-hover:var(--color-dark-7);--color-dark-light:alpha(var(--color-dark-6),0.1);--color-dark-light-hover:alpha(var(--color-dark-6),0.12);--color-dark-light-color:var(--color-dark-6);--color-dark-outline:var(--color-dark-6);--color-dark-outline-hover:alpha(var(--color-dark-6),0.05);--color-gray-color:var(--color-gray-filled);--color-gray-filled:var(--color-gray-6);--color-gray-filled-hover:var(--color-gray-7);--color-gray-light:alpha(var(--color-gray-6),0.1);--color-gray-light-hover:alpha(var(--color-gray-6),0.12);--color-gray-light-color:var(--color-gray-8);--color-gray-outline:var(--color-gray-8);--color-gray-outline-hover:alpha(var(--color-gray-6),0.05);--color-red-color:var(--color-red-filled);--color-red-filled:var(--color-red-6);--color-red-filled-hover:var(--color-red-7);--color-red-light:alpha(var(--color-red-8),.1);--color-red-light-hover:alpha(var(--color-red-8),.12);--color-red-light-color:var(--color-red-6);--color-red-outline:var(--color-red-6);--color-red-outline-hover:alpha(var(--color-red-8),.01);--color-pink-color:var(--color-pink-filled);--color-pink-filled:var(--color-pink-6);--color-pink-filled-hover:var(--color-pink-7);--color-pink-light:alpha(var(--color-pink-6),0.1);--color-pink-light-hover:alpha(var(--color-pink-6),0.12);--color-pink-light-color:var(--color-pink-6);--color-pink-outline:var(--color-pink-6);--color-pink-outline-hover:alpha(var(--color-pink-6),0.05);--color-grape-color:var(--color-grape-filled);--color-grape-filled:var(--color-grape-6);--color-grape-filled-hover:var(--color-grape-7);--color-grape-light:alpha(var(--color-grape-6),0.1);--color-grape-light-hover:alpha(var(--color-grape-6),0.12);--color-grape-light-color:var(--color-grape-6);--color-grape-outline:var(--color-grape-6);--color-grape-outline-hover:alpha(var(--color-grape-6),0.05);--color-violet-color:var(--color-violet-filled);--color-violet-filled:var(--color-violet-6);--color-violet-filled-hover:var(--color-violet-7);--color-violet-light:alpha(var(--color-violet-6),0.1);--color-violet-light-hover:alpha(var(--color-violet-6),0.12);--color-violet-light-color:var(--color-violet-6);--color-violet-outline:var(--color-violet-6);--color-violet-outline-hover:alpha(var(--color-violet-6),0.05);--color-indigo-color:var(--color-indigo-filled);--color-indigo-filled:var(--color-indigo-6);--color-indigo-filled-hover:var(--color-indigo-7);--color-indigo-light:alpha(var(--color-indigo-6),0.1);--color-indigo-light-hover:alpha(var(--color-indigo-6),0.12);--color-indigo-light-color:var(--color-indigo-6);--color-indigo-outline:var(--color-indigo-6);--color-indigo-outline-hover:alpha(var(--color-indigo-6),0.05);--color-blue-color:var(--color-blue-filled);--color-blue-filled:var(--color-blue-6);--color-blue-filled-hover:var(--color-blue-7);--color-blue-light:alpha(var(--color-blue-6),0.1);--color-blue-light-hover:alpha(var(--color-blue-6),0.12);--color-blue-light-color:var(--color-blue-6);--color-blue-outline:var(--color-blue-6);--color-blue-outline-hover:alpha(var(--color-blue-6),0.05);--color-cyan-color:var(--color-cyan-filled);--color-cyan-filled:var(--color-cyan-6);--color-cyan-filled-hover:var(--color-cyan-7);--color-cyan-light:alpha(var(--color-cyan-6),0.1);--color-cyan-light-hover:alpha(var(--color-cyan-6),0.12);--color-cyan-light-color:var(--color-cyan-6);--color-cyan-outline:var(--color-cyan-6);--color-cyan-outline-hover:alpha(var(--color-cyan-6),0.05);--color-teal-color:var(--color-teal-filled);--color-teal-filled:var(--color-teal-6);--color-teal-filled-hover:var(--color-teal-7);--color-teal-light:alpha(var(--color-teal-6),0.1);--color-teal-light-hover:alpha(var(--color-teal-6),0.12);--color-teal-light-color:var(--color-teal-6);--color-teal-outline:var(--color-teal-6);--color-teal-outline-hover:alpha(var(--color-teal-6),0.05);--color-green-color:var(--color-green-filled);--color-green-filled:var(--color-green-6);--color-green-filled-hover:var(--color-green-7);--color-green-light:alpha(var(--color-green-6),0.1);--color-green-light-hover:alpha(var(--color-green-6),0.12);--color-green-light-color:var(--color-green-6);--color-green-outline:var(--color-green-6);--color-green-outline-hover:alpha(var(--color-green-6),0.05);--color-lime-color:var(--color-lime-filled);--color-lime-filled:var(--color-lime-6);--color-lime-filled-hover:var(--color-lime-7);--color-lime-light:alpha(var(--color-lime-6),0.1);--color-lime-light-hover:alpha(var(--color-lime-6),0.12);--color-lime-light-color:var(--color-lime-6);--color-lime-outline:var(--color-lime-6);--color-lime-outline-hover:alpha(var(--color-lime-6),0.05);--color-yellow-color:var(--color-yellow-filled);--color-yellow-filled:var(--color-yellow-6);--color-yellow-filled-hover:var(--color-yellow-7);--color-yellow-light:alpha(var(--color-yellow-6),0.1);--color-yellow-light-hover:alpha(var(--color-yellow-6),0.12);--color-yellow-light-color:var(--color-yellow-6);--color-yellow-outline:var(--color-yellow-6);--color-yellow-outline-hover:alpha(var(--color-yellow-6),0.05);--color-orange-color:var(--color-orange-filled);--color-orange-filled:var(--color-orange-6);--color-orange-filled-hover:var(--color-orange-7);--color-orange-light:alpha(var(--color-orange-6),0.1);--color-orange-light-hover:alpha(var(--color-orange-6),0.12);--color-orange-light-color:var(--color-orange-6);--color-orange-outline:var(--color-orange-6);--color-orange-outline-hover:alpha(var(--color-orange-6),0.05)}}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { AnyString, NuanceColor, NuanceGradient, NuanceTheme } from '@nui/types';
|
|
2
2
|
export interface VariantColorResolverOptions {
|
|
3
3
|
color: NuanceColor | AnyString | undefined;
|
|
4
|
-
variant: 'filled' | 'light' | 'outline' | 'subtle' | 'default' | 'gradient' | 'gradient-outline';
|
|
4
|
+
variant: 'filled' | 'light' | 'outline' | 'light-outline' | 'subtle' | 'default' | 'gradient' | 'gradient-outline';
|
|
5
5
|
gradient?: NuanceGradient;
|
|
6
6
|
theme: NuanceTheme;
|
|
7
7
|
}
|
|
@@ -57,6 +57,22 @@ export function createVariantColorResolver({
|
|
|
57
57
|
border: `1px solid var(--color-${parsed.color}-${parsed.shade})`
|
|
58
58
|
};
|
|
59
59
|
}
|
|
60
|
+
if (variant === "light-outline") {
|
|
61
|
+
if (parsed.shade === void 0) {
|
|
62
|
+
return {
|
|
63
|
+
background: `var(--color-${color}-light)`,
|
|
64
|
+
hover: `var(--color-${color}-light-hover)`,
|
|
65
|
+
text: `var(--color-${color}-light-color)`,
|
|
66
|
+
border: `1px solid var(--color-${color}-outline)`
|
|
67
|
+
};
|
|
68
|
+
}
|
|
69
|
+
return {
|
|
70
|
+
background: `color-mix(var(--color-${parsed.color}-${parsed.shade}), .1)`,
|
|
71
|
+
hover: `color-mix(var(--color-${parsed.color}-${parsed.shade}), .12)`,
|
|
72
|
+
text: `var(--color-${parsed.color}-${Math.min(parsed.shade, 6)})`,
|
|
73
|
+
border: `1px solid var(--color-${parsed.color}-${parsed.shade})`
|
|
74
|
+
};
|
|
75
|
+
}
|
|
60
76
|
if (variant === "subtle") {
|
|
61
77
|
if (parsed.shade === void 0) {
|
|
62
78
|
return {
|