@swisspost/design-system-tokens 9.0.0-next.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 (19) hide show
  1. package/CHANGELOG.md +27 -0
  2. package/CONTRIBUTING.md +19 -0
  3. package/LICENSE +202 -0
  4. package/README.md +48 -0
  5. package/_channel.scss +12 -0
  6. package/_components.scss +775 -0
  7. package/_core.scss +153 -0
  8. package/_device.scss +535 -0
  9. package/_elements.scss +77 -0
  10. package/_helpers.scss +13 -0
  11. package/_index.scss +14 -0
  12. package/_palettes.scss +19 -0
  13. package/_scheme.scss +340 -0
  14. package/_theme.scss +34 -0
  15. package/_utilities.scss +132 -0
  16. package/package.json +41 -0
  17. package/tailwind/helpers.tailwind.js +17 -0
  18. package/tailwind/utilities.tailwind.js +144 -0
  19. package/tokens.json +11360 -0
package/_core.scss ADDED
@@ -0,0 +1,153 @@
1
+
2
+ // Do not edit manually
3
+ // This file was generated by the swisspost/design-system-tokens package
4
+ // Mon, 11 Nov 2024 15:43:49 GMT
5
+
6
+ :root {
7
+ --post-core-color-brand-postyellow: #ffcc00;
8
+ --post-core-color-brand-black: #000000;
9
+ --post-core-color-brand-white: #ffffff;
10
+ --post-core-color-notification-green: #107800;
11
+ --post-core-color-notification-red: #b20000;
12
+ --post-core-color-notification-orange: #d93d00;
13
+ --post-core-color-notification-blue: #0050a1;
14
+ --post-core-color-notification-green-light: #c3ddbf;
15
+ --post-core-color-notification-red-light: #ebbfbf;
16
+ --post-core-color-notification-orange-light: #f5cebf;
17
+ --post-core-color-notification-blue-light: #bfd3e7;
18
+ --post-core-color-notification-green-night: #55e543;
19
+ --post-core-color-notification-red-night: #ffc2c2;
20
+ --post-core-color-sandgrey-100: #050400;
21
+ --post-core-color-sandgrey-000: #fcfcfc;
22
+ --post-core-color-sandgrey-002: #fafafa;
23
+ --post-core-color-sandgrey-006: #f0efed;
24
+ --post-core-color-sandgrey-012: #e1e0dc;
25
+ --post-core-color-sandgrey-020: #cdccc8;
26
+ --post-core-color-sandgrey-030: #b4b3af;
27
+ --post-core-color-sandgrey-040: #9b9a96;
28
+ --post-core-color-sandgrey-050: #82817d;
29
+ --post-core-color-sandgrey-060: #696864;
30
+ --post-core-color-sandgrey-070: #504f4b;
31
+ --post-core-color-sandgrey-080: #373632;
32
+ --post-core-color-sandgrey-090: #1e1d19;
33
+ --post-core-color-sandgrey-alpha-darksand-10: rgba(5, 4, 0, 0.1);
34
+ --post-core-color-sandgrey-alpha-darksand-20: rgba(5, 4, 0, 0.2);
35
+ --post-core-color-sandgrey-alpha-darksand-30: rgba(5, 4, 0, 0.3);
36
+ --post-core-color-sandgrey-alpha-darksand-40: rgba(5, 4, 0, 0.4);
37
+ --post-core-color-sandgrey-alpha-darksand-50: rgba(5, 4, 0, 0.5);
38
+ --post-core-color-sandgrey-alpha-darksand-60: rgba(5, 4, 0, 0.6);
39
+ --post-core-color-sandgrey-alpha-darksand-70: rgba(5, 4, 0, 0.7);
40
+ --post-core-color-sandgrey-alpha-darksand-80: rgba(5, 4, 0, 0.8);
41
+ --post-core-color-sandgrey-alpha-darksand-90: rgba(5, 4, 0, 0.9);
42
+ --post-core-color-sandgrey-alpha-lightsand-10: rgba(252, 252, 252, 0.1);
43
+ --post-core-color-sandgrey-alpha-lightsand-20: rgba(252, 252, 252, 0.2);
44
+ --post-core-color-sandgrey-alpha-lightsand-30: rgba(252, 252, 252, 0.3);
45
+ --post-core-color-sandgrey-alpha-lightsand-40: rgba(252, 252, 252, 0.4);
46
+ --post-core-color-sandgrey-alpha-lightsand-50: rgba(252, 252, 252, 0.5);
47
+ --post-core-color-sandgrey-alpha-lightsand-60: rgba(252, 252, 252, 0.6);
48
+ --post-core-color-sandgrey-alpha-lightsand-70: rgba(252, 252, 252, 0.7);
49
+ --post-core-color-sandgrey-alpha-lightsand-80: rgba(252, 252, 252, 0.8);
50
+ --post-core-color-sandgrey-alpha-lightsand-90: rgba(252, 252, 252, 0.9);
51
+ --post-core-color-colorless: rgba(255, 255, 255, 0);
52
+ --post-core-color-cargo-green: #00411c;
53
+ --post-core-color-cargo-blue: #aadcff;
54
+ --post-core-dimension-0: 0rem;
55
+ --post-core-dimension-1: 1px;
56
+ --post-core-dimension-2: 2px;
57
+ --post-core-dimension-3: 3px;
58
+ --post-core-dimension-4: 4px;
59
+ --post-core-dimension-5: 5px;
60
+ --post-core-dimension-6: 6px;
61
+ --post-core-dimension-7: 7px;
62
+ --post-core-dimension-8: 8px;
63
+ --post-core-dimension-9: 9px;
64
+ --post-core-dimension-10: 10px;
65
+ --post-core-dimension-11: 11px;
66
+ --post-core-dimension-12: 12px;
67
+ --post-core-dimension-13: 13px;
68
+ --post-core-dimension-14: 14px;
69
+ --post-core-dimension-15: 15px;
70
+ --post-core-dimension-16: 16px;
71
+ --post-core-dimension-17: 17px;
72
+ --post-core-dimension-18: 18px;
73
+ --post-core-dimension-19: 19px;
74
+ --post-core-dimension-20: 20px;
75
+ --post-core-dimension-22: 22px;
76
+ --post-core-dimension-23: 23px;
77
+ --post-core-dimension-24: 24px;
78
+ --post-core-dimension-26: 26px;
79
+ --post-core-dimension-28: 28px;
80
+ --post-core-dimension-30: 30px;
81
+ --post-core-dimension-32: 32px;
82
+ --post-core-dimension-34: 34px;
83
+ --post-core-dimension-36: 36px;
84
+ --post-core-dimension-40: 40px;
85
+ --post-core-dimension-48: 48px;
86
+ --post-core-dimension-56: 56px;
87
+ --post-core-dimension-64: 64px;
88
+ --post-core-dimension-72: 72px;
89
+ --post-core-dimension-78: 78px;
90
+ --post-core-dimension-80: 80px;
91
+ --post-core-dimension-96: 96px;
92
+ --post-core-dimension-100: 100px;
93
+ --post-core-dimension-112: 112px;
94
+ --post-core-dimension-1280: 1280px;
95
+ --post-core-dimension-5-5: 5.5px;
96
+ --post-core-dimension-6-5: 6.5px;
97
+ --post-core-dimension-4-5: 4.5px;
98
+ --post-core-dimension-7-5: 7.5px;
99
+ --post-core-dimension-1-5: 1.5px;
100
+ --post-core-dimension-8-5: 8.5px;
101
+ --post-core-dimension-3-5: 3.5px;
102
+ --post-core-dimension-n2: -2px;
103
+ --post-core-dimension-15-5: 15.5px;
104
+ --post-core-dimension-16-5: 16.5px;
105
+ --post-core-dimension-17-5: 17.5px;
106
+ --post-core-dimension-26-5: 26.5px;
107
+ --post-core-dimension-25-5: 25.5px;
108
+ --post-core-dimension-24-5: 24.5px;
109
+ --post-core-font-weight-300: 300;
110
+ --post-core-font-weight-400: 400;
111
+ --post-core-font-weight-500: 500;
112
+ --post-core-font-weight-700: 700;
113
+ --post-core-font-weight-900: 900;
114
+ --post-core-font-size-10: 10px;
115
+ --post-core-font-size-12: 12px;
116
+ --post-core-font-size-14: 14px;
117
+ --post-core-font-size-16: 16px;
118
+ --post-core-font-size-18: 18px;
119
+ --post-core-font-size-20: 20px;
120
+ --post-core-font-size-22: 22px;
121
+ --post-core-font-size-24: 24px;
122
+ --post-core-font-size-26: 26px;
123
+ --post-core-font-size-28: 28px;
124
+ --post-core-font-size-30: 30px;
125
+ --post-core-font-size-32: 32px;
126
+ --post-core-font-size-34: 34px;
127
+ --post-core-font-size-36: 36px;
128
+ --post-core-font-size-40: 40px;
129
+ --post-core-line-height-100: 1;
130
+ --post-core-line-height-120: 1.2;
131
+ --post-core-line-height-140: 1.4;
132
+ --post-core-line-height-150: 1.5;
133
+ --post-core-letter-spacing-default: 0.0012em;
134
+ --post-core-letter-spacing-none: 0rem;
135
+ --post-core-font-family-frutiger: 'Frutiger Neue for Post';
136
+ --post-core-font-family-swiss-post: 'Swiss Post Sans v005';
137
+ --post-core-font-family-caveat: Caveat;
138
+ --post-core-elevation-1: 0 1px 2px 0 rgba(0,0,0,0.16), 0 0 2px 0 rgba(0,0,0,0.16);
139
+ --post-core-elevation-2: 0 2px 4px 0 rgba(0,0,0,0.16), 0 0 2px 0 rgba(0,0,0,0.16);
140
+ --post-core-elevation-3: 0 4px 8px 0 rgba(0,0,0,0.16), 0 0 2px 0 rgba(0,0,0,0.16);
141
+ --post-core-elevation-4: 0 8px 16px 0 rgba(0,0,0,0.16), 0 0 2px 0 rgba(0,0,0,0.16);
142
+ --post-core-elevation-5: 0 14px 28px 0 rgba(0,0,0,0.24), 0 0 8px 0 rgba(0,0,0,0.24);
143
+ --post-core-border-focus: var(--post-core-color-sandgrey-100) var(--post-core-dimension-2) solid;
144
+ --post-core-border-disabled: var(--post-core-color-sandgrey-060) var(--post-core-dimension-2) dashed;
145
+ --post-core-border-default: var(--post-core-color-sandgrey-100) var(--post-core-dimension-2) solid;
146
+ --post-core-border-style-solid: solid;
147
+ --post-core-border-style-dash: dashed;
148
+ --post-core-text-decoration-underline: underline;
149
+ --post-core-text-decoration-line-through: line-through;
150
+ --post-core-text-decoration-none: none;
151
+ --post-core-bg-scheme-light: light;
152
+ --post-core-bg-scheme-dark: dark;
153
+ }