@pantheon-systems/pds-design-tokens 1.0.0-dev.99 → 1.0.0-rc.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/README.md +1 -1
  2. package/build/css/pds-design-tokens-dark-mode.css +176 -175
  3. package/build/css/pds-design-tokens-light-mode.css +283 -183
  4. package/build/css/pds-design-tokens.css +71 -30
  5. package/build/figma/pds-design-tokens-figma.json +14464 -10357
  6. package/build/json/pds-design-tokens-dark-mode.json +3567 -3827
  7. package/build/json/pds-design-tokens-light-mode.json +4953 -2870
  8. package/build/json/pds-design-tokens.json +1251 -394
  9. package/package.json +7 -5
package/build/css/pds-design-tokens.css CHANGED
@@ -21,23 +21,38 @@
21
21
  --pds-animation-transition-default-timing-function: ease-in-out;
22
22
  --pds-animation-transition-dropdown-duration: 300ms;
23
23
  --pds-animation-transition-reveal-duration: 300ms;
24
+ --pds-border-offset-default: 1px;
25
+ --pds-border-offset-double: 2px;
26
+ --pds-border-offset-triple: 3px;
24
27
  --pds-border-radius-bar: 3.5rem;
28
+ --pds-border-radius-button: 0.1875rem;
25
29
  --pds-border-radius-container: 0.375rem;
26
30
  --pds-border-radius-default: 0.1875rem;
31
+ --pds-border-radius-input: 0.25rem;
27
32
  --pds-border-width-default: 1px;
33
+ --pds-border-width-double: 2px;
34
+ --pds-border-width-outline: 1px;
35
+ --pds-border-width-stepper: 3px;
36
+ --pds-border-width-triple: 3px;
28
37
  --pds-container-max-width-narrow: 1024px;
29
38
  --pds-container-max-width-standard: 1200px;
30
39
  --pds-container-max-width-wide: 1440px;
31
40
  --pds-container-max-width-x-wide: 1600px;
32
- --pds-container-modal-width-large: 44rem;
33
- --pds-container-modal-width-medium: 36rem;
34
- --pds-container-modal-width-small: 25rem;
35
- --pds-container-padding-large: 4%;
36
- --pds-container-padding-medium: 4%;
37
- --pds-container-padding-small: 5%;
38
- --pds-grid-marketing-column-medium-large: 5.125%;
41
+ --pds-container-modal-width-lg: 47.5rem;
42
+ --pds-container-modal-width-md: 37.5rem;
43
+ --pds-container-modal-width-sm: 25rem;
44
+ --pds-container-modal-width-xl: 67.5rem;
45
+ --pds-container-padding-base: var(--pds-spacing-xl);
46
+ --pds-container-padding-narrow-bp-lg: 20%;
47
+ --pds-container-padding-narrow-bp-md: 12%;
48
+ --pds-container-padding-standard-bp-lg: 8%;
49
+ --pds-container-padding-standard-bp-md: 6%;
50
+ --pds-container-padding-wide-bp-lg: 4%;
51
+ --pds-container-padding-wide-bp-md: 5%;
52
+ --pds-container-tooltip-max-width: 12.5rem;
53
+ --pds-grid-marketing-column-medium-large: 4.36875%;
39
54
  --pds-grid-marketing-column-small: 21.34375%;
40
- --pds-grid-marketing-gap-medium-large: 3.5%;
55
+ --pds-grid-marketing-gap-medium-large: 4.325%;
41
56
  --pds-grid-marketing-gap-small: 4.875%;
42
57
  --pds-spacing-2xl: 1.953rem;
43
58
  --pds-spacing-2xs: 0.512rem;
@@ -51,39 +66,65 @@
51
66
  --pds-spacing-6xs: 0.125rem;
52
67
  --pds-spacing-7xl: 5.96rem;
53
68
  --pds-spacing-8xl: 7.451rem;
69
+ --pds-spacing-button-lg-height: 3rem;
70
+ --pds-spacing-button-lg-padding-block: 0.9375rem;
71
+ --pds-spacing-button-lg-padding-inline: 1.25rem;
72
+ --pds-spacing-button-md-height: 2.25rem;
73
+ --pds-spacing-button-md-padding-block: 0.625rem;
74
+ --pds-spacing-button-md-padding-inline: 0.8125rem;
75
+ --pds-spacing-button-sm-height: 2rem;
76
+ --pds-spacing-button-sm-padding-block: 0.5rem;
77
+ --pds-spacing-button-sm-padding-inline: 0.625rem;
78
+ --pds-spacing-dashboard-nav-item-height: 2.25rem;
79
+ --pds-spacing-dashboard-nav-item-padding: 0.625rem;
54
80
  --pds-spacing-l: 1.25rem;
55
81
  --pds-spacing-m: 1rem;
56
82
  --pds-spacing-s: 0.8rem;
57
83
  --pds-spacing-xl: 1.563rem;
58
84
  --pds-spacing-xs: 0.64rem;
59
- --pds-typography-font-code: 'Source Code Pro', monospace;
60
- --pds-typography-font-default: 'Poppins', sans-serif;
61
- --pds-typography-font-secondary: 'Aleo', serif;
62
- --pds-typography-font-weight-bold: 700;
63
- --pds-typography-font-weight-extrabold: 800;
64
- --pds-typography-font-weight-regular: 400;
65
- --pds-typography-font-weight-semibold: 600;
66
- --pds-typography-letter-spacing-l: 0.04rem;
67
- --pds-typography-letter-spacing-m: 0.02rem;
68
- --pds-typography-letter-spacing-s: 0.01rem;
69
- --pds-typography-letter-spacing-xl: 0.06rem;
70
- --pds-typography-line-height-l: 170%;
71
- --pds-typography-line-height-m: 140%;
72
- --pds-typography-line-height-s: 120%;
73
- --pds-typography-line-height-xl: 195%;
85
+ --pds-typography-ff-code: 'Source Code Pro', monospace;
86
+ --pds-typography-ff-default: 'Poppins', sans-serif;
87
+ --pds-typography-ff-mono: 'Source Code Pro', monospace;
88
+ --pds-typography-ff-sans: 'Poppins', sans-serif;
89
+ --pds-typography-ff-secondary: 'Aleo', serif;
90
+ --pds-typography-ff-serif: 'Aleo', serif;
91
+ --pds-typography-font-css-import: 'https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,100..900;1,100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap';
92
+ --pds-typography-fw-bold: 700;
93
+ --pds-typography-fw-light: 300;
94
+ --pds-typography-fw-medium: 500;
95
+ --pds-typography-fw-regular: 400;
96
+ --pds-typography-fw-semibold: 600;
97
+ --pds-typography-lh-l: 165%;
98
+ --pds-typography-lh-m: 140%;
99
+ --pds-typography-lh-s: 120%;
100
+ --pds-typography-lh-xl: 195%;
101
+ --pds-typography-ls-l: 0.04rem;
102
+ --pds-typography-ls-m: 0.02rem;
103
+ --pds-typography-ls-s: 0.01rem;
104
+ --pds-typography-ls-xl: 0.06rem;
74
105
  --pds-typography-multiplier-medium: 0.88;
75
106
  --pds-typography-multiplier-small: 0.84;
76
107
  --pds-typography-size-2xl: 1.728rem;
77
108
  --pds-typography-size-3xl: 2.074rem;
78
- --pds-typography-size-4xl: 3.052rem;
109
+ --pds-typography-size-4xl: 2.488rem;
110
+ --pds-typography-size-5xl: 2.986rem;
111
+ --pds-typography-size-6xl: 3.583rem;
112
+ --pds-typography-size-7xl: 4.3rem;
113
+ --pds-typography-size-8xl: 5.160rem;
114
+ --pds-typography-size-9xl: 6.192rem;
115
+ --pds-typography-size-code-block: 0.9rem;
116
+ --pds-typography-size-default: 1rem;
117
+ --pds-typography-size-input-label: 1rem;
79
118
  --pds-typography-size-l: 1.2rem;
80
119
  --pds-typography-size-m: 1rem;
81
- --pds-typography-size-s: 0.875rem;
120
+ --pds-typography-size-s: 0.833rem;
82
121
  --pds-typography-size-xl: 1.44rem;
83
- --pds-typography-size-xs: 0.75rem;
84
- --pds-z-index-dropdown: 200;
85
- --pds-z-index-modal: 500;
122
+ --pds-typography-size-xs: 0.694rem;
123
+ --pds-z-index-dropdown: 300;
124
+ --pds-z-index-max: 9999;
125
+ --pds-z-index-modal: 900;
86
126
  --pds-z-index-navigation: 100;
87
- --pds-z-index-notifications: 300;
88
- --pds-z-index-overlay: 400;
127
+ --pds-z-index-notifications: 500;
128
+ --pds-z-index-overlay: 700;
129
+ --pds-z-index-reset: 0;
89
130
  }