Hugging Face's logo

Spaces:
tfrere
/
chromacraft-tokens
Running

App Files Community
tfrere HF Staff commited on
Commit
6d0d7e7
·
verified ·
1 Parent(s): 8d11be6

met le css dans un style.css à part et importe le

Browse files
Files changed (3) hide show
  1. README.md +9 -5
  2. index.html +11 -19
  3. style.css +60 -23
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Chromacraft Tokens
3
- emoji: 📈
4
- colorFrom: indigo
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
 
1
  ---
2
+ title: ChromaCraft Tokens ✨
3
+ colorFrom: pink
4
+ colorTo: red
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
index.html CHANGED
@@ -1,19 +1,11 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Design Tokens Playground</title>
7
+ <link rel="stylesheet" href="https://cdn.tailwindcss.com">
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <link rel="stylesheet" href="style.css">
10
+ </head>
11
+ </html>
 
 
 
 
 
 
 
 
style.css CHANGED
@@ -1,28 +1,65 @@
1
- body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
4
- }
 
 
 
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
- }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
- }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
 
28
  }
 
 
1
+ ```css
2
+ :root {
3
+ /* Neutrals */
4
+ --neutral-600: rgb(107, 114, 128);
5
+ --neutral-400: rgb(185, 185, 185);
6
+ --neutral-300: rgb(228, 228, 228);
7
+ --neutral-200: rgb(245, 245, 245);
8
 
9
+ --default-font-family: 'Source Sans Pro', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 
 
 
10
 
11
+ /* Brand (OKLCH base + derived states) */
12
+ --primary-base: oklch(0.75 0.12 47);
13
+ --primary-color: var(--primary-base);
14
+ --primary-color-hover: oklch(from var(--primary-color) calc(l - 0.05) c h);
15
+ --primary-color-active: oklch(from var(--primary-color) calc(l - 0.10) c h);
16
+ --on-primary: #ffffff;
17
 
18
+ /* Custom Primary Color */
19
+ --primary-custom: #4f46e5;
20
+
21
+ /* Custom Secondary Color */
22
+ --secondary-custom: #10b981;
23
+
24
+ /* Text & Surfaces */
25
+ --page-bg: #ffffff;
26
+ --text-color: rgba(0, 0, 0, .85);
27
+ --transparent-page-contrast: rgba(255, 255, 255, .85);
28
+ --muted-color: rgba(0, 0, 0, .6);
29
+ --border-color: rgba(0, 0, 0, .1);
30
+ --surface-bg: #fafafa;
31
+ --code-bg: #f6f8fa;
32
+
33
+ /* Links */
34
+ --link-underline: var(--primary-color);
35
+ --link-underline-hover: var(--primary-color-hover);
36
+
37
+ /* Spacing scale */
38
+ --spacing-1: 8px;
39
+ --spacing-2: 12px;
40
+ --spacing-3: 16px;
41
+ --spacing-4: 24px;
42
+ --spacing-5: 32px;
43
+ --spacing-6: 40px;
44
+ --spacing-7: 48px;
45
+ --spacing-8: 56px;
46
+ --spacing-9: 64px;
47
+ --spacing-10: 72px;
48
+
49
+ /* Button tokens */
50
+ --button-radius: 6px;
51
+ --button-padding-x: 12px;
52
+ --button-padding-y: 8px;
53
+ --button-font-size: 14px;
54
+ --button-icon-padding: 8px;
55
+ --button-big-padding-x: 16px;
56
+ --button-big-padding-y: 12px;
57
+ --button-big-font-size: 16px;
58
+ --button-big-icon-padding: 12px;
59
 
60
+ /* Table tokens */
61
+ --table-border-radius: 8px;
62
+ --table-header-bg: oklch(from var(--surface-bg) calc(l - 0.02) c h);
63
+ --table-row-odd-bg: oklch(from var(--surface-bg) calc(l - 0.01) c h);
64
  }
65
+ ```