Skip to content

Commit fad3371

Browse files
jmfrancoisjmfrancois
authored
chore: sync tokens (#31)
1 parent f25d727 commit fad3371

File tree

14 files changed

+1119
-952
lines changed

14 files changed

+1119
-952
lines changed

‎packages/design-tokens/LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2026 Qlik
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎packages/design-tokens/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Design Tokens
22

3-
This is a repository stores the single source of truth for tokens `/tokens` and the generated output in all the following formats: css, js, json
3+
This is a repository stores the single source of truth for tokens `/tokens` and the generated output in all the following formats: css, js, json.
44

55
---
66

‎packages/design-tokens/generated/tokens/css/sprout-tokens.css‎

Lines changed: 696 additions & 714 deletions
Large diffs are not rendered by default.

‎packages/design-tokens/generated/tokens/csv/sprout-tokens.csv‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ sprout-common-background-color-default, "#ffffff", First level surface color.
66
sprout-common-background-color-weak, "#fafafa", Second level surface color.
77
sprout-common-background-color-moderate, "#f2f2f2", Third level surface color.
88
sprout-common-background-color-strong, "#e6e6e6", Fourth level surface color.
9+
sprout-common-background-color-floating, "rgb(100% 100% 100%)", Floating surface color for popovers and raised surfaces. Inherits and lightens default background color.
910
sprout-common-background-color-enabled, "#ffffff", Default background color for enabled interactive elements
1011
sprout-common-background-color-hover, "rgb(0% 0% 0% / 0.03)", Hover background color for interactive elements
1112
sprout-common-background-color-pressed, "rgb(0% 0% 0% / 0.05)", Pressed background color for interactive elements

‎packages/design-tokens/generated/tokens/js/sprout-tokens.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@ export const tokens: {
7676
common_background_color_default: string;
7777
common_background_color_disabled: string;
7878
common_background_color_enabled: string;
79+
common_background_color_floating: string;
7980
common_background_color_hover: string;
8081
common_background_color_moderate: string;
8182
common_background_color_pressed: string;

‎packages/design-tokens/generated/tokens/js/sprout-tokens.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -295,6 +295,10 @@ export const tokens = {
295295
* Type: color
296296
*/
297297
common_background_color_enabled: "var(--sprout-common-background-color-enabled, #ffffff)",
298+
/** Floating surface color for popovers and raised surfaces. Inherits and lightens default background color.
299+
* Type: color
300+
*/
301+
common_background_color_floating: "var(--sprout-common-background-color-floating, rgb(100% 100% 100%))",
298302
/** Hover background color for interactive elements
299303
* Type: color
300304
*/

‎packages/design-tokens/generated/tokens/json/sprout-tokens.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,11 @@
3434
"$type": "color",
3535
"$description": "Fourth level surface color."
3636
},
37+
"--sprout-common-background-color-floating": {
38+
"$value": "rgb(100% 100% 100%)",
39+
"$type": "color",
40+
"$description": "Floating surface color for popovers and raised surfaces. Inherits and lightens default background color."
41+
},
3742
"--sprout-common-background-color-enabled": {
3843
"$value": "#ffffff",
3944
"$type": "color",

‎packages/design-tokens/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@qlik/design-tokens",
3-
"version": "0.16.29",
3+
"version": "1.0.0",
44
"description": "Design tokens for Qlik UI's",
55
"license": "MIT",
66
"type": "module",
@@ -23,7 +23,7 @@
2323
"@qlik/sprout-cli": "workspace:*",
2424
"tsup": "^8.5.1",
2525
"typescript": "^5.9.3",
26-
"vitest": "^4.0.16"
26+
"vitest": "^4.0.18"
2727
},
2828
"engines": {
2929
"node": ">=20"

‎packages/design-tokens/sprout-token-config.json‎

Lines changed: 36 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -21,133 +21,62 @@
2121
},
2222
"theme": [
2323
{
24-
"id": "appearance-qlik-light",
25-
"name": "qlik-light",
26-
"group": "appearance",
24+
"id": "core",
25+
"name": "core",
26+
"group": "core",
2727
"selectedTokenSets": {
28-
"palette/core": "source",
29-
"qlik/appearance/core": "source",
30-
"qlik/appearance/qlik-light": "source",
31-
"semantic/appearance": "enabled",
32-
"theming/appearance": "source"
28+
"semantic/core": "enabled"
3329
}
3430
},
3531
{
36-
"id": "appearance-qlik-dark",
37-
"name": "qlik-dark",
38-
"group": "appearance",
32+
"id": "theme-qlik-light",
33+
"name": "qlik-light",
34+
"group": "theme",
3935
"selectedTokenSets": {
4036
"palette/core": "source",
4137
"qlik/appearance/core": "source",
42-
"qlik/appearance/qlik-dark": "source",
43-
"semantic/appearance": "enabled",
44-
"theming/appearance": "source"
45-
}
46-
},
47-
{
48-
"name": "mid-sized",
49-
"selectedTokenSets": {
50-
"semantic/sizing": "enabled",
51-
"theming/sizing": "source"
52-
},
53-
"group": "sizing"
54-
},
55-
{
56-
"name": "dense",
57-
"selectedTokenSets": {
58-
"palette/core": "source",
59-
"qlik/density/dense": "source",
60-
"semantic/density": "enabled",
61-
"theming/density": "source"
62-
},
63-
"group": "density"
64-
},
65-
{
66-
"name": "comfortable",
67-
"selectedTokenSets": {
68-
"palette/core": "source",
69-
"qlik/density/comfortable": "source",
70-
"theming/density": "source",
71-
"semantic/density": "enabled"
72-
},
73-
"group": "density"
74-
},
75-
{
76-
"name": "spacious",
77-
"selectedTokenSets": {
78-
"palette/core": "source",
79-
"qlik/density/spacious": "source",
80-
"theming/density": "source",
81-
"semantic/density": "enabled"
82-
},
83-
"group": "density"
84-
},
85-
{
86-
"name": "sharp",
87-
"selectedTokenSets": {
88-
"palette/core": "source",
38+
"qlik/appearance/qlik-light": "source",
8939
"qlik/density/comfortable": "source",
40+
"qlik/roundness/soft": "source",
41+
"qlik/typography/core": "source",
42+
"qlik/typography/source-sans": "source",
43+
"theming/appearance": "source",
9044
"theming/density": "source",
91-
"semantic/density": "source",
92-
"qlik/roundness/sharp": "source",
45+
"theming/sizing": "source",
9346
"theming/roundness": "source",
94-
"semantic/roundness": "enabled"
95-
},
96-
"group": "roundness"
47+
"theming/typography": "source",
48+
"semantic/roundness": "enabled",
49+
"semantic/appearance": "enabled",
50+
"semantic/sizing": "enabled",
51+
"semantic/density": "enabled",
52+
"semantic/typography": "enabled",
53+
"semantic/core": "enabled"
54+
}
9755
},
9856
{
99-
"name": "soft",
57+
"id": "theme-qlik-dark",
58+
"name": "qlik-dark",
59+
"group": "theme",
10060
"selectedTokenSets": {
10161
"palette/core": "source",
62+
"qlik/appearance/core": "source",
63+
"qlik/appearance/qlik-dark": "source",
10264
"qlik/density/comfortable": "source",
103-
"theming/density": "source",
104-
"semantic/density": "source",
10565
"qlik/roundness/soft": "source",
106-
"theming/roundness": "source",
107-
"semantic/roundness": "enabled"
108-
},
109-
"group": "roundness"
110-
},
111-
{
112-
"name": "rounded",
113-
"selectedTokenSets": {
114-
"palette/core": "source",
115-
"qlik/density/comfortable": "source",
116-
"theming/density": "source",
117-
"semantic/density": "source",
118-
"qlik/roundness/rounded": "source",
119-
"theming/roundness": "source",
120-
"semantic/roundness": "enabled"
121-
},
122-
"group": "roundness"
123-
},
124-
{
125-
"name": "source-sans",
126-
"selectedTokenSets": {
12766
"qlik/typography/core": "source",
12867
"qlik/typography/source-sans": "source",
68+
"theming/appearance": "source",
69+
"theming/density": "source",
70+
"theming/sizing": "source",
71+
"theming/roundness": "source",
12972
"theming/typography": "source",
130-
"semantic/typography": "enabled"
131-
},
132-
"group": "typography"
133-
},
134-
{
135-
"name": "inter",
136-
"selectedTokenSets": {
137-
"qlik/typography/core": "source",
138-
"qlik/typography/inter": "source",
139-
"theming/typography": "source",
140-
"semantic/typography": "enabled"
141-
},
142-
"group": "typography"
143-
},
144-
{
145-
"name": "core",
146-
"$figmaStyleReferences": {},
147-
"selectedTokenSets": {
73+
"semantic/roundness": "enabled",
74+
"semantic/appearance": "enabled",
75+
"semantic/sizing": "enabled",
76+
"semantic/density": "enabled",
77+
"semantic/typography": "enabled",
14878
"semantic/core": "enabled"
149-
},
150-
"group": "core"
79+
}
15180
}
15281
]
15382
}

‎packages/design-tokens/src/tokens.test.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,6 @@ describe("tokens.css", () => {
1616
expect(tokensContent).toBeDefined();
1717
// count the number of lines
1818
const lines = tokensContent.split("\n");
19-
expect(lines.length).toBe(1230); // Ensure we have no new tokens or token removed
19+
expect(lines.length).toBe(1212); // Ensure we have no new tokens or token removed
2020
});
2121
});

0 commit comments

Comments
 (0)