@teranga-ds/tokens 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Government of Senegal / République du Sénégal
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,86 @@
+# @teranga-ds/tokens
+
+<p align="center">
+  <strong>Design tokens for the Teranga Design System 🇸🇳</strong>
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@teranga-ds/tokens"><img src="https://img.shields.io/npm/v/@teranga-ds/tokens?color=%23FDEF42" alt="npm" /></a>
+  <a href="https://github.com/mahykane/teranga-design-systems/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-MIT-green" alt="MIT" /></a>
+</p>
+
+Design tokens (colors, typography, spacing, shapes) for the Teranga Design System, available in CSS, SCSS, JSON, and JavaScript formats.
+
+## Installation
+
+```bash
+npm install @teranga-ds/tokens
+```
+
+## Usage
+
+### CSS
+
+```css
+@import '@teranga-ds/tokens/css';
+
+.my-element {
+  color: var(--tg-color-green-600);
+  font-family: var(--tg-font-family-sans);
+  padding: var(--tg-spacing-md);
+  border-radius: var(--tg-radius-md);
+}
+```
+
+### SCSS
+
+```scss
+@import '@teranga-ds/tokens/scss';
+```
+
+### JavaScript / TypeScript
+
+```js
+import tokens from '@teranga-ds/tokens/json';
+```
+
+### JSON
+
+```js
+const tokens = require('@teranga-ds/tokens/json');
+```
+
+## Token Categories
+
+### Colors
+
+Inspired by the Senegalese flag 🇸🇳:
+
+| Palette | Example Token | Hex |
+|---------|--------------|-----|
+| Green | `--tg-color-green-600` | `#2D6A4F` |
+| Gold | `--tg-color-gold-500` | `#D4A373` |
+| Red | `--tg-color-red-600` | `#C1121F` |
+| Terracotta | `--tg-color-terracotta-500` | `#C17817` |
+| Baobab | `--tg-color-baobab-500` | `#8B6914` |
+| Neutral | `--tg-color-neutral-50` → `--tg-color-neutral-900` | Grayscale |
+
+### Typography
+
+| Token | Value |
+|-------|-------|
+| `--tg-font-family-sans` | Plus Jakarta Sans |
+| `--tg-font-family-display` | DM Serif Display |
+| `--tg-font-family-serif` | Lora |
+
+### Spacing
+
+`--tg-spacing-xs` (4px) → `--tg-spacing-3xl` (64px)
+
+### Shape
+
+`--tg-radius-sm` → `--tg-radius-full`
+
+## License
+
+MIT © [Teranga DS Contributors](https://github.com/mahykane/teranga-design-systems)

package/dist/index.d.ts

@@ -0,0 +1,244 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export const colorGreen50: string;
+export const colorGreen100: string;
+export const colorGreen200: string;
+export const colorGreen300: string;
+export const colorGreen400: string;
+/** Senegalese flag green — primary brand color */
+export const colorGreen500: string;
+export const colorGreen600: string;
+export const colorGreen700: string;
+export const colorGreen800: string;
+export const colorGreen900: string;
+export const colorGold50: string;
+export const colorGold100: string;
+export const colorGold200: string;
+export const colorGold300: string;
+export const colorGold400: string;
+/** Senegalese flag gold/yellow */
+export const colorGold500: string;
+export const colorGold600: string;
+export const colorGold700: string;
+export const colorGold800: string;
+export const colorGold900: string;
+export const colorRed50: string;
+export const colorRed100: string;
+export const colorRed200: string;
+export const colorRed300: string;
+export const colorRed400: string;
+/** Senegalese flag red — danger/error color */
+export const colorRed500: string;
+export const colorRed600: string;
+export const colorRed700: string;
+export const colorRed800: string;
+export const colorRed900: string;
+export const colorNeutral0: string;
+export const colorNeutral50: string;
+export const colorNeutral100: string;
+export const colorNeutral200: string;
+export const colorNeutral300: string;
+export const colorNeutral400: string;
+export const colorNeutral500: string;
+export const colorNeutral600: string;
+export const colorNeutral700: string;
+export const colorNeutral800: string;
+export const colorNeutral900: string;
+export const colorNeutral1000: string;
+export const colorSemanticPrimaryDefault: string;
+export const colorSemanticPrimaryHover: string;
+export const colorSemanticPrimaryActive: string;
+export const colorSemanticPrimarySubtle: string;
+export const colorSemanticPrimaryMuted: string;
+/** Text/icon color on primary background */
+export const colorSemanticPrimaryOn: string;
+export const colorSemanticSecondaryDefault: string;
+export const colorSemanticSecondaryHover: string;
+export const colorSemanticSecondaryActive: string;
+export const colorSemanticSecondarySubtle: string;
+export const colorSemanticSecondaryMuted: string;
+export const colorSemanticSecondaryOn: string;
+export const colorSemanticDangerDefault: string;
+export const colorSemanticDangerHover: string;
+export const colorSemanticDangerActive: string;
+export const colorSemanticDangerSubtle: string;
+export const colorSemanticDangerMuted: string;
+export const colorSemanticDangerOn: string;
+export const colorSemanticSuccessDefault: string;
+export const colorSemanticSuccessSubtle: string;
+export const colorSemanticSuccessOn: string;
+export const colorSemanticWarningDefault: string;
+export const colorSemanticWarningSubtle: string;
+export const colorSemanticWarningOn: string;
+export const colorSemanticInfoDefault: string;
+export const colorSemanticInfoSubtle: string;
+export const colorSemanticInfoOn: string;
+export const colorSemanticSurfacePage: string;
+export const colorSemanticSurfaceRaised: string;
+export const colorSemanticSurfaceOverlay: string;
+export const colorSemanticSurfaceSunken: string;
+export const colorSemanticTextPrimary: string;
+export const colorSemanticTextSecondary: string;
+export const colorSemanticTextDisabled: string;
+export const colorSemanticTextInverse: string;
+export const colorSemanticBorderDefault: string;
+export const colorSemanticBorderStrong: string;
+export const colorSemanticBorderFocus: string;
+/** Instant micro-feedback */
+export const motionDurationInstant: string;
+/** Button press, toggle */
+export const motionDurationFast: string;
+/** Default transitions */
+export const motionDurationNormal: string;
+/** Modals, drawers */
+export const motionDurationSlow: string;
+/** Page transitions */
+export const motionDurationSlower: string;
+/** General purpose */
+export const motionEasingDefault: string;
+/** Entering viewport */
+export const motionEasingIn: string;
+/** Leaving viewport */
+export const motionEasingOut: string;
+/** Playful overshoot */
+export const motionEasingBounce: string;
+/** Elastic snap */
+export const motionEasingSpring: string;
+export const borderRadiusNone: string;
+/** 2px */
+export const borderRadiusSm: string;
+/** 6px */
+export const borderRadiusMd: string;
+/** 8px */
+export const borderRadiusLg: string;
+/** 12px */
+export const borderRadiusXl: string;
+/** 16px */
+export const borderRadius2xl: string;
+/** 24px */
+export const borderRadius3xl: string;
+export const borderRadiusFull: string;
+export const borderWidth0: string;
+export const borderWidth1: string;
+export const borderWidth2: string;
+export const borderWidth4: string;
+export const shadowXs: string;
+export const shadowSm: string;
+export const shadowMd: string;
+export const shadowLg: string;
+export const shadowXl: string;
+export const shadow2xl: string;
+export const shadowNone: string;
+export const zIndexHide: string;
+export const zIndexAuto: string;
+export const zIndexBase: string;
+export const zIndexDocked: string;
+export const zIndexDropdown: string;
+export const zIndexSticky: string;
+export const zIndexOverlay: string;
+export const zIndexModal: string;
+export const zIndexPopover: string;
+export const zIndexToast: string;
+export const zIndexTooltip: string;
+export const spacing0: string;
+/** 4px */
+export const spacing1: string;
+/** 8px */
+export const spacing2: string;
+/** 12px */
+export const spacing3: string;
+/** 16px */
+export const spacing4: string;
+/** 20px */
+export const spacing5: string;
+/** 24px */
+export const spacing6: string;
+/** 28px */
+export const spacing7: string;
+/** 32px */
+export const spacing8: string;
+/** 36px */
+export const spacing9: string;
+/** 40px */
+export const spacing10: string;
+/** 48px */
+export const spacing12: string;
+/** 56px */
+export const spacing14: string;
+/** 64px */
+export const spacing16: string;
+/** 80px */
+export const spacing20: string;
+/** 96px */
+export const spacing24: string;
+/** 112px */
+export const spacing28: string;
+/** 128px */
+export const spacing32: string;
+/** 144px */
+export const spacing36: string;
+/** 160px */
+export const spacing40: string;
+/** 192px */
+export const spacing48: string;
+/** 224px */
+export const spacing56: string;
+/** 256px */
+export const spacing64: string;
+export const spacingPx: string;
+/** 2px */
+export const spacing05: string;
+/** 6px */
+export const spacing15: string;
+/** 10px */
+export const spacing25: string;
+/** 14px */
+export const spacing35: string;
+export const breakpointSm: string;
+export const breakpointMd: string;
+export const breakpointLg: string;
+export const breakpointXl: string;
+export const breakpoint2xl: string;
+export const fontFamilySans: string;
+export const fontFamilySerif: string;
+export const fontFamilyMono: string;
+/** 10px */
+export const fontSize2xs: string;
+/** 12px */
+export const fontSizeXs: string;
+/** 14px */
+export const fontSizeSm: string;
+/** 16px — base */
+export const fontSizeMd: string;
+/** 18px */
+export const fontSizeLg: string;
+/** 20px */
+export const fontSizeXl: string;
+/** 24px */
+export const fontSize2xl: string;
+/** 30px */
+export const fontSize3xl: string;
+/** 36px */
+export const fontSize4xl: string;
+/** 48px */
+export const fontSize5xl: string;
+/** 60px */
+export const fontSize6xl: string;
+export const fontWeightRegular: string;
+export const fontWeightMedium: string;
+export const fontWeightSemibold: string;
+export const fontWeightBold: string;
+export const fontWeightExtrabold: string;
+export const fontLineHeightTight: string;
+export const fontLineHeightSnug: string;
+export const fontLineHeightNormal: string;
+export const fontLineHeightRelaxed: string;
+export const fontLineHeightLoose: string;
+export const fontLetterSpacingTighter: string;
+export const fontLetterSpacingTight: string;
+export const fontLetterSpacingNormal: string;
+export const fontLetterSpacingWide: string;
+export const fontLetterSpacingWider: string;
+export const fontLetterSpacingWidest: string;