@autonomys/design-tokens 1.4.18 → 1.4.22

package/LICENSE

@@ -0,0 +1,18 @@
+MIT License
+
+Copyright (c) 2024 Autonomys Network (autonomys.xyz)
+
+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:
+
+1. **Attribution**: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+2. **No Warranty**: 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.
+
+3. **Limitation of Liability**: 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

@@ -4,11 +4,10 @@ A comprehensive design token system for Auto, providing consistent styling acros
 
 ## Features
 
-- CSS custom properties (variables) for colors, typography, spacing, and more
-- Utility classes with an `auto-` prefix for easy styling
+- Design tokens prefixed with `auto-` for consistent naming
 - Tailwind CSS integration
 - Dark theme support
-- Explorer-specific styles
+- Drive and Explorer specific styles
 
 ## Installation
 
@@ -18,80 +17,87 @@ npm install @autonomys/design-tokens
 yarn add @autonomys/design-tokens
 ```
 
-## Usage
-
-### Import All Styles
+## Usage with CSS
 
 ```js
-// Import all styles (variables + utility classes)
+// global.css
+
 import '@autonomys/design-tokens/dist/index.css'
 ```
 
-### Import Specific Style Categories
+## Usage with Tailwind CSS
 
-```js
-// Import only CSS variables without utility classes
-import '@autonomys/design-tokens/dist/css/variables.css'
+In your `tailwind.config.js` or `tailwind.config.ts` file:
 
-// Import only utility classes without variables
-import '@autonomys/design-tokens/dist/css/utilities.css'
+```js
+// JavaScript (CommonJS)
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  theme: {
+    extend: require('@autonomys/design-tokens').autoTokens,
+  },
+}
 ```
 
-## Building the Tokens
+```ts
+// TypeScript (ESM)
+import type { Config } from 'tailwindcss'
+import { autoTokens } from '@autonomys/design-tokens'
 
-To build the design tokens:
+const config: Config = {
+  theme: {
+    extend: autoTokens,
+  },
+}
 
-```bash
-npm run build
+export default config
 ```
 
-This will:
+## Available Tokens
 
-1. Compile TypeScript tokens to JavaScript
-2. Generate CSS files:
-   - `index.css`: Complete bundle with all variables and utility classes
-   - `css/variables.css`: Only CSS custom properties
-   - `css/utilities.css`: Only utility classes
-3. Output everything to the `dist` folder
+### Color Tokens
 
-## Available Classes
+- Drive colors: `auto-drive-primary`, `auto-drive-accent`, etc.
+- Explorer colors: `auto-explorer-grayDark`, `auto-explorer-blueAccent`, etc.
 
-### Color Classes
+### Typography Tokens
 
-- Text colors: `auto-text-primary`, `auto-text-secondary`, etc.
-- Background colors: `auto-bg-primary`, `auto-bg-secondary`, etc.
-- Border colors: `auto-border-primary`, `auto-border-secondary`, etc.
-- Button styles: `auto-button-primary`, `auto-button-secondary`, etc.
+- Font families: `auto-sans`, `auto-mono`, `auto-display`, etc.
+- Font sizes: `auto-xs`, `auto-sm`, `auto-base`, etc.
+- Font weights: `auto-light`, `auto-normal`, `auto-bold`, etc.
+- Line heights: `auto-tight`, `auto-normal`, `auto-relaxed`, etc.
+- Letter spacings: `auto-tight`, `auto-normal`, `auto-wide`, etc.
 
-### Typography Classes
+### Shadow Tokens
 
-- Headings: `auto-heading-1`, `auto-heading-2`, etc.
-- Body text: `auto-body-default`, `auto-body-small`, etc.
-- Font sizes: `auto-text-xs`, `auto-text-sm`, etc.
-- Font weights: `auto-font-light`, `auto-font-bold`, etc.
+- Box shadows: `auto-sm`, `auto-md`, `auto-lg`, etc.
+- Component shadows: `auto-button`, `auto-card`, `auto-modal`, etc.
 
-### Spacing Classes
+### Spacing Tokens
 
-- Margin: `auto-m-1`, `auto-mt-2`, `auto-mx-4`, etc.
-- Padding: `auto-p-1`, `auto-pt-2`, `auto-px-4`, etc.
-- Border radius: `auto-rounded`, `auto-rounded-lg`, etc.
+- Spacing scale: `auto-1`, `auto-2`, `auto-4`, etc.
+- Border radius: `auto-none`, `auto-sm`, `auto-md`, etc.
+- Breakpoints: `auto-sm`, `auto-md`, `auto-lg`, etc.
 
-### Shadow Classes
+## Using Tokens in Components
 
-- Shadows: `auto-shadow-sm`, `auto-shadow-lg`, etc.
-
-### Explorer-Specific Classes
-
-- Explorer background colors: `auto-explorer-bg-*`
-- Explorer text colors: `auto-explorer-text-*`
-- Explorer gradients: `auto-explorer-bg-gradient-*`, `auto-explorer-button-gradient-*`, etc.
+```jsx
+// Example React component using Tailwind with Auto tokens
+function Button({ children }) {
+  return (
+    <button className='bg-auto-drive-primary text-white hover:bg-auto-drive-primaryHover font-auto-semibold py-2 px-4 rounded-auto-lg shadow-auto-button'>
+      {children}
+    </button>
+  )
+}
+```
 
-## Theme Support
+## Building the Tokens
 
-Apply dark theme by adding the `auto-theme-dark` class to a container:
+To build the design tokens:
 
-```html
-<div class="auto-theme-dark">
-  <!-- Content will use dark theme styles -->
-</div>
+```bash
+npm run build
 ```
+
+This will compile the TypeScript tokens and generate a distribution bundle that can be used in your project.

package/dist/generate-token.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Convert all design tokens to a format compatible with Tailwind CSS
+ * @returns Object containing all design tokens with 'auto-' prefix
+ */
+export declare function convertTokens(): Record<string, any>;
+export default convertTokens;