Grcov report - flat.rs

1

use azul_core::{

2

    a11y::{AccessibilityInfo, AccessibilityRole},

3

    callbacks::{CoreCallbackData, VirtualViewCallbackInfo, VirtualViewReturn},

4

    dom::{

5

        Dom, EventFilter, HoverEventFilter, IdOrClass, IdOrClass::Class, IdOrClassVec, NodeType,

6

        TabIndex,

7

},

8

    geom::{LogicalPosition, LogicalRect},

9

    refany::RefAny,

10

};

11

use azul_css::{css::BoxOrStatic, AzString};

12

#[allow(clippy::wildcard_imports)]

13

use azul_css::{

14

    dynamic_selector::{CssPropertyWithConditions, CssPropertyWithConditionsVec},

15

    props::{

16

        basic::*,

17

        layout::*,

18

        property::{CssProperty, *},

19

        style::*,

20

},

21

*,

22

};

23

24

use crate::widgets::button::{Button, ButtonOnClick};

25

26

// ---------------------------------------------------------------------------

27

// The flat palette.

28

//

29

// THE TOKEN NAMES ARE THE SAME ONES `flora` USES, deliberately. A widget that

30

// reaches for `SUR` or `INK` instead of an inline `ColorU { r: 178, .. }` can

31

// then be written once and read correctly under either theme, which is the

32

// whole point of having themes rather than two hand-maintained copies of every

33

// widget. The VALUES are what makes this theme flat: plain surfaces, one thin

34

// border weight, and "gradient" stops that are simply equal.

35

//

36

// Names follow flora.css so the two stay comparable:

37

//   PG/SUR/DESK/STRIP/TRACK  surfaces, back to front

38

//   BD..BD5, SEP, SEP2       borders and separators

39

//   INK/INK2/INTRO/SOFT1..3  text, most to least prominent

40

//   RT/RB, HT/HB, PT/PB      raised / hover / pressed control faces

41

//   FLD/FLD2                 input fields

42

//   DISBG/DISTX              disabled

43

//   QT/QT2                   quiet (toolbar) fills

44

//   ACC/DEEP/SOFT/GLOW/ON_ACC accent ramp and what sits on it

45

// ---------------------------------------------------------------------------

46

47

// Light mode colors

48

/// Page: the window canvas behind everything.

49

pub const LIGHT_PG: ColorU = ColorU {

50

    r: 255,

51

    g: 255,

52

    b: 255,

53

    a: 255,

54

};

55

/// Surface: panels and cards sitting on the page.

56

pub const LIGHT_SUR: ColorU = ColorU {

57

    r: 248,

58

    g: 249,

59

    b: 250,

60

    a: 255,

61

};

62

/// Desk: the recessed area a document sits on.

63

pub const LIGHT_DESK: ColorU = ColorU {

64

    r: 241,

65

    g: 243,

66

    b: 245,

67

    a: 255,

68

};

69

/// Strip: toolbars and header bands.

70

pub const LIGHT_STRIP: ColorU = ColorU {

71

    r: 233,

72

    g: 236,

73

    b: 239,

74

    a: 255,

75

};

76

/// Track: scrollbar and slider grooves.

77

pub const LIGHT_TRACK: ColorU = ColorU {

78

    r: 222,

79

    g: 226,

80

    b: 230,

81

    a: 255,

82

};

83

/// Default border.

84

pub const LIGHT_BD: ColorU = ColorU {

85

    r: 206,

86

    g: 212,

87

    b: 218,

88

    a: 255,

89

};

90

/// Lighter border, for internal divisions.

91

pub const LIGHT_BD2: ColorU = ColorU {

92

    r: 222,

93

    g: 226,

94

    b: 230,

95

    a: 255,

96

};

97

/// Stronger border, for emphasis or focus.

98

pub const LIGHT_BD3: ColorU = ColorU {

99

    r: 173,

100

    g: 181,

101

    b: 189,

102

    a: 255,

103

};

104

/// Faintest border.

105

pub const LIGHT_BD4: ColorU = ColorU {

106

    r: 233,

107

    g: 236,

108

    b: 239,

109

    a: 255,

110

};

111

/// Border that reads as a highlight.

112

pub const LIGHT_BD5: ColorU = ColorU {

113

    r: 248,

114

    g: 249,

115

    b: 250,

116

    a: 255,

117

};

118

/// Separator line.

119

pub const LIGHT_SEP: ColorU = ColorU {

120

    r: 222,

121

    g: 226,

122

    b: 230,

123

    a: 255,

124

};

125

/// Fainter separator.

126

pub const LIGHT_SEP2: ColorU = ColorU {

127

    r: 233,

128

    g: 236,

129

    b: 239,

130

    a: 255,

131

};

132

/// Body text.

133

pub const LIGHT_INK: ColorU = ColorU {

134

    r: 33,

135

    g: 37,

136

    b: 41,

137

    a: 255,

138

};

139

/// Secondary text.

140

pub const LIGHT_INK2: ColorU = ColorU {

141

    r: 73,

142

    g: 80,

143

    b: 87,

144

    a: 255,

145

};

146

/// Introductory / lead text.

147

pub const LIGHT_INTRO: ColorU = ColorU {

148

    r: 108,

149

    g: 117,

150

    b: 125,

151

    a: 255,

152

};

153

/// Muted text, still readable.

154

pub const LIGHT_SOFT1: ColorU = ColorU {

155

    r: 134,

156

    g: 142,

157

    b: 150,

158

    a: 255,

159

};

160

/// Muted text, hint level.

161

pub const LIGHT_SOFT2: ColorU = ColorU {

162

    r: 173,

163

    g: 181,

164

    b: 189,

165

    a: 255,

166

};

167

/// Barely-there text.

168

pub const LIGHT_SOFT3: ColorU = ColorU {

169

    r: 206,

170

    g: 212,

171

    b: 218,

172

    a: 255,

173

};

174

/// Icon glyphs.

175

pub const LIGHT_ICON: ColorU = ColorU {

176

    r: 73,

177

    g: 80,

178

    b: 87,

179

    a: 255,

180

};

181

/// Raised control, top of the face (flat: equal to RB).

182

pub const LIGHT_RT: ColorU = ColorU {

183

    r: 255,

184

    g: 255,

185

    b: 255,

186

    a: 255,

187

};

188

/// Raised control, bottom of the face.

189

pub const LIGHT_RB: ColorU = ColorU {

190

    r: 248,

191

    g: 249,

192

    b: 250,

193

    a: 255,

194

};

195

/// Hovered control, top of the face.

196

pub const LIGHT_HT: ColorU = ColorU {

197

    r: 241,

198

    g: 243,

199

    b: 245,

200

    a: 255,

201

};

202

/// Hovered control, bottom of the face.

203

pub const LIGHT_HB: ColorU = ColorU {

204

    r: 233,

205

    g: 236,

206

    b: 239,

207

    a: 255,

208

};

209

/// Pressed control, top of the face.

210

pub const LIGHT_PT: ColorU = ColorU {

211

    r: 222,

212

    g: 226,

213

    b: 230,

214

    a: 255,

215

};

216

/// Pressed control, bottom of the face.

217

pub const LIGHT_PB: ColorU = ColorU {

218

    r: 206,

219

    g: 212,

220

    b: 218,

221

    a: 255,

222

};

223

/// Input field fill.

224

pub const LIGHT_FLD: ColorU = ColorU {

225

    r: 255,

226

    g: 255,

227

    b: 255,

228

    a: 255,

229

};

230

/// Secondary field fill (readonly, inset).

231

pub const LIGHT_FLD2: ColorU = ColorU {

232

    r: 248,

233

    g: 249,

234

    b: 250,

235

    a: 255,

236

};

237

/// Disabled control fill.

238

pub const LIGHT_DISBG: ColorU = ColorU {

239

    r: 233,

240

    g: 236,

241

    b: 239,

242

    a: 255,

243

};

244

/// Disabled control text.

245

pub const LIGHT_DISTX: ColorU = ColorU {

246

    r: 173,

247

    g: 181,

248

    b: 189,

249

    a: 255,

250

};

251

/// Quiet fill, e.g. a toolbar button at rest.

252

pub const LIGHT_QT: ColorU = ColorU {

253

    r: 248,

254

    g: 249,

255

    b: 250,

256

    a: 255,

257

};

258

/// Quiet fill, one step stronger.

259

pub const LIGHT_QT2: ColorU = ColorU {

260

    r: 241,

261

    g: 243,

262

    b: 245,

263

    a: 255,

264

};

265

/// Accent.

266

pub const LIGHT_ACC: ColorU = ColorU {

267

    r: 13,

268

    g: 110,

269

    b: 253,

270

    a: 255,

271

};

272

/// Accent, pressed.

273

pub const LIGHT_DEEP: ColorU = ColorU {

274

    r: 10,

275

    g: 88,

276

    b: 202,

277

    a: 255,

278

};

279

/// Accent, muted.

280

pub const LIGHT_SOFT: ColorU = ColorU {

281

    r: 110,

282

    g: 168,

283

    b: 254,

284

    a: 255,

285

};

286

/// Accent as a focus glow (translucent).

287

pub const LIGHT_GLOW: ColorU = ColorU {

288

    r: 13,

289

    g: 110,

290

    b: 253,

291

    a: 64,

292

};

293

/// Text and icons ON an accent fill.

294

pub const LIGHT_ON_ACC: ColorU = ColorU {

295

    r: 255,

296

    g: 255,

297

    b: 255,

298

    a: 255,

299

};

300

301

// Dark mode colors

302

/// Page: the window canvas behind everything.

303

pub const DARK_PG: ColorU = ColorU {

304

    r: 33,

305

    g: 37,

306

    b: 41,

307

    a: 255,

308

};

309

/// Surface: panels and cards sitting on the page.

310

pub const DARK_SUR: ColorU = ColorU {

311

    r: 52,

312

    g: 58,

313

    b: 64,

314

    a: 255,

315

};

316

/// Desk: the recessed area a document sits on.

317

pub const DARK_DESK: ColorU = ColorU {

318

    r: 26,

319

    g: 29,

320

    b: 33,

321

    a: 255,

322

};

323

/// Strip: toolbars and header bands.

324

pub const DARK_STRIP: ColorU = ColorU {

325

    r: 43,

326

    g: 48,

327

    b: 53,

328

    a: 255,

329

};

330

/// Track: scrollbar and slider grooves.

331

pub const DARK_TRACK: ColorU = ColorU {

332

    r: 73,

333

    g: 80,

334

    b: 87,

335

    a: 255,

336

};

337

/// Default border.

338

pub const DARK_BD: ColorU = ColorU {

339

    r: 73,

340

    g: 80,

341

    b: 87,

342

    a: 255,

343

};

344

/// Lighter border, for internal divisions.

345

pub const DARK_BD2: ColorU = ColorU {

346

    r: 52,

347

    g: 58,

348

    b: 64,

349

    a: 255,

350

};

351

/// Stronger border, for emphasis or focus.

352

pub const DARK_BD3: ColorU = ColorU {

353

    r: 108,

354

    g: 117,

355

    b: 125,

356

    a: 255,

357

};

358

/// Faintest border.

359

pub const DARK_BD4: ColorU = ColorU {

360

    r: 43,

361

    g: 48,

362

    b: 53,

363

    a: 255,

364

};

365

/// Border that reads as a highlight.

366

pub const DARK_BD5: ColorU = ColorU {

367

    r: 33,

368

    g: 37,

369

    b: 41,

370

    a: 255,

371

};

372

/// Separator line.

373

pub const DARK_SEP: ColorU = ColorU {

374

    r: 73,

375

    g: 80,

376

    b: 87,

377

    a: 255,

378

};

379

/// Fainter separator.

380

pub const DARK_SEP2: ColorU = ColorU {

381

    r: 52,

382

    g: 58,

383

    b: 64,

384

    a: 255,

385

};

386

/// Body text.

387

pub const DARK_INK: ColorU = ColorU {

388

    r: 248,

389

    g: 249,

390

    b: 250,

391

    a: 255,

392

};

393

/// Secondary text.

394

pub const DARK_INK2: ColorU = ColorU {

395

    r: 222,

396

    g: 226,

397

    b: 230,

398

    a: 255,

399

};

400

/// Introductory / lead text.

401

pub const DARK_INTRO: ColorU = ColorU {

402

    r: 173,

403

    g: 181,

404

    b: 189,

405

    a: 255,

406

};

407

/// Muted text, still readable.

408

pub const DARK_SOFT1: ColorU = ColorU {

409

    r: 134,

410

    g: 142,

411

    b: 150,

412

    a: 255,

413

};

414

/// Muted text, hint level.

415

pub const DARK_SOFT2: ColorU = ColorU {

416

    r: 108,

417

    g: 117,

418

    b: 125,

419

    a: 255,

420

};

421

/// Barely-there text.

422

pub const DARK_SOFT3: ColorU = ColorU {

423

    r: 73,

424

    g: 80,

425

    b: 87,

426

    a: 255,

427

};

428

/// Icon glyphs.

429

pub const DARK_ICON: ColorU = ColorU {

430

    r: 222,

431

    g: 226,

432

    b: 230,

433

    a: 255,

434

};

435

/// Raised control, top of the face (flat: equal to RB).

436

pub const DARK_RT: ColorU = ColorU {

437

    r: 60,

438

    g: 66,

439

    b: 73,

440

    a: 255,

441

};

442

/// Raised control, bottom of the face.

443

pub const DARK_RB: ColorU = ColorU {

444

    r: 52,

445

    g: 58,

446

    b: 64,

447

    a: 255,

448

};

449

/// Hovered control, top of the face.

450

pub const DARK_HT: ColorU = ColorU {

451

    r: 73,

452

    g: 80,

453

    b: 87,

454

    a: 255,

455

};

456

/// Hovered control, bottom of the face.

457

pub const DARK_HB: ColorU = ColorU {

458

    r: 60,

459

    g: 66,

460

    b: 73,

461

    a: 255,

462

};

463

/// Pressed control, top of the face.

464

pub const DARK_PT: ColorU = ColorU {

465

    r: 43,

466

    g: 48,

467

    b: 53,

468

    a: 255,

469

};

470

/// Pressed control, bottom of the face.

471

pub const DARK_PB: ColorU = ColorU {

472

    r: 33,

473

    g: 37,

474

    b: 41,

475

    a: 255,

476

};

477

/// Input field fill.

478

pub const DARK_FLD: ColorU = ColorU {

479

    r: 43,

480

    g: 48,

481

    b: 53,

482

    a: 255,

483

};

484

/// Secondary field fill (readonly, inset).

485

pub const DARK_FLD2: ColorU = ColorU {

486

    r: 52,

487

    g: 58,

488

    b: 64,

489

    a: 255,

490

};

491

/// Disabled control fill.

492

pub const DARK_DISBG: ColorU = ColorU {

493

    r: 52,

494

    g: 58,

495

    b: 64,

496

    a: 255,

497

};

498

/// Disabled control text.

499

pub const DARK_DISTX: ColorU = ColorU {

500

    r: 108,

501

    g: 117,

502

    b: 125,

503

    a: 255,

504

};

505

/// Quiet fill, e.g. a toolbar button at rest.

506

pub const DARK_QT: ColorU = ColorU {

507

    r: 43,

508

    g: 48,

509

    b: 53,

510

    a: 255,

511

};

512

/// Quiet fill, one step stronger.

513

pub const DARK_QT2: ColorU = ColorU {

514

    r: 52,

515

    g: 58,

516

    b: 64,

517

    a: 255,

518

};

519

/// Accent.

520

pub const DARK_ACC: ColorU = ColorU {

521

    r: 59,

522

    g: 130,

523

    b: 246,

524

    a: 255,

525

};

526

/// Accent, pressed.

527

pub const DARK_DEEP: ColorU = ColorU {

528

    r: 37,

529

    g: 99,

530

    b: 235,

531

    a: 255,

532

};

533

/// Accent, muted.

534

pub const DARK_SOFT: ColorU = ColorU {

535

    r: 96,

536

    g: 165,

537

    b: 250,

538

    a: 255,

539

};

540

/// Accent as a focus glow (translucent).

541

pub const DARK_GLOW: ColorU = ColorU {

542

    r: 59,

543

    g: 130,

544

    b: 246,

545

    a: 80,

546

};

547

/// Text and icons ON an accent fill.

548

pub const DARK_ON_ACC: ColorU = ColorU {

549

    r: 255,

550

    g: 255,

551

    b: 255,

552

    a: 255,

553

};

554

555

// The names this theme used before it had a full palette. Kept so existing

556

// callers keep compiling and keep meaning the same thing.

557

/// Deprecated alias for [`LIGHT_SUR`].

558

pub const LIGHT_BG: ColorU = LIGHT_SUR;

559

/// Deprecated alias for [`LIGHT_INK`].

560

pub const LIGHT_FG: ColorU = LIGHT_INK;

561

/// Deprecated alias for [`DARK_SUR`].

562

pub const DARK_BG: ColorU = DARK_SUR;

563

/// Deprecated alias for [`DARK_INK`].

564

pub const DARK_FG: ColorU = DARK_INK;

565

566

#[must_use]

567

16192

pub fn button(btn: Button) -> Dom {

568

16192

    let callbacks = match btn.on_click.into_option() {

569

        Some(ButtonOnClick {

570

198

            refany: data,

571

198

            callback,

572

198

        }) => vec![CoreCallbackData {

573

198

            event: EventFilter::Hover(HoverEventFilter::Click),

574

198

            callback: azul_core::callbacks::CoreCallback {

575

198

                cb: callback.cb as *const () as usize,

576

198

                ctx: callback.ctx,

577

198

},

578

198

            refany: data,

579

198

}],

580

15994

        None => Vec::new(),

581

};

582

583

16192

    let btn_type = btn.button_type;

584

16192

    let type_class = btn.button_type.class_name();

585

16192

    let classes: Vec<IdOrClass> = vec![

586

16192

        Class(AzString::from("__azul-native-button")),

587

16192

        Class(AzString::from(type_class)),

588

16192

        Class(AzString::from("__azul-theme-flat")),

589

];

590

591

16192

    let mut button = Dom::create_node(NodeType::Button);

592

593

16192

    let has_icon = !btn.icon.as_str().is_empty() || btn.icon_dom.is_some();

594

16192

    let has_image = btn.image.is_some();

595

16192

    let has_trailing_icon = !btn.trailing_icon.as_str().is_empty();

596

597

    // Resolved before `btn`'s fields are moved into the tree below.

598

16192

    let btn_container_style = btn.resolved_container_style();

599

    // A caller who injected a container style (`Some`) chose every property in

600

    // it — resting face, dark colours and states included. The chrome widgets

601

    // hand in part styles complete with their own hover/pressed pairs, and

602

    // anything this theme appended after them would win the cascade (inline

603

    // resolution is last-match) and paint the theme's greys over the ribbon's

604

    // blue. So the theme adds to its OWN default only.

605

16192

    let btn_owns_style = btn.container_style.as_ref().is_none();

606

16192

    let btn_label_style = btn.resolved_label_style();

607

16192

    let btn_image_style = btn.resolved_image_style();

608

16192

    let btn_icon_style = btn.resolved_icon_style();

609

16192

    let btn_trailing_icon_style = btn.resolved_trailing_icon_style();

610

611

16192

    let a11y_name_src: String = if btn.label.as_str().is_empty() {

612

4068

        if has_icon {

613

4064

            btn.icon.as_str().to_string()

614

        } else {

615

4

            String::new()

616

617

    } else {

618

12124

        btn.label.as_str().to_string()

619

};

620

621

16192

    if has_icon {

622

15987

        button = button.with_child(match btn.icon_dom.into_option() {

623

33

            Some(dom) => dom,

624

15954

            None => Dom::create_icon(btn.icon).with_css_props(btn_icon_style),

625

});

626

205

627

628

16192

    if let Some(image) = btn.image.into_option() {

629

8

        button = button.with_child(Dom::create_image(image).with_css_props(btn_image_style));

630

16184

631

632

16192

    let skip_label = btn.label.as_str().is_empty() && (has_icon || has_image || has_trailing_icon);

633

16192

    if !skip_label {

634

12128

        button = button.with_child(

635

12128

            crate::widgets::widget_p()

636

12128

                .with_css_props(btn_label_style)

637

12128

                .with_children(azul_core::dom::DomVec::from_vec(vec![

638

12128

                    Dom::create_text_do_not_use_without_block_level_wrapper(btn.label),

639

12128

                ])),

640

12128

);

641

12128

642

643

16192

    if has_trailing_icon {

644

2

        button = button.with_child(

645

2

            Dom::create_icon(btn.trailing_icon).with_css_props(btn_trailing_icon_style),

646

2

);

647

16190

648

649

16192

    let a11y_name = a11y_name_src;

650

16192

    let mut a11y = AccessibilityInfo {

651

16192

        role: AccessibilityRole::PushButton,

652

16192

        ..AccessibilityInfo::default()

653

16192

};

654

16192

    if !a11y_name.is_empty() {

655

16188

        a11y.accessibility_name = Some(AzString::from(a11y_name)).into();

656

16188

657

658

    // Add dark mode colors to container style

659

16192

    let mut container_style: Vec<CssPropertyWithConditions> =

660

16192

        btn_container_style.as_slice().to_vec();

661

662

16192

    if btn_owns_style {

663

        // The dark face and ink — for the NEUTRAL surface only. A coloured

664

        // command (primary, danger, ...) is its own colour in both modes and

665

        // a link has no face; painting `DARK_BG` over every type, as this

666

        // did, turned a blue primary button into an invisible dark box on a

667

        // dark window. (`ButtonType::surface` is the one place that rule

668

        // lives; `button_states` reads it too.)

669

205

        if btn_type.surface() == crate::widgets::button::ButtonSurface::Neutral {

670

134

            container_style.push(CssPropertyWithConditions::dark_theme(

671

134

                CssProperty::BackgroundContent(

672

134

                    StyleBackgroundContentVec::from_vec(vec![StyleBackgroundContent::Color(

673

134

                        DARK_BG,

674

134

)])

675

134

                    .into(),

676

134

),

677

134

));

678

134

            container_style.push(CssPropertyWithConditions::dark_theme(

679

134

                CssProperty::TextColor(StyleTextColor { inner: DARK_FG }.into()),

680

134

));

681

134

682

683

        // The interactive states go LAST. Inline declarations resolve last-match

684

        // wins and a `dark_theme(..)` rule matches in every pseudo-state, so any

685

        // dark resting colour pushed after a `dark_on_hover` / `dark_on_focus` twin

686

        // would shadow it — no ring, no hover face, in dark mode.

687

205

        container_style.extend(button_states(btn_type));

688

15987

689

690

16192

    button

691

16192

        .with_css_props(CssPropertyWithConditionsVec::from_vec(container_style))

692

16192

        .with_ids_and_classes(IdOrClassVec::from_vec(classes))

693

16192

        .with_callbacks(callbacks.into())

694

16192

        .with_tab_index(TabIndex::Auto)

695

16192

        .with_accessibility_info(a11y)

696

16192

697

698

use crate::widgets::check_box::CheckBox;

699

700

#[must_use]

701

153

pub fn check_box(cb: CheckBox) -> Dom {

702

153

    let cb_name = cb.accessibility_name.clone();

703

153

    crate::widgets::warn_widget_needs_a_name("check_box", cb_name.is_some());

704

705

153

    let checked_now = cb.check_box_state.inner.checked;

706

707

    use azul_core::{

708

        callbacks::{CoreCallback, CoreCallbackData},

709

        dom::{EventFilter, HoverEventFilter},

710

};

711

712

153

    let mut container_style: Vec<CssPropertyWithConditions> =

713

153

        cb.resolved_container_style().as_slice().to_vec();

714

153

    container_style.push(CssPropertyWithConditions::dark_theme(

715

153

        CssProperty::BackgroundContent(

716

153

            StyleBackgroundContentVec::from_vec(vec![StyleBackgroundContent::Color(DARK_BG)])

717

153

                .into(),

718

153

),

719

));

720

    // Flat checkmark background in dark mode

721

153

    let is_checked = cb.check_box_state.inner.checked;

722

153

    let mut content_style: Vec<CssPropertyWithConditions> =

723

153

        cb.resolved_content_style().as_slice().to_vec();

724

153

    if checked_now {

725

20

        content_style.push(CssPropertyWithConditions::dark_theme(

726

20

            CssProperty::BackgroundContent(

727

20

                StyleBackgroundContentVec::from_vec(vec![StyleBackgroundContent::Color(DARK_FG)])

728

20

                    .into(),

729

20

),

730

20

));

731

133

732

733

153

    Dom::create_div()

734

153

        .with_ids_and_classes(IdOrClassVec::from(

735

153

            crate::widgets::check_box::CHECKBOX_CONTAINER_CLASS,

736

))

737

153

        .with_css_props(CssPropertyWithConditionsVec::from_vec(container_style))

738

153

        .with_callbacks(

739

153

            vec![CoreCallbackData {

740

153

                event: EventFilter::Hover(HoverEventFilter::Click),

741

153

                callback: CoreCallback {

742

153

                    cb: crate::widgets::check_box::input::default_on_checkbox_clicked as usize,

743

153

                    ctx: azul_core::refany::OptionRefAny::None,

744

153

},

745

153

                refany: RefAny::new(cb.check_box_state),

746

153

}]

747

153

            .into(),

748

749

153

        .with_tab_index(TabIndex::Auto)

750

153

        .with_accessibility_info(AccessibilityInfo {

751

153

            role: AccessibilityRole::CheckButton,

752

153

            accessibility_name: cb_name,

753

153

            states: azul_core::a11y::AccessibilityStateVec::from_const_slice(if checked_now {

754

20

                &[azul_core::a11y::AccessibilityState::CheckedTrue]

755

            } else {

756

133

                &[azul_core::a11y::AccessibilityState::CheckedFalse]

757

}),

758

153

            ..Default::default()

759

})

760

153

        .with_children(

761

153

            vec![Dom::create_div()

762

153

                .with_ids_and_classes(IdOrClassVec::from(

763

153

                    crate::widgets::check_box::CHECKBOX_CONTENT_CLASS,

764

))

765

153

                .with_css_props(CssPropertyWithConditionsVec::from_vec(content_style))]

766

153

            .into(),

767

768

153

769

770

use crate::widgets::text_input::{

771

    default_on_focus_lost, default_on_focus_received, default_on_mouse_hover,

772

    default_on_text_input, default_on_virtual_key_down, TextInput, TEXT_INPUT_CONTAINER_CLASS,

773

    TEXT_INPUT_LABEL_CLASS,

774

};

775

776

#[must_use]

777

780

pub fn text_input(mut ti: TextInput) -> Dom {

778

780

    let a11y_name: Option<AzString> = ti.text_input_state.inner.placeholder.as_ref().cloned();

779

780

    let a11y_value: String = ti

780

        .text_input_state

781

780

        .inner

782

780

        .text

783

780

        .as_ref()

784

780

        .iter()

785

52829

        .filter_map(|c| core::char::from_u32(*c))

786

780

        .collect();

787

788

    use azul_core::{

789

        callbacks::{CoreCallback, CoreCallbackData},

790

        dom::{

791

            AttributeType, DomVec, EventFilter, FocusEventFilter, HoverEventFilter,

792

            IdOrClass::Class, TabIndex,

793

},

794

};

795

796

780

    ti.text_input_state.inner.cursor_pos = ti.text_input_state.inner.text.len();

797

798

780

    let label_text: String = ti

799

780

        .text_input_state

800

780

        .inner

801

780

        .text

802

780

        .iter()

803

52829

        .filter_map(|s| core::char::from_u32(*s))

804

780

        .collect();

805

806

780

    let placeholder = ti

807

780

        .text_input_state

808

780

        .inner

809

780

        .placeholder

810

780

        .as_ref()

811

780

        .map(|s| s.as_str().to_string())

812

780

        .unwrap_or_default();

813

814

    // Resolved before `ti.text_input_state` is moved out below, and through the

815

    // widget's own resolver rather than a second copy of its default — the point

816

    // of the resolver is that flat and flora cannot drift on this answer.

817

780

    let resolved_container_style = ti.resolved_container_style();

818

780

    let resolved_label_style = ti.resolved_label_style();

819

820

780

    let state_ref = RefAny::new(ti.text_input_state);

821

822

780

    let mut container_style: Vec<CssPropertyWithConditions> =

823

780

        resolved_container_style.as_slice().to_vec();

824

780

    container_style.push(CssPropertyWithConditions::dark_theme(

825

780

        CssProperty::BackgroundContent(

826

780

            StyleBackgroundContentVec::from_vec(vec![StyleBackgroundContent::Color(DARK_BG)])

827

780

                .into(),

828

780

),

829

));

830

780

    container_style.push(CssPropertyWithConditions::dark_theme(

831

780

        CssProperty::TextColor(StyleTextColor { inner: DARK_FG }.into()),

832

));

833

834

    // The interactive states the widget no longer declares. Appended LAST —

835

    // after the base style and after the theme's own dark resting colours —

836

    // because the last matching inline declaration wins: a `dark_theme` border

837

    // pushed after these would beat the dark hover/focus ring. One array so

838

    // half of them cannot ship.

839

780

    container_style.extend_from_slice(&FIELD_BORDER_STATES);

840

841

780

    let mut label_style: Vec<CssPropertyWithConditions> = resolved_label_style.as_slice().to_vec();

842

780

    label_style.push(CssPropertyWithConditions::dark_theme(

843

780

        CssProperty::TextColor(StyleTextColor { inner: DARK_FG }.into()),

844

));

845

846

780

    Dom::create_div()

847

780

        .with_ids_and_classes(vec![Class(TEXT_INPUT_CONTAINER_CLASS.into())].into())

848

780

        .with_css_props(CssPropertyWithConditionsVec::from_vec(container_style))

849

780

        .with_tab_index(TabIndex::Auto)

850

780

        .with_accessibility_info(AccessibilityInfo {

851

780

            role: AccessibilityRole::Text,

852

780

            accessibility_name: a11y_name.into(),

853

780

            accessibility_value: Some(AzString::from(a11y_value)).into(),

854

780

            ..Default::default()

855

780

})

856

780

        .with_contenteditable(true)

857

780

        .with_dataset(Some(state_ref.clone()).into())

858

780

        .with_callbacks(

859

780

            vec![

860

780

                CoreCallbackData {

861

780

                    event: EventFilter::Focus(FocusEventFilter::FocusReceived),

862

780

                    refany: state_ref.clone(),

863

780

                    callback: CoreCallback {

864

780

                        cb: default_on_focus_received as usize,

865

780

                        ctx: azul_core::refany::OptionRefAny::None,

866

780

},

867

780

},

868

780

                CoreCallbackData {

869

780

                    event: EventFilter::Focus(FocusEventFilter::FocusLost),

870

780

                    refany: state_ref.clone(),

871

780

                    callback: CoreCallback {

872

780

                        cb: default_on_focus_lost as usize,

873

780

                        ctx: azul_core::refany::OptionRefAny::None,

874

780

},

875

780

},

876

780

                CoreCallbackData {

877

780

                    event: EventFilter::Focus(FocusEventFilter::TextInput),

878

780

                    refany: state_ref.clone(),

879

780

                    callback: CoreCallback {

880

780

                        cb: default_on_text_input as usize,

881

780

                        ctx: azul_core::refany::OptionRefAny::None,

882

780

},

883

780

},

884

780

                CoreCallbackData {

885

780

                    event: EventFilter::Focus(FocusEventFilter::VirtualKeyDown),

886

780

                    refany: state_ref.clone(),

887

780

                    callback: CoreCallback {

888

780

                        cb: default_on_virtual_key_down as usize,

889

780

                        ctx: azul_core::refany::OptionRefAny::None,

890

780

},

891

780

},

892

780

                CoreCallbackData {

893

780

                    event: EventFilter::Hover(HoverEventFilter::MouseOver),

894

780

                    refany: state_ref,

895

780

                    callback: CoreCallback {

896

780

                        cb: default_on_mouse_hover as usize,

897

780

                        ctx: azul_core::refany::OptionRefAny::None,

898

780

},

899

780

},

900

901

780

            .into(),

902

903

780

        .with_children(

904

780

            vec![crate::widgets::widget_p()

905

780

                .with_ids_and_classes(vec![Class(TEXT_INPUT_LABEL_CLASS.into())].into())

906

780

                .with_css_props(CssPropertyWithConditionsVec::from_vec(label_style))

907

780

                .with_attribute(AttributeType::Placeholder(placeholder.into()))

908

780

                .with_children(DomVec::from_vec(vec![

909

780

                    Dom::create_text_do_not_use_without_block_level_wrapper(label_text),

910

                ]))]

911

780

            .into(),

912

913

780

914

915

#[must_use]

916

pub fn label(l: crate::widgets::label::Label) -> Dom {

917

    use azul_core::dom::{IdOrClass::Class, IdOrClassVec};

918

    use AzString;

919

920

    static LABEL_CLASS: &[IdOrClass] = &[Class(AzString::from_const_str("__azul-native-label"))];

921

922

    // Resolved before `l.string` is moved out below.

923

    let label_style = l.resolved_label_style();

924

925

    crate::widgets::widget_p_with_text(l.string)

926

        .with_ids_and_classes(IdOrClassVec::from_const_slice(LABEL_CLASS))

927

        .with_css_props(label_style)

928

929

930

#[must_use]

931

119

pub fn switch(s: crate::widgets::switch::Switch) -> Dom {

932

119

    let is_checked = s.switch_state.inner.checked;

933

    // Resolved up front: the knob's Dom is built after `s.switch_state` has

934

    // been moved into the callback's RefAny, and the resolver needs the whole

935

    // widget.

936

119

    let resolved_track_style = s.resolved_track_style();

937

119

    let resolved_knob_style = s.resolved_knob_style();

938

    use azul_core::{

939

        callbacks::{CoreCallback, CoreCallbackData},

940

        dom::{Dom, EventFilter, HoverEventFilter, IdOrClassVec, TabIndex},

941

};

942

943

119

    let sw_name = s.accessibility_name.clone();

944

119

    crate::widgets::warn_widget_needs_a_name("switch", sw_name.is_some());

945

946

119

    let switch_checked = s.switch_state.inner.checked;

947

948

119

    Dom::create_div()

949

119

        .with_ids_and_classes(IdOrClassVec::from(

950

119

            crate::widgets::switch::SWITCH_TRACK_CLASS,

951

))

952

119

        .with_css_props(resolved_track_style.as_slice().to_vec().into())

953

119

        .with_callbacks(

954

119

            alloc::vec![CoreCallbackData {

955

119

                event: EventFilter::Hover(HoverEventFilter::Click),

956

119

                callback: CoreCallback {

957

119

                    cb: crate::widgets::switch::input::default_on_switch_clicked as usize,

958

119

                    ctx: azul_core::refany::OptionRefAny::None,

959

119

},

960

119

                refany: RefAny::new(s.switch_state),

961

119

}]

962

119

            .into(),

963

964

119

        .with_tab_index(TabIndex::Auto)

965

119

        .with_accessibility_info(AccessibilityInfo {

966

119

            role: AccessibilityRole::CheckButton,

967

119

            accessibility_name: sw_name,

968

119

            states: azul_core::a11y::AccessibilityStateVec::from_vec(alloc::vec![

969

119

                if switch_checked {

970

19

                    azul_core::a11y::AccessibilityState::CheckedTrue

971

                } else {

972

100

                    azul_core::a11y::AccessibilityState::CheckedFalse

973

},

974

]),

975

119

            ..Default::default()

976

})

977

119

        .with_children(

978

119

            alloc::vec![Dom::create_div()

979

119

                .with_ids_and_classes(IdOrClassVec::from(

980

119

                    crate::widgets::switch::SWITCH_KNOB_CLASS

981

))

982

119

                .with_css_props(resolved_knob_style.as_slice().to_vec().into())]

983

119

            .into(),

984

985

119

986

987

// -----------------------------------------------------------------------------

988

// PROGRESSBAR

989

// -----------------------------------------------------------------------------

990

991

#[must_use]

992

9

pub fn progressbar(bar: crate::widgets::progressbar::ProgressBar) -> Dom {

993

9

    let height = bar.height;

994

9

    let dataset = RefAny::new(crate::widgets::progressbar::ProgressBarLocalDataset { bar });

995

9

    Dom::create_virtual_view(

996

9

        dataset.clone(),

997

9

        azul_core::callbacks::VirtualViewCallback::create(progressbar_render_virtual_view),

998

999

9

    .with_dataset(Some(dataset).into())

1000

9

    .with_css_props(CssPropertyWithConditionsVec::from_vec(vec![

1001

9

        CssPropertyWithConditions::simple(CssProperty::Height(LayoutHeightValue::Exact(

1002

9

            LayoutHeight::Px(height),

1003

9

        ))),

1004

9

        CssPropertyWithConditions::simple(CssProperty::Width(LayoutWidthValue::Exact(

1005

9

            LayoutWidth::Px(PixelValue::percent(100.0)),

1006

9

        ))),

1007

9

        CssPropertyWithConditions::simple(CssProperty::OverflowX(LayoutOverflowValue::Exact(

1008

9

            LayoutOverflow::Hidden,

1009

9

        ))),

1010

9

        CssPropertyWithConditions::simple(CssProperty::OverflowY(LayoutOverflowValue::Exact(

1011

9

            LayoutOverflow::Hidden,

1012

9

        ))),

1013

]))

1014

9

1015

1016

/// The render core behind [`ProgressBar::render_bar`] (percentage widths,

1017

/// `bounds_px: None`) and the `VirtualView` callback (absolute pixel sizes

1018

/// computed from the node's known bounds, `Some((width, height))`).

1019

///

1020

/// The split exists because the two contexts size differently. Percentages

1021

/// inside a `VirtualView` DO resolve correctly against the view's bounds

1022

/// (the child DOM lays out against its own viewport - it briefly resolved

1023

/// against the WINDOW, fixed 2026-08-29, pinned by

1024

/// `a_virtual_view_child_lays_out_against_the_view_bounds_not_the_window`),

1025

/// but the bounds mode stays PIXEL-based for what percentages cannot

1026

/// express: the container is sized to `bounds - 2px borders` so its 1px

1027

/// border ring lands INSIDE the box - with the normal-flow sizing (content

1028

/// height + borders) the ring overflowed the VV node and was clipped away

1029

/// at the right and bottom ("oddly cut off", user report 2026-08-29) - and

1030

/// the fill is an exact device-pixel split of the known content width.

1031

#[allow(clippy::too_many_lines)]

1032

#[must_use]

1033

207

pub fn progressbar_render_bar_impl(

1034

207

    bar: crate::widgets::progressbar::ProgressBar,

1035

207

    bounds_px: Option<(f32, f32)>,

1036

207

) -> Dom {

1037

1038

        use azul_core::dom::DomVec;

1039

1040

207

        let this = bar;

1041

207

        let percent_done = this.progressbar_state.percent_done.clamp(0.0, 100.0);

1042

        // Sizes resolved per context (see fn docs). The bounds branch

1043

        // subtracts the container's 1px border ring so children + borders

1044

        // exactly fill the VV box.

1045

207

        let (bar_width, remaining_width) = match bounds_px {

1046

2

            Some((w, _)) => {

1047

2

                let inner = (w - 2.0).max(0.0);

1048

2

                let filled = inner * percent_done / 100.0;

1049

2

                (PixelValue::px(filled), PixelValue::px(inner - filled))

1050

1051

205

            None => (

1052

205

                PixelValue::percent(percent_done),

1053

205

                PixelValue::percent(100.0 - percent_done),

1054

205

),

1055

};

1056

207

        let container_height = match bounds_px {

1057

2

            Some((_, h)) => PixelValue::px((h - 2.0).max(0.0)),

1058

205

            None => this.height,

1059

};

1060

1061

207

        let mut container_props = vec![

1062

            // .__azul-native-progress-bar-container

1063

207

            CssPropertyWithConditions::simple(CssProperty::Height(LayoutHeightValue::Exact(

1064

207

                LayoutHeight::Px(container_height),

1065

207

            ))),

1066

            // `display: flex` is LOAD-BEARING: azul's default display is

1067

            // BLOCK, so `flex-direction: row` alone stacks the two

1068

            // children as full-width, zero-height block boxes - the fill

1069

            // never painted anywhere the widget was used (found 2026-08-29

1070

            // via the azpaint pressure meter; also the real culprit behind

1071

            // the "inline-width meter never repaints" ledger entry).

1072

207

            CssPropertyWithConditions::simple(CssProperty::Display(LayoutDisplayValue::Exact(

1073

207

                LayoutDisplay::Flex,

1074

207

            ))),

1075

207

            CssPropertyWithConditions::simple(CssProperty::FlexDirection(

1076

207

                LayoutFlexDirectionValue::Exact(LayoutFlexDirection::Row),

1077

207

)),

1078

207

            CssPropertyWithConditions::simple(CssProperty::BorderBottomRightRadius(

1079

207

                StyleBorderBottomRightRadiusValue::Exact(StyleBorderBottomRightRadius {

1080

207

                    inner: PixelValue::const_px(3),

1081

207

}),

1082

207

)),

1083

207

            CssPropertyWithConditions::simple(CssProperty::BorderBottomLeftRadius(

1084

207

                StyleBorderBottomLeftRadiusValue::Exact(StyleBorderBottomLeftRadius {

1085

207

                    inner: PixelValue::const_px(3),

1086

207

}),

1087

207

)),

1088

207

            CssPropertyWithConditions::simple(CssProperty::BorderTopRightRadius(

1089

207

                StyleBorderTopRightRadiusValue::Exact(StyleBorderTopRightRadius {

1090

207

                    inner: PixelValue::const_px(3),

1091

207

}),

1092

207

)),

1093

207

            CssPropertyWithConditions::simple(CssProperty::BorderTopLeftRadius(

1094

207

                StyleBorderTopLeftRadiusValue::Exact(StyleBorderTopLeftRadius {

1095

207

                    inner: PixelValue::const_px(3),

1096

207

}),

1097

207

)),

1098

207

            CssPropertyWithConditions::simple(CssProperty::BorderBottomWidth(

1099

207

                LayoutBorderBottomWidthValue::Exact(LayoutBorderBottomWidth {

1100

207

                    inner: PixelValue::const_px(1),

1101

207

}),

1102

207

)),

1103

207

            CssPropertyWithConditions::simple(CssProperty::BorderLeftWidth(

1104

207

                LayoutBorderLeftWidthValue::Exact(LayoutBorderLeftWidth {

1105

207

                    inner: PixelValue::const_px(1),

1106

207

}),

1107

207

)),

1108

207

            CssPropertyWithConditions::simple(CssProperty::BorderRightWidth(

1109

207

                LayoutBorderRightWidthValue::Exact(LayoutBorderRightWidth {

1110

207

                    inner: PixelValue::const_px(1),

1111

207

}),

1112

207

)),

1113

207

            CssPropertyWithConditions::simple(CssProperty::BorderTopWidth(

1114

207

                LayoutBorderTopWidthValue::Exact(LayoutBorderTopWidth {

1115

207

                    inner: PixelValue::const_px(1),

1116

207

}),

1117

207

)),

1118

207

            CssPropertyWithConditions::simple(CssProperty::BorderBottomStyle(

1119

207

                StyleBorderBottomStyleValue::Exact(StyleBorderBottomStyle {

1120

207

                    inner: BorderStyle::Solid,

1121

207

}),

1122

207

)),

1123

207

            CssPropertyWithConditions::simple(CssProperty::BorderLeftStyle(

1124

207

                StyleBorderLeftStyleValue::Exact(StyleBorderLeftStyle {

1125

207

                    inner: BorderStyle::Solid,

1126

207

}),

1127

207

)),

1128

207

            CssPropertyWithConditions::simple(CssProperty::BorderRightStyle(

1129

207

                StyleBorderRightStyleValue::Exact(StyleBorderRightStyle {

1130

207

                    inner: BorderStyle::Solid,

1131

207

}),

1132

207

)),

1133

207

            CssPropertyWithConditions::simple(CssProperty::BorderTopStyle(

1134

207

                StyleBorderTopStyleValue::Exact(StyleBorderTopStyle {

1135

207

                    inner: BorderStyle::Solid,

1136

207

}),

1137

207

)),

1138

207

            CssPropertyWithConditions::simple(CssProperty::BorderBottomColor(

1139

207

                StyleBorderBottomColorValue::Exact(StyleBorderBottomColor { inner: LIGHT_BD3 }),

1140

207

)),

1141

207

            CssPropertyWithConditions::simple(CssProperty::BorderLeftColor(

1142

207

                StyleBorderLeftColorValue::Exact(StyleBorderLeftColor { inner: LIGHT_BD3 }),

1143

207

)),

1144

207

            CssPropertyWithConditions::simple(CssProperty::BorderRightColor(

1145

207

                StyleBorderRightColorValue::Exact(StyleBorderRightColor { inner: LIGHT_BD3 }),

1146

207

)),

1147

207

            CssPropertyWithConditions::simple(CssProperty::BorderTopColor(

1148

207

                StyleBorderTopColorValue::Exact(StyleBorderTopColor { inner: LIGHT_BD3 }),

1149

207

)),

1150

207

            CssPropertyWithConditions::simple(CssProperty::BackgroundContent(

1151

207

                StyleBackgroundContentVecValue::Exact(this.container_background.clone()),

1152

207

)),

1153

];

1154

207

        if let Some((w, _)) = bounds_px {

1155

2

            container_props.push(CssPropertyWithConditions::simple(CssProperty::Width(

1156

2

                LayoutWidthValue::Exact(LayoutWidth::Px(PixelValue::px((w - 2.0).max(0.0)))),

1157

2

            )));

1158

205

1159

1160

207

        Dom::create_div()

1161

207

            .with_css_props(CssPropertyWithConditionsVec::from_vec(container_props))

1162

207

            .with_ids_and_classes({

1163

                const IDS_AND_CLASSES_10874511710181900075: &[IdOrClass] = &[Class(

1164

                    AzString::from_const_str("__azul-native-progress-bar-container"),

1165

)];

1166

207

                IdOrClassVec::from_const_slice(IDS_AND_CLASSES_10874511710181900075)

1167

})

1168

            // For a progress bar the VALUE is the content: two coloured divs

1169

            // say nothing to a screen reader, "75%" says everything. Published

1170

            // on every build so it tracks the bar; a callback that moves the

1171

            // bar live without a rebuild keeps it current with

1172

            // `CallbackInfo::set_accessibility_value` on this node.

1173

207

            .with_accessibility_info(AccessibilityInfo {

1174

207

                role: AccessibilityRole::ProgressBar,

1175

207

                accessibility_value: Some(AzString::from(alloc::format!(

1176

207

                    "{:.0}%",

1177

                    // NaN clamps to NaN and would read "NaN%"; an unknown

1178

                    // value announces as empty, like the bar it draws.

1179

207

                    if percent_done.is_finite() { percent_done } else { 0.0 }

1180

)))

1181

207

                .into(),

1182

207

                ..Default::default()

1183

})

1184

207

            .with_children(DomVec::from_vec(vec![

1185

207

                Dom::create_div()

1186

207

                    .with_css_props(CssPropertyWithConditionsVec::from_vec(vec![

1187

                        // .__azul-native-progress-bar-bar

1188

                        // Use percentage width instead of flex-grow hack

1189

207

                        CssPropertyWithConditions::simple(CssProperty::Width(

1190

207

                            LayoutWidthValue::Exact(LayoutWidth::Px(bar_width)),

1191

207

)),

1192

207

                        CssPropertyWithConditions::simple(CssProperty::BoxShadowBottom(

1193

207

                            StyleBoxShadowValue::Exact(BoxOrStatic::heap(StyleBoxShadow {

1194

207

                                offset_x: PixelValueNoPercent {

1195

207

                                    inner: PixelValue::const_px(0),

1196

207

},

1197

207

                                offset_y: PixelValueNoPercent {

1198

207

                                    inner: PixelValue::const_px(0),

1199

207

},

1200

207

                                color: ColorU {

1201

207

                                    r: 0,

1202

207

                                    g: 51,

1203

207

                                    b: 0,

1204

207

                                    a: 51,

1205

207

},

1206

207

                                blur_radius: PixelValueNoPercent {

1207

207

                                    inner: PixelValue::const_px(15),

1208

207

},

1209

207

                                spread_radius: PixelValueNoPercent {

1210

207

                                    inner: PixelValue::const_px(12),

1211

207

},

1212

207

                                clip_mode: BoxShadowClipMode::Inset,

1213

207

                            })),

1214

207

)),

1215

207

                        CssPropertyWithConditions::simple(CssProperty::BoxShadowTop(

1216

207

                            StyleBoxShadowValue::Exact(BoxOrStatic::heap(StyleBoxShadow {

1217

207

                                offset_x: PixelValueNoPercent {

1218

207

                                    inner: PixelValue::const_px(0),

1219

207

},

1220

207

                                offset_y: PixelValueNoPercent {

1221

207

                                    inner: PixelValue::const_px(0),

1222

207

},

1223

207

                                color: ColorU {

1224

207

                                    r: 0,

1225

207

                                    g: 51,

1226

207

                                    b: 0,

1227

207

                                    a: 51,

1228

207

},

1229

207

                                blur_radius: PixelValueNoPercent {

1230

207

                                    inner: PixelValue::const_px(15),

1231

207

},

1232

207

                                spread_radius: PixelValueNoPercent {

1233

207

                                    inner: PixelValue::const_px(12),

1234

207

},

1235

207

                                clip_mode: BoxShadowClipMode::Inset,

1236

207

                            })),

1237

207

)),

1238

207

                        CssPropertyWithConditions::simple(CssProperty::BoxShadowRight(

1239

207

                            StyleBoxShadowValue::Exact(BoxOrStatic::heap(StyleBoxShadow {

1240

207

                                offset_x: PixelValueNoPercent {

1241

207

                                    inner: PixelValue::const_px(0),

1242

207

},

1243

207

                                offset_y: PixelValueNoPercent {

1244

207

                                    inner: PixelValue::const_px(0),

1245

207

},

1246

207

                                color: ColorU {

1247

207

                                    r: 0,

1248

207

                                    g: 51,

1249

207

                                    b: 0,

1250

207

                                    a: 51,

1251

207

},

1252

207

                                blur_radius: PixelValueNoPercent {

1253

207

                                    inner: PixelValue::const_px(15),

1254

207

},

1255

207

                                spread_radius: PixelValueNoPercent {

1256

207

                                    inner: PixelValue::const_px(12),

1257

207

},

1258

207

                                clip_mode: BoxShadowClipMode::Inset,

1259

207

                            })),

1260

207

)),

1261

207

                        CssPropertyWithConditions::simple(CssProperty::BoxShadowLeft(

1262

207

                            StyleBoxShadowValue::Exact(BoxOrStatic::heap(StyleBoxShadow {

1263

207

                                offset_x: PixelValueNoPercent {

1264

207

                                    inner: PixelValue::const_px(0),

1265

207

},

1266

207

                                offset_y: PixelValueNoPercent {

1267

207

                                    inner: PixelValue::const_px(0),

1268

207

},

1269

207

                                color: ColorU {

1270

207

                                    r: 0,

1271

207

                                    g: 51,

1272

207

                                    b: 0,

1273

207

                                    a: 51,

1274

207

},

1275

207

                                blur_radius: PixelValueNoPercent {

1276

207

                                    inner: PixelValue::const_px(15),

1277

207

},

1278

207

                                spread_radius: PixelValueNoPercent {

1279

207

                                    inner: PixelValue::const_px(12),

1280

207

},

1281

207

                                clip_mode: BoxShadowClipMode::Inset,

1282

207

                            })),

1283

207

)),

1284

207

                        CssPropertyWithConditions::simple(CssProperty::BorderBottomRightRadius(

1285

207

                            StyleBorderBottomRightRadiusValue::Exact(

1286

207

                                StyleBorderBottomRightRadius {

1287

207

                                    inner: PixelValue::const_px(1),

1288

207

},

1289

207

),

1290

207

)),

1291

207

                        CssPropertyWithConditions::simple(CssProperty::BorderBottomLeftRadius(

1292

207

                            StyleBorderBottomLeftRadiusValue::Exact(StyleBorderBottomLeftRadius {

1293

207

                                inner: PixelValue::const_px(1),

1294

207

}),

1295

207

)),

1296

207

                        CssPropertyWithConditions::simple(CssProperty::BorderTopRightRadius(

1297

207

                            StyleBorderTopRightRadiusValue::Exact(StyleBorderTopRightRadius {

1298

207

                                inner: PixelValue::const_px(1),

1299

207

}),

1300

207

)),

1301

207

                        CssPropertyWithConditions::simple(CssProperty::BorderTopLeftRadius(

1302

207

                            StyleBorderTopLeftRadiusValue::Exact(StyleBorderTopLeftRadius {

1303

207

                                inner: PixelValue::const_px(1),

1304

207

}),

1305

207

)),

1306

207

                        CssPropertyWithConditions::simple(CssProperty::BackgroundContent(

1307

207

                            StyleBackgroundContentVecValue::Exact(this.bar_background),

1308

207

)),

1309

]))

1310

207

                    .with_ids_and_classes({

1311

                        const IDS_AND_CLASSES_16512648314570682783: &[IdOrClass] = &[Class(

1312

                            AzString::from_const_str("__azul-native-progress-bar-bar"),

1313

)];

1314

207

                        IdOrClassVec::from_const_slice(IDS_AND_CLASSES_16512648314570682783)

1315

}),

1316

207

                Dom::create_div()

1317

207

                    .with_css_props(CssPropertyWithConditionsVec::from_vec(vec![

1318

                        // .__azul-native-progress-bar-remaining

1319

                        // Use percentage width for the remaining space

1320

207

                        CssPropertyWithConditions::simple(CssProperty::Width(

1321

207

                            LayoutWidthValue::Exact(LayoutWidth::Px(remaining_width)),

1322

207

)),

1323

]))

1324

207

                    .with_ids_and_classes({

1325

                        const IDS_AND_CLASSES_2492405364126620395: &[IdOrClass] = &[Class(

1326

                            AzString::from_const_str("__azul-native-progress-bar-remaining"),

1327

)];

1328

207

                        IdOrClassVec::from_const_slice(IDS_AND_CLASSES_2492405364126620395)

1329

}),

1330

]))

1331

1332

207

1333

1334

#[must_use]

1335

/// The widget's `VirtualView` callback: render the CURRENT state of the bar

1336

/// into the node's bounds. Invoked on mount and again every time

1337

/// [`ProgressBar::update_progress`] queues a re-render.

1338

///

1339

/// The bar is not scrollable content, so all three rects collapse to one:

1340

/// `materialized` == `virtual_rect` == the container's box at origin zero.

1341

3

pub extern "C" fn progressbar_render_virtual_view(

1342

3

    mut data: RefAny,

1343

3

    info: VirtualViewCallbackInfo,

1344

3

) -> VirtualViewReturn {

1345

3

    let Some(state) = data.downcast_ref::<crate::widgets::progressbar::ProgressBarLocalDataset>()

1346

    else {

1347

        // Foreign payload: render nothing rather than lying about bounds.

1348

1

        return VirtualViewReturn::default();

1349

};

1350

2

    let size = info.bounds.get_logical_size();

1351

2

    let rect = LogicalRect::new(LogicalPosition::zero(), size);

1352

    // Clone-per-render is two enum copies + an `AzString`-less state copy; the

1353

    // backgrounds are either `&'static` (shared, no alloc) or a caller-owned

1354

    // heap vec that must be preserved for the NEXT render anyway. Pixel

1355

    // widths, not percentages: the callback knows its bounds (see

1356

    // `render_bar_impl`).

1357

2

    VirtualViewReturn::with_dom(

1358

2

        progressbar_render_bar_impl(state.bar.clone(), Some((size.width, size.height))),

1359

2

        rect,

1360

2

        rect,

1361

1362

3

1363

1364

217

pub fn slider(slider: crate::widgets::slider::Slider) -> Dom {

1365

217

    let value_now = slider.slider_state.inner.value;

1366

217

    let a11y_name = slider.accessibility_name.clone();

1367

217

    crate::widgets::warn_widget_needs_a_name("Slider", a11y_name.is_some());

1368

1369

    use azul_core::{

1370

        callbacks::{CoreCallback, CoreCallbackData},

1371

        dom::{EventFilter, HoverEventFilter, TabIndex},

1372

        refany::{OptionRefAny, RefAny},

1373

};

1374

1375

    // Resolved before `slider.slider_state` is moved out below; the resolvers

1376

    // borrow `&slider`, and the thumb's margin is derived from the state.

1377

217

    let resolved_track_style = slider.resolved_track_style();

1378

217

    let resolved_thumb_style = slider.resolved_thumb_style();

1379

1380

217

    let state = RefAny::new(slider.slider_state);

1381

217

    let mk = |event: EventFilter, cb: usize| CoreCallbackData {

1382

1736

        event,

1383

1736

        callback: CoreCallback {

1384

1736

cb,

1385

1736

            ctx: OptionRefAny::None,

1386

1736

},

1387

1736

        refany: state.clone(),

1388

1736

};

1389

217

    let callbacks = vec![

1390

217

mk(

1391

217

            EventFilter::Hover(HoverEventFilter::MouseDown),

1392

217

            crate::widgets::slider::on_slider_pointer_down as usize,

1393

217

),

1394

217

mk(

1395

217

            EventFilter::Hover(HoverEventFilter::MouseMove),

1396

217

            crate::widgets::slider::on_slider_pointer_move as usize,

1397

217

),

1398

217

mk(

1399

217

            EventFilter::Hover(HoverEventFilter::MouseUp),

1400

217

            crate::widgets::slider::on_slider_pointer_up as usize,

1401

217

),

1402

217

mk(

1403

217

            EventFilter::Focus(azul_core::events::FocusEventFilter::VirtualKeyDown),

1404

217

            crate::widgets::slider::on_slider_key as usize,

1405

217

),

1406

217

mk(

1407

217

            EventFilter::Hover(HoverEventFilter::MouseLeave),

1408

217

            crate::widgets::slider::on_slider_pointer_leave as usize,

1409

217

),

1410

217

mk(

1411

217

            EventFilter::Hover(HoverEventFilter::TouchStart),

1412

217

            crate::widgets::slider::on_slider_pointer_down as usize,

1413

217

),

1414

217

mk(

1415

217

            EventFilter::Hover(HoverEventFilter::TouchMove),

1416

217

            crate::widgets::slider::on_slider_pointer_move as usize,

1417

217

),

1418

217

mk(

1419

217

            EventFilter::Hover(HoverEventFilter::TouchEnd),

1420

217

            crate::widgets::slider::on_slider_pointer_up as usize,

1421

217

),

1422

];

1423

1424

217

    let mut track_style = resolved_track_style.as_slice().to_vec();

1425

217

    let mut thumb_style = resolved_thumb_style.as_slice().to_vec();

1426

1427

    // Flat specific:

1428

217

    track_style.push(CssPropertyWithConditions::dark_theme(

1429

217

        CssProperty::BackgroundContent(

1430

217

            StyleBackgroundContentVec::from_vec(vec![StyleBackgroundContent::Color(DARK_BG)])

1431

217

                .into(),

1432

217

),

1433

));

1434

217

    thumb_style.push(CssPropertyWithConditions::dark_theme(

1435

217

        CssProperty::BackgroundContent(

1436

217

            StyleBackgroundContentVec::from_vec(vec![StyleBackgroundContent::Color(DARK_FG)])

1437

217

                .into(),

1438

217

),

1439

));

1440

1441

217

    Dom::create_div()

1442

217

        .with_ids_and_classes(IdOrClassVec::from_vec(vec![Class(

1443

217

            AzString::from_const_str("__azul-native-slider"),

1444

217

        )]))

1445

217

        .with_css_props(CssPropertyWithConditionsVec::from_vec(track_style))

1446

217

        .with_callbacks(callbacks.into())

1447

217

        .with_dataset(OptionRefAny::Some(state))

1448

217

        .with_merge_callback(azul_core::dom::DatasetMergeCallback::from_ptr(

1449

217

            crate::widgets::slider::merge_slider_state,

1450

))

1451

217

        .with_tab_index(TabIndex::Auto)

1452

217

        .with_accessibility_info(AccessibilityInfo {

1453

217

            role: AccessibilityRole::Slider,

1454

217

            accessibility_name: a11y_name,

1455

217

            accessibility_value: Some(AzString::from(alloc::format!("{value_now}"))).into(),

1456

217

            ..Default::default()

1457

217

})

1458

217

        .with_children(

1459

217

            vec![Dom::create_div()

1460

217

                .with_ids_and_classes(IdOrClassVec::from_vec(vec![Class(

1461

217

                    AzString::from_const_str("__azul-native-slider-thumb"),

1462

217

                )]))

1463

217

                .with_css_props(CssPropertyWithConditionsVec::from_vec(thumb_style))]

1464

217

            .into(),

1465

1466

217

1467

1468

#[must_use]

1469

267

pub fn text_area(mut ta: crate::widgets::text_area::TextArea) -> Dom {

1470

267

    let ta_name: Option<AzString> = ta.text_area_state.inner.placeholder.as_ref().cloned();

1471

1472

    use azul_core::dom::{

1473

        AttributeType, DomVec, EventFilter, FocusEventFilter, IdOrClass::Class, TabIndex,

1474

};

1475

1476

267

    ta.text_area_state.inner.cursor_pos = ta.text_area_state.inner.text.len();

1477

1478

    // Resolved before `ta.text_area_state` is moved out below, and through the

1479

    // widget's resolver rather than a second copy of its default.

1480

267

    let resolved_container_style = ta.resolved_container_style();

1481

1482

267

    let label_text: String = ta

1483

267

        .text_area_state

1484

267

        .inner

1485

267

        .text

1486

267

        .iter()

1487

242916

        .filter_map(|s| core::char::from_u32(*s))

1488

267

        .collect();

1489

1490

267

    let placeholder = ta

1491

267

        .text_area_state

1492

267

        .inner

1493

267

        .placeholder

1494

267

        .as_ref()

1495

267

        .map(|s| s.as_str().to_string())

1496

267

        .unwrap_or_default();

1497

1498

267

    let state_ref = RefAny::new(ta.text_area_state);

1499

1500

267

    let mut container_style: Vec<CssPropertyWithConditions> =

1501

267

        resolved_container_style.as_slice().to_vec();

1502

267

    container_style.push(CssPropertyWithConditions::dark_theme(

1503

267

        CssProperty::BackgroundContent(

1504

267

            StyleBackgroundContentVec::from_vec(vec![StyleBackgroundContent::Color(DARK_BG)])

1505

267

                .into(),

1506

267

),

1507

));

1508

267

    container_style.push(CssPropertyWithConditions::dark_theme(

1509

267

        CssProperty::TextColor(StyleTextColor { inner: DARK_FG }.into()),

1510

));

1511

1512

267

    let mut label_style: Vec<CssPropertyWithConditions> = match &ta.label_style {

1513

        azul_css::dynamic_selector::OptionCssPropertyWithConditionsVec::Some(s) => {

1514

            s.as_slice().to_vec()

1515

1516

        azul_css::dynamic_selector::OptionCssPropertyWithConditionsVec::None => {

1517

267

            crate::widgets::text_area::TEXT_AREA_LABEL_PROPS.to_vec()

1518

1519

};

1520

267

    label_style.push(CssPropertyWithConditions::dark_theme(

1521

267

        CssProperty::TextColor(StyleTextColor { inner: DARK_FG }.into()),

1522

));

1523

1524

    // The interactive states go LAST. Inline declarations resolve last-match

1525

    // wins and a `dark_theme(..)` rule matches in every pseudo-state, so any

1526

    // dark resting colour pushed after a `dark_on_hover` / `dark_on_focus` twin

1527

    // would shadow it — no ring, no hover face, in dark mode.

1528

267

    container_style.extend_from_slice(&FIELD_BORDER_STATES);

1529

1530

267

    Dom::create_div()

1531

267

        .with_ids_and_classes(vec![Class("__azul-native-text-area-container".into())].into())

1532

267

        .with_css_props(CssPropertyWithConditionsVec::from_vec(container_style))

1533

267

        .with_tab_index(TabIndex::Auto)

1534

267

        .with_accessibility_info(AccessibilityInfo {

1535

267

            role: AccessibilityRole::Text,

1536

267

            accessibility_name: ta_name.into(),

1537

267

            ..Default::default()

1538

267

})

1539

267

        .with_contenteditable(true)

1540

267

        .with_dataset(Some(state_ref.clone()).into())

1541

267

        .with_callbacks(

1542

267

            vec![

1543

267

                CoreCallbackData {

1544

267

                    event: EventFilter::Focus(FocusEventFilter::FocusReceived),

1545

267

                    refany: state_ref.clone(),

1546

267

                    callback: azul_core::callbacks::CoreCallback {

1547

267

                        cb: crate::widgets::text_area::default_on_focus_received as usize,

1548

267

                        ctx: azul_core::refany::OptionRefAny::None,

1549

267

},

1550

267

},

1551

267

                CoreCallbackData {

1552

267

                    event: EventFilter::Focus(FocusEventFilter::FocusLost),

1553

267

                    refany: state_ref.clone(),

1554

267

                    callback: azul_core::callbacks::CoreCallback {

1555

267

                        cb: crate::widgets::text_area::default_on_focus_lost as usize,

1556

267

                        ctx: azul_core::refany::OptionRefAny::None,

1557

267

},

1558

267

},

1559

267

                CoreCallbackData {

1560

267

                    event: EventFilter::Focus(FocusEventFilter::TextInput),

1561

267

                    refany: state_ref.clone(),

1562

267

                    callback: azul_core::callbacks::CoreCallback {

1563

267

                        cb: crate::widgets::text_area::default_on_text_input as usize,

1564

267

                        ctx: azul_core::refany::OptionRefAny::None,

1565

267

},

1566

267

},

1567

267

                CoreCallbackData {

1568

267

                    event: EventFilter::Focus(FocusEventFilter::VirtualKeyDown),

1569

267

                    refany: state_ref,

1570

267

                    callback: azul_core::callbacks::CoreCallback {

1571

267

                        cb: crate::widgets::text_area::default_on_virtual_key_down as usize,

1572

267

                        ctx: azul_core::refany::OptionRefAny::None,

1573

267

},

1574

267

},

1575

1576

267

            .into(),

1577

1578

267

        .with_children(

1579

267

            vec![crate::widgets::widget_p()

1580

267

                .with_ids_and_classes(vec![Class("__azul-native-text-area-label".into())].into())

1581

267

                .with_css_props(CssPropertyWithConditionsVec::from_vec(label_style))

1582

267

                .with_attribute(AttributeType::Placeholder(placeholder.into()))

1583

267

                .with_children(DomVec::from_vec(vec![

1584

267

                    Dom::create_text_do_not_use_without_block_level_wrapper(label_text),

1585

                ]))]

1586

267

            .into(),

1587

1588

267

1589

1590

const SYSTEM_UI_STR: AzString = AzString::from_const_str("system:ui");

1591

const SYSTEM_UI_FAMILIES: &[StyleFontFamily] = &[StyleFontFamily::System(SYSTEM_UI_STR)];

1592

const SYSTEM_UI_FAMILY: StyleFontFamilyVec =

1593

    StyleFontFamilyVec::from_const_slice(SYSTEM_UI_FAMILIES);

1594

1595

/// The dropdown's border, as a palette token rather than a private literal.

1596

///

1597

/// It had no dark counterpart, so a dropdown kept a light-grey outline on a

1598

/// dark surface; the rules that use it now pair it with `DARK_BD`.

1599

const FLAT_BORDER_NORMAL: ColorU = LIGHT_BD;

1600

1601

const FLAT_DROPDOWN_WRAPPER_STYLE: &[CssPropertyWithConditions] = &[

1602

    CssPropertyWithConditions::simple(CssProperty::const_display(LayoutDisplay::InlineFlex)),

1603

    CssPropertyWithConditions::simple(CssProperty::const_flex_direction(LayoutFlexDirection::Row)),

1604

    CssPropertyWithConditions::simple(CssProperty::const_flex_grow(LayoutFlexGrow::const_new(0))),

1605

    CssPropertyWithConditions::simple(CssProperty::const_align_items(LayoutAlignItems::Center)),

1606

    CssPropertyWithConditions::simple(CssProperty::const_cursor(StyleCursor::Pointer)),

1607

    CssPropertyWithConditions::simple(CssProperty::const_font_size(StyleFontSize::const_px(13))),

1608

    CssPropertyWithConditions::simple(CssProperty::const_font_family(SYSTEM_UI_FAMILY)),

1609

    CssPropertyWithConditions::simple(CssProperty::const_padding_left(

1610

        LayoutPaddingLeft::const_px(4),

1611

)),

1612

    CssPropertyWithConditions::simple(CssProperty::const_padding_right(

1613

        LayoutPaddingRight::const_px(4),

1614

)),

1615

    CssPropertyWithConditions::simple(CssProperty::const_padding_top(LayoutPaddingTop::const_px(

1616

2,

1617

    ))),

1618

    CssPropertyWithConditions::simple(CssProperty::const_padding_bottom(

1619

        LayoutPaddingBottom::const_px(2),

1620

)),

1621

    CssPropertyWithConditions::simple(CssProperty::const_border_top_width(

1622

        LayoutBorderTopWidth::const_px(1),

1623

)),

1624

    CssPropertyWithConditions::simple(CssProperty::const_border_bottom_width(

1625

        LayoutBorderBottomWidth::const_px(1),

1626

)),

1627

    CssPropertyWithConditions::simple(CssProperty::const_border_left_width(

1628

        LayoutBorderLeftWidth::const_px(1),

1629

)),

1630

    CssPropertyWithConditions::simple(CssProperty::const_border_right_width(

1631

        LayoutBorderRightWidth::const_px(1),

1632

)),

1633

    CssPropertyWithConditions::simple(CssProperty::const_border_top_style(StyleBorderTopStyle {

1634

        inner: BorderStyle::Solid,

1635

    })),

1636

    CssPropertyWithConditions::simple(CssProperty::const_border_bottom_style(

1637

        StyleBorderBottomStyle {

1638

            inner: BorderStyle::Solid,

1639

},

1640

)),

1641

    CssPropertyWithConditions::simple(CssProperty::const_border_left_style(StyleBorderLeftStyle {

1642

        inner: BorderStyle::Solid,

1643

    })),

1644

    CssPropertyWithConditions::simple(CssProperty::const_border_right_style(

1645

        StyleBorderRightStyle {

1646

            inner: BorderStyle::Solid,

1647

},

1648

)),

1649

    CssPropertyWithConditions::simple(CssProperty::const_background_content(

1650

        StyleBackgroundContentVec::from_const_slice(&[StyleBackgroundContent::Color(LIGHT_BG)]),

1651

)),

1652

    CssPropertyWithConditions::simple(CssProperty::const_text_color(StyleTextColor {

1653

        inner: LIGHT_FG,

1654

    })),

1655

    CssPropertyWithConditions::simple(CssProperty::const_border_top_color(StyleBorderTopColor {

1656

        inner: FLAT_BORDER_NORMAL,

1657

    })),

1658

    CssPropertyWithConditions::simple(CssProperty::const_border_bottom_color(

1659

        StyleBorderBottomColor {

1660

            inner: FLAT_BORDER_NORMAL,

1661

},

1662

)),

1663

    CssPropertyWithConditions::simple(CssProperty::const_border_left_color(StyleBorderLeftColor {

1664

        inner: FLAT_BORDER_NORMAL,

1665

    })),

1666

    CssPropertyWithConditions::simple(CssProperty::const_border_right_color(

1667

        StyleBorderRightColor {

1668

            inner: FLAT_BORDER_NORMAL,

1669

},

1670

)),

1671

    CssPropertyWithConditions::dark_theme(CssProperty::const_background_content(

1672

        StyleBackgroundContentVec::from_const_slice(&[StyleBackgroundContent::Color(DARK_BG)]),

1673

)),

1674

    // The four border colours above are light-mode values; without these the

1675

    // dropdown kept a light-grey outline on a dark surface.

1676

    CssPropertyWithConditions::dark_theme(CssProperty::const_border_top_color(

1677

        StyleBorderTopColor { inner: DARK_BD },

1678

)),

1679

    CssPropertyWithConditions::dark_theme(CssProperty::const_border_bottom_color(

1680

        StyleBorderBottomColor { inner: DARK_BD },

1681

)),

1682

    CssPropertyWithConditions::dark_theme(CssProperty::const_border_left_color(

1683

        StyleBorderLeftColor { inner: DARK_BD },

1684

)),

1685

    CssPropertyWithConditions::dark_theme(CssProperty::const_border_right_color(

1686

        StyleBorderRightColor { inner: DARK_BD },

1687

)),

1688

    CssPropertyWithConditions::dark_theme(CssProperty::const_text_color(StyleTextColor {

1689

        inner: DARK_FG,

1690

    })),

1691

];

1692

1693

const FLAT_DROPDOWN_LABEL_STYLE: &[CssPropertyWithConditions] = &[

1694

    CssPropertyWithConditions::simple(CssProperty::const_flex_grow(LayoutFlexGrow::const_new(1))),

1695

    CssPropertyWithConditions::simple(CssProperty::const_padding_right(

1696

        LayoutPaddingRight::const_px(8),

1697

)),

1698

    CssPropertyWithConditions::simple(CssProperty::const_text_color(StyleTextColor {

1699

        inner: LIGHT_FG,

1700

    })),

1701

    CssPropertyWithConditions::dark_theme(CssProperty::const_text_color(StyleTextColor {

1702

        inner: DARK_FG,

1703

    })),

1704

];

1705

1706

const FLAT_DROPDOWN_ARROW_STYLE: &[CssPropertyWithConditions] = &[

1707

    CssPropertyWithConditions::simple(CssProperty::const_font_size(StyleFontSize::const_px(18))),

1708

    CssPropertyWithConditions::simple(CssProperty::const_flex_grow(LayoutFlexGrow::const_new(0))),

1709

    CssPropertyWithConditions::simple(CssProperty::const_text_color(StyleTextColor {

1710

        inner: LIGHT_FG,

1711

    })),

1712

    CssPropertyWithConditions::dark_theme(CssProperty::const_text_color(StyleTextColor {

1713

        inner: DARK_FG,

1714

    })),

1715

];

1716

1717

#[must_use]

1718

53

pub fn drop_down(dd: crate::widgets::drop_down::DropDown) -> Dom {

1719

    use azul_core::{

1720

        callbacks::{CoreCallback, CoreCallbackData},

1721

        dom::{

1722

            Dom, DomVec, EventFilter, FocusEventFilter, IdOrClass::Class, IdOrClassVec, TabIndex,

1723

},

1724

        refany::RefAny,

1725

};

1726

    use azul_css::AzString;

1727

1728

53

    let selected_label: Option<AzString> = dd

1729

53

        .choices

1730

53

        .as_ref()

1731

53

        .get(dd.selected)

1732

53

        .map(|o| AzString::from(o.as_str().to_string()));

1733

1734

    const DROPDOWN_CLASS: &[IdOrClass] =

1735

        &[Class(AzString::from_const_str("__azul-native-dropdown"))];

1736

1737

53

    let selected_text = dd

1738

53

        .choices

1739

53

        .as_slice()

1740

53

        .get(dd.selected)

1741

53

        .cloned()

1742

53

        .unwrap_or_else(|| AzString::from_const_str(""));

1743

1744

53

    let refany = RefAny::new(dd);

1745

1746

53

    Dom::create_div()

1747

53

        .with_css_props(CssPropertyWithConditionsVec::from_const_slice(

1748

            FLAT_DROPDOWN_WRAPPER_STYLE,

1749

))

1750

53

        .with_ids_and_classes(IdOrClassVec::from_const_slice(DROPDOWN_CLASS))

1751

53

        .with_tab_index(TabIndex::Auto)

1752

53

        .with_accessibility_info(AccessibilityInfo {

1753

53

            role: AccessibilityRole::ComboBox,

1754

53

            accessibility_value: selected_label.into(),

1755

53

            ..Default::default()

1756

53

})

1757

53

        .with_callbacks(

1758

53

            vec![CoreCallbackData {

1759

53

                event: EventFilter::Focus(FocusEventFilter::FocusReceived),

1760

53

                refany,

1761

53

                callback: CoreCallback {

1762

53

                    cb: crate::widgets::drop_down::on_dropdown_click as usize,

1763

53

                    ctx: azul_core::refany::OptionRefAny::None,

1764

53

},

1765

53

}]

1766

53

            .into(),

1767

1768

53

        .with_children(DomVec::from_vec(vec![

1769

53

            crate::widgets::widget_p()

1770

53

                .with_css_props(CssPropertyWithConditionsVec::from_const_slice(

1771

                    FLAT_DROPDOWN_LABEL_STYLE,

1772

))

1773

53

                .with_children(DomVec::from_vec(vec![

1774

53

                    Dom::create_text_do_not_use_without_block_level_wrapper(selected_text),

1775

                ])),

1776

53

            Dom::create_icon(AzString::from_const_str("arrow_drop_down")).with_css_props(

1777

53

                CssPropertyWithConditionsVec::from_const_slice(FLAT_DROPDOWN_ARROW_STYLE),

1778

),

1779

]))

1780

53

1781

1782

#[must_use]

1783

23

pub fn avatar(a: crate::widgets::avatar::Avatar) -> Dom {

1784

    use azul_core::dom::{Dom, IdOrClassVec};

1785

23

    let size = a.size;

1786

23

    let child = match a.image.into_option() {

1787

8

        Some(image) => Dom::create_image(image)

1788

8

            .with_ids_and_classes(IdOrClassVec::from_const_slice(

1789

8

                crate::widgets::avatar::AVATAR_IMAGE_CLASS,

1790

))

1791

8

            .with_css_props(crate::widgets::avatar::build_image_style(size)),

1792

15

        None => crate::widgets::widget_p_with_text(a.initials).with_ids_and_classes(

1793

15

            IdOrClassVec::from_const_slice(crate::widgets::avatar::AVATAR_INITIALS_CLASS),

1794

),

1795

};

1796

1797

23

    Dom::create_div()

1798

23

        .with_ids_and_classes(IdOrClassVec::from_const_slice(

1799

23

            crate::widgets::avatar::AVATAR_CLASS,

1800

))

1801

23

        .with_css_props(

1802

23

            match a.avatar_style {

1803

                azul_css::dynamic_selector::OptionCssPropertyWithConditionsVec::Some(style) => {

1804

                    style.as_slice().to_vec()

1805

1806

                azul_css::dynamic_selector::OptionCssPropertyWithConditionsVec::None => {

1807

23

                    crate::widgets::avatar::build_avatar_style(size)

1808

23

                        .as_slice()

1809

23

                        .to_vec()

1810

1811

1812

23

            .into(),

1813

1814

23

        .with_children(alloc::vec![child].into())

1815

23

1816

1817

// ---------------------------------------------------------------------------

1818

// INTERACTIVE STATES

1819

// ---------------------------------------------------------------------------

1820

//

1821

// Every hover / pressed / focus rule the flat theme paints lives here, in

1822

// LIGHT+DARK pairs, and the widget files reference these consts instead of

1823

// declaring their own.

1824

//

1825

// The reason is the dark half. A widget file cannot see `DARK_HT` — the palette

1826

// is in this module — so a rule written there could only ever name a light

1827

// colour, and that is exactly how every interactive state in this toolkit came

1828

// to paint its light-mode fill onto a dark surface. Declaring the pair together,

1829

// where both halves are in scope, makes the light-only version unwriteable.

1830

//

1831

// These are `const` rather than builder functions because the widgets that use

1832

// them hold their styles in `static [CssPropertyWithConditions]` slices, and a

1833

// const slice cannot splice a function's return value.

1834

1835

/// Row hover, light mode: the Explorer selection tint (#E5F3FF).

1836

///

1837

/// Deliberately NOT [`LIGHT_HT`]. A list or tree ROW hovers to the selection

1838

/// blue; a control FACE hovers to the neutral grey. They are different surfaces

1839

/// and the two tokens are not interchangeable.

1840

pub const LIGHT_ROW_HOVER: ColorU = ColorU {

1841

    r: 229,

1842

    g: 243,

1843

    b: 255,

1844

    a: 255,

1845

};

1846

1847

/// Row hover, dark mode: the twin of [`LIGHT_ROW_HOVER`].

1848

pub const DARK_ROW_HOVER: ColorU = ColorU {

1849

    r: 42,

1850

    g: 45,

1851

    b: 46,

1852

    a: 255,

1853

};

1854

1855

/// The hover fill for one row of a list, tree or menu — light mode.

1856

///

1857

/// Always use it with [`ROW_HOVER_DARK`]; either alone is the bug this section

1858

/// exists to prevent.

1859

pub const ROW_HOVER: CssPropertyWithConditions = CssPropertyWithConditions::on_hover(

1860

    CssProperty::const_background_content(StyleBackgroundContentVec::from_const_slice(&[

1861

        StyleBackgroundContent::Color(LIGHT_ROW_HOVER),

1862

    ])),

1863

);

1864

1865

/// The dark twin of [`ROW_HOVER`].

1866

pub const ROW_HOVER_DARK: CssPropertyWithConditions = CssPropertyWithConditions::dark_on_hover(

1867

    CssProperty::const_background_content(StyleBackgroundContentVec::from_const_slice(&[

1868

        StyleBackgroundContent::Color(DARK_ROW_HOVER),

1869

    ])),

1870

);

1871

1872

/// The text fields' ring — the border every text field takes on hover and on

1873

/// focus — is `#4286f4`, the value `TextInput`, `TextArea` and `NumberInput`

1874

/// carried before the theme owned their states (the widgets' own

1875

/// `COLOR_4286F4`). It is deliberately NOT [`LIGHT_ACC`]: the accent is the

1876

/// theme's newer blue, and a migration that swaps one light value for another

1877

/// changes what every existing app looks like. The dark twin is [`DARK_ACC`],

1878

/// where the fields had no dark ring at all before.

1879

pub const FIELD_RING: ColorU = ColorU {

1880

    r: 66,

1881

    g: 134,

1882

    b: 244,

1883

    a: 255,

1884

};

1885

1886

/// The focus ring: the focused control's border takes the accent colour.

1887

///

1888

/// One const per edge, because a border colour is four properties and a focus

1889

/// ring that sets only some of them leaves the rest at their resting colour.

1890

/// Each has a dark twin using [`DARK_ACC`] — the accent is the one state colour

1891

/// that genuinely has a per-mode value in both palettes, which is why the plan

1892

/// names it.

1893

pub const FOCUS_BORDER_TOP: CssPropertyWithConditions =

1894

    CssPropertyWithConditions::on_focus(CssProperty::const_border_top_color(StyleBorderTopColor {

1895

        inner: FIELD_RING,

1896

    }));

1897

1898

/// See [`FOCUS_BORDER_TOP`].

1899

pub const FOCUS_BORDER_BOTTOM: CssPropertyWithConditions = CssPropertyWithConditions::on_focus(

1900

    CssProperty::const_border_bottom_color(StyleBorderBottomColor { inner: FIELD_RING }),

1901

);

1902

1903

/// See [`FOCUS_BORDER_TOP`].

1904

pub const FOCUS_BORDER_LEFT: CssPropertyWithConditions = CssPropertyWithConditions::on_focus(

1905

    CssProperty::const_border_left_color(StyleBorderLeftColor { inner: FIELD_RING }),

1906

);

1907

1908

/// See [`FOCUS_BORDER_TOP`].

1909

pub const FOCUS_BORDER_RIGHT: CssPropertyWithConditions = CssPropertyWithConditions::on_focus(

1910

    CssProperty::const_border_right_color(StyleBorderRightColor { inner: FIELD_RING }),

1911

);

1912

1913

/// The dark twin of [`FOCUS_BORDER_TOP`].

1914

pub const FOCUS_BORDER_TOP_DARK: CssPropertyWithConditions =

1915

    CssPropertyWithConditions::dark_on_focus(CssProperty::const_border_top_color(

1916

        StyleBorderTopColor { inner: DARK_ACC },

1917

));

1918

1919

/// The dark twin of [`FOCUS_BORDER_BOTTOM`].

1920

pub const FOCUS_BORDER_BOTTOM_DARK: CssPropertyWithConditions =

1921

    CssPropertyWithConditions::dark_on_focus(CssProperty::const_border_bottom_color(

1922

        StyleBorderBottomColor { inner: DARK_ACC },

1923

));

1924

1925

/// The dark twin of [`FOCUS_BORDER_LEFT`].

1926

pub const FOCUS_BORDER_LEFT_DARK: CssPropertyWithConditions =

1927

    CssPropertyWithConditions::dark_on_focus(CssProperty::const_border_left_color(

1928

        StyleBorderLeftColor { inner: DARK_ACC },

1929

));

1930

1931

/// The dark twin of [`FOCUS_BORDER_RIGHT`].

1932

pub const FOCUS_BORDER_RIGHT_DARK: CssPropertyWithConditions =

1933

    CssPropertyWithConditions::dark_on_focus(CssProperty::const_border_right_color(

1934

        StyleBorderRightColor { inner: DARK_ACC },

1935

));

1936

1937

/// Option-row hover for a drop-down list, light mode (#EAF4FC).

1938

///

1939

/// A shade lighter than [`LIGHT_ROW_HOVER`]: a menu that is already floating

1940

/// over the page needs less contrast than a row inside a field.

1941

pub const LIGHT_OPTION_HOVER: ColorU = ColorU {

1942

    r: 234,

1943

    g: 244,

1944

    b: 252,

1945

    a: 255,

1946

};

1947

1948

/// The hover fill for one row of a drop-down list — light mode. Pair with

1949

/// [`OPTION_HOVER_DARK`].

1950

pub const OPTION_HOVER: CssPropertyWithConditions = CssPropertyWithConditions::on_hover(

1951

    CssProperty::const_background_content(StyleBackgroundContentVec::from_const_slice(&[

1952

        StyleBackgroundContent::Color(LIGHT_OPTION_HOVER),

1953

    ])),

1954

);

1955

1956

/// The dark twin of [`OPTION_HOVER`], reusing the row-hover dark fill: a menu

1957

/// and a list row want the same treatment once the surface is dark.

1958

pub const OPTION_HOVER_DARK: CssPropertyWithConditions = CssPropertyWithConditions::dark_on_hover(

1959

    CssProperty::const_background_content(StyleBackgroundContentVec::from_const_slice(&[

1960

        StyleBackgroundContent::Color(DARK_ROW_HOVER),

1961

    ])),

1962

);

1963

1964

/// A hover fill at a caller-supplied colour, paired with this theme's own dark

1965

/// value.

1966

///

1967

/// For chrome whose LIGHT hover colour arrives from outside this palette — a

1968

/// window-decoration colour the compositor reported, say. It still gets a twin:

1969

/// azul's dark mode is its own CSS condition, not a reflection of the OS theme

1970

/// (an app can force dark while the desktop is light), so a system colour

1971

/// chosen for a light desktop is not automatically right here. The caller's

1972

/// colour is used in light mode and [`DARK_HT`] in dark mode.

1973

///

1974

/// Returns both halves so a caller cannot take one without the other.

1975

#[must_use]

1976

3

pub fn hover_bg_pair(light: ColorU) -> [CssPropertyWithConditions; 2] {

1977

3

1978

3

        CssPropertyWithConditions::on_hover(CssProperty::const_background_content(

1979

3

            StyleBackgroundContentVec::from_vec(alloc::vec![StyleBackgroundContent::Color(light)]),

1980

3

)),

1981

3

        CssPropertyWithConditions::dark_on_hover(CssProperty::const_background_content(

1982

3

            StyleBackgroundContentVec::from_vec(alloc::vec![StyleBackgroundContent::Color(

1983

3

                DARK_HT

1984

3

            )]),

1985

3

)),

1986

3

1987

3

1988

1989

// ---------------------------------------------------------------------------

1990

// INTERACTIVE STATES — text fields

1991

// ---------------------------------------------------------------------------

1992

1993

/// Border colour on hover, one const per edge, light mode.

1994

///

1995

/// A border colour is four properties, so a state that sets only some edges

1996

/// leaves the rest at their resting colour — which is why these travel as a set

1997

/// rather than individually.

1998

pub const HOVER_BORDER_TOP: CssPropertyWithConditions =

1999

    CssPropertyWithConditions::on_hover(CssProperty::const_border_top_color(StyleBorderTopColor {

2000

        inner: FIELD_RING,

2001

    }));

2002

2003

/// See [`HOVER_BORDER_TOP`].

2004

pub const HOVER_BORDER_BOTTOM: CssPropertyWithConditions = CssPropertyWithConditions::on_hover(

2005

    CssProperty::const_border_bottom_color(StyleBorderBottomColor { inner: FIELD_RING }),

2006

);

2007

2008

/// See [`HOVER_BORDER_TOP`].

2009

pub const HOVER_BORDER_LEFT: CssPropertyWithConditions = CssPropertyWithConditions::on_hover(

2010

    CssProperty::const_border_left_color(StyleBorderLeftColor { inner: FIELD_RING }),

2011

);

2012

2013

/// See [`HOVER_BORDER_TOP`].

2014

pub const HOVER_BORDER_RIGHT: CssPropertyWithConditions = CssPropertyWithConditions::on_hover(

2015

    CssProperty::const_border_right_color(StyleBorderRightColor { inner: FIELD_RING }),

2016

);

2017

2018

/// The dark twin of [`HOVER_BORDER_TOP`].

2019

pub const HOVER_BORDER_TOP_DARK: CssPropertyWithConditions =

2020

    CssPropertyWithConditions::dark_on_hover(CssProperty::const_border_top_color(

2021

        StyleBorderTopColor { inner: DARK_ACC },

2022

));

2023

2024

/// The dark twin of [`HOVER_BORDER_BOTTOM`].

2025

pub const HOVER_BORDER_BOTTOM_DARK: CssPropertyWithConditions =

2026

    CssPropertyWithConditions::dark_on_hover(CssProperty::const_border_bottom_color(

2027

        StyleBorderBottomColor { inner: DARK_ACC },

2028

));

2029

2030

/// The dark twin of [`HOVER_BORDER_LEFT`].

2031

pub const HOVER_BORDER_LEFT_DARK: CssPropertyWithConditions =

2032

    CssPropertyWithConditions::dark_on_hover(CssProperty::const_border_left_color(

2033

        StyleBorderLeftColor { inner: DARK_ACC },

2034

));

2035

2036

/// The dark twin of [`HOVER_BORDER_RIGHT`].

2037

pub const HOVER_BORDER_RIGHT_DARK: CssPropertyWithConditions =

2038

    CssPropertyWithConditions::dark_on_hover(CssProperty::const_border_right_color(

2039

        StyleBorderRightColor { inner: DARK_ACC },

2040

));

2041

2042

/// Every border state a text field takes: the accent on hover and on focus, each

2043

/// edge, each with its dark twin.

2044

///

2045

/// One array so a theme function appends the whole set in a line and cannot ship

2046

/// half of it. This is what a widget file used to declare itself, in light mode

2047

/// only — the reason a hovered field kept its light-blue ring on a dark surface.

2048

pub const FIELD_BORDER_STATES: [CssPropertyWithConditions; 16] = [

2049

    HOVER_BORDER_TOP,

2050

    HOVER_BORDER_BOTTOM,

2051

    HOVER_BORDER_LEFT,

2052

    HOVER_BORDER_RIGHT,

2053

    HOVER_BORDER_TOP_DARK,

2054

    HOVER_BORDER_BOTTOM_DARK,

2055

    HOVER_BORDER_LEFT_DARK,

2056

    HOVER_BORDER_RIGHT_DARK,

2057

    FOCUS_BORDER_TOP,

2058

    FOCUS_BORDER_BOTTOM,

2059

    FOCUS_BORDER_LEFT,

2060

    FOCUS_BORDER_RIGHT,

2061

    FOCUS_BORDER_TOP_DARK,

2062

    FOCUS_BORDER_BOTTOM_DARK,

2063

    FOCUS_BORDER_LEFT_DARK,

2064

    FOCUS_BORDER_RIGHT_DARK,

2065

];

2066

2067

/// Every state a button of one semantic type takes: hover fill, pressed fill and

2068

/// focus ring, each with its dark twin.

2069

///

2070

/// The light values come from [`crate::widgets::button::get_button_colors`], so

2071

/// there is still one source of truth for them; the DARK halves are chosen here,

2072

/// because this is the only place the palette is in scope.

2073

///

2074

/// The dark rule differs by type on purpose:

2075

///

2076

/// * `Default` is the neutral grey button, so its surface belongs to the PAGE and its dark states

2077

///   come from the theme ([`DARK_HT`] / [`DARK_PT`]).

2078

/// * Every other type carries its own semantic colour — a Primary button is blue whichever mode the

2079

///   app is in — so the same hover and pressed colours apply in dark mode. A neutral grey hover on

2080

///   a blue button would be wrong, and inventing a second blue would be a design decision this

2081

///   refactor has no business making.

2082

/// * `Link` has no surface at all: it underlines instead, in both modes.

2083

#[must_use]

2084

205

pub fn button_states(

2085

205

    button_type: crate::widgets::button::ButtonType,

2086

205

) -> Vec<CssPropertyWithConditions> {

2087

    use crate::widgets::button::ButtonType;

2088

2089

788

    let bg = |c: ColorU| {

2090

788

        CssProperty::BackgroundContent(

2091

788

            StyleBackgroundContentVec::from_vec(alloc::vec![StyleBackgroundContent::Color(c)])

2092

788

                .into(),

2093

788

2094

788

};

2095

2096

205

    if button_type == ButtonType::Link {

2097

8

        return alloc::vec![

2098

8

            CssPropertyWithConditions::on_hover(CssProperty::TextDecoration(

2099

8

                StyleTextDecoration::Underline.into(),

2100

8

)),

2101

8

            CssPropertyWithConditions::dark_on_hover(CssProperty::TextDecoration(

2102

8

                StyleTextDecoration::Underline.into(),

2103

8

)),

2104

];

2105

197

2106

2107

197

    let (_, bg_hover, bg_active) = crate::widgets::button::get_button_colors(button_type);

2108

197

    let neutral = button_type.surface() == crate::widgets::button::ButtonSurface::Neutral;

2109

197

    let (dark_hover, dark_active) = if neutral {

2110

134

        (DARK_HT, DARK_PT)

2111

    } else {

2112

63

        (bg_hover, bg_active)

2113

};

2114

2115

197

    let mut out = alloc::vec![

2116

197

        CssPropertyWithConditions::on_hover(bg(bg_hover)),

2117

197

        CssPropertyWithConditions::dark_on_hover(bg(dark_hover)),

2118

197

        CssPropertyWithConditions::on_active(bg(bg_active)),

2119

197

        CssPropertyWithConditions::dark_on_active(bg(dark_active)),

2120

];

2121

2122

    // The neutral button is the only one with a visible resting border, so it is

2123

    // the only one whose border reacts to hover.

2124

197

    if neutral {

2125

134

        let light = ColorU::rgb(173, 181, 189);

2126

536

        for (l, d) in [

2127

134

2128

134

                CssProperty::const_border_top_color(StyleBorderTopColor { inner: light }),

2129

134

                CssProperty::const_border_top_color(StyleBorderTopColor { inner: DARK_BD }),

2130

134

),

2131

134

2132

134

                CssProperty::const_border_bottom_color(StyleBorderBottomColor { inner: light }),

2133

134

                CssProperty::const_border_bottom_color(StyleBorderBottomColor { inner: DARK_BD }),

2134

134

),

2135

134

2136

134

                CssProperty::const_border_left_color(StyleBorderLeftColor { inner: light }),

2137

134

                CssProperty::const_border_left_color(StyleBorderLeftColor { inner: DARK_BD }),

2138

134

),

2139

134

2140

134

                CssProperty::const_border_right_color(StyleBorderRightColor { inner: light }),

2141

134

                CssProperty::const_border_right_color(StyleBorderRightColor { inner: DARK_BD }),

2142

134

),

2143

536

] {

2144

536

            out.push(CssPropertyWithConditions::on_hover(l));

2145

536

            out.push(CssPropertyWithConditions::dark_on_hover(d));

2146

536

2147

63

2148

2149

    // The focus ring is the accent in both modes, and the consts already pair it.

2150

197

    out.push(FOCUS_BORDER_TOP);

2151

197

    out.push(FOCUS_BORDER_BOTTOM);

2152

197

    out.push(FOCUS_BORDER_LEFT);

2153

197

    out.push(FOCUS_BORDER_RIGHT);

2154

197

    out.push(FOCUS_BORDER_TOP_DARK);

2155

197

    out.push(FOCUS_BORDER_BOTTOM_DARK);

2156

197

    out.push(FOCUS_BORDER_LEFT_DARK);

2157

197

    out.push(FOCUS_BORDER_RIGHT_DARK);

2158

197

out

2159

205

2160

2161

/// A hover fill with BOTH halves chosen by the caller.

2162

///

2163

/// For widgets that carry their own palette (`RibbonTheme`, `StatusBarTheme`,

2164

/// ...). The rule for picking `dark`: a surface that is its own colour — a blue

2165

/// nav, a coloured button — keeps its light hover colour, because the surface

2166

/// does not change in dark mode either; a page-neutral surface takes this

2167

/// theme's [`DARK_HT`]. See `button_states` for the same rule applied.

2168

#[must_use]

2169

54261

pub fn hover_bg_both(light: ColorU, dark: ColorU) -> [CssPropertyWithConditions; 2] {

2170

108522

    let bg = |c: ColorU| {

2171

108522

        CssProperty::const_background_content(StyleBackgroundContentVec::from_vec(alloc::vec![

2172

108522

            StyleBackgroundContent::Color(c),

2173

]))

2174

108522

};

2175

54261

2176

54261

        CssPropertyWithConditions::on_hover(bg(light)),

2177

54261

        CssPropertyWithConditions::dark_on_hover(bg(dark)),

2178

54261

2179

54261

2180

2181

/// A pressed fill with BOTH halves chosen by the caller — see [`hover_bg_both`].

2182

#[must_use]

2183

12116

pub fn active_bg_both(light: ColorU, dark: ColorU) -> [CssPropertyWithConditions; 2] {

2184

24232

    let bg = |c: ColorU| {

2185

24232

        CssProperty::const_background_content(StyleBackgroundContentVec::from_vec(alloc::vec![

2186

24232

            StyleBackgroundContent::Color(c),

2187

]))

2188

24232

};

2189

12116

2190

12116

        CssPropertyWithConditions::on_active(bg(light)),

2191

12116

        CssPropertyWithConditions::dark_on_active(bg(dark)),

2192

12116

2193

12116

2194

2195

// ===========================================================================

2196

// PHASE 2 — per-widget state sections. Each widget's interactive-state consts

2197

// live between its own pair of markers and nowhere else, so that the

2198

// migrations can proceed in parallel without touching one another's lines.

2199

// ===========================================================================

2200

2201

// == STATES: list_view ==

2202

2203

// ---------------------------------------------------------------------------

2204

// INTERACTIVE STATES — list view

2205

// ---------------------------------------------------------------------------

2206

//

2207

// The sixty hover / pressed / focus rules `list_view.rs` used to declare, as

2208

// forty-five LIGHT+DARK pairs (the row's thirteen hover rules were spelled out

2209

// twice over there). A column header hovers to a bluish-white face with a blue

2210

// underline and presses to a bordered, inset-shadowed face; a row hovers to a

2211

// blue-ringed tint and focuses to a stronger one. The light values are the

2212

// widget's own, unchanged — this is a move, not a restyle. The dark halves are

2213

// chosen here, because this is the only place the palette is in scope.

2214

//

2215

// Every surface the list styles is page-neutral — a white field, a

2216

// white-to-grey header band — so each dark twin comes from the theme rather

2217

// than from a colour invented for the occasion:

2218

//

2219

//   * fills: `DARK_HT` for the hovered header face and `DARK_PT` for the pressed one (a header is a

2220

//     control face); `DARK_ROW_HOVER` for a hovered row, the fill a tree row already takes; and

2221

//     `DARK_GLOW`, the translucent accent, for the focused row, so it stays distinguishable from a

2222

//     merely hovered one the way #B8E0F3 is from #E5F3FB in light mode;

2223

//   * borders: the light blues map onto the accent ramp — `DARK_SOFT`, the muted step, for the

2224

//     hover underline and the hover ring, `DARK_ACC` for the focus ring — and the pressed header's

2225

//     neutral grey-blue border takes `DARK_BD`;

2226

//   * the pressed header's inset shadow shades its face toward the bottom stop, which is what

2227

//     `DARK_PB` is.

2228

//

2229

// Border widths (1px) and styles (solid) do not change with the theme. Their

2230

// dark twins restate the same value: the pairing is the invariant this

2231

// section exists for, and keeping it uniform beats remembering which rules are

2232

// exempt. They are shared between the header and the row, since a 1px solid

2233

// edge is the same rule wherever it lands.

2234

2235

/// Column-header hover underline, light mode (#9ADFFE).

2236

pub const LIGHT_LIST_HEADER_HOVER_LINE: ColorU = ColorU {

2237

    r: 154,

2238

    g: 223,

2239

    b: 254,

2240

    a: 255,

2241

};

2242

2243

/// Column-header hover face, top stop, light mode (#F7FCFE).

2244

///

2245

/// The face is a vertical gradient with a hard step at the midpoint: this

2246

/// colour held to 50%, then [`LIGHT_LIST_HEADER_HOVER_MID`] fading into

2247

/// [`LIGHT_LIST_HEADER_HOVER_BOTTOM`].

2248

pub const LIGHT_LIST_HEADER_HOVER_TOP: ColorU = ColorU {

2249

    r: 247,

2250

    g: 252,

2251

    b: 254,

2252

    a: 255,

2253

};

2254

2255

/// Column-header hover face, just below the midpoint step (#E8F6FE).

2256

pub const LIGHT_LIST_HEADER_HOVER_MID: ColorU = ColorU {

2257

    r: 232,

2258

    g: 246,

2259

    b: 254,

2260

    a: 255,

2261

};

2262

2263

/// Column-header hover face, bottom stop (#CEE7F4).

2264

pub const LIGHT_LIST_HEADER_HOVER_BOTTOM: ColorU = ColorU {

2265

    r: 206,

2266

    g: 231,

2267

    b: 244,

2268

    a: 255,

2269

};

2270

2271

/// Column-header pressed face, light mode (#F9FAFB).

2272

pub const LIGHT_LIST_HEADER_PRESSED: ColorU = ColorU {

2273

    r: 249,

2274

    g: 250,

2275

    b: 251,

2276

    a: 255,

2277

};

2278

2279

/// Column-header pressed border, light mode (#C2CDDB): a neutral grey-blue,

2280

/// not an accent.

2281

pub const LIGHT_LIST_HEADER_PRESSED_BORDER: ColorU = ColorU {

2282

    r: 194,

2283

    g: 205,

2284

    b: 219,

2285

    a: 255,

2286

};

2287

2288

/// Column-header pressed inset shadow, light mode (#CEE7F4) — the hover face's

2289

/// bottom stop, so a pressed header reads as sunk into the hovered one.

2290

pub const LIGHT_LIST_HEADER_PRESSED_SHADOW: ColorU = ColorU {

2291

    r: 206,

2292

    g: 231,

2293

    b: 244,

2294

    a: 255,

2295

};

2296

2297

/// Row hover fill, light mode (#E5F3FB).

2298

///

2299

/// Not [`LIGHT_ROW_HOVER`] (#E5F3FF): the list's tint is four units short in

2300

/// the blue channel. Kept as the widget had it — this is a move, not a restyle

2301

/// — though nothing but the value separates the two, and a later pass may well

2302

/// decide a list row and a tree row should hover alike.

2303

pub const LIGHT_LIST_ROW_HOVER: ColorU = ColorU {

2304

    r: 229,

2305

    g: 243,

2306

    b: 251,

2307

    a: 255,

2308

};

2309

2310

/// Row hover ring, light mode (#65B5DC).

2311

pub const LIGHT_LIST_ROW_HOVER_BORDER: ColorU = ColorU {

2312

    r: 101,

2313

    g: 181,

2314

    b: 220,

2315

    a: 255,

2316

};

2317

2318

/// Focused-row fill, light mode (#B8E0F3): a stronger tint than

2319

/// [`LIGHT_LIST_ROW_HOVER`], so the keyboard cursor row stays distinct from a

2320

/// row the pointer merely passes over.

2321

pub const LIGHT_LIST_ROW_FOCUS: ColorU = ColorU {

2322

    r: 184,

2323

    g: 224,

2324

    b: 243,

2325

    a: 255,

2326

};

2327

2328

/// Focused-row ring, light mode (#26A0DA).

2329

pub const LIGHT_LIST_ROW_FOCUS_BORDER: ColorU = ColorU {

2330

    r: 38,

2331

    g: 160,

2332

    b: 218,

2333

    a: 255,

2334

};

2335

2336

// The edge VALUES every list state shares — a 1px solid border, one const per

2337

// edge and per property — so that each state rule below is a single line.

2338

const LIST_EDGE_TOP_1PX: CssProperty = CssProperty::const_border_top_width(LayoutBorderTopWidth {

2339

    inner: PixelValue::const_px(1),

2340

});

2341

const LIST_EDGE_BOTTOM_1PX: CssProperty =

2342

    CssProperty::const_border_bottom_width(LayoutBorderBottomWidth {

2343

        inner: PixelValue::const_px(1),

2344

});

2345

const LIST_EDGE_LEFT_1PX: CssProperty =

2346

    CssProperty::const_border_left_width(LayoutBorderLeftWidth {

2347

        inner: PixelValue::const_px(1),

2348

});

2349

const LIST_EDGE_RIGHT_1PX: CssProperty =

2350

    CssProperty::const_border_right_width(LayoutBorderRightWidth {

2351

        inner: PixelValue::const_px(1),

2352

});

2353

const LIST_EDGE_TOP_SOLID: CssProperty = CssProperty::const_border_top_style(StyleBorderTopStyle {

2354

    inner: BorderStyle::Solid,

2355

});

2356

const LIST_EDGE_BOTTOM_SOLID: CssProperty =

2357

    CssProperty::const_border_bottom_style(StyleBorderBottomStyle {

2358

        inner: BorderStyle::Solid,

2359

});

2360

const LIST_EDGE_LEFT_SOLID: CssProperty =

2361

    CssProperty::const_border_left_style(StyleBorderLeftStyle {

2362

        inner: BorderStyle::Solid,

2363

});

2364

const LIST_EDGE_RIGHT_SOLID: CssProperty =

2365

    CssProperty::const_border_right_style(StyleBorderRightStyle {

2366

        inner: BorderStyle::Solid,

2367

});

2368

2369

// -- hover: the 1px solid edge ---------------------------------------------

2370

2371

/// A 1px edge on hover, one const per edge and per property: the ring a

2372

/// hovered row draws, and the underline a hovered column header draws (bottom

2373

/// edge only). Each pairs with its `_DARK` twin.

2374

pub const LIST_HOVER_BORDER_TOP_WIDTH: CssPropertyWithConditions =

2375

    CssPropertyWithConditions::on_hover(LIST_EDGE_TOP_1PX);

2376

/// See [`LIST_HOVER_BORDER_TOP_WIDTH`].

2377

pub const LIST_HOVER_BORDER_BOTTOM_WIDTH: CssPropertyWithConditions =

2378

    CssPropertyWithConditions::on_hover(LIST_EDGE_BOTTOM_1PX);

2379

/// See [`LIST_HOVER_BORDER_TOP_WIDTH`].

2380

pub const LIST_HOVER_BORDER_LEFT_WIDTH: CssPropertyWithConditions =

2381

    CssPropertyWithConditions::on_hover(LIST_EDGE_LEFT_1PX);

2382

/// See [`LIST_HOVER_BORDER_TOP_WIDTH`].

2383

pub const LIST_HOVER_BORDER_RIGHT_WIDTH: CssPropertyWithConditions =

2384

    CssPropertyWithConditions::on_hover(LIST_EDGE_RIGHT_1PX);

2385

/// See [`LIST_HOVER_BORDER_TOP_WIDTH`].

2386

pub const LIST_HOVER_BORDER_TOP_STYLE: CssPropertyWithConditions =

2387

    CssPropertyWithConditions::on_hover(LIST_EDGE_TOP_SOLID);

2388

/// See [`LIST_HOVER_BORDER_TOP_WIDTH`].

2389

pub const LIST_HOVER_BORDER_BOTTOM_STYLE: CssPropertyWithConditions =

2390

    CssPropertyWithConditions::on_hover(LIST_EDGE_BOTTOM_SOLID);

2391

/// See [`LIST_HOVER_BORDER_TOP_WIDTH`].

2392

pub const LIST_HOVER_BORDER_LEFT_STYLE: CssPropertyWithConditions =

2393

    CssPropertyWithConditions::on_hover(LIST_EDGE_LEFT_SOLID);

2394

/// See [`LIST_HOVER_BORDER_TOP_WIDTH`].

2395

pub const LIST_HOVER_BORDER_RIGHT_STYLE: CssPropertyWithConditions =

2396

    CssPropertyWithConditions::on_hover(LIST_EDGE_RIGHT_SOLID);

2397

2398

/// The dark twin of [`LIST_HOVER_BORDER_TOP_WIDTH`] — the same 1px, since a

2399

/// border's weight does not change with the theme.

2400

pub const LIST_HOVER_BORDER_TOP_WIDTH_DARK: CssPropertyWithConditions =

2401

    CssPropertyWithConditions::dark_on_hover(LIST_EDGE_TOP_1PX);

2402

/// The dark twin of [`LIST_HOVER_BORDER_BOTTOM_WIDTH`].

2403

pub const LIST_HOVER_BORDER_BOTTOM_WIDTH_DARK: CssPropertyWithConditions =

2404

    CssPropertyWithConditions::dark_on_hover(LIST_EDGE_BOTTOM_1PX);

2405

/// The dark twin of [`LIST_HOVER_BORDER_LEFT_WIDTH`].

2406

pub const LIST_HOVER_BORDER_LEFT_WIDTH_DARK: CssPropertyWithConditions =

2407

    CssPropertyWithConditions::dark_on_hover(LIST_EDGE_LEFT_1PX);

2408

/// The dark twin of [`LIST_HOVER_BORDER_RIGHT_WIDTH`].

2409

pub const LIST_HOVER_BORDER_RIGHT_WIDTH_DARK: CssPropertyWithConditions =

2410

    CssPropertyWithConditions::dark_on_hover(LIST_EDGE_RIGHT_1PX);

2411

/// The dark twin of [`LIST_HOVER_BORDER_TOP_STYLE`].

2412

pub const LIST_HOVER_BORDER_TOP_STYLE_DARK: CssPropertyWithConditions =

2413

    CssPropertyWithConditions::dark_on_hover(LIST_EDGE_TOP_SOLID);

2414

/// The dark twin of [`LIST_HOVER_BORDER_BOTTOM_STYLE`].

2415

pub const LIST_HOVER_BORDER_BOTTOM_STYLE_DARK: CssPropertyWithConditions =

2416

    CssPropertyWithConditions::dark_on_hover(LIST_EDGE_BOTTOM_SOLID);

2417

/// The dark twin of [`LIST_HOVER_BORDER_LEFT_STYLE`].

2418

pub const LIST_HOVER_BORDER_LEFT_STYLE_DARK: CssPropertyWithConditions =

2419

    CssPropertyWithConditions::dark_on_hover(LIST_EDGE_LEFT_SOLID);

2420

/// The dark twin of [`LIST_HOVER_BORDER_RIGHT_STYLE`].

2421

pub const LIST_HOVER_BORDER_RIGHT_STYLE_DARK: CssPropertyWithConditions =

2422

    CssPropertyWithConditions::dark_on_hover(LIST_EDGE_RIGHT_SOLID);

2423

2424

// -- pressed: the 1px solid edge -------------------------------------------

2425

2426

/// A 1px edge while pressed, one const per edge and per property: the border a

2427

/// pressed column header draws all the way round. Each pairs with its `_DARK`

2428

/// twin.

2429

pub const LIST_ACTIVE_BORDER_TOP_WIDTH: CssPropertyWithConditions =

2430

    CssPropertyWithConditions::on_active(LIST_EDGE_TOP_1PX);

2431

/// See [`LIST_ACTIVE_BORDER_TOP_WIDTH`].

2432

pub const LIST_ACTIVE_BORDER_BOTTOM_WIDTH: CssPropertyWithConditions =

2433

    CssPropertyWithConditions::on_active(LIST_EDGE_BOTTOM_1PX);

2434

/// See [`LIST_ACTIVE_BORDER_TOP_WIDTH`].

2435

pub const LIST_ACTIVE_BORDER_LEFT_WIDTH: CssPropertyWithConditions =

2436

    CssPropertyWithConditions::on_active(LIST_EDGE_LEFT_1PX);

2437

/// See [`LIST_ACTIVE_BORDER_TOP_WIDTH`].

2438

pub const LIST_ACTIVE_BORDER_RIGHT_WIDTH: CssPropertyWithConditions =

2439

    CssPropertyWithConditions::on_active(LIST_EDGE_RIGHT_1PX);

2440

/// See [`LIST_ACTIVE_BORDER_TOP_WIDTH`].

2441

pub const LIST_ACTIVE_BORDER_TOP_STYLE: CssPropertyWithConditions =

2442

    CssPropertyWithConditions::on_active(LIST_EDGE_TOP_SOLID);

2443

/// See [`LIST_ACTIVE_BORDER_TOP_WIDTH`].

2444

pub const LIST_ACTIVE_BORDER_BOTTOM_STYLE: CssPropertyWithConditions =

2445

    CssPropertyWithConditions::on_active(LIST_EDGE_BOTTOM_SOLID);

2446

/// See [`LIST_ACTIVE_BORDER_TOP_WIDTH`].

2447

pub const LIST_ACTIVE_BORDER_LEFT_STYLE: CssPropertyWithConditions =

2448

    CssPropertyWithConditions::on_active(LIST_EDGE_LEFT_SOLID);

2449

/// See [`LIST_ACTIVE_BORDER_TOP_WIDTH`].

2450

pub const LIST_ACTIVE_BORDER_RIGHT_STYLE: CssPropertyWithConditions =

2451

    CssPropertyWithConditions::on_active(LIST_EDGE_RIGHT_SOLID);

2452

2453

/// The dark twin of [`LIST_ACTIVE_BORDER_TOP_WIDTH`] — the same 1px, since a

2454

/// border's weight does not change with the theme.

2455

pub const LIST_ACTIVE_BORDER_TOP_WIDTH_DARK: CssPropertyWithConditions =

2456

    CssPropertyWithConditions::dark_on_active(LIST_EDGE_TOP_1PX);

2457

/// The dark twin of [`LIST_ACTIVE_BORDER_BOTTOM_WIDTH`].

2458

pub const LIST_ACTIVE_BORDER_BOTTOM_WIDTH_DARK: CssPropertyWithConditions =

2459

    CssPropertyWithConditions::dark_on_active(LIST_EDGE_BOTTOM_1PX);

2460

/// The dark twin of [`LIST_ACTIVE_BORDER_LEFT_WIDTH`].

2461

pub const LIST_ACTIVE_BORDER_LEFT_WIDTH_DARK: CssPropertyWithConditions =

2462

    CssPropertyWithConditions::dark_on_active(LIST_EDGE_LEFT_1PX);

2463

/// The dark twin of [`LIST_ACTIVE_BORDER_RIGHT_WIDTH`].

2464

pub const LIST_ACTIVE_BORDER_RIGHT_WIDTH_DARK: CssPropertyWithConditions =

2465

    CssPropertyWithConditions::dark_on_active(LIST_EDGE_RIGHT_1PX);

2466

/// The dark twin of [`LIST_ACTIVE_BORDER_TOP_STYLE`].

2467

pub const LIST_ACTIVE_BORDER_TOP_STYLE_DARK: CssPropertyWithConditions =

2468

    CssPropertyWithConditions::dark_on_active(LIST_EDGE_TOP_SOLID);

2469

/// The dark twin of [`LIST_ACTIVE_BORDER_BOTTOM_STYLE`].

2470

pub const LIST_ACTIVE_BORDER_BOTTOM_STYLE_DARK: CssPropertyWithConditions =

2471

    CssPropertyWithConditions::dark_on_active(LIST_EDGE_BOTTOM_SOLID);

2472

/// The dark twin of [`LIST_ACTIVE_BORDER_LEFT_STYLE`].

2473

pub const LIST_ACTIVE_BORDER_LEFT_STYLE_DARK: CssPropertyWithConditions =

2474

    CssPropertyWithConditions::dark_on_active(LIST_EDGE_LEFT_SOLID);

2475

/// The dark twin of [`LIST_ACTIVE_BORDER_RIGHT_STYLE`].

2476

pub const LIST_ACTIVE_BORDER_RIGHT_STYLE_DARK: CssPropertyWithConditions =

2477

    CssPropertyWithConditions::dark_on_active(LIST_EDGE_RIGHT_SOLID);

2478

2479

// -- focus: the 1px solid edge ---------------------------------------------

2480

2481

/// A 1px edge on focus, one const per edge and per property: the ring the

2482

/// focused row draws. Each pairs with its `_DARK` twin.

2483

pub const LIST_FOCUS_BORDER_TOP_WIDTH: CssPropertyWithConditions =

2484

    CssPropertyWithConditions::on_focus(LIST_EDGE_TOP_1PX);

2485

/// See [`LIST_FOCUS_BORDER_TOP_WIDTH`].

2486

pub const LIST_FOCUS_BORDER_BOTTOM_WIDTH: CssPropertyWithConditions =

2487

    CssPropertyWithConditions::on_focus(LIST_EDGE_BOTTOM_1PX);

2488

/// See [`LIST_FOCUS_BORDER_TOP_WIDTH`].

2489

pub const LIST_FOCUS_BORDER_LEFT_WIDTH: CssPropertyWithConditions =

2490

    CssPropertyWithConditions::on_focus(LIST_EDGE_LEFT_1PX);

2491

/// See [`LIST_FOCUS_BORDER_TOP_WIDTH`].

2492

pub const LIST_FOCUS_BORDER_RIGHT_WIDTH: CssPropertyWithConditions =

2493

    CssPropertyWithConditions::on_focus(LIST_EDGE_RIGHT_1PX);

2494

/// See [`LIST_FOCUS_BORDER_TOP_WIDTH`].

2495

pub const LIST_FOCUS_BORDER_TOP_STYLE: CssPropertyWithConditions =

2496

    CssPropertyWithConditions::on_focus(LIST_EDGE_TOP_SOLID);

2497

/// See [`LIST_FOCUS_BORDER_TOP_WIDTH`].

2498

pub const LIST_FOCUS_BORDER_BOTTOM_STYLE: CssPropertyWithConditions =

2499

    CssPropertyWithConditions::on_focus(LIST_EDGE_BOTTOM_SOLID);

2500

/// See [`LIST_FOCUS_BORDER_TOP_WIDTH`].

2501

pub const LIST_FOCUS_BORDER_LEFT_STYLE: CssPropertyWithConditions =

2502

    CssPropertyWithConditions::on_focus(LIST_EDGE_LEFT_SOLID);

2503

/// See [`LIST_FOCUS_BORDER_TOP_WIDTH`].

2504

pub const LIST_FOCUS_BORDER_RIGHT_STYLE: CssPropertyWithConditions =

2505

    CssPropertyWithConditions::on_focus(LIST_EDGE_RIGHT_SOLID);

2506

2507

/// The dark twin of [`LIST_FOCUS_BORDER_TOP_WIDTH`] — the same 1px, since a

2508

/// border's weight does not change with the theme.

2509

pub const LIST_FOCUS_BORDER_TOP_WIDTH_DARK: CssPropertyWithConditions =

2510

    CssPropertyWithConditions::dark_on_focus(LIST_EDGE_TOP_1PX);

2511

/// The dark twin of [`LIST_FOCUS_BORDER_BOTTOM_WIDTH`].

2512

pub const LIST_FOCUS_BORDER_BOTTOM_WIDTH_DARK: CssPropertyWithConditions =

2513

    CssPropertyWithConditions::dark_on_focus(LIST_EDGE_BOTTOM_1PX);

2514

/// The dark twin of [`LIST_FOCUS_BORDER_LEFT_WIDTH`].

2515

pub const LIST_FOCUS_BORDER_LEFT_WIDTH_DARK: CssPropertyWithConditions =

2516

    CssPropertyWithConditions::dark_on_focus(LIST_EDGE_LEFT_1PX);

2517

/// The dark twin of [`LIST_FOCUS_BORDER_RIGHT_WIDTH`].

2518

pub const LIST_FOCUS_BORDER_RIGHT_WIDTH_DARK: CssPropertyWithConditions =

2519

    CssPropertyWithConditions::dark_on_focus(LIST_EDGE_RIGHT_1PX);

2520

/// The dark twin of [`LIST_FOCUS_BORDER_TOP_STYLE`].

2521

pub const LIST_FOCUS_BORDER_TOP_STYLE_DARK: CssPropertyWithConditions =

2522

    CssPropertyWithConditions::dark_on_focus(LIST_EDGE_TOP_SOLID);

2523

/// The dark twin of [`LIST_FOCUS_BORDER_BOTTOM_STYLE`].

2524

pub const LIST_FOCUS_BORDER_BOTTOM_STYLE_DARK: CssPropertyWithConditions =

2525

    CssPropertyWithConditions::dark_on_focus(LIST_EDGE_BOTTOM_SOLID);

2526

/// The dark twin of [`LIST_FOCUS_BORDER_LEFT_STYLE`].

2527

pub const LIST_FOCUS_BORDER_LEFT_STYLE_DARK: CssPropertyWithConditions =

2528

    CssPropertyWithConditions::dark_on_focus(LIST_EDGE_LEFT_SOLID);

2529

/// The dark twin of [`LIST_FOCUS_BORDER_RIGHT_STYLE`].

2530

pub const LIST_FOCUS_BORDER_RIGHT_STYLE_DARK: CssPropertyWithConditions =

2531

    CssPropertyWithConditions::dark_on_focus(LIST_EDGE_RIGHT_SOLID);

2532

2533

// -- the column header ------------------------------------------------------

2534

2535

/// Column-header hover underline — light: [`LIGHT_LIST_HEADER_HOVER_LINE`] on

2536

/// the bottom edge. Pair with [`LIST_HEADER_HOVER_LINE_COLOR_DARK`].

2537

pub const LIST_HEADER_HOVER_LINE_COLOR: CssPropertyWithConditions =

2538

    CssPropertyWithConditions::on_hover(CssProperty::const_border_bottom_color(

2539

        StyleBorderBottomColor {

2540

            inner: LIGHT_LIST_HEADER_HOVER_LINE,

2541

},

2542

));

2543

2544

/// The dark twin of [`LIST_HEADER_HOVER_LINE_COLOR`]: [`DARK_SOFT`], the muted

2545

/// accent. The light value is a pale blue, and the ramp's muted step is the

2546

/// nearest thing the palette has to it.

2547

pub const LIST_HEADER_HOVER_LINE_COLOR_DARK: CssPropertyWithConditions =

2548

    CssPropertyWithConditions::dark_on_hover(CssProperty::const_border_bottom_color(

2549

        StyleBorderBottomColor { inner: DARK_SOFT },

2550

));

2551

2552

// The stops of the hovered column header's face: `LIGHT_LIST_HEADER_HOVER_TOP`

2553

// held to the midpoint, then a hard step to `LIGHT_LIST_HEADER_HOVER_MID`

2554

// fading into `LIGHT_LIST_HEADER_HOVER_BOTTOM`.

2555

const LIST_HEADER_HOVER_STOPS: &[NormalizedLinearColorStop] = &[

2556

    NormalizedLinearColorStop {

2557

        offset: PercentageValue::const_new(0),

2558

        color: ColorOrSystem::color(LIGHT_LIST_HEADER_HOVER_TOP),

2559

},

2560

    NormalizedLinearColorStop {

2561

        offset: PercentageValue::const_new(50),

2562

        color: ColorOrSystem::color(LIGHT_LIST_HEADER_HOVER_TOP),

2563

},

2564

    NormalizedLinearColorStop {

2565

        offset: PercentageValue::const_new(51),

2566

        color: ColorOrSystem::color(LIGHT_LIST_HEADER_HOVER_MID),

2567

},

2568

    NormalizedLinearColorStop {

2569

        offset: PercentageValue::const_new(100),

2570

        color: ColorOrSystem::color(LIGHT_LIST_HEADER_HOVER_BOTTOM),

2571

},

2572

];

2573

2574

// The hovered column header's face: a top-to-bottom gradient over

2575

// `LIST_HEADER_HOVER_STOPS`.

2576

const LIST_HEADER_HOVER_FACE: &[StyleBackgroundContent] =

2577

    &[StyleBackgroundContent::LinearGradient(LinearGradient {

2578

        direction: Direction::FromTo(DirectionCorners {

2579

            dir_from: DirectionCorner::Top,

2580

            dir_to: DirectionCorner::Bottom,

2581

}),

2582

        extend_mode: ExtendMode::Clamp,

2583

        stops: NormalizedLinearColorStopVec::from_const_slice(LIST_HEADER_HOVER_STOPS),

2584

    })];

2585

2586

/// Column-header hover face — light. Pair with [`LIST_HEADER_HOVER_BG_DARK`].

2587

///

2588

/// The white-to-blue-grey gradient built from [`LIGHT_LIST_HEADER_HOVER_TOP`],

2589

/// [`LIGHT_LIST_HEADER_HOVER_MID`] and [`LIGHT_LIST_HEADER_HOVER_BOTTOM`].

2590

pub const LIST_HEADER_HOVER_BG: CssPropertyWithConditions =

2591

    CssPropertyWithConditions::on_hover(CssProperty::const_background_content(

2592

        StyleBackgroundContentVec::from_const_slice(LIST_HEADER_HOVER_FACE),

2593

));

2594

2595

/// The dark twin of [`LIST_HEADER_HOVER_BG`]: [`DARK_HT`], the hovered control

2596

/// face. A flat fill rather than a gradient, because in this theme the two

2597

/// stops of a face are the same colour anyway.

2598

pub const LIST_HEADER_HOVER_BG_DARK: CssPropertyWithConditions =

2599

    CssPropertyWithConditions::dark_on_hover(CssProperty::const_background_content(

2600

        StyleBackgroundContentVec::from_const_slice(&[StyleBackgroundContent::Color(DARK_HT)]),

2601

));

2602

2603

// The inset glow a pressed column header draws inside each edge, light mode: a

2604

// 5px blur of `LIGHT_LIST_HEADER_PRESSED_SHADOW`, no offset, no spread.

2605

const LIST_HEADER_PRESSED_INSET: StyleBoxShadow = StyleBoxShadow {

2606

    offset_x: PixelValueNoPercent {

2607

        inner: PixelValue::const_px(0),

2608

},

2609

    offset_y: PixelValueNoPercent {

2610

        inner: PixelValue::const_px(0),

2611

},

2612

    color: LIGHT_LIST_HEADER_PRESSED_SHADOW,

2613

    blur_radius: PixelValueNoPercent {

2614

        inner: PixelValue::const_px(5),

2615

},

2616

    spread_radius: PixelValueNoPercent {

2617

        inner: PixelValue::const_px(0),

2618

},

2619

    clip_mode: BoxShadowClipMode::Inset,

2620

};

2621

2622

// `LIST_HEADER_PRESSED_INSET` in dark mode: the same glow in `DARK_PB`, the

2623

// pressed face's bottom stop, which is what an inset shadow shades a face

2624

// toward.

2625

const LIST_HEADER_PRESSED_INSET_DARK: StyleBoxShadow = StyleBoxShadow {

2626

    offset_x: PixelValueNoPercent {

2627

        inner: PixelValue::const_px(0),

2628

},

2629

    offset_y: PixelValueNoPercent {

2630

        inner: PixelValue::const_px(0),

2631

},

2632

    color: DARK_PB,

2633

    blur_radius: PixelValueNoPercent {

2634

        inner: PixelValue::const_px(5),

2635

},

2636

    spread_radius: PixelValueNoPercent {

2637

        inner: PixelValue::const_px(0),

2638

},

2639

    clip_mode: BoxShadowClipMode::Inset,

2640

};

2641

2642

/// Column-header pressed inset shadow, bottom edge — light: a 5px inset blur

2643

/// of [`LIGHT_LIST_HEADER_PRESSED_SHADOW`].

2644

///

2645

/// Four edges, one const each, so the glow runs all the way round; pair each

2646

/// with its `_DARK` twin.

2647

pub const LIST_HEADER_ACTIVE_SHADOW_BOTTOM: CssPropertyWithConditions =

2648

    CssPropertyWithConditions::on_active(CssProperty::BoxShadowBottom(StyleBoxShadowValue::Exact(

2649

        BoxOrStatic::Static(&LIST_HEADER_PRESSED_INSET),

2650

    )));

2651

/// See [`LIST_HEADER_ACTIVE_SHADOW_BOTTOM`].

2652

pub const LIST_HEADER_ACTIVE_SHADOW_TOP: CssPropertyWithConditions =

2653

    CssPropertyWithConditions::on_active(CssProperty::BoxShadowTop(StyleBoxShadowValue::Exact(

2654

        BoxOrStatic::Static(&LIST_HEADER_PRESSED_INSET),

2655

    )));

2656

/// See [`LIST_HEADER_ACTIVE_SHADOW_BOTTOM`].

2657

pub const LIST_HEADER_ACTIVE_SHADOW_RIGHT: CssPropertyWithConditions =

2658

    CssPropertyWithConditions::on_active(CssProperty::BoxShadowRight(StyleBoxShadowValue::Exact(

2659

        BoxOrStatic::Static(&LIST_HEADER_PRESSED_INSET),

2660

    )));

2661

/// See [`LIST_HEADER_ACTIVE_SHADOW_BOTTOM`].

2662

pub const LIST_HEADER_ACTIVE_SHADOW_LEFT: CssPropertyWithConditions =

2663

    CssPropertyWithConditions::on_active(CssProperty::BoxShadowLeft(StyleBoxShadowValue::Exact(

2664

        BoxOrStatic::Static(&LIST_HEADER_PRESSED_INSET),

2665

    )));

2666

2667

/// The dark twin of [`LIST_HEADER_ACTIVE_SHADOW_BOTTOM`]: the same glow in

2668

/// [`DARK_PB`], the pressed face's bottom stop — what an inset shadow shades a

2669

/// face toward.

2670

pub const LIST_HEADER_ACTIVE_SHADOW_BOTTOM_DARK: CssPropertyWithConditions =

2671

    CssPropertyWithConditions::dark_on_active(CssProperty::BoxShadowBottom(

2672

        StyleBoxShadowValue::Exact(BoxOrStatic::Static(&LIST_HEADER_PRESSED_INSET_DARK)),

2673

));

2674

/// The dark twin of [`LIST_HEADER_ACTIVE_SHADOW_TOP`].

2675

pub const LIST_HEADER_ACTIVE_SHADOW_TOP_DARK: CssPropertyWithConditions =

2676

    CssPropertyWithConditions::dark_on_active(CssProperty::BoxShadowTop(

2677

        StyleBoxShadowValue::Exact(BoxOrStatic::Static(&LIST_HEADER_PRESSED_INSET_DARK)),

2678

));

2679

/// The dark twin of [`LIST_HEADER_ACTIVE_SHADOW_RIGHT`].

2680

pub const LIST_HEADER_ACTIVE_SHADOW_RIGHT_DARK: CssPropertyWithConditions =

2681

    CssPropertyWithConditions::dark_on_active(CssProperty::BoxShadowRight(

2682

        StyleBoxShadowValue::Exact(BoxOrStatic::Static(&LIST_HEADER_PRESSED_INSET_DARK)),

2683

));

2684

/// The dark twin of [`LIST_HEADER_ACTIVE_SHADOW_LEFT`].

2685

pub const LIST_HEADER_ACTIVE_SHADOW_LEFT_DARK: CssPropertyWithConditions =

2686

    CssPropertyWithConditions::dark_on_active(CssProperty::BoxShadowLeft(

2687

        StyleBoxShadowValue::Exact(BoxOrStatic::Static(&LIST_HEADER_PRESSED_INSET_DARK)),

2688

));

2689

2690

/// Column-header pressed border, bottom edge — light:

2691

/// [`LIGHT_LIST_HEADER_PRESSED_BORDER`]. Four edges; pair each with its `_DARK`

2692

/// twin.

2693

pub const LIST_HEADER_ACTIVE_BORDER_BOTTOM_COLOR: CssPropertyWithConditions =

2694

    CssPropertyWithConditions::on_active(CssProperty::const_border_bottom_color(

2695

        StyleBorderBottomColor {

2696

            inner: LIGHT_LIST_HEADER_PRESSED_BORDER,

2697

},

2698

));

2699

/// See [`LIST_HEADER_ACTIVE_BORDER_BOTTOM_COLOR`].

2700

pub const LIST_HEADER_ACTIVE_BORDER_LEFT_COLOR: CssPropertyWithConditions =

2701

    CssPropertyWithConditions::on_active(CssProperty::const_border_left_color(

2702

        StyleBorderLeftColor {

2703

            inner: LIGHT_LIST_HEADER_PRESSED_BORDER,

2704

},

2705

));

2706

/// See [`LIST_HEADER_ACTIVE_BORDER_BOTTOM_COLOR`].

2707

pub const LIST_HEADER_ACTIVE_BORDER_RIGHT_COLOR: CssPropertyWithConditions =

2708

    CssPropertyWithConditions::on_active(CssProperty::const_border_right_color(

2709

        StyleBorderRightColor {

2710

            inner: LIGHT_LIST_HEADER_PRESSED_BORDER,

2711

},

2712

));

2713

/// See [`LIST_HEADER_ACTIVE_BORDER_BOTTOM_COLOR`].

2714

pub const LIST_HEADER_ACTIVE_BORDER_TOP_COLOR: CssPropertyWithConditions =

2715

    CssPropertyWithConditions::on_active(CssProperty::const_border_top_color(

2716

        StyleBorderTopColor {

2717

            inner: LIGHT_LIST_HEADER_PRESSED_BORDER,

2718

},

2719

));

2720

2721

/// The dark twin of [`LIST_HEADER_ACTIVE_BORDER_BOTTOM_COLOR`]: [`DARK_BD`],

2722

/// the default border — the light value is a neutral grey-blue, not an accent.

2723

pub const LIST_HEADER_ACTIVE_BORDER_BOTTOM_COLOR_DARK: CssPropertyWithConditions =

2724

    CssPropertyWithConditions::dark_on_active(CssProperty::const_border_bottom_color(

2725

        StyleBorderBottomColor { inner: DARK_BD },

2726

));

2727

/// The dark twin of [`LIST_HEADER_ACTIVE_BORDER_LEFT_COLOR`].

2728

pub const LIST_HEADER_ACTIVE_BORDER_LEFT_COLOR_DARK: CssPropertyWithConditions =

2729

    CssPropertyWithConditions::dark_on_active(CssProperty::const_border_left_color(

2730

        StyleBorderLeftColor { inner: DARK_BD },

2731

));

2732

/// The dark twin of [`LIST_HEADER_ACTIVE_BORDER_RIGHT_COLOR`].

2733

pub const LIST_HEADER_ACTIVE_BORDER_RIGHT_COLOR_DARK: CssPropertyWithConditions =

2734

    CssPropertyWithConditions::dark_on_active(CssProperty::const_border_right_color(

2735

        StyleBorderRightColor { inner: DARK_BD },

2736

));

2737

/// The dark twin of [`LIST_HEADER_ACTIVE_BORDER_TOP_COLOR`].

2738

pub const LIST_HEADER_ACTIVE_BORDER_TOP_COLOR_DARK: CssPropertyWithConditions =

2739

    CssPropertyWithConditions::dark_on_active(CssProperty::const_border_top_color(

2740

        StyleBorderTopColor { inner: DARK_BD },

2741

));

2742

2743

/// Column-header pressed face — light: [`LIGHT_LIST_HEADER_PRESSED`]. Pair

2744

/// with [`LIST_HEADER_ACTIVE_BG_DARK`].

2745

pub const LIST_HEADER_ACTIVE_BG: CssPropertyWithConditions = CssPropertyWithConditions::on_active(

2746

    CssProperty::const_background_content(StyleBackgroundContentVec::from_const_slice(&[

2747

        StyleBackgroundContent::Color(LIGHT_LIST_HEADER_PRESSED),

2748

    ])),

2749

);

2750

2751

/// The dark twin of [`LIST_HEADER_ACTIVE_BG`]: [`DARK_PT`], the pressed

2752

/// control face.

2753

pub const LIST_HEADER_ACTIVE_BG_DARK: CssPropertyWithConditions =

2754

    CssPropertyWithConditions::dark_on_active(CssProperty::const_background_content(

2755

        StyleBackgroundContentVec::from_const_slice(&[StyleBackgroundContent::Color(DARK_PT)]),

2756

));

2757

2758

// -- the row ----------------------------------------------------------------

2759

2760

/// Row hover ring, bottom edge — light: [`LIGHT_LIST_ROW_HOVER_BORDER`]. Four

2761

/// edges; pair each with its `_DARK` twin.

2762

pub const LIST_ROW_HOVER_BORDER_BOTTOM_COLOR: CssPropertyWithConditions =

2763

    CssPropertyWithConditions::on_hover(CssProperty::const_border_bottom_color(

2764

        StyleBorderBottomColor {

2765

            inner: LIGHT_LIST_ROW_HOVER_BORDER,

2766

},

2767

));

2768

/// See [`LIST_ROW_HOVER_BORDER_BOTTOM_COLOR`].

2769

pub const LIST_ROW_HOVER_BORDER_LEFT_COLOR: CssPropertyWithConditions =

2770

    CssPropertyWithConditions::on_hover(CssProperty::const_border_left_color(

2771

        StyleBorderLeftColor {

2772

            inner: LIGHT_LIST_ROW_HOVER_BORDER,

2773

},

2774

));

2775

/// See [`LIST_ROW_HOVER_BORDER_BOTTOM_COLOR`].

2776

pub const LIST_ROW_HOVER_BORDER_RIGHT_COLOR: CssPropertyWithConditions =

2777

    CssPropertyWithConditions::on_hover(CssProperty::const_border_right_color(

2778

        StyleBorderRightColor {

2779

            inner: LIGHT_LIST_ROW_HOVER_BORDER,

2780

},

2781

));

2782

/// See [`LIST_ROW_HOVER_BORDER_BOTTOM_COLOR`].

2783

pub const LIST_ROW_HOVER_BORDER_TOP_COLOR: CssPropertyWithConditions =

2784

    CssPropertyWithConditions::on_hover(CssProperty::const_border_top_color(StyleBorderTopColor {

2785

        inner: LIGHT_LIST_ROW_HOVER_BORDER,

2786

    }));

2787

2788

/// The dark twin of [`LIST_ROW_HOVER_BORDER_BOTTOM_COLOR`]: [`DARK_SOFT`], the

2789

/// muted accent — one step below the focus ring's [`DARK_ACC`], as #65B5DC is

2790

/// one step below #26A0DA in light mode.

2791

pub const LIST_ROW_HOVER_BORDER_BOTTOM_COLOR_DARK: CssPropertyWithConditions =

2792

    CssPropertyWithConditions::dark_on_hover(CssProperty::const_border_bottom_color(

2793

        StyleBorderBottomColor { inner: DARK_SOFT },

2794

));

2795

/// The dark twin of [`LIST_ROW_HOVER_BORDER_LEFT_COLOR`].

2796

pub const LIST_ROW_HOVER_BORDER_LEFT_COLOR_DARK: CssPropertyWithConditions =

2797

    CssPropertyWithConditions::dark_on_hover(CssProperty::const_border_left_color(

2798

        StyleBorderLeftColor { inner: DARK_SOFT },

2799

));

2800

/// The dark twin of [`LIST_ROW_HOVER_BORDER_RIGHT_COLOR`].

2801

pub const LIST_ROW_HOVER_BORDER_RIGHT_COLOR_DARK: CssPropertyWithConditions =

2802

    CssPropertyWithConditions::dark_on_hover(CssProperty::const_border_right_color(

2803

        StyleBorderRightColor { inner: DARK_SOFT },

2804

));

2805

/// The dark twin of [`LIST_ROW_HOVER_BORDER_TOP_COLOR`].

2806

pub const LIST_ROW_HOVER_BORDER_TOP_COLOR_DARK: CssPropertyWithConditions =

2807

    CssPropertyWithConditions::dark_on_hover(CssProperty::const_border_top_color(

2808

        StyleBorderTopColor { inner: DARK_SOFT },

2809

));

2810

2811

/// Row hover fill — light: [`LIGHT_LIST_ROW_HOVER`]. Pair with

2812

/// [`LIST_ROW_HOVER_BG_DARK`].

2813

pub const LIST_ROW_HOVER_BG: CssPropertyWithConditions = CssPropertyWithConditions::on_hover(

2814

    CssProperty::const_background_content(StyleBackgroundContentVec::from_const_slice(&[

2815

        StyleBackgroundContent::Color(LIGHT_LIST_ROW_HOVER),

2816

    ])),

2817

);

2818

2819

/// The dark twin of [`LIST_ROW_HOVER_BG`]: [`DARK_ROW_HOVER`], the fill a

2820

/// hovered tree row already takes.

2821

pub const LIST_ROW_HOVER_BG_DARK: CssPropertyWithConditions =

2822

    CssPropertyWithConditions::dark_on_hover(CssProperty::const_background_content(

2823

        StyleBackgroundContentVec::from_const_slice(&[StyleBackgroundContent::Color(

2824

            DARK_ROW_HOVER,

2825

        )]),

2826

));

2827

2828

/// Focused-row ring, bottom edge — light: [`LIGHT_LIST_ROW_FOCUS_BORDER`].

2829

/// Four edges; pair each with its `_DARK` twin.

2830

pub const LIST_ROW_FOCUS_BORDER_BOTTOM_COLOR: CssPropertyWithConditions =

2831

    CssPropertyWithConditions::on_focus(CssProperty::const_border_bottom_color(

2832

        StyleBorderBottomColor {

2833

            inner: LIGHT_LIST_ROW_FOCUS_BORDER,

2834

},

2835

));

2836

/// See [`LIST_ROW_FOCUS_BORDER_BOTTOM_COLOR`].

2837

pub const LIST_ROW_FOCUS_BORDER_LEFT_COLOR: CssPropertyWithConditions =

2838

    CssPropertyWithConditions::on_focus(CssProperty::const_border_left_color(

2839

        StyleBorderLeftColor {

2840

            inner: LIGHT_LIST_ROW_FOCUS_BORDER,

2841

},

2842

));

2843

/// See [`LIST_ROW_FOCUS_BORDER_BOTTOM_COLOR`].

2844

pub const LIST_ROW_FOCUS_BORDER_RIGHT_COLOR: CssPropertyWithConditions =

2845

    CssPropertyWithConditions::on_focus(CssProperty::const_border_right_color(

2846

        StyleBorderRightColor {

2847

            inner: LIGHT_LIST_ROW_FOCUS_BORDER,

2848

},

2849

));

2850

/// See [`LIST_ROW_FOCUS_BORDER_BOTTOM_COLOR`].

2851

pub const LIST_ROW_FOCUS_BORDER_TOP_COLOR: CssPropertyWithConditions =

2852

    CssPropertyWithConditions::on_focus(CssProperty::const_border_top_color(StyleBorderTopColor {

2853

        inner: LIGHT_LIST_ROW_FOCUS_BORDER,

2854

    }));

2855

2856

/// The dark twin of [`LIST_ROW_FOCUS_BORDER_BOTTOM_COLOR`]: [`DARK_ACC`] — a

2857

/// focus ring is the accent, as it is for every other focused control in this

2858

/// theme.

2859

pub const LIST_ROW_FOCUS_BORDER_BOTTOM_COLOR_DARK: CssPropertyWithConditions =

2860

    CssPropertyWithConditions::dark_on_focus(CssProperty::const_border_bottom_color(

2861

        StyleBorderBottomColor { inner: DARK_ACC },

2862

));

2863

/// The dark twin of [`LIST_ROW_FOCUS_BORDER_LEFT_COLOR`].

2864

pub const LIST_ROW_FOCUS_BORDER_LEFT_COLOR_DARK: CssPropertyWithConditions =

2865

    CssPropertyWithConditions::dark_on_focus(CssProperty::const_border_left_color(

2866

        StyleBorderLeftColor { inner: DARK_ACC },

2867

));

2868

/// The dark twin of [`LIST_ROW_FOCUS_BORDER_RIGHT_COLOR`].

2869

pub const LIST_ROW_FOCUS_BORDER_RIGHT_COLOR_DARK: CssPropertyWithConditions =

2870

    CssPropertyWithConditions::dark_on_focus(CssProperty::const_border_right_color(

2871

        StyleBorderRightColor { inner: DARK_ACC },

2872

));

2873

/// The dark twin of [`LIST_ROW_FOCUS_BORDER_TOP_COLOR`].

2874

pub const LIST_ROW_FOCUS_BORDER_TOP_COLOR_DARK: CssPropertyWithConditions =

2875

    CssPropertyWithConditions::dark_on_focus(CssProperty::const_border_top_color(

2876

        StyleBorderTopColor { inner: DARK_ACC },

2877

));

2878

2879

/// Focused-row fill — light: [`LIGHT_LIST_ROW_FOCUS`]. Pair with

2880

/// [`LIST_ROW_FOCUS_BG_DARK`].

2881

pub const LIST_ROW_FOCUS_BG: CssPropertyWithConditions = CssPropertyWithConditions::on_focus(

2882

    CssProperty::const_background_content(StyleBackgroundContentVec::from_const_slice(&[

2883

        StyleBackgroundContent::Color(LIGHT_LIST_ROW_FOCUS),

2884

    ])),

2885

);

2886

2887

/// The dark twin of [`LIST_ROW_FOCUS_BG`]: [`DARK_GLOW`], the translucent

2888

/// accent.

2889

///

2890

/// Over the dark field it tints the row toward the accent the way #B8E0F3 does

2891

/// over white, and stays distinguishable from a hovered row's

2892

/// [`DARK_ROW_HOVER`].

2893

pub const LIST_ROW_FOCUS_BG_DARK: CssPropertyWithConditions =

2894

    CssPropertyWithConditions::dark_on_focus(CssProperty::const_background_content(

2895

        StyleBackgroundContentVec::from_const_slice(&[StyleBackgroundContent::Color(DARK_GLOW)]),

2896

));

2897

2898

// == /STATES: list_view ==

2899

2900

//

2901

//

2902

//

2903

2904

// == STATES: tabs ==

2905

2906

// ---------------------------------------------------------------------------

2907

// INTERACTIVE STATES — tabs

2908

// ---------------------------------------------------------------------------

2909

//

2910

// The hover of an inactive tab, in the Windows-classic idiom `tabs.rs` draws:

2911

//

2912

//     .__azul-native-tabs-tab-not-active:hover {

2913

//         border: 1px solid #7EB4EA;

2914

//         background: linear-gradient(#ECF4FC, #DDEDFC);

2915

//     }

2916

//

2917

// Thirteen declarations once the `border` shorthand is expanded — four widths,

2918

// four styles, four colours — plus the fill, and they are one set. The widths

2919

// and styles are not decoration: a `-noleftborder` / `-norightborder` tab has

2920

// nulled the edge it shares with the active tab, and these are what draw it

2921

// back while the pointer is over the tab, so the hover ring is whole. Take the

2922

// colours without the widths and the two tabs beside the active one hover with

2923

// a side missing.

2924

//

2925

// A width or a style has no per-mode value, so its dark twin repeats it. That

2926

// is deliberate: every rule in this section is a pair, with no exceptions a

2927

// reader would have to know about, and "dark >= light" is the invariant the

2928

// check script holds the themes to.

2929

2930

/// Hover border of an inactive tab, light mode (#7EB4EA).

2931

///

2932

/// The Windows "hot" tab edge: a SOFT accent blue, neither the accent itself

2933

/// nor the neutral #ACACAC the tab rests at. On this palette's accent ramp it

2934

/// is the `SOFT` rung — [`LIGHT_SOFT`] is #6EA8FE — and that is what picks its

2935

/// dark twin.

2936

pub const LIGHT_TAB_HOVER_BORDER: ColorU = ColorU {

2937

    r: 126,

2938

    g: 180,

2939

    b: 234,

2940

    a: 255,

2941

};

2942

2943

/// Hover border of an inactive tab, dark mode: [`DARK_SOFT`], the same rung of

2944

/// the ramp in the other mode.

2945

///

2946

/// Not [`DARK_ACC`], which is the full accent and would ring a hovered tab

2947

/// harder in dark mode than in light; not [`DARK_BD`], which is the neutral

2948

/// border and would lose the tint altogether.

2949

pub const DARK_TAB_HOVER_BORDER: ColorU = DARK_SOFT;

2950

2951

/// Top stop of an inactive tab's hover fill, light mode (#ECF4FC).

2952

pub const LIGHT_TAB_HOVER_TOP: ColorU = ColorU {

2953

    r: 236,

2954

    g: 244,

2955

    b: 252,

2956

    a: 255,

2957

};

2958

2959

/// Bottom stop of an inactive tab's hover fill, light mode (#DDEDFC).

2960

pub const LIGHT_TAB_HOVER_BOTTOM: ColorU = ColorU {

2961

    r: 221,

2962

    g: 237,

2963

    b: 252,

2964

    a: 255,

2965

};

2966

2967

// The light fill is a top-to-bottom gradient, so the dark one is too, and its

2968

// stops are this theme's own hover pair: a tab strip is a page-neutral surface,

2969

// and `HT` -> `HB` is what the plan names for a hovered control face.

2970

const TAB_HOVER_STOPS: &[NormalizedLinearColorStop] = &[

2971

    NormalizedLinearColorStop {

2972

        offset: PercentageValue::const_new(0),

2973

        color: ColorOrSystem::color(LIGHT_TAB_HOVER_TOP),

2974

},

2975

    NormalizedLinearColorStop {

2976

        offset: PercentageValue::const_new(100),

2977

        color: ColorOrSystem::color(LIGHT_TAB_HOVER_BOTTOM),

2978

},

2979

];

2980

2981

const TAB_HOVER_STOPS_DARK: &[NormalizedLinearColorStop] = &[

2982

    NormalizedLinearColorStop {

2983

        offset: PercentageValue::const_new(0),

2984

        color: ColorOrSystem::color(DARK_HT),

2985

},

2986

    NormalizedLinearColorStop {

2987

        offset: PercentageValue::const_new(100),

2988

        color: ColorOrSystem::color(DARK_HB),

2989

},

2990

];

2991

2992

const TAB_HOVER_FILL: &[StyleBackgroundContent] =

2993

    &[StyleBackgroundContent::LinearGradient(LinearGradient {

2994

        direction: Direction::FromTo(DirectionCorners {

2995

            dir_from: DirectionCorner::Top,

2996

            dir_to: DirectionCorner::Bottom,

2997

}),

2998

        extend_mode: ExtendMode::Clamp,

2999

        stops: NormalizedLinearColorStopVec::from_const_slice(TAB_HOVER_STOPS),

3000

    })];

3001

3002

const TAB_HOVER_FILL_DARK: &[StyleBackgroundContent] =

3003

    &[StyleBackgroundContent::LinearGradient(LinearGradient {

3004

        direction: Direction::FromTo(DirectionCorners {

3005

            dir_from: DirectionCorner::Top,

3006

            dir_to: DirectionCorner::Bottom,

3007

}),

3008

        extend_mode: ExtendMode::Clamp,

3009

        stops: NormalizedLinearColorStopVec::from_const_slice(TAB_HOVER_STOPS_DARK),

3010

    })];

3011

3012

/// A hovered inactive tab's border: 1px on every edge — light mode.

3013

///

3014

/// The first of the thirteen rules in [`TAB_HOVER_STATES`]; use the set, not

3015

/// the rule. A border width has no per-mode value, so the dark twin repeats it.

3016

pub const TAB_HOVER_BORDER_BOTTOM_WIDTH: CssPropertyWithConditions =

3017

    CssPropertyWithConditions::on_hover(CssProperty::const_border_bottom_width(

3018

        LayoutBorderBottomWidth {

3019

            inner: PixelValue::const_px(1),

3020

},

3021

));

3022

3023

/// See [`TAB_HOVER_STATES`].

3024

pub const TAB_HOVER_BORDER_LEFT_WIDTH: CssPropertyWithConditions =

3025

    CssPropertyWithConditions::on_hover(CssProperty::const_border_left_width(

3026

        LayoutBorderLeftWidth {

3027

            inner: PixelValue::const_px(1),

3028

},

3029

));

3030

3031

/// See [`TAB_HOVER_STATES`].

3032

pub const TAB_HOVER_BORDER_RIGHT_WIDTH: CssPropertyWithConditions =

3033

    CssPropertyWithConditions::on_hover(CssProperty::const_border_right_width(

3034

        LayoutBorderRightWidth {

3035

            inner: PixelValue::const_px(1),

3036

},

3037

));

3038

3039

/// See [`TAB_HOVER_STATES`].

3040

pub const TAB_HOVER_BORDER_TOP_WIDTH: CssPropertyWithConditions =

3041

    CssPropertyWithConditions::on_hover(CssProperty::const_border_top_width(

3042

        LayoutBorderTopWidth {

3043

            inner: PixelValue::const_px(1),

3044

},

3045

));

3046

3047

/// See [`TAB_HOVER_STATES`].

3048

pub const TAB_HOVER_BORDER_BOTTOM_STYLE: CssPropertyWithConditions =

3049

    CssPropertyWithConditions::on_hover(CssProperty::const_border_bottom_style(

3050

        StyleBorderBottomStyle {

3051

            inner: BorderStyle::Solid,

3052

},

3053

));

3054

3055

/// See [`TAB_HOVER_STATES`].

3056

pub const TAB_HOVER_BORDER_LEFT_STYLE: CssPropertyWithConditions =

3057

    CssPropertyWithConditions::on_hover(CssProperty::const_border_left_style(

3058

        StyleBorderLeftStyle {

3059

            inner: BorderStyle::Solid,

3060

},

3061

));

3062

3063

/// See [`TAB_HOVER_STATES`].

3064

pub const TAB_HOVER_BORDER_RIGHT_STYLE: CssPropertyWithConditions =

3065

    CssPropertyWithConditions::on_hover(CssProperty::const_border_right_style(

3066

        StyleBorderRightStyle {

3067

            inner: BorderStyle::Solid,

3068

},

3069

));

3070

3071

/// See [`TAB_HOVER_STATES`].

3072

pub const TAB_HOVER_BORDER_TOP_STYLE: CssPropertyWithConditions =

3073

    CssPropertyWithConditions::on_hover(CssProperty::const_border_top_style(StyleBorderTopStyle {

3074

        inner: BorderStyle::Solid,

3075

    }));

3076

3077

/// See [`TAB_HOVER_STATES`]. The colour is [`LIGHT_TAB_HOVER_BORDER`].

3078

pub const TAB_HOVER_BORDER_BOTTOM_COLOR: CssPropertyWithConditions =

3079

    CssPropertyWithConditions::on_hover(CssProperty::const_border_bottom_color(

3080

        StyleBorderBottomColor {

3081

            inner: LIGHT_TAB_HOVER_BORDER,

3082

},

3083

));

3084

3085

/// See [`TAB_HOVER_STATES`].

3086

pub const TAB_HOVER_BORDER_LEFT_COLOR: CssPropertyWithConditions =

3087

    CssPropertyWithConditions::on_hover(CssProperty::const_border_left_color(

3088

        StyleBorderLeftColor {

3089

            inner: LIGHT_TAB_HOVER_BORDER,

3090

},

3091

));

3092

3093

/// See [`TAB_HOVER_STATES`].

3094

pub const TAB_HOVER_BORDER_RIGHT_COLOR: CssPropertyWithConditions =

3095

    CssPropertyWithConditions::on_hover(CssProperty::const_border_right_color(

3096

        StyleBorderRightColor {

3097

            inner: LIGHT_TAB_HOVER_BORDER,

3098

},

3099

));

3100

3101

/// See [`TAB_HOVER_STATES`].

3102

pub const TAB_HOVER_BORDER_TOP_COLOR: CssPropertyWithConditions =

3103

    CssPropertyWithConditions::on_hover(CssProperty::const_border_top_color(StyleBorderTopColor {

3104

        inner: LIGHT_TAB_HOVER_BORDER,

3105

    }));

3106

3107

/// A hovered inactive tab's fill — light mode: the [`LIGHT_TAB_HOVER_TOP`] to

3108

/// [`LIGHT_TAB_HOVER_BOTTOM`] gradient. See [`TAB_HOVER_STATES`].

3109

pub const TAB_HOVER_BG: CssPropertyWithConditions =

3110

    CssPropertyWithConditions::on_hover(CssProperty::const_background_content(

3111

        StyleBackgroundContentVec::from_const_slice(TAB_HOVER_FILL),

3112

));

3113

3114

/// The dark twin of [`TAB_HOVER_BORDER_BOTTOM_WIDTH`] — the same width; see

3115

/// the section comment for why a twin exists at all.

3116

pub const TAB_HOVER_BORDER_BOTTOM_WIDTH_DARK: CssPropertyWithConditions =

3117

    CssPropertyWithConditions::dark_on_hover(CssProperty::const_border_bottom_width(

3118

        LayoutBorderBottomWidth {

3119

            inner: PixelValue::const_px(1),

3120

},

3121

));

3122

3123

/// The dark twin of [`TAB_HOVER_BORDER_LEFT_WIDTH`].

3124

pub const TAB_HOVER_BORDER_LEFT_WIDTH_DARK: CssPropertyWithConditions =

3125

    CssPropertyWithConditions::dark_on_hover(CssProperty::const_border_left_width(

3126

        LayoutBorderLeftWidth {

3127

            inner: PixelValue::const_px(1),

3128

},

3129

));

3130

3131

/// The dark twin of [`TAB_HOVER_BORDER_RIGHT_WIDTH`].

3132

pub const TAB_HOVER_BORDER_RIGHT_WIDTH_DARK: CssPropertyWithConditions =

3133

    CssPropertyWithConditions::dark_on_hover(CssProperty::const_border_right_width(

3134

        LayoutBorderRightWidth {

3135

            inner: PixelValue::const_px(1),

3136

},

3137

));

3138

3139

/// The dark twin of [`TAB_HOVER_BORDER_TOP_WIDTH`].

3140

pub const TAB_HOVER_BORDER_TOP_WIDTH_DARK: CssPropertyWithConditions =

3141

    CssPropertyWithConditions::dark_on_hover(CssProperty::const_border_top_width(

3142

        LayoutBorderTopWidth {

3143

            inner: PixelValue::const_px(1),

3144

},

3145

));

3146

3147

/// The dark twin of [`TAB_HOVER_BORDER_BOTTOM_STYLE`].

3148

pub const TAB_HOVER_BORDER_BOTTOM_STYLE_DARK: CssPropertyWithConditions =

3149

    CssPropertyWithConditions::dark_on_hover(CssProperty::const_border_bottom_style(

3150

        StyleBorderBottomStyle {

3151

            inner: BorderStyle::Solid,

3152

},

3153

));

3154

3155

/// The dark twin of [`TAB_HOVER_BORDER_LEFT_STYLE`].

3156

pub const TAB_HOVER_BORDER_LEFT_STYLE_DARK: CssPropertyWithConditions =

3157

    CssPropertyWithConditions::dark_on_hover(CssProperty::const_border_left_style(

3158

        StyleBorderLeftStyle {

3159

            inner: BorderStyle::Solid,

3160

},

3161

));

3162

3163

/// The dark twin of [`TAB_HOVER_BORDER_RIGHT_STYLE`].

3164

pub const TAB_HOVER_BORDER_RIGHT_STYLE_DARK: CssPropertyWithConditions =

3165

    CssPropertyWithConditions::dark_on_hover(CssProperty::const_border_right_style(

3166

        StyleBorderRightStyle {

3167

            inner: BorderStyle::Solid,

3168

},

3169

));

3170

3171

/// The dark twin of [`TAB_HOVER_BORDER_TOP_STYLE`].

3172

pub const TAB_HOVER_BORDER_TOP_STYLE_DARK: CssPropertyWithConditions =

3173

    CssPropertyWithConditions::dark_on_hover(CssProperty::const_border_top_style(

3174

        StyleBorderTopStyle {

3175

            inner: BorderStyle::Solid,

3176

},

3177

));

3178

3179

/// The dark twin of [`TAB_HOVER_BORDER_BOTTOM_COLOR`]: [`DARK_TAB_HOVER_BORDER`].

3180

pub const TAB_HOVER_BORDER_BOTTOM_COLOR_DARK: CssPropertyWithConditions =

3181

    CssPropertyWithConditions::dark_on_hover(CssProperty::const_border_bottom_color(

3182

        StyleBorderBottomColor {

3183

            inner: DARK_TAB_HOVER_BORDER,

3184

},

3185

));

3186

3187

/// The dark twin of [`TAB_HOVER_BORDER_LEFT_COLOR`].

3188

pub const TAB_HOVER_BORDER_LEFT_COLOR_DARK: CssPropertyWithConditions =

3189

    CssPropertyWithConditions::dark_on_hover(CssProperty::const_border_left_color(

3190

        StyleBorderLeftColor {

3191

            inner: DARK_TAB_HOVER_BORDER,

3192

},

3193

));

3194

3195

/// The dark twin of [`TAB_HOVER_BORDER_RIGHT_COLOR`].

3196

pub const TAB_HOVER_BORDER_RIGHT_COLOR_DARK: CssPropertyWithConditions =

3197

    CssPropertyWithConditions::dark_on_hover(CssProperty::const_border_right_color(

3198

        StyleBorderRightColor {

3199

            inner: DARK_TAB_HOVER_BORDER,

3200

},

3201

));

3202

3203

/// The dark twin of [`TAB_HOVER_BORDER_TOP_COLOR`].

3204

pub const TAB_HOVER_BORDER_TOP_COLOR_DARK: CssPropertyWithConditions =

3205

    CssPropertyWithConditions::dark_on_hover(CssProperty::const_border_top_color(

3206

        StyleBorderTopColor {

3207

            inner: DARK_TAB_HOVER_BORDER,

3208

},

3209

));

3210

3211

/// The dark twin of [`TAB_HOVER_BG`]: the [`DARK_HT`] to [`DARK_HB`] gradient.

3212

pub const TAB_HOVER_BG_DARK: CssPropertyWithConditions =

3213

    CssPropertyWithConditions::dark_on_hover(CssProperty::const_background_content(

3214

        StyleBackgroundContentVec::from_const_slice(TAB_HOVER_FILL_DARK),

3215

));

3216

3217

/// Every state an inactive tab takes: the hover ring (four widths, four

3218

/// styles, four colours) and the hover fill, each with its dark twin.

3219

///

3220

/// One array so a theme function can append the whole set in a line and cannot

3221

/// ship half of it. `tabs.rs` holds its styles in const slices, which cannot

3222

/// splice an array, so it names these twenty-six one by one — in this order.

3223

pub const TAB_HOVER_STATES: [CssPropertyWithConditions; 26] = [

3224

    TAB_HOVER_BORDER_BOTTOM_WIDTH,

3225

    TAB_HOVER_BORDER_LEFT_WIDTH,

3226

    TAB_HOVER_BORDER_RIGHT_WIDTH,

3227

    TAB_HOVER_BORDER_TOP_WIDTH,

3228

    TAB_HOVER_BORDER_BOTTOM_STYLE,

3229

    TAB_HOVER_BORDER_LEFT_STYLE,

3230

    TAB_HOVER_BORDER_RIGHT_STYLE,

3231

    TAB_HOVER_BORDER_TOP_STYLE,

3232

    TAB_HOVER_BORDER_BOTTOM_COLOR,

3233

    TAB_HOVER_BORDER_LEFT_COLOR,

3234

    TAB_HOVER_BORDER_RIGHT_COLOR,

3235

    TAB_HOVER_BORDER_TOP_COLOR,

3236

    TAB_HOVER_BG,

3237

    TAB_HOVER_BORDER_BOTTOM_WIDTH_DARK,

3238

    TAB_HOVER_BORDER_LEFT_WIDTH_DARK,

3239

    TAB_HOVER_BORDER_RIGHT_WIDTH_DARK,

3240

    TAB_HOVER_BORDER_TOP_WIDTH_DARK,

3241

    TAB_HOVER_BORDER_BOTTOM_STYLE_DARK,

3242

    TAB_HOVER_BORDER_LEFT_STYLE_DARK,

3243

    TAB_HOVER_BORDER_RIGHT_STYLE_DARK,

3244

    TAB_HOVER_BORDER_TOP_STYLE_DARK,

3245

    TAB_HOVER_BORDER_BOTTOM_COLOR_DARK,

3246

    TAB_HOVER_BORDER_LEFT_COLOR_DARK,

3247

    TAB_HOVER_BORDER_RIGHT_COLOR_DARK,

3248

    TAB_HOVER_BORDER_TOP_COLOR_DARK,

3249

    TAB_HOVER_BG_DARK,

3250

];

3251

3252

// == /STATES: tabs ==

3253

3254

//

3255

//

3256

//

3257

3258

// == STATES: text_input ==

3259

//

3260

// text_input declares no states of its own: it takes `FIELD_BORDER_STATES`

3261

// (the text-fields section above), because its eight rules were the same

3262

// accent ring on hover and on focus that text_area had, and `text_input()`

3263

// appends that array rather than a second copy of it. The one difference the

3264

// widget file used to make — a grey hover ring on Windows only — was a

3265

// platform distinction neither theme draws, so it went with the move.

3266

//

3267

// == /STATES: text_input ==

3268

3269

//

3270

//

3271

//

3272

3273

// == STATES: chrome ==

3274

3275

// ---------------------------------------------------------------------------

3276

// INTERACTIVE STATES — chrome (ribbon, statusbar, quick_access, backstage)

3277

// ---------------------------------------------------------------------------

3278

//

3279

// The four chrome widgets carry their own palettes (`RibbonTheme`,

3280

// `StatusBarTheme`, `QuickAccessTheme`, `BackstageTheme`) whose colours are

3281

// RUNTIME values — an Office preset, or whatever `from_system` read off the

3282

// desktop — so their states cannot be consts. They are builders instead, like

3283

// [`hover_bg_both`] and [`active_bg_both`] above, and every builder returns

3284

// BOTH halves of a rule in one array, so a caller cannot take the light half

3285

// without the dark one.

3286

//

3287

// The dark half is the caller's to choose, and the rule is the one

3288

// `button_states` applies: a surface that is its own colour in both modes (the

3289

// backstage's blue nav column, the ribbon's accent-filled application button,

3290

// the status bar's accent strip) keeps its light state colour, because the

3291

// surface does not change in dark mode either; a page-neutral surface (the

3292

// ribbon chrome, the quick-access band) takes this theme's tokens —

3293

// [`DARK_HT`] / [`DARK_PT`] for the fills, [`DARK_BD`] for a hover border,

3294

// [`DARK_ACC`] for hovered accent text and focus rings.

3295

3296

/// Border colour on hover, all four edges, with BOTH halves chosen by the

3297

/// caller.

3298

///

3299

/// Eight rules, because a border colour is four properties and a hover that

3300

/// sets only some edges leaves the rest at their resting colour. The four dark

3301

/// rules follow the four light ones so that they win in dark mode (inline

3302

/// declarations resolve last-match-wins).

3303

#[must_use]

3304

34017

pub const fn hover_border_both(light: ColorU, dark: ColorU) -> [CssPropertyWithConditions; 8] {

3305

34017

3306

34017

        CssPropertyWithConditions::on_hover(CssProperty::const_border_top_color(

3307

34017

            StyleBorderTopColor { inner: light },

3308

34017

)),

3309

34017

        CssPropertyWithConditions::on_hover(CssProperty::const_border_left_color(

3310

34017

            StyleBorderLeftColor { inner: light },

3311

34017

)),

3312

34017

        CssPropertyWithConditions::on_hover(CssProperty::const_border_right_color(

3313

34017

            StyleBorderRightColor { inner: light },

3314

34017

)),

3315

34017

        CssPropertyWithConditions::on_hover(CssProperty::const_border_bottom_color(

3316

34017

            StyleBorderBottomColor { inner: light },

3317

34017

)),

3318

34017

        CssPropertyWithConditions::dark_on_hover(CssProperty::const_border_top_color(

3319

34017

            StyleBorderTopColor { inner: dark },

3320

34017

)),

3321

34017

        CssPropertyWithConditions::dark_on_hover(CssProperty::const_border_left_color(

3322

34017

            StyleBorderLeftColor { inner: dark },

3323

34017

)),

3324

34017

        CssPropertyWithConditions::dark_on_hover(CssProperty::const_border_right_color(

3325

34017

            StyleBorderRightColor { inner: dark },

3326

34017

)),

3327

34017

        CssPropertyWithConditions::dark_on_hover(CssProperty::const_border_bottom_color(

3328

34017

            StyleBorderBottomColor { inner: dark },

3329

34017

)),

3330

34017

3331

34017

3332

3333

/// Border colour on focus, all four edges, with BOTH halves chosen by the

3334

/// caller: the focus ring of a field whose accent is a runtime colour.

3335

///

3336

/// The const [`FOCUS_BORDER_TOP`] family is the same ring at this theme's own

3337

/// accent; this is for a palette that brings its own. Same shape as

3338

/// [`hover_border_both`], for the same reason.

3339

#[must_use]

3340

4

pub const fn focus_border_both(light: ColorU, dark: ColorU) -> [CssPropertyWithConditions; 8] {

3341

4

3342

4

        CssPropertyWithConditions::on_focus(CssProperty::const_border_top_color(

3343

4

            StyleBorderTopColor { inner: light },

3344

4

)),

3345

4

        CssPropertyWithConditions::on_focus(CssProperty::const_border_left_color(

3346

4

            StyleBorderLeftColor { inner: light },

3347

4

)),

3348

4

        CssPropertyWithConditions::on_focus(CssProperty::const_border_right_color(

3349

4

            StyleBorderRightColor { inner: light },

3350

4

)),

3351

4

        CssPropertyWithConditions::on_focus(CssProperty::const_border_bottom_color(

3352

4

            StyleBorderBottomColor { inner: light },

3353

4

)),

3354

4

        CssPropertyWithConditions::dark_on_focus(CssProperty::const_border_top_color(

3355

4

            StyleBorderTopColor { inner: dark },

3356

4

)),

3357

4

        CssPropertyWithConditions::dark_on_focus(CssProperty::const_border_left_color(

3358

4

            StyleBorderLeftColor { inner: dark },

3359

4

)),

3360

4

        CssPropertyWithConditions::dark_on_focus(CssProperty::const_border_right_color(

3361

4

            StyleBorderRightColor { inner: dark },

3362

4

)),

3363

4

        CssPropertyWithConditions::dark_on_focus(CssProperty::const_border_bottom_color(

3364

4

            StyleBorderBottomColor { inner: dark },

3365

4

)),

3366

4

3367

4

3368

3369

/// Text colour on hover, with BOTH halves chosen by the caller — a tab header

3370

/// that takes the accent when hovered, say. Pass [`DARK_ACC`] as `dark` when

3371

/// the light colour is the palette's accent.

3372

#[must_use]

3373

8237

pub const fn hover_text_color_both(light: ColorU, dark: ColorU) -> [CssPropertyWithConditions; 2] {

3374

8237

3375

8237

        CssPropertyWithConditions::on_hover(CssProperty::const_text_color(StyleTextColor {

3376

8237

            inner: light,

3377

8237

        })),

3378

8237

        CssPropertyWithConditions::dark_on_hover(CssProperty::const_text_color(StyleTextColor {

3379

8237

            inner: dark,

3380

8237

        })),

3381

8237

3382

8237

3383

3384

/// Corner radius on hover, all four corners, paired with an identical dark

3385

/// twin.

3386

///

3387

/// A radius has no colour, so the twin repeats the value. It is emitted anyway

3388

/// so that the invariant this section exists for — every state rule has a dark

3389

/// twin — holds without an exception to remember, the same way `button_states`

3390

/// pairs the link button's underline.

3391

#[must_use]

3392

34

pub const fn hover_radius_pair(radius: PixelValue) -> [CssPropertyWithConditions; 8] {

3393

34

3394

34

        CssPropertyWithConditions::on_hover(CssProperty::const_border_top_left_radius(

3395

34

            StyleBorderTopLeftRadius { inner: radius },

3396

34

)),

3397

34

        CssPropertyWithConditions::on_hover(CssProperty::const_border_top_right_radius(

3398

34

            StyleBorderTopRightRadius { inner: radius },

3399

34

)),

3400

34

        CssPropertyWithConditions::on_hover(CssProperty::const_border_bottom_left_radius(

3401

34

            StyleBorderBottomLeftRadius { inner: radius },

3402

34

)),

3403

34

        CssPropertyWithConditions::on_hover(CssProperty::const_border_bottom_right_radius(

3404

34

            StyleBorderBottomRightRadius { inner: radius },

3405

34

)),

3406

34

        CssPropertyWithConditions::dark_on_hover(CssProperty::const_border_top_left_radius(

3407

34

            StyleBorderTopLeftRadius { inner: radius },

3408

34

)),

3409

34

        CssPropertyWithConditions::dark_on_hover(CssProperty::const_border_top_right_radius(

3410

34

            StyleBorderTopRightRadius { inner: radius },

3411

34

)),

3412

34

        CssPropertyWithConditions::dark_on_hover(CssProperty::const_border_bottom_left_radius(

3413

34

            StyleBorderBottomLeftRadius { inner: radius },

3414

34

)),

3415

34

        CssPropertyWithConditions::dark_on_hover(CssProperty::const_border_bottom_right_radius(

3416

34

            StyleBorderBottomRightRadius { inner: radius },

3417

34

)),

3418

34

3419

34

3420

3421

// == /STATES: chrome ==

3422

3423

//

3424

//

3425

//