@xcv-ui/ui 1.0.0 → 1.0.1

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 (2) hide show
  1. package/package.json +1 -1
  2. package/styles/primitives.css +28 -11
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xcv-ui/ui",
3
- "version": "1.0.0",
3
+ "version": "1.0.1",
4
4
  "description": "Reusable React UI components for XCV",
5
5
  "license": "MIT",
6
6
  "type": "module",
package/styles/primitives.css CHANGED
@@ -424,8 +424,8 @@
424
424
  .xcv-tabs--vertical .xcv-tabs__list { width: auto; flex-wrap: nowrap; flex-direction: column; align-items: stretch; }
425
425
  .xcv-tabs__tab { position: relative; display: inline-flex; min-width: 0; max-width: 100%; overflow-wrap: anywhere; min-height: 2.5rem; align-items: center; justify-content: center; padding: var(--xcv-space-sm) var(--xcv-space-md); border: 1px solid transparent; border-radius: var(--xcv-radius-md); color: var(--xcv-color-text-secondary); background: transparent; font: inherit; font-weight: var(--xcv-font-weight-medium); cursor: pointer; transition: color var(--xcv-motion-duration) var(--xcv-motion-easing), background var(--xcv-motion-duration) var(--xcv-motion-easing), border-color var(--xcv-motion-duration) var(--xcv-motion-easing), box-shadow var(--xcv-motion-duration) var(--xcv-motion-easing), transform var(--xcv-motion-duration) var(--xcv-motion-easing); }
426
426
  .xcv-tabs__tab:hover:not(:disabled) { color: var(--xcv-color-text-primary); background: var(--xcv-gradient-surface-hover); transform: translateY(-1px); }
427
- .xcv-tabs__tab--selected { border-color: color-mix(in srgb, var(--xcv-color-accent) 30%, var(--xcv-color-border)); color: var(--xcv-color-text-primary); background: var(--xcv-gradient-surface); box-shadow: var(--xcv-shadow-sm), inset 0 1px 0 color-mix(in srgb, var(--xcv-color-text-inverse) 16%, transparent); font-weight: var(--xcv-font-weight-semibold); }
428
- .xcv-tabs__tab::after { position: absolute; inset-inline: var(--xcv-space-md); inset-block-end: 0.2rem; height: 2px; border-radius: var(--xcv-radius-full); background: var(--xcv-gradient-action-primary); content: ""; opacity: 0; transform: scaleX(0.35); transform-origin: center; transition: opacity var(--xcv-motion-duration) var(--xcv-motion-easing), transform var(--xcv-motion-duration) var(--xcv-motion-easing); }
427
+ .xcv-tabs__tab--selected { border-color: var(--xcv-color-action-primary); color: var(--xcv-color-text-inverse); background: var(--xcv-gradient-action-primary); box-shadow: var(--xcv-shadow-md), inset 0 1px 0 color-mix(in srgb, var(--xcv-color-text-inverse) 26%, transparent); font-weight: var(--xcv-font-weight-semibold); }
428
+ .xcv-tabs__tab::after { position: absolute; inset-inline: var(--xcv-space-md); inset-block-end: 0.2rem; height: 3px; border-radius: var(--xcv-radius-full); background: color-mix(in srgb, var(--xcv-color-action-primary) 55%, var(--xcv-color-text-inverse)); box-shadow: 0 0 8px color-mix(in srgb, var(--xcv-color-action-primary) 72%, transparent); content: ""; opacity: 0; transform: scaleX(0.35); transform-origin: center; transition: opacity var(--xcv-motion-duration) var(--xcv-motion-easing), transform var(--xcv-motion-duration) var(--xcv-motion-easing); }
429
429
  .xcv-tabs__tab--selected::after { opacity: 1; transform: scaleX(1); }
430
430
  .xcv-tabs__tab:focus-visible { z-index: 1; outline: 2px solid var(--xcv-color-focus-ring); outline-offset: 2px; }
431
431
  .xcv-tabs__tab:disabled { opacity: var(--xcv-opacity-disabled); cursor: not-allowed; }
@@ -907,9 +907,10 @@
907
907
  }
908
908
  .xcv-tabs__tab { border-radius: var(--xcv-radius-lg); }
909
909
  .xcv-tabs__tab--selected {
910
- border-color: color-mix(in srgb, var(--xcv-color-accent) 38%, var(--xcv-color-border));
911
- background: var(--xcv-gradient-control-surface);
912
- box-shadow: var(--xcv-shadow-sm), inset 0 1px 0 color-mix(in srgb, var(--xcv-color-text-inverse) 18%, transparent);
910
+ border-color: var(--xcv-color-action-primary);
911
+ color: var(--xcv-color-text-inverse);
912
+ background: var(--xcv-gradient-action-primary);
913
+ box-shadow: var(--xcv-shadow-md), inset 0 1px 0 color-mix(in srgb, var(--xcv-color-text-inverse) 26%, transparent);
913
914
  }
914
915
  .xcv-tabs__tab:active:not(:disabled) { transform: scale(0.985); }
915
916
 
@@ -1108,14 +1109,30 @@
1108
1109
  }
1109
1110
  .xcv-select__option[aria-selected="true"] .xcv-select__check { color: var(--xcv-color-accent-cyan); }
1110
1111
  .xcv-tabs__tab--selected {
1111
- border-color: color-mix(in srgb, var(--xcv-color-accent-cobalt) 34%, var(--xcv-color-border));
1112
- background:
1113
- radial-gradient(ellipse 90% 150% at 0% 0%, color-mix(in srgb, var(--xcv-color-accent-cyan) 12%, transparent), transparent 72%),
1114
- radial-gradient(ellipse 80% 130% at 100% 100%, color-mix(in srgb, var(--xcv-color-accent-lavender) 10%, transparent), transparent 72%),
1115
- var(--xcv-gradient-control-surface);
1112
+ border-color: var(--xcv-color-action-primary);
1113
+ color: var(--xcv-color-text-inverse);
1114
+ background: var(--xcv-gradient-action-primary);
1115
+ box-shadow: var(--xcv-shadow-md), inset 0 1px 0 color-mix(in srgb, var(--xcv-color-text-inverse) 26%, transparent);
1116
+ }
1117
+ .xcv-tabs__tab--selected {
1118
+ border-color: var(--xcv-color-action-primary);
1119
+ color: var(--xcv-color-text-inverse);
1120
+ background: var(--xcv-gradient-action-primary);
1121
+ box-shadow: var(--xcv-shadow-md), inset 0 1px 0 color-mix(in srgb, var(--xcv-color-text-inverse) 26%, transparent);
1122
+ }
1123
+ .xcv-tabs__tab--selected:hover:not(:disabled) {
1124
+ color: var(--xcv-color-text-inverse);
1125
+ background: var(--xcv-gradient-action-primary-hover);
1126
+ box-shadow: 0 4px 14px color-mix(in srgb, var(--xcv-color-action-primary) 32%, transparent), inset 0 1px 0 color-mix(in srgb, var(--xcv-color-text-inverse) 25%, transparent);
1127
+ }
1128
+ .xcv-tabs__tab::after {
1129
+ height: 3px;
1130
+ background: var(--xcv-color-text-inverse);
1131
+ box-shadow: 0 0 8px color-mix(in srgb, var(--xcv-color-text-inverse) 55%, transparent);
1116
1132
  }
1117
1133
  .xcv-tabs__tab--selected::after {
1118
- background: linear-gradient(90deg, var(--xcv-color-accent-cobalt), var(--xcv-color-accent-cyan) 58%, var(--xcv-color-accent-lavender));
1134
+ background: var(--xcv-color-text-inverse);
1135
+ box-shadow: 0 0 8px color-mix(in srgb, var(--xcv-color-text-inverse) 55%, transparent);
1119
1136
  }
1120
1137
  .xcv-badge {
1121
1138
  --xcv-badge-accent: var(--xcv-color-accent-cobalt);