Hugging Face's logo

Spaces:
tfrere
/
markdown-magic-maker
Configuration error

App Files Community
tfrere HF Staff commited on
Commit
d5489dd
·
verified ·
1 Parent(s): d8f167c

/* ============================================================================ */

Browse files

/* Design Tokens */
/* ============================================================================ */
:root {
/* Neutrals */
--neutral-600: rgb(107, 114, 128);
--neutral-400: rgb(185, 185, 185);
--neutral-300: rgb(228, 228, 228);
--neutral-200: rgb(245, 245, 245);

--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";

/* Brand (OKLCH base + derived states) */
--primary-base: oklch(0.75 0.12 47);
--primary-color: var(--primary-base);
--primary-color-hover: oklch(from var(--primary-color) calc(l - 0.05) c h);
--primary-color-active: oklch(from var(--primary-color) calc(l - 0.10) c h);
--on-primary: #ffffff;

/* Text & Surfaces */
--page-bg: #ffffff;
--text-color: rgba(0, 0, 0, .85);
--transparent-page-contrast: rgba(255, 255, 255, .85);
--muted-color: rgba(0, 0, 0, .6);
--border-color: rgba(0, 0, 0, .1);
--surface-bg: #fafafa;
--code-bg: #f6f8fa;

/* Links */
--link-underline: var(--primary-color);
--link-underline-hover: var(--primary-color-hover);

/* Spacing scale */
--spacing-1: 8px;
--spacing-2: 12px;
--spacing-3: 16px;
--spacing-4: 24px;
--spacing-5: 32px;
--spacing-6: 40px;
--spacing-7: 48px;
--spacing-8: 56px;
--spacing-9: 64px;
--spacing-10: 72px;

/* Custom Media aliases compiled by PostCSS */
@custom-media --bp-xxs (max-width: 320px);
@custom-media --bp-xs (max-width: 480px);
@custom-media --bp-sm (max-width: 640px);
@custom-media --bp-md (max-width: 768px);
@custom-media --bp-lg (max-width: 1024px);
@custom-media --bp-xl (max-width: 1280px);
@custom-media --bp-content-collapse (max-width: 1100px);

/* Layout */
--content-padding-x: 16px;
/* default page gutter */
--block-spacing-y: var(--spacing-4);
/* default vertical spacing between block components */

/* Config */
--palette-count: 8;

/* Button tokens */
--button-radius: 6px;
--button-padding-x: 12px;
--button-padding-y: 8px;
--button-font-size: 14px;
--button-icon-padding: 8px;
/* Big button */
--button-big-padding-x: 16px;
--button-big-padding-y: 12px;
--button-big-font-size: 16px;
--button-big-icon-padding: 12px;

/* Table tokens */
--table-border-radius: 8px;
--table-header-bg: oklch(from var(--surface-bg) calc(l - 0.02) c h);
--table-row-odd-bg: oklch(from var(--surface-bg) calc(l - 0.01) c h);

/* Z-index */
--z-base: 0;
--z-content: 1;
--z-elevated: 10;
--z-overlay: 1000;
--z-modal: 1100;
--z-tooltip: 1200;

/* Charts (global) */
--axis-color: var(--muted-color);
--tick-color: var(--text-color);
--grid-color: rgba(0, 0, 0, .08);
}

/* ============================================================================ */
/* Dark Theme Overrides */
/* ============================================================================ */
[data-theme="dark"] {
--page-bg: #0f1115;
--text-color: rgba(255, 255, 255, .9);
--muted-color: rgba(255, 255, 255, .7);
--border-color: rgba(255, 255, 255, .15);
--surface-bg: #12151b;
--code-bg: #12151b;
--transparent-page-contrast: rgba(0, 0, 0, .85);

/* Charts (global) */
--axis-color: var(--muted-color);
--tick-color: var(--muted-color);
--grid-color: rgba(255, 255, 255, .10);

/* Primary (lower L in dark) */
--primary-color-hover: oklch(from var(--primary-color) calc(l - 0.05) c h);
--primary-color-active: oklch(from var(--primary-color) calc(l - 0.10) c h);
--on-primary: #0f1115;

color-scheme: dark;
background: #0f1115;
}

tiens c'est mes design tokens, met ça dans un css connecté aux html

Files changed (2) hide show
  1. design-tokens.css +109 -0
  2. index.html +2 -1
design-tokens.css ADDED
@@ -0,0 +1,109 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ```css
2
+ /* ============================================================================ */
3
+ /* Design Tokens */
4
+ /* ============================================================================ */
5
+ :root {
6
+ /* Neutrals */
7
+ --neutral-600: rgb(107, 114, 128);
8
+ --neutral-400: rgb(185, 185, 185);
9
+ --neutral-300: rgb(228, 228, 228);
10
+ --neutral-200: rgb(245, 245, 245);
11
+
12
+ --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";
13
+
14
+ /* Brand (OKLCH base + derived states) */
15
+ --primary-base: oklch(0.75 0.12 47);
16
+ --primary-color: var(--primary-base);
17
+ --primary-color-hover: oklch(from var(--primary-color) calc(l - 0.05) c h);
18
+ --primary-color-active: oklch(from var(--primary-color) calc(l - 0.10) c h);
19
+ --on-primary: #ffffff;
20
+
21
+ /* Text & Surfaces */
22
+ --page-bg: #ffffff;
23
+ --text-color: rgba(0, 0, 0, .85);
24
+ --transparent-page-contrast: rgba(255, 255, 255, .85);
25
+ --muted-color: rgba(0, 0, 0, .6);
26
+ --border-color: rgba(0, 0, 0, .1);
27
+ --surface-bg: #fafafa;
28
+ --code-bg: #f6f8fa;
29
+
30
+ /* Links */
31
+ --link-underline: var(--primary-color);
32
+ --link-underline-hover: var(--primary-color-hover);
33
+
34
+ /* Spacing scale */
35
+ --spacing-1: 8px;
36
+ --spacing-2: 12px;
37
+ --spacing-3: 16px;
38
+ --spacing-4: 24px;
39
+ --spacing-5: 32px;
40
+ --spacing-6: 40px;
41
+ --spacing-7: 48px;
42
+ --spacing-8: 56px;
43
+ --spacing-9: 64px;
44
+ --spacing-10: 72px;
45
+
46
+ /* Layout */
47
+ --content-padding-x: 16px;
48
+ --block-spacing-y: var(--spacing-4);
49
+
50
+ /* Config */
51
+ --palette-count: 8;
52
+
53
+ /* Button tokens */
54
+ --button-radius: 6px;
55
+ --button-padding-x: 12px;
56
+ --button-padding-y: 8px;
57
+ --button-font-size: 14px;
58
+ --button-icon-padding: 8px;
59
+ /* Big button */
60
+ --button-big-padding-x: 16px;
61
+ --button-big-padding-y: 12px;
62
+ --button-big-font-size: 16px;
63
+ --button-big-icon-padding: 12px;
64
+
65
+ /* Table tokens */
66
+ --table-border-radius: 8px;
67
+ --table-header-bg: oklch(from var(--surface-bg) calc(l - 0.02) c h);
68
+ --table-row-odd-bg: oklch(from var(--surface-bg) calc(l - 0.01) c h);
69
+
70
+ /* Z-index */
71
+ --z-base: 0;
72
+ --z-content: 1;
73
+ --z-elevated: 10;
74
+ --z-overlay: 1000;
75
+ --z-modal: 1100;
76
+ --z-tooltip: 1200;
77
+
78
+ /* Charts (global) */
79
+ --axis-color: var(--muted-color);
80
+ --tick-color: var(--text-color);
81
+ --grid-color: rgba(0, 0, 0, .08);
82
+ }
83
+
84
+ /* ============================================================================ */
85
+ /* Dark Theme Overrides */
86
+ /* ============================================================================ */
87
+ [data-theme="dark"] {
88
+ --page-bg: #0f1115;
89
+ --text-color: rgba(255, 255, 255, .9);
90
+ --muted-color: rgba(255, 255, 255, .7);
91
+ --border-color: rgba(255, 255, 255, .15);
92
+ --surface-bg: #12151b;
93
+ --code-bg: #12151b;
94
+ --transparent-page-contrast: rgba(0, 0, 0, .85);
95
+
96
+ /* Charts (global) */
97
+ --axis-color: var(--muted-color);
98
+ --tick-color: var(--muted-color);
99
+ --grid-color: rgba(255, 255, 255, .10);
100
+
101
+ /* Primary (lower L in dark) */
102
+ --primary-color-hover: oklch(from var(--primary-color) calc(l - 0.05) c h);
103
+ --primary-color-active: oklch(from var(--primary-color) calc(l - 0.10) c h);
104
+ --on-primary: #0f1115;
105
+
106
+ color-scheme: dark;
107
+ background: #0f1115;
108
+ }
109
+ ```
index.html CHANGED
@@ -4,9 +4,10 @@
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>
 
4
  <meta charset="utf-8" />
5
  <meta name="viewport" content="width=device-width" />
6
  <title>My static Space</title>
7
+ <link rel="stylesheet" href="design-tokens.css" />
8
  <link rel="stylesheet" href="style.css" />
9
  </head>
10
+ <body>
11
  <div class="card">
12
  <h1>Welcome to your static Space!</h1>
13
  <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>