@owodesign/owoui 0.1.2 → 0.1.4

package/src/styles/ui/button.css

@@ -1,49 +1,49 @@
-.ui-button {
-  --button-bg: var(--ui-surface-bg);
-  --button-bg-hover: var(--ui-surface-bg-inset);
-  --button-bg-active: var(--ui-surface-bg-subtle);
-  --button-text: var(--ui-text-primary);
-  --button-border: var(--ui-surface-border);
-  --button-ring: var(--ui-control-focus-ring);
+.owo-button {
+  --button-bg: var(--owo-cmp-surface-bg);
+  --button-bg-hover: var(--owo-cmp-surface-bg-inset);
+  --button-bg-active: var(--owo-cmp-surface-bg-subtle);
+  --button-text: var(--owo-cmp-text-primary);
+  --button-border: var(--owo-cmp-surface-border);
+  --button-ring: var(--owo-cmp-control-focus-ring);
   --button-disabled-opacity: 0.5;
   background: var(--button-bg);
   color: var(--button-text);
   border-color: var(--button-border);
 }
 
-.ui-button:hover {
+.owo-button:hover {
   background: var(--button-bg-hover);
 }
 
-.ui-button:active {
+.owo-button:active {
   background: var(--button-bg-active);
 }
 
-.ui-button:focus-visible {
+.owo-button:focus-visible {
   --tw-ring-color: var(--button-ring);
 }
 
-.ui-button[data-variant="primary"] {
-  --button-bg: var(--ui-accent-bg);
-  --button-bg-hover: var(--ui-accent-bg-hover);
-  --button-bg-active: color-mix(in srgb, var(--ui-accent-bg-hover) 88%, black);
-  --button-text: var(--ui-accent-text);
+.owo-button[data-variant="primary"] {
+  --button-bg: var(--owo-cmp-accent-bg);
+  --button-bg-hover: var(--owo-cmp-accent-bg-hover);
+  --button-bg-active: color-mix(in srgb, var(--owo-cmp-accent-bg-hover) 88%, black);
+  --button-text: var(--owo-cmp-accent-text);
   --button-border: transparent;
 }
 
-.ui-button[data-variant="ghost"] {
+.owo-button[data-variant="ghost"] {
   --button-bg: transparent;
-  --button-bg-hover: var(--ui-surface-bg-inset);
-  --button-bg-active: var(--ui-surface-bg-subtle);
-  --button-text: var(--ui-text-secondary);
+  --button-bg-hover: var(--owo-cmp-surface-bg-inset);
+  --button-bg-active: var(--owo-cmp-surface-bg-subtle);
+  --button-text: var(--owo-cmp-text-secondary);
   --button-border: transparent;
 }
 
-.ui-button[data-variant="danger"] {
-  --button-bg: var(--ui-danger-bg);
-  --button-bg-hover: color-mix(in srgb, var(--ui-danger-bg) 92%, var(--ui-danger-border));
-  --button-bg-active: color-mix(in srgb, var(--ui-danger-bg) 84%, var(--ui-danger-border));
-  --button-text: var(--ui-danger-text);
-  --button-border: var(--ui-danger-border);
-  --button-ring: var(--ui-danger-border);
+.owo-button[data-variant="danger"] {
+  --button-bg: var(--owo-cmp-danger-bg);
+  --button-bg-hover: color-mix(in srgb, var(--owo-cmp-danger-bg) 92%, var(--owo-cmp-danger-border));
+  --button-bg-active: color-mix(in srgb, var(--owo-cmp-danger-bg) 84%, var(--owo-cmp-danger-border));
+  --button-text: var(--owo-cmp-danger-text);
+  --button-border: var(--owo-cmp-danger-border);
+  --button-ring: var(--owo-cmp-danger-border);
 }

package/src/styles/ui/collapsible.css

@@ -1,13 +1,13 @@
-.ui-collapsible__trigger {
+.owo-collapsible__trigger {
   cursor: pointer;
 }
 
-.ui-collapsible__content {
+.owo-collapsible__content {
   height: auto;
   overflow: hidden;
   transition: height 180ms ease;
 }
 
-.ui-collapsible__content-inner {
+.owo-collapsible__content-inner {
   min-height: 0;
 }

package/src/styles/ui/dialog.css

@@ -1,19 +1,19 @@
-.ui-dialog-backdrop {
-  animation: dialog-backdrop-in 0.2s var(--ease-standard);
+.owo-dialog-backdrop {
+  animation: dialog-backdrop-in 0.2s var(--owo-cmp-motion-ease-standard);
 }
 
-.ui-dialog {
-  background: var(--ui-surface-bg-raised);
-  border: 1px solid var(--ui-surface-border);
-  color: var(--ui-text-primary);
+.owo-dialog {
+  background: var(--owo-cmp-surface-bg-raised);
+  border: 1px solid var(--owo-cmp-surface-border);
+  color: var(--owo-cmp-text-primary);
 }
 
-.ui-dialog__header {
-  color: var(--ui-text-primary);
+.owo-dialog__header {
+  color: var(--owo-cmp-text-primary);
 }
 
-.ui-dialog__body {
-  color: var(--ui-text-secondary);
+.owo-dialog__body {
+  color: var(--owo-cmp-text-secondary);
 }
 
 @keyframes dialog-in {

package/src/styles/ui/drawer.css

@@ -1,6 +1,6 @@
-.ui-drawer {
-  --drawer-surface: var(--ui-surface-bg-raised);
-  --drawer-border: var(--ui-surface-border);
+.owo-drawer {
+  --drawer-surface: var(--owo-cmp-surface-bg-raised);
+  --drawer-border: var(--owo-cmp-surface-border);
   --drawer-shadow: var(--drawer-panel-shadow);
   will-change: transform;
   background: var(--drawer-surface);
@@ -8,8 +8,8 @@
   box-shadow: var(--drawer-shadow);
 }
 
-.ui-drawer-backdrop {
-  --drawer-backdrop: var(--color-overlay-strong);
+.owo-drawer-backdrop {
+  --drawer-backdrop: var(--owo-cmp-overlay-bg);
   border: 0;
   background: var(--drawer-backdrop);
 }

package/src/styles/ui/dropdown-menu.css

@@ -1,98 +1,98 @@
-.ui-dropdown-menu__content {
+.owo-dropdown-menu__content {
   min-width: 12rem;
   overflow-y: auto;
-  border: 1px solid var(--ui-surface-border);
-  border-radius: var(--ui-control-radius-lg);
-  background: var(--ui-surface-bg-raised);
-  box-shadow: var(--ui-dropdown-menu-shadow, var(--ui-surface-shadow-strong));
+  border: 1px solid var(--owo-cmp-surface-border);
+  border-radius: var(--owo-cmp-control-radius-lg);
+  background: var(--owo-cmp-surface-bg-raised);
+  box-shadow: var(--_owo-dropdown-menu-shadow, var(--owo-cmp-surface-shadow-strong));
   padding: 0.375rem;
-  color: var(--ui-text-primary);
+  color: var(--owo-cmp-text-primary);
   outline: none;
-  z-index: 1000;
-  animation: ui-dropdown-menu-in var(--ui-motion-duration-fast) var(--ui-motion-ease-standard);
+  z-index: var(--owo-cmp-z-dropdown);
+  animation: owo-dropdown-menu-in var(--owo-cmp-motion-duration-fast) var(--owo-cmp-motion-ease-standard);
 }
 
-.ui-dropdown-menu__content[data-side="top"] {
+.owo-dropdown-menu__content[data-side="top"] {
   transform-origin: bottom center;
 }
 
-.ui-dropdown-menu__content[data-side="bottom"] {
+.owo-dropdown-menu__content[data-side="bottom"] {
   transform-origin: top center;
 }
 
-.ui-dropdown-menu__content[data-side="left"] {
+.owo-dropdown-menu__content[data-side="left"] {
   transform-origin: center right;
 }
 
-.ui-dropdown-menu__content[data-side="right"] {
+.owo-dropdown-menu__content[data-side="right"] {
   transform-origin: center left;
 }
 
-.ui-dropdown-menu__group + .ui-dropdown-menu__group {
+.owo-dropdown-menu__group + .owo-dropdown-menu__group {
   margin-top: 0.375rem;
   padding-top: 0.375rem;
-  border-top: 1px solid color-mix(in srgb, var(--ui-surface-border) 80%, transparent);
+  border-top: 1px solid color-mix(in srgb, var(--owo-cmp-surface-border) 80%, transparent);
 }
 
-.ui-dropdown-menu__label {
+.owo-dropdown-menu__label {
   padding: 0.35rem 0.625rem 0.25rem;
   font-size: 0.675rem;
   font-weight: 700;
   letter-spacing: 0.12em;
   text-transform: uppercase;
-  color: var(--ui-text-muted);
+  color: var(--owo-cmp-text-muted);
 }
 
-.ui-dropdown-menu__separator {
+.owo-dropdown-menu__separator {
   margin: 0.375rem 0.25rem;
-  border-top: 1px solid color-mix(in srgb, var(--ui-surface-border) 82%, transparent);
+  border-top: 1px solid color-mix(in srgb, var(--owo-cmp-surface-border) 82%, transparent);
 }
 
-.ui-dropdown-menu__item {
+.owo-dropdown-menu__item {
   display: flex;
   width: 100%;
   align-items: center;
   gap: 0.75rem;
   border: 0;
-  border-radius: calc(var(--ui-control-radius-md) - 0.125rem);
+  border-radius: calc(var(--owo-cmp-control-radius-md) - 0.125rem);
   background: transparent;
   padding: 0.625rem 0.75rem;
   text-align: left;
   color: inherit;
   cursor: default;
   transition:
-    background-color var(--ui-motion-duration-fast) var(--ui-motion-ease-standard),
-    color var(--ui-motion-duration-fast) var(--ui-motion-ease-standard);
+    background-color var(--owo-cmp-motion-duration-fast) var(--owo-cmp-motion-ease-standard),
+    color var(--owo-cmp-motion-duration-fast) var(--owo-cmp-motion-ease-standard);
 }
 
-.ui-dropdown-menu__item:hover,
-.ui-dropdown-menu__item[data-highlighted] {
-  background: var(--ui-surface-bg-inset);
+.owo-dropdown-menu__item:hover,
+.owo-dropdown-menu__item[data-highlighted] {
+  background: var(--owo-cmp-surface-bg-inset);
 }
 
-.ui-dropdown-menu__item[data-selected] {
-  background: color-mix(in srgb, var(--ui-accent-bg) 10%, var(--ui-surface-bg-raised));
+.owo-dropdown-menu__item[data-selected] {
+  background: color-mix(in srgb, var(--owo-cmp-accent-bg) 10%, var(--owo-cmp-surface-bg-raised));
 }
 
-.ui-dropdown-menu__item[data-selected] .ui-dropdown-menu__item-main {
-  color: var(--ui-text-primary);
+.owo-dropdown-menu__item[data-selected] .owo-dropdown-menu__item-main {
+  color: var(--owo-cmp-text-primary);
   font-weight: 600;
 }
 
-.ui-dropdown-menu__item[data-disabled] {
+.owo-dropdown-menu__item[data-disabled] {
   opacity: 0.5;
   cursor: not-allowed;
 }
 
-.ui-dropdown-menu__item[data-destructive] {
-  color: var(--ui-danger-text);
+.owo-dropdown-menu__item[data-destructive] {
+  color: var(--owo-cmp-danger-text);
 }
 
-.ui-dropdown-menu__item--inset {
+.owo-dropdown-menu__item--inset {
   padding-left: 1rem;
 }
 
-.ui-dropdown-menu__item-main {
+.owo-dropdown-menu__item-main {
   min-width: 0;
   flex: 1 1 auto;
   overflow: hidden;
@@ -100,26 +100,26 @@
   white-space: nowrap;
 }
 
-.ui-dropdown-menu__shortcut,
-.ui-dropdown-menu__indicator,
-.ui-dropdown-menu__submenu-indicator {
+.owo-dropdown-menu__shortcut,
+.owo-dropdown-menu__indicator,
+.owo-dropdown-menu__submenu-indicator {
   flex: 0 0 auto;
-  color: var(--ui-text-muted);
+  color: var(--owo-cmp-text-muted);
   font-size: 0.75rem;
 }
 
-.ui-dropdown-menu__indicator {
+.owo-dropdown-menu__indicator {
   min-width: 1rem;
   text-align: center;
-  color: var(--ui-accent-bg);
+  color: var(--owo-cmp-accent-bg);
   font-weight: 700;
 }
 
-.ui-dropdown-menu__sub-trigger[data-state="open"] {
-  background: var(--ui-surface-bg-inset);
+.owo-dropdown-menu__sub-trigger[data-state="open"] {
+  background: var(--owo-cmp-surface-bg-inset);
 }
 
-@keyframes ui-dropdown-menu-in {
+@keyframes owo-dropdown-menu-in {
   from {
     opacity: 0;
     transform: scale(0.98);

package/src/styles/ui/field.css

@@ -1,12 +1,12 @@
-.ui-field {
-  --field-label: var(--ui-text-secondary);
-  --field-help: var(--ui-text-muted);
+.owo-field {
+  --field-label: var(--owo-cmp-text-secondary);
+  --field-help: var(--owo-cmp-text-muted);
 }
 
-.ui-field__label {
+.owo-field__label {
   color: var(--field-label);
 }
 
-.ui-field__help {
+.owo-field__help {
   color: var(--field-help);
 }

package/src/styles/ui/icon-button.css

@@ -1,29 +1,29 @@
-.ui-icon-button {
+.owo-icon-button {
   --icon-button-bg: transparent;
-  --icon-button-bg-hover: var(--ui-surface-bg-inset);
-  --icon-button-bg-active: var(--ui-surface-bg-subtle);
-  --icon-button-text: var(--ui-text-muted);
-  --icon-button-ring: var(--ui-control-focus-ring);
+  --icon-button-bg-hover: var(--owo-cmp-surface-bg-inset);
+  --icon-button-bg-active: var(--owo-cmp-surface-bg-subtle);
+  --icon-button-text: var(--owo-cmp-text-muted);
+  --icon-button-ring: var(--owo-cmp-control-focus-ring);
   background: var(--icon-button-bg);
   color: var(--icon-button-text);
 }
 
-.ui-icon-button:hover {
+.owo-icon-button:hover {
   background: var(--icon-button-bg-hover);
-  color: var(--ui-text-primary);
+  color: var(--owo-cmp-text-primary);
 }
 
-.ui-icon-button:active {
+.owo-icon-button:active {
   background: var(--icon-button-bg-active);
 }
 
-.ui-icon-button:focus-visible {
+.owo-icon-button:focus-visible {
   --tw-ring-color: var(--icon-button-ring);
 }
 
-.ui-icon-button[data-variant="subtle"] {
-  --icon-button-bg: var(--ui-surface-bg-inset);
-  --icon-button-bg-hover: var(--ui-surface-bg-subtle);
-  --icon-button-bg-active: var(--ui-surface-bg-raised);
-  --icon-button-text: var(--ui-text-primary);
+.owo-icon-button[data-variant="subtle"] {
+  --icon-button-bg: var(--owo-cmp-surface-bg-inset);
+  --icon-button-bg-hover: var(--owo-cmp-surface-bg-subtle);
+  --icon-button-bg-active: var(--owo-cmp-surface-bg-raised);
+  --icon-button-text: var(--owo-cmp-text-primary);
 }

package/src/styles/ui/input.css

@@ -1,16 +1,16 @@
-.ui-input {
-  --field-bg: var(--ui-surface-bg-inset);
-  --field-border: transparent;
-  --field-text: var(--ui-text-primary);
-  --field-placeholder: var(--ui-text-muted);
-  --field-ring: var(--ui-control-focus-ring);
+.owo-input {
+  --field-bg: var(--owo-cmp-surface-bg);
+  --field-border: var(--owo-cmp-surface-border);
+  --field-text: var(--owo-cmp-text-primary);
+  --field-placeholder: var(--owo-cmp-text-muted);
+  --field-ring: var(--owo-cmp-control-focus-ring);
   background: var(--field-bg);
   border: 1px solid var(--field-border);
   color: var(--field-text);
   --tw-ring-color: var(--field-ring);
 }
 
-.ui-input[data-tone="warning"] {
-  --field-border: var(--ui-warning-border);
-  --field-ring: var(--ui-warning-border);
+.owo-input[data-tone="warning"] {
+  --field-border: var(--owo-cmp-warning-border);
+  --field-ring: var(--owo-cmp-warning-border);
 }

package/src/styles/ui/panel.css

@@ -1,23 +1,23 @@
-.ui-panel {
-  --panel-bg: var(--ui-surface-bg);
-  --panel-border: var(--ui-surface-border);
-  --panel-section-border: var(--ui-surface-border);
+.owo-panel {
+  --panel-bg: var(--owo-cmp-surface-bg);
+  --panel-border: var(--owo-cmp-surface-border);
+  --panel-section-border: var(--owo-cmp-surface-border);
   --panel-shadow: none;
   background: var(--panel-bg);
   border-color: var(--panel-border);
   box-shadow: var(--panel-shadow);
 }
 
-.ui-panel-header,
-.ui-panel-footer {
+.owo-panel-header,
+.owo-panel-footer {
   border-color: var(--panel-section-border);
 }
 
-.ui-panel[data-variant="subtle"] {
-  --panel-bg: var(--ui-surface-bg-subtle);
+.owo-panel[data-variant="subtle"] {
+  --panel-bg: var(--owo-cmp-surface-bg-subtle);
 }
 
-.ui-panel[data-variant="raised"] {
-  --panel-bg: var(--ui-surface-bg-raised);
-  --panel-shadow: var(--ui-surface-shadow);
+.owo-panel[data-variant="raised"] {
+  --panel-bg: var(--owo-cmp-surface-bg-raised);
+  --panel-shadow: var(--owo-cmp-surface-shadow);
 }

package/src/styles/ui/segmented-control.css

@@ -1,28 +1,28 @@
-.ui-segmented-control {
-  --segmented-bg: var(--ui-surface-bg-inset);
-  --segmented-border: var(--ui-surface-border);
-  --segmented-item-text: var(--ui-text-muted);
-  --segmented-item-hover-text: var(--ui-text-secondary);
-  --segmented-item-active-bg: var(--ui-surface-bg-raised);
-  --segmented-item-active-text: var(--ui-text-primary);
-  --segmented-ring: var(--ui-control-focus-ring);
+.owo-segmented-control {
+  --segmented-bg: var(--owo-cmp-surface-bg-inset);
+  --segmented-border: var(--owo-cmp-surface-border);
+  --segmented-item-text: var(--owo-cmp-text-muted);
+  --segmented-item-hover-text: var(--owo-cmp-text-secondary);
+  --segmented-item-active-bg: var(--owo-cmp-surface-bg-raised);
+  --segmented-item-active-text: var(--owo-cmp-text-primary);
+  --segmented-ring: var(--owo-cmp-control-focus-ring);
   background: var(--segmented-bg);
   --tw-ring-color: var(--segmented-border);
 }
 
-.ui-segmented-control__item {
+.owo-segmented-control__item {
   color: var(--segmented-item-text);
 }
 
-.ui-segmented-control__item:hover {
+.owo-segmented-control__item:hover {
   color: var(--segmented-item-hover-text);
 }
 
-.ui-segmented-control__item[data-active="true"] {
+.owo-segmented-control__item[data-active="true"] {
   background: var(--segmented-item-active-bg);
   color: var(--segmented-item-active-text);
 }
 
-.ui-segmented-control__item:focus-visible {
+.owo-segmented-control__item:focus-visible {
   --tw-ring-color: var(--segmented-ring);
 }

package/src/styles/ui/select.css

@@ -1,52 +1,52 @@
-.ui-select__trigger {
-  --select-bg: var(--ui-surface-bg-inset);
-  --select-border: transparent;
-  --select-text: var(--ui-text-primary);
-  --select-ring: var(--ui-control-focus-ring);
+.owo-select__trigger {
+  --select-bg: var(--owo-cmp-surface-bg);
+  --select-border: var(--owo-cmp-surface-border);
+  --select-text: var(--owo-cmp-text-primary);
+  --select-ring: var(--owo-cmp-control-focus-ring);
 
   background: var(--select-bg);
-  border: 1px solid var(--select-border);
+  border: 0.5px solid var(--select-border);
   color: var(--select-text);
   --tw-ring-color: var(--select-ring);
 }
 
-.ui-select__trigger:hover:not(:disabled) {
-  --select-bg: var(--ui-surface-bg-subtle);
+.owo-select__trigger:hover:not(:disabled) {
+  --select-border: var(--owo-cmp-surface-border-strong);
 }
 
-.ui-select__trigger[data-open] {
-  --select-border: var(--ui-surface-border-strong);
+.owo-select__trigger[data-open] {
+  --select-border: var(--owo-cmp-surface-border-strong);
 }
 
-.ui-select__trigger[data-tone="warning"] {
-  --select-border: var(--ui-warning-border);
-  --select-ring: var(--ui-warning-border);
+.owo-select__trigger[data-tone="warning"] {
+  --select-border: var(--owo-cmp-warning-border);
+  --select-ring: var(--owo-cmp-warning-border);
 }
 
-.ui-select__trigger:disabled {
+.owo-select__trigger:disabled {
   cursor: not-allowed;
   opacity: 0.5;
 }
 
-.ui-select__placeholder {
-  color: var(--ui-text-muted);
+.owo-select__placeholder {
+  color: var(--owo-cmp-text-muted);
 }
 
-.ui-select__chevron {
-  color: var(--ui-text-muted);
+.owo-select__chevron {
+  color: var(--owo-cmp-text-muted);
 }
 
-.ui-select__dropdown {
-  background: var(--ui-surface-bg-raised);
-  --tw-ring-color: var(--ui-surface-border);
+.owo-select__dropdown {
+  background: var(--owo-cmp-surface-bg-raised);
+  --tw-ring-color: var(--owo-cmp-surface-border);
   box-shadow: var(--select-dropdown-shadow);
 }
 
-.ui-select__option[data-focused] {
-  background: var(--ui-surface-bg-inset);
+.owo-select__option[data-focused] {
+  background: var(--owo-cmp-surface-bg-inset);
 }
 
-.ui-select__option[data-selected] {
-  color: var(--ui-accent-bg);
+.owo-select__option[data-selected] {
+  color: var(--owo-cmp-accent-bg);
   font-weight: 500;
 }

package/src/styles/ui/skeleton.css

@@ -1,5 +1,5 @@
-.ui-skeleton {
-  --ui-skeleton-scan-duration: 3.6s;
+.owo-skeleton {
+  --_owo-skeleton-scan-duration: 3.6s;
   position: relative;
   overflow: hidden;
   background: var(--skeleton-bg);
@@ -7,11 +7,11 @@
   transform: translateZ(0);
 }
 
-.ui-skeleton[data-tone='emphasis'] {
+.owo-skeleton[data-tone='emphasis'] {
   background: var(--skeleton-bg-emphasis);
 }
 
-.ui-skeleton::before {
+.owo-skeleton::before {
   content: "";
   position: absolute;
   inset: 0;
@@ -19,7 +19,7 @@
   opacity: 0.84;
 }
 
-.ui-skeleton::after {
+.owo-skeleton::after {
   content: "";
   position: absolute;
   inset: -35%;
@@ -29,25 +29,25 @@
   will-change: transform, opacity;
 }
 
-.ui-skeleton[data-animation='pulse']::after {
+.owo-skeleton[data-animation='pulse']::after {
   display: none;
 }
 
-.ui-skeleton[data-animation='pulse']::before {
-  animation: ui-skeleton-breathe 2.6s var(--ease-standard) infinite;
+.owo-skeleton[data-animation='pulse']::before {
+  animation: owo-skeleton-breathe 2.6s var(--owo-cmp-motion-ease-standard) infinite;
 }
 
-.ui-skeleton[data-animation='scan']::before {
+.owo-skeleton[data-animation='scan']::before {
   opacity: 1;
   filter: none;
 }
 
-.ui-skeleton[data-animation='scan']::after {
+.owo-skeleton[data-animation='scan']::after {
   opacity: 1;
-  animation: ui-skeleton-scan var(--ui-skeleton-scan-duration) cubic-bezier(0.3, 0, 0.2, 1) infinite;
+  animation: owo-skeleton-scan var(--_owo-skeleton-scan-duration) cubic-bezier(0.3, 0, 0.2, 1) infinite;
 }
 
-@keyframes ui-skeleton-breathe {
+@keyframes owo-skeleton-breathe {
   0%,
   100% {
     opacity: 0.8;
@@ -60,7 +60,7 @@
   }
 }
 
-@keyframes ui-skeleton-scan {
+@keyframes owo-skeleton-scan {
   0% {
     transform: translateX(-140%) skewX(-14deg);
     opacity: 0;
@@ -86,13 +86,13 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .ui-skeleton::before {
+  .owo-skeleton::before {
     animation: none;
     opacity: 0.94;
     filter: none;
   }
 
-  .ui-skeleton::after {
+  .owo-skeleton::after {
     animation: none;
     opacity: 0;
   }