Merge branch 'main' into dsw-2400-component-statuses

Author: xander-marjoram

.changeset/witty-feet-sell.md

@@ -0,0 +1,6 @@
+---
+"@justeattakeaway/pie-text-input": minor
+"@justeattakeaway/pie-textarea": minor
+---
+
+[Added] - New color token for placeholders

package.json

@@ -73,7 +73,7 @@
     "@changesets/cli": "2.26.2",
     "@commitlint/cli": "17.5.1",
     "@commitlint/config-conventional": "17.4.4",
-    "@justeat/pie-design-tokens": "6.3.1",
+    "@justeat/pie-design-tokens": "6.4.0",
     "@justeattakeaway/browserslist-config-pie": "0.2.0",
     "@justeattakeaway/generator-pie-component": "0.22.0",
     "@justeattakeaway/pie-icons": "4.19.1",

packages/components/pie-text-input/src/text-input.scss

@@ -6,7 +6,7 @@
     --input-gap: var(--dt-spacing-d);
     --input-text-color: var(--dt-color-content-default);
     --input-text-color-leading-trailing-content: var(--dt-color-content-default);
-    --input-text-color-placeholder: var(--dt-color-content-subdued);
+    --input-text-color-placeholder: var(--dt-color-content-placeholder);
     --input-border-color: var(--dt-color-interactive-form);
     --input-container-color: var(--dt-color-container-default);
     --input-radius: var(--dt-radius-rounded-c);

packages/components/pie-textarea/src/textarea.scss

@@ -15,7 +15,7 @@
   --textarea-background-color: var(--dt-color-container-default);
   --textarea-border-color: var(--dt-color-interactive-form);
   --textarea-content-color: var(--dt-color-content-default);
-  --textarea-placeholder-color: var(--dt-color-content-subdued);
+  --textarea-placeholder-color: var(--dt-color-content-placeholder);
 
   // Default height is two lines of text
   --textarea-height: calc((var(--textarea-line-height) * 2) + (var(--textarea-padding-block) * 2));

packages/tools/pie-css/test/css/__snapshots__/css.spec.ts.snap

@@ -19,6 +19,7 @@ exports[`index.css > should render the expected CSS content 1`] = `
     --dt-color-charcoal-30: #d7d9da;
     --dt-color-charcoal-40: #b7bdbe;
     --dt-color-charcoal-50: #8c999b;
+    --dt-color-charcoal-57: #68797d;
     --dt-color-charcoal-60: #5d7074;
     --dt-color-charcoal-70: #3c4c4f;
     --dt-color-charcoal-75: #303d3f;
@@ -144,6 +145,7 @@ exports[`index.css > should render the expected CSS content 1`] = `
     --dt-color-content-link-visited: var(--dt-color-system-purple);
     --dt-color-content-link-visited-inverse: var(--dt-color-system-purple-10);
     --dt-color-content-error: var(--dt-color-red);
+    --dt-color-content-placeholder: var(--dt-color-charcoal-57);
     --dt-color-content-positive: var(--dt-color-green);
     --dt-color-content-disabled: var(--dt-color-charcoal-50);
     --dt-color-content-brand: var(--dt-color-orange);
@@ -239,6 +241,7 @@ exports[`index.css > should render the expected CSS content 1`] = `
     --dt-color-highcontrast-content-link-visited: var(--dt-color-system-purple);
     --dt-color-highcontrast-content-link-visited-inverse: var(--dt-color-system-purple-10);
     --dt-color-highcontrast-content-error: var(--dt-color-red-dark-hc);
+    --dt-color-highcontrast-content-placeholder: var(--dt-color-charcoal-57);
     --dt-color-highcontrast-content-positive: var(--dt-color-green-dark-hc);
     --dt-color-highcontrast-content-disabled: var(--dt-color-charcoal-50);
     --dt-color-highcontrast-content-brand: var(--dt-color-orange-dark-hc);
@@ -334,6 +337,7 @@ exports[`index.css > should render the expected CSS content 1`] = `
     --dt-color-dark-content-link-visited: var(--dt-color-system-purple-10);
     --dt-color-dark-content-link-visited-inverse: var(--dt-color-system-purple);
     --dt-color-dark-content-error: var(--dt-color-red-30);
+    --dt-color-dark-content-placeholder: var(--dt-color-charcoal-50);
     --dt-color-dark-content-positive: var(--dt-color-green-30);
     --dt-color-dark-content-disabled: var(--dt-color-charcoal-50);
     --dt-color-dark-content-brand: var(--dt-color-orange-30);
@@ -429,6 +433,7 @@ exports[`index.css > should render the expected CSS content 1`] = `
     --dt-color-highcontrast-dark-content-link-visited: var(--dt-color-system-purple-10);
     --dt-color-highcontrast-dark-content-link-visited-inverse: var(--dt-color-system-purple);
     --dt-color-highcontrast-dark-content-error: var(--dt-color-red-light-hc);
+    --dt-color-highcontrast-dark-content-placeholder: var(--dt-color-charcoal-50);
     --dt-color-highcontrast-dark-content-positive: var(--dt-color-green-light-hc);
     --dt-color-highcontrast-dark-content-disabled: var(--dt-color-charcoal-50);
     --dt-color-highcontrast-dark-content-brand: var(--dt-color-orange-30);
@@ -766,6 +771,9 @@ exports[`index.css > should render the expected CSS content 1`] = `
     --dt-color-charcoal-50-h: 188;
     --dt-color-charcoal-50-s: 7%;
     --dt-color-charcoal-50-l: 57.8%;
+    --dt-color-charcoal-57-h: 191;
+    --dt-color-charcoal-57-s: 9.2%;
+    --dt-color-charcoal-57-l: 44.9%;
     --dt-color-charcoal-60-h: 190;
     --dt-color-charcoal-60-s: 11%;
     --dt-color-charcoal-60-l: 41%;
@@ -1126,6 +1134,9 @@ exports[`index.css > should render the expected CSS content 1`] = `
     --dt-color-content-error-h: var(--dt-color-red-h);
     --dt-color-content-error-s: var(--dt-color-red-s);
     --dt-color-content-error-l: var(--dt-color-red-l);
+    --dt-color-content-placeholder-h: var(--dt-color-charcoal-57-h);
+    --dt-color-content-placeholder-s: var(--dt-color-charcoal-57-s);
+    --dt-color-content-placeholder-l: var(--dt-color-charcoal-57-l);
     --dt-color-content-positive-h: var(--dt-color-green-h);
     --dt-color-content-positive-s: var(--dt-color-green-s);
     --dt-color-content-positive-l: var(--dt-color-green-l);

yarn.lock

@@ -5423,6 +5423,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@justeat/pie-design-tokens@npm:6.4.0":
+  version: 6.4.0
+  resolution: "@justeat/pie-design-tokens@npm:6.4.0"
+  dependencies:
+    jsonc-parser: 3.2.0
+    lodash.merge: 4.6.2
+    mkdirp: 1.0.4
+  checksum: f22842a5bf9d64f0a2273b462e5f8f2a51044993a09a4aa4c950d7f84ed0ba4d0ed01421741c4b5066ae13094cb2db3c8a73bfa2927737ef5deebcc6a0f14e4f
+  languageName: node
+  linkType: hard
+
 "@justeattakeaway/[email protected], @justeattakeaway/browserslist-config-pie@workspace:packages/tools/browserslist-config-pie":
   version: 0.0.0-use.local
   resolution: "@justeattakeaway/browserslist-config-pie@workspace:packages/tools/browserslist-config-pie"
@@ -26148,7 +26159,7 @@ __metadata:
     "@changesets/cli": 2.26.2
     "@commitlint/cli": 17.5.1
     "@commitlint/config-conventional": 17.4.4
-    "@justeat/pie-design-tokens": 6.3.1
+    "@justeat/pie-design-tokens": 6.4.0
     "@justeattakeaway/browserslist-config-pie": 0.2.0
     "@justeattakeaway/generator-pie-component": 0.22.0
     "@justeattakeaway/pie-icons": 4.19.1