| @@ -15,11 +15,11 @@ | ||
| 15 | 15 | inline-size: 38px; |
| 16 | 16 | block-size: 38px; |
| 17 | 17 | box-sizing: border-box; |
| 18 | 18 | padding: 0; |
| 19 | - background: #fff; | |
| 20 | - color: theme.$accent; | |
| 21 | - border: 1px solid theme.$accent; | |
| 19 | + background: var(--cs-color-surface); | |
| 20 | + color: var(--cs-color-accent); | |
| 21 | + border: 1px solid var(--cs-color-accent); | |
| 22 | 22 | border-radius: 5px; |
| 23 | 23 | cursor: pointer; |
| 24 | 24 | |
| 25 | 25 | svg { |
| @@ -27,9 +27,9 @@ | ||
| 27 | 27 | } |
| 28 | 28 | |
| 29 | 29 | &:hover, |
| 30 | 30 | &:focus { |
| 31 | - background: #f0f6fc; | |
| 31 | + background: var(--cs-color-surface-info); | |
| 32 | 32 | } |
| 33 | 33 | } |
| 34 | 34 | |
| 35 | 35 | .kebab-menu-popover { |
| @@ -41,10 +41,10 @@ | ||
| 41 | 41 | box-sizing: border-box; |
| 42 | 42 | margin: 0; |
| 43 | 43 | padding: 6px 0; |
| 44 | 44 | list-style: none; |
| 45 | - background: #fff; | |
| 46 | - border: 1px solid #e2e2e4; | |
| 45 | + background: var(--cs-color-surface); | |
| 46 | + border: 1px solid var(--cs-color-border-subtle); | |
| 47 | 47 | border-radius: 5px; |
| 48 | 48 | overflow: hidden; |
| 49 | 49 | box-shadow: 0 3px 16px rgb(0 0 0 / 15%); |
| 50 | 50 | |
| @@ -67,31 +67,31 @@ | ||
| 67 | 67 | border: none; |
| 68 | 68 | font-family: inherit; |
| 69 | 69 | font-size: 14px; |
| 70 | 70 | line-height: 1.4; |
| 71 | - color: #2c3337; | |
| 71 | + color: var(--cs-color-text); | |
| 72 | 72 | text-align: start; |
| 73 | 73 | cursor: pointer; |
| 74 | 74 | |
| 75 | 75 | &:hover, |
| 76 | 76 | &:focus { |
| 77 | - background: #f0f0f1; | |
| 77 | + background: var(--cs-color-surface-muted); | |
| 78 | 78 | } |
| 79 | 79 | |
| 80 | 80 | &:disabled { |
| 81 | - color: #a7aaad; | |
| 81 | + color: var(--cs-color-text-disabled); | |
| 82 | 82 | cursor: default; |
| 83 | 83 | background: none; |
| 84 | 84 | } |
| 85 | 85 | |
| 86 | 86 | &.kebab-menu-item-destructive { |
| 87 | - color: #d63638; | |
| 87 | + color: var(--cs-color-error); | |
| 88 | 88 | } |
| 89 | 89 | } |
| 90 | 90 | |
| 91 | 91 | .kebab-menu-divider { |
| 92 | 92 | margin-block: 6px; |
| 93 | - border-block-start: 1px solid #e2e2e4; | |
| 93 | + border-block-start: 1px solid var(--cs-color-border-subtle); | |
| 94 | 94 | } |
| 95 | 95 | |
| 96 | 96 | .kebab-menu-row { |
| 97 | 97 | display: flex; |
| @@ -101,6 +101,6 @@ | ||
| 101 | 101 | padding-block: 10px; |
| 102 | 102 | padding-inline: 14px; |
| 103 | 103 | font-size: 14px; |
| 104 | 104 | line-height: 1.4; |
| 105 | - color: #2c3337; | |
| 105 | + color: var(--cs-color-text); | |
| 106 | 106 | } |
