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

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 +95 -5
  2. package/README.md +10 -4
  3. package/SCSS_VARIABLES_REFERENCE.md +316 -0
  4. package/STYLING_SYNC_GUIDE.md +306 -0
  5. package/TRANSFORMATION_GUIDE.md +286 -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/dist/blocks/ad-container/style.css CHANGED
@@ -1,27 +1,30 @@
1
- /* Ad Container Styles */
2
- .tds-ad-container {
3
- display: block;
4
- min-height: 250px;
5
- background-color: var(--color-fill-secondary);
6
- border: 1px dashed var(--color-border-secondary);
7
- border-radius: var(--border-radius-s);
8
- }
1
+ /* Ad Container Block Frontend Styles */
2
+ /* Using resolved design token values for self-contained styling */
9
3
 
10
- .tds-ad-container--header {
11
- min-height: 90px;
4
+ .tds-ad-container {
5
+ clear: both;
6
+ width: 100%;
7
+ min-height: 283px;
8
+ margin: 18px 0;
9
+ box-sizing: content-box;
10
+ padding: 0 0 8px;
11
+ border-bottom: 2px solid rgb(78, 78, 78);
12
12
  }
13
13
 
14
- .tds-ad-container--inline {
15
- min-height: 250px;
14
+ @media (min-width: 768px) and (max-width: 1023px) {
15
+ .tds-ad-container {
16
+ min-height: 123px;
17
+ }
16
18
  }
17
19
 
18
- .tds-ad-container__placeholder {
20
+ .tds-ad-container--header {
19
21
  display: flex;
20
- align-items: center;
21
- justify-content: center;
22
- width: 100%;
23
- height: 100%;
24
- text-align: center;
25
- color: var(--color-text-secondary);
26
- font: var(--typography-body-small);
22
+ padding-block: 8px 8px;
23
+ margin-left: 0 !important;
24
+ margin-right: 0 !important;
25
+ max-width: 100%;
26
+ border-width: 0 0 2px;
27
+ border-style: solid;
28
+ border-color: #dbdbdb;
29
+ flex-direction: column;
27
30
  }
package/dist/blocks/button/style-resolved.css ADDED
@@ -0,0 +1,153 @@
1
+ /* Button Block Frontend Styles */
2
+ /* These styles mirror the React Button component styles */
3
+ /* Using resolved design token values for self-contained styling */
4
+
5
+ .tds-button {
6
+ --tds-button-bg: #005c8a;
7
+ --tds-button-fg: #ffffff;
8
+ --tds-button-border: transparent;
9
+ --tds-button-bg-hover: #004e75;
10
+ --tds-button-fg-hover: #ffffff;
11
+ --tds-button-border-hover: transparent;
12
+ --tds-button-bg-pressed: #00496e;
13
+ --tds-button-fg-pressed: #ffffff;
14
+ --tds-button-border-pressed: transparent;
15
+ --tds-button-border-focus: transparent;
16
+ --tds-button-focus-ring: #737373;
17
+ --tds-button-label-inline-padding: 8px;
18
+
19
+ position: relative;
20
+ display: flex;
21
+ align-items: center;
22
+ justify-content: center;
23
+ gap: 4px;
24
+ border-radius: 0;
25
+ border: 1px solid var(--tds-button-border);
26
+ background-color: var(--tds-button-bg);
27
+ color: var(--tds-button-fg);
28
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
29
+ font-weight: 500;
30
+ line-height: 1;
31
+ cursor: pointer;
32
+ text-decoration: none;
33
+ white-space: nowrap;
34
+ transition: 0.15s ease;
35
+ }
36
+
37
+ .tds-button:hover:not(:disabled) {
38
+ background-color: var(--tds-button-bg-hover);
39
+ border-color: var(--tds-button-border-hover);
40
+ color: var(--tds-button-fg-hover);
41
+ }
42
+
43
+ .tds-button:active:not(:disabled) {
44
+ background-color: var(--tds-button-bg-pressed);
45
+ border-color: var(--tds-button-border-pressed);
46
+ color: var(--tds-button-fg-pressed);
47
+ }
48
+
49
+ .tds-button:focus-visible {
50
+ outline: none;
51
+ background-color: var(--tds-button-bg-hover);
52
+ border-color: var(--tds-button-border-focus);
53
+ color: var(--tds-button-fg-hover);
54
+ }
55
+
56
+ .tds-button:focus-visible::after {
57
+ content: '';
58
+ position: absolute;
59
+ inset: -4px;
60
+ border: 2px solid #737373;
61
+ pointer-events: none;
62
+ }
63
+
64
+ .tds-button--loading {
65
+ cursor: wait;
66
+ gap: 0;
67
+ }
68
+
69
+ .tds-button--intent-primary {
70
+ --tds-button-bg: #005c8a;
71
+ --tds-button-fg: #ffffff;
72
+ --tds-button-border: transparent;
73
+ --tds-button-bg-hover: #004e75;
74
+ --tds-button-fg-hover: #ffffff;
75
+ --tds-button-border-hover: transparent;
76
+ --tds-button-bg-pressed: #00496e;
77
+ --tds-button-fg-pressed: #ffffff;
78
+ --tds-button-border-pressed: transparent;
79
+ }
80
+
81
+ .tds-button--intent-secondary {
82
+ --tds-button-bg: #ffffff;
83
+ --tds-button-fg: #1a1a1a;
84
+ --tds-button-border: #8c8c8c;
85
+ --tds-button-bg-hover: #d9d9d9;
86
+ --tds-button-fg-hover: #161616;
87
+ --tds-button-border-hover: #777777;
88
+ --tds-button-bg-pressed: #cccccc;
89
+ --tds-button-fg-pressed: #151515;
90
+ --tds-button-border-pressed: #707070;
91
+ --tds-button-border-focus: #8c8c8c;
92
+ }
93
+
94
+ .tds-button--intent-negative {
95
+ --tds-button-bg: #ffffff;
96
+ --tds-button-fg: #cb0705;
97
+ --tds-button-border: #cb0705;
98
+ --tds-button-bg-hover: #d9d9d9;
99
+ --tds-button-fg-hover: #ad0604;
100
+ --tds-button-border-hover: #ad0604;
101
+ --tds-button-bg-pressed: #cccccc;
102
+ --tds-button-fg-pressed: #a20604;
103
+ --tds-button-border-pressed: #a20604;
104
+ }
105
+
106
+ .tds-button--size-small {
107
+ min-height: 32px;
108
+ padding: 0 12px;
109
+ min-width: 80px;
110
+ font-size: 0.875rem;
111
+ --tds-button-label-inline-padding: 4px;
112
+ }
113
+
114
+ .tds-button--size-medium {
115
+ min-height: 48px;
116
+ min-width: 100px;
117
+ padding: 0 16px;
118
+ font-size: 1rem;
119
+ --tds-button-label-inline-padding: 8px;
120
+ }
121
+
122
+ .tds-button--size-large {
123
+ min-height: 64px;
124
+ min-width: 130px;
125
+ padding: 0 24px;
126
+ font-size: 1.125rem;
127
+ --tds-button-label-inline-padding: 8px;
128
+ }
129
+
130
+ .tds-button--behaviour-hug {
131
+ width: fit-content;
132
+ }
133
+
134
+ .tds-button--behaviour-full {
135
+ width: 100%;
136
+ }
137
+
138
+ .tds-button__label-container {
139
+ display: inline-flex;
140
+ align-items: center;
141
+ justify-content: center;
142
+ flex: 0 0 auto;
143
+ width: fit-content;
144
+ padding: 0 var(--tds-button-label-inline-padding);
145
+ }
146
+
147
+ .tds-button__label {
148
+ display: inline-flex;
149
+ align-items: center;
150
+ justify-content: center;
151
+ flex: 0 0 auto;
152
+ width: fit-content;
153
+ }
package/dist/blocks/button/style.css CHANGED
@@ -1,37 +1,157 @@
1
1
  /* Button Block Frontend Styles */
2
+ /* These styles mirror the React Button component styles */
3
+ /* Using resolved design token values for self-contained styling */
2
4
 
3
- .tds-button-wrapper {
4
- display: inline-block;
5
- }
5
+ .tds-button {
6
+ --tds-button-bg: #005c8a;
7
+ --tds-button-fg: #ffffff;
8
+ --tds-button-border: transparent;
9
+ --tds-button-bg-hover: #004e75;
10
+ --tds-button-fg-hover: #ffffff;
11
+ --tds-button-border-hover: transparent;
12
+ --tds-button-bg-pressed: #00496e;
13
+ --tds-button-fg-pressed: #ffffff;
14
+ --tds-button-border-pressed: transparent;
15
+ --tds-button-border-focus: transparent;
16
+ --tds-button-focus-ring: #737373;
17
+ --tds-button-label-inline-padding: 8px;
6
18
 
7
- .tds-button-wrapper .tds-button {
8
- /* Styles inherited from @times-design-system/theme-scss package */
9
- /* Import SCSS tokens and component styles as needed */
10
- display: inline-flex;
19
+ position: relative;
20
+ display: flex;
11
21
  align-items: center;
12
22
  justify-content: center;
23
+ gap: 4px;
24
+ border-radius: 0;
25
+ border: 1px solid var(--tds-button-border);
26
+ background-color: var(--tds-button-bg);
27
+ color: var(--tds-button-fg);
28
+ font-family: Roboto;
29
+ font-weight: 500;
30
+ line-height: 1;
13
31
  cursor: pointer;
14
32
  text-decoration: none;
15
- border: none;
16
- border-radius: 0;
17
- font-family: inherit;
18
- font-size: inherit;
19
- transition: all 0.2s ease-in-out;
33
+ white-space: nowrap;
34
+ transition: 0.15s ease;
35
+ }
36
+
37
+ .tds-button:hover:not(:disabled) {
38
+ background-color: var(--tds-button-bg-hover);
39
+ border-color: var(--tds-button-border-hover);
40
+ color: var(--tds-button-fg-hover);
41
+ }
42
+
43
+ .tds-button:active:not(:disabled) {
44
+ background-color: var(--tds-button-bg-pressed);
45
+ border-color: var(--tds-button-border-pressed);
46
+ color: var(--tds-button-fg-pressed);
47
+ }
48
+
49
+ .tds-button:focus-visible {
50
+ outline: none;
51
+ background-color: var(--tds-button-bg-hover);
52
+ border-color: var(--tds-button-border-focus);
53
+ color: var(--tds-button-fg-hover);
54
+ }
55
+
56
+ .tds-button:focus-visible::after {
57
+ content: '';
58
+ position: absolute;
59
+ inset: -4px;
60
+ border: 2px solid #737373;
61
+ pointer-events: none;
62
+ }
63
+
64
+ .tds-button--loading {
65
+ cursor: wait;
66
+ gap: 0;
67
+ }
68
+
69
+ .tds-button--intent-primary {
70
+ --tds-button-bg: #005c8a;
71
+ --tds-button-fg: #ffffff;
72
+ --tds-button-border: transparent;
73
+ --tds-button-bg-hover: #004e75;
74
+ --tds-button-fg-hover: #ffffff;
75
+ --tds-button-border-hover: transparent;
76
+ --tds-button-bg-pressed: #00496e;
77
+ --tds-button-fg-pressed: #ffffff;
78
+ --tds-button-border-pressed: transparent;
79
+ }
80
+
81
+ .tds-button--intent-secondary {
82
+ --tds-button-bg: #ffffff;
83
+ --tds-button-fg: #1a1a1a;
84
+ --tds-button-border: #8c8c8c;
85
+ --tds-button-bg-hover: #d9d9d9;
86
+ --tds-button-fg-hover: #161616;
87
+ --tds-button-border-hover: #777777;
88
+ --tds-button-bg-pressed: #cccccc;
89
+ --tds-button-fg-pressed: #151515;
90
+ --tds-button-border-pressed: #707070;
91
+ --tds-button-border-focus: #8c8c8c;
92
+ }
93
+
94
+ .tds-button--intent-negative {
95
+ --tds-button-bg: #ffffff;
96
+ --tds-button-fg: #cb0705;
97
+ --tds-button-border: #cb0705;
98
+ --tds-button-bg-hover: #d9d9d9;
99
+ --tds-button-fg-hover: #ad0604;
100
+ --tds-button-border-hover: #ad0604;
101
+ --tds-button-bg-pressed: #cccccc;
102
+ --tds-button-fg-pressed: #a20604;
103
+ --tds-button-border-pressed: #a20604;
104
+ }
105
+
106
+ .tds-button--size-small {
107
+ min-height: 32px;
108
+ padding: 0 12px;
109
+ min-width: 80px;
110
+ font-size: 1.4rem;
111
+ --tds-button-label-inline-padding: 4px;
20
112
  }
21
113
 
22
- .tds-button-wrapper .tds-button--behaviour-full {
114
+ .tds-button--size-medium {
115
+ min-height: 48px;
116
+ min-width: 100px;
117
+ padding: 0 16px;
118
+ font-size: 1.6rem;
119
+ --tds-button-label-inline-padding: 8px;
120
+ }
121
+
122
+ .tds-button--size-large {
123
+ min-height: 64px;
124
+ min-width: 130px;
125
+ padding: 0 24px;
126
+ font-size: 1.8rem;
127
+ --tds-button-label-inline-padding: 8px;
128
+ }
129
+
130
+ .tds-button--behaviour-hug {
131
+ width: fit-content;
132
+ }
133
+
134
+ .tds-button--behaviour-full {
23
135
  width: 100%;
24
136
  }
25
137
 
26
- .tds-button-wrapper .tds-button:disabled {
27
- cursor: not-allowed;
28
- opacity: 0.5;
138
+ .tds-button-wrapper {
139
+ display: inline-block;
29
140
  }
30
141
 
31
142
  .tds-button__label-container {
32
- display: inline;
143
+ display: inline-flex;
144
+ align-items: center;
145
+ justify-content: center;
146
+ flex: 0 0 auto;
147
+ width: fit-content;
148
+ padding: 0 var(--tds-button-label-inline-padding);
33
149
  }
34
150
 
35
151
  .tds-button__label {
36
- display: inline;
152
+ display: inline-flex;
153
+ align-items: center;
154
+ justify-content: center;
155
+ flex: 0 0 auto;
156
+ width: fit-content;
37
157
  }
package/dist/blocks/chip/style.css CHANGED
@@ -1,48 +1,87 @@
1
- /* Chip Block Styles */
1
+ /* Chip Block Frontend Styles */
2
+ /* Using resolved design token values for self-contained styling */
3
+
2
4
  .tds-chip {
5
+ --tds-chip-bg: #005c8a;
6
+ --tds-chip-bg-hover: #004e75;
7
+ --tds-chip-bg-pressed: #00496e;
8
+ --tds-chip-fg: #ffffff;
9
+ --tds-chip-fg-hover: #d9d9d9;
10
+ --tds-chip-fg-pressed: #cccccc;
11
+ --tds-chip-icon: #ffffff;
12
+ --tds-chip-icon-hover: #d9d9d9;
13
+ --tds-chip-icon-pressed: #cccccc;
14
+ --tds-chip-border: transparent;
15
+ --tds-chip-border-hover: transparent;
16
+ --tds-chip-border-pressed: transparent;
17
+ --tds-chip-focus-ring: #737373;
18
+
19
+ position: relative;
3
20
  display: inline-flex;
4
21
  align-items: center;
5
- gap: var(--spacing-xs);
6
- padding: var(--spacing-xs) var(--spacing-m);
7
- border: 1px solid var(--color-border-secondary);
8
- border-radius: 16px;
9
- background-color: var(--color-fill-secondary);
10
- color: var(--color-text-primary);
11
- font: var(--typography-body-small);
22
+ justify-content: center;
23
+ gap: 4px;
24
+ border: 1px solid var(--tds-chip-border);
25
+ border-radius: 9999px;
26
+ background-color: var(--tds-chip-bg);
27
+ color: var(--tds-chip-fg);
28
+ font-family: Roboto;
29
+ font-weight: 500;
30
+ line-height: 1;
31
+ white-space: nowrap;
12
32
  cursor: pointer;
13
- transition: all 0.2s ease-in-out;
33
+ transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
14
34
  }
15
35
 
16
- .tds-chip--intent-primary {
17
- background-color: var(--color-fill-primary);
18
- border-color: var(--color-border-primary);
36
+ .tds-chip:hover:not(:disabled) {
37
+ background-color: var(--tds-chip-bg-hover);
38
+ border-color: var(--tds-chip-border-hover);
39
+ color: var(--tds-chip-fg-hover);
19
40
  }
20
41
 
21
- .tds-chip--intent-negative {
22
- background-color: var(--color-fill-negative);
23
- border-color: var(--color-border-negative);
42
+ .tds-chip:active:not(:disabled) {
43
+ background-color: var(--tds-chip-bg-pressed);
44
+ border-color: var(--tds-chip-border-pressed);
45
+ color: var(--tds-chip-fg-pressed);
24
46
  }
25
47
 
26
- .tds-chip--size-small {
27
- padding: var(--spacing-xs) var(--spacing-s);
28
- font-size: 12px;
48
+ .tds-chip:focus-visible {
49
+ outline: none;
50
+ background-color: var(--tds-chip-bg-hover);
51
+ border-color: var(--tds-chip-border-hover);
52
+ color: var(--tds-chip-fg-hover);
29
53
  }
30
54
 
31
- .tds-chip--size-large {
32
- padding: var(--spacing-s) var(--spacing-m);
33
- font-size: 16px;
55
+ .tds-chip:focus-visible::after {
56
+ content: '';
57
+ position: absolute;
58
+ inset: -4px;
59
+ border: 2px solid #737373;
60
+ border-radius: inherit;
61
+ pointer-events: none;
34
62
  }
35
63
 
36
- .tds-chip--state-hover {
37
- opacity: 0.8;
64
+ .tds-chip:disabled {
65
+ background-color: #bfbfbf;
66
+ border-color: transparent;
67
+ color: #d9d9d9;
68
+ cursor: not-allowed;
38
69
  }
39
70
 
40
- .tds-chip--state-disabled {
41
- opacity: 0.5;
42
- cursor: not-allowed;
71
+ .tds-chip--size-small {
72
+ min-height: 32px;
73
+ padding: 0 12px;
74
+ font-size: 1.4rem;
75
+ }
76
+
77
+ .tds-chip--size-large {
78
+ min-height: 48px;
79
+ padding: 0 16px;
80
+ font-size: 1.6rem;
43
81
  }
44
82
 
45
- .tds-chip__icon-left,
46
- .tds-chip__icon-right {
47
- font-size: 14px;
83
+ .tds-chip__content {
84
+ display: inline-flex;
85
+ align-items: center;
86
+ justify-content: center;
48
87
  }
package/dist/blocks/divider/style.css CHANGED
@@ -1,25 +1,37 @@
1
- /* Divider Block Styles */
1
+ /* Divider Block Frontend Styles */
2
+ /* Using resolved design token values for self-contained styling */
3
+
2
4
  .tds-divider {
3
- height: 1px;
4
- background-color: var(--color-border-secondary);
5
- margin: var(--spacing-m) 0;
5
+ box-sizing: content-box;
6
+ border: 0;
7
+ border-top: 1px;
8
+ border-style: solid;
9
+ border-color: #999999;
10
+ flex-shrink: 0;
11
+ height: 0;
12
+ width: 100%;
6
13
  }
7
14
 
8
- .tds-divider--dashed {
9
- border-top: 1px dashed var(--color-border-secondary);
10
- background-color: transparent;
15
+ .tds-divider.tds-divider--dashed {
16
+ border-style: dashed;
11
17
  }
12
18
 
19
+ /* Vertical */
13
20
  .tds-divider--vertical {
14
- width: 1px;
15
- height: auto;
16
- margin: 0 var(--spacing-m);
21
+ width: 0;
22
+ height: 100%;
23
+ align-self: stretch;
24
+ border-top: none;
25
+ border-left: 1px;
26
+ border-style: solid;
17
27
  }
18
28
 
19
- .tds-divider--padding {
20
- margin: var(--spacing-xl) 0;
29
+ /* Padding — gutter spacing around the line */
30
+ .tds-divider--horizontal.tds-divider--padding {
31
+ margin-block: 24px;
21
32
  }
22
33
 
23
34
  .tds-divider--vertical.tds-divider--padding {
24
- margin: 0 var(--spacing-xl);
35
+ margin-inline: 24px;
36
+ margin-block: 0;
25
37
  }
package/dist/blocks/flag/style.css CHANGED
@@ -1,45 +1,54 @@
1
- /* Flag Block Styles */
1
+ /* Flag Block Frontend Styles */
2
+ /* Using resolved design token values for self-contained styling */
3
+
2
4
  .tds-flag {
5
+ --tds-flag-bg: #000000;
6
+ --tds-flag-fg: #f2f2f2;
7
+ --tds-flag-icon: var(--flag-fg);
8
+ --tds-flag-border: transparent;
9
+
3
10
  display: inline-flex;
4
11
  align-items: center;
5
- gap: var(--spacing-s);
6
- padding: var(--spacing-s) var(--spacing-m);
7
- border-radius: var(--border-radius-s);
8
- background-color: var(--color-fill-secondary);
9
- color: var(--color-text-primary);
10
- font: var(--typography-body-small);
11
- }
12
-
13
- .tds-flag--intent-primary {
14
- background-color: var(--color-fill-primary);
15
- color: var(--color-text-on-primary);
16
- }
17
-
18
- .tds-flag--intent-negative {
19
- background-color: var(--color-fill-negative);
20
- color: var(--color-text-on-negative);
12
+ justify-content: center;
13
+ gap: 4px;
14
+ min-height: 19px;
15
+ min-width: 42px;
16
+ padding: 0 2px;
17
+ border-radius: 2px;
18
+ border: 1px solid var(--tds-flag-border);
19
+ background-color: var(--tds-flag-bg);
20
+ color: var(--tds-flag-fg);
21
+ font-family: Roboto;
22
+ font-size: 1.4rem;
23
+ font-weight: 500;
24
+ line-height: 1.125;
25
+ text-transform: uppercase;
26
+ white-space: nowrap;
27
+ box-sizing: border-box;
21
28
  }
22
29
 
23
- .tds-flag--intent-positive {
24
- background-color: var(--color-fill-positive);
25
- color: var(--color-text-on-positive);
30
+ .tds-flag--size-small {
31
+ font-size: 1.2rem;
26
32
  }
27
33
 
28
- .tds-flag--size-small {
29
- padding: var(--spacing-xs) var(--spacing-s);
30
- font-size: 12px;
34
+ .tds-flag--intent-secondary {
35
+ --tds-flag-bg: transparent;
36
+ --tds-flag-fg: #1a1a1a;
37
+ --tds-flag-icon: var(--tds-flag-fg);
31
38
  }
32
39
 
33
- .tds-flag--size-large {
34
- padding: var(--spacing-m) var(--spacing-l);
35
- font-size: 16px;
40
+ .tds-flag--intent-callout {
41
+ --tds-flag-bg: #b20908;
42
+ --tds-flag-fg: #ffffff;
43
+ --tds-flag-icon: var(--tds-flag-fg);
36
44
  }
37
45
 
38
46
  .tds-flag__label {
39
- font-weight: 600;
47
+ display: inline-flex;
48
+ align-items: center;
40
49
  }
41
50
 
42
- .tds-flag__icon-left,
43
- .tds-flag__icon-right {
44
- font-size: 14px;
51
+ .tds-flag__content {
52
+ display: inline-flex;
53
+ align-items: center;
45
54
  }
package/dist/blocks/icon-button/style.css CHANGED
@@ -1,32 +1,31 @@
1
- /* Icon Button Styles */
2
- .tds-icon-button {
3
- display: inline-flex;
4
- align-items: center;
5
- justify-content: center;
6
- width: 40px;
7
- height: 40px;
8
- border: none;
9
- border-radius: var(--border-radius-s);
10
- background-color: var(--color-fill-secondary);
11
- color: var(--color-text-primary);
12
- cursor: pointer;
13
- transition: all 0.2s ease-in-out;
14
- text-decoration: none;
1
+ /* Icon Button Block Frontend Styles */
2
+ /* Using resolved design token values for self-contained styling */
3
+ /* Icon buttons inherit base button styles for colors, intents, etc. */
4
+
5
+ .tds-icon-button--size-small {
6
+ width: 32px;
7
+ height: 32px;
8
+ padding: 6px;
15
9
  }
16
10
 
17
- .tds-icon-button:hover {
18
- background-color: var(--color-fill-hover);
11
+ .tds-icon-button--size-medium {
12
+ width: 48px;
13
+ height: 48px;
14
+ padding: 12px;
19
15
  }
20
16
 
21
- .tds-icon-button:focus {
22
- outline: none;
23
- box-shadow: 0 0 0 2px var(--color-fill-focus);
17
+ .tds-icon-button--size-large {
18
+ width: 64px;
19
+ height: 64px;
20
+ padding: 16px;
24
21
  }
25
22
 
26
- .tds-icon-button--round {
27
- border-radius: 50%;
23
+ .tds-icon-button--round.tds-button {
24
+ border-radius: 9999px;
28
25
  }
29
26
 
30
27
  .tds-icon-button__icon {
31
- font-size: 20px;
28
+ display: inline-flex;
29
+ align-items: center;
30
+ justify-content: center;
32
31
  }