@uncinq/design-tokens 1.1.1 → 1.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/css/semantic/color.css +1 -0
  2. package/dist/css/semantic/grid.css +2 -0
  3. package/dist/css/semantic/icon.css +3 -2
  4. package/package.json +1 -1
  5. package/tokens/semantic/color.json +4 -0
  6. package/tokens/semantic/grid.json +12 -2
  7. package/tokens/semantic/icon.json +6 -2
package/dist/css/semantic/color.css CHANGED
@@ -70,6 +70,7 @@
70
70
  --color-text-on-dark: var(--color-white);
71
71
  --color-text-on-info: var(--color-white);
72
72
  --color-text-on-light: var(--color-gray-900);
73
+ --color-text-on-muted: var(--color-gray-900);
73
74
  --color-text-on-primary: var(--color-white);
74
75
  --color-text-on-secondary: var(--color-white);
75
76
  --color-text-on-success: var(--color-white);
package/dist/css/semantic/grid.css CHANGED
@@ -7,6 +7,8 @@
7
7
  :root {
8
8
  --columns: 12;
9
9
  --gap: var(--spacing-md);
10
+ --gap-column: var(--spacing-md);
11
+ --gap-row: var(--spacing-section);
10
12
  --span-full: 1 / -1;
11
13
  --span-half: span calc(var(--columns) / 2);
12
14
  --span-quarter: span calc(var(--columns) / 4);
package/dist/css/semantic/icon.css CHANGED
@@ -10,13 +10,14 @@
10
10
  --icon-arrow-skip: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22 stroke=%22%23000000%22 stroke-width=%221%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><line x1=%222%22 y1=%228%22 x2=%2210%22 y2=%228%22/><polyline points=%226 4 10 8 6 12%22/><line x1=%2214%22 y1=%223%22 x2=%2214%22 y2=%2213%22/></svg>');
11
11
  --icon-chevron: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22 stroke=%22%23000000%22 stroke-width=%221%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><polyline points=%222 5 8 11 14 5%22/></svg>');
12
12
  --icon-close: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22 stroke=%22%23000000%22 stroke-width=%221%22 stroke-linecap=%22round%22><line x1=%223%22 y1=%223%22 x2=%2213%22 y2=%2213%22/><line x1=%2213%22 y1=%223%22 x2=%223%22 y2=%2213%22/></svg>');
13
- --icon-dash: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 height=%2216%22 width=%2214%22 viewBox=%220 0 448 512%22><path d=%22M431 256c0 17.7-14.3 32-32 32H49c-17.7 0-32-14.3-32-32s14.3-32 32-32h350c17.7 0 32 14.3 32 32z%22/></svg>');
13
+ --icon-dash: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22 stroke=%22%23000000%22 stroke-width=%221%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><line x1=%223%22 y1=%228%22 x2=%2213%22 y2=%228%22/></svg>');
14
14
  --icon-external-link: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22 stroke=%22%23000000%22 stroke-width=%221%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M10 2h4v4%22/><path d=%22M6.7 9.3 14 2%22/><path d=%22M12 8.7v4a1.3 1.3 0 0 1-1.3 1.3H3.3a1.3 1.3 0 0 1-1.3-1.3V5.3a1.3 1.3 0 0 1 1.3-1.3h4%22/></svg>');
15
15
  --icon-filter: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22 stroke=%22%23000000%22 stroke-width=%221%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M1.3 3.3h13.4%22/><path d=%22M4 8h8%22/><path d=%22M6 12.7h4%22/></svg>');
16
16
  --icon-menu: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22 stroke=%22%23000000%22 stroke-width=%221%22 stroke-linecap=%22round%22><line x1=%222%22 y1=%224%22 x2=%2214%22 y2=%224%22/><line x1=%222%22 y1=%228%22 x2=%2214%22 y2=%228%22/><line x1=%222%22 y1=%2212%22 x2=%2214%22 y2=%2212%22/></svg>');
17
17
  --icon-plus: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22 stroke=%22%23000000%22 stroke-width=%221%22 stroke-linecap=%22round%22><line x1=%228%22 y1=%223%22 x2=%228%22 y2=%2213%22/><line x1=%223%22 y1=%228%22 x2=%2213%22 y2=%228%22/></svg>');
18
+ --icon-search: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22 stroke=%22%23000000%22 stroke-width=%221%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><circle cx=%227%22 cy=%227%22 r=%225%22/><line x1=%2210.5%22 y1=%2210.5%22 x2=%2214%22 y2=%2214%22/></svg>');
18
19
  --icon-share: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22 stroke=%22%23000000%22 stroke-width=%221%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M8 1.3v8.7%22/><path d=%22m10.7 4-2.7-2.7-2.7 2.7%22/><path d=%22M2.7 8v5.3a1.3 1.3 0 0 0 1.3 1.3h8a1.3 1.3 0 0 0 1.3-1.3v-5.3%22/></svg>');
19
- --icon-tick: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 height=%2216%22 width=%2214%22 viewBox=%220 0 448 512%22><path d=%22M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z%22/></svg>');
20
+ --icon-tick: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22 stroke=%22%23000000%22 stroke-width=%221%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><polyline points=%223 8.5 6.5 12 13 4%22/></svg>');
20
21
  --icon-toc: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22 stroke=%22%23000000%22 stroke-width=%221%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M10.7 3.3H2%22/><path d=%22M10.7 8H2%22/><path d=%22M10.7 12.7H2%22/><path d=%22M14 3.3h.01%22/><path d=%22M14 8h.01%22/><path d=%22M14 12.7h.01%22/></svg>');
21
22
  }
22
23
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uncinq/design-tokens",
3
- "version": "1.1.1",
3
+ "version": "1.1.4",
4
4
  "description": "Framework-agnostic design tokens — JSON DTCG primitive and semantic — CSS custom properties.",
5
5
  "license": "MIT",
6
6
  "repository": {
package/tokens/semantic/color.json CHANGED
@@ -289,6 +289,10 @@
289
289
  "$value": "{color.gray.900}",
290
290
  "$type": "color"
291
291
  },
292
+ "onMuted": {
293
+ "$value": "{color.gray.900}",
294
+ "$type": "color"
295
+ },
292
296
  "onPrimary": {
293
297
  "$value": "{color.white}",
294
298
  "$type": "color"
package/tokens/semantic/grid.json CHANGED
@@ -4,8 +4,18 @@
4
4
  "$type": "number"
5
5
  },
6
6
  "gap": {
7
- "$value": "{spacing.md}",
8
- "$type": "dimension"
7
+ "default": {
8
+ "$value": "{spacing.md}",
9
+ "$type": "dimension"
10
+ },
11
+ "column": {
12
+ "$value": "{spacing.md}",
13
+ "$type": "dimension"
14
+ },
15
+ "row": {
16
+ "$value": "{spacing.section}",
17
+ "$type": "dimension"
18
+ }
9
19
  },
10
20
  "span": {
11
21
  "full": {
package/tokens/semantic/icon.json CHANGED
@@ -21,7 +21,7 @@
21
21
  "$type": "string"
22
22
  },
23
23
  "dash": {
24
- "$value": "url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 height=%2216%22 width=%2214%22 viewBox=%220 0 448 512%22><path d=%22M431 256c0 17.7-14.3 32-32 32H49c-17.7 0-32-14.3-32-32s14.3-32 32-32h350c17.7 0 32 14.3 32 32z%22/></svg>')",
24
+ "$value": "url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22 stroke=%22%23000000%22 stroke-width=%221%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><line x1=%223%22 y1=%228%22 x2=%2213%22 y2=%228%22/></svg>')",
25
25
  "$type": "string"
26
26
  },
27
27
  "externalLink": {
@@ -40,12 +40,16 @@
40
40
  "$value": "url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22 stroke=%22%23000000%22 stroke-width=%221%22 stroke-linecap=%22round%22><line x1=%228%22 y1=%223%22 x2=%228%22 y2=%2213%22/><line x1=%223%22 y1=%228%22 x2=%2213%22 y2=%228%22/></svg>')",
41
41
  "$type": "string"
42
42
  },
43
+ "search": {
44
+ "$value": "url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22 stroke=%22%23000000%22 stroke-width=%221%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><circle cx=%227%22 cy=%227%22 r=%225%22/><line x1=%2210.5%22 y1=%2210.5%22 x2=%2214%22 y2=%2214%22/></svg>')",
45
+ "$type": "string"
46
+ },
43
47
  "share": {
44
48
  "$value": "url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22 stroke=%22%23000000%22 stroke-width=%221%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M8 1.3v8.7%22/><path d=%22m10.7 4-2.7-2.7-2.7 2.7%22/><path d=%22M2.7 8v5.3a1.3 1.3 0 0 0 1.3 1.3h8a1.3 1.3 0 0 0 1.3-1.3v-5.3%22/></svg>')",
45
49
  "$type": "string"
46
50
  },
47
51
  "tick": {
48
- "$value": "url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 height=%2216%22 width=%2214%22 viewBox=%220 0 448 512%22><path d=%22M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z%22/></svg>')",
52
+ "$value": "url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22 stroke=%22%23000000%22 stroke-width=%221%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><polyline points=%223 8.5 6.5 12 13 4%22/></svg>')",
49
53
  "$type": "string"
50
54
  },
51
55
  "toc": {