WorkRoot/WRNexusJS
2
0
Fork 0
Code Issues Pull Requests Actions 27 Packages Projects Releases Wiki Activity

localize legacy UI component styles

Browse Source
This commit is contained in:
Clintchiz
2026-08-09 21:07:10 +05:30
parent 3f5ec8696f
commit 6859b5c4ff
17 changed files with 512 additions and 866 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/components/AdvancedSelect.wrn
+7
View File
@@ -458,6 +458,13 @@ component AdvancedSelect {
}
style {
.wire-next__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.wire-next__select-search {
position: relative;
display: block;
packages/ui/components/ButtonGroup.wrn
+114 -1
View File
@@ -112,12 +112,125 @@ items: unknown[] = []
opacity: 0.6;
}
.wire-next--button-group[data-attached="true"] > :is(.wire-btn, .wire-action) {
position: relative;
margin: 0;
}
.wire-next--button-group[data-attached="true"] > .wire-action {
display: flex;
}
.wire-next--button-group[data-attached="true"] > :is(.wire-btn, .wire-action) :is(.wire-btn) {
height: 100%;
}
.wire-next--button-group[data-attached="true"][data-orientation="horizontal"]
> :is(.wire-btn, .wire-action):not(:first-child) {
margin-inline-start: -1px;
}
.wire-next--button-group[data-attached="true"][data-orientation="horizontal"]
> .wire-btn:not(:first-child):not(:last-child),
.wire-next--button-group[data-attached="true"][data-orientation="horizontal"]
> .wire-action:not(:first-child):not(:last-child)
> .wire-btn {
border-radius: 0;
}
.wire-next--button-group[data-attached="true"][data-orientation="horizontal"]
> .wire-btn:first-child:not(:last-child),
.wire-next--button-group[data-attached="true"][data-orientation="horizontal"]
> .wire-action:first-child:not(:last-child)
> .wire-btn {
border-start-end-radius: 0;
border-end-end-radius: 0;
}
.wire-next--button-group[data-attached="true"][data-orientation="horizontal"]
> .wire-btn:last-child:not(:first-child),
.wire-next--button-group[data-attached="true"][data-orientation="horizontal"]
> .wire-action:last-child:not(:first-child)
> .wire-btn {
border-start-start-radius: 0;
border-end-start-radius: 0;
}
.wire-next--button-group[data-attached="true"][data-orientation="vertical"]
> :is(.wire-btn, .wire-action):not(:first-child) {
margin-top: -1px;
}
.wire-next--button-group[data-attached="true"][data-orientation="vertical"]
> .wire-btn:not(:first-child):not(:last-child),
.wire-next--button-group[data-attached="true"][data-orientation="vertical"]
> .wire-action:not(:first-child):not(:last-child)
> .wire-btn {
border-radius: 0;
}
.wire-next--button-group[data-attached="true"][data-orientation="vertical"]
> .wire-btn:first-child:not(:last-child),
.wire-next--button-group[data-attached="true"][data-orientation="vertical"]
> .wire-action:first-child:not(:last-child)
> .wire-btn {
border-end-start-radius: 0;
border-end-end-radius: 0;
}
.wire-next--button-group[data-attached="true"][data-orientation="vertical"]
> .wire-btn:last-child:not(:first-child),
.wire-next--button-group[data-attached="true"][data-orientation="vertical"]
> .wire-action:last-child:not(:first-child)
> .wire-btn {
border-start-start-radius: 0;
border-start-end-radius: 0;
}
.wire-next--button-group > :is(.wire-btn, .wire-action):focus-within,
.wire-next--button-group > .wire-btn:focus-visible {
z-index: 2;
}
.wire-next--button-group[data-selectable="true"] > .wire-btn[data-selected="true"] {
z-index: 1;
border-color: var(--wire-component-color);
background: color-mix(in srgb, var(--wire-component-color) 16%, var(--wire-color-surface));
color: var(--wire-component-color);
}
@media (max-width: 480px) {
.wire-next--button-group[data-responsive="true"] {
.wire-next--button-group[data-responsive="true"] > :is(.wire-btn, .wire-action) {
display: flex;
width: 100%;
flex-direction: column;
}
.wire-next--button-group[data-responsive="true"] > .wire-action > .wire-btn {
width: 100%;
}
.wire-next--button-group[data-responsive="true"][data-attached="true"]
> :is(.wire-btn, .wire-action) {
margin-top: -1px;
margin-inline-start: 0;
}
.wire-next--button-group[data-responsive="true"][data-attached="true"]
> :is(.wire-btn, .wire-action):first-child {
margin-top: 0;
}
.wire-next--button-group[data-responsive="true"][data-attached="true"] > .wire-btn,
.wire-next--button-group[data-responsive="true"][data-attached="true"]
> .wire-action
> .wire-btn {
border-radius: 0;
}
.wire-next--button-group[data-responsive="true"][data-attached="true"] > .wire-btn:first-child,
.wire-next--button-group[data-responsive="true"][data-attached="true"]
> .wire-action:first-child
> .wire-btn {
border-start-start-radius: var(--wire-radius-sm);
border-start-end-radius: var(--wire-radius-sm);
}
.wire-next--button-group[data-responsive="true"][data-attached="true"] > .wire-btn:last-child,
.wire-next--button-group[data-responsive="true"][data-attached="true"]
> .wire-action:last-child
> .wire-btn {
border-end-start-radius: var(--wire-radius-sm);
border-end-end-radius: var(--wire-radius-sm);
}
}
}
}
packages/ui/components/Card.wrn
+17
View File
@@ -311,6 +311,23 @@ component Card {
}
style {
.wire-next__card-media--overlay {
aspect-ratio: 16 / 9;
min-height: 18rem;
}
.wire-next__card-media--overlay > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
@media (max-width: 480px) {
.wire-next__card-media--overlay {
aspect-ratio: 4 / 3;
min-height: 16rem;
}
}
.wire-next--card {
--wire-card-color: var(--wire-component-color, var(--wire-color-primary));
--wire-card-padding: 1.25rem;
packages/ui/components/Carousel.wrn
+5
View File
@@ -469,7 +469,12 @@ component Carousel {
width: 100%;
min-width: 0;
gap: 1rem;
padding: 1rem;
border: 1px solid var(--wire-color-border);
border-radius: var(--wire-radius-md);
color: var(--wire-color-text);
background: var(--wire-color-surface);
box-shadow: var(--wire-shadow-1);
}
.wire-next__carousel-header h3,
packages/ui/components/ChatBubble.wrn
+9
View File
@@ -149,6 +149,15 @@ component ChatBubble {
}
style {
.wire-next--chat-bubble.wire-next--size-sm {
--wire-chat-padding: 0.75rem;
font-size: 0.875rem;
}
.wire-next--chat-bubble.wire-next--size-lg {
--wire-chat-padding: 1.25rem;
font-size: 1.0625rem;
}
.wire-next--chat-bubble {
--wire-chat-color: var(--wire-component-color, var(--wire-color-primary));
--wire-chat-padding: 1rem;
packages/ui/components/Collapse.wrn
+7
View File
@@ -97,6 +97,13 @@ size: string = "default"
}
style {
.wire-next--collapse.wire-next--size-sm {
font-size: 0.875rem;
}
.wire-next--collapse.wire-next--size-lg {
font-size: 1.0625rem;
}
.wire-next--collapse {
--wire-collapse-color: var(--wire-component-color, var(--wire-color-primary));
display: grid;
packages/ui/components/DataTable.wrn
+10
View File
@@ -1046,6 +1046,16 @@ component DataTable {
}
style {
.wire-next--data-map {
display: grid;
gap: 0.75rem;
padding: 1rem;
border: 1px solid var(--wire-color-border);
border-radius: var(--wire-radius-md);
background: var(--wire-color-surface);
box-shadow: var(--wire-shadow-1);
}
.wire-table {
--table-accent: var(--wire-color-primary);
display: flex;
packages/ui/components/DeviceFrame.wrn
+10
View File
@@ -33,6 +33,16 @@ component DeviceFrame {
}
style {
.wire-next--device-frame {
display: grid;
gap: 0.75rem;
padding: 1rem;
border: 1px solid var(--wire-color-border);
border-radius: var(--wire-radius-md);
background: var(--wire-color-surface);
box-shadow: var(--wire-shadow-1);
}
.wire-next--device-frame > header {
display: flex;
align-items: center;
packages/ui/components/FileUploadProgress.wrn
+12
View File
@@ -39,6 +39,18 @@ size: string = "default"
}
style {
.wire-next__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.wire-next--file-upload-progress progress {
width: 100%;
accent-color: var(--wire-color-primary);
}
.wire-next--file-upload-progress {
display: grid;
width: min(100%, 36rem);
packages/ui/components/PinInput.wrn
+5
View File
@@ -116,6 +116,11 @@ component PinInput {
}
style {
.wire-next--pin-input.wire-next--invalid .wire-next__pin-cells input,
.wire-next--pin-input:has(input.wire-invalid) .wire-next__pin-cells input {
border-color: var(--wire-color-danger);
}
.wire-next--pin-input {
display: grid;
width: 100%;
packages/ui/components/ToggleCount.wrn
+10
View File
@@ -282,6 +282,16 @@ component ToggleCount {
}
style {
.wire-next__toggle-count-control--start {
justify-content: flex-start;
}
.wire-next__toggle-count-control--center {
justify-content: center;
}
.wire-next__toggle-count-control--end {
justify-content: flex-end;
}
.wire-next--toggle-count {
--wire-toggle-count-accent: var(--wire-component-color);
display: grid;
packages/ui/components/alert.wrn
+50
View File
@@ -145,6 +145,56 @@ component Alert {
}
style {
.wire-next--alert-soft {
border-color: color-mix(in srgb, var(--wire-alert-color) 45%, var(--wire-color-border));
background: var(--wire-alert-soft);
}
.wire-next--alert-soft .wire-next__alert-title,
.wire-next--alert-soft .wire-next__alert-icon,
.wire-next--alert-soft .wire-next__alert-actions a {
color: var(--wire-alert-color);
}
.wire-next--alert-solid {
border-color: var(--wire-alert-color);
background: var(--wire-alert-color);
color: white;
}
.wire-next--alert.wire-next--alert-solid
:is(
.wire-next__alert-title,
.wire-next__alert-body > p,
.wire-next__alert-body li,
.wire-next__alert-actions a,
.wire-next__alert-icon
) {
color: currentColor;
}
.wire-next--alert-solid[data-color="light"] {
color: #18181b;
}
.wire-next--alert-solid[data-color="warning"] {
color: #18181b;
}
.wire-next--alert-bordered {
border-color: var(--wire-alert-color);
background: var(--wire-color-surface);
}
.wire-next--alert-bordered .wire-next__alert-title,
.wire-next--alert-bordered .wire-next__alert-icon,
.wire-next--alert-bordered .wire-next__alert-actions a {
color: var(--wire-alert-color);
}
.wire-next--alert-accent {
border-color: color-mix(in srgb, var(--wire-alert-color) 35%, var(--wire-color-border));
border-left: 4px solid var(--wire-alert-color);
background: var(--wire-alert-soft);
}
.wire-next--alert-accent .wire-next__alert-title,
.wire-next--alert-accent .wire-next__alert-icon,
.wire-next--alert-accent .wire-next__alert-actions a {
color: var(--wire-alert-color);
}
.wire-next--alert {
--wire-alert-color: var(--wire-component-color);
--wire-alert-soft: color-mix(in srgb, var(--wire-alert-color) 16%, var(--wire-color-surface));
packages/ui/components/button.wrn
+221
View File
@@ -167,6 +167,227 @@ label: string = "Button"
style {
/* --- Button --------------------------------------------------------------- */
.wire-btn {
position: relative;
--wire-btn-color: var(--wire-color-primary);
--wire-btn-contrast: var(--wire-color-primary-contrast);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
font: inherit;
font-size: 0.875rem;
font-weight: 600;
line-height: 1;
border: 1px solid transparent;
border-radius: var(--wire-radius-sm);
padding: 0 0.75rem;
cursor: pointer;
text-decoration: none;
min-height: 2rem;
transition:
color var(--wire-motion-base) var(--wire-ease-standard),
border-color var(--wire-motion-base) var(--wire-ease-standard),
background var(--wire-motion-base) var(--wire-ease-standard),
box-shadow var(--wire-motion-base) var(--wire-ease-standard),
transform var(--wire-motion-base) var(--wire-ease-emphasized);
}
.wire-btn:active {
transform: scale(0.98);
}
.wire-btn:focus-visible {
outline: 2px solid var(--wire-color-primary);
outline-offset: 2px;
}
.wire-btn--color-primary {
--wire-btn-color: var(--wire-color-primary);
--wire-btn-contrast: var(--wire-color-primary-contrast);
}
.wire-btn--color-secondary {
--wire-btn-color: var(--wire-color-muted);
--wire-btn-contrast: var(--wire-color-bg);
}
.wire-btn--color-success {
--wire-btn-color: var(--wire-color-success);
--wire-btn-contrast: var(--wire-color-primary-contrast);
}
.wire-btn--color-warning {
--wire-btn-color: var(--wire-color-warning);
--wire-btn-contrast: var(--wire-color-bg);
}
.wire-btn--color-danger {
--wire-btn-color: var(--wire-color-danger);
--wire-btn-contrast: var(--wire-color-primary-contrast);
}
.wire-btn--color-info {
--wire-btn-color: var(--wire-color-info);
--wire-btn-contrast: var(--wire-color-primary-contrast);
}
.wire-btn--variant-default,
.wire-btn--variant-solid,
.wire-btn--default,
.wire-btn--solid,
.wire-btn--primary {
color: var(--wire-btn-contrast);
background: var(--wire-btn-color);
box-shadow:
0 1px 2px color-mix(in srgb, black 20%, transparent),
0 0 0 1px color-mix(in srgb, var(--wire-btn-color) 72%, transparent);
}
.wire-btn--variant-default:hover,
.wire-btn--variant-solid:hover,
.wire-btn--default:hover,
.wire-btn--solid:hover,
.wire-btn--primary:hover {
background: color-mix(in srgb, var(--wire-btn-color) 84%, black);
transform: translateY(-1px);
box-shadow:
0 0.35rem 0.9rem color-mix(in srgb, var(--wire-btn-color) 20%, transparent),
0 0 0 1px color-mix(in srgb, var(--wire-btn-color) 82%, transparent);
}
.wire-btn--variant-outline,
.wire-btn--outline {
color: var(--wire-btn-color);
background: transparent;
border-color: color-mix(in srgb, var(--wire-btn-color) 55%, var(--wire-color-border));
}
.wire-btn--variant-outline:hover,
.wire-btn--outline:hover {
background: color-mix(in srgb, var(--wire-btn-color) 10%, transparent);
border-color: var(--wire-btn-color);
}
.wire-btn--variant-destructive,
.wire-btn--danger,
.wire-btn--destructive {
color: var(--wire-btn-color);
background: color-mix(in srgb, var(--wire-btn-color) 12%, transparent);
border-color: color-mix(in srgb, var(--wire-btn-color) 28%, transparent);
}
.wire-btn--danger,
.wire-btn--destructive {
--wire-btn-color: var(--wire-color-danger);
}
.wire-btn--variant-destructive:hover,
.wire-btn--danger:hover,
.wire-btn--destructive:hover {
background: color-mix(in srgb, var(--wire-btn-color) 20%, transparent);
}
.wire-btn--variant-ghost,
.wire-btn--ghost {
background: transparent;
color: var(--wire-btn-color);
}
.wire-btn--variant-ghost:hover,
.wire-btn--ghost:hover {
background: color-mix(in srgb, var(--wire-btn-color) 10%, transparent);
}
.wire-btn--variant-secondary,
.wire-btn--secondary {
color: var(--wire-color-text);
background: color-mix(in srgb, var(--wire-btn-color) 10%, var(--wire-color-surface));
border-color: color-mix(in srgb, var(--wire-btn-color) 24%, var(--wire-color-border));
box-shadow: var(--wire-shadow-1);
}
.wire-btn--variant-secondary:hover,
.wire-btn--secondary:hover {
color: var(--wire-btn-color);
border-color: color-mix(in srgb, var(--wire-btn-color) 55%, var(--wire-color-border));
background: color-mix(in srgb, var(--wire-btn-color) 15%, var(--wire-color-surface));
transform: translateY(-2px);
}
.wire-btn--variant-link,
.wire-btn--link {
min-height: auto;
padding: 0;
color: var(--wire-btn-color);
background: transparent;
border-color: transparent;
border-radius: 0;
text-underline-offset: 0.22em;
}
.wire-btn--variant-link:hover,
.wire-btn--link:hover {
text-decoration: underline;
}
.wire-btn:disabled,
.wire-btn[aria-busy="true"] {
cursor: not-allowed;
opacity: 0.58;
transform: none;
box-shadow: none;
}
.wire-btn--size-xs,
.wire-btn--xs {
min-height: 1.5rem;
padding-inline: 0.5rem;
gap: 0.25rem;
font-size: 0.75rem;
}
.wire-btn--size-sm,
.wire-btn--sm {
min-height: 2.125rem;
padding-inline: 0.625rem;
gap: 0.25rem;
font-size: 0.8rem;
}
.wire-btn--size-default,
.wire-btn--md {
min-height: 2.5rem;
padding-inline: 0.75rem;
font-size: 0.875rem;
}
.wire-btn--size-lg,
.wire-btn--lg {
min-height: 2.75rem;
padding-inline: 0.875rem;
font-size: 0.925rem;
}
.wire-btn--size-icon,
.wire-btn--size-icon-xs,
.wire-btn--size-icon-sm,
.wire-btn--size-icon-lg,
.wire-btn--icon,
.wire-btn--icon-xs,
.wire-btn--icon-sm,
.wire-btn--icon-lg {
flex: none;
padding: 0;
}
.wire-btn--size-icon,
.wire-btn--icon {
width: 2rem;
height: 2rem;
}
.wire-btn--size-icon-xs,
.wire-btn--icon-xs {
width: 1.5rem;
min-height: 1.5rem;
}
.wire-btn--size-icon-sm,
.wire-btn--icon-sm {
width: 1.75rem;
min-height: 1.75rem;
}
.wire-btn--size-icon-lg,
.wire-btn--icon-lg {
width: 2.25rem;
min-height: 2.25rem;
}
.wire-btn__icon {
width: 1rem;
height: 1rem;
flex: none;
}
.wire-btn__label {
font-weight: 650;
}
.wire-btn:hover > .wire-btn__tooltip,
.wire-btn:focus-visible > .wire-btn__tooltip {
opacity: 1;
transform: translate(-50%, 0);
}
.wire-action {
position: relative;
display: inline-flex;