@rokkit/themes 1.0.0-next.146 → 1.0.0-next.148

package/src/grada-ui/floating-navigation.css

@@ -4,7 +4,7 @@
 
 [data-style='grada-ui'] [data-floating-nav] {
   @apply bg-white shadow-xl;
-  border-right: 1px solid var(--gd-grey-a);
+  border-right: 1px solid rgba(var(--color-surface-z300), 1);
 }
 
 [data-style='grada-ui'] [data-floating-nav-title] {
@@ -21,11 +21,11 @@
 }
 
 [data-style='grada-ui'] [data-floating-nav-pin]:hover {
-  color: var(--gd-primary);
+  color: rgba(var(--color-primary-500), 1);
 }
 
 [data-style='grada-ui'] [data-floating-nav-pin][aria-pressed='true'] {
-  color: var(--gd-primary);
+  color: rgba(var(--color-primary-500), 1);
 }
 
 [data-style='grada-ui'] [data-floating-nav-item] {
@@ -38,12 +38,12 @@
 }
 
 [data-style='grada-ui'] [data-floating-nav-item][data-active] {
-  color: var(--gd-primary);
-  background: color-mix(in srgb, var(--gd-primary) 10%, transparent);
+  color: rgba(var(--color-primary-500), 1);
+  background: rgba(var(--color-primary-500), 0.1);
 }
 
 [data-style='grada-ui'] [data-floating-nav-item]:focus-visible {
-  outline: 2px solid var(--gd-primary);
+  outline: 2px solid rgba(var(--color-primary-500), 1);
   outline-offset: -2px;
 }
 
@@ -52,13 +52,14 @@
 }
 
 [data-style='grada-ui'] [data-floating-nav-item]:hover [data-floating-nav-icon] {
-  color: var(--gd-primary);
+  color: rgba(var(--color-primary-500), 1);
 }
 
 [data-style='grada-ui'] [data-floating-nav-item][data-active] [data-floating-nav-icon] {
-  color: var(--gd-primary);
+  color: rgba(var(--color-primary-500), 1);
 }
 
 [data-style='grada-ui'] [data-floating-nav-indicator] {
-  background: var(--gd-gradient);
+  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-color: transparent;
 }

package/src/grada-ui/index.css

@@ -52,3 +52,4 @@
 @import './card.css';
 @import './message.css';
 @import './status-list.css';
+@import './chart.css';

package/src/grada-ui/input.css

@@ -20,9 +20,8 @@
 }
 
 [data-style='grada-ui'] [data-input-root]:focus-within {
-  border-color: var(--gd-primary);
+  @apply border-primary-z5 bg-white;
   background-image: none;
-  @apply bg-white;
 }
 
 /* Inputs inside wrapper */
@@ -34,6 +33,7 @@
   @apply text-surface-z9 w-full border-none bg-transparent px-3 py-2.5 transition-all outline-none;
   font-size: 0.875rem;
   line-height: 1.25rem;
+  border-radius: 2px;
 }
 
 [data-style='grada-ui'] [data-input-root] textarea {
@@ -79,7 +79,7 @@
    ============================================================================= */
 
 [data-style='grada-ui'] [data-field-state='pass'] [data-input-root] {
-  border-left: 4px solid var(--gd-success);
+  @apply border-l-4 border-success-z5;
 }
 
 /* =============================================================================
@@ -87,11 +87,11 @@
    ============================================================================= */
 
 [data-style='grada-ui'] [data-field-state='fail'] [data-input-root] {
-  border-left: 4px solid var(--gd-error-border);
+  @apply border-l-4 border-danger-z4;
 }
 
 [data-style='grada-ui'] [data-field-state='fail'] label {
-  color: var(--gd-error-text);
+  @apply text-danger-z5;
 }
 
 /* =============================================================================
@@ -107,7 +107,7 @@
    ============================================================================= */
 
 [data-style='grada-ui'] [data-field-info] {
-  color: var(--gd-primary);
+  @apply text-primary-z5;
 }
 
 /* =============================================================================
@@ -127,8 +127,7 @@
 }
 
 [data-style='grada-ui'] [data-message] {
-  @apply mt-1 px-1 text-xs;
-  color: var(--gd-error-text);
+  @apply text-danger-z5 mt-1 px-1 text-xs;
 }
 
 /* =============================================================================
@@ -137,7 +136,7 @@
 
 [data-style='grada-ui'] [data-input-root] input::placeholder,
 [data-style='grada-ui'] [data-input-root] textarea::placeholder {
-  color: var(--gd-grey-c);
+  @apply text-surface-z4;
 }
 
 /* =============================================================================
@@ -151,5 +150,5 @@
 [data-style='grada-ui']
   [data-checkbox-root][data-variant='custom']:has(input:checked)
   [data-checkbox-icon] {
-  color: var(--gd-primary);
+  @apply text-primary-z5;
 }

package/src/grada-ui/list.css

@@ -28,14 +28,14 @@
 /* Active state — muted when list not focused */
 [data-style='grada-ui'] [data-list] [data-list-item][data-active='true'] {
   @apply bg-surface-z1;
-  color: var(--gd-primary);
+  color: rgba(var(--color-primary-500), 1);
 }
 
 /* Active state — gradient left border when list has focus */
 [data-style='grada-ui'] [data-list]:focus-within [data-list-item][data-active='true'] {
   @apply bg-surface-z1;
-  border-left: 3px solid var(--gd-primary);
-  color: var(--gd-primary);
+  border-left: 3px solid rgba(var(--color-primary-500), 1);
+  color: rgba(var(--color-primary-500), 1);
 }
 
 [data-style='grada-ui'] [data-list] [data-list-item][data-active='true']:hover:not(:disabled),
@@ -54,7 +54,7 @@
 }
 
 [data-style='grada-ui'] [data-list] [data-list-item][data-active='true'] [data-item-icon] {
-  color: var(--gd-primary);
+  color: rgba(var(--color-primary-500), 1);
 }
 
 [data-style='grada-ui'] [data-list] [data-list-item] [data-item-description] {
@@ -67,7 +67,8 @@
 }
 
 [data-style='grada-ui'] [data-list] [data-list-item][data-active='true'] [data-item-badge] {
-  background: var(--gd-gradient);
+  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-color: transparent;
   color: white;
 }
 
@@ -92,12 +93,14 @@
 
 /* Multi-Selection */
 [data-style='grada-ui'] [data-list] [data-list-item][data-selected='true'] {
-  background: var(--gd-gradient);
+  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-color: transparent;
   color: white;
 }
 
 [data-style='grada-ui'] [data-list]:focus-within [data-list-item][data-selected='true'] {
-  background: var(--gd-gradient);
+  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-color: transparent;
 }
 
 [data-style='grada-ui'] [data-list] [data-list-item][data-selected='true']:hover:not(:disabled) {

package/src/grada-ui/menu.css

@@ -9,16 +9,16 @@
 
 [data-style='grada-ui'] [data-menu-trigger]:hover:not(:disabled) {
   @apply text-surface-z10 border-surface-z5;
-  border-color: var(--gd-primary);
+  border-color: rgba(var(--color-primary-500), 1);
 }
 
 [data-style='grada-ui'] [data-menu-trigger]:focus-visible {
-  outline: 2px solid var(--gd-primary);
+  outline: 2px solid rgba(var(--color-primary-500), 1);
   outline-offset: -2px;
 }
 
 [data-style='grada-ui'] [data-menu][data-open='true'] [data-menu-trigger] {
-  border-color: var(--gd-primary);
+  border-color: rgba(var(--color-primary-500), 1);
 }
 
 [data-style='grada-ui'] [data-menu-trigger] [data-menu-icon] {
@@ -26,7 +26,7 @@
 }
 
 [data-style='grada-ui'] [data-menu-trigger]:hover:not(:disabled) [data-menu-icon] {
-  color: var(--gd-primary);
+  color: rgba(var(--color-primary-500), 1);
 }
 
 [data-style='grada-ui'] [data-menu-trigger] [data-menu-arrow] {
@@ -50,7 +50,7 @@
 }
 
 [data-style='grada-ui'] [data-menu-item]:focus-visible {
-  outline: 2px solid var(--gd-primary);
+  outline: 2px solid rgba(var(--color-primary-500), 1);
   outline-offset: -2px;
 }
 
@@ -59,7 +59,7 @@
 }
 
 [data-style='grada-ui'] [data-menu-item]:hover:not(:disabled) [data-item-icon] {
-  color: var(--gd-primary);
+  color: rgba(var(--color-primary-500), 1);
 }
 
 [data-style='grada-ui'] [data-menu-item] [data-item-description] {

package/src/grada-ui/message.css

@@ -11,12 +11,12 @@
 
 [data-style='grada-ui'] [data-message-root][data-type='error'] {
   background-color: #fff5f7;
-  border-color: var(--gd-error-border);
-  color: var(--gd-error-text);
+  border-color: rgba(var(--color-danger-400), 1);
+  color: rgba(var(--color-danger-600), 1);
 }
 [data-style='grada-ui'] [data-message-root][data-type='error'] [data-message-icon],
 [data-style='grada-ui'] [data-message-root][data-type='error'] [data-message-dismiss] {
-  color: var(--gd-error-border);
+  color: rgba(var(--color-danger-400), 1);
 }
 
 [data-style='grada-ui'] [data-message-root][data-type='warning'] {
@@ -29,20 +29,20 @@
 
 [data-style='grada-ui'] [data-message-root][data-type='info'] {
   background-color: #f0f4ff;
-  border-color: var(--gd-secondary);
+  border-color: rgba(var(--color-secondary-500), 1);
   color: #4a3d7a;
 }
 [data-style='grada-ui'] [data-message-root][data-type='info'] [data-message-icon],
 [data-style='grada-ui'] [data-message-root][data-type='info'] [data-message-dismiss] {
-  color: var(--gd-secondary);
+  color: rgba(var(--color-secondary-500), 1);
 }
 
 [data-style='grada-ui'] [data-message-root][data-type='success'] {
   background-color: #f0faf4;
-  border-color: var(--gd-success);
+  border-color: rgba(var(--color-success-500), 1);
   color: #1a5c35;
 }
 [data-style='grada-ui'] [data-message-root][data-type='success'] [data-message-icon],
 [data-style='grada-ui'] [data-message-root][data-type='success'] [data-message-dismiss] {
-  color: var(--gd-success);
+  color: rgba(var(--color-success-500), 1);
 }

package/src/grada-ui/range.css

@@ -10,24 +10,25 @@
 }
 
 [data-style='grada-ui'] [data-range-selected] {
-  background: var(--gd-gradient);
+  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-color: transparent;
 }
 
 /* Thumb — white square */
 [data-style='grada-ui'] [data-range-thumb] {
   background-color: white;
-  border: 2px solid var(--gd-primary);
+  border: 2px solid rgba(var(--color-primary-500), 1);
   border-radius: 2px;
   @apply shadow-md;
 }
 
 [data-style='grada-ui'] [data-range-thumb][data-sliding] {
   @apply shadow-lg;
-  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gd-primary) 25%, transparent);
+  box-shadow: 0 0 0 4px rgba(var(--color-primary-500), 0.25);
 }
 
 [data-style='grada-ui'] [data-range-thumb]:focus-visible {
-  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gd-primary) 25%, transparent);
+  box-shadow: 0 0 0 4px rgba(var(--color-primary-500), 0.25);
 }
 
 /* Ticks */

package/src/grada-ui/search-filter.css

@@ -8,12 +8,12 @@
 }
 
 [data-style='grada-ui'] [data-search-input]:focus {
-  border-color: var(--gd-primary);
+  border-color: rgba(var(--color-primary-500), 1);
   outline: none;
 }
 
 [data-style='grada-ui'] [data-search-input]::placeholder {
-  color: var(--gd-grey-c);
+  color: rgba(var(--color-surface-z500), 1);
 }
 
 [data-style='grada-ui'] [data-search-clear] {
@@ -26,7 +26,8 @@
 }
 
 [data-style='grada-ui'] [data-search-tag] {
-  background: var(--gd-gradient);
+  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-color: transparent;
   color: white;
   border-radius: 20px;
 }

package/src/grada-ui/select.css

@@ -15,17 +15,17 @@
 }
 
 [data-style='grada-ui'] [data-select-trigger]:focus-visible {
-  outline: 2px solid var(--gd-primary);
+  outline: 2px solid rgba(var(--color-primary-500), 1);
   outline-offset: -2px;
 }
 
 [data-style='grada-ui'] [data-select][data-open='true'] [data-select-trigger] {
-  border-color: var(--gd-primary);
+  border-color: rgba(var(--color-primary-500), 1);
 }
 
 /* Placeholder */
 [data-style='grada-ui'] [data-select-placeholder] {
-  color: var(--gd-grey-c);
+  color: rgba(var(--color-surface-z500), 1);
 }
 
 /* Arrow */
@@ -34,12 +34,13 @@
 }
 
 [data-style='grada-ui'] [data-select-trigger]:hover:not(:disabled) [data-select-arrow] {
-  color: var(--gd-primary);
+  color: rgba(var(--color-primary-500), 1);
 }
 
 /* Tags (MultiSelect) */
 [data-style='grada-ui'] [data-select-tag] {
-  background: var(--gd-gradient);
+  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-color: transparent;
   color: white;
   border-radius: 20px;
 }
@@ -71,25 +72,28 @@
 }
 
 [data-style='grada-ui'] [data-select-option]:focus-visible {
-  outline: 2px solid var(--gd-primary);
+  outline: 2px solid rgba(var(--color-primary-500), 1);
   outline-offset: -2px;
 }
 
 /* Selected option — gradient background */
 [data-style='grada-ui'] [data-select-option][data-selected='true'] {
-  background: var(--gd-gradient);
+  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-color: transparent;
   color: white;
 }
 
 [data-style='grada-ui'] [data-select-option][data-selected='true']:hover:not(:disabled),
 [data-style='grada-ui'] [data-select-option][data-selected='true']:focus:not(:disabled) {
-  background: var(--gd-gradient);
+  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-color: transparent;
   filter: brightness(1.1);
   color: white;
 }
 
 [data-style='grada-ui'] [data-select-dropdown]:focus-within [data-select-option][data-selected='true'] {
-  background: var(--gd-gradient);
+  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-color: transparent;
 }
 
 /* Check mark */
@@ -104,8 +108,8 @@
 }
 
 [data-style='grada-ui'] [data-select-checkbox][data-checked='true'] {
-  background: var(--gd-primary);
-  border-color: var(--gd-primary);
+  background: rgba(var(--color-primary-500), 1);
+  border-color: rgba(var(--color-primary-500), 1);
   color: white;
 }
 
@@ -155,12 +159,12 @@
 }
 
 [data-style='grada-ui'] [data-select-filter-input]:focus {
-  border-color: var(--gd-primary);
+  border-color: rgba(var(--color-primary-500), 1);
   outline: none;
 }
 
 [data-style='grada-ui'] [data-select-filter-input]::placeholder {
-  color: var(--gd-grey-c);
+  color: rgba(var(--color-surface-z500), 1);
 }
 
 [data-style='grada-ui'] [data-select-empty] {

package/src/grada-ui/status-list.css

@@ -3,10 +3,10 @@
  */
 
 [data-style='grada-ui'] [data-status-item][data-status='pass'] span {
-  color: var(--gd-success);
+  color: rgba(var(--color-success-500), 1);
 }
 [data-style='grada-ui'] [data-status-item][data-status='fail'] span {
-  color: var(--gd-error-border);
+  color: rgba(var(--color-danger-400), 1);
 }
 [data-style='grada-ui'] [data-status-item][data-status='warn'] span {
   @apply text-warning-z6;
@@ -19,7 +19,7 @@
   @apply text-surface-z8;
 }
 [data-style='grada-ui'] [data-status-item][data-status='fail'] {
-  color: var(--gd-error-text);
+  color: rgba(var(--color-danger-600), 1);
 }
 [data-style='grada-ui'] [data-status-item][data-status='warn'] {
   @apply text-warning-z8;
@@ -29,20 +29,20 @@
 }
 
 [data-style='grada-ui'] [data-status-group][data-severity='error'] [data-status-header] {
-  color: var(--gd-error-border);
+  color: rgba(var(--color-danger-400), 1);
 }
 [data-style='grada-ui'] [data-status-group][data-severity='warning'] [data-status-header] {
   @apply text-warning-z6;
 }
 [data-style='grada-ui'] [data-status-group][data-severity='info'] [data-status-header] {
-  color: var(--gd-secondary);
+  color: rgba(var(--color-secondary-500), 1);
 }
 [data-style='grada-ui'] [data-status-group][data-severity='success'] [data-status-header] {
-  color: var(--gd-success);
+  color: rgba(var(--color-success-500), 1);
 }
 
 [data-style='grada-ui'] [data-status-item][data-status='error'] {
-  color: var(--gd-error-text);
+  color: rgba(var(--color-danger-600), 1);
 }
 [data-style='grada-ui'] [data-status-item][data-status='warning'] {
   @apply text-warning-z8;
@@ -55,7 +55,8 @@
 }
 
 [data-style='grada-ui'] [data-status-count] {
-  background: var(--gd-gradient);
+  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-color: transparent;
   color: white;
   font-weight: 600;
 }

package/src/grada-ui/switch.css

@@ -8,18 +8,18 @@
   @apply bg-none bg-surface-z3;
 }
 
-[data-style='grada-ui'] [data-switch-thumb] {
+[data-style='grada-ui'] [data-switch] [data-switch-thumb] {
   @apply bg-white shadow-md;
 }
 
 [data-style='grada-ui'] [data-switch]:focus-visible [data-switch-track] {
-  outline: 2px solid var(--gd-primary);
-  outline-offset: 2px;
+  @apply outline-2 outline-offset-2 outline outline-primary-z5;
 }
 
 /* On state — gradient track */
 [data-style='grada-ui'] [data-switch][aria-checked='true'] [data-switch-track] {
-  background: var(--gd-gradient);
+  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-color: transparent;
 }
 
 [data-style='grada-ui'] [data-switch][aria-checked='true'] [data-switch-thumb] {

package/src/grada-ui/table.css

@@ -3,23 +3,21 @@
  */
 
 [data-style='grada-ui'] [data-table-header] th {
-  @apply text-surface-z6 border-b font-medium;
+  @apply text-surface-z6 border-b font-medium bg-surface-z1;
   font-family: 'Montserrat', sans-serif;
   font-size: 0.625rem;
   text-transform: uppercase;
   letter-spacing: 0.06em;
-  background-color: var(--gd-surface-a);
-  border-color: var(--gd-grey-a);
+  border-color: rgba(var(--color-surface-z300), 1);
 }
 
 [data-style='grada-ui'] [data-table-header-cell][data-sortable='true']:hover {
-  @apply text-surface-z9;
-  background-color: var(--gd-surface-b);
+  @apply text-surface-z9 bg-surface-z2;
 }
 
 [data-style='grada-ui'] [data-table-header-cell][data-sort-order='ascending'],
 [data-style='grada-ui'] [data-table-header-cell][data-sort-order='descending'] {
-  color: var(--gd-primary);
+  color: rgba(var(--color-primary-500), 1);
 }
 
 [data-style='grada-ui'] [data-table-sort-icon] {
@@ -32,7 +30,7 @@
 [data-style='grada-ui']
   [data-table-header-cell][data-sort-order='descending']
   [data-table-sort-icon] {
-  color: var(--gd-primary);
+  color: rgba(var(--color-primary-500), 1);
 }
 
 /* Caption */
@@ -43,7 +41,7 @@
 /* Rows */
 [data-style='grada-ui'] [data-table-row] {
   @apply text-surface-z8 border-b;
-  border-color: var(--gd-grey-a);
+  border-color: rgba(var(--color-surface-z300), 1);
 }
 
 [data-style='grada-ui'] [data-table-row]:hover {
@@ -52,13 +50,13 @@
 
 [data-style='grada-ui'] [data-table-row]:focus {
   @apply bg-surface-z1 text-surface-z10 outline-none;
-  outline: 2px solid var(--gd-primary);
+  outline: 2px solid rgba(var(--color-primary-500), 1);
   outline-offset: -2px;
 }
 
 [data-style='grada-ui'] [data-table-row][data-selected='true'] {
-  background: color-mix(in srgb, var(--gd-primary) 10%, transparent);
-  color: var(--gd-primary);
+  background: rgba(var(--color-primary-500), 0.1);
+  color: rgba(var(--color-primary-500), 1);
 }
 
 /* Striped */
@@ -77,5 +75,5 @@
 }
 
 [data-style='grada-ui'] [data-table-row][data-selected='true'] [data-cell-icon] {
-  color: var(--gd-primary);
+  color: rgba(var(--color-primary-500), 1);
 }

package/src/grada-ui/tabs.css

@@ -5,7 +5,7 @@
  */
 
 [data-style='grada-ui'] [data-tabs-list] {
-  @apply bg-surface-z2 gap-1;
+  @apply bg-surface-z2 gap-1 border-0;
   border-radius: 20px;
   padding: 3px;
 }
@@ -15,6 +15,7 @@
 }
 
 [data-style='grada-ui'] [data-tabs-trigger] {
+  background-color: transparent;
   @apply text-surface-z6;
   border-radius: 20px;
   font-family: 'Montserrat', sans-serif;
@@ -28,18 +29,15 @@
   @apply bg-surface-z3 text-surface-z8;
 }
 
-/* Selected — gradient */
-[data-style='grada-ui'] [data-tabs-trigger][data-selected] {
-  background: var(--gd-gradient);
+/* Selected — primary→secondary gradient */
+[data-style='grada-ui'] [data-tabs-trigger][data-selected],
+[data-style='grada-ui'] [data-tabs-list]:focus-within [data-tabs-trigger][data-selected] {
+  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-color: transparent;
   color: white;
   @apply shadow-sm;
 }
 
-/* Reset rokkit gradients bleeding in */
-[data-style='grada-ui'] [data-tabs-list]:focus-within [data-tabs-trigger][data-selected] {
-  background: var(--gd-gradient);
-}
-
 [data-style='grada-ui'] [data-tabs-trigger] [data-tabs-icon] {
   @apply text-surface-z5;
 }

package/src/grada-ui/timeline.css

@@ -7,16 +7,17 @@
 }
 
 [data-style='grada-ui'] [data-timeline-item][data-completed] [data-timeline-circle] {
-  background: var(--gd-gradient);
-  border-color: var(--gd-primary);
+  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-color: transparent;
+  border-color: rgba(var(--color-primary-500), 1);
   color: white;
   @apply shadow-sm;
 }
 
 [data-style='grada-ui'] [data-timeline-item][data-active] [data-timeline-circle] {
-  border-color: var(--gd-primary);
-  color: var(--gd-primary);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gd-primary) 25%, transparent);
+  border-color: rgba(var(--color-primary-500), 1);
+  color: rgba(var(--color-primary-500), 1);
+  box-shadow: 0 0 0 3px rgba(var(--color-primary-500), 0.25);
 }
 
 [data-style='grada-ui'] [data-timeline-connector] {
@@ -24,7 +25,8 @@
 }
 
 [data-style='grada-ui'] [data-timeline-item][data-completed] [data-timeline-connector] {
-  background: var(--gd-gradient);
+  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-color: transparent;
 }
 
 [data-style='grada-ui'] [data-timeline-title] {

package/src/grada-ui/toc.css

@@ -19,6 +19,6 @@
 }
 
 [data-style='grada-ui'] [data-toc] [data-toc-item][data-toc-active] {
-  color: var(--gd-primary);
-  border-left-color: var(--gd-primary);
+  color: rgba(var(--color-primary-500), 1);
+  border-left-color: rgba(var(--color-primary-500), 1);
 }