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

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 (28) hide show
  1. package/BLOCK_CREATION_CHECKLIST.md +94 -5
  2. package/README.md +10 -4
  3. package/SCSS_VARIABLES_REFERENCE.md +314 -0
  4. package/STYLING_SYNC_GUIDE.md +306 -0
  5. package/TRANSFORMATION_GUIDE.md +280 -13
  6. package/dist/blocks/ad-container/style.css +23 -20
  7. package/dist/blocks/button/style-resolved.css +153 -0
  8. package/dist/blocks/button/style.css +138 -18
  9. package/dist/blocks/chip/style.css +68 -29
  10. package/dist/blocks/divider/style.css +25 -13
  11. package/dist/blocks/flag/style.css +39 -30
  12. package/dist/blocks/icon-button/style.css +21 -22
  13. package/dist/blocks/input/style.css +40 -17
  14. package/dist/blocks/link/style.css +87 -34
  15. package/dist/blocks/text/style.css +5 -18
  16. package/dist/blocks/toast/style.css +50 -34
  17. package/package.json +3 -3
  18. package/src/blocks/ad-container/style.css +23 -20
  19. package/src/blocks/button/style-resolved.css +153 -0
  20. package/src/blocks/button/style.css +138 -18
  21. package/src/blocks/chip/style.css +68 -29
  22. package/src/blocks/divider/style.css +25 -13
  23. package/src/blocks/flag/style.css +39 -30
  24. package/src/blocks/icon-button/style.css +21 -22
  25. package/src/blocks/input/style.css +40 -17
  26. package/src/blocks/link/style.css +87 -34
  27. package/src/blocks/text/style.css +5 -18
  28. package/src/blocks/toast/style.css +50 -34
package/src/blocks/link/style.css CHANGED
@@ -1,66 +1,119 @@
1
- /* Link Block Styles */
1
+ /* Link Block Frontend Styles */
2
+ /* These styles mirror the React Link component styles */
3
+
2
4
  .tds-link {
5
+ --tds-link-color-default: #286c96;
6
+ --tds-link-color-hover: #286c96;
7
+ --tds-link-color-pressed: #286c96;
8
+ --tds-link-color-visited: #286c96;
9
+ --tds-link-color-disabled: #bfbfbf;
10
+ --tds-link-underline-default: #286c96;
11
+ --tds-link-underline-hover: #286c96;
12
+ --tds-link-underline-pressed: #286c96;
13
+ --tds-link-underline-visited: #286c96;
14
+ --tds-link-focus-ring: #737373;
15
+ --tds-link-icon-size: 20px;
16
+
17
+ position: relative;
3
18
  display: inline-flex;
4
19
  align-items: center;
5
- gap: var(--spacing-xs);
6
- text-decoration: none;
20
+ gap: 4px;
21
+ color: var(--tds-link-color-default);
7
22
  cursor: pointer;
8
- transition: all 0.2s ease-in-out;
9
- }
10
-
11
- .tds-link--intent-primary {
12
- color: var(--color-text-link-primary);
23
+ font-family: Roboto;
24
+ font-size: 1rem;
25
+ font-weight: 400;
26
+ line-height: 1.5;
27
+ text-decoration: underline;
28
+ text-decoration-color: var(--tds-link-underline-default);
29
+ text-decoration-skip-ink: auto;
30
+ text-underline-offset: 4px;
31
+ text-decoration-thickness: 2px;
32
+ transition: color 0.36s cubic-bezier(0.22, 1, 0.36, 1), text-decoration-color 0.36s cubic-bezier(0.22, 1, 0.36, 1), text-decoration-thickness 0.36s cubic-bezier(0.22, 1, 0.36, 1);
13
33
  }
14
34
 
15
35
  .tds-link--intent-secondary {
16
- color: var(--color-text-link-secondary);
36
+ --tds-link-color-default: var(--interactive-link-secondary-text-default, #1a191a);
37
+ --tds-link-color-hover: var(--interactive-link-secondary-text-hover, #1a191a);
38
+ --tds-link-color-pressed: var(--interactive-link-secondary-text-pressed, #1a191a);
39
+ --tds-link-color-visited: var(--interactive-link-secondary-text-visited, var(--interactive-link-secondary-text-default, #1a191a));
40
+ --tds-link-underline-default: var(--interactive-link-secondary-underline-default, var(--tds-link-color-default));
41
+ --tds-link-underline-hover: var(--interactive-link-secondary-underline-hover, var(--tds-link-color-hover));
42
+ --tds-link-underline-pressed: var(--interactive-link-secondary-underline-pressed, var(--tds-link-color-pressed));
43
+ --tds-link-underline-visited: var(--interactive-link-secondary-underline-visited, var(--tds-link-color-visited));
17
44
  }
18
45
 
19
- .tds-link--intent-negative {
20
- color: var(--color-text-link-negative);
46
+ .tds-link--sentiment-brand {
47
+ font-family: var(--fontFamily020);
21
48
  }
22
49
 
23
- .tds-link--sentiment-positive {
24
- font-weight: 600;
50
+ .tds-link--sentiment-utility {
51
+ font-family: var(--fontFamily040);
52
+ font-weight: var(--fontWeight070);
25
53
  }
26
54
 
27
- .tds-link--sentiment-negative {
28
- font-weight: 400;
29
- opacity: 0.8;
55
+ .tds-link--size-xsmall {
56
+ font-size: 0.75rem;
57
+ gap: 4px;
58
+ --tds-link-icon-size: 16px;
30
59
  }
31
60
 
32
61
  .tds-link--size-small {
33
- font-size: 12px;
62
+ font-size: 0.875rem;
63
+ gap: 4px;
64
+ --tds-link-icon-size: 16px;
65
+ }
66
+
67
+ .tds-link--size-medium {
68
+ font-size: 1rem;
69
+ gap: 6px;
70
+ --tds-link-icon-size: 20px;
34
71
  }
35
72
 
36
73
  .tds-link--size-large {
37
- font-size: 18px;
74
+ font-size: 1.125rem;
75
+ gap: 8px;
76
+ --tds-link-icon-size: 24px;
38
77
  }
39
78
 
40
- .tds-link--state-hover {
41
- text-decoration: underline;
79
+ .tds-link__content {
80
+ white-space: nowrap;
42
81
  }
43
82
 
44
- .tds-link--state-visited {
45
- color: var(--color-text-link-visited);
83
+ .tds-link:hover:not(.tds-link--is-disabled) {
84
+ color: var(--tds-link-color-hover);
85
+ text-decoration-color: var(--tds-link-underline-hover);
86
+ text-decoration-thickness: var(--spacing-02);
46
87
  }
47
88
 
48
- .tds-link--state-focus {
49
- outline: 2px solid var(--color-border-focus);
50
- outline-offset: 2px;
89
+ .tds-link:active:not(.tds-link--is-disabled) {
90
+ color: var(--tds-link-color-pressed);
91
+ text-decoration-color: var(--tds-link-underline-pressed);
51
92
  }
52
93
 
53
- .tds-link--state-disabled {
54
- opacity: 0.5;
55
- cursor: not-allowed;
94
+ .tds-link:visited:not(.tds-link--is-disabled) {
95
+ color: var(--tds-link-color-visited);
96
+ text-decoration-color: var(--tds-link-underline-visited);
56
97
  }
57
98
 
58
- .tds-link--block {
59
- display: flex;
60
- width: 100%;
99
+ .tds-link:focus-visible:not(.tds-link--is-disabled) {
100
+ outline: none;
101
+ color: var(--tds-link-color-default);
102
+ text-decoration-color: var(--tds-link-underline-default);
61
103
  }
62
104
 
63
- .tds-link__icon-left,
64
- .tds-link__icon-right {
65
- font-size: 1em;
105
+ .tds-link:focus-visible:not(.tds-link--is-disabled)::after {
106
+ content: '';
107
+ position: absolute;
108
+ inset: -4px;
109
+ border: 2px solid #737373;
110
+ pointer-events: none;
111
+ }
112
+
113
+ .tds-link.tds-link--is-disabled,
114
+ .tds-link[aria-disabled='true'] {
115
+ color: var(--tds-link-color-disabled);
116
+ text-decoration-color: var(--tds-link-color-disabled);
117
+ cursor: not-allowed;
118
+ pointer-events: none;
66
119
  }
package/src/blocks/text/style.css CHANGED
@@ -1,20 +1,7 @@
1
- /* Text Block Styles */
2
- .tds-text {
3
- margin: 0;
4
- padding: 0;
5
- }
6
-
7
- .tds-text--body-standard {
8
- font: var(--typography-body-standard);
9
- color: var(--color-text-primary);
10
- }
1
+ /* Text Block Frontend Styles */
2
+ /* Using resolved design token values for self-contained styling */
3
+ /* Text component is typography-based, minimal CSS needed */
11
4
 
12
- .tds-text--body-small {
13
- font: var(--typography-body-small);
14
- color: var(--color-text-secondary);
15
- }
16
-
17
- .tds-text--headline {
18
- font: var(--typography-headline);
19
- color: var(--color-text-primary);
5
+ .tds-text {
6
+ /* Base typography handled by design tokens and parent context */
20
7
  }
package/src/blocks/toast/style.css CHANGED
@@ -1,51 +1,67 @@
1
- /* Toast Block Styles */
1
+ /* Toast Block Frontend Styles */
2
+ /* Using resolved design token values for self-contained styling */
3
+
2
4
  .tds-toast {
3
- display: flex;
5
+ --tds-toast-fill: #22724f;
6
+ --tds-toast-text: #ffffff;
7
+ --tds-toast-link: #ffffff;
8
+
9
+ display: inline-flex;
4
10
  align-items: center;
5
- justify-content: space-between;
6
- gap: var(--spacing-m);
7
- padding: var(--spacing-m);
8
- border-radius: var(--border-radius-s);
9
- background-color: var(--color-fill-secondary);
10
- color: var(--color-text-primary);
11
- font: var(--typography-body-standard);
12
- margin-bottom: var(--spacing-m);
11
+ gap: 12px;
12
+ width: 373px;
13
+ min-height: 48px;
14
+ padding: 12px 16px;
15
+ border-radius: 4px;
16
+ background: var(--tds-toast-fill);
17
+ color: var(--tds-toast-text);
18
+ box-shadow: 0 16px 24px 0 rgb(0 0 0 / 8%);
19
+ box-sizing: border-box;
13
20
  }
14
21
 
15
- .tds-toast--intent-success {
16
- background-color: var(--color-fill-positive);
17
- color: var(--color-text-on-positive);
22
+ .tds-toast__content {
23
+ flex: 1 1 auto;
24
+ min-width: 0;
18
25
  }
19
26
 
20
- .tds-toast--intent-warning {
21
- background-color: var(--color-fill-warning);
22
- color: var(--color-text-on-warning);
27
+ .tds-toast__label {
28
+ font-family: Roboto;
29
+ font-size: 1rem;
30
+ line-height: 1.5;
31
+ font-weight: 400;
23
32
  }
24
33
 
25
- .tds-toast--intent-error {
26
- background-color: var(--color-fill-negative);
27
- color: var(--color-text-on-negative);
34
+ .tds-toast__link {
35
+ flex: 0 0 auto;
36
+ font-family: Roboto;
37
+ font-size: 1rem;
38
+ line-height: 1.5;
39
+ font-weight: 700;
40
+ text-decoration: underline;
41
+ color: var(--tds-toast-link);
42
+ cursor: pointer;
28
43
  }
29
44
 
30
- .tds-toast__content {
31
- flex: 1;
45
+ .tds-toast--intent-success {
46
+ --tds-toast-fill: #22724f;
47
+ --tds-toast-text: #ffffff;
48
+ --tds-toast-link: #ffffff;
32
49
  }
33
50
 
34
- .tds-toast__label {
35
- margin: 0;
51
+ .tds-toast--intent-info {
52
+ --tds-toast-fill: #0a3472;
53
+ --tds-toast-text: #ffffff;
54
+ --tds-toast-link: #ffffff;
36
55
  }
37
56
 
38
- .tds-toast__link {
39
- padding: var(--spacing-xs) var(--spacing-s);
40
- border: none;
41
- border-radius: var(--border-radius-xs);
42
- background-color: rgba(255, 255, 255, 0.1);
43
- color: inherit;
44
- cursor: pointer;
45
- transition: all 0.2s ease-in-out;
46
- white-space: nowrap;
57
+ .tds-toast--intent-warning {
58
+ --tds-toast-fill: #e49307;
59
+ --tds-toast-text: #000000;
60
+ --tds-toast-link: #000000;
47
61
  }
48
62
 
49
- .tds-toast__link:hover {
50
- background-color: rgba(255, 255, 255, 0.2);
63
+ .tds-toast--intent-error {
64
+ --tds-toast-fill: #cb0705;
65
+ --tds-toast-text: #ffffff;
66
+ --tds-toast-link: #ffffff;
51
67
  }