wonder-blocks/__docs__/css-modules-spike/spike.module.css at e45aa52cc127a3e355b67079a4b3bb4f57f721b8 · Khan/wonder-blocks · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
/*
 * Phase 0 spike — proves the PostCSS pipeline works end-to-end:
 *   - cross-package @import resolved through the workspace
 *   - @apply expands a mixin defined in a sibling package at build time
 *   - CSS Modules hashing yields stable, locally-scoped class names
 *   - declared inside @layer shared so consumer styles can win
 *   - token CSS variables resolve at runtime
 *
 * Phase 3 (WB-2327) additionally exercises the multi-state
 * `--wb-action-inverse` mixin, which expands into nested `:hover` /
 * `:focus-visible` / `:active` rules and reuses `--wb-focus-visible`.
 */
@import "@khanacademy/wonder-blocks-styles/focus-styles.css";
@import "@khanacademy/wonder-blocks-styles/action-styles.css";

.root {
    display: inline-flex;
    align-items: center;
    gap: var(--wb-sizing-size_080);
    padding: var(--wb-sizing-size_080) var(--wb-sizing-size_120);
    border: var(--wb-border-width-thin) solid var(--wb-semanticColor-core-border-neutral-default);
    border-radius: var(--wb-border-radius-radius_040);
    background: var(--wb-semanticColor-core-background-base-default);
    color: var(--wb-semanticColor-core-foreground-neutral-strong);
    font-family: inherit;
    font-size: var(--wb-sizing-size_160);
    cursor: pointer;
}

.root:focus-visible {
    @apply --wb-focus-visible;
}

.pill {
    padding: 0 var(--wb-sizing-size_060);
    border-radius: var(--wb-border-radius-radius_full);
    background: var(--wb-semanticColor-core-background-instructive-subtle);
    color: var(--wb-semanticColor-core-foreground-instructive-strong);
    font-size: var(--wb-sizing-size_120);
}

/* Dark backdrop so the inverse (knockout) control reads correctly. */
.inverseBackdrop {
    display: inline-flex;
    padding: var(--wb-sizing-size_160);
    background: var(--wb-semanticColor-core-background-neutral-strong);
}

/*
 * Inverse control — same layout as `.root`, but the interactive styling
 * comes entirely from the `--wb-action-inverse` mixin. Applying the mixin
 * here injects its nested `:hover` / `:focus-visible` / `:active` rules.
 */
.inverse {
    display: inline-flex;
    align-items: center;
    gap: var(--wb-sizing-size_080);
    padding: var(--wb-sizing-size_080) var(--wb-sizing-size_120);
    border: var(--wb-border-width-thin) solid transparent;
    border-radius: var(--wb-border-radius-radius_040);
    background: transparent;
    font-family: inherit;
    font-size: var(--wb-sizing-size_160);
    cursor: pointer;

    @apply --wb-action-inverse;
}