Skip to content

Commit 529b560

Browse files
JialeclJialecl
authored
Merge pull request #2386 from dxc-technology/Mil4n0r/update-tokens
[patch] Fixed tokens list and doc
2 parents 77edc17 + 30ceb7d commit 529b560

File tree

4 files changed

+23
-78
lines changed

4 files changed

+23
-78
lines changed

‎apps/website/screens/foundations/tokens/AliasTokenList.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,21 +18,20 @@ const sections = [
1818
subSections: [
1919
{ title: "Border", content: <TokensTable categories={["border-color"]} type="alias" /> },
2020
{ title: "Background", content: <TokensTable categories={["color-bg"]} type="alias" /> },
21-
{ title: "Shadow", content: <TokensTable categories={["shadow-dark", "shadow-light"]} type="alias" /> },
2221
{ title: "Text", content: <TokensTable categories={["color-fg"]} type="alias" /> },
2322
],
2423
},
2524
{
2625
title: "Dimensions",
2726
subSections: [
2827
{ title: "Height", content: <TokensTable categories={["height"]} type="alias" /> },
29-
{
30-
title: "Shadow",
31-
content: <TokensTable categories={["shadow-high", "shadow-mid", "shadow-low"]} type="alias" />,
32-
},
3328
{ title: "Spacing", content: <TokensTable categories={["spacing-gap", "spacing-padding"]} type="alias" /> },
3429
],
3530
},
31+
{
32+
title: "Shadow",
33+
content: <TokensTable categories={["shadow"]} type="alias" />,
34+
},
3635
{
3736
title: "Typography",
3837
subSections: [

‎apps/website/screens/foundations/tokens/CoreTokenList.tsx‎

Lines changed: 0 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -7,56 +7,6 @@ import TokensTable from "./tables/TokensTable";
77
const sections = [
88
{
99
title: "Colors",
10-
content: (
11-
<>
12-
<>
13-
{/* Color Tokens */}
14-
<DxcHeading level={4} text="Colors" />
15-
<DxcHeading level={5} text="Absolute color tokens" />
16-
<TokensTable categories={["color-absolutes"]} type="core" />
17-
<DxcHeading level={5} text="Primary color tokens" />
18-
<TokensTable categories={["color-primary"]} type="core" />
19-
<DxcHeading level={5} text="Secondary color tokens" />
20-
<TokensTable categories={["color-secondary"]} type="core" />
21-
<DxcHeading level={5} text="Tertiary color tokens" />
22-
<TokensTable categories={["color-tertiary"]} type="core" />
23-
<DxcHeading level={5} text="Neutral color tokens" />
24-
<TokensTable categories={["color-neutral"]} type="core" />
25-
<DxcHeading level={5} text="Semantic 01 color tokens" />
26-
<TokensTable categories={["color-semantic01"]} type="core" />
27-
<DxcHeading level={5} text="Semantic 02 color tokens" />
28-
<TokensTable categories={["color-semantic02"]} type="core" />
29-
<DxcHeading level={5} text="Semantic 03 color tokens" />
30-
<TokensTable categories={["color-semantic03"]} type="core" />
31-
<DxcHeading level={5} text="Semantic 04 color tokens" />
32-
<TokensTable categories={["color-semantic04"]} type="core" />
33-
<DxcHeading level={5} text="Alpha color tokens" />
34-
<TokensTable categories={["color-alpha"]} type="core" />
35-
</>
36-
<>
37-
{/* Dimensions Tokens */}
38-
<DxcHeading level={4} text="Dimensions" />
39-
<TokensTable categories={["dimensions"]} type="core" />
40-
</>
41-
<>
42-
{/* Font Tokens */}
43-
<DxcHeading level={4} text="Font" />
44-
<DxcHeading level={5} text="Font size tokens" />
45-
<TokensTable categories={["font-size"]} type="core" />
46-
<DxcHeading level={5} text="Font weight tokens" />
47-
<TokensTable categories={["font-weight"]} type="core" />
48-
<DxcHeading level={5} text="Font family tokens" />
49-
<TokensTable categories={["font-family"]} type="core" />
50-
<DxcHeading level={5} text="Font style tokens" />
51-
<TokensTable categories={["font-style"]} type="core" />
52-
</>
53-
<>
54-
{/* Border Tokens */}
55-
<DxcHeading level={4} text="Border" />
56-
<TokensTable categories={["line-style"]} type="core" />
57-
</>
58-
</>
59-
),
6010
subSections: [
6111
{ title: "Absolute", content: <TokensTable categories={["color-absolutes"]} type="core" /> },
6212
{ title: "Primary", content: <TokensTable categories={["color-primary"]} type="core" /> },
@@ -73,7 +23,6 @@ const sections = [
7323
{ title: "Dimensions", content: <TokensTable categories={["dimensions"]} type="core" /> },
7424
{
7525
title: "Font",
76-
content: <TokensTable categories={["font-size", "font-weight", "font-family", "font-style"]} type="core" />,
7726
subSections: [
7827
{
7928
title: "Font size",

‎packages/lib/src/styles/tokens.ts‎

Lines changed: 18 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,9 @@ export const coreTokens: Record<string, string | number> = {
1919
"--z-contextualmenu": 340,
2020

2121
/* Modals and overlays */
22-
"--z-spinner-overlay": 400,
23-
"--z-progressbar-overlay": 410,
24-
"--z-dialog": 420,
22+
"--z-dialog": 400,
23+
"--z-spinner-overlay": 410,
24+
"--z-progressbar-overlay": 420,
2525
"--z-alert": 430,
2626

2727
/* Notifications */
@@ -33,6 +33,8 @@ export const coreTokens: Record<string, string | number> = {
3333
/************/
3434
/** TOKENS **/
3535
/************/
36+
37+
/* Core tokens */
3638
"--color-absolutes-black": "#000000",
3739
"--color-absolutes-white": "#ffffff",
3840
"--color-alpha-100-a": "#ebebeb1a",
@@ -167,6 +169,11 @@ export const coreTokens: Record<string, string | number> = {
167169
};
168170

169171
export const aliasTokens: Record<string, string | number> = {
172+
/************/
173+
/** TOKENS **/
174+
/************/
175+
176+
/* Alias tokens */
170177
"--border-color-info-lightest": "var(--color-semantic01-50)",
171178
"--border-color-info-lighter": "var(--color-semantic01-100)",
172179
"--border-color-info-light": "var(--color-semantic01-200)",
@@ -299,8 +306,6 @@ export const aliasTokens: Record<string, string | number> = {
299306
"--color-fg-secondary-strong": "var(--color-secondary-700)",
300307
"--color-fg-secondary-stronger": "var(--color-secondary-800)",
301308
"--color-fg-secondary-strongest": "var(--color-secondary-900)",
302-
"--shadow-dark": "var(--color-alpha-400-a)",
303-
"--shadow-light": "var(--color-alpha-300-a)",
304309
"--border-radius-none": "var(--dimensions-0)",
305310
"--border-radius-xs": "var(--dimensions-2)",
306311
"--border-radius-s": "var(--dimensions-4)",
@@ -320,22 +325,14 @@ export const aliasTokens: Record<string, string | number> = {
320325
"--height-xl": "var(--dimensions-40)",
321326
"--height-xxl": "var(--dimensions-48)",
322327
"--height-xxxl": "var(--dimensions-56)",
323-
"--shadow-high-spread": "var(--dimensions-0)",
324-
"--shadow-high-x-position": "var(--dimensions-0)",
325-
"--shadow-high-blur": "var(--dimensions-24)",
326-
"--shadow-high-y-position": "var(--dimensions-24)",
327-
"--shadow-higher-spread": "var(--dimensions-0)",
328-
"--shadow-higher-x-position": "var(--dimensions-0)",
329-
"--shadow-higher-blur": "var(--dimensions-48)",
330-
"--shadow-higher-y-position": "var(--dimensions-48)",
331-
"--shadow-low-spread": "var(--dimensions-0)",
332-
"--shadow-low-x-position": "var(--dimensions-0)",
333-
"--shadow-low-blur": "var(--dimensions-2)",
334-
"--shadow-low-y-position": "var(--dimensions-2)",
335-
"--shadow-mid-spread": "var(--dimensions-0)",
336-
"--shadow-mid-x-position": "var(--dimensions-0)",
337-
"--shadow-mid-blur": "var(--dimensions-12)",
338-
"--shadow-mid-y-position": "var(--dimensions-12)",
328+
"--shadow-100":
329+
"var(--dimensions-0) var(--dimensions-2) var(--dimensions-2) var(--dimensions-0) var(--color-alpha-400-a)",
330+
"--shadow-200":
331+
"var(--dimensions-0) var(--dimensions-12) var(--dimensions-12) var(--dimensions-0) var(--color-alpha-300-a)",
332+
"--shadow-300":
333+
"var(--dimensions-0) var(--dimensions-24) var(--dimensions-24) var(--dimensions-0) var(--color-alpha-300-a)",
334+
"--shadow-400":
335+
"var(--dimensions-0) var(--dimensions-48) var(--dimensions-48) var(--dimensions-0) var(--color-alpha-300-a)",
339336
"--spacing-gap-none": "var(--dimensions-0)",
340337
"--spacing-gap-xxs": "var(--dimensions-2)",
341338
"--spacing-gap-xs": "var(--dimensions-4)",

‎packages/lib/src/styles/variables.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -367,6 +367,7 @@
367367
--typography-helper-text-light: var(--font-weight-light);
368368
--typography-helper-text-regular: var(--font-weight-regular);
369369
--typography-helper-text-semibold: var(--font-weight-semibold);
370+
--typography-helper-text-italic: var(--font-style-lightitalic);
370371
--typography-label-s: var(--font-size-12);
371372
--typography-label-m: var(--font-size-14);
372373
--typography-label-l: var(--font-size-16);
@@ -383,5 +384,4 @@
383384
--border-style-default: var(--line-style-solid);
384385
--border-style-outline: var(--line-style-dashed);
385386
--typography-font-family: var(--font-family-sans);
386-
--typography-helper-text-italic: var(--font-style-lightitalic);
387387
}

0 commit comments

Comments
 (0)