CSS-Tags/examples/demo-auto-styling.html at main · doeixd/CSS-Tags · 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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Auto-Context Styling Demo</title>
  <link rel="stylesheet" href="../index.css">
  <style>
    body { margin: 0; padding: 2rem; }
    .demo-section { margin: 2rem 0; padding: 1rem; border-radius: 8px; }
    .demo-item { margin: 1rem 0; padding: 1rem; border-radius: 4px; }
    .demo-text { margin: 0.5rem 0; }
  </style>
</head>
<body class="bg-base">
  <h1 class="text-overt">Auto-Context Styling Demo</h1>
  <p class="text">This demo shows how :has() and :where() selectors automatically apply correct text colors and component styles based on surface backgrounds.</p>

  <!-- Base Background -->
  <section class="demo-section bg-base border">
    <h2 class="text-overt">Base Background (.bg-base)</h2>
    <div class="demo-item bg-base">
      <p class="text">Automatic text color on base background</p>
      <p class="text-muted">Muted text automatically styled</p>
      <button class="button">Button on base</button>
      <button class="button-primary">Primary button</button>
    </div>
  </section>

  <!-- Surface Background -->
  <section class="demo-section bg-surface border">
    <h2 class="text-overt">Surface Background (.bg-surface)</h2>
    <div class="demo-item bg-surface">
      <p class="text">Automatic text color on surface background</p>
      <p class="text-muted">Muted text automatically styled</p>
      <button class="button">Button on surface</button>
      <button class="button-primary">Primary button</button>
    </div>
  </section>

  <!-- Surface Muted Background -->
  <section class="demo-section bg-surface-muted border">
    <h2 class="text-overt">Surface Muted Background (.bg-surface-muted)</h2>
    <div class="demo-item bg-surface-muted">
      <p class="text">Automatic text color on surface-muted background</p>
      <p class="text-muted">Muted text automatically styled</p>
      <button class="button">Button on surface-muted</button>
      <button class="button-primary">Primary button</button>
    </div>
  </section>

  <!-- Surface Subtle Background -->
  <section class="demo-section bg-surface-subtle border">
    <h2 class="text-overt">Surface Subtle Background (.bg-surface-subtle)</h2>
    <div class="demo-item bg-surface-subtle">
      <p class="text">Automatic text color on surface-subtle background</p>
      <p class="text-muted">Muted text automatically styled</p>
      <button class="button">Button on surface-subtle</button>
      <button class="button-primary">Primary button</button>
    </div>
  </section>

  <!-- Surface Overt Background -->
  <section class="demo-section bg-surface-overt border">
    <h2 class="text-overt">Surface Overt Background (.bg-surface-overt)</h2>
    <div class="demo-item bg-surface-overt">
      <p class="text">Automatic text color on surface-overt background</p>
      <p class="text-muted">Muted text automatically styled</p>
      <button class="button">Button on surface-overt</button>
      <button class="button-primary">Primary button</button>
    </div>
  </section>

   <!-- Bedrock Background -->
   <section class="demo-section bg-bedrock">
     <h2 class="text-on-bedrock">Bedrock Background (.bg-bedrock)</h2>
     <div class="demo-item bg-bedrock">
       <p class="text-on-bedrock">Automatic text color on bedrock background</p>
       <p class="text-on-bedrock">Muted text automatically styled</p>
       <p class="text-on-bedrock">Subtle text automatically styled</p>
       <p class="text-on-bedrock">Overt text automatically styled</p>
       <button class="button">Button on bedrock</button>
       <button class="button-primary">Primary button</button>
     </div>
   </section>

  <!-- Accent Background -->
  <section class="demo-section bg-accent border">
    <h2 class="text-overt">Accent Background (.bg-accent)</h2>
    <div class="demo-item bg-accent">
      <p class="text-accent">Automatic accent text on accent background</p>
      <p class="text">Regular text on accent background</p>
      <button class="button">Button on accent</button>
      <button class="button-primary">Primary button on accent</button>
    </div>
  </section>

  <!-- Nested Example -->
  <section class="demo-section bg-base border">
    <h2 class="text-overt">Nested Surfaces Example</h2>
    <div class="bg-surface demo-item">
      <h3 class="text-overt">Surface Card</h3>
      <p class="text">Text automatically styled for surface</p>
      <div class="bg-surface-overt demo-item">
        <h4 class="text-overt">Nested Overt Surface</h4>
        <p class="text">Text automatically styled for overt surface</p>
        <button class="button">Button in nested surface</button>
      </div>
    </div>
  </section>

  <!-- Manual Override Example -->
  <section class="demo-section bg-surface border">
    <h2 class="text-overt">Manual Override Example</h2>
    <div class="demo-item bg-surface">
      <p class="text">Automatic styling applied</p>
      <p class="text-on-base">Manually overridden to base text color</p>
      <button class="button" style="background-color: var(--accent); color: var(--accent-on-base);">Manually styled button</button>
    </div>
  </section>
</body>
</html>