@teranga-ds/tokens 0.1.0

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 (9) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +86 -0
  3. package/dist/index.d.ts +244 -0
  4. package/dist/teranga-tokens.cjs +3282 -0
  5. package/dist/teranga-tokens.css +189 -0
  6. package/dist/teranga-tokens.js +193 -0
  7. package/dist/teranga-tokens.json +185 -0
  8. package/dist/teranga-tokens.scss +186 -0
  9. package/package.json +53 -0
package/dist/teranga-tokens.scss ADDED
@@ -0,0 +1,186 @@
1
+
2
+ // Do not edit directly, this file was auto-generated.
3
+
4
+ $tgColorGreen50: #e6f4ec;
5
+ $tgColorGreen100: #b3ddc5;
6
+ $tgColorGreen200: #80c69e;
7
+ $tgColorGreen300: #4daf77;
8
+ $tgColorGreen400: #26a05a;
9
+ $tgColorGreen500: #00853f; // Senegalese flag green — primary brand color
10
+ $tgColorGreen600: #007838;
11
+ $tgColorGreen700: #006530;
12
+ $tgColorGreen800: #005228;
13
+ $tgColorGreen900: #003d1e;
14
+ $tgColorGold50: #fffde6;
15
+ $tgColorGold100: #fff8b3;
16
+ $tgColorGold200: #fff180;
17
+ $tgColorGold300: #ffea4d;
18
+ $tgColorGold400: #ffe51f;
19
+ $tgColorGold500: #fdef42; // Senegalese flag gold/yellow
20
+ $tgColorGold600: #e8d800;
21
+ $tgColorGold700: #c9bb00;
22
+ $tgColorGold800: #a89d00;
23
+ $tgColorGold900: #7a7200;
24
+ $tgColorRed50: #fce8e9;
25
+ $tgColorRed100: #f5b8bb;
26
+ $tgColorRed200: #ee888d;
27
+ $tgColorRed300: #e7585f;
28
+ $tgColorRed400: #e33039;
29
+ $tgColorRed500: #e31b23; // Senegalese flag red — danger/error color
30
+ $tgColorRed600: #cc181f;
31
+ $tgColorRed700: #b0141b;
32
+ $tgColorRed800: #941116;
33
+ $tgColorRed900: #6e0d11;
34
+ $tgColorNeutral0: #ffffff;
35
+ $tgColorNeutral50: #f8f8f6;
36
+ $tgColorNeutral100: #f0f0ec;
37
+ $tgColorNeutral200: #e0e0d8;
38
+ $tgColorNeutral300: #c8c8be;
39
+ $tgColorNeutral400: #a8a89a;
40
+ $tgColorNeutral500: #888878;
41
+ $tgColorNeutral600: #686858;
42
+ $tgColorNeutral700: #4a4a3c;
43
+ $tgColorNeutral800: #302e24;
44
+ $tgColorNeutral900: #1a1812;
45
+ $tgColorNeutral1000: #000000;
46
+ $tgColorSemanticSuccessDefault: #1a7f37;
47
+ $tgColorSemanticSuccessSubtle: #dafbe1;
48
+ $tgColorSemanticWarningDefault: #bf8700;
49
+ $tgColorSemanticWarningSubtle: #fff8c5;
50
+ $tgColorSemanticInfoDefault: #0969da;
51
+ $tgColorSemanticInfoSubtle: #ddf4ff;
52
+ $tgMotionDurationInstant: 50ms; // Instant micro-feedback
53
+ $tgMotionDurationFast: 100ms; // Button press, toggle
54
+ $tgMotionDurationNormal: 200ms; // Default transitions
55
+ $tgMotionDurationSlow: 300ms; // Modals, drawers
56
+ $tgMotionDurationSlower: 500ms; // Page transitions
57
+ $tgMotionEasingDefault: cubic-bezier(0.4, 0, 0.2, 1); // General purpose
58
+ $tgMotionEasingIn: cubic-bezier(0.4, 0, 1, 1); // Entering viewport
59
+ $tgMotionEasingOut: cubic-bezier(0, 0, 0.2, 1); // Leaving viewport
60
+ $tgMotionEasingBounce: cubic-bezier(0.34, 1.56, 0.64, 1); // Playful overshoot
61
+ $tgMotionEasingSpring: cubic-bezier(0.175, 0.885, 0.32, 1.275); // Elastic snap
62
+ $tgBorderRadiusNone: 0;
63
+ $tgBorderRadiusSm: 0.125rem; // 2px
64
+ $tgBorderRadiusMd: 0.375rem; // 6px
65
+ $tgBorderRadiusLg: 0.5rem; // 8px
66
+ $tgBorderRadiusXl: 0.75rem; // 12px
67
+ $tgBorderRadius2xl: 1rem; // 16px
68
+ $tgBorderRadius3xl: 1.5rem; // 24px
69
+ $tgBorderRadiusFull: 9999px;
70
+ $tgBorderWidth0: 0;
71
+ $tgBorderWidth1: 1px;
72
+ $tgBorderWidth2: 2px;
73
+ $tgBorderWidth4: 4px;
74
+ $tgShadowXs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
75
+ $tgShadowSm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
76
+ $tgShadowMd: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
77
+ $tgShadowLg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
78
+ $tgShadowXl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
79
+ $tgShadow2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
80
+ $tgShadowNone: 0 0 #0000;
81
+ $tgZIndexHide: -1;
82
+ $tgZIndexAuto: auto;
83
+ $tgZIndexBase: 0;
84
+ $tgZIndexDocked: 10;
85
+ $tgZIndexDropdown: 1000;
86
+ $tgZIndexSticky: 1100;
87
+ $tgZIndexOverlay: 1200;
88
+ $tgZIndexModal: 1300;
89
+ $tgZIndexPopover: 1400;
90
+ $tgZIndexToast: 1500;
91
+ $tgZIndexTooltip: 1600;
92
+ $tgSpacing0: 0;
93
+ $tgSpacing1: 0.25rem; // 4px
94
+ $tgSpacing2: 0.5rem; // 8px
95
+ $tgSpacing3: 0.75rem; // 12px
96
+ $tgSpacing4: 1rem; // 16px
97
+ $tgSpacing5: 1.25rem; // 20px
98
+ $tgSpacing6: 1.5rem; // 24px
99
+ $tgSpacing7: 1.75rem; // 28px
100
+ $tgSpacing8: 2rem; // 32px
101
+ $tgSpacing9: 2.25rem; // 36px
102
+ $tgSpacing10: 2.5rem; // 40px
103
+ $tgSpacing12: 3rem; // 48px
104
+ $tgSpacing14: 3.5rem; // 56px
105
+ $tgSpacing16: 4rem; // 64px
106
+ $tgSpacing20: 5rem; // 80px
107
+ $tgSpacing24: 6rem; // 96px
108
+ $tgSpacing28: 7rem; // 112px
109
+ $tgSpacing32: 8rem; // 128px
110
+ $tgSpacing36: 9rem; // 144px
111
+ $tgSpacing40: 10rem; // 160px
112
+ $tgSpacing48: 12rem; // 192px
113
+ $tgSpacing56: 14rem; // 224px
114
+ $tgSpacing64: 16rem; // 256px
115
+ $tgSpacingPx: 1px;
116
+ $tgSpacing05: 0.125rem; // 2px
117
+ $tgSpacing15: 0.375rem; // 6px
118
+ $tgSpacing25: 0.625rem; // 10px
119
+ $tgSpacing35: 0.875rem; // 14px
120
+ $tgBreakpointSm: 640px;
121
+ $tgBreakpointMd: 768px;
122
+ $tgBreakpointLg: 1024px;
123
+ $tgBreakpointXl: 1280px;
124
+ $tgBreakpoint2xl: 1536px;
125
+ $tgFontFamilySans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
126
+ $tgFontFamilySerif: 'Georgia', 'Times New Roman', serif;
127
+ $tgFontFamilyMono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
128
+ $tgFontSize2xs: 0.625rem; // 10px
129
+ $tgFontSizeXs: 0.75rem; // 12px
130
+ $tgFontSizeSm: 0.875rem; // 14px
131
+ $tgFontSizeMd: 1rem; // 16px — base
132
+ $tgFontSizeLg: 1.125rem; // 18px
133
+ $tgFontSizeXl: 1.25rem; // 20px
134
+ $tgFontSize2xl: 1.5rem; // 24px
135
+ $tgFontSize3xl: 1.875rem; // 30px
136
+ $tgFontSize4xl: 2.25rem; // 36px
137
+ $tgFontSize5xl: 3rem; // 48px
138
+ $tgFontSize6xl: 3.75rem; // 60px
139
+ $tgFontWeightRegular: 400;
140
+ $tgFontWeightMedium: 500;
141
+ $tgFontWeightSemibold: 600;
142
+ $tgFontWeightBold: 700;
143
+ $tgFontWeightExtrabold: 800;
144
+ $tgFontLineHeightTight: 1.25;
145
+ $tgFontLineHeightSnug: 1.375;
146
+ $tgFontLineHeightNormal: 1.5;
147
+ $tgFontLineHeightRelaxed: 1.625;
148
+ $tgFontLineHeightLoose: 2;
149
+ $tgFontLetterSpacingTighter: -0.05em;
150
+ $tgFontLetterSpacingTight: -0.025em;
151
+ $tgFontLetterSpacingNormal: 0em;
152
+ $tgFontLetterSpacingWide: 0.025em;
153
+ $tgFontLetterSpacingWider: 0.05em;
154
+ $tgFontLetterSpacingWidest: 0.1em;
155
+ $tgColorSemanticPrimaryDefault: $tgColorGreen500;
156
+ $tgColorSemanticPrimaryHover: $tgColorGreen600;
157
+ $tgColorSemanticPrimaryActive: $tgColorGreen700;
158
+ $tgColorSemanticPrimarySubtle: $tgColorGreen50;
159
+ $tgColorSemanticPrimaryMuted: $tgColorGreen100;
160
+ $tgColorSemanticPrimaryOn: $tgColorNeutral0; // Text/icon color on primary background
161
+ $tgColorSemanticSecondaryDefault: $tgColorGold500;
162
+ $tgColorSemanticSecondaryHover: $tgColorGold600;
163
+ $tgColorSemanticSecondaryActive: $tgColorGold700;
164
+ $tgColorSemanticSecondarySubtle: $tgColorGold50;
165
+ $tgColorSemanticSecondaryMuted: $tgColorGold100;
166
+ $tgColorSemanticSecondaryOn: $tgColorNeutral900;
167
+ $tgColorSemanticDangerDefault: $tgColorRed500;
168
+ $tgColorSemanticDangerHover: $tgColorRed600;
169
+ $tgColorSemanticDangerActive: $tgColorRed700;
170
+ $tgColorSemanticDangerSubtle: $tgColorRed50;
171
+ $tgColorSemanticDangerMuted: $tgColorRed100;
172
+ $tgColorSemanticDangerOn: $tgColorNeutral0;
173
+ $tgColorSemanticSuccessOn: $tgColorNeutral0;
174
+ $tgColorSemanticWarningOn: $tgColorNeutral900;
175
+ $tgColorSemanticInfoOn: $tgColorNeutral0;
176
+ $tgColorSemanticSurfacePage: $tgColorNeutral0;
177
+ $tgColorSemanticSurfaceRaised: $tgColorNeutral0;
178
+ $tgColorSemanticSurfaceOverlay: $tgColorNeutral0;
179
+ $tgColorSemanticSurfaceSunken: $tgColorNeutral50;
180
+ $tgColorSemanticTextPrimary: $tgColorNeutral900;
181
+ $tgColorSemanticTextSecondary: $tgColorNeutral600;
182
+ $tgColorSemanticTextDisabled: $tgColorNeutral400;
183
+ $tgColorSemanticTextInverse: $tgColorNeutral0;
184
+ $tgColorSemanticBorderDefault: $tgColorNeutral200;
185
+ $tgColorSemanticBorderStrong: $tgColorNeutral400;
186
+ $tgColorSemanticBorderFocus: $tgColorGreen500;
package/package.json ADDED
@@ -0,0 +1,53 @@
1
+ {
2
+ "name": "@teranga-ds/tokens",
3
+ "version": "0.1.0",
4
+ "description": "Design tokens for the Teranga Design System — Government of Senegal",
5
+ "keywords": [
6
+ "design-tokens",
7
+ "teranga",
8
+ "senegal",
9
+ "css-variables",
10
+ "design-system",
11
+ "government"
12
+ ],
13
+ "license": "MIT",
14
+ "author": "Teranga DS <teranga-ds@gov.sn> (https://github.com/mahykane/teranga-design-systems)",
15
+ "repository": {
16
+ "type": "git",
17
+ "url": "https://github.com/mahykane/teranga-design-systems.git",
18
+ "directory": "packages/tokens"
19
+ },
20
+ "homepage": "https://github.com/mahykane/teranga-design-systems/tree/main/packages/tokens#readme",
21
+ "bugs": {
22
+ "url": "https://github.com/mahykane/teranga-design-systems/issues"
23
+ },
24
+ "publishConfig": {
25
+ "access": "public"
26
+ },
27
+ "sideEffects": false,
28
+ "main": "dist/index.js",
29
+ "types": "dist/index.d.ts",
30
+ "exports": {
31
+ ".": {
32
+ "import": "./dist/index.js",
33
+ "require": "./dist/index.cjs",
34
+ "types": "./dist/index.d.ts"
35
+ },
36
+ "./css": "./dist/teranga-tokens.css",
37
+ "./scss": "./dist/teranga-tokens.scss",
38
+ "./json": "./dist/teranga-tokens.json",
39
+ "./js": "./dist/teranga-tokens.js"
40
+ },
41
+ "files": [
42
+ "dist"
43
+ ],
44
+ "devDependencies": {
45
+ "@tokens-studio/sd-transforms": "^1.2.8",
46
+ "style-dictionary": "^4.1.4"
47
+ },
48
+ "scripts": {
49
+ "build": "node style-dictionary.config.js",
50
+ "dev": "node style-dictionary.config.js --watch",
51
+ "clean": "rm -rf dist"
52
+ }
53
+ }