|
75 | 75 | }
|
76 | 76 |
|
77 | 77 | .fui-BaseButton:where(.fui-variant-classic) {
|
78 |
| - background-color: var(--accent-9); |
| 78 | + background: var(--accent-9) |
| 79 | + linear-gradient(to bottom, var(--white-a4), transparent); |
79 | 80 | --base-button-color: var(--accent-9-contrast);
|
80 | 81 | position: relative;
|
81 | 82 | z-index: 0;
|
| 83 | + text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.32); |
82 | 84 |
|
83 | 85 | box-shadow:
|
84 | 86 | /* border color */
|
85 | 87 | 0 0 0 1px var(--accent-a5) inset,
|
86 |
| - /* highlight*/ 0px 1px 1px 1px var(--white-a5) inset, |
87 |
| - /* shadow */ 0px -1px 1px 1px var(--black-a5) inset, |
| 88 | + /* highlight*/ 0px 1px 1.5px 1px var(--white-a7) inset, |
| 89 | + /* shadow */ 0px -1px 1.5px 1px var(--black-a5) inset, |
88 | 90 | /* drop shadow */ 0px 2px 2px 0px var(--black-a3);
|
89 | 91 |
|
90 | 92 | &:where(.fui-high-contrast) {
|
|
113 | 115 | }
|
114 | 116 | }
|
115 | 117 | &:where(:active:not([data-state='open'], [data-disabled])) {
|
116 |
| - background-color: var(--accent-9); |
117 |
| - background-image: linear-gradient(var(--black-a1), transparent); |
| 118 | + background: var(--accent-9) |
| 119 | + linear-gradient(to bottom, transparent, var(--white-a4)); |
118 | 120 | padding-top: var(--base-button-classic-active-padding-top);
|
119 | 121 |
|
120 | 122 | /* prettier-ignore */
|
|
131 | 133 | background-color: var(--gray-3);
|
132 | 134 | box-shadow:
|
133 | 135 | /* highlight*/
|
134 |
| - 0px 1px 1px 1px var(--white-a3) inset, |
| 136 | + 0px 1px 1.5px 1px var(--white-a3) inset, |
135 | 137 | /* border color */ 0 0 0 1px var(--gray-a4) inset,
|
136 |
| - /* shadow */ 0px -1px 1px 1px var(--black-a5) inset, |
| 138 | + /* shadow */ 0px -1px 1.5px 1px var(--black-a5) inset, |
137 | 139 | /* drop shadow */ 0px 2px 2px 0px var(--black-a3);
|
138 | 140 | background-image: none;
|
139 | 141 | filter: none;
|
140 |
| - /* box-shadow: none; */ |
| 142 | + text-shadow: none; |
141 | 143 | }
|
142 | 144 | }
|
143 | 145 |
|
|
0 commit comments