@pantheon-systems/pds-design-tokens 1.1.3 → 2.0.0-alpha.1

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 (18) hide show
  1. package/README.md +140 -18
  2. package/build/css/fonts.css +1 -0
  3. package/build/css/variables.compact.css +17 -0
  4. package/build/css/variables.dark.css +226 -0
  5. package/build/css/variables.expanded.css +17 -0
  6. package/build/css/variables.global.css +83 -0
  7. package/build/css/variables.light.css +248 -0
  8. package/build/figma/tokens.json +11482 -0
  9. package/build/js/variables.js +109 -0
  10. package/build/json/tokens.json +1892 -0
  11. package/package.json +12 -3
  12. package/build/css/pds-design-tokens-dark-mode.css +0 -226
  13. package/build/css/pds-design-tokens-light-mode.css +0 -335
  14. package/build/css/pds-design-tokens.css +0 -130
  15. package/build/figma/pds-design-tokens-figma.json +0 -19481
  16. package/build/json/pds-design-tokens-dark-mode.json +0 -6424
  17. package/build/json/pds-design-tokens-light-mode.json +0 -8906
  18. package/build/json/pds-design-tokens.json +0 -2850
package/README.md CHANGED
@@ -1,33 +1,155 @@
1
- # pds-design-tokens
1
+ # PDS Design Tokens
2
2
 
3
- Design Tokens for the Pantheon Design System
3
+ [![npm (scoped)](https://img.shields.io/npm/v/@pantheon-systems/pds-design-tokens)](https://www.npmjs.com/package/@pantheon-systems/pds-design-tokens)
4
+ [![License: GPL-3.0](https://img.shields.io/badge/License-GPL%203.0-blue.svg)](https://opensource.org/licenses/GPL-3.0)
4
5
 
5
- The repository uses [Style Dictionary](https://amzn.github.io/style-dictionary) as its foundational framework.
6
+ Design Tokens for the Pantheon Design System - a centralized source of truth for design values including colors, spacing, typography, and more.
6
7
 
7
- Compiled tokens can be found in the `build` directory.
8
+ > **For contributors:** See the [Contributor Guide](.github/README.md) for development setup and contribution guidelines.
8
9
 
9
- ## Output Types
10
+ ## Installation
10
11
 
11
- PDS Design Tokens are provided in the following formats:
12
+ ```bash
13
+ npm install @pantheon-systems/pds-design-tokens
14
+ ```
12
15
 
13
- - CSS Custom Properties
14
- - JSON
15
- - Figma (formatted to sync to Figma styles)
16
+ ## Usage
16
17
 
17
- ## Technology Agnostic
18
+ ### CSS Custom Properties (Recommended)
18
19
 
19
- Design tokens are specifically intended for the purpose of design and will be translated into various technical formats as needed.
20
+ Import the token files you need:
20
21
 
21
- By default, tokens values should be unitless unless that unit is universal (such as percentages). Many PDS design tokens will be assigned a default unit type under the hood, but those unit designations will only be provided for the output formats where appropriate.
22
+ ```css
23
+ /* Required: Fonts */
24
+ @import '@pantheon-systems/pds-design-tokens/build/css/fonts.css';
22
25
 
23
- For example, CSS variable tokens will be output with unit-specific values. While JSON output tokens will always be unitless. However, if a default unit is assigned it will be available via the `defaultUnit` key for any token object.
26
+ /* Required: Global tokens */
27
+ @import '@pantheon-systems/pds-design-tokens/build/css/variables.global.css';
24
28
 
25
- ## Public and Private Tokens
29
+ /* Required: Choose your theme */
30
+ @import '@pantheon-systems/pds-design-tokens/build/css/variables.light.css';
31
+ @import '@pantheon-systems/pds-design-tokens/build/css/variables.dark.css';
26
32
 
27
- All tokens are considered private unless specifically designated as public. All tokens may be accessed via JSON token files, but only public tokens will be output to CSS stylesheets.
33
+ /* Required: Typography scale (both files) */
34
+ @import '@pantheon-systems/pds-design-tokens/build/css/variables.compact.css';
35
+ @import '@pantheon-systems/pds-design-tokens/build/css/variables.expanded.css';
36
+ ```
28
37
 
29
- We typically only designate tokens as public when they need to be available to override for theming purposes such as switching between light and dark mode or for other custom themes.
38
+ Use tokens in your styles:
30
39
 
31
- ## Color Modes
40
+ ```css
41
+ .my-component {
42
+ color: var(--pds-color-fg-default);
43
+ background: var(--pds-color-bg-default);
44
+ padding: var(--pds-spacing-M);
45
+ font-family: var(--pds-typography-ff-sans);
46
+ }
47
+ ```
32
48
 
33
- Each color or elevation token is designated as light-mode or dark-mode and will be assigned accordingly using a data-theme attribute. All non-color tokens are considered to be global tokens.
49
+ ### JavaScript Constants
50
+
51
+ Import tokens as JavaScript constants:
52
+
53
+ ```javascript
54
+ import {
55
+ COLOR_FG_DEFAULT,
56
+ SPACING_M,
57
+ TYPOGRAPHY_FF_SANS,
58
+ TYPOGRAPHY_SIZE_XL,
59
+ } from '@pantheon-systems/pds-design-tokens/build/js/variables.js';
60
+
61
+ const styles = {
62
+ color: COLOR_FG_DEFAULT,
63
+ padding: SPACING_M,
64
+ fontFamily: TYPOGRAPHY_FF_SANS,
65
+ fontSize: TYPOGRAPHY_SIZE_XL,
66
+ };
67
+ ```
68
+
69
+ ### JSON
70
+
71
+ Access token metadata programmatically:
72
+
73
+ ```javascript
74
+ import tokens from '@pantheon-systems/pds-design-tokens/build/json/tokens.json';
75
+ ```
76
+
77
+ ## Available Formats
78
+
79
+ | Format | Location | Use Case |
80
+ | ------------------------- | -------------- | --------------------------------------- |
81
+ | **CSS Custom Properties** | `build/css/` | Styling (recommended) |
82
+ | **JavaScript Constants** | `build/js/` | JS/TS when CSS variables can't be used |
83
+ | **JSON** | `build/json/` | Programmatic access, build tools |
84
+ | **Figma** | `build/figma/` | Design tool integration |
85
+
86
+ ## Theming
87
+
88
+ ### Color Modes (Light/Dark)
89
+
90
+ Control color themes with the `data-theme` attribute:
91
+
92
+ ```html
93
+ <!-- Light mode (default) -->
94
+ <body>
95
+ <div style="background: var(--pds-color-bg-default);">Light theme</div>
96
+ </body>
97
+
98
+ <!-- Dark mode -->
99
+ <body data-theme="dark">
100
+ <div style="background: var(--pds-color-bg-default);">Dark theme</div>
101
+ </body>
102
+ ```
103
+
104
+ ### Type Scale (Compact/Expanded)
105
+
106
+ Control typography scale with the `data-scale` attribute:
107
+
108
+ ```html
109
+ <!-- Compact scale (default) -->
110
+ <body data-scale="compact">
111
+ <h1 style="font-size: var(--pds-typography-size-xl);">Compact</h1>
112
+ </body>
113
+
114
+ <!-- Expanded scale -->
115
+ <body data-scale="expanded">
116
+ <h1 style="font-size: var(--pds-typography-size-xl);">Expanded</h1>
117
+ </body>
118
+ ```
119
+
120
+ ## Token Categories
121
+
122
+ - **Animation** - Durations, delays, timing functions
123
+ - **Border** - Widths, radii
124
+ - **Color** - Complete color system with light/dark mode support
125
+ - **Container** - Modal widths, max-widths
126
+ - **Elevation** - Shadow values
127
+ - **Gradient** - Gradient definitions
128
+ - **Spacing** - Spacing scale (8XS to 8XL)
129
+ - **Typography** - Font families, sizes, weights, line heights, letter spacing
130
+ - **Z-index** - Layering system
131
+
132
+ ## Migration from v1.x
133
+
134
+ Upgrading from v1? See the [Migration Guide](./guides/MIGRATION-v2.md) for:
135
+
136
+ - Renamed CSS files (`pds-design-tokens.css` → `variables.global.css`)
137
+ - Updated token names
138
+ - Removed tokens and replacements
139
+ - Format changes (e.g., letter-spacing now uses percentages)
140
+
141
+ ## Resources
142
+
143
+ - **[NPM Package](https://www.npmjs.com/package/@pantheon-systems/pds-design-tokens)** - View on npm
144
+ - **[Contributor Guide](.github/README.md)** - Setup, development, and contribution guidelines
145
+ - **[Migration Guide](./guides/MIGRATION-v2.md)** - v1 to v2 upgrade instructions
146
+ - **[Release Workflow](./RELEASE-WORKFLOW.md)** - Version strategy and release process
147
+ - **[Report Issues](https://github.com/pantheon-systems/pds-design-tokens/issues)** - Bug reports and feature requests
148
+
149
+ ## License
150
+
151
+ [GPL-3.0-or-later](./LICENSE)
152
+
153
+ ---
154
+
155
+ Maintained by [Pantheon Systems](https://github.com/pantheon-systems)
package/build/css/fonts.css ADDED
@@ -0,0 +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');
package/build/css/variables.compact.css ADDED
@@ -0,0 +1,17 @@
1
+ :root, [data-scale="compact"] {
2
+ --pds-typography-size-code-block: 0.9rem;
3
+ --pds-typography-size-7xl: 4.3rem;
4
+ --pds-typography-size-6xl: 3.583rem;
5
+ --pds-typography-size-5xl: 2.986rem;
6
+ --pds-typography-size-4xl: 2.488rem;
7
+ --pds-typography-size-3xl: 2.074rem;
8
+ --pds-typography-size-2xl: 1.728rem;
9
+ --pds-typography-size-xl: 1.44rem;
10
+ --pds-typography-size-l: 1.2rem;
11
+ --pds-typography-size-m: 1rem;
12
+ --pds-typography-size-s: 0.833rem;
13
+ --pds-typography-size-xs: 0.694rem;
14
+ --pds-typography-size-2xs: 0.578rem;
15
+ --pds-typography-size-default: 1rem;
16
+ --pds-typography-size-input-label: 1rem;
17
+ }
package/build/css/variables.dark.css ADDED
@@ -0,0 +1,226 @@
1
+ [data-theme="dark"] {
2
+ --pds-color-badge-indicator-default-background: oklch(0.8853 0 0);
3
+ --pds-color-badge-indicator-default-foreground: oklch(0.2046 0 0);
4
+ --pds-color-badge-indicator-silver-background: oklch(0.5991 0.0051 258.33);
5
+ --pds-color-badge-indicator-silver-foreground: oklch(0.2929 0.0039 264.51);
6
+ --pds-color-badge-indicator-gold-background: oklch(0.9247 0.1579 99.93);
7
+ --pds-color-badge-indicator-gold-foreground: oklch(0.2969 0.0615 98.63);
8
+ --pds-color-badge-indicator-platinum-background: oklch(0.805 0.1267 307.2);
9
+ --pds-color-badge-indicator-platinum-foreground: oklch(0.4121 0.2246 295.77);
10
+ --pds-color-badge-indicator-diamond-background: oklch(0.4399 0.1453 255.91);
11
+ --pds-color-badge-indicator-diamond-foreground: oklch(0.8816 0.0619 245.59);
12
+ --pds-color-badge-indicator-critical-background: oklch(0.8326 0.0742 24.95);
13
+ --pds-color-badge-indicator-critical-foreground: oklch(0.8388 0.003 264.54);
14
+ --pds-color-badge-indicator-info-background: oklch(0.8816 0.0619 245.59);
15
+ --pds-color-badge-indicator-info-foreground: oklch(0.8388 0.003 264.54);
16
+ --pds-color-badge-indicator-success-background: oklch(0.9079 0.087 152.53);
17
+ --pds-color-badge-indicator-success-foreground: oklch(0.8388 0.003 264.54);
18
+ --pds-color-badge-indicator-neutral-background: oklch(0.4235 0.0071 264.49);
19
+ --pds-color-badge-indicator-neutral-foreground: oklch(0.8388 0.003 264.54);
20
+ --pds-color-badge-indicator-warning-background: oklch(0.9147 0.0715 75.62);
21
+ --pds-color-badge-indicator-warning-foreground: oklch(0.8388 0.003 264.54);
22
+ --pds-color-badge-indicator-brand-background: #745DD8;
23
+ --pds-color-badge-indicator-brand-foreground: oklch(0.8388 0.003 264.54);
24
+ --pds-color-banner-info-background: oklch(0.8816 0.0619 245.59);
25
+ --pds-color-banner-info-foreground: oklch(0.8388 0.003 264.54);
26
+ --pds-color-banner-warning-background: oklch(0.9147 0.0715 75.62);
27
+ --pds-color-banner-warning-foreground: oklch(0.8388 0.003 264.54);
28
+ --pds-color-banner-critical-background: oklch(0.8326 0.0742 24.95);
29
+ --pds-color-banner-critical-foreground: oklch(0.8388 0.003 264.54);
30
+ --pds-color-button-primary-background-default: oklch(0.8388 0.003 264.54);
31
+ --pds-color-button-primary-background-hover: oklch(0.5991 0.0051 258.33);
32
+ --pds-color-button-primary-foreground: oklch(0.1489 0.0027 248.08);
33
+ --pds-color-button-secondary-background-default: rgba(255, 255, 255, 0.00);
34
+ --pds-color-button-secondary-background-hover: oklch(0.2433 0.0041 264.49);
35
+ --pds-color-button-secondary-border: oklch(0.4235 0.0071 264.49);
36
+ --pds-color-button-secondary-foreground: oklch(0.8388 0.003 264.54);
37
+ --pds-color-button-subtle-background-default: rgba(255, 255, 255, 0.00);
38
+ --pds-color-button-subtle-background-hover: oklch(0.2433 0.0041 264.49);
39
+ --pds-color-button-subtle-foreground: oklch(0.8388 0.003 264.54);
40
+ --pds-color-button-brand-background-default: oklch(0.8975 0.1774 96.79);
41
+ --pds-color-button-brand-background-hover: oklch(0.6533 0.1351 98.32);
42
+ --pds-color-button-brand-foreground: oklch(0.1489 0.0027 248.08);
43
+ --pds-color-button-critical-background-default: oklch(0.5103 0.1942 29.6);
44
+ --pds-color-button-critical-background-hover: oklch(0.5856 0.2126 29.44);
45
+ --pds-color-button-critical-foreground: oklch(1.0000 0 0);
46
+ --pds-color-button-critical-secondary-background-default: oklch(0.3866 0.145 30.09);
47
+ --pds-color-button-critical-secondary-background-hover: oklch(0.5103 0.1942 29.6);
48
+ --pds-color-button-critical-secondary-border-default: oklch(0.3866 0.145 30.09);
49
+ --pds-color-button-critical-secondary-border-hover: oklch(0.5103 0.1942 29.6);
50
+ --pds-color-button-critical-secondary-foreground: oklch(0.8326 0.0742 24.95);
51
+ --pds-color-button-navbar-background-default: rgba(255, 255, 255, 0.00);
52
+ --pds-color-button-navbar-background-hover: oklch(0.2433 0.0041 264.49);
53
+ --pds-color-button-navbar-foreground: oklch(0.8388 0.003 264.54);
54
+ --pds-color-icon-button-standard-background-hover: var(--pds-color-interactive-background-hover);
55
+ --pds-color-icon-button-standard-background-active: var(--pds-color-interactive-background-active);
56
+ --pds-color-icon-button-reverse-background-hover: #474954;
57
+ --pds-color-icon-button-reverse-background-active: #6a6e7a;
58
+ --pds-color-icon-button-critical-background-hover: var(--pds-color-status-critical-background);
59
+ --pds-color-icon-button-critical-background-active: var(--pds-color-status-critical-foreground);
60
+ --pds-color-segmented-button-background-default: oklch(0.2433 0.0041 264.49);
61
+ --pds-color-segmented-button-background-active: oklch(0.2046 0 0);
62
+ --pds-color-segmented-button-background-hover: oklch(0.2046 0 0);
63
+ --pds-color-segmented-button-border-active: #9786E2;
64
+ --pds-color-segmented-button-foreground-default: oklch(0.5991 0.0051 258.33);
65
+ --pds-color-segmented-button-foreground-active: #9786E2;
66
+ --pds-color-segmented-button-foreground-hover: #9786E2;
67
+ --pds-color-card-background: oklch(0.2046 0 0);
68
+ --pds-color-code-block-dark-background: var(--pds-color-bg-reverse);
69
+ --pds-color-code-block-dark-foreground: var(--pds-color-fg-reverse);
70
+ --pds-color-code-block-dark-line-prefix: #9699A1;
71
+ --pds-color-code-block-dark-highlight: #474954;
72
+ --pds-color-code-block-light-background: #EFF0F0;
73
+ --pds-color-code-block-light-foreground: #3B3D45;
74
+ --pds-color-code-block-light-line-prefix: #686D78;
75
+ --pds-color-code-block-light-highlight: #DEDFE0;
76
+ --pds-color-dashboard-toggle-button-background: var(--pds-color-bg-reverse);
77
+ --pds-color-dashboard-toggle-button-foreground: var(--pds-color-fg-reverse);
78
+ --pds-color-dashboard-nav-background: var(--pds-color-bg-default-secondary);
79
+ --pds-color-dashboard-nav-background-admin: #252038;
80
+ --pds-color-dashboard-nav-item-background-default: rgba(255, 255, 255, 0.00);
81
+ --pds-color-dashboard-nav-item-background-hover: oklch(0.4235 0.0071 264.49);
82
+ --pds-color-dashboard-nav-item-background-hover-admin: oklch(0.2046 0 0);
83
+ --pds-color-dashboard-nav-item-background-active: var(--pds-color-bg-reverse);
84
+ --pds-color-dashboard-nav-item-foreground-default: var(--pds-color-fg-default);
85
+ --pds-color-dashboard-nav-item-foreground-hover: var(--pds-color-fg-default);
86
+ --pds-color-dashboard-nav-item-foreground-active: var(--pds-color-fg-reverse);
87
+ --pds-color-datepicker-accent-foreground: #745DD8;
88
+ --pds-color-datepicker-range-background: #2C205E;
89
+ --pds-color-datepicker-range-foreground: oklch(0.2046 0 0);
90
+ --pds-color-datepicker-selected-background: #745DD8;
91
+ --pds-color-datepicker-selected-foreground: oklch(0.2046 0 0);
92
+ --pds-color-pagination-foreground-hover: oklch(0.8388 0.003 264.54);
93
+ --pds-color-pagination-foreground-active: #EEEBFA;
94
+ --pds-color-pagination-background-hover: #42318D;
95
+ --pds-color-pagination-background-active: #2C205E;
96
+ --pds-color-panel-sunken-background: oklch(0.1489 0.0027 248.08);
97
+ --pds-color-panel-raised-background: oklch(0.2046 0 0);
98
+ --pds-color-panel-overlay-background: oklch(0.2046 0 0);
99
+ --pds-color-expansion-panel-hover: oklch(0.2929 0.0039 264.51);
100
+ --pds-color-expansion-panel-open: oklch(0.2929 0.0039 264.51);
101
+ --pds-color-spinner-full-1: rgba(255, 255, 255, 0.00);
102
+ --pds-color-spinner-full-2: oklch(0.8975 0.1774 96.79);
103
+ --pds-color-spinner-full-3: oklch(0.542 0.2895 299.91);
104
+ --pds-color-spinner-mono-1: rgba(255, 255, 255, 0.00);
105
+ --pds-color-spinner-mono-2: #ffffff80;
106
+ --pds-color-spinner-mono-3: oklch(1.0000 0 0);
107
+ --pds-color-spinner-mono-reverse-1: rgba(255, 255, 255, 0.00);
108
+ --pds-color-spinner-mono-reverse-2: #66666680;
109
+ --pds-color-spinner-mono-reverse-3: oklch(0.2046 0 0);
110
+ --pds-color-tag-1-background: #DED8FA;
111
+ --pds-color-tag-1-foreground: #5C4FAC;
112
+ --pds-color-tag-2-background: #F8D7D3;
113
+ --pds-color-tag-2-foreground: #A0392C;
114
+ --pds-color-tag-3-background: #F5E7A8;
115
+ --pds-color-tag-3-foreground: #7B611E;
116
+ --pds-color-tag-4-background: #F7D7EC;
117
+ --pds-color-tag-4-foreground: #894271;
118
+ --pds-color-tag-5-background: #D9F0AF;
119
+ --pds-color-tag-5-foreground: #536A2B;
120
+ --pds-color-tag-6-background: #DDDFE3;
121
+ --pds-color-tag-6-foreground: #47546D;
122
+ --pds-color-tag-7-background: #C6F1DC;
123
+ --pds-color-tag-7-foreground: #3E7256;
124
+ --pds-color-tag-8-background: #F9DFCB;
125
+ --pds-color-tag-8-foreground: #9A4E1C;
126
+ --pds-color-tag-9-background: #CEECF9;
127
+ --pds-color-tag-9-foreground: #366880;
128
+ --pds-color-tag-10-background: #D0DFFC;
129
+ --pds-color-tag-10-foreground: #2254C5;
130
+ --pds-color-tag-11-background: #72CB9B;
131
+ --pds-color-tag-11-foreground: #264A37;
132
+ --pds-color-tag-12-background: #81C1DD;
133
+ --pds-color-tag-12-foreground: #234453;
134
+ --pds-color-tag-13-background: #689BF8;
135
+ --pds-color-tag-13-foreground: #163168;
136
+ --pds-color-tag-14-background: #9C90E9;
137
+ --pds-color-tag-14-foreground: #342C60;
138
+ --pds-color-tag-15-background: #E87E73;
139
+ --pds-color-tag-15-foreground: #50201B;
140
+ --pds-color-tag-16-background: #F1A76E;
141
+ --pds-color-tag-16-foreground: #68320F;
142
+ --pds-color-tag-17-background: #DA81BC;
143
+ --pds-color-tag-17-foreground: #46253B;
144
+ --pds-color-tag-18-background: #EFCE60;
145
+ --pds-color-tag-18-foreground: #504012;
146
+ --pds-color-tag-19-background: #9FC65B;
147
+ --pds-color-tag-19-foreground: #3F4D27;
148
+ --pds-color-tag-20-background: #8790A0;
149
+ --pds-color-tag-20-foreground: #0E1E40;
150
+ --pds-color-tile-background: oklch(0.2046 0 0);
151
+ --pds-color-bg-default: oklch(0.2046 0 0);
152
+ --pds-color-bg-default-secondary: oklch(0.1489 0.0027 248.08);
153
+ --pds-color-bg-reverse: oklch(0.5991 0.0051 258.33);
154
+ --pds-color-border-default: oklch(0.4235 0.0071 264.49);
155
+ --pds-color-border-brand: #9786E2;
156
+ --pds-color-border-input: oklch(0.4235 0.0071 264.49);
157
+ --pds-color-border-separator: oklch(0.4235 0.0071 264.49);
158
+ --pds-color-code-inline-background: oklch(0.2433 0.0041 264.49);
159
+ --pds-color-code-inline-border: oklch(0.2929 0.0039 264.51);
160
+ --pds-color-code-inline-text: #ffffff;
161
+ --pds-color-datavis-1: #003F5C;
162
+ --pds-color-datavis-2: #006779;
163
+ --pds-color-datavis-3: #008D6F;
164
+ --pds-color-datavis-4: #62AD43;
165
+ --pds-color-datavis-5: #DDBD16;
166
+ --pds-color-dropdown-background: oklch(0.2929 0.0039 264.51);
167
+ --pds-color-dropdown-foreground: var(--pds-color-fg-default);
168
+ --pds-color-dropdown-heading: var(--pds-color-fg-default-secondary);
169
+ --pds-color-dropdown-description: var(--pds-color-fg-default-secondary);
170
+ --pds-color-dropdown-item-background-hover: var(--pds-color-interactive-background-hover);
171
+ --pds-color-dropdown-item-background-active: var(--pds-color-interactive-background-active);
172
+ --pds-color-dropdown-item-background-selected: var(--pds-color-interactive-background-hover);
173
+ --pds-color-dropdown-top-border: rgba(255, 255, 255, 0.00);
174
+ --pds-color-fg-default: oklch(1.0000 0 0);
175
+ --pds-color-fg-default-secondary: oklch(0.8388 0.003 264.54);
176
+ --pds-color-fg-reverse: oklch(0.2046 0 0);
177
+ --pds-color-input-checkbox-checked-foreground: oklch(0.8388 0.003 264.54);
178
+ --pds-color-input-file-upload-button-background-default: oklch(0.2929 0.0039 264.51);
179
+ --pds-color-input-file-upload-button-background-hover: oklch(0.3554 0.0058 258.35);
180
+ --pds-color-input-switch-icon: oklch(0.8388 0.003 264.54);
181
+ --pds-color-interactive-background-hover: oklch(0.2929 0.0039 264.51);
182
+ --pds-color-interactive-background-active: oklch(0.3554 0.0058 258.35);
183
+ --pds-color-interactive-focus: oklch(0.5558 0.2372 267.79);
184
+ --pds-color-interactive-link-default: oklch(0.5558 0.2372 267.79);
185
+ --pds-color-interactive-link-hover: oklch(0.542 0.2895 299.91);
186
+ --pds-color-interactive-link-active: oklch(0.6311 0.2503 304.99);
187
+ --pds-color-interactive-link-visited: oklch(0.6311 0.2503 304.99);
188
+ --pds-color-interactive-reverse-focus: oklch(0.5558 0.2372 267.79);
189
+ --pds-color-interactive-reverse-link-default: oklch(0.5558 0.2372 267.79);
190
+ --pds-color-interactive-reverse-link-hover: oklch(0.542 0.2895 299.91);
191
+ --pds-color-interactive-reverse-link-active: oklch(0.4682 0.2508 299.4);
192
+ --pds-color-interactive-reverse-link-visited: oklch(0.4682 0.2508 299.4);
193
+ --pds-color-nav-item-default-foreground-hover: #9786E2;
194
+ --pds-color-nav-item-default-foreground-active: #9786E2;
195
+ --pds-color-nav-item-default-foreground-trigger: oklch(0.4235 0.0071 264.49);
196
+ --pds-color-nav-item-reverse-foreground-hover: #42318D;
197
+ --pds-color-nav-item-reverse-foreground-active: #42318D;
198
+ --pds-color-overlay: rgba(9, 0, 48, 0.45);
199
+ --pds-color-partner-bitbucket: #004DC0;
200
+ --pds-color-partner-drupal: #009CDE;
201
+ --pds-color-partner-gatsby: #663399;
202
+ --pds-color-partner-github: #2DA44E;
203
+ --pds-color-partner-gitlab: #fc6d26;
204
+ --pds-color-partner-google: #4285F4;
205
+ --pds-color-partner-nextjs: #ffffff;
206
+ --pds-color-partner-wordpress: #0073AA;
207
+ --pds-color-social-rss: #f3763a;
208
+ --pds-color-status-success-foreground: oklch(0.9079 0.087 152.53);
209
+ --pds-color-status-success-border: oklch(0.5118 0.1311 147.75);
210
+ --pds-color-status-success-background: oklch(0.3778 0.0814 153.95);
211
+ --pds-color-status-info-foreground: oklch(0.8816 0.0619 245.59);
212
+ --pds-color-status-info-border: oklch(0.5707 0.1855 255.14);
213
+ --pds-color-status-info-background: oklch(0.4399 0.1453 255.91);
214
+ --pds-color-status-critical-foreground: oklch(0.8326 0.0742 24.95);
215
+ --pds-color-status-critical-border: oklch(0.5103 0.1942 29.6);
216
+ --pds-color-status-critical-background: oklch(0.3866 0.145 30.09);
217
+ --pds-color-status-warning-foreground: oklch(0.9147 0.0715 75.62);
218
+ --pds-color-status-warning-border: oklch(0.5757 0.1336 61.11);
219
+ --pds-color-status-warning-background: oklch(0.4141 0.0927 65.26);
220
+ --pds-color-status-discovery-foreground: oklch(0.8267 0.0958 307.50);
221
+ --pds-color-status-discovery-border: oklch(0.4772 0.1603 302.13);
222
+ --pds-color-status-discovery-background: oklch(0.2809 0.0442 307.66);
223
+ --pds-elevation-dashboard: 1px 1px 6px -2px rgba(80, 80, 80, 0.2), 1px 1px 0px 0px #1a1b20;
224
+ --pds-elevation-raised: 0px 3px 5px 0px rgba(18, 18, 25, 0.6), 0px 0px 0px 1px rgba(120, 120, 120, 0.15);
225
+ --pds-elevation-overlay: 0px 8px 12px 0px rgba(18, 18, 25, 0.6), 0px 0px 0px 1px rgba(120, 120, 120, 0.15);
226
+ }
package/build/css/variables.expanded.css ADDED
@@ -0,0 +1,17 @@
1
+ [data-scale="expanded"] {
2
+ --pds-typography-size-code-block: 0.9rem;
3
+ --pds-typography-size-7xl: 9.969rem;
4
+ --pds-typography-size-6xl: 7.478rem;
5
+ --pds-typography-size-5xl: 5.61rem;
6
+ --pds-typography-size-4xl: 4.209rem;
7
+ --pds-typography-size-3xl: 3.157rem;
8
+ --pds-typography-size-2xl: 2.369rem;
9
+ --pds-typography-size-xl: 1.777rem;
10
+ --pds-typography-size-l: 1.333rem;
11
+ --pds-typography-size-m: 1rem;
12
+ --pds-typography-size-s: 0.75rem;
13
+ --pds-typography-size-xs: 0.563rem;
14
+ --pds-typography-size-2xs: 0.422rem;
15
+ --pds-typography-size-default: 1rem;
16
+ --pds-typography-size-input-label: 1rem;
17
+ }
package/build/css/variables.global.css ADDED
@@ -0,0 +1,83 @@
1
+ :root {
2
+ --pds-animation-delay-default: 200ms;
3
+ --pds-animation-duration-default: 200ms;
4
+ --pds-animation-duration-dropdown: 300ms;
5
+ --pds-animation-duration-reveal: 300ms;
6
+ --pds-animation-timing-function-default: cubic-bezier(.2, 0, 0, 1);
7
+ --pds-animation-transition-reveal: all 300ms cubic-bezier(.2, 0, 0, 1);
8
+ --pds-border-width-stepper: 3px;
9
+ --pds-border-width-default: 1px;
10
+ --pds-border-width-outline: 1px;
11
+ --pds-border-radius-default: 0.188rem;
12
+ --pds-border-radius-bar: 3.5rem;
13
+ --pds-border-radius-button: 3.5rem;
14
+ --pds-border-radius-container: 0.375rem;
15
+ --pds-border-radius-input: 0.25rem;
16
+ --pds-container-modal-width-small: 25rem;
17
+ --pds-container-modal-width-medium: 37.5rem;
18
+ --pds-container-modal-width-large: 47.5rem;
19
+ --pds-container-modal-width-xl: 67.5rem;
20
+ --pds-container-tooltip-max-width: 12.5rem;
21
+ --pds-container-padding-base: var(--pds-spacing-xl);
22
+ --pds-container-padding-narrow-bp-md: 12%;
23
+ --pds-container-padding-narrow-bp-lg: 20%;
24
+ --pds-container-padding-standard-bp-md: 6%;
25
+ --pds-container-padding-standard-bp-lg: 8%;
26
+ --pds-container-padding-wide-bp-md: 5%;
27
+ --pds-container-padding-wide-bp-lg: 4%;
28
+ --pds-container-max-width-narrow: 1024px;
29
+ --pds-container-max-width-standard: 1200px;
30
+ --pds-container-max-width-wide: 1440px;
31
+ --pds-container-max-width-x-wide: 1600px;
32
+ --pds-grid-marketing-column-small: 21.34375%;
33
+ --pds-grid-marketing-column-medium-large: 4.36875%;
34
+ --pds-grid-marketing-gap-small: 4.875%;
35
+ --pds-grid-marketing-gap-medium-large: 4.325%;
36
+ --pds-spacing-dashboard-nav-item-height: 2.25rem;
37
+ --pds-spacing-dashboard-nav-item-padding: 0.625rem;
38
+ --pds-spacing-8xl: 5.16rem;
39
+ --pds-spacing-7xl: 4.3rem;
40
+ --pds-spacing-6xl: 3.583rem;
41
+ --pds-spacing-5xl: 2.986rem;
42
+ --pds-spacing-4xl: 2.488rem;
43
+ --pds-spacing-3xl: 2.074rem;
44
+ --pds-spacing-2xl: 1.728rem;
45
+ --pds-spacing-xl: 1.44rem;
46
+ --pds-spacing-l: 1.2rem;
47
+ --pds-spacing-m: 1rem;
48
+ --pds-spacing-s: 0.833rem;
49
+ --pds-spacing-xs: 0.694rem;
50
+ --pds-spacing-2xs: 0.578rem;
51
+ --pds-spacing-3xs: 0.481rem;
52
+ --pds-spacing-4xs: 0.401rem;
53
+ --pds-spacing-5xs: 0.334rem;
54
+ --pds-spacing-6xs: 0.278rem;
55
+ --pds-spacing-7xs: 0.232rem;
56
+ --pds-spacing-8xs: 0.193rem;
57
+ --pds-typography-ff-sans: 'Mona Sans', sans-serif;
58
+ --pds-typography-ff-serif: 'Instrument Serif', serif;
59
+ --pds-typography-ff-mono: 'Source Code Pro', monospace;
60
+ --pds-typography-fw-light: 300;
61
+ --pds-typography-fw-regular: 400;
62
+ --pds-typography-fw-medium: 500;
63
+ --pds-typography-fw-semibold: 600;
64
+ --pds-typography-fw-bold: 700;
65
+ --pds-typography-font-css-import: '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';
66
+ --pds-typography-ls-xl: 6%;
67
+ --pds-typography-ls-l: 4%;
68
+ --pds-typography-ls-m: 2%;
69
+ --pds-typography-ls-s: 1%;
70
+ --pds-typography-lh-xl: 195%;
71
+ --pds-typography-lh-l: 165%;
72
+ --pds-typography-lh-m: 140%;
73
+ --pds-typography-lh-s: 120%;
74
+ --pds-typography-multiplier-small: 0.84;
75
+ --pds-typography-multiplier-medium: 0.88;
76
+ --pds-z-index-navigation: 100;
77
+ --pds-z-index-dropdown: 300;
78
+ --pds-z-index-notifications: 500;
79
+ --pds-z-index-overlay: 700;
80
+ --pds-z-index-modal: 900;
81
+ --pds-z-index-max: 9999;
82
+ --pds-z-index-reset: 0;
83
+ }