@pantheon-systems/pds-design-tokens 2.0.0-alpha.6 → 2.0.0-alpha.60

package/README.md

@@ -30,9 +30,8 @@ Import the token files you need:
 @import '@pantheon-systems/pds-design-tokens/build/css/variables.light.css';
 @import '@pantheon-systems/pds-design-tokens/build/css/variables.dark.css';
 
-/* Required: Typography scale (both files) */
-@import '@pantheon-systems/pds-design-tokens/build/css/variables.compact.css';
-@import '@pantheon-systems/pds-design-tokens/build/css/variables.expanded.css';
+/* Required: Typography sizes */
+@import '@pantheon-systems/pds-design-tokens/build/css/variables.typography.css';
 ```
 
 Use tokens in your styles:
@@ -42,19 +41,28 @@ Use tokens in your styles:
 	color: var(--pds-color-fg-default);
 	background: var(--pds-color-bg-default);
 	padding: var(--pds-spacing-m);
-	font-family: var(--pds-typography-ff-sans);
+	font-family: var(--pds-typography-ff-default);
 }
 ```
 
-#### Using Breakpoints (Optional)
+#### Using Breakpoints
 
-Breakpoint custom media queries require PostCSS configuration. Install the required plugins:
+Breakpoint custom media queries require PostCSS configuration and a CSS import.
+
+**Step 1: Install required plugins**
 
 ```bash
 npm install postcss-custom-media @csstools/postcss-global-data --save-dev
 ```
 
-Configure PostCSS to load breakpoints globally:
+**Step 2: Import breakpoints in your global CSS file**
+
+```css
+/* In your main/global CSS file */
+@import '@pantheon-systems/pds-design-tokens/build/css/breakpoints.css';
+```
+
+**Step 3: Configure PostCSS**
 
 ```javascript
 // postcss.config.js
@@ -74,7 +82,7 @@ export default {
 };
 ```
 
-Use breakpoints in your CSS without imports:
+**Step 4: Use breakpoints in your CSS**
 
 ```css
 .my-component {
@@ -90,39 +98,60 @@ Use breakpoints in your CSS without imports:
 
 ### JavaScript Constants
 
-Import tokens as JavaScript constants:
+Import tokens as JavaScript constants from the appropriate file:
 
 ```javascript
+// Import global tokens (colors, borders, spacing, z-index, etc.)
 import {
-	COLOR_FG_DEFAULT,
+	BORDER_RADIUS_DEFAULT,
 	SPACING_M,
+	Z_INDEX_MODAL,
+} from '@pantheon-systems/pds-design-tokens/build/js/variables.global.js';
+
+// Import typography tokens (font families, weights, sizes, line heights, letter spacing)
+import {
 	TYPOGRAPHY_FF_SANS,
+	TYPOGRAPHY_FW_BOLD,
 	TYPOGRAPHY_SIZE_XL,
-} from '@pantheon-systems/pds-design-tokens/build/js/variables.js';
+	TYPOGRAPHY_LH_M,
+} from '@pantheon-systems/pds-design-tokens/build/js/variables.typography.js';
 
 const styles = {
-	color: COLOR_FG_DEFAULT,
 	padding: SPACING_M,
 	fontFamily: TYPOGRAPHY_FF_SANS,
+	fontWeight: TYPOGRAPHY_FW_BOLD,
 	fontSize: TYPOGRAPHY_SIZE_XL,
+	lineHeight: TYPOGRAPHY_LH_M,
+	borderRadius: BORDER_RADIUS_DEFAULT,
 };
 ```
 
-**Note:** All values are exported as strings with units (e.g., `SPACING_M = "1rem"`).
+**Note:** All values are exported as strings with units (e.g., `SPACING_M = "1rem"`, `TYPOGRAPHY_SIZE_XL = "1.25rem"`).
+
+**File organization:**
+
+- `variables.global.js` - Global tokens (colors, borders, spacing scale, z-index, animations, etc.)
+- `variables.typography.js` - Typography tokens (font families, weights, sizes, line heights, letter spacing)
 
 #### Spacing Scale Object
 
-For convenience, spacing scale tokens (8XS → 8XL) are also available as a grouped object:
+For convenience, spacing scale tokens (8XS → 8XL) are available as a grouped object in the global file:
 
 ```javascript
-import { SPACING } from '@pantheon-systems/pds-design-tokens/build/js/variables.js';
+import { SPACING } from '@pantheon-systems/pds-design-tokens/build/js/variables.global.js';
 
-// Access scale tokens via the object
 const padding = SPACING.SPACING_M; // "1rem"
 const margin = SPACING.SPACING_2XL; // "1.728rem"
+```
+
+#### Typography Scale Object
 
-// Or use individual imports
-import { SPACING_M, SPACING_2XL } from '@pantheon-systems/pds-design-tokens/build/js/variables.js';
+Typography size tokens are available as a grouped object:
+
+```javascript
+import { TYPOGRAPHY_SIZE } from '@pantheon-systems/pds-design-tokens/build/js/variables.typography.js';
+
+const fontSize = TYPOGRAPHY_SIZE.TYPOGRAPHY_SIZE_XL; // "1.25rem"
 ```
 
 ### JSON
@@ -135,12 +164,12 @@ import tokens from '@pantheon-systems/pds-design-tokens/build/json/tokens.json';
 
 ## Available Formats
 
-| Format                    | Location       | Use Case                                |
-| ------------------------- | -------------- | --------------------------------------- |
-| **CSS Custom Properties** | `build/css/`   | Styling (recommended)                   |
-| **JavaScript Constants**  | `build/js/`    | JS/TS when CSS variables can't be used  |
-| **JSON**                  | `build/json/`  | Programmatic access, build tools        |
-| **Figma**                 | `build/figma/` | Design tool integration                 |
+| Format                    | Location       | Use Case                               |
+| ------------------------- | -------------- | -------------------------------------- |
+| **CSS Custom Properties** | `build/css/`   | Styling (recommended)                  |
+| **JavaScript Constants**  | `build/js/`    | JS/TS when CSS variables can't be used |
+| **JSON**                  | `build/json/`  | Programmatic access, build tools       |
+| **Figma**                 | `build/figma/` | Design tool integration                |
 
 ## Theming
 
@@ -160,22 +189,6 @@ Control color themes with the `data-theme` attribute:
 </body>
 ```
 
-### Type Scale (Compact/Expanded)
-
-Control typography scale with the `data-scale` attribute:
-
-```html
-<!-- Compact scale (default) -->
-<body data-scale="compact">
-	<h1 style="font-size: var(--pds-typography-size-xl);">Compact</h1>
-</body>
-
-<!-- Expanded scale -->
-<body data-scale="expanded">
-	<h1 style="font-size: var(--pds-typography-size-xl);">Expanded</h1>
-</body>
-```
-
 ## Token Categories
 
 - **Animation** - Durations, delays, timing functions

package/build/css/breakpoints.css

@@ -3,11 +3,11 @@
  */
 
 /* Standard min-width queries (mobile-first) */
-@custom-media --pds-bp-md (min-width: 768px);
-@custom-media --pds-bp-lg (min-width: 1280px);
+@custom-media --pds-bp-m (min-width: 768px);
+@custom-media --pds-bp-l (min-width: 1280px);
 @custom-media --pds-bp-xl (min-width: 1440px);
 
 /* Range queries (specific breakpoint only) */
-@custom-media --pds-bp-sm-only (max-width: 767px);
-@custom-media --pds-bp-md-only (min-width: 768px) and (max-width: 1279px);
-@custom-media --pds-bp-lg-only (min-width: 1280px) and (max-width: 1439px);
+@custom-media --pds-bp-s-only (max-width: 767px);
+@custom-media --pds-bp-m-only (min-width: 768px) and (max-width: 1279px);
+@custom-media --pds-bp-l-only (min-width: 1280px) and (max-width: 1439px);

package/build/css/fonts.css

@@ -1 +1 @@
-@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Mona+Sans:ital,wght@0,200..900;1,200..900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Inter+Tight:ital,wght@0,100..900;1,100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');