@equinor/eds-tokens 2.3.2 → 3.0.0-beta.2

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 (30) hide show
  1. package/package.json +10 -3
  2. package/src/tokens/css/color-scheme/dark.css +100 -0
  3. package/src/tokens/css/color-scheme/light.css +100 -0
  4. package/src/tokens/css/colors/default.css +212 -0
  5. package/src/tokens/css/density/comfortable.css +51 -0
  6. package/src/tokens/css/density/compact.css +51 -0
  7. package/src/tokens/css/density/relaxed.css +51 -0
  8. package/src/tokens/css/font/default.css +7 -0
  9. package/src/tokens/css/primitives/default.css +84 -0
  10. package/src/tokens/css/semantic/default.css +115 -0
  11. package/src/tokens/css/variables.css +772 -0
  12. package/src/tokens/dtcg/color-scheme/dark.json +1092 -0
  13. package/src/tokens/dtcg/color-scheme/light.json +1092 -0
  14. package/src/tokens/dtcg/colors/default.json +2344 -0
  15. package/src/tokens/dtcg/density/comfortable.json +748 -0
  16. package/src/tokens/dtcg/density/compact.json +748 -0
  17. package/src/tokens/dtcg/density/relaxed.json +748 -0
  18. package/src/tokens/dtcg/font/default.json +76 -0
  19. package/src/tokens/dtcg/primitives/default.json +1181 -0
  20. package/src/tokens/dtcg/semantic/default.json +1667 -0
  21. package/src/tokens/ts/color-scheme/dark.ts +119 -0
  22. package/src/tokens/ts/color-scheme/light.ts +119 -0
  23. package/src/tokens/ts/colors/default.ts +251 -0
  24. package/src/tokens/ts/density/comfortable.ts +102 -0
  25. package/src/tokens/ts/density/compact.ts +102 -0
  26. package/src/tokens/ts/density/relaxed.ts +102 -0
  27. package/src/tokens/ts/font/default.ts +18 -0
  28. package/src/tokens/ts/primitives/default.ts +171 -0
  29. package/src/tokens/ts/semantic/dark.ts +214 -0
  30. package/src/tokens/ts/semantic/light.ts +214 -0
package/src/tokens/css/primitives/default.css ADDED
@@ -0,0 +1,84 @@
1
+ :root {
2
+ --eds-primitives-font-family-equinor: Equinor;
3
+ --eds-primitives-font-family-inter: Inter;
4
+ --eds-primitives-lineheight-scale-100-default: var(--eds-primitives-spacing-75);
5
+ --eds-primitives-lineheight-scale-1000-default: var(--eds-primitives-spacing-225);
6
+ --eds-primitives-lineheight-scale-1100-default: var(--eds-primitives-spacing-250);
7
+ --eds-primitives-lineheight-scale-200-default: var(--eds-primitives-spacing-100);
8
+ --eds-primitives-lineheight-scale-300-default: var(--eds-primitives-spacing-100);
9
+ --eds-primitives-lineheight-scale-400-default: var(--eds-primitives-spacing-125);
10
+ --eds-primitives-lineheight-scale-500-default: var(--eds-primitives-spacing-150);
11
+ --eds-primitives-lineheight-scale-600-default: var(--eds-primitives-spacing-150);
12
+ --eds-primitives-lineheight-scale-700-default: var(--eds-primitives-spacing-175);
13
+ --eds-primitives-lineheight-scale-800-default: var(--eds-primitives-spacing-200);
14
+ --eds-primitives-lineheight-scale-900-default: var(--eds-primitives-spacing-200);
15
+ --eds-primitives-spacing-0: 0px;
16
+ --eds-primitives-spacing-100: 16px;
17
+ --eds-primitives-spacing-1000: 160px;
18
+ --eds-primitives-spacing-1100: 176px;
19
+ --eds-primitives-spacing-12: 2px;
20
+ --eds-primitives-spacing-1200: 192px;
21
+ --eds-primitives-spacing-125: 20px;
22
+ --eds-primitives-spacing-1300: 208px;
23
+ --eds-primitives-spacing-1400: 224px;
24
+ --eds-primitives-spacing-150: 24px;
25
+ --eds-primitives-spacing-1500: 240px;
26
+ --eds-primitives-spacing-1600: 256px;
27
+ --eds-primitives-spacing-1700: 272px;
28
+ --eds-primitives-spacing-175: 28px;
29
+ --eds-primitives-spacing-1800: 288px;
30
+ --eds-primitives-spacing-19: 3px;
31
+ --eds-primitives-spacing-1900: 304px;
32
+ --eds-primitives-spacing-200: 32px;
33
+ --eds-primitives-spacing-2000: 320px;
34
+ --eds-primitives-spacing-2100: 336px;
35
+ --eds-primitives-spacing-2200: 352px;
36
+ --eds-primitives-spacing-225: 36px;
37
+ --eds-primitives-spacing-25: 4px;
38
+ --eds-primitives-spacing-250: 40px;
39
+ --eds-primitives-spacing-275: 44px;
40
+ --eds-primitives-spacing-300: 48px;
41
+ --eds-primitives-spacing-325: 52px;
42
+ --eds-primitives-spacing-350: 56px;
43
+ --eds-primitives-spacing-37: 6px;
44
+ --eds-primitives-spacing-375: 60px;
45
+ --eds-primitives-spacing-400: 64px;
46
+ --eds-primitives-spacing-450: 72px;
47
+ --eds-primitives-spacing-50: 8px;
48
+ --eds-primitives-spacing-500: 80px;
49
+ --eds-primitives-spacing-550: 88px;
50
+ --eds-primitives-spacing-6: 1px;
51
+ --eds-primitives-spacing-600: 96px;
52
+ --eds-primitives-spacing-62: 10px;
53
+ --eds-primitives-spacing-700: 112px;
54
+ --eds-primitives-spacing-75: 12px;
55
+ --eds-primitives-spacing-800: 128px;
56
+ --eds-primitives-spacing-87: 14px;
57
+ --eds-primitives-spacing-900: 144px;
58
+ --eds-primitives-type-scale-equinor-100-font-size: 10px;
59
+ --eds-primitives-type-scale-equinor-1000-font-size: 36px;
60
+ --eds-primitives-type-scale-equinor-1100-font-size: 42px;
61
+ --eds-primitives-type-scale-equinor-200-font-size: 12px;
62
+ --eds-primitives-type-scale-equinor-300-font-size: 14px;
63
+ --eds-primitives-type-scale-equinor-400-font-size: 16px;
64
+ --eds-primitives-type-scale-equinor-500-font-size: 18px;
65
+ --eds-primitives-type-scale-equinor-600-font-size: 21px;
66
+ --eds-primitives-type-scale-equinor-700-font-size: 24px;
67
+ --eds-primitives-type-scale-equinor-800-font-size: 28px;
68
+ --eds-primitives-type-scale-equinor-900-font-size: 32px;
69
+ --eds-primitives-type-scale-inter-100-font-size: 9px;
70
+ --eds-primitives-type-scale-inter-1000-font-size: 32px;
71
+ --eds-primitives-type-scale-inter-1100-font-size: 37px;
72
+ --eds-primitives-type-scale-inter-200-font-size: 10px;
73
+ --eds-primitives-type-scale-inter-300-font-size: 12px;
74
+ --eds-primitives-type-scale-inter-400-font-size: 14px;
75
+ --eds-primitives-type-scale-inter-500-font-size: 16px;
76
+ --eds-primitives-type-scale-inter-600-font-size: 18px;
77
+ --eds-primitives-type-scale-inter-700-font-size: 21px;
78
+ --eds-primitives-type-scale-inter-800-font-size: 24px;
79
+ --eds-primitives-type-scale-inter-900-font-size: 28px;
80
+ --eds-primitives-type-scale-tracking-normal: 0;
81
+ --eds-primitives-weight-scale-bolder: 500;
82
+ --eds-primitives-weight-scale-lighter: 300;
83
+ --eds-primitives-weight-scale-normal: 400;
84
+ }
package/src/tokens/css/semantic/default.css ADDED
@@ -0,0 +1,115 @@
1
+ :root {
2
+ --eds-background-container-canvas-default: var(--eds-neutral-1);
3
+ --eds-background-container-card-default: var(--eds-neutral-15);
4
+ --eds-background-container-popover-default: var(--eds-neutral-15);
5
+ --eds-background-container-popover-inverted: var(--eds-neutral-12);
6
+ --eds-background-container-sheet-dialog-default: var(--eds-neutral-15);
7
+ --eds-background-surface-accent-default-default: var(--eds-accent-14);
8
+ --eds-background-surface-accent-default-hover: var(--eds-accent-11);
9
+ --eds-background-surface-accent-default-pressed: var(--eds-accent-15);
10
+ --eds-background-surface-accent-selected-default: var(--eds-accent-5);
11
+ --eds-background-surface-accent-selected-hover: var(--eds-accent-6);
12
+ --eds-background-surface-accent-selected-pressed: var(--eds-accent-7);
13
+ --eds-background-surface-accent-subtle-default: var(--eds-accent-2);
14
+ --eds-background-surface-accent-subtle-hover: var(--eds-accent-4);
15
+ --eds-background-surface-accent-subtle-pressed: var(--eds-accent-6);
16
+ --eds-background-surface-default-active: var(--eds-neutral-2);
17
+ --eds-background-surface-default-default: var(--eds-neutral-1);
18
+ --eds-background-surface-default-disabled: var(--eds-neutral-1);
19
+ --eds-background-surface-default-hover: var(--eds-neutral-2);
20
+ --eds-background-surface-default-muted: var(--eds-neutral-1);
21
+ --eds-background-surface-default-pressed: var(--eds-neutral-3);
22
+ --eds-background-surface-default-read-only: var(--eds-neutral-1);
23
+ --eds-background-surface-default-selected-default: var(--eds-accent-2);
24
+ --eds-background-surface-default-selected-hover: var(--eds-accent-3);
25
+ --eds-background-surface-default-selected-pressed: var(--eds-accent-4);
26
+ --eds-border-default: var(--eds-neutral-4);
27
+ --eds-border-disabled: var(--eds-neutral-2);
28
+ --eds-border-emphasized: var(--eds-neutral-6);
29
+ --eds-border-focus: var(--eds-border-focus);
30
+ --eds-border-hover: var(--eds-neutral-7);
31
+ --eds-border-selected: var(--eds-accent-13);
32
+ --eds-border-subtle: var(--eds-neutral-2);
33
+ --eds-corner-radius-none: var(--eds-density-corner-radius-none);
34
+ --eds-corner-radius-pill: var(--eds-density-corner-radius-pill);
35
+ --eds-corner-radius-rounded: var(--eds-density-corner-radius-rounded);
36
+ --eds-corner-radius-rounded-outer: var(--eds-density-corner-radius-rounded-outer);
37
+ --eds-font-family-header: var(--eds-family-header);
38
+ --eds-font-family-ui: var(--eds-family-ui);
39
+ --eds-font-weight-bolder: var(--eds-weight-bolder);
40
+ --eds-font-weight-lighter: var(--eds-weight-lighter);
41
+ --eds-font-weight-normal: var(--eds-weight-normal);
42
+ --eds-icon-accent: var(--eds-accent-13);
43
+ --eds-icon-accent-hover: var(--eds-accent-14);
44
+ --eds-icon-accent-pressed: var(--eds-accent-15);
45
+ --eds-icon-color-on-dark: var(--eds-neutral-14);
46
+ --eds-icon-color-on-light: var(--eds-neutral-12);
47
+ --eds-icon-disabled: var(--eds-neutral-5);
48
+ --eds-icon-muted: var(--eds-neutral-7);
49
+ --eds-icon-on-accent: var(--eds-neutral-14);
50
+ --eds-icon-primary: var(--eds-neutral-10);
51
+ --eds-icon-secondary: var(--eds-neutral-8);
52
+ --eds-overlay-scrim: rgb(29 29 29 / 0.1);
53
+ --eds-spacing-2xl: var(--eds-density-spacing-2xl);
54
+ --eds-spacing-2xs: var(--eds-density-spacing-2xs);
55
+ --eds-spacing-3xl: var(--eds-density-spacing-3xl);
56
+ --eds-spacing-3xs: var(--eds-density-spacing-3xs);
57
+ --eds-spacing-4xs: var(--eds-density-spacing-4xs);
58
+ --eds-spacing-lg: var(--eds-density-spacing-lg);
59
+ --eds-spacing-md: var(--eds-density-spacing-md);
60
+ --eds-spacing-none: var(--eds-density-spacing-none);
61
+ --eds-spacing-sm: var(--eds-density-spacing-sm);
62
+ --eds-spacing-xl: var(--eds-density-spacing-xl);
63
+ --eds-spacing-xs: var(--eds-density-spacing-xs);
64
+ --eds-status-warning-default: var(--eds-warning-1);
65
+ --eds-status-warning-emphased-default: var(--eds-warning-8);
66
+ --eds-status-warning-emphased-hover: var(--eds-warning-11);
67
+ --eds-status-warning-emphased-selected: var(--eds-warning-12);
68
+ --eds-status-warning-hover: var(--eds-warning-3);
69
+ --eds-status-warning-selected: var(--eds-warning-5);
70
+ --eds-text-accent: var(--eds-info-8);
71
+ --eds-text-color-on-dark: var(--eds-neutral-14);
72
+ --eds-text-color-on-light: var(--eds-neutral-12);
73
+ --eds-text-disabled: var(--eds-neutral-5);
74
+ --eds-text-muted: var(--eds-neutral-7);
75
+ --eds-text-on-accent: var(--eds-neutral-14);
76
+ --eds-text-pressed: var(--eds-info-10);
77
+ --eds-text-primary: var(--eds-neutral-12);
78
+ --eds-text-secondary: var(--eds-neutral-8);
79
+ --eds-text-status-on-dark: var(--eds-warning-15);
80
+ --eds-text-status-on-light: var(--eds-warning-11);
81
+ --eds-typography-header-2xl-font-size: var(--eds-density-typography-header-2xl-font-size);
82
+ --eds-typography-header-2xl-line-height: var(--eds-density-typography-header-2xl-line-height);
83
+ --eds-typography-header-3xl-font-size: var(--eds-density-typography-header-3xl-font-size);
84
+ --eds-typography-header-3xl-line-height: var(--eds-density-typography-header-3xl-line-height);
85
+ --eds-typography-header-4xl-font-size: var(--eds-density-typography-header-4xl-font-size);
86
+ --eds-typography-header-4xl-line-height: var(--eds-density-typography-header-4xl-line-height);
87
+ --eds-typography-header-lg-font-size: var(--eds-density-typography-header-lg-font-size);
88
+ --eds-typography-header-lg-line-height: var(--eds-density-typography-header-lg-line-height);
89
+ --eds-typography-header-md-font-size: var(--eds-density-typography-header-md-font-size);
90
+ --eds-typography-header-md-line-height: var(--eds-density-typography-header-md-line-height);
91
+ --eds-typography-header-sm-font-size: var(--eds-density-typography-header-sm-font-size);
92
+ --eds-typography-header-sm-line-height: var(--eds-density-typography-header-sm-line-height);
93
+ --eds-typography-header-xl-font-size: var(--eds-density-typography-header-xl-font-size);
94
+ --eds-typography-header-xl-line-height: var(--eds-density-typography-header-xl-line-height);
95
+ --eds-typography-header-xs-font-size: var(--eds-density-typography-header-xs-font-size);
96
+ --eds-typography-header-xs-line-height: var(--eds-density-typography-header-xs-line-height);
97
+ --eds-typography-ui-2xl-font-size: var(--eds-density-typography-ui-2xl-font-size);
98
+ --eds-typography-ui-2xl-line-height: var(--eds-density-typography-ui-2xl-line-height);
99
+ --eds-typography-ui-3xl-font-size: var(--eds-density-typography-ui-3xl-font-size);
100
+ --eds-typography-ui-3xl-line-height: var(--eds-density-typography-ui-3xl-line-height);
101
+ --eds-typography-ui-4xl-font-size: var(--eds-density-typography-ui-4xl-font-size);
102
+ --eds-typography-ui-4xl-line-height: var(--eds-density-typography-ui-4xl-line-height);
103
+ --eds-typography-ui-5xl-font-size: var(--eds-density-typography-ui-5xl-font-size);
104
+ --eds-typography-ui-5xl-line-height: var(--eds-density-typography-ui-5xl-line-height);
105
+ --eds-typography-ui-lg-font-size: var(--eds-density-typography-ui-lg-font-size);
106
+ --eds-typography-ui-lg-line-height: var(--eds-density-typography-ui-lg-line-height);
107
+ --eds-typography-ui-md-font-size: var(--eds-density-typography-ui-md-font-size);
108
+ --eds-typography-ui-md-line-height: var(--eds-density-typography-ui-md-line-height);
109
+ --eds-typography-ui-sm-font-size: var(--eds-density-typography-ui-sm-font-size);
110
+ --eds-typography-ui-sm-line-height: var(--eds-density-typography-ui-sm-line-height);
111
+ --eds-typography-ui-xl-font-size: var(--eds-density-typography-ui-xl-font-size);
112
+ --eds-typography-ui-xl-line-height: var(--eds-density-typography-ui-xl-line-height);
113
+ --eds-typography-ui-xs-font-size: var(--eds-density-typography-ui-xs-font-size);
114
+ --eds-typography-ui-xs-line-height: var(--eds-density-typography-ui-xs-line-height);
115
+ }