@marianmeres/stuic 1.118.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.
Files changed (11) hide show
  1. package/dist/components/AlertConfirmPrompt/AlertConfirmPrompt.svelte +15 -7
  2. package/dist/components/Button/Button.svelte +8 -4
  3. package/dist/components/DismissibleMessage/DismissibleMessage.svelte +24 -24
  4. package/dist/components/Input/Field.svelte +2 -2
  5. package/dist/components/Input/FieldCheckbox.svelte +3 -3
  6. package/dist/components/Input/FieldSelect.svelte +3 -3
  7. package/dist/components/Input/Fieldset.svelte +1 -1
  8. package/dist/components/Input/XFieldRadioInternal.svelte +4 -4
  9. package/dist/components/Notifications/Notifications.svelte +2 -2
  10. package/dist/components/Switch/Switch.svelte +1 -1
  11. package/package.json +1 -1
package/dist/components/AlertConfirmPrompt/AlertConfirmPrompt.svelte CHANGED
@@ -20,12 +20,18 @@ export class AlertConfirmPromptConfig {
20
20
  w-full sm:max-w-xl
21
21
  mx-auto
22
22
  p-5 sm:p-6
23
- bg-white text-black
24
- dark:bg-black dark:text-white
25
23
  rounded-lg
26
24
  transition-all
27
25
  shadow-xl
28
26
  focus-within:outline-0 focus-within:ring-0
27
+ bg-white
28
+ dark:bg-black
29
+
30
+ text-black
31
+ dark:text-white
32
+
33
+ border border-white
34
+ dark:border-white/20
29
35
  `,
30
36
  icon: `
31
37
  size-12 sm:size-10
@@ -33,20 +39,20 @@ export class AlertConfirmPromptConfig {
33
39
  mx-auto
34
40
  flex flex-shrink-0 items-center justify-center
35
41
  rounded-full
36
- bg-neutral-100 text-black/50
37
- dark:bg-neutral-800 dark:text-white/50
42
+
43
+ bg-black/10 text-black/80
44
+ dark:bg-white/20 dark:text-white/80
38
45
  `,
39
46
  contentBlock: `mt-3 sm:mt-0 sm:flex-1`,
40
47
  title: `
41
48
  text-center sm:text-left
42
49
  text-base font-semibold leading-6
43
- text-black/90 dark:text-white/90
44
50
  `,
45
51
  content: `
46
52
  mt-2 mx-3 sm:mx-0
47
53
  text-center sm:text-left
48
54
  text-sm
49
- text-black/75 dark:text-white/75
55
+ opacity-75
50
56
  `,
51
57
  inputBox: `mt-3`,
52
58
  inputField: `m-0`,
@@ -60,7 +66,9 @@ export class AlertConfirmPromptConfig {
60
66
  spinnerBox: `
61
67
  absolute inset-0 flex justify-center items-center
62
68
  rounded-lg
63
- bg-white/75 dark:bg-black/75
69
+
70
+ bg-white/75
71
+ dark:bg-black/75
64
72
  `
65
73
  };
66
74
  // prettier-ignore
package/dist/components/Button/Button.svelte CHANGED
@@ -13,9 +13,9 @@ export class ButtonConfig {
13
13
  no-underline
14
14
  border
15
15
 
16
- bg-zinc-200 text-black
17
- dark:bg-zinc-600 dark:text-white
18
- border-zinc-400 dark:border-zinc-500
16
+ bg-neutral-200 text-black
17
+ dark:bg-neutral-600 dark:text-white
18
+ border-neutral-400 dark:border-neutral-500
19
19
  `.trim();
20
20
  static presetSquare = "p-0 aspect-square justify-center";
21
21
  static presetsRounded = {
@@ -50,8 +50,12 @@ export class ButtonConfig {
50
50
  // to be defined at consumer level...
51
51
  static variant = {
52
52
  primary: `
53
- bg-stuic-primary text-stuic-on-primary
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
  }
package/dist/components/DismissibleMessage/DismissibleMessage.svelte CHANGED
@@ -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/10 text-stuic-primary dark:bg-stuic-primary dark:text-white/90",
7
- secondary: "bg-stuic-secondary/10 text-stuic-secondary dark:bg-stuic-secondary dark:text-white/90",
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"
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`,
package/dist/components/Input/Field.svelte CHANGED
@@ -22,8 +22,8 @@ const _PRESET = {
22
22
  box: "mb-4 grid",
23
23
  // gap-4
24
24
  wrap: `
25
- rounded-md border border-gray-300 dark:border-gray-600
26
- bg-gray-100 dark:bg-gray-700
25
+ rounded-md border border-neutral-300 dark:border-neutral-600
26
+ bg-neutral-100 dark:bg-neutral-700
27
27
  focus-within:border-stuic-primary
28
28
  focus-within:ring-4
29
29
  focus-within:ring-stuic-primary
package/dist/components/Input/FieldCheckbox.svelte CHANGED
@@ -16,10 +16,10 @@ const _PRESET = {
16
16
  label: "block w-full",
17
17
  input: `
18
18
  size-4 rounded
19
- bg-gray-100
20
- border-gray-300
19
+ bg-neutral-100
20
+ border-neutral-300
21
21
  shadow-sm
22
- text-stuic-primary
22
+ text-stuic-primary dark:text-stuic-primary-dark
23
23
  cursor-pointer
24
24
  focus:border-stuic-primary
25
25
  focus:ring-4
package/dist/components/Input/FieldSelect.svelte CHANGED
@@ -20,8 +20,8 @@ const _PRESET = {
20
20
  box: "mb-4 grid",
21
21
  // gap-4
22
22
  wrap: `
23
- rounded-md border border-gray-300 dark:border-gray-600
24
- bg-gray-100 dark:bg-gray-700
23
+ rounded-md border border-neutral-300 dark:border-neutral-600
24
+ bg-neutral-100 dark:bg-neutral-700
25
25
  focus-within:border-stuic-primary
26
26
  focus-within:ring-4
27
27
  focus-within:ring-stuic-primary
@@ -30,7 +30,7 @@ const _PRESET = {
30
30
  label: `block flex-1 px-2 mb-1`,
31
31
  input: `
32
32
  rounded-md border-0 block w-full flex-1
33
- bg-gray-100 dark:bg-gray-700
33
+ bg-neutral-100 dark:bg-neutral-700
34
34
  tracking-tight
35
35
  focus:outline-0 focus-visible:ring-0
36
36
  placeholder:text-black/35 dark:placeholder:text-white/35
package/dist/components/Input/Fieldset.svelte CHANGED
@@ -1,7 +1,7 @@
1
1
  <script context="module">import { twMerge } from "tailwind-merge";
2
2
  import Thc from "../Thc/Thc.svelte";
3
3
  const _PRESET = {
4
- box: `border border-gray-200 p-4 pt-3 rounded-md`,
4
+ box: `border border-neutral-200 p-4 pt-3 rounded-md`,
5
5
  legend: `px-2`
6
6
  };
7
7
  export class FieldsetConfig {
package/dist/components/Input/XFieldRadioInternal.svelte CHANGED
@@ -12,10 +12,10 @@ const _PRESET = {
12
12
  label: "block w-full",
13
13
  input: `
14
14
  size-4 rounded-full
15
- bg-gray-100
16
- border-gray-300
15
+ bg-neutral-100
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 = {
package/dist/components/Notifications/Notifications.svelte CHANGED
@@ -31,7 +31,7 @@ export class NotificationsConfig {
31
31
  w-full max-w-sm
32
32
  rounded-md
33
33
  shadow-lg
34
- bg-gray-700 text-white
34
+ bg-neutral-700 text-white
35
35
  `,
36
36
  count: `
37
37
  absolute -top-2 -right-2
@@ -44,7 +44,7 @@ export class NotificationsConfig {
44
44
  icon: `
45
45
  flex items-start justify-center
46
46
  pt-4 pr-0 pb-4 pl-4
47
- text-gray-200
47
+ text-neutral-200
48
48
  `,
49
49
  content: `
50
50
  flex-1
package/dist/components/Switch/Switch.svelte CHANGED
@@ -11,7 +11,7 @@ export class SwitchConfig {
11
11
  hover:brightness-[1.05] active:brightness-[0.95]
12
12
  disabled:!cursor-not-allowed disabled:!opacity-50 disabled:hover:brightness-100
13
13
 
14
- bg-gray-400 dark:bg-gray-400
14
+ bg-neutral-400 dark:bg-neutral-400
15
15
  data-[checked=true]:bg-stuic-primary dark:data-[checked=true]:bg-stuic-primary
16
16
  `.trim();
17
17
  static presetsSize = {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@marianmeres/stuic",
3
- "version": "1.118.0",
3
+ "version": "1.120.0",
4
4
  "scripts": {
5
5
  "dev": "vite dev",
6
6
  "build": "vite build && npm run package && node ./scripts/date.js",