Hugging Face's logo

Spaces:
ALV1
/
excaildraw-theme-kit
Running

App Files Community
excaildraw-theme-kit
File size: 8,798 Bytes
1f908a7
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Excaildraw Theme Kit</title>

  <!-- Tailwind CSS CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          colors: {
            // "undefined" tokens to avoid hard-coded colors
            primary: {
              50: 'rgb(var(--color-primary) / <alpha-value>)',
              100: 'rgb(var(--color-primary) / <alpha-value>)',
              200: 'rgb(var(--color-primary) / <alpha-value>)',
              300: 'rgb(var(--color-primary) / <alpha-value>)',
              400: 'rgb(var(--color-primary) / <alpha-value>)',
              500: 'rgb(var(--color-primary) / <alpha-value>)',
              600: 'rgb(var(--color-primary) / <alpha-value>)',
              700: 'rgb(var(--color-primary) / <alpha-value>)',
              800: 'rgb(var(--color-primary) / <alpha-value>)',
              900: 'rgb(var(--color-primary) / <alpha-value>)',
              950: 'rgb(var(--color-primary) / <alpha-value>)',
            },
            secondary: {
              50: 'rgb(var(--color-secondary) / <alpha-value>)',
              100: 'rgb(var(--color-secondary) / <alpha-value>)',
              200: 'rgb(var(--color-secondary) / <alpha-value>)',
              300: 'rgb(var(--color-secondary) / <alpha-value>)',
              400: 'rgb(var(--color-secondary) / <alpha-value>)',
              500: 'rgb(var(--color-secondary) / <alpha-value>)',
              600: 'rgb(var(--color-secondary) / <alpha-value>)',
              700: 'rgb(var(--color-secondary) / <alpha-value>)',
              800: 'rgb(var(--color-secondary) / <alpha-value>)',
              900: 'rgb(var(--color-secondary) / <alpha-value>)',
              950: 'rgb(var(--color-secondary) / <alpha-value>)',
            },
            // Background and surface tokens that follow "undefined mode" (light/dark)
            background: 'rgb(var(--bg-1) / <alpha-value>)',
            surface: 'rgb(var(--bg-2) / <alpha-value>)',
            fg: 'rgb(var(--fg-1) / <alpha-value>)',
            muted: 'rgb(var(--fg-2) / <alpha-value>)',
          },
          boxShadow: {
            card: '0 8px 30px rgb(0 0 0 / 0.08)',
          },
          borderRadius: {
            xl: '1rem',
          },
        },
      },
    };
  </script>

  <link rel="stylesheet" href="style.css" />
</head>
<body class="min-h-screen bg-background text-fg antialiased">
  <div class="mx-auto max-w-5xl px-6 py-10">
    <header class="mb-8 flex flex-wrap items-center justify-between gap-4">
      <div class="flex items-center gap-3">
        <div class="h-10 w-10 rounded-xl bg-primary-500 shadow-card"></div>
        <h1 class="text-2xl font-semibold">Excaildraw Theme Kit</h1>
      </div>

      <div class="flex items-center gap-2">
        <label class="sr-only" for="primaryColor">Primary color (RGB, e.g. 59 130 246)</label>
        <input id="primaryColor" type="text" inputmode="numeric" pattern="[0-9 ,.]*"
               placeholder="Primary RGB (e.g. 59 130 246)"
               class="w-56 rounded-lg border border-muted bg-surface px-3 py-2 text-sm text-fg placeholder:text-muted focus:outline-none focus:ring-2 focus:ring-primary-500" />
        <label class="sr-only" for="secondaryColor">Secondary color (RGB, e.g. 236 72 153)</label>
        <input id="secondaryColor" type="text" inputmode="numeric" pattern="[0-9 ,.]*"
               placeholder="Secondary RGB (e.g. 236 72 153)"
               class="w-56 rounded-lg border border-muted bg-surface px-3 py-2 text-sm text-fg placeholder:text-muted focus:outline-none focus:ring-2 focus:ring-primary-500" />
        <button id="applyColorsBtn"
                class="rounded-lg bg-primary-500 px-4 py-2 text-sm font-medium text-white shadow hover:brightness-110 focus:outline-none focus:ring-2 focus:ring-primary-500">
          Apply
        </button>
        <button id="themeToggle"
                class="ml-2 rounded-lg bg-surface px-4 py-2 text-sm font-medium text-fg shadow hover:bg-muted/30 focus:outline-none focus:ring-2 focus:ring-primary-500">
          Toggle Theme
        </button>
      </div>
    </header>

    <section class="grid gap-6 md:grid-cols-2">
      <div class="rounded-xl border border-muted bg-surface p-6 shadow-card">
        <h2 class="mb-4 text-lg font-semibold">Primary Palette</h2>
        <div class="grid grid-cols-5 gap-3">
          <div class="flex flex-col items-center">
            <div class="h-12 w-full rounded-lg bg-primary-50"></div>
            <span class="mt-1 text-xs text-muted">50</span>
          </div>
          <div class="flex flex-col items-center">
            <div class="h-12 w-full rounded-lg bg-primary-200"></div>
            <span class="mt-1 text-xs text-muted">200</span>
          </div>
          <div class="flex flex-col items-center">
            <div class="h-12 w-full rounded-lg bg-primary-400"></div>
            <span class="mt-1 text-xs text-muted">400</span>
          </div>
          <div class="flex flex-col items-center">
            <div class="h-12 w-full rounded-lg bg-primary-600"></div>
            <span class="mt-1 text-xs text-muted">600</span>
          </div>
          <div class="flex flex-col items-center">
            <div class="h-12 w-full rounded-lg bg-primary-800"></div>
            <span class="mt-1 text-xs text-muted">800</span>
          </div>
        </div>
      </div>

      <div class="rounded-xl border border-muted bg-surface p-6 shadow-card">
        <h2 class="mb-4 text-lg font-semibold">Secondary Palette</h2>
        <div class="grid grid-cols-5 gap-3">
          <div class="flex flex-col items-center">
            <div class="h-12 w-full rounded-lg bg-secondary-50"></div>
            <span class="mt-1 text-xs text-muted">50</span>
          </div>
          <div class="flex flex-col items-center">
            <div class="h-12 w-full rounded-lg bg-secondary-200"></div>
            <span class="mt-1 text-xs text-muted">200</span>
          </div>
          <div class="flex flex-col items-center">
            <div class="h-12 w-full rounded-lg bg-secondary-400"></div>
            <span class="mt-1 text-xs text-muted">400</span>
          </div>
          <div class="flex flex-col items-center">
            <div class="h-12 w-full rounded-lg bg-secondary-600"></div>
            <span class="mt-1 text-xs text-muted">600</span>
          </div>
          <div class="flex flex-col items-center">
            <div class="h-12 w-full rounded-lg bg-secondary-800"></div>
            <span class="mt-1 text-xs text-muted">800</span>
          </div>
        </div>
      </div>
    </section>

    <section class="mt-8 rounded-xl border border-muted bg-surface p-6 shadow-card">
      <h2 class="mb-4 text-lg font-semibold">UI Components</h2>
      <div class="flex flex-wrap items-center gap-3">
        <button class="rounded-lg bg-primary-500 px-4 py-2 text-white shadow hover:brightness-110">Primary</button>
        <button class="rounded-lg bg-secondary-500 px-4 py-2 text-white shadow hover:brightness-110">Secondary</button>
        <a class="text-primary-600 hover:underline" href="#">Link</a>
        <input class="w-60 rounded-lg border border-muted bg-surface px-3 py-2 text-sm text-fg placeholder:text-muted focus:outline-none focus:ring-2 focus:ring-primary-500"
               placeholder="Input" />
        <span class="rounded-full bg-primary-500/10 px-3 py-1 text-primary-600">Badge</span>
      </div>
    </section>

    <section class="mt-8 rounded-xl border border-muted bg-surface p-6 shadow-card">
      <h2 class="mb-4 text-lg font-semibold">Backgrounds & Surfaces</h2>
      <div class="grid gap-6 md:grid-cols-3">
        <div class="rounded-lg bg-background p-4 ring-1 ring-muted">
          <p class="text-sm text-muted">background</p>
          <div class="mt-3 h-24 rounded bg-surface p-3 text-sm text-fg">surface inside background</div>
        </div>
        <div class="rounded-lg bg-surface p-4 ring-1 ring-muted">
          <p class="text-sm text-muted">surface</p>
          <div class="mt-3 h-24 rounded bg-background p-3 text-sm text-fg">background inside surface</div>
        </div>
        <div class="rounded-lg bg-surface p-4 ring-1 ring-muted">
          <p class="text-sm text-muted">accent border</p>
          <div class="mt-3 h-24 rounded border border-primary-500/30 bg-background p-3 text-sm text-fg">
            bordered surface
          </div>
        </div>
      </div>
    </section>
  </div>

  <script src="script.js"></script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html>