@wordpress/theme 0.2.0 → 0.2.1-next.dc3f6d3c1.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 (76) hide show
  1. package/README.md +5 -1
  2. package/bin/generate-primitive-tokens/index.ts +1 -1
  3. package/build/color-ramps/index.js +17 -13
  4. package/build/color-ramps/index.js.map +2 -2
  5. package/build/color-ramps/lib/color-utils.js +5 -0
  6. package/build/color-ramps/lib/color-utils.js.map +2 -2
  7. package/build/color-ramps/lib/constants.js +1 -1
  8. package/build/color-ramps/lib/constants.js.map +1 -1
  9. package/build/color-ramps/lib/default-ramps.js +154 -154
  10. package/build/color-ramps/lib/default-ramps.js.map +2 -2
  11. package/build/color-ramps/lib/find-color-with-constraints.js +1 -1
  12. package/build/color-ramps/lib/find-color-with-constraints.js.map +2 -2
  13. package/build/color-ramps/lib/index.js +18 -11
  14. package/build/color-ramps/lib/index.js.map +2 -2
  15. package/build/color-ramps/lib/ramp-configs.js +2 -2
  16. package/build/color-ramps/lib/ramp-configs.js.map +1 -1
  17. package/build/color-ramps/lib/types.js.map +1 -1
  18. package/build/color-ramps/lib/utils.js +4 -8
  19. package/build/color-ramps/lib/utils.js.map +2 -2
  20. package/build/prebuilt/json/figma.json +51 -51
  21. package/build/use-theme-provider-styles.js +1 -4
  22. package/build/use-theme-provider-styles.js.map +2 -2
  23. package/build-module/color-ramps/index.js +18 -14
  24. package/build-module/color-ramps/index.js.map +2 -2
  25. package/build-module/color-ramps/lib/color-utils.js +7 -1
  26. package/build-module/color-ramps/lib/color-utils.js.map +2 -2
  27. package/build-module/color-ramps/lib/constants.js +1 -1
  28. package/build-module/color-ramps/lib/constants.js.map +1 -1
  29. package/build-module/color-ramps/lib/default-ramps.js +154 -154
  30. package/build-module/color-ramps/lib/default-ramps.js.map +2 -2
  31. package/build-module/color-ramps/lib/find-color-with-constraints.js +2 -2
  32. package/build-module/color-ramps/lib/find-color-with-constraints.js.map +2 -2
  33. package/build-module/color-ramps/lib/index.js +17 -11
  34. package/build-module/color-ramps/lib/index.js.map +2 -2
  35. package/build-module/color-ramps/lib/ramp-configs.js +2 -2
  36. package/build-module/color-ramps/lib/ramp-configs.js.map +1 -1
  37. package/build-module/color-ramps/lib/utils.js +0 -3
  38. package/build-module/color-ramps/lib/utils.js.map +2 -2
  39. package/build-module/prebuilt/json/figma.json +51 -51
  40. package/build-module/use-theme-provider-styles.js +1 -4
  41. package/build-module/use-theme-provider-styles.js.map +2 -2
  42. package/build-types/color-ramps/index.d.ts +1 -0
  43. package/build-types/color-ramps/index.d.ts.map +1 -1
  44. package/build-types/color-ramps/lib/color-utils.d.ts +5 -0
  45. package/build-types/color-ramps/lib/color-utils.d.ts.map +1 -1
  46. package/build-types/color-ramps/lib/constants.d.ts +1 -1
  47. package/build-types/color-ramps/lib/constants.d.ts.map +1 -1
  48. package/build-types/color-ramps/lib/index.d.ts.map +1 -1
  49. package/build-types/color-ramps/lib/types.d.ts +2 -4
  50. package/build-types/color-ramps/lib/types.d.ts.map +1 -1
  51. package/build-types/color-ramps/lib/utils.d.ts +0 -5
  52. package/build-types/color-ramps/lib/utils.d.ts.map +1 -1
  53. package/build-types/color-ramps/stories/index.story.d.ts.map +1 -1
  54. package/build-types/color-ramps/stories/ramp-table.d.ts +2 -4
  55. package/build-types/color-ramps/stories/ramp-table.d.ts.map +1 -1
  56. package/build-types/use-theme-provider-styles.d.ts.map +1 -1
  57. package/package.json +4 -4
  58. package/src/color-ramps/index.ts +17 -12
  59. package/src/color-ramps/lib/color-utils.ts +11 -0
  60. package/src/color-ramps/lib/constants.ts +3 -3
  61. package/src/color-ramps/lib/default-ramps.ts +154 -154
  62. package/src/color-ramps/lib/find-color-with-constraints.ts +2 -2
  63. package/src/color-ramps/lib/index.ts +27 -24
  64. package/src/color-ramps/lib/ramp-configs.ts +2 -2
  65. package/src/color-ramps/lib/types.ts +2 -7
  66. package/src/color-ramps/lib/utils.ts +1 -8
  67. package/src/color-ramps/stories/index.story.tsx +11 -5
  68. package/src/color-ramps/stories/ramp-table.tsx +15 -26
  69. package/src/color-ramps/test/__snapshots__/index.test.ts.snap +11717 -41231
  70. package/src/color-ramps/test/index.test.ts +2 -2
  71. package/src/prebuilt/css/design-tokens.css +51 -51
  72. package/src/prebuilt/json/figma.json +51 -51
  73. package/src/use-theme-provider-styles.ts +1 -4
  74. package/tokens/color.json +88 -88
  75. package/tsconfig.bin.tsbuildinfo +1 -1
  76. package/tsconfig.src.tsbuildinfo +1 -1
package/src/color-ramps/stories/ramp-table.tsx CHANGED
@@ -40,13 +40,8 @@ type RampTableProps = {
40
40
  name: keyof Ramp;
41
41
  value: string;
42
42
  };
43
- ramp: Record<
44
- keyof Ramp,
45
- {
46
- color: string;
47
- warning: boolean;
48
- }
49
- >;
43
+ ramp: Record< keyof Ramp, string >;
44
+ warnings?: string[];
50
45
  }[];
51
46
  };
52
47
  export const RampTable = forwardRef< HTMLDivElement, RampTableProps >(
@@ -72,26 +67,26 @@ export const RampTable = forwardRef< HTMLDivElement, RampTableProps >(
72
67
  padding: '8px 4px',
73
68
  fontSize: 11,
74
69
  fontWeight: 500,
75
- color: ramps[ 0 ].ramp.fgSurface4.color,
70
+ color: ramps[ 0 ].ramp.fgSurface4,
76
71
  } }
77
72
  >
78
73
  { abbr }
79
74
  </div>
80
75
  ) ) }
81
- { ramps.map( ( { seed, ramp }, i ) =>
76
+ { ramps.map( ( { seed, ramp, warnings = [] }, i ) =>
82
77
  RAMP_TOKENS_ORDER.map( ( { tokenName } ) => (
83
78
  <div
84
79
  key={ `${ seed }-${ i }-${ tokenName }` }
85
80
  style={ {
86
81
  marginBlockStart: i !== 0 ? 4 : 0,
87
- backgroundColor: ramp[ tokenName ].color,
82
+ backgroundColor: ramp[ tokenName ],
88
83
  display: 'grid',
89
84
  gridTemplateRows: '20px 1fr',
90
85
  placeItems: 'center',
91
86
  height: tokenName === seed.name ? 60 : 40,
92
87
  minWidth: 32,
93
88
  fontSize: 14,
94
- outline: ramp[ tokenName ].warning
89
+ outline: warnings.includes( tokenName )
95
90
  ? '2px solid red'
96
91
  : '',
97
92
  outlineOffset: '-2px',
@@ -111,8 +106,8 @@ export const RampTable = forwardRef< HTMLDivElement, RampTableProps >(
111
106
  fontWeight: 500,
112
107
  color:
113
108
  tokenName === 'surface2'
114
- ? ramp.fgSurface4.color
115
- : ramp.fgFill.color,
109
+ ? ramp.fgSurface4
110
+ : ramp.fgFill,
116
111
  } }
117
112
  >
118
113
  SEED
@@ -139,32 +134,28 @@ export const RampTable = forwardRef< HTMLDivElement, RampTableProps >(
139
134
  <>
140
135
  <span
141
136
  style={ {
142
- color: ramp.fgSurface1
143
- .color,
137
+ color: ramp.fgSurface1,
144
138
  } }
145
139
  >
146
140
  Aa
147
141
  </span>
148
142
  <span
149
143
  style={ {
150
- color: ramp.fgSurface2
151
- .color,
144
+ color: ramp.fgSurface2,
152
145
  } }
153
146
  >
154
147
  Aa
155
148
  </span>
156
149
  <span
157
150
  style={ {
158
- color: ramp.fgSurface3
159
- .color,
151
+ color: ramp.fgSurface3,
160
152
  } }
161
153
  >
162
154
  Aa
163
155
  </span>
164
156
  <span
165
157
  style={ {
166
- color: ramp.fgSurface4
167
- .color,
158
+ color: ramp.fgSurface4,
168
159
  } }
169
160
  >
170
161
  Aa
@@ -174,7 +165,7 @@ export const RampTable = forwardRef< HTMLDivElement, RampTableProps >(
174
165
  { tokenName === 'bgFill1' ? (
175
166
  <span
176
167
  style={ {
177
- color: ramp.fgFill.color,
168
+ color: ramp.fgFill,
178
169
  } }
179
170
  >
180
171
  Aa
@@ -183,8 +174,7 @@ export const RampTable = forwardRef< HTMLDivElement, RampTableProps >(
183
174
  { tokenName === 'bgFillInverted1' ? (
184
175
  <span
185
176
  style={ {
186
- color: ramp.fgFillInverted
187
- .color,
177
+ color: ramp.fgFillInverted,
188
178
  } }
189
179
  >
190
180
  Aa
@@ -193,8 +183,7 @@ export const RampTable = forwardRef< HTMLDivElement, RampTableProps >(
193
183
  { tokenName === 'bgFillDark' ? (
194
184
  <span
195
185
  style={ {
196
- color: ramp.fgFillDark
197
- .color,
186
+ color: ramp.fgFillDark,
198
187
  } }
199
188
  >
200
189
  Aa