nexa-ui-kit 0.11.5 → 0.11.6

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 (7) hide show
  1. package/dist/components/NButton.js +7 -5
  2. package/dist/components/NButton.nexa +7 -5
  3. package/dist/components/NCheckbox.js +56 -50
  4. package/dist/components/NCheckbox.nexa +43 -37
  5. package/package.json +4 -4
  6. package/src/components/NButton.nexa +7 -5
  7. package/src/components/NCheckbox.nexa +43 -37
package/dist/components/NButton.js CHANGED
@@ -113,16 +113,18 @@ const __style = `.n-btn[data-v-72f6f577]{
113
113
 
114
114
  /* Variant: Primary */
115
115
  .n-btn-primary[data-v-72f6f577]{
116
- background: linear-gradient(135deg, var(--n-color-primary) 0%, var(--n-color-primary-hover) 100%);
116
+ background: linear-gradient(135deg, #6366f1 0%, #4f46e5 50%, #4338ca 100%);
117
117
  color: white;
118
- box-shadow: var(--n-shadow-glow-primary);
118
+ box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4), 0 0 0 1px rgba(99, 102, 241, 0.3);
119
+ text-shadow: 0 1px 2px rgba(0,0,0,0.2);
119
120
  }
120
121
  .n-btn-primary[data-v-72f6f577]:hover:not(:disabled){
121
- transform: translateY(-2px);
122
- box-shadow: 0 8px 20px -3px var(--n-color-primary-glow);
122
+ transform: translateY(-3px) scale(1.02);
123
+ box-shadow: 0 8px 25px rgba(99, 102, 241, 0.5), 0 0 0 1px rgba(99, 102, 241, 0.4), 0 0 40px rgba(99, 102, 241, 0.15);
123
124
  }
124
125
  .n-btn-primary[data-v-72f6f577]:active:not(:disabled){
125
- box-shadow: var(--n-shadow-glow-primary), inset 0 1px 3px rgba(0,0,0,0.15);
126
+ transform: translateY(-1px) scale(0.98);
127
+ box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4), inset 0 2px 4px rgba(0,0,0,0.15);
126
128
  }
127
129
 
128
130
  /* Variant: Secondary */
package/dist/components/NButton.nexa CHANGED
@@ -105,16 +105,18 @@ const btnClass = computed(() => {
105
105
 
106
106
  /* Variant: Primary */
107
107
  .n-btn-primary {
108
- background: linear-gradient(135deg, var(--n-color-primary) 0%, var(--n-color-primary-hover) 100%);
108
+ background: linear-gradient(135deg, #6366f1 0%, #4f46e5 50%, #4338ca 100%);
109
109
  color: white;
110
- box-shadow: var(--n-shadow-glow-primary);
110
+ box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4), 0 0 0 1px rgba(99, 102, 241, 0.3);
111
+ text-shadow: 0 1px 2px rgba(0,0,0,0.2);
111
112
  }
112
113
  .n-btn-primary:hover:not(:disabled) {
113
- transform: translateY(-2px);
114
- box-shadow: 0 8px 20px -3px var(--n-color-primary-glow);
114
+ transform: translateY(-3px) scale(1.02);
115
+ box-shadow: 0 8px 25px rgba(99, 102, 241, 0.5), 0 0 0 1px rgba(99, 102, 241, 0.4), 0 0 40px rgba(99, 102, 241, 0.15);
115
116
  }
116
117
  .n-btn-primary:active:not(:disabled) {
117
- box-shadow: var(--n-shadow-glow-primary), inset 0 1px 3px rgba(0,0,0,0.15);
118
+ transform: translateY(-1px) scale(0.98);
119
+ box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4), inset 0 2px 4px rgba(0,0,0,0.15);
118
120
  }
119
121
 
120
122
  /* Variant: Secondary */
package/dist/components/NCheckbox.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { h, hText, effect, defineComponent, registerComponent, reloadComponent, injectStyle } from 'nexa-framework'
2
2
 
3
3
  const _sfc_main = defineComponent({
4
- __scopeId: 'data-v-3302b953',
4
+ __scopeId: 'data-v-50293982',
5
5
  __hmrId: 'NCheckbox_nexa',
6
6
  props: {
7
7
  modelValue: { type: Boolean, default: false },
@@ -22,100 +22,106 @@ const _sfc_main = defineComponent({
22
22
  // Injected render function
23
23
  _sfc_main.render = function(ctx) {
24
24
  let { toggle, $slots, emit, modelValue, label, disabled, indeterminate, Fragment: _ntc_Fragment } = ctx
25
- return h('label', { class: ["n-checkbox", { 'is-checked': modelValue && !indeterminate, 'is-indeterminate': indeterminate, 'is-disabled': disabled }], "data-v-3302b953": "" }, [
25
+ return h('label', { class: ["n-checkbox", { 'is-checked': modelValue && !indeterminate, 'is-indeterminate': indeterminate, 'is-disabled': disabled }], "data-v-50293982": "" }, [
26
26
  "\n ",
27
- h('div', { class: "n-checkbox-box", onClick: toggle, "data-v-3302b953": "" }, [
27
+ h('div', { class: "n-checkbox-box", onClick: toggle, "data-v-50293982": "" }, [
28
28
  "\n ",
29
- (modelValue && !indeterminate) ? h('span', { class: "n-checkbox-icon", "data-v-3302b953": "" }, [
29
+ (modelValue && !indeterminate) ? h('div', { class: "n-checkbox-check", "data-v-50293982": "" }, [
30
30
  "\n ",
31
- h('svg', { viewBox: "0 0 24 24", width: "14", height: "14", fill: "none", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round", "stroke-linejoin": "round", focusable: "false", "aria-hidden": "true", "data-v-3302b953": "" }, [
32
- h('path', { d: "M20 6L9 17l-5-5", "data-v-3302b953": "" })
31
+ h('svg', { viewBox: "0 0 24 24", width: "12", height: "12", fill: "none", stroke: "white", "stroke-width": "3", "stroke-linecap": "round", "stroke-linejoin": "round", focusable: "false", "data-v-50293982": "" }, [
32
+ h('path', { d: "M5 12l5 5L20 7", "data-v-50293982": "" })
33
33
  ]),
34
34
  "\n "
35
35
  ]) : null,
36
- (indeterminate) ? h('span', { class: "n-checkbox-icon", "data-v-3302b953": "" }, [
36
+ (indeterminate) ? h('div', { class: "n-checkbox-check", "data-v-50293982": "" }, [
37
37
  "\n ",
38
- h('svg', { viewBox: "0 0 24 24", width: "14", height: "14", fill: "none", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round", focusable: "false", "aria-hidden": "true", "data-v-3302b953": "" }, [
39
- h('line', { x1: "4", y1: "12", x2: "20", y2: "12", "data-v-3302b953": "" })
38
+ h('svg', { viewBox: "0 0 24 24", width: "12", height: "12", fill: "none", stroke: "white", "stroke-width": "3", "stroke-linecap": "round", focusable: "false", "data-v-50293982": "" }, [
39
+ h('line', { x1: "5", y1: "12", x2: "19", y2: "12", "data-v-50293982": "" })
40
40
  ]),
41
41
  "\n "
42
42
  ]) : null
43
43
  ]),
44
44
  "\n ",
45
- (label) ? h('span', { class: "n-checkbox-label", "data-v-3302b953": "" }, [
45
+ (label) ? h('span', { class: "n-checkbox-label", "data-v-50293982": "" }, [
46
46
  label
47
47
  ]) : null
48
48
  ])
49
49
  }
50
- _sfc_main.__scopeId = 'data-v-3302b953'
50
+ _sfc_main.__scopeId = 'data-v-50293982'
51
51
  _sfc_main.__hmrId = 'NCheckbox_nexa'
52
52
 
53
53
  export default _sfc_main
54
54
 
55
- const __style = `.n-checkbox[data-v-3302b953]{
55
+ const __style = `.n-checkbox[data-v-50293982]{
56
56
  display: inline-flex;
57
57
  align-items: center;
58
- gap: var(--n-space-3);
58
+ gap: 0.75rem;
59
59
  cursor: pointer;
60
60
  user-select: none;
61
+ padding: 0.375rem 0.5rem;
62
+ border-radius: 6px;
63
+ transition: background 0.15s;
61
64
  }
62
65
 
63
- .n-checkbox-box[data-v-3302b953]{
64
- width: 22px;
65
- height: 22px;
66
- border: 2px solid var(--n-color-border);
67
- border-radius: var(--n-radius-sm);
66
+ .n-checkbox[data-v-50293982]:hover:not(.is-disabled){
67
+ background: rgba(99, 102, 241, 0.08);
68
+ }
69
+
70
+ .n-checkbox-box[data-v-50293982]{
71
+ width: 20px;
72
+ height: 20px;
73
+ border-radius: 6px;
74
+ border: 2px solid #475569;
68
75
  display: flex;
69
76
  align-items: center;
70
77
  justify-content: center;
71
- transition: all var(--n-transition-normal);
78
+ transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
79
+ background: #0f172a;
72
80
  flex-shrink: 0;
73
- background: transparent;
74
- }
75
-
76
- .is-checked .n-checkbox-box[data-v-3302b953]{
77
- background: var(--n-color-primary);
78
- border-color: var(--n-color-primary);
79
- box-shadow: var(--n-shadow-glow-primary);
80
81
  }
81
82
 
82
- .is-indeterminate .n-checkbox-box[data-v-3302b953]{
83
- background: var(--n-color-primary);
84
- border-color: var(--n-color-primary);
85
- box-shadow: var(--n-shadow-glow-primary);
83
+ .is-checked .n-checkbox-box[data-v-50293982],
84
+ .is-indeterminate .n-checkbox-box[data-v-50293982]{
85
+ background: #6366f1;
86
+ border-color: #6366f1;
87
+ box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2), 0 4px 12px rgba(99, 102, 241, 0.4);
86
88
  }
87
89
 
88
- .n-checkbox-icon[data-v-3302b953]{
90
+ .n-checkbox-check[data-v-50293982]{
89
91
  display: flex;
90
92
  align-items: center;
91
93
  justify-content: center;
92
- color: white;
93
- line-height: 1;
94
- animation: n-checkbox-pop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
94
+ animation: n-check 0.25s cubic-bezier(0.4, 0, 0.2, 1);
95
95
  }
96
96
 
97
- .n-checkbox-icon svg[data-v-3302b953]{
98
- filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
97
+ @keyframes n-check {
98
+ 0%[data-v-50293982]{ transform: scale(0); opacity: 0; }
99
+ 50%[data-v-50293982]{ transform: scale(1.2); }
100
+ 100%[data-v-50293982]{ transform: scale(1); opacity: 1; }
99
101
  }
100
102
 
101
- @keyframes n-checkbox-pop {
102
- 0%[data-v-3302b953]{ transform: scale(0); opacity: 0; }
103
- 50%[data-v-3302b953]{ transform: scale(1.15); }
104
- 100%[data-v-3302b953]{ transform: scale(1); opacity: 1; }
103
+ .n-checkbox-label[data-v-50293982]{
104
+ font-size: 0.875rem;
105
+ color: #e2e8f0;
106
+ font-weight: 500;
107
+ line-height: 1.5;
105
108
  }
106
109
 
107
- .n-checkbox-label[data-v-3302b953]{
108
- font-size: var(--n-text-sm);
109
- color: var(--n-color-text);
110
- font-weight: var(--n-weight-medium);
110
+ .is-disabled[data-v-50293982]{
111
+ opacity: 0.4;
112
+ cursor: not-allowed;
111
113
  }
112
114
 
113
- .is-disabled[data-v-3302b953]{
114
- opacity: 0.5;
115
- cursor: not-allowed;
115
+ .is-disabled .n-checkbox-box[data-v-50293982]{
116
+ background: #1e293b;
117
+ border-color: #334155;
118
+ }
119
+
120
+ .n-checkbox[data-v-50293982]:hover:not(.is-disabled) .n-checkbox-box{
121
+ border-color: #6366f1;
116
122
  }
117
123
 
118
- .n-checkbox[data-v-3302b953]:hover:not(.is-disabled) .n-checkbox-box{
119
- border-color: var(--n-color-primary);
124
+ .is-checked .n-checkbox-box[data-v-50293982]:active{
125
+ transform: scale(0.9);
120
126
  }`
121
- injectStyle('data-v-3302b953', __style)
127
+ injectStyle('data-v-50293982', __style)
package/dist/components/NCheckbox.nexa CHANGED
@@ -17,12 +17,12 @@ const toggle = () => {
17
17
  <template>
18
18
  <label class="n-checkbox" :class="{ 'is-checked': modelValue && !indeterminate, 'is-indeterminate': indeterminate, 'is-disabled': disabled }">
19
19
  <div class="n-checkbox-box" @click="toggle">
20
- <span v-if="modelValue && !indeterminate" class="n-checkbox-icon">
21
- <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
22
- </span>
23
- <span v-if="indeterminate" class="n-checkbox-icon">
24
- <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" focusable="false" aria-hidden="true"><line x1="4" y1="12" x2="20" y2="12"/></svg>
25
- </span>
20
+ <div v-if="modelValue && !indeterminate" class="n-checkbox-check">
21
+ <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" focusable="false"><path d="M5 12l5 5L20 7"/></svg>
22
+ </div>
23
+ <div v-if="indeterminate" class="n-checkbox-check">
24
+ <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" focusable="false"><line x1="5" y1="12" x2="19" y2="12"/></svg>
25
+ </div>
26
26
  </div>
27
27
  <span v-if="label" class="n-checkbox-label">{{ label }}</span>
28
28
  </label>
@@ -32,67 +32,73 @@ const toggle = () => {
32
32
  .n-checkbox {
33
33
  display: inline-flex;
34
34
  align-items: center;
35
- gap: var(--n-space-3);
35
+ gap: 0.75rem;
36
36
  cursor: pointer;
37
37
  user-select: none;
38
+ padding: 0.375rem 0.5rem;
39
+ border-radius: 6px;
40
+ transition: background 0.15s;
41
+ }
42
+
43
+ .n-checkbox:hover:not(.is-disabled) {
44
+ background: rgba(99, 102, 241, 0.08);
38
45
  }
39
46
 
40
47
  .n-checkbox-box {
41
- width: 22px;
42
- height: 22px;
43
- border: 2px solid var(--n-color-border);
44
- border-radius: var(--n-radius-sm);
48
+ width: 20px;
49
+ height: 20px;
50
+ border-radius: 6px;
51
+ border: 2px solid #475569;
45
52
  display: flex;
46
53
  align-items: center;
47
54
  justify-content: center;
48
- transition: all var(--n-transition-normal);
55
+ transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
56
+ background: #0f172a;
49
57
  flex-shrink: 0;
50
- background: transparent;
51
- }
52
-
53
- .is-checked .n-checkbox-box {
54
- background: var(--n-color-primary);
55
- border-color: var(--n-color-primary);
56
- box-shadow: var(--n-shadow-glow-primary);
57
58
  }
58
59
 
60
+ .is-checked .n-checkbox-box,
59
61
  .is-indeterminate .n-checkbox-box {
60
- background: var(--n-color-primary);
61
- border-color: var(--n-color-primary);
62
- box-shadow: var(--n-shadow-glow-primary);
62
+ background: #6366f1;
63
+ border-color: #6366f1;
64
+ box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2), 0 4px 12px rgba(99, 102, 241, 0.4);
63
65
  }
64
66
 
65
- .n-checkbox-icon {
67
+ .n-checkbox-check {
66
68
  display: flex;
67
69
  align-items: center;
68
70
  justify-content: center;
69
- color: white;
70
- line-height: 1;
71
- animation: n-checkbox-pop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
72
- }
73
-
74
- .n-checkbox-icon svg {
75
- filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
71
+ animation: n-check 0.25s cubic-bezier(0.4, 0, 0.2, 1);
76
72
  }
77
73
 
78
- @keyframes n-checkbox-pop {
74
+ @keyframes n-check {
79
75
  0% { transform: scale(0); opacity: 0; }
80
- 50% { transform: scale(1.15); }
76
+ 50% { transform: scale(1.2); }
81
77
  100% { transform: scale(1); opacity: 1; }
82
78
  }
83
79
 
84
80
  .n-checkbox-label {
85
- font-size: var(--n-text-sm);
86
- color: var(--n-color-text);
87
- font-weight: var(--n-weight-medium);
81
+ font-size: 0.875rem;
82
+ color: #e2e8f0;
83
+ font-weight: 500;
84
+ line-height: 1.5;
88
85
  }
89
86
 
90
87
  .is-disabled {
91
- opacity: 0.5;
88
+ opacity: 0.4;
92
89
  cursor: not-allowed;
93
90
  }
94
91
 
92
+ .is-disabled .n-checkbox-box {
93
+ background: #1e293b;
94
+ border-color: #334155;
95
+ }
96
+
95
97
  .n-checkbox:hover:not(.is-disabled) .n-checkbox-box {
96
- border-color: var(--n-color-primary);
98
+ border-color: #6366f1;
99
+ }
100
+
101
+ .is-checked .n-checkbox-box:active {
102
+ transform: scale(0.9);
97
103
  }
98
104
  </style>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "nexa-ui-kit",
3
- "version": "0.11.5",
3
+ "version": "0.11.6",
4
4
  "description": "Premium component library for Nexa Framework",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
@@ -22,12 +22,12 @@
22
22
  "src"
23
23
  ],
24
24
  "dependencies": {
25
- "nexa-framework": "0.11.5",
26
- "nexa-mobile": "0.11.5"
25
+ "nexa-framework": "0.11.6",
26
+ "nexa-mobile": "0.11.6"
27
27
  },
28
28
  "devDependencies": {
29
29
  "cpx": "^1.5.0",
30
- "nexa-compiler": "0.11.5"
30
+ "nexa-compiler": "0.11.6"
31
31
  },
32
32
  "scripts": {
33
33
  "build": "tsc && node scripts/compile-nexa.js && node scripts/patch-imports.js && cpx \"src/**/*.nexa\" dist && cpx \"src/styles/*.css\" dist/styles",
package/src/components/NButton.nexa CHANGED
@@ -105,16 +105,18 @@ const btnClass = computed(() => {
105
105
 
106
106
  /* Variant: Primary */
107
107
  .n-btn-primary {
108
- background: linear-gradient(135deg, var(--n-color-primary) 0%, var(--n-color-primary-hover) 100%);
108
+ background: linear-gradient(135deg, #6366f1 0%, #4f46e5 50%, #4338ca 100%);
109
109
  color: white;
110
- box-shadow: var(--n-shadow-glow-primary);
110
+ box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4), 0 0 0 1px rgba(99, 102, 241, 0.3);
111
+ text-shadow: 0 1px 2px rgba(0,0,0,0.2);
111
112
  }
112
113
  .n-btn-primary:hover:not(:disabled) {
113
- transform: translateY(-2px);
114
- box-shadow: 0 8px 20px -3px var(--n-color-primary-glow);
114
+ transform: translateY(-3px) scale(1.02);
115
+ box-shadow: 0 8px 25px rgba(99, 102, 241, 0.5), 0 0 0 1px rgba(99, 102, 241, 0.4), 0 0 40px rgba(99, 102, 241, 0.15);
115
116
  }
116
117
  .n-btn-primary:active:not(:disabled) {
117
- box-shadow: var(--n-shadow-glow-primary), inset 0 1px 3px rgba(0,0,0,0.15);
118
+ transform: translateY(-1px) scale(0.98);
119
+ box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4), inset 0 2px 4px rgba(0,0,0,0.15);
118
120
  }
119
121
 
120
122
  /* Variant: Secondary */
package/src/components/NCheckbox.nexa CHANGED
@@ -17,12 +17,12 @@ const toggle = () => {
17
17
  <template>
18
18
  <label class="n-checkbox" :class="{ 'is-checked': modelValue && !indeterminate, 'is-indeterminate': indeterminate, 'is-disabled': disabled }">
19
19
  <div class="n-checkbox-box" @click="toggle">
20
- <span v-if="modelValue && !indeterminate" class="n-checkbox-icon">
21
- <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
22
- </span>
23
- <span v-if="indeterminate" class="n-checkbox-icon">
24
- <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" focusable="false" aria-hidden="true"><line x1="4" y1="12" x2="20" y2="12"/></svg>
25
- </span>
20
+ <div v-if="modelValue && !indeterminate" class="n-checkbox-check">
21
+ <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" focusable="false"><path d="M5 12l5 5L20 7"/></svg>
22
+ </div>
23
+ <div v-if="indeterminate" class="n-checkbox-check">
24
+ <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" focusable="false"><line x1="5" y1="12" x2="19" y2="12"/></svg>
25
+ </div>
26
26
  </div>
27
27
  <span v-if="label" class="n-checkbox-label">{{ label }}</span>
28
28
  </label>
@@ -32,67 +32,73 @@ const toggle = () => {
32
32
  .n-checkbox {
33
33
  display: inline-flex;
34
34
  align-items: center;
35
- gap: var(--n-space-3);
35
+ gap: 0.75rem;
36
36
  cursor: pointer;
37
37
  user-select: none;
38
+ padding: 0.375rem 0.5rem;
39
+ border-radius: 6px;
40
+ transition: background 0.15s;
41
+ }
42
+
43
+ .n-checkbox:hover:not(.is-disabled) {
44
+ background: rgba(99, 102, 241, 0.08);
38
45
  }
39
46
 
40
47
  .n-checkbox-box {
41
- width: 22px;
42
- height: 22px;
43
- border: 2px solid var(--n-color-border);
44
- border-radius: var(--n-radius-sm);
48
+ width: 20px;
49
+ height: 20px;
50
+ border-radius: 6px;
51
+ border: 2px solid #475569;
45
52
  display: flex;
46
53
  align-items: center;
47
54
  justify-content: center;
48
- transition: all var(--n-transition-normal);
55
+ transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
56
+ background: #0f172a;
49
57
  flex-shrink: 0;
50
- background: transparent;
51
- }
52
-
53
- .is-checked .n-checkbox-box {
54
- background: var(--n-color-primary);
55
- border-color: var(--n-color-primary);
56
- box-shadow: var(--n-shadow-glow-primary);
57
58
  }
58
59
 
60
+ .is-checked .n-checkbox-box,
59
61
  .is-indeterminate .n-checkbox-box {
60
- background: var(--n-color-primary);
61
- border-color: var(--n-color-primary);
62
- box-shadow: var(--n-shadow-glow-primary);
62
+ background: #6366f1;
63
+ border-color: #6366f1;
64
+ box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2), 0 4px 12px rgba(99, 102, 241, 0.4);
63
65
  }
64
66
 
65
- .n-checkbox-icon {
67
+ .n-checkbox-check {
66
68
  display: flex;
67
69
  align-items: center;
68
70
  justify-content: center;
69
- color: white;
70
- line-height: 1;
71
- animation: n-checkbox-pop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
72
- }
73
-
74
- .n-checkbox-icon svg {
75
- filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
71
+ animation: n-check 0.25s cubic-bezier(0.4, 0, 0.2, 1);
76
72
  }
77
73
 
78
- @keyframes n-checkbox-pop {
74
+ @keyframes n-check {
79
75
  0% { transform: scale(0); opacity: 0; }
80
- 50% { transform: scale(1.15); }
76
+ 50% { transform: scale(1.2); }
81
77
  100% { transform: scale(1); opacity: 1; }
82
78
  }
83
79
 
84
80
  .n-checkbox-label {
85
- font-size: var(--n-text-sm);
86
- color: var(--n-color-text);
87
- font-weight: var(--n-weight-medium);
81
+ font-size: 0.875rem;
82
+ color: #e2e8f0;
83
+ font-weight: 500;
84
+ line-height: 1.5;
88
85
  }
89
86
 
90
87
  .is-disabled {
91
- opacity: 0.5;
88
+ opacity: 0.4;
92
89
  cursor: not-allowed;
93
90
  }
94
91
 
92
+ .is-disabled .n-checkbox-box {
93
+ background: #1e293b;
94
+ border-color: #334155;
95
+ }
96
+
95
97
  .n-checkbox:hover:not(.is-disabled) .n-checkbox-box {
96
- border-color: var(--n-color-primary);
98
+ border-color: #6366f1;
99
+ }
100
+
101
+ .is-checked .n-checkbox-box:active {
102
+ transform: scale(0.9);
97
103
  }
98
104
  </style>