@nexxtmove/ui 0.0.18 → 0.0.20

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 (5) hide show
  1. package/dist/index.d.ts +1 -1
  2. package/dist/index.js +1 -1
  3. package/package.json +1 -1
  4. package/tailwind/nexxtmove.tailwind.components.css +27 -27
  5. package/tailwind/nexxtmove.tailwind.theme.css +44 -44
package/dist/index.d.ts CHANGED
@@ -28,7 +28,7 @@ declare type IconType = 'regular' | 'solid' | 'light' | 'duotone' | 'brands';
28
28
  export declare const NexxtButton: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
29
29
 
30
30
  declare interface NexxtButtonProps {
31
- variant?: 'primary' | 'secondary' | 'link';
31
+ variant?: 'primary' | 'secondary' | 'success' | 'danger' | 'link';
32
32
  icon?: InstanceType<typeof NexxtIcon>['name'];
33
33
  iconRight?: boolean;
34
34
  disabled?: boolean;
package/dist/index.js CHANGED
@@ -41,7 +41,7 @@ const s = /* @__PURE__ */ c({
41
41
  e.icon ? (a(), d(s, {
42
42
  key: 0,
43
43
  name: e.icon,
44
- class: n({ "order-last": e.iconRight, "opacity-0": e.loading })
44
+ class: n(["transition-all duration-200", { "order-last": e.iconRight, "opacity-0": e.loading }])
45
45
  }, null, 8, ["name", "class"])) : o("", !0),
46
46
  t.$slots.default ? (a(), i("span", {
47
47
  key: 1,
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@nexxtmove/ui",
3
3
  "type": "module",
4
- "version": "0.0.18",
4
+ "version": "0.0.20",
5
5
  "exports": {
6
6
  ".": {
7
7
  "types": "./dist/index.d.ts",
package/tailwind/nexxtmove.tailwind.components.css CHANGED
@@ -8,101 +8,101 @@
8
8
  }
9
9
 
10
10
  .button-danger {
11
- @apply bg-button-color-bg-danger-default text-button-color-text-danger-default;
11
+ @apply bg-button-bg-danger-default text-button-text-danger-default;
12
12
  &:hover {
13
13
  @media (hover: hover) {
14
- @apply bg-button-color-bg-danger-hover;
14
+ @apply bg-button-bg-danger-hover;
15
15
  }
16
16
  }
17
17
  &:focus-visible {
18
- @apply bg-button-color-bg-danger-focussed outline-button-color-border-danger-focussed outline outline-solid;
18
+ @apply bg-button-bg-danger-focussed outline-button-border-danger-focussed outline outline-solid;
19
19
  }
20
20
  &:active {
21
- @apply bg-button-color-bg-danger-selected;
21
+ @apply bg-button-bg-danger-selected;
22
22
  }
23
23
  &:disabled {
24
- @apply bg-button-color-bg-danger-disabled text-button-color-text-danger-disabled;
24
+ @apply bg-button-bg-danger-disabled text-button-text-danger-disabled;
25
25
  }
26
26
  }
27
27
 
28
28
  .button-link {
29
- @apply text-button-color-text-link-default px-(--button-padding-link-x) py-(--button-padding-link-y);
29
+ @apply text-button-text-link-default px-(--button-padding-link-x) py-(--button-padding-link-y);
30
30
  &:hover {
31
31
  @media (hover: hover) {
32
- @apply text-button-color-text-link-hover;
32
+ @apply text-button-text-link-hover;
33
33
  }
34
34
  }
35
35
  &:focus-visible {
36
- @apply text-button-color-text-link-focussed outline-button-color-border-link-focussed outline outline-solid;
36
+ @apply text-button-text-link-focussed outline-button-border-link-focussed outline outline-solid;
37
37
  }
38
38
  &:active {
39
- @apply text-button-color-text-link-selected;
39
+ @apply text-button-text-link-selected;
40
40
  }
41
41
  &:disabled {
42
- @apply text-button-color-text-link-disabled;
42
+ @apply text-button-text-link-disabled;
43
43
  }
44
44
  }
45
45
 
46
46
  .button-primary {
47
- @apply bg-button-color-bg-primary-default text-button-color-text-primary-default;
47
+ @apply bg-button-bg-primary-default text-button-text-primary-default;
48
48
  &:hover {
49
49
  @media (hover: hover) {
50
- @apply bg-button-color-bg-primary-hover;
50
+ @apply bg-button-bg-primary-hover;
51
51
  }
52
52
  }
53
53
  &:focus-visible {
54
- @apply bg-button-color-bg-primary-focussed outline-button-color-border-primary-focussed outline outline-solid;
54
+ @apply bg-button-bg-primary-focussed outline-button-border-primary-focussed outline outline-solid;
55
55
  }
56
56
  &:active {
57
- @apply bg-button-color-bg-primary-selected;
57
+ @apply bg-button-bg-primary-selected;
58
58
  }
59
59
  &:disabled {
60
- @apply bg-button-color-bg-primary-disabled text-button-color-text-primary-disabled;
60
+ @apply bg-button-bg-primary-disabled text-button-text-primary-disabled;
61
61
  }
62
62
  }
63
63
 
64
64
  .button-secondary {
65
- @apply bg-button-color-bg-secondary-default text-button-color-text-secondary-default border-button-color-border-secondary-default border border-solid;
65
+ @apply bg-button-bg-secondary-default text-button-text-secondary-default border-button-border-secondary-default border border-solid;
66
66
  &:hover {
67
67
  @media (hover: hover) {
68
- @apply bg-button-color-bg-secondary-hover border-button-color-border-secondary-hover;
68
+ @apply bg-button-bg-secondary-hover border-button-border-secondary-hover;
69
69
  }
70
70
  }
71
71
  &:focus-visible {
72
- @apply bg-button-color-bg-secondary-focussed outline-button-color-border-secondary-focussed outline outline-solid;
72
+ @apply bg-button-bg-secondary-focussed outline-button-border-secondary-focussed outline outline-solid;
73
73
  }
74
74
  &:active {
75
- @apply bg-button-color-bg-secondary-selected border-button-color-border-secondary-selected;
75
+ @apply bg-button-bg-secondary-selected border-button-border-secondary-selected;
76
76
  }
77
77
  &:disabled {
78
- @apply bg-button-color-bg-secondary-disabled text-button-color-text-secondary-disabled border-button-color-border-secondary-disabled;
78
+ @apply bg-button-bg-secondary-disabled text-button-text-secondary-disabled border-button-border-secondary-disabled;
79
79
  }
80
80
  }
81
81
 
82
82
  .button-success {
83
- @apply bg-button-color-bg-success-default text-button-color-text-success-default;
83
+ @apply bg-button-bg-success-default text-button-text-success-default;
84
84
  &:hover {
85
85
  @media (hover: hover) {
86
- @apply bg-button-color-bg-success-hover;
86
+ @apply bg-button-bg-success-hover;
87
87
  }
88
88
  }
89
89
  &:focus-visible {
90
- @apply bg-button-color-bg-success-focussed outline-button-color-border-success-focussed outline outline-solid;
90
+ @apply bg-button-bg-success-focussed outline-button-border-success-focussed outline outline-solid;
91
91
  }
92
92
  &:active {
93
- @apply bg-button-color-bg-success-selected;
93
+ @apply bg-button-bg-success-selected;
94
94
  }
95
95
  &:disabled {
96
- @apply bg-button-color-bg-success-disabled text-button-color-text-success-disabled;
96
+ @apply bg-button-bg-success-disabled text-button-text-success-disabled;
97
97
  }
98
98
  }
99
99
 
100
100
  .progress-bar-bar {
101
- @apply bg-progress-bar-color-bg-bar;
101
+ @apply bg-progress-bar-bg-bar;
102
102
  }
103
103
 
104
104
  .progress-bar-progress {
105
- @apply bg-progress-bar-color-bg-progress;
105
+ @apply bg-progress-bar-bg-progress;
106
106
  }
107
107
 
108
108
  .progress-nav {
package/tailwind/nexxtmove.tailwind.theme.css CHANGED
@@ -105,50 +105,50 @@
105
105
  --color-brick-800: oklch(37.589% 0.05484 18.2995);
106
106
  --color-brick-900: oklch(32.852% 0.03404 19.047);
107
107
  --color-brick-950: oklch(27.734% 0.02143 13.77033);
108
- --color-button-color-bg-primary-default: var(--color-cornflower-blue-500);
109
- --color-button-color-bg-primary-hover: var(--color-cornflower-blue-400);
110
- --color-button-color-bg-primary-focussed: var(--color-cornflower-blue-500);
111
- --color-button-color-bg-primary-selected: var(--color-cornflower-blue-700);
112
- --color-button-color-bg-primary-disabled: var(--color-gray-200);
113
- --color-button-color-bg-secondary-default: var(--color-white);
114
- --color-button-color-bg-secondary-hover: var(--color-white);
115
- --color-button-color-bg-secondary-focussed: var(--color-white);
116
- --color-button-color-bg-secondary-selected: var(--color-cornflower-blue-50);
117
- --color-button-color-bg-secondary-disabled: var(--color-white);
118
- --color-button-color-bg-success-default: var(--color-green-400);
119
- --color-button-color-bg-success-hover: var(--color-green-500);
120
- --color-button-color-bg-success-focussed: var(--color-green-400);
121
- --color-button-color-bg-success-selected: var(--color-green-600);
122
- --color-button-color-bg-success-disabled: var(--color-green-200);
123
- --color-button-color-bg-danger-default: var(--color-brick-500);
124
- --color-button-color-bg-danger-hover: var(--color-brick-600);
125
- --color-button-color-bg-danger-focussed: var(--color-brick-500);
126
- --color-button-color-bg-danger-selected: var(--color-brick-700);
127
- --color-button-color-bg-danger-disabled: var(--color-brick-100);
128
- --color-button-color-text-primary-default: var(--color-white);
129
- --color-button-color-text-primary-disabled: var(--color-gray-600);
130
- --color-button-color-text-secondary-default: var(--color-gray-950);
131
- --color-button-color-text-secondary-disabled: var(--color-gray-400);
132
- --color-button-color-text-link-default: var(--color-cornflower-blue-600);
133
- --color-button-color-text-link-hover: var(--color-cornflower-blue-700);
134
- --color-button-color-text-link-focussed: var(--color-cornflower-blue-600);
135
- --color-button-color-text-link-selected: var(--color-cornflower-blue-800);
136
- --color-button-color-text-link-disabled: var(--color-gray-400);
137
- --color-button-color-text-success-default: var(--color-white);
138
- --color-button-color-text-success-disabled: var(--color-gray-100);
139
- --color-button-color-text-danger-default: var(--color-white);
140
- --color-button-color-text-danger-disabled: var(--color-gray-100);
141
- --color-button-color-border-primary-focussed: var(--color-cornflower-blue-100);
142
- --color-button-color-border-secondary-focussed: var(--color-cornflower-blue-100);
143
- --color-button-color-border-secondary-hover: var(--color-cornflower-blue-700);
144
- --color-button-color-border-secondary-selected: var(--color-cornflower-blue-500);
145
- --color-button-color-border-secondary-disabled: var(--color-gray-400);
146
- --color-button-color-border-secondary-default: var(--color-gray-200);
147
- --color-button-color-border-link-focussed: var(--color-cornflower-blue-100);
148
- --color-button-color-border-success-focussed: var(--color-green-100);
149
- --color-button-color-border-danger-focussed: var(--color-brick-100);
150
- --color-progress-bar-color-bg-progress: var(--color-cornflower-blue-500);
151
- --color-progress-bar-color-bg-bar: var(--color-gray-50);
108
+ --color-button-bg-primary-default: var(--color-cornflower-blue-500);
109
+ --color-button-bg-primary-hover: var(--color-cornflower-blue-400);
110
+ --color-button-bg-primary-focussed: var(--color-cornflower-blue-500);
111
+ --color-button-bg-primary-selected: var(--color-cornflower-blue-700);
112
+ --color-button-bg-primary-disabled: var(--color-gray-200);
113
+ --color-button-bg-secondary-default: var(--color-white);
114
+ --color-button-bg-secondary-hover: var(--color-white);
115
+ --color-button-bg-secondary-focussed: var(--color-white);
116
+ --color-button-bg-secondary-selected: var(--color-cornflower-blue-50);
117
+ --color-button-bg-secondary-disabled: var(--color-white);
118
+ --color-button-bg-success-default: var(--color-green-400);
119
+ --color-button-bg-success-hover: var(--color-green-500);
120
+ --color-button-bg-success-focussed: var(--color-green-400);
121
+ --color-button-bg-success-selected: var(--color-green-600);
122
+ --color-button-bg-success-disabled: var(--color-green-200);
123
+ --color-button-bg-danger-default: var(--color-brick-500);
124
+ --color-button-bg-danger-hover: var(--color-brick-600);
125
+ --color-button-bg-danger-focussed: var(--color-brick-500);
126
+ --color-button-bg-danger-selected: var(--color-brick-700);
127
+ --color-button-bg-danger-disabled: var(--color-brick-100);
128
+ --color-button-text-primary-default: var(--color-white);
129
+ --color-button-text-primary-disabled: var(--color-gray-600);
130
+ --color-button-text-secondary-default: var(--color-gray-950);
131
+ --color-button-text-secondary-disabled: var(--color-gray-400);
132
+ --color-button-text-link-default: var(--color-cornflower-blue-600);
133
+ --color-button-text-link-hover: var(--color-cornflower-blue-700);
134
+ --color-button-text-link-focussed: var(--color-cornflower-blue-600);
135
+ --color-button-text-link-selected: var(--color-cornflower-blue-800);
136
+ --color-button-text-link-disabled: var(--color-gray-400);
137
+ --color-button-text-success-default: var(--color-white);
138
+ --color-button-text-success-disabled: var(--color-gray-100);
139
+ --color-button-text-danger-default: var(--color-white);
140
+ --color-button-text-danger-disabled: var(--color-gray-100);
141
+ --color-button-border-primary-focussed: var(--color-cornflower-blue-100);
142
+ --color-button-border-secondary-focussed: var(--color-cornflower-blue-100);
143
+ --color-button-border-secondary-hover: var(--color-cornflower-blue-700);
144
+ --color-button-border-secondary-selected: var(--color-cornflower-blue-500);
145
+ --color-button-border-secondary-disabled: var(--color-gray-400);
146
+ --color-button-border-secondary-default: var(--color-gray-200);
147
+ --color-button-border-link-focussed: var(--color-cornflower-blue-100);
148
+ --color-button-border-success-focussed: var(--color-green-100);
149
+ --color-button-border-danger-focussed: var(--color-brick-100);
150
+ --color-progress-bar-bg-progress: var(--color-cornflower-blue-500);
151
+ --color-progress-bar-bg-bar: var(--color-gray-50);
152
152
  --text-xs: 0.75rem;
153
153
  --text-base: 1rem;
154
154
  --text-lg: 1.125rem;