Tokens: January Release · pinterest/gestalt@11e90da

Triggered via pull request January 8, 2025 20:37

rlingineni

synchronize #3923

aarshap:tokens-january

Status Failure

Total duration 7m 48s

Artifacts –

ci.yml

on: pull_request

Tests

7m 37s

Annotations

8 errors and 2 warnings

Tests: packages/gestalt/src/contexts/ColorSchemeProvider.jsdom.test.tsx#L127

Error: expect(received).toMatchSnapshot() Snapshot name: `visual refresh tokens uses visual refresh light mode theme when specified 1` - Snapshot - 190 + Received + 191 @@ -1,20 +1,20 @@ <style> :root { --gestalt-theme: visualRefresh-lightMode_lineHeight_default; --base-color-transparent: rgba(255, 255, 255, 0); --base-color-grayscale-0: #ffffff; - --base-color-grayscale-25: #fffef7; - --base-color-grayscale-50: #f5f4ed; - --base-color-grayscale-100: #e8e7e1; - --base-color-grayscale-150: #c7c6c1; - --base-color-grayscale-200: #969292; - --base-color-grayscale-250: #757570; - --base-color-grayscale-300: #636361; - --base-color-grayscale-350: #4c4c4a; - --base-color-grayscale-400: #2e2e2d; - --base-color-grayscale-450: #1c1b1b; + --base-color-grayscale-25: #f0f0eb; + --base-color-grayscale-50: #e0e0d9; + --base-color-grayscale-100: #d1d1c7; + --base-color-grayscale-150: #c2c2b6; + --base-color-grayscale-200: #949486; + --base-color-grayscale-250: #757569; + --base-color-grayscale-300: #57574c; + --base-color-grayscale-350: #47473f; + --base-color-grayscale-400: #363630; + --base-color-grayscale-450: #272721; --base-color-grayscale-500: #000000; --base-color-red-100: #ffd3d1; --base-color-red-200: #ff9494; --base-color-red-300: #e60023; --base-color-red-400: #b2001a; @@ -37,22 +37,22 @@ --base-color-orange-100: #fde7c9; --base-color-orange-200: #fbc55b; --base-color-orange-300: #fea239; --base-color-orange-400: #f06d22; --base-color-orange-500: #9b4b1c; - --base-color-pressed-grayscale-0: #ebebe5; - --base-color-pressed-grayscale-25: #e7e6df; - --base-color-pressed-grayscale-50: #d8d7cf; - --base-color-pressed-grayscale-100: #c2c1bc; - --base-color-pressed-grayscale-150: #969292; - --base-color-pressed-grayscale-200: #747472; - --base-color-pressed-grayscale-250: #585856; - --base-color-pressed-grayscale-300: #464644; - --base-color-pressed-grayscale-350: #313130; - --base-color-pressed-grayscale-400: #585856; - --base-color-pressed-grayscale-450: #494946; - --base-color-pressed-grayscale-500: #393937; + --base-color-pressed-grayscale-0: #deded3; + --base-color-pressed-grayscale-25: #cdcdbc; + --base-color-pressed-grayscale-50: #babaab; + --base-color-pressed-grayscale-100: #adad9a; + --base-color-pressed-grayscale-150: #9d9d8a; + --base-color-pressed-grayscale-200: #7a7a6c; + --base-color-pressed-grayscale-250: #4b4b44; + --base-color-pressed-grayscale-300: #2c2c26; + --base-color-pressed-grayscale-350: #1b1b18; + --base-color-pressed-grayscale-400: #0b0b0a; + --base-color-pressed-grayscale-450: #535346; + --base-color-pressed-grayscale-500: #3d3d34; --base-color-pressed-red-100: #f4a8a4; --base-color-pressed-red-200: #ed5a5a; --base-color-pressed-red-300: #9e0017; --base-color-pressed-red-400: #7a0012; --base-color-pressed-red-500: #530909; @@ -74,22 +74,22 @@ --base-color-pressed-orange-100: #f4cc95; --base-color-pressed-orange-200: #f1a613; --base-color-pressed-orange-300: #e07f10; --base-color-pressed-orange-400: #ca5816; --base-color-pressed-orange-500: #6b381a; - --base-color-hover-grayscale-0: #f8f7f2; - --base-color-hover-grayscale-25: #f5f4ed; - --base-color-hover-grayscale-50: #e7e6df; - --base-color-hover-grayscale-100: #d6d4cd; - --base-color-hover-grayscale-150: #b2b0ae; - --base-color-hover-grayscale-200: #838181; - --base-color-hover-grayscale-250: #626260; - --base-color-hover-grayscale-300: #555553; - --base-color-hover-grayscale-350: #3e3e3c; - --base-color-hover-grayscale-400: #434342; - --base-color-hover-grayscale-450: #343332; - --base-color-hover-grayscale-500: #242423; + --base-color-hover-grayscale-0: #f0f0eb; + --base-color-hover-grayscale-25: #deded3; + --base-color-hover-grayscale-50: #cdcdc1; + --base-color-hover-grayscale-100: #bfbfb0; + --base-color-hover-grayscale-150: #b0b0a1; + --base-color-hover-grayscale-200: #878778; + --base-color-hover-grayscale-250: #616157;

Tests: packages/gestalt/src/contexts/ColorSchemeProvider.jsdom.test.tsx#L142

Error: expect(received).toMatchSnapshot() Snapshot name: `visual refresh tokens uses visual refresh dark mode theme when specified 1` - Snapshot - 206 + Received + 207 @@ -1,20 +1,20 @@ <style> :root { --gestalt-theme: visualRefresh-darkMode_lineHeight_default; --base-color-transparent: rgba(255, 255, 255, 0); --base-color-grayscale-0: #ffffff; - --base-color-grayscale-25: #fffef7; - --base-color-grayscale-50: #f5f4ed; - --base-color-grayscale-100: #e8e7e1; - --base-color-grayscale-150: #c7c6c1; - --base-color-grayscale-200: #969292; - --base-color-grayscale-250: #757570; - --base-color-grayscale-300: #636361; - --base-color-grayscale-350: #4c4c4a; - --base-color-grayscale-400: #2e2e2d; - --base-color-grayscale-450: #1c1b1b; + --base-color-grayscale-25: #f0f0eb; + --base-color-grayscale-50: #e0e0d9; + --base-color-grayscale-100: #d1d1c7; + --base-color-grayscale-150: #c2c2b6; + --base-color-grayscale-200: #949486; + --base-color-grayscale-250: #757569; + --base-color-grayscale-300: #57574c; + --base-color-grayscale-350: #47473f; + --base-color-grayscale-400: #363630; + --base-color-grayscale-450: #272721; --base-color-grayscale-500: #000000; --base-color-red-100: #ffd3d1; --base-color-red-200: #ff9494; --base-color-red-300: #e60023; --base-color-red-400: #b2001a; @@ -37,22 +37,22 @@ --base-color-orange-100: #fde7c9; --base-color-orange-200: #fbc55b; --base-color-orange-300: #fea239; --base-color-orange-400: #f06d22; --base-color-orange-500: #9b4b1c; - --base-color-pressed-grayscale-0: #ebebe5; - --base-color-pressed-grayscale-25: #e7e6df; - --base-color-pressed-grayscale-50: #d8d7cf; - --base-color-pressed-grayscale-100: #c2c1bc; - --base-color-pressed-grayscale-150: #969292; - --base-color-pressed-grayscale-200: #747472; - --base-color-pressed-grayscale-250: #585856; - --base-color-pressed-grayscale-300: #464644; - --base-color-pressed-grayscale-350: #313130; - --base-color-pressed-grayscale-400: #585856; - --base-color-pressed-grayscale-450: #494946; - --base-color-pressed-grayscale-500: #393937; + --base-color-pressed-grayscale-0: #deded3; + --base-color-pressed-grayscale-25: #cdcdbc; + --base-color-pressed-grayscale-50: #babaab; + --base-color-pressed-grayscale-100: #adad9a; + --base-color-pressed-grayscale-150: #9d9d8a; + --base-color-pressed-grayscale-200: #7a7a6c; + --base-color-pressed-grayscale-250: #4b4b44; + --base-color-pressed-grayscale-300: #2c2c26; + --base-color-pressed-grayscale-350: #1b1b18; + --base-color-pressed-grayscale-400: #0b0b0a; + --base-color-pressed-grayscale-450: #535346; + --base-color-pressed-grayscale-500: #3d3d34; --base-color-pressed-red-100: #f4a8a4; --base-color-pressed-red-200: #ed5a5a; --base-color-pressed-red-300: #9e0017; --base-color-pressed-red-400: #7a0012; --base-color-pressed-red-500: #530909; @@ -74,22 +74,22 @@ --base-color-pressed-orange-100: #f4cc95; --base-color-pressed-orange-200: #f1a613; --base-color-pressed-orange-300: #e07f10; --base-color-pressed-orange-400: #ca5816; --base-color-pressed-orange-500: #6b381a; - --base-color-hover-grayscale-0: #f8f7f2; - --base-color-hover-grayscale-25: #f5f4ed; - --base-color-hover-grayscale-50: #e7e6df; - --base-color-hover-grayscale-100: #d6d4cd; - --base-color-hover-grayscale-150: #b2b0ae; - --base-color-hover-grayscale-200: #838181; - --base-color-hover-grayscale-250: #626260; - --base-color-hover-grayscale-300: #555553; - --base-color-hover-grayscale-350: #3e3e3c; - --base-color-hover-grayscale-400: #434342; - --base-color-hover-grayscale-450: #343332; - --base-color-hover-grayscale-500: #242423; + --base-color-hover-grayscale-0: #f0f0eb; + --base-color-hover-grayscale-25: #deded3; + --base-color-hover-grayscale-50: #cdcdc1; + --base-color-hover-grayscale-100: #bfbfb0; + --base-color-hover-grayscale-150: #b0b0a1; + --base-color-hover-grayscale-200: #878778; + --base-color-hover-grayscale-250: #616157; +

Tests: packages/gestalt/src/contexts/ColorSchemeProvider.jsdom.test.tsx#L157

Error: expect(received).toMatchSnapshot() Snapshot name: `visual refresh tokens uses visual refresh with tall line height 1` - Snapshot - 190 + Received + 191 @@ -1,20 +1,20 @@ <style> :root { --gestalt-theme: visualRefresh-lightMode_lineHeight_tall; --base-color-transparent: rgba(255, 255, 255, 0); --base-color-grayscale-0: #ffffff; - --base-color-grayscale-25: #fffef7; - --base-color-grayscale-50: #f5f4ed; - --base-color-grayscale-100: #e8e7e1; - --base-color-grayscale-150: #c7c6c1; - --base-color-grayscale-200: #969292; - --base-color-grayscale-250: #757570; - --base-color-grayscale-300: #636361; - --base-color-grayscale-350: #4c4c4a; - --base-color-grayscale-400: #2e2e2d; - --base-color-grayscale-450: #1c1b1b; + --base-color-grayscale-25: #f0f0eb; + --base-color-grayscale-50: #e0e0d9; + --base-color-grayscale-100: #d1d1c7; + --base-color-grayscale-150: #c2c2b6; + --base-color-grayscale-200: #949486; + --base-color-grayscale-250: #757569; + --base-color-grayscale-300: #57574c; + --base-color-grayscale-350: #47473f; + --base-color-grayscale-400: #363630; + --base-color-grayscale-450: #272721; --base-color-grayscale-500: #000000; --base-color-red-100: #ffd3d1; --base-color-red-200: #ff9494; --base-color-red-300: #e60023; --base-color-red-400: #b2001a; @@ -37,22 +37,22 @@ --base-color-orange-100: #fde7c9; --base-color-orange-200: #fbc55b; --base-color-orange-300: #fea239; --base-color-orange-400: #f06d22; --base-color-orange-500: #9b4b1c; - --base-color-pressed-grayscale-0: #ebebe5; - --base-color-pressed-grayscale-25: #e7e6df; - --base-color-pressed-grayscale-50: #d8d7cf; - --base-color-pressed-grayscale-100: #c2c1bc; - --base-color-pressed-grayscale-150: #969292; - --base-color-pressed-grayscale-200: #747472; - --base-color-pressed-grayscale-250: #585856; - --base-color-pressed-grayscale-300: #464644; - --base-color-pressed-grayscale-350: #313130; - --base-color-pressed-grayscale-400: #585856; - --base-color-pressed-grayscale-450: #494946; - --base-color-pressed-grayscale-500: #393937; + --base-color-pressed-grayscale-0: #deded3; + --base-color-pressed-grayscale-25: #cdcdbc; + --base-color-pressed-grayscale-50: #babaab; + --base-color-pressed-grayscale-100: #adad9a; + --base-color-pressed-grayscale-150: #9d9d8a; + --base-color-pressed-grayscale-200: #7a7a6c; + --base-color-pressed-grayscale-250: #4b4b44; + --base-color-pressed-grayscale-300: #2c2c26; + --base-color-pressed-grayscale-350: #1b1b18; + --base-color-pressed-grayscale-400: #0b0b0a; + --base-color-pressed-grayscale-450: #535346; + --base-color-pressed-grayscale-500: #3d3d34; --base-color-pressed-red-100: #f4a8a4; --base-color-pressed-red-200: #ed5a5a; --base-color-pressed-red-300: #9e0017; --base-color-pressed-red-400: #7a0012; --base-color-pressed-red-500: #530909; @@ -74,22 +74,22 @@ --base-color-pressed-orange-100: #f4cc95; --base-color-pressed-orange-200: #f1a613; --base-color-pressed-orange-300: #e07f10; --base-color-pressed-orange-400: #ca5816; --base-color-pressed-orange-500: #6b381a; - --base-color-hover-grayscale-0: #f8f7f2; - --base-color-hover-grayscale-25: #f5f4ed; - --base-color-hover-grayscale-50: #e7e6df; - --base-color-hover-grayscale-100: #d6d4cd; - --base-color-hover-grayscale-150: #b2b0ae; - --base-color-hover-grayscale-200: #838181; - --base-color-hover-grayscale-250: #626260; - --base-color-hover-grayscale-300: #555553; - --base-color-hover-grayscale-350: #3e3e3c; - --base-color-hover-grayscale-400: #434342; - --base-color-hover-grayscale-450: #343332; - --base-color-hover-grayscale-500: #242423; + --base-color-hover-grayscale-0: #f0f0eb; + --base-color-hover-grayscale-25: #deded3; + --base-color-hover-grayscale-50: #cdcdc1; + --base-color-hover-grayscale-100: #bfbfb0; + --base-color-hover-grayscale-150: #b0b0a1; + --base-color-hover-grayscale-200: #878778; + --base-color-hover-grayscale-250: #616157; + --base-c

Tests: packages/gestalt/src/contexts/ColorSchemeProvider.jsdom.test.tsx#L172

Error: expect(received).toMatchSnapshot() Snapshot name: `visual refresh tokens uses visual refresh with ck line height 1` - Snapshot - 190 + Received + 191 @@ -1,20 +1,20 @@ <style> :root { --gestalt-theme: visualRefresh-lightMode_lineHeight_ck; --base-color-transparent: rgba(255, 255, 255, 0); --base-color-grayscale-0: #ffffff; - --base-color-grayscale-25: #fffef7; - --base-color-grayscale-50: #f5f4ed; - --base-color-grayscale-100: #e8e7e1; - --base-color-grayscale-150: #c7c6c1; - --base-color-grayscale-200: #969292; - --base-color-grayscale-250: #757570; - --base-color-grayscale-300: #636361; - --base-color-grayscale-350: #4c4c4a; - --base-color-grayscale-400: #2e2e2d; - --base-color-grayscale-450: #1c1b1b; + --base-color-grayscale-25: #f0f0eb; + --base-color-grayscale-50: #e0e0d9; + --base-color-grayscale-100: #d1d1c7; + --base-color-grayscale-150: #c2c2b6; + --base-color-grayscale-200: #949486; + --base-color-grayscale-250: #757569; + --base-color-grayscale-300: #57574c; + --base-color-grayscale-350: #47473f; + --base-color-grayscale-400: #363630; + --base-color-grayscale-450: #272721; --base-color-grayscale-500: #000000; --base-color-red-100: #ffd3d1; --base-color-red-200: #ff9494; --base-color-red-300: #e60023; --base-color-red-400: #b2001a; @@ -37,22 +37,22 @@ --base-color-orange-100: #fde7c9; --base-color-orange-200: #fbc55b; --base-color-orange-300: #fea239; --base-color-orange-400: #f06d22; --base-color-orange-500: #9b4b1c; - --base-color-pressed-grayscale-0: #ebebe5; - --base-color-pressed-grayscale-25: #e7e6df; - --base-color-pressed-grayscale-50: #d8d7cf; - --base-color-pressed-grayscale-100: #c2c1bc; - --base-color-pressed-grayscale-150: #969292; - --base-color-pressed-grayscale-200: #747472; - --base-color-pressed-grayscale-250: #585856; - --base-color-pressed-grayscale-300: #464644; - --base-color-pressed-grayscale-350: #313130; - --base-color-pressed-grayscale-400: #585856; - --base-color-pressed-grayscale-450: #494946; - --base-color-pressed-grayscale-500: #393937; + --base-color-pressed-grayscale-0: #deded3; + --base-color-pressed-grayscale-25: #cdcdbc; + --base-color-pressed-grayscale-50: #babaab; + --base-color-pressed-grayscale-100: #adad9a; + --base-color-pressed-grayscale-150: #9d9d8a; + --base-color-pressed-grayscale-200: #7a7a6c; + --base-color-pressed-grayscale-250: #4b4b44; + --base-color-pressed-grayscale-300: #2c2c26; + --base-color-pressed-grayscale-350: #1b1b18; + --base-color-pressed-grayscale-400: #0b0b0a; + --base-color-pressed-grayscale-450: #535346; + --base-color-pressed-grayscale-500: #3d3d34; --base-color-pressed-red-100: #f4a8a4; --base-color-pressed-red-200: #ed5a5a; --base-color-pressed-red-300: #9e0017; --base-color-pressed-red-400: #7a0012; --base-color-pressed-red-500: #530909; @@ -74,22 +74,22 @@ --base-color-pressed-orange-100: #f4cc95; --base-color-pressed-orange-200: #f1a613; --base-color-pressed-orange-300: #e07f10; --base-color-pressed-orange-400: #ca5816; --base-color-pressed-orange-500: #6b381a; - --base-color-hover-grayscale-0: #f8f7f2; - --base-color-hover-grayscale-25: #f5f4ed; - --base-color-hover-grayscale-50: #e7e6df; - --base-color-hover-grayscale-100: #d6d4cd; - --base-color-hover-grayscale-150: #b2b0ae; - --base-color-hover-grayscale-200: #838181; - --base-color-hover-grayscale-250: #626260; - --base-color-hover-grayscale-300: #555553; - --base-color-hover-grayscale-350: #3e3e3c; - --base-color-hover-grayscale-400: #434342; - --base-color-hover-grayscale-450: #343332; - --base-color-hover-grayscale-500: #242423; + --base-color-hover-grayscale-0: #f0f0eb; + --base-color-hover-grayscale-25: #deded3; + --base-color-hover-grayscale-50: #cdcdc1; + --base-color-hover-grayscale-100: #bfbfb0; + --base-color-hover-grayscale-150: #b0b0a1; + --base-color-hover-grayscale-200: #878778; + --base-color-hover-grayscale-250: #616157; + --base-color

Tests: packages/gestalt/src/contexts/ColorSchemeProvider.jsdom.test.tsx#L187

Error: expect(received).toMatchSnapshot() Snapshot name: `visual refresh tokens uses visual refresh with ja line height 1` - Snapshot - 190 + Received + 191 @@ -1,20 +1,20 @@ <style> :root { --gestalt-theme: visualRefresh-lightMode_lineHeight_ja; --base-color-transparent: rgba(255, 255, 255, 0); --base-color-grayscale-0: #ffffff; - --base-color-grayscale-25: #fffef7; - --base-color-grayscale-50: #f5f4ed; - --base-color-grayscale-100: #e8e7e1; - --base-color-grayscale-150: #c7c6c1; - --base-color-grayscale-200: #969292; - --base-color-grayscale-250: #757570; - --base-color-grayscale-300: #636361; - --base-color-grayscale-350: #4c4c4a; - --base-color-grayscale-400: #2e2e2d; - --base-color-grayscale-450: #1c1b1b; + --base-color-grayscale-25: #f0f0eb; + --base-color-grayscale-50: #e0e0d9; + --base-color-grayscale-100: #d1d1c7; + --base-color-grayscale-150: #c2c2b6; + --base-color-grayscale-200: #949486; + --base-color-grayscale-250: #757569; + --base-color-grayscale-300: #57574c; + --base-color-grayscale-350: #47473f; + --base-color-grayscale-400: #363630; + --base-color-grayscale-450: #272721; --base-color-grayscale-500: #000000; --base-color-red-100: #ffd3d1; --base-color-red-200: #ff9494; --base-color-red-300: #e60023; --base-color-red-400: #b2001a; @@ -37,22 +37,22 @@ --base-color-orange-100: #fde7c9; --base-color-orange-200: #fbc55b; --base-color-orange-300: #fea239; --base-color-orange-400: #f06d22; --base-color-orange-500: #9b4b1c; - --base-color-pressed-grayscale-0: #ebebe5; - --base-color-pressed-grayscale-25: #e7e6df; - --base-color-pressed-grayscale-50: #d8d7cf; - --base-color-pressed-grayscale-100: #c2c1bc; - --base-color-pressed-grayscale-150: #969292; - --base-color-pressed-grayscale-200: #747472; - --base-color-pressed-grayscale-250: #585856; - --base-color-pressed-grayscale-300: #464644; - --base-color-pressed-grayscale-350: #313130; - --base-color-pressed-grayscale-400: #585856; - --base-color-pressed-grayscale-450: #494946; - --base-color-pressed-grayscale-500: #393937; + --base-color-pressed-grayscale-0: #deded3; + --base-color-pressed-grayscale-25: #cdcdbc; + --base-color-pressed-grayscale-50: #babaab; + --base-color-pressed-grayscale-100: #adad9a; + --base-color-pressed-grayscale-150: #9d9d8a; + --base-color-pressed-grayscale-200: #7a7a6c; + --base-color-pressed-grayscale-250: #4b4b44; + --base-color-pressed-grayscale-300: #2c2c26; + --base-color-pressed-grayscale-350: #1b1b18; + --base-color-pressed-grayscale-400: #0b0b0a; + --base-color-pressed-grayscale-450: #535346; + --base-color-pressed-grayscale-500: #3d3d34; --base-color-pressed-red-100: #f4a8a4; --base-color-pressed-red-200: #ed5a5a; --base-color-pressed-red-300: #9e0017; --base-color-pressed-red-400: #7a0012; --base-color-pressed-red-500: #530909; @@ -74,22 +74,22 @@ --base-color-pressed-orange-100: #f4cc95; --base-color-pressed-orange-200: #f1a613; --base-color-pressed-orange-300: #e07f10; --base-color-pressed-orange-400: #ca5816; --base-color-pressed-orange-500: #6b381a; - --base-color-hover-grayscale-0: #f8f7f2; - --base-color-hover-grayscale-25: #f5f4ed; - --base-color-hover-grayscale-50: #e7e6df; - --base-color-hover-grayscale-100: #d6d4cd; - --base-color-hover-grayscale-150: #b2b0ae; - --base-color-hover-grayscale-200: #838181; - --base-color-hover-grayscale-250: #626260; - --base-color-hover-grayscale-300: #555553; - --base-color-hover-grayscale-350: #3e3e3c; - --base-color-hover-grayscale-400: #434342; - --base-color-hover-grayscale-450: #343332; - --base-color-hover-grayscale-500: #242423; + --base-color-hover-grayscale-0: #f0f0eb; + --base-color-hover-grayscale-25: #deded3; + --base-color-hover-grayscale-50: #cdcdc1; + --base-color-hover-grayscale-100: #bfbfb0; + --base-color-hover-grayscale-150: #b0b0a1; + --base-color-hover-grayscale-200: #878778; + --base-color-hover-grayscale-250: #616157; + --base-color

Tests: packages/gestalt/src/contexts/ColorSchemeProvider.jsdom.test.tsx#L202

Error: expect(received).toMatchSnapshot() Snapshot name: `visual refresh tokens uses visual refresh with th line height 1` - Snapshot - 190 + Received + 191 @@ -1,20 +1,20 @@ <style> :root { --gestalt-theme: visualRefresh-lightMode_lineHeight_th; --base-color-transparent: rgba(255, 255, 255, 0); --base-color-grayscale-0: #ffffff; - --base-color-grayscale-25: #fffef7; - --base-color-grayscale-50: #f5f4ed; - --base-color-grayscale-100: #e8e7e1; - --base-color-grayscale-150: #c7c6c1; - --base-color-grayscale-200: #969292; - --base-color-grayscale-250: #757570; - --base-color-grayscale-300: #636361; - --base-color-grayscale-350: #4c4c4a; - --base-color-grayscale-400: #2e2e2d; - --base-color-grayscale-450: #1c1b1b; + --base-color-grayscale-25: #f0f0eb; + --base-color-grayscale-50: #e0e0d9; + --base-color-grayscale-100: #d1d1c7; + --base-color-grayscale-150: #c2c2b6; + --base-color-grayscale-200: #949486; + --base-color-grayscale-250: #757569; + --base-color-grayscale-300: #57574c; + --base-color-grayscale-350: #47473f; + --base-color-grayscale-400: #363630; + --base-color-grayscale-450: #272721; --base-color-grayscale-500: #000000; --base-color-red-100: #ffd3d1; --base-color-red-200: #ff9494; --base-color-red-300: #e60023; --base-color-red-400: #b2001a; @@ -37,22 +37,22 @@ --base-color-orange-100: #fde7c9; --base-color-orange-200: #fbc55b; --base-color-orange-300: #fea239; --base-color-orange-400: #f06d22; --base-color-orange-500: #9b4b1c; - --base-color-pressed-grayscale-0: #ebebe5; - --base-color-pressed-grayscale-25: #e7e6df; - --base-color-pressed-grayscale-50: #d8d7cf; - --base-color-pressed-grayscale-100: #c2c1bc; - --base-color-pressed-grayscale-150: #969292; - --base-color-pressed-grayscale-200: #747472; - --base-color-pressed-grayscale-250: #585856; - --base-color-pressed-grayscale-300: #464644; - --base-color-pressed-grayscale-350: #313130; - --base-color-pressed-grayscale-400: #585856; - --base-color-pressed-grayscale-450: #494946; - --base-color-pressed-grayscale-500: #393937; + --base-color-pressed-grayscale-0: #deded3; + --base-color-pressed-grayscale-25: #cdcdbc; + --base-color-pressed-grayscale-50: #babaab; + --base-color-pressed-grayscale-100: #adad9a; + --base-color-pressed-grayscale-150: #9d9d8a; + --base-color-pressed-grayscale-200: #7a7a6c; + --base-color-pressed-grayscale-250: #4b4b44; + --base-color-pressed-grayscale-300: #2c2c26; + --base-color-pressed-grayscale-350: #1b1b18; + --base-color-pressed-grayscale-400: #0b0b0a; + --base-color-pressed-grayscale-450: #535346; + --base-color-pressed-grayscale-500: #3d3d34; --base-color-pressed-red-100: #f4a8a4; --base-color-pressed-red-200: #ed5a5a; --base-color-pressed-red-300: #9e0017; --base-color-pressed-red-400: #7a0012; --base-color-pressed-red-500: #530909; @@ -74,22 +74,22 @@ --base-color-pressed-orange-100: #f4cc95; --base-color-pressed-orange-200: #f1a613; --base-color-pressed-orange-300: #e07f10; --base-color-pressed-orange-400: #ca5816; --base-color-pressed-orange-500: #6b381a; - --base-color-hover-grayscale-0: #f8f7f2; - --base-color-hover-grayscale-25: #f5f4ed; - --base-color-hover-grayscale-50: #e7e6df; - --base-color-hover-grayscale-100: #d6d4cd; - --base-color-hover-grayscale-150: #b2b0ae; - --base-color-hover-grayscale-200: #838181; - --base-color-hover-grayscale-250: #626260; - --base-color-hover-grayscale-300: #555553; - --base-color-hover-grayscale-350: #3e3e3c; - --base-color-hover-grayscale-400: #434342; - --base-color-hover-grayscale-450: #343332; - --base-color-hover-grayscale-500: #242423; + --base-color-hover-grayscale-0: #f0f0eb; + --base-color-hover-grayscale-25: #deded3; + --base-color-hover-grayscale-50: #cdcdc1; + --base-color-hover-grayscale-100: #bfbfb0; + --base-color-hover-grayscale-150: #b0b0a1; + --base-color-hover-grayscale-200: #878778; + --base-color-hover-grayscale-250: #616157; + --base-color

Tests: packages/gestalt/src/contexts/ColorSchemeProvider.jsdom.test.tsx#L217

Error: expect(received).toMatchSnapshot() Snapshot name: `visual refresh tokens uses visual refresh with vi line height 1` - Snapshot - 190 + Received + 191 @@ -1,20 +1,20 @@ <style> :root { --gestalt-theme: visualRefresh-lightMode_lineHeight_vi; --base-color-transparent: rgba(255, 255, 255, 0); --base-color-grayscale-0: #ffffff; - --base-color-grayscale-25: #fffef7; - --base-color-grayscale-50: #f5f4ed; - --base-color-grayscale-100: #e8e7e1; - --base-color-grayscale-150: #c7c6c1; - --base-color-grayscale-200: #969292; - --base-color-grayscale-250: #757570; - --base-color-grayscale-300: #636361; - --base-color-grayscale-350: #4c4c4a; - --base-color-grayscale-400: #2e2e2d; - --base-color-grayscale-450: #1c1b1b; + --base-color-grayscale-25: #f0f0eb; + --base-color-grayscale-50: #e0e0d9; + --base-color-grayscale-100: #d1d1c7; + --base-color-grayscale-150: #c2c2b6; + --base-color-grayscale-200: #949486; + --base-color-grayscale-250: #757569; + --base-color-grayscale-300: #57574c; + --base-color-grayscale-350: #47473f; + --base-color-grayscale-400: #363630; + --base-color-grayscale-450: #272721; --base-color-grayscale-500: #000000; --base-color-red-100: #ffd3d1; --base-color-red-200: #ff9494; --base-color-red-300: #e60023; --base-color-red-400: #b2001a; @@ -37,22 +37,22 @@ --base-color-orange-100: #fde7c9; --base-color-orange-200: #fbc55b; --base-color-orange-300: #fea239; --base-color-orange-400: #f06d22; --base-color-orange-500: #9b4b1c; - --base-color-pressed-grayscale-0: #ebebe5; - --base-color-pressed-grayscale-25: #e7e6df; - --base-color-pressed-grayscale-50: #d8d7cf; - --base-color-pressed-grayscale-100: #c2c1bc; - --base-color-pressed-grayscale-150: #969292; - --base-color-pressed-grayscale-200: #747472; - --base-color-pressed-grayscale-250: #585856; - --base-color-pressed-grayscale-300: #464644; - --base-color-pressed-grayscale-350: #313130; - --base-color-pressed-grayscale-400: #585856; - --base-color-pressed-grayscale-450: #494946; - --base-color-pressed-grayscale-500: #393937; + --base-color-pressed-grayscale-0: #deded3; + --base-color-pressed-grayscale-25: #cdcdbc; + --base-color-pressed-grayscale-50: #babaab; + --base-color-pressed-grayscale-100: #adad9a; + --base-color-pressed-grayscale-150: #9d9d8a; + --base-color-pressed-grayscale-200: #7a7a6c; + --base-color-pressed-grayscale-250: #4b4b44; + --base-color-pressed-grayscale-300: #2c2c26; + --base-color-pressed-grayscale-350: #1b1b18; + --base-color-pressed-grayscale-400: #0b0b0a; + --base-color-pressed-grayscale-450: #535346; + --base-color-pressed-grayscale-500: #3d3d34; --base-color-pressed-red-100: #f4a8a4; --base-color-pressed-red-200: #ed5a5a; --base-color-pressed-red-300: #9e0017; --base-color-pressed-red-400: #7a0012; --base-color-pressed-red-500: #530909; @@ -74,22 +74,22 @@ --base-color-pressed-orange-100: #f4cc95; --base-color-pressed-orange-200: #f1a613; --base-color-pressed-orange-300: #e07f10; --base-color-pressed-orange-400: #ca5816; --base-color-pressed-orange-500: #6b381a; - --base-color-hover-grayscale-0: #f8f7f2; - --base-color-hover-grayscale-25: #f5f4ed; - --base-color-hover-grayscale-50: #e7e6df; - --base-color-hover-grayscale-100: #d6d4cd; - --base-color-hover-grayscale-150: #b2b0ae; - --base-color-hover-grayscale-200: #838181; - --base-color-hover-grayscale-250: #626260; - --base-color-hover-grayscale-300: #555553; - --base-color-hover-grayscale-350: #3e3e3c; - --base-color-hover-grayscale-400: #434342; - --base-color-hover-grayscale-450: #343332; - --base-color-hover-grayscale-500: #242423; + --base-color-hover-grayscale-0: #f0f0eb; + --base-color-hover-grayscale-25: #deded3; + --base-color-hover-grayscale-50: #cdcdc1; + --base-color-hover-grayscale-100: #bfbfb0; + --base-color-hover-grayscale-150: #b0b0a1; + --base-color-hover-grayscale-200: #878778; + --base-color-hover-grayscale-250: #616157; + --base-color

Tests

Process completed with exit code 1.

Tests

ubuntu-latest pipelines will use ubuntu-24.04 soon. For more details, see https://github.com/actions/runner-images/issues/10636

Tests

The `set-output` command is deprecated and will be disabled soon. Please upgrade to using Environment Files. For more information see: https://github.blog/changelog/2022-10-11-github-actions-deprecating-save-state-and-set-output-commands/

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Tokens: January Release #17678

Summary

Tokens: January Release #17678

Jobs

Run details

ci.yml

Annotations