@marianmeres/stuic 1.119.0 → 1.120.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/components/AlertConfirmPrompt/AlertConfirmPrompt.svelte +12 -11
- package/dist/components/Button/Button.svelte +5 -1
- package/dist/components/DismissibleMessage/DismissibleMessage.svelte +24 -24
- package/dist/components/Input/FieldCheckbox.svelte +1 -1
- package/dist/components/Input/XFieldRadioInternal.svelte +2 -2
- package/package.json +1 -1
|
@@ -25,8 +25,14 @@ export class AlertConfirmPromptConfig {
|
|
|
25
25
|
shadow-xl
|
|
26
26
|
focus-within:outline-0 focus-within:ring-0
|
|
27
27
|
bg-white
|
|
28
|
-
dark:bg-black
|
|
29
|
-
|
|
28
|
+
dark:bg-black
|
|
29
|
+
|
|
30
|
+
text-black
|
|
31
|
+
dark:text-white
|
|
32
|
+
|
|
33
|
+
border border-white
|
|
34
|
+
dark:border-white/20
|
|
35
|
+
`,
|
|
30
36
|
icon: `
|
|
31
37
|
size-12 sm:size-10
|
|
32
38
|
mt-1 mb-4 sm:my-0 sm:mr-5
|
|
@@ -34,24 +40,19 @@ export class AlertConfirmPromptConfig {
|
|
|
34
40
|
flex flex-shrink-0 items-center justify-center
|
|
35
41
|
rounded-full
|
|
36
42
|
|
|
37
|
-
bg-
|
|
38
|
-
dark:bg-
|
|
43
|
+
bg-black/10 text-black/80
|
|
44
|
+
dark:bg-white/20 dark:text-white/80
|
|
39
45
|
`,
|
|
40
46
|
contentBlock: `mt-3 sm:mt-0 sm:flex-1`,
|
|
41
47
|
title: `
|
|
42
48
|
text-center sm:text-left
|
|
43
49
|
text-base font-semibold leading-6
|
|
44
|
-
|
|
45
|
-
text-black/90
|
|
46
|
-
dark:text-white/90
|
|
47
50
|
`,
|
|
48
51
|
content: `
|
|
49
52
|
mt-2 mx-3 sm:mx-0
|
|
50
53
|
text-center sm:text-left
|
|
51
54
|
text-sm
|
|
52
|
-
|
|
53
|
-
text-black/75
|
|
54
|
-
dark:text-white/75
|
|
55
|
+
opacity-75
|
|
55
56
|
`,
|
|
56
57
|
inputBox: `mt-3`,
|
|
57
58
|
inputField: `m-0`,
|
|
@@ -65,7 +66,7 @@ export class AlertConfirmPromptConfig {
|
|
|
65
66
|
spinnerBox: `
|
|
66
67
|
absolute inset-0 flex justify-center items-center
|
|
67
68
|
rounded-lg
|
|
68
|
-
|
|
69
|
+
|
|
69
70
|
bg-white/75
|
|
70
71
|
dark:bg-black/75
|
|
71
72
|
`
|
|
@@ -50,8 +50,12 @@ export class ButtonConfig {
|
|
|
50
50
|
// to be defined at consumer level...
|
|
51
51
|
static variant = {
|
|
52
52
|
primary: `
|
|
53
|
-
|
|
53
|
+
bg-stuic-primary text-stuic-on-primary
|
|
54
54
|
dark:bg-stuic-primary-dark dark:text-stuic-on-primary-dark
|
|
55
|
+
`.trim(),
|
|
56
|
+
secondary: `
|
|
57
|
+
bg-stuic-secondary text-stuic-on-secondary
|
|
58
|
+
dark:bg-stuic-secondary-dark dark:text-stuic-on-secondary-dark
|
|
55
59
|
`.trim()
|
|
56
60
|
};
|
|
57
61
|
}
|
|
@@ -3,30 +3,30 @@ import { twMerge } from "tailwind-merge";
|
|
|
3
3
|
import Thc, { isTHCNotEmpty } from "../Thc/Thc.svelte";
|
|
4
4
|
import X from "../X/X.svelte";
|
|
5
5
|
const themes = {
|
|
6
|
-
primary: "bg-stuic-primary
|
|
7
|
-
secondary: "bg-stuic-secondary
|
|
8
|
-
slate: "bg-slate-100 text-slate-800
|
|
9
|
-
gray: "bg-gray-100 text-gray-800
|
|
10
|
-
zinc: "bg-zinc-100 text-zinc-800
|
|
11
|
-
neutral: "bg-neutral-100 text-neutral-800
|
|
12
|
-
stone: "bg-stone-100 text-stone-800
|
|
13
|
-
red: "bg-red-100 text-red-800
|
|
14
|
-
orange: "bg-orange-100 text-orange-800
|
|
15
|
-
amber: "bg-amber-100 text-amber-800
|
|
16
|
-
yellow: "bg-yellow-100 text-yellow-800
|
|
17
|
-
lime: "bg-lime-100 text-lime-800
|
|
18
|
-
green: "bg-green-100 text-green-800
|
|
19
|
-
emerald: "bg-emerald-100 text-emerald-800
|
|
20
|
-
teal: "bg-teal-100 text-teal-800
|
|
21
|
-
cyan: "bg-cyan-100 text-cyan-800
|
|
22
|
-
sky: "bg-sky-100 text-sky-800
|
|
23
|
-
blue: "bg-blue-100 text-blue-800
|
|
24
|
-
indigo: "bg-indigo-100 text-indigo-800
|
|
25
|
-
violet: "bg-violet-100 text-violet-800
|
|
26
|
-
purple: "bg-purple-100 text-purple-800
|
|
27
|
-
fuchsia: "bg-fuchsia-100 text-fuchsia-800
|
|
28
|
-
pink: "bg-pink-100 text-pink-800
|
|
29
|
-
rose: "bg-rose-100 text-rose-800
|
|
6
|
+
primary: "bg-stuic-primary text-stuic-on-primary dark:bg-stuic-primary-dark dark:text-stuic-on-primary-dark",
|
|
7
|
+
secondary: "bg-stuic-secondary text-stuic-on-secondary dark:bg-stuic-secondary-dark dark:text-stuic-on-secondary-dark",
|
|
8
|
+
slate: "bg-slate-100 text-slate-800 dark:bg-slate-700 dark:text-slate-100",
|
|
9
|
+
gray: "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-100",
|
|
10
|
+
zinc: "bg-zinc-100 text-zinc-800 dark:bg-zinc-700 dark:text-zinc-100",
|
|
11
|
+
neutral: "bg-neutral-100 text-neutral-800 dark:bg-neutral-700 dark:text-neutral-100",
|
|
12
|
+
stone: "bg-stone-100 text-stone-800 dark:bg-stone-700 dark:text-stone-100",
|
|
13
|
+
red: "bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100",
|
|
14
|
+
orange: "bg-orange-100 text-orange-800 dark:bg-orange-800 dark:text-orange-100",
|
|
15
|
+
amber: "bg-amber-100 text-amber-800 dark:bg-amber-800 dark:text-amber-100",
|
|
16
|
+
yellow: "bg-yellow-100 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-50",
|
|
17
|
+
lime: "bg-lime-100 text-lime-800 dark:bg-lime-800 dark:text-lime-100",
|
|
18
|
+
green: "bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100",
|
|
19
|
+
emerald: "bg-emerald-100 text-emerald-800 dark:bg-emerald-800 dark:text-emerald-50",
|
|
20
|
+
teal: "bg-teal-100 text-teal-800 dark:bg-teal-800 dark:text-teal-50",
|
|
21
|
+
cyan: "bg-cyan-100 text-cyan-800 dark:bg-cyan-800 dark:text-cyan-50",
|
|
22
|
+
sky: "bg-sky-100 text-sky-800 dark:bg-sky-800 dark:text-sky-50",
|
|
23
|
+
blue: "bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-100",
|
|
24
|
+
indigo: "bg-indigo-100 text-indigo-800 dark:bg-indigo-800 dark:text-indigo-100",
|
|
25
|
+
violet: "bg-violet-100 text-violet-800 dark:bg-violet-800 dark:text-violet-100",
|
|
26
|
+
purple: "bg-purple-100 text-purple-800 dark:bg-purple-800 dark:text-purple-100",
|
|
27
|
+
fuchsia: "bg-fuchsia-100 text-fuchsia-800 dark:bg-fuchsia-800 dark:text-fuchsia-100",
|
|
28
|
+
pink: "bg-pink-100 text-pink-800 dark:bg-pink-800 dark:text-pink-100",
|
|
29
|
+
rose: "bg-rose-100 text-rose-800 dark:bg-rose-800 dark:text-rose-100"
|
|
30
30
|
};
|
|
31
31
|
const _PRESET = {
|
|
32
32
|
box: `mb-4 rounded flex text-sm`,
|
|
@@ -15,7 +15,7 @@ const _PRESET = {
|
|
|
15
15
|
bg-neutral-100
|
|
16
16
|
border-neutral-300
|
|
17
17
|
shadow-sm
|
|
18
|
-
text-stuic-primary
|
|
18
|
+
text-stuic-primary dark:text-stuic-primary-dark
|
|
19
19
|
cursor-pointer
|
|
20
20
|
focus:border-stuic-primary
|
|
21
21
|
focus:ring-4
|
|
@@ -24,7 +24,7 @@ const _PRESET = {
|
|
|
24
24
|
focus:ring-opacity-20
|
|
25
25
|
disabled:cursor-not-allowed
|
|
26
26
|
`,
|
|
27
|
-
validationMessage: "text-xs text-stuic-primary tracking-tight",
|
|
27
|
+
validationMessage: "text-xs text-stuic-primary dark:text-stuic-primary-dark tracking-tight",
|
|
28
28
|
description: "text-sm opacity-50"
|
|
29
29
|
};
|
|
30
30
|
const _PRESET_BY_SIZE = {
|