@times-design-system/components-wordpress 1.2.2-alpha.4 → 1.2.2-alpha.6

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 (14) hide show
  1. package/BLOCK_CREATION_CHECKLIST.md +1 -0
  2. package/SCSS_VARIABLES_REFERENCE.md +6 -4
  3. package/TRANSFORMATION_GUIDE.md +15 -9
  4. package/dist/blocks/button/style.css +3 -3
  5. package/dist/blocks/chip/style.css +2 -2
  6. package/dist/blocks/flag/style.css +2 -2
  7. package/dist/blocks/link/style.css +5 -5
  8. package/dist/blocks/toast/style.css +2 -2
  9. package/package.json +3 -3
  10. package/src/blocks/button/style.css +3 -3
  11. package/src/blocks/chip/style.css +2 -2
  12. package/src/blocks/flag/style.css +2 -2
  13. package/src/blocks/link/style.css +5 -5
  14. package/src/blocks/toast/style.css +2 -2
package/BLOCK_CREATION_CHECKLIST.md CHANGED
@@ -94,6 +94,7 @@ For each CSS property in the React component:
94
94
  - `gap: var(--spacing-03)` → `gap: 4px`
95
95
  - `background: var(--interactive-primary-fill-default)` → `background: #005c8a`
96
96
  - `font-family: var(--fontFamily040)` → `font-family: Roboto`
97
+ - `font-size: var(--fontSize030)` → `font-size: 1.6rem` (always use rem units from theme-scss)
97
98
 
98
99
  **Checklist**:
99
100
 
package/SCSS_VARIABLES_REFERENCE.md CHANGED
@@ -76,6 +76,8 @@ All variables from `packages/theme-scss/src/tds-layout.scss` are compiled to CSS
76
76
  }
77
77
  ```
78
78
 
79
+ **Note**: While this example shows CSS variables for illustration, WordPress blocks use **resolved values** (actual hex, pixel sizes, and font names) compiled directly into CSS, not CSS variables.
80
+
79
81
  ### Breakpoint Variables
80
82
 
81
83
  | SCSS Variable | CSS Property | Value | Usage |
@@ -111,10 +113,10 @@ These CSS custom properties are compiled from the design tokens package and avai
111
113
  | `--fontWeight040` | Regular weight | 400 |
112
114
  | `--fontWeight050` | Medium weight | 500 |
113
115
  | `--fontWeight070` | Bold weight | 700 |
114
- | `--fontSize010` | XS text | 12px |
115
- | `--fontSize020` | S text | 14px |
116
- | `--fontSize030` | M text | 16px |
117
- | `--fontSize040` | L text | 18px/1.125rem |
116
+ | `--fontSize010` | XS text | 1.2rem |
117
+ | `--fontSize020` | S text | 1.4rem |
118
+ | `--fontSize030` | M text | 1.6rem |
119
+ | `--fontSize040` | L text | 1.8rem |
118
120
  | `--fontLineHeight010` | Tight leading | 1 |
119
121
  | `--fontLineHeight020` | Compact leading | 1.125 |
120
122
  | `--fontLineHeight040` | Normal leading | 1.5 |
package/TRANSFORMATION_GUIDE.md CHANGED
@@ -317,17 +317,23 @@ The WordPress block's `style.css` **must mirror the React component's styles exa
317
317
  --tds-button-fg: var(--interactive-secondary-text-default);
318
318
  }
319
319
 
320
- /* Size variants */
320
+ /* Size variants — RESOLVED values */
321
321
  .tds-button--size-small {
322
- min-height: var(--spacing-15);
323
- padding: var(--spacing-03) var(--spacing-05);
324
- font-size: var(--fontSize020);
322
+ min-height: 40px;
323
+ padding: 4px 8px;
324
+ font-size: 1.4rem;
325
+ }
326
+
327
+ .tds-button--size-medium {
328
+ min-height: 48px;
329
+ padding: 8px 12px;
330
+ font-size: 1.6rem;
325
331
  }
326
332
 
327
333
  .tds-button--size-large {
328
- min-height: var(--spacing-20);
329
- padding: var(--spacing-07) var(--spacing-11);
330
- font-size: var(--fontSize040);
334
+ min-height: 64px;
335
+ padding: 12px 20px;
336
+ font-size: 1.8rem;
331
337
  }
332
338
 
333
339
  /* State handlers */
@@ -424,9 +430,9 @@ Design Tokens (theme-scss)
424
430
  gap: 4px; /* Direct pixel, not var(--spacing-03) */
425
431
  padding: 8px 12px; /* Resolved from design tokens */
426
432
 
427
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
433
+ font-family: Roboto;
428
434
  font-weight: 500; /* Direct numeric value */
429
- font-size: 1rem; /* Direct size, not var(--fontSize030) */
435
+ font-size: 1.6rem; /* Direct resolved size from theme-scss */
430
436
  }
431
437
  ```
432
438
 
package/dist/blocks/button/style.css CHANGED
@@ -107,7 +107,7 @@
107
107
  min-height: 32px;
108
108
  padding: 0 12px;
109
109
  min-width: 80px;
110
- font-size: 0.875rem;
110
+ font-size: 1.4rem;
111
111
  --tds-button-label-inline-padding: 4px;
112
112
  }
113
113
 
@@ -115,7 +115,7 @@
115
115
  min-height: 48px;
116
116
  min-width: 100px;
117
117
  padding: 0 16px;
118
- font-size: 1rem;
118
+ font-size: 1.6rem;
119
119
  --tds-button-label-inline-padding: 8px;
120
120
  }
121
121
 
@@ -123,7 +123,7 @@
123
123
  min-height: 64px;
124
124
  min-width: 130px;
125
125
  padding: 0 24px;
126
- font-size: 1.125rem;
126
+ font-size: 1.8rem;
127
127
  --tds-button-label-inline-padding: 8px;
128
128
  }
129
129
 
package/dist/blocks/chip/style.css CHANGED
@@ -71,13 +71,13 @@
71
71
  .tds-chip--size-small {
72
72
  min-height: 32px;
73
73
  padding: 0 12px;
74
- font-size: 0.875rem;
74
+ font-size: 1.4rem;
75
75
  }
76
76
 
77
77
  .tds-chip--size-large {
78
78
  min-height: 48px;
79
79
  padding: 0 16px;
80
- font-size: 1rem;
80
+ font-size: 1.6rem;
81
81
  }
82
82
 
83
83
  .tds-chip__content {
package/dist/blocks/flag/style.css CHANGED
@@ -19,7 +19,7 @@
19
19
  background-color: var(--tds-flag-bg);
20
20
  color: var(--tds-flag-fg);
21
21
  font-family: Roboto;
22
- font-size: 0.875rem;
22
+ font-size: 1.4rem;
23
23
  font-weight: 500;
24
24
  line-height: 1.125;
25
25
  text-transform: uppercase;
@@ -28,7 +28,7 @@
28
28
  }
29
29
 
30
30
  .tds-flag--size-small {
31
- font-size: 0.75rem;
31
+ font-size: 1.2rem;
32
32
  }
33
33
 
34
34
  .tds-flag--intent-secondary {
package/dist/blocks/link/style.css CHANGED
@@ -21,7 +21,7 @@
21
21
  color: var(--tds-link-color-default);
22
22
  cursor: pointer;
23
23
  font-family: Roboto;
24
- font-size: 1rem;
24
+ font-size: 1.6rem;
25
25
  font-weight: 400;
26
26
  line-height: 1.5;
27
27
  text-decoration: underline;
@@ -53,25 +53,25 @@
53
53
  }
54
54
 
55
55
  .tds-link--size-xsmall {
56
- font-size: 0.75rem;
56
+ font-size: 1.2rem;
57
57
  gap: 4px;
58
58
  --tds-link-icon-size: 16px;
59
59
  }
60
60
 
61
61
  .tds-link--size-small {
62
- font-size: 0.875rem;
62
+ font-size: 1.4rem;
63
63
  gap: 4px;
64
64
  --tds-link-icon-size: 16px;
65
65
  }
66
66
 
67
67
  .tds-link--size-medium {
68
- font-size: 1rem;
68
+ font-size: 1.6rem;
69
69
  gap: 6px;
70
70
  --tds-link-icon-size: 20px;
71
71
  }
72
72
 
73
73
  .tds-link--size-large {
74
- font-size: 1.125rem;
74
+ font-size: 1.8rem;
75
75
  gap: 8px;
76
76
  --tds-link-icon-size: 24px;
77
77
  }
package/dist/blocks/toast/style.css CHANGED
@@ -26,7 +26,7 @@
26
26
 
27
27
  .tds-toast__label {
28
28
  font-family: Roboto;
29
- font-size: 1rem;
29
+ font-size: 1.6rem;
30
30
  line-height: 1.5;
31
31
  font-weight: 400;
32
32
  }
@@ -34,7 +34,7 @@
34
34
  .tds-toast__link {
35
35
  flex: 0 0 auto;
36
36
  font-family: Roboto;
37
- font-size: 1rem;
37
+ font-size: 1.6rem;
38
38
  line-height: 1.5;
39
39
  font-weight: 700;
40
40
  text-decoration: underline;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@times-design-system/components-wordpress",
3
- "version": "1.2.2-alpha.4+ecc4f864",
3
+ "version": "1.2.2-alpha.6+ee55ff2e",
4
4
  "type": "module",
5
5
  "description": "Times Design System Gutenberg blocks for WordPress Full Site Editing",
6
6
  "keywords": [
@@ -48,7 +48,7 @@
48
48
  "access": "public"
49
49
  },
50
50
  "dependencies": {
51
- "@times-design-system/theme-scss": "^2.0.2-alpha.4+ecc4f864",
51
+ "@times-design-system/theme-scss": "^2.0.2-alpha.6+ee55ff2e",
52
52
  "@wordpress/block-editor": "^12.0.0",
53
53
  "@wordpress/blocks": "^12.0.0",
54
54
  "@wordpress/components": "^25.0.0",
@@ -71,5 +71,5 @@
71
71
  "rollup-plugin-postcss": "^4.0.2",
72
72
  "typescript": "^5.0.0"
73
73
  },
74
- "gitHead": "ecc4f864f85627731169257ed9153180623038a0"
74
+ "gitHead": "ee55ff2e03524bba06e8d4a53b1b3c9f5b692e1f"
75
75
  }
package/src/blocks/button/style.css CHANGED
@@ -107,7 +107,7 @@
107
107
  min-height: 32px;
108
108
  padding: 0 12px;
109
109
  min-width: 80px;
110
- font-size: 0.875rem;
110
+ font-size: 1.4rem;
111
111
  --tds-button-label-inline-padding: 4px;
112
112
  }
113
113
 
@@ -115,7 +115,7 @@
115
115
  min-height: 48px;
116
116
  min-width: 100px;
117
117
  padding: 0 16px;
118
- font-size: 1rem;
118
+ font-size: 1.6rem;
119
119
  --tds-button-label-inline-padding: 8px;
120
120
  }
121
121
 
@@ -123,7 +123,7 @@
123
123
  min-height: 64px;
124
124
  min-width: 130px;
125
125
  padding: 0 24px;
126
- font-size: 1.125rem;
126
+ font-size: 1.8rem;
127
127
  --tds-button-label-inline-padding: 8px;
128
128
  }
129
129
 
package/src/blocks/chip/style.css CHANGED
@@ -71,13 +71,13 @@
71
71
  .tds-chip--size-small {
72
72
  min-height: 32px;
73
73
  padding: 0 12px;
74
- font-size: 0.875rem;
74
+ font-size: 1.4rem;
75
75
  }
76
76
 
77
77
  .tds-chip--size-large {
78
78
  min-height: 48px;
79
79
  padding: 0 16px;
80
- font-size: 1rem;
80
+ font-size: 1.6rem;
81
81
  }
82
82
 
83
83
  .tds-chip__content {
package/src/blocks/flag/style.css CHANGED
@@ -19,7 +19,7 @@
19
19
  background-color: var(--tds-flag-bg);
20
20
  color: var(--tds-flag-fg);
21
21
  font-family: Roboto;
22
- font-size: 0.875rem;
22
+ font-size: 1.4rem;
23
23
  font-weight: 500;
24
24
  line-height: 1.125;
25
25
  text-transform: uppercase;
@@ -28,7 +28,7 @@
28
28
  }
29
29
 
30
30
  .tds-flag--size-small {
31
- font-size: 0.75rem;
31
+ font-size: 1.2rem;
32
32
  }
33
33
 
34
34
  .tds-flag--intent-secondary {
package/src/blocks/link/style.css CHANGED
@@ -21,7 +21,7 @@
21
21
  color: var(--tds-link-color-default);
22
22
  cursor: pointer;
23
23
  font-family: Roboto;
24
- font-size: 1rem;
24
+ font-size: 1.6rem;
25
25
  font-weight: 400;
26
26
  line-height: 1.5;
27
27
  text-decoration: underline;
@@ -53,25 +53,25 @@
53
53
  }
54
54
 
55
55
  .tds-link--size-xsmall {
56
- font-size: 0.75rem;
56
+ font-size: 1.2rem;
57
57
  gap: 4px;
58
58
  --tds-link-icon-size: 16px;
59
59
  }
60
60
 
61
61
  .tds-link--size-small {
62
- font-size: 0.875rem;
62
+ font-size: 1.4rem;
63
63
  gap: 4px;
64
64
  --tds-link-icon-size: 16px;
65
65
  }
66
66
 
67
67
  .tds-link--size-medium {
68
- font-size: 1rem;
68
+ font-size: 1.6rem;
69
69
  gap: 6px;
70
70
  --tds-link-icon-size: 20px;
71
71
  }
72
72
 
73
73
  .tds-link--size-large {
74
- font-size: 1.125rem;
74
+ font-size: 1.8rem;
75
75
  gap: 8px;
76
76
  --tds-link-icon-size: 24px;
77
77
  }
package/src/blocks/toast/style.css CHANGED
@@ -26,7 +26,7 @@
26
26
 
27
27
  .tds-toast__label {
28
28
  font-family: Roboto;
29
- font-size: 1rem;
29
+ font-size: 1.6rem;
30
30
  line-height: 1.5;
31
31
  font-weight: 400;
32
32
  }
@@ -34,7 +34,7 @@
34
34
  .tds-toast__link {
35
35
  flex: 0 0 auto;
36
36
  font-family: Roboto;
37
- font-size: 1rem;
37
+ font-size: 1.6rem;
38
38
  line-height: 1.5;
39
39
  font-weight: 700;
40
40
  text-decoration: underline;