@rokkit/themes 1.0.0-next.127 → 1.0.0-next.128

package/src/material/list.css

@@ -84,20 +84,20 @@
    Groups
    ============================================================================= */
 
-[data-style='material'] [data-list] [data-list-group-label] {
+[data-style='material'] [data-list] [data-list-group] {
 	@apply text-surface-z6 font-medium;
 }
 
-[data-style='material'] [data-list] [data-list-group-label]:hover:not(:disabled),
-[data-style='material'] [data-list] [data-list-group-label]:focus:not(:disabled) {
-	@apply text-surface-z7;
+[data-style='material'] [data-list] [data-list-group]:hover:not(:disabled),
+[data-style='material'] [data-list] [data-list-group]:focus:not(:disabled) {
+	@apply bg-surface-z3 text-surface-z8;
 }
 
 /* =============================================================================
-   Divider
+   Separator
    ============================================================================= */
 
-[data-style='material'] [data-list] [data-list-divider] {
+[data-style='material'] [data-list] [data-list-separator] {
 	@apply bg-surface-z3;
 }
 

package/src/material/menu.css

@@ -79,7 +79,7 @@
    Groups
    ============================================================================= */
 
-[data-style='material'] [data-menu-group-label] {
+[data-style='material'] [data-menu-group] {
 	@apply text-surface-z5 font-medium;
 }
 
@@ -87,6 +87,6 @@
    Divider
    ============================================================================= */
 
-[data-style='material'] [data-menu-divider] {
+[data-style='material'] [data-menu-separator] {
 	@apply bg-surface-z3;
 }

package/src/minimal/list.css

@@ -84,20 +84,20 @@
    Groups
    ============================================================================= */
 
-[data-style='minimal'] [data-list] [data-list-group-label] {
+[data-style='minimal'] [data-list] [data-list-group] {
 	@apply text-surface-z5;
 }
 
-[data-style='minimal'] [data-list] [data-list-group-label]:hover:not(:disabled),
-[data-style='minimal'] [data-list] [data-list-group-label]:focus:not(:disabled) {
-	@apply text-surface-z6;
+[data-style='minimal'] [data-list] [data-list-group]:hover:not(:disabled),
+[data-style='minimal'] [data-list] [data-list-group]:focus:not(:disabled) {
+	@apply text-surface-z7 border-l-surface-z3 border-l-2;
 }
 
 /* =============================================================================
-   Divider
+   Separator
    ============================================================================= */
 
-[data-style='minimal'] [data-list] [data-list-divider] {
+[data-style='minimal'] [data-list] [data-list-separator] {
 	@apply bg-surface-z3;
 }
 

package/src/minimal/menu.css

@@ -75,7 +75,7 @@
    Groups
    ============================================================================= */
 
-[data-style='minimal'] [data-menu-group-label] {
+[data-style='minimal'] [data-menu-group] {
 	@apply text-surface-z5;
 }
 
@@ -83,6 +83,6 @@
    Divider
    ============================================================================= */
 
-[data-style='minimal'] [data-menu-divider] {
+[data-style='minimal'] [data-menu-separator] {
 	@apply bg-surface-z3;
 }

package/src/rokkit/button.css

@@ -9,28 +9,28 @@
    ============================================================================= */
 
 /* Default variant */
-[data-button][data-style='default'][data-variant='default'],
-[data-button]:not([data-style])[data-variant='default'],
-[data-button][data-style='default']:not([data-variant]),
-[data-button]:not([data-style]):not([data-variant]) {
+[data-style='rokkit'] [data-button][data-style='default'][data-variant='default'],
+[data-style='rokkit'] [data-button]:not([data-style])[data-variant='default'],
+[data-style='rokkit'] [data-button][data-style='default']:not([data-variant]),
+[data-style='rokkit'] [data-button]:not([data-style]):not([data-variant]) {
   @apply from-surface-z3 to-surface-z2 border-surface-z4 text-surface-z8 border bg-gradient-to-b;
 }
 
 /* Primary variant */
-[data-button][data-style='default'][data-variant='primary'],
-[data-button]:not([data-style])[data-variant='primary'] {
+[data-style='rokkit'] [data-button][data-style='default'][data-variant='primary'],
+[data-style='rokkit'] [data-button]:not([data-style])[data-variant='primary'] {
   @apply from-primary-z5 to-secondary-z5 border-primary-z5 text-on-primary border bg-gradient-to-b;
 }
 
 /* Secondary variant */
-[data-button][data-style='default'][data-variant='secondary'],
-[data-button]:not([data-style])[data-variant='secondary'] {
+[data-style='rokkit'] [data-button][data-style='default'][data-variant='secondary'],
+[data-style='rokkit'] [data-button]:not([data-style])[data-variant='secondary'] {
   @apply from-secondary-z4 to-secondary-z3 border-secondary-z5 text-on-secondary border bg-gradient-to-b;
 }
 
 /* Danger variant */
-[data-button][data-style='default'][data-variant='danger'],
-[data-button]:not([data-style])[data-variant='danger'] {
+[data-style='rokkit'] [data-button][data-style='default'][data-variant='danger'],
+[data-style='rokkit'] [data-button]:not([data-style])[data-variant='danger'] {
   @apply from-danger-z4 to-danger-z3 border-danger-z5 text-on-danger border bg-gradient-to-b;
 }
 
@@ -38,20 +38,20 @@
    Outline Style
    ============================================================================= */
 
-[data-button][data-style='outline'][data-variant='default'],
-[data-button][data-style='outline']:not([data-variant]) {
+[data-style='rokkit'] [data-button][data-style='outline'][data-variant='default'],
+[data-style='rokkit'] [data-button][data-style='outline']:not([data-variant]) {
   @apply border-surface-z4 text-surface-z7 border bg-transparent;
 }
 
-[data-button][data-style='outline'][data-variant='primary'] {
+[data-style='rokkit'] [data-button][data-style='outline'][data-variant='primary'] {
   @apply border-primary-z4 text-primary-z6 border bg-transparent;
 }
 
-[data-button][data-style='outline'][data-variant='secondary'] {
+[data-style='rokkit'] [data-button][data-style='outline'][data-variant='secondary'] {
   @apply border-secondary-z4 text-secondary-z6 border bg-transparent;
 }
 
-[data-button][data-style='outline'][data-variant='danger'] {
+[data-style='rokkit'] [data-button][data-style='outline'][data-variant='danger'] {
   @apply border-danger-z4 text-danger-z4 border bg-transparent;
 }
 
@@ -59,24 +59,24 @@
    Ghost Style
    ============================================================================= */
 
-[data-button][data-style='ghost'] {
+[data-style='rokkit'] [data-button][data-style='ghost'] {
   @apply border-transparent bg-transparent;
 }
 
-[data-button][data-style='ghost'][data-variant='default'],
-[data-button][data-style='ghost']:not([data-variant]) {
+[data-style='rokkit'] [data-button][data-style='ghost'][data-variant='default'],
+[data-style='rokkit'] [data-button][data-style='ghost']:not([data-variant]) {
   @apply text-surface-z7;
 }
 
-[data-button][data-style='ghost'][data-variant='primary'] {
+[data-style='rokkit'] [data-button][data-style='ghost'][data-variant='primary'] {
   @apply text-primary-z6;
 }
 
-[data-button][data-style='ghost'][data-variant='secondary'] {
+[data-style='rokkit'] [data-button][data-style='ghost'][data-variant='secondary'] {
   @apply text-secondary-z6;
 }
 
-[data-button][data-style='ghost'][data-variant='danger'] {
+[data-style='rokkit'] [data-button][data-style='ghost'][data-variant='danger'] {
   @apply text-danger-z4;
 }
 
@@ -84,24 +84,24 @@
    Gradient Style
    ============================================================================= */
 
-[data-button][data-style='gradient'][data-variant='default'],
-[data-button][data-style='gradient']:not([data-variant]) {
+[data-style='rokkit'] [data-button][data-style='gradient'][data-variant='default'],
+[data-style='rokkit'] [data-button][data-style='gradient']:not([data-variant]) {
   @apply from-surface-z4 to-surface-z2 text-surface-z10 bg-gradient-to-br;
 }
 
-[data-button][data-style='gradient'][data-variant='primary'] {
+[data-style='rokkit'] [data-button][data-style='gradient'][data-variant='primary'] {
   @apply from-primary-z5 to-primary-z3 text-on-primary bg-gradient-to-br;
 }
 
-[data-button][data-style='gradient'][data-variant='secondary'] {
+[data-style='rokkit'] [data-button][data-style='gradient'][data-variant='secondary'] {
   @apply from-secondary-z5 to-secondary-z3 text-on-secondary bg-gradient-to-br;
 }
 
-[data-button][data-style='gradient'][data-variant='danger'] {
+[data-style='rokkit'] [data-button][data-style='gradient'][data-variant='danger'] {
   @apply from-danger-z5 to-danger-z3 text-on-danger bg-gradient-to-br;
 }
 
-[data-button][data-style='gradient']:hover:not(:disabled):not([data-disabled]) {
+[data-style='rokkit'] [data-button][data-style='gradient']:hover:not(:disabled):not([data-disabled]) {
   filter: brightness(1.1);
 }
 
@@ -109,24 +109,24 @@
    Link Style
    ============================================================================= */
 
-[data-button][data-style='link'][data-variant='default'],
-[data-button][data-style='link']:not([data-variant]) {
+[data-style='rokkit'] [data-button][data-style='link'][data-variant='default'],
+[data-style='rokkit'] [data-button][data-style='link']:not([data-variant]) {
   @apply text-surface-z7;
 }
 
-[data-button][data-style='link'][data-variant='primary'] {
+[data-style='rokkit'] [data-button][data-style='link'][data-variant='primary'] {
   @apply text-primary-z6;
 }
 
-[data-button][data-style='link'][data-variant='secondary'] {
+[data-style='rokkit'] [data-button][data-style='link'][data-variant='secondary'] {
   @apply text-secondary-z6;
 }
 
-[data-button][data-style='link'][data-variant='danger'] {
+[data-style='rokkit'] [data-button][data-style='link'][data-variant='danger'] {
   @apply text-danger-z4;
 }
 
-[data-button][data-style='link']:hover:not(:disabled):not([data-disabled]) {
+[data-style='rokkit'] [data-button][data-style='link']:hover:not(:disabled):not([data-disabled]) {
   @apply text-primary-z7;
 }
 
@@ -135,44 +135,44 @@
    ============================================================================= */
 
 /* Default style hover */
-[data-button][data-style='default']:hover:not(:disabled):not([data-disabled]),
-[data-button]:not([data-style]):hover:not(:disabled):not([data-disabled]) {
+[data-style='rokkit'] [data-button][data-style='default']:hover:not(:disabled):not([data-disabled]),
+[data-style='rokkit'] [data-button]:not([data-style]):hover:not(:disabled):not([data-disabled]) {
   @apply opacity-90;
 }
 
 /* Outline style hover */
-[data-button][data-style='outline']:hover:not(:disabled):not([data-disabled])[data-variant='default'],
-[data-button][data-style='outline']:hover:not(:disabled):not([data-disabled]):not([data-variant]) {
+[data-style='rokkit'] [data-button][data-style='outline']:hover:not(:disabled):not([data-disabled])[data-variant='default'],
+[data-style='rokkit'] [data-button][data-style='outline']:hover:not(:disabled):not([data-disabled]):not([data-variant]) {
   @apply from-surface-z2 to-surface-z1 bg-gradient-to-b;
 }
 
-[data-button][data-style='outline']:hover:not(:disabled):not([data-disabled])[data-variant='primary'] {
+[data-style='rokkit'] [data-button][data-style='outline']:hover:not(:disabled):not([data-disabled])[data-variant='primary'] {
   @apply from-primary-z2 to-primary-z1 bg-gradient-to-b;
 }
 
-[data-button][data-style='outline']:hover:not(:disabled):not([data-disabled])[data-variant='secondary'] {
+[data-style='rokkit'] [data-button][data-style='outline']:hover:not(:disabled):not([data-disabled])[data-variant='secondary'] {
   @apply from-secondary-z2 to-secondary-z1 bg-gradient-to-b;
 }
 
-[data-button][data-style='outline']:hover:not(:disabled):not([data-disabled])[data-variant='danger'] {
+[data-style='rokkit'] [data-button][data-style='outline']:hover:not(:disabled):not([data-disabled])[data-variant='danger'] {
   @apply from-danger-z2 to-danger-z1 bg-gradient-to-b;
 }
 
 /* Ghost style hover */
-[data-button][data-style='ghost']:hover:not(:disabled):not([data-disabled])[data-variant='default'],
-[data-button][data-style='ghost']:hover:not(:disabled):not([data-disabled]):not([data-variant]) {
+[data-style='rokkit'] [data-button][data-style='ghost']:hover:not(:disabled):not([data-disabled])[data-variant='default'],
+[data-style='rokkit'] [data-button][data-style='ghost']:hover:not(:disabled):not([data-disabled]):not([data-variant]) {
   @apply bg-surface-z2;
 }
 
-[data-button][data-style='ghost']:hover:not(:disabled):not([data-disabled])[data-variant='primary'] {
+[data-style='rokkit'] [data-button][data-style='ghost']:hover:not(:disabled):not([data-disabled])[data-variant='primary'] {
   @apply bg-primary-z1;
 }
 
-[data-button][data-style='ghost']:hover:not(:disabled):not([data-disabled])[data-variant='secondary'] {
+[data-style='rokkit'] [data-button][data-style='ghost']:hover:not(:disabled):not([data-disabled])[data-variant='secondary'] {
   @apply bg-secondary-z1;
 }
 
-[data-button][data-style='ghost']:hover:not(:disabled):not([data-disabled])[data-variant='danger'] {
+[data-style='rokkit'] [data-button][data-style='ghost']:hover:not(:disabled):not([data-disabled])[data-variant='danger'] {
   @apply bg-danger-z1;
 }
 
@@ -180,7 +180,7 @@
    Active/Pressed State
    ============================================================================= */
 
-[data-button]:active:not(:disabled):not([data-disabled]) {
+[data-style='rokkit'] [data-button]:active:not(:disabled):not([data-disabled]) {
   @apply scale-95;
   animation: button-pop 0.25s ease-out;
 }
@@ -189,7 +189,7 @@
    Focus
    ============================================================================= */
 
-[data-button]:focus-visible {
+[data-style='rokkit'] [data-button]:focus-visible {
   @apply ring-primary-z4 ring-2 outline-none;
 }
 
@@ -197,14 +197,14 @@
    Icon Colors
    ============================================================================= */
 
-[data-button] [data-item-icon],
-[data-button] [data-button-icon-right] {
+[data-style='rokkit'] [data-button] [data-item-icon],
+[data-style='rokkit'] [data-button] [data-button-icon-right] {
   color: inherit;
   opacity: 0.8;
 }
 
-[data-button]:hover [data-item-icon],
-[data-button]:hover [data-button-icon-right] {
+[data-style='rokkit'] [data-button]:hover [data-item-icon],
+[data-style='rokkit'] [data-button]:hover [data-button-icon-right] {
   opacity: 1;
 }
 
@@ -212,14 +212,14 @@
    Button Group
    ============================================================================= */
 
-[data-button-group] {
+[data-style='rokkit'] [data-button-group] {
   @apply gap-px;
 }
 
-[data-button-group] [data-button]:first-child {
+[data-style='rokkit'] [data-button-group] [data-button]:first-child {
   @apply rounded-l-lg rounded-r-none;
 }
 
-[data-button-group] [data-button]:last-child {
+[data-style='rokkit'] [data-button-group] [data-button]:last-child {
   @apply rounded-l-none rounded-r-lg;
 }

package/src/rokkit/grid.css

@@ -0,0 +1,46 @@
+/**
+ * Grid - Rokkit Theme Styles
+ *
+ * Tile borders, hover/focus effects, selection highlight.
+ */
+
+/* =============================================================================
+   Grid Tiles
+   ============================================================================= */
+
+[data-style='rokkit'] [data-grid] [data-grid-item] {
+  @apply border-surface-z3 text-surface-z7;
+}
+
+[data-style='rokkit'] [data-grid] [data-grid-item]:hover:not(:disabled):not([data-disabled]) {
+  @apply border-surface-z5 bg-surface-z2 text-surface-z9;
+}
+
+[data-style='rokkit'] [data-grid] [data-grid-item]:focus:not(:disabled):not([data-disabled]) {
+  @apply border-primary-z5 bg-surface-z2 text-surface-z9 outline-none;
+}
+
+/* Active / selected tile */
+[data-style='rokkit'] [data-grid] [data-grid-item][data-active] {
+  @apply border-primary-z5 bg-primary-z2 text-primary-z9;
+}
+
+[data-style='rokkit'] [data-grid] [data-grid-item][data-active]:hover:not(:disabled) {
+  @apply bg-primary-z3;
+}
+
+/* =============================================================================
+   Item Elements
+   ============================================================================= */
+
+[data-style='rokkit'] [data-grid] [data-grid-item] [data-item-icon] {
+  @apply text-surface-z5;
+}
+
+[data-style='rokkit'] [data-grid] [data-grid-item]:hover:not(:disabled) [data-item-icon] {
+  @apply text-surface-z7;
+}
+
+[data-style='rokkit'] [data-grid] [data-grid-item][data-active] [data-item-icon] {
+  @apply text-primary-z6;
+}

package/src/rokkit/index.css

@@ -22,3 +22,6 @@
 @import './range.css';
 @import './timeline.css';
 @import './floating-navigation.css';
+@import './grid.css';
+@import './upload-target.css';
+@import './upload-progress.css';

package/src/rokkit/list.css

@@ -89,34 +89,20 @@
    Groups
    ============================================================================= */
 
-[data-style='rokkit'] [data-list] [data-list-group-label] {
+[data-style='rokkit'] [data-list] [data-list-group] {
   @apply text-surface-z6;
 }
 
-[data-style='rokkit'] [data-list] [data-list-group-label]:hover:not(:disabled),
-[data-style='rokkit'] [data-list] [data-list-group-label]:focus:not(:disabled) {
-  @apply text-surface-z7;
-}
-
-/* Group label as button directly */
-[data-style='rokkit'] [data-list] button[data-list-group-label] {
-  @apply text-surface-z6 hover:text-surface-z7;
-}
-
-[data-style='rokkit'] [data-list] button[data-list-group-label] [data-icon],
-[data-style='rokkit'] [data-list] button[data-list-group-label] [data-chevron] {
-  @apply text-surface-z6;
-}
-
-[data-style='rokkit'] [data-list] button[data-list-group-label] [data-stats] {
-  @apply text-surface-z4;
+[data-style='rokkit'] [data-list] [data-list-group]:hover:not(:disabled),
+[data-style='rokkit'] [data-list] [data-list-group]:focus:not(:disabled) {
+  @apply from-surface-z4 to-surface-z3 text-surface-z8 bg-gradient-to-r;
 }
 
 /* =============================================================================
-   Divider
+   Separator
    ============================================================================= */
 
-[data-style='rokkit'] [data-list] [data-list-divider] {
+[data-style='rokkit'] [data-list] [data-list-separator] {
   @apply via-surface-z4 bg-gradient-to-r from-transparent to-transparent;
 }
 

package/src/rokkit/menu.css

@@ -63,54 +63,24 @@
 }
 
 /* Item elements */
-[data-style='rokkit'] [data-menu-item] [data-item-icon],
-[data-style='rokkit'] [data-menu-item] > [data-menu-item-icon] {
+[data-style='rokkit'] [data-menu-item] [data-item-icon] {
   @apply text-surface-z5;
 }
 
 [data-style='rokkit'] [data-menu-item]:hover:not(:disabled) [data-item-icon],
-[data-style='rokkit'] [data-menu-item]:hover:not(:disabled) > [data-menu-item-icon],
-[data-style='rokkit'] [data-menu-item]:focus:not(:disabled) [data-item-icon],
-[data-style='rokkit'] [data-menu-item]:focus:not(:disabled) > [data-menu-item-icon] {
+[data-style='rokkit'] [data-menu-item]:focus:not(:disabled) [data-item-icon] {
   @apply text-primary-z6;
 }
 
-[data-style='rokkit'] [data-menu-item] [data-item-description],
-[data-style='rokkit'] [data-menu-item] > [data-menu-item-content] > [data-menu-item-description] {
+[data-style='rokkit'] [data-menu-item] [data-item-description] {
   @apply text-surface-z5;
 }
 
-/* Item shortcut */
-[data-style='rokkit'] [data-menu-item] > [data-menu-item-shortcut] {
-  @apply text-surface-z5 bg-surface-z2 border-surface-z4 border;
-}
-
-[data-style='rokkit'] [data-menu-item]:hover:not(:disabled) > [data-menu-item-shortcut],
-[data-style='rokkit'] [data-menu-item]:focus:not(:disabled) > [data-menu-item-shortcut] {
-  @apply text-surface-z7 bg-surface-z3 border-surface-z5;
-}
-
-/* =============================================================================
-   Custom Snippet Wrapper
-   ============================================================================= */
-
-[data-style='rokkit'] [data-menu-item-custom] > button,
-[data-style='rokkit'] [data-menu-item-custom] > a {
-  @apply text-surface-z9;
-}
-
-[data-style='rokkit'] [data-menu-item-custom] > button:hover:not(:disabled),
-[data-style='rokkit'] [data-menu-item-custom] > a:hover,
-[data-style='rokkit'] [data-menu-item-custom] > button:focus:not(:disabled),
-[data-style='rokkit'] [data-menu-item-custom] > a:focus {
-  @apply from-surface-z3 to-surface-z2 text-surface-z10 bg-gradient-to-r;
-}
-
 /* =============================================================================
    Groups
    ============================================================================= */
 
-[data-style='rokkit'] [data-menu-group-label] {
+[data-style='rokkit'] [data-menu-group] {
   @apply text-surface-z5;
 }
 
@@ -118,6 +88,6 @@
    Divider
    ============================================================================= */
 
-[data-style='rokkit'] [data-menu-divider] {
+[data-style='rokkit'] [data-menu-separator] {
   @apply via-surface-z4 bg-gradient-to-r from-transparent to-transparent;
 }

package/src/rokkit/upload-progress.css

@@ -0,0 +1,102 @@
+/**
+ * UploadProgress - Rokkit Theme Styles
+ *
+ * Status colors, progress fill, action buttons.
+ */
+
+/* =============================================================================
+   Header
+   ============================================================================= */
+
+[data-style='rokkit'] [data-upload-header] {
+  @apply text-surface-z7;
+}
+
+[data-style='rokkit'] [data-upload-clear] {
+  @apply border-surface-z4 text-surface-z6;
+}
+
+[data-style='rokkit'] [data-upload-clear]:hover {
+  @apply bg-surface-z3 text-surface-z9;
+}
+
+/* =============================================================================
+   File Rows
+   ============================================================================= */
+
+[data-style='rokkit'] [data-upload-file-status] {
+  @apply text-surface-z7;
+}
+
+[data-style='rokkit'] [data-upload-file-status]:hover {
+  @apply bg-surface-z2;
+}
+
+/* =============================================================================
+   File Elements
+   ============================================================================= */
+
+[data-style='rokkit'] [data-upload-file-icon] {
+  @apply text-surface-z5;
+}
+
+[data-style='rokkit'] [data-upload-file-size] {
+  @apply text-surface-z5;
+}
+
+/* =============================================================================
+   Progress Bar
+   ============================================================================= */
+
+[data-style='rokkit'] [data-upload-bar] {
+  @apply bg-surface-z3;
+}
+
+[data-style='rokkit'] [data-upload-fill] {
+  @apply from-primary-z5 to-secondary-z5 bg-gradient-to-r;
+}
+
+/* =============================================================================
+   Status Colors
+   ============================================================================= */
+
+[data-style='rokkit'] [data-upload-file-status][data-status='uploading'] [data-upload-status] {
+  @apply text-primary-z6;
+}
+
+[data-style='rokkit'] [data-upload-file-status][data-status='done'] [data-upload-status] {
+  @apply text-green-500;
+}
+
+[data-style='rokkit'] [data-upload-file-status][data-status='error'] [data-upload-status] {
+  @apply text-red-500;
+}
+
+[data-style='rokkit'] [data-upload-file-status][data-status='pending'] [data-upload-status] {
+  @apply text-surface-z5;
+}
+
+/* Status-based file icon tinting */
+[data-style='rokkit'] [data-upload-file-status][data-status='done'] [data-upload-file-icon] {
+  @apply text-green-500;
+}
+
+[data-style='rokkit'] [data-upload-file-status][data-status='error'] [data-upload-file-icon] {
+  @apply text-red-500;
+}
+
+/* =============================================================================
+   Action Buttons
+   ============================================================================= */
+
+[data-style='rokkit'] [data-upload-actions] button {
+  @apply text-surface-z5;
+}
+
+[data-style='rokkit'] [data-upload-actions] button:hover {
+  @apply bg-surface-z3 text-surface-z9;
+}
+
+[data-style='rokkit'] [data-upload-file-status][data-status='error'] [data-upload-retry]:hover {
+  @apply text-primary-z7;
+}