From 709e93e33cf1b3b1d50e51dde36efda12103a46b Mon Sep 17 00:00:00 2001 From: Simone Vittori Date: Tue, 18 Jun 2024 16:18:22 +0100 Subject: [PATCH] `npm run build build:v8 build:fallbacks build:figma` --- dist/css/functional/size/size-coarse.css | 7 + dist/css/functional/size/size-fine.css | 7 + .../css/functional/themes/dark-colorblind.css | 6 +- dist/css/functional/themes/dark-dimmed.css | 6 +- .../functional/themes/dark-high-contrast.css | 6 +- .../css/functional/themes/dark-tritanopia.css | 6 +- dist/css/functional/themes/dark.css | 6 +- .../functional/themes/light-colorblind.css | 58 +++--- .../functional/themes/light-high-contrast.css | 58 +++--- .../functional/themes/light-tritanopia.css | 58 +++--- dist/css/functional/themes/light.css | 58 +++--- dist/css/functional/typography/typography.css | 9 +- dist/docs/base/typography/typography.json | 16 +- .../functional/themes/dark-colorblind.json | 49 ++++- dist/docs/functional/themes/dark-dimmed.json | 49 ++++- .../functional/themes/dark-high-contrast.json | 45 ++++- .../functional/themes/dark-tritanopia.json | 49 ++++- dist/docs/functional/themes/dark.json | 49 ++++- .../functional/themes/light-colorblind.json | 75 ++++++-- .../themes/light-high-contrast.json | 71 ++++++-- .../functional/themes/light-tritanopia.json | 75 ++++++-- dist/docs/functional/themes/light.json | 75 ++++++-- .../functional/typography/typography.json | 169 ++++++++++-------- .../functional/typography/typography.json | 1 + dist/figma/figma.json | 4 +- dist/figma/themes/dark.json | 59 +++--- dist/figma/themes/light.json | 137 +++++++------- 27 files changed, 819 insertions(+), 389 deletions(-) diff --git a/dist/css/functional/size/size-coarse.css b/dist/css/functional/size/size-coarse.css index e69de29bb..fb10805cc 100644 --- a/dist/css/functional/size/size-coarse.css +++ b/dist/css/functional/size/size-coarse.css @@ -0,0 +1,7 @@ +@media (pointer: coarse) { + :root { + --control-minTarget-auto: 2.75rem; + --controlStack-small-gap-auto: 1rem; + --controlStack-medium-gap-auto: 0.75rem; + } +} diff --git a/dist/css/functional/size/size-fine.css b/dist/css/functional/size/size-fine.css index e69de29bb..cdcf875b5 100644 --- a/dist/css/functional/size/size-fine.css +++ b/dist/css/functional/size/size-fine.css @@ -0,0 +1,7 @@ +@media (pointer: fine) { + :root { + --control-minTarget-auto: 1rem; + --controlStack-small-gap-auto: 0.5rem; + --controlStack-medium-gap-auto: 0.5rem; + } +} diff --git a/dist/css/functional/themes/dark-colorblind.css b/dist/css/functional/themes/dark-colorblind.css index 2d1a4ca89..883766e86 100644 --- a/dist/css/functional/themes/dark-colorblind.css +++ b/dist/css/functional/themes/dark-colorblind.css @@ -168,7 +168,7 @@ --control-bgColor-disabled: #21262db3; --control-bgColor-selected: #161b22; --control-fgColor-rest: #c9d1d9; - --control-fgColor-placeholder: #484f58; + --control-fgColor-placeholder: #858e98; --control-fgColor-disabled: #6e7681; --control-borderColor-rest: #30363d; --control-borderColor-emphasis: #666e79; @@ -482,6 +482,7 @@ --borderColor-emphasis: #484f58; --borderColor-disabled: #21262db3; --borderColor-transparent: #00000000; + --borderColor-translucent: #ffffff26; --borderColor-neutral-muted: #6e768166; --borderColor-neutral-emphasis: #6e7681; --borderColor-accent-muted: #388bfd66; @@ -731,7 +732,7 @@ --control-bgColor-disabled: #21262db3; --control-bgColor-selected: #161b22; --control-fgColor-rest: #c9d1d9; - --control-fgColor-placeholder: #484f58; + --control-fgColor-placeholder: #858e98; --control-fgColor-disabled: #6e7681; --control-borderColor-rest: #30363d; --control-borderColor-emphasis: #666e79; @@ -1045,6 +1046,7 @@ --borderColor-emphasis: #484f58; --borderColor-disabled: #21262db3; --borderColor-transparent: #00000000; + --borderColor-translucent: #ffffff26; --borderColor-neutral-muted: #6e768166; --borderColor-neutral-emphasis: #6e7681; --borderColor-accent-muted: #388bfd66; diff --git a/dist/css/functional/themes/dark-dimmed.css b/dist/css/functional/themes/dark-dimmed.css index 3ef777790..c05d04912 100644 --- a/dist/css/functional/themes/dark-dimmed.css +++ b/dist/css/functional/themes/dark-dimmed.css @@ -168,7 +168,7 @@ --control-bgColor-disabled: #373e47b3; --control-bgColor-selected: #2d333b; --control-fgColor-rest: #adbac7; - --control-fgColor-placeholder: #545d68; + --control-fgColor-placeholder: #727f8c; --control-fgColor-disabled: #636e7b; --control-borderColor-rest: #444c56; --control-borderColor-emphasis: #606b77; @@ -482,6 +482,7 @@ --borderColor-emphasis: #545d68; --borderColor-disabled: #373e47b3; --borderColor-transparent: #00000000; + --borderColor-translucent: #cdd9e526; --borderColor-neutral-muted: #636e7b66; --borderColor-neutral-emphasis: #636e7b; --borderColor-accent-muted: #4184e466; @@ -731,7 +732,7 @@ --control-bgColor-disabled: #373e47b3; --control-bgColor-selected: #2d333b; --control-fgColor-rest: #adbac7; - --control-fgColor-placeholder: #545d68; + --control-fgColor-placeholder: #727f8c; --control-fgColor-disabled: #636e7b; --control-borderColor-rest: #444c56; --control-borderColor-emphasis: #606b77; @@ -1045,6 +1046,7 @@ --borderColor-emphasis: #545d68; --borderColor-disabled: #373e47b3; --borderColor-transparent: #00000000; + --borderColor-translucent: #cdd9e526; --borderColor-neutral-muted: #636e7b66; --borderColor-neutral-emphasis: #636e7b; --borderColor-accent-muted: #4184e466; diff --git a/dist/css/functional/themes/dark-high-contrast.css b/dist/css/functional/themes/dark-high-contrast.css index b39271e11..226e8f38d 100644 --- a/dist/css/functional/themes/dark-high-contrast.css +++ b/dist/css/functional/themes/dark-high-contrast.css @@ -168,7 +168,7 @@ --control-bgColor-disabled: #3d424db3; --control-bgColor-selected: #525964; --control-fgColor-rest: #f0f3f6; - --control-fgColor-placeholder: #7a828e; + --control-fgColor-placeholder: #b7bec7; --control-fgColor-disabled: #9ea7b3; --control-borderColor-rest: #7a828e; --control-borderColor-emphasis: #7a828e; @@ -482,6 +482,7 @@ --borderColor-emphasis: #7a828e; --borderColor-disabled: #3d424db3; --borderColor-transparent: #00000000; + --borderColor-translucent: #7a828e; --borderColor-neutral-muted: #9ea7b3; --borderColor-neutral-emphasis: #9ea7b3; --borderColor-accent-muted: #5cacff; @@ -731,7 +732,7 @@ --control-bgColor-disabled: #3d424db3; --control-bgColor-selected: #525964; --control-fgColor-rest: #f0f3f6; - --control-fgColor-placeholder: #7a828e; + --control-fgColor-placeholder: #b7bec7; --control-fgColor-disabled: #9ea7b3; --control-borderColor-rest: #7a828e; --control-borderColor-emphasis: #7a828e; @@ -1045,6 +1046,7 @@ --borderColor-emphasis: #7a828e; --borderColor-disabled: #3d424db3; --borderColor-transparent: #00000000; + --borderColor-translucent: #7a828e; --borderColor-neutral-muted: #9ea7b3; --borderColor-neutral-emphasis: #9ea7b3; --borderColor-accent-muted: #5cacff; diff --git a/dist/css/functional/themes/dark-tritanopia.css b/dist/css/functional/themes/dark-tritanopia.css index 5b040097e..0e27f6dba 100644 --- a/dist/css/functional/themes/dark-tritanopia.css +++ b/dist/css/functional/themes/dark-tritanopia.css @@ -168,7 +168,7 @@ --control-bgColor-disabled: #21262db3; --control-bgColor-selected: #161b22; --control-fgColor-rest: #c9d1d9; - --control-fgColor-placeholder: #484f58; + --control-fgColor-placeholder: #858e98; --control-fgColor-disabled: #6e7681; --control-borderColor-rest: #30363d; --control-borderColor-emphasis: #666e79; @@ -482,6 +482,7 @@ --borderColor-emphasis: #484f58; --borderColor-disabled: #21262db3; --borderColor-transparent: #00000000; + --borderColor-translucent: #ffffff26; --borderColor-neutral-muted: #6e768166; --borderColor-neutral-emphasis: #6e7681; --borderColor-accent-muted: #388bfd66; @@ -731,7 +732,7 @@ --control-bgColor-disabled: #21262db3; --control-bgColor-selected: #161b22; --control-fgColor-rest: #c9d1d9; - --control-fgColor-placeholder: #484f58; + --control-fgColor-placeholder: #858e98; --control-fgColor-disabled: #6e7681; --control-borderColor-rest: #30363d; --control-borderColor-emphasis: #666e79; @@ -1045,6 +1046,7 @@ --borderColor-emphasis: #484f58; --borderColor-disabled: #21262db3; --borderColor-transparent: #00000000; + --borderColor-translucent: #ffffff26; --borderColor-neutral-muted: #6e768166; --borderColor-neutral-emphasis: #6e7681; --borderColor-accent-muted: #388bfd66; diff --git a/dist/css/functional/themes/dark.css b/dist/css/functional/themes/dark.css index 3b9804db5..f9ac2cd77 100644 --- a/dist/css/functional/themes/dark.css +++ b/dist/css/functional/themes/dark.css @@ -168,7 +168,7 @@ --control-bgColor-disabled: #21262db3; --control-bgColor-selected: #161b22; --control-fgColor-rest: #c9d1d9; - --control-fgColor-placeholder: #484f58; + --control-fgColor-placeholder: #858e98; --control-fgColor-disabled: #6e7681; --control-borderColor-rest: #30363d; --control-borderColor-emphasis: #666e79; @@ -482,6 +482,7 @@ --borderColor-emphasis: #484f58; --borderColor-disabled: #21262db3; --borderColor-transparent: #00000000; + --borderColor-translucent: #ffffff26; --borderColor-neutral-muted: #6e768166; --borderColor-neutral-emphasis: #6e7681; --borderColor-accent-muted: #388bfd66; @@ -731,7 +732,7 @@ --control-bgColor-disabled: #21262db3; --control-bgColor-selected: #161b22; --control-fgColor-rest: #c9d1d9; - --control-fgColor-placeholder: #484f58; + --control-fgColor-placeholder: #858e98; --control-fgColor-disabled: #6e7681; --control-borderColor-rest: #30363d; --control-borderColor-emphasis: #666e79; @@ -1045,6 +1046,7 @@ --borderColor-emphasis: #484f58; --borderColor-disabled: #21262db3; --borderColor-transparent: #00000000; + --borderColor-translucent: #ffffff26; --borderColor-neutral-muted: #6e768166; --borderColor-neutral-emphasis: #6e7681; --borderColor-accent-muted: #388bfd66; diff --git a/dist/css/functional/themes/light-colorblind.css b/dist/css/functional/themes/light-colorblind.css index 67c6a06ff..d3cf42889 100644 --- a/dist/css/functional/themes/light-colorblind.css +++ b/dist/css/functional/themes/light-colorblind.css @@ -168,7 +168,7 @@ --control-bgColor-disabled: #eaeef2b3; --control-bgColor-selected: #f6f8fa; --control-fgColor-rest: #24292f; - --control-fgColor-placeholder: #6e7781; + --control-fgColor-placeholder: #69727c; --control-fgColor-disabled: #8c959f; --control-borderColor-rest: #d0d7de; --control-borderColor-emphasis: #868f99; @@ -190,15 +190,15 @@ --control-danger-fgColor-hover: #be4e02; --control-danger-bgColor-hover: #fff1e5; --control-danger-bgColor-active: #fff1e566; - --control-checked-bgColor-rest: #0969da; - --control-checked-bgColor-hover: #0860ca; - --control-checked-bgColor-active: #0757ba; + --control-checked-bgColor-rest: #c9f04d; + --control-checked-bgColor-hover: #a1cc59; + --control-checked-bgColor-active: #7aa866; --control-checked-bgColor-disabled: #8c959f; --control-checked-fgColor-rest: #ffffff; --control-checked-fgColor-disabled: #ffffff; - --control-checked-borderColor-rest: #0969da; - --control-checked-borderColor-hover: #0860ca; - --control-checked-borderColor-active: #0757ba; + --control-checked-borderColor-rest: #c9f04d; + --control-checked-borderColor-hover: #a1cc59; + --control-checked-borderColor-active: #7aa866; --control-checked-borderColor-disabled: #8c959f; --controlTrack-bgColor-rest: #eaeef2; --controlTrack-bgColor-hover: #dee3e8; @@ -213,7 +213,7 @@ --controlKnob-bgColor-checked: #ffffff; --controlKnob-borderColor-rest: #868f99; --controlKnob-borderColor-disabled: #eaeef2b3; - --controlKnob-borderColor-checked: #0969da; + --controlKnob-borderColor-checked: #c9f04d; --counter-borderColor: #ffffff00; --button-default-fgColor-rest: #24292f; --button-default-bgColor-rest: #f6f8fa; @@ -256,8 +256,8 @@ --button-outline-fgColor-active: #ffffff; --button-outline-fgColor-disabled: #0969da80; --button-outline-bgColor-rest: #f6f8fa; - --button-outline-bgColor-hover: #0969da; - --button-outline-bgColor-active: #0757ba; + --button-outline-bgColor-hover: #c9f04d; + --button-outline-bgColor-active: #7aa866; --button-outline-bgColor-disabled: #f6f8fa; --button-outline-borderColor-hover: #1f232826; --button-outline-borderColor-active: #1f232826; @@ -282,9 +282,9 @@ --buttonCounter-default-bgColor-rest: #afb8c133; --buttonCounter-invisible-bgColor-rest: #afb8c133; --buttonCounter-primary-bgColor-rest: #002d1133; - --buttonCounter-outline-bgColor-rest: #0969da1a; + --buttonCounter-outline-bgColor-rest: #c9f04d1a; --buttonCounter-outline-bgColor-hover: #ffffff33; - --buttonCounter-outline-bgColor-disabled: #0969da0d; + --buttonCounter-outline-bgColor-disabled: #c9f04d0d; --buttonCounter-outline-fgColor-rest: #0550ae; --buttonCounter-outline-fgColor-hover: #ffffff; --buttonCounter-outline-fgColor-disabled: #0969da80; @@ -313,7 +313,7 @@ --underlineNav-borderColor-active: #fd8c73; --underlineNav-borderColor-hover: #afb8c133; --underlineNav-iconColor-rest: #636c76; - --selection-bgColor: #0969da33; + --selection-bgColor: #c9f04d33; --card-bgColor: #ffffff; --label-green-bgColor-rest: #caf7ca; --label-green-bgColor-hover: #9ceda0; @@ -459,7 +459,7 @@ --bgColor-neutral-muted: #afb8c133; --bgColor-neutral-emphasis: #6e7781; --bgColor-accent-muted: #ddf4ff; - --bgColor-accent-emphasis: #0969da; + --bgColor-accent-emphasis: #c9f04d; --bgColor-success-muted: #ddf4ff; --bgColor-success-emphasis: #0f72e3; --bgColor-attention-muted: #fff8c5; @@ -483,6 +483,7 @@ --borderColor-emphasis: #6e7781; --borderColor-disabled: #eaeef2b3; --borderColor-transparent: #ffffff00; + --borderColor-translucent: #1f232826; --borderColor-neutral-muted: #afb8c133; --borderColor-neutral-emphasis: #6e7781; --borderColor-accent-muted: #54aeff66; @@ -731,7 +732,7 @@ --control-bgColor-disabled: #eaeef2b3; --control-bgColor-selected: #f6f8fa; --control-fgColor-rest: #24292f; - --control-fgColor-placeholder: #6e7781; + --control-fgColor-placeholder: #69727c; --control-fgColor-disabled: #8c959f; --control-borderColor-rest: #d0d7de; --control-borderColor-emphasis: #868f99; @@ -753,15 +754,15 @@ --control-danger-fgColor-hover: #be4e02; --control-danger-bgColor-hover: #fff1e5; --control-danger-bgColor-active: #fff1e566; - --control-checked-bgColor-rest: #0969da; - --control-checked-bgColor-hover: #0860ca; - --control-checked-bgColor-active: #0757ba; + --control-checked-bgColor-rest: #c9f04d; + --control-checked-bgColor-hover: #a1cc59; + --control-checked-bgColor-active: #7aa866; --control-checked-bgColor-disabled: #8c959f; --control-checked-fgColor-rest: #ffffff; --control-checked-fgColor-disabled: #ffffff; - --control-checked-borderColor-rest: #0969da; - --control-checked-borderColor-hover: #0860ca; - --control-checked-borderColor-active: #0757ba; + --control-checked-borderColor-rest: #c9f04d; + --control-checked-borderColor-hover: #a1cc59; + --control-checked-borderColor-active: #7aa866; --control-checked-borderColor-disabled: #8c959f; --controlTrack-bgColor-rest: #eaeef2; --controlTrack-bgColor-hover: #dee3e8; @@ -776,7 +777,7 @@ --controlKnob-bgColor-checked: #ffffff; --controlKnob-borderColor-rest: #868f99; --controlKnob-borderColor-disabled: #eaeef2b3; - --controlKnob-borderColor-checked: #0969da; + --controlKnob-borderColor-checked: #c9f04d; --counter-borderColor: #ffffff00; --button-default-fgColor-rest: #24292f; --button-default-bgColor-rest: #f6f8fa; @@ -819,8 +820,8 @@ --button-outline-fgColor-active: #ffffff; --button-outline-fgColor-disabled: #0969da80; --button-outline-bgColor-rest: #f6f8fa; - --button-outline-bgColor-hover: #0969da; - --button-outline-bgColor-active: #0757ba; + --button-outline-bgColor-hover: #c9f04d; + --button-outline-bgColor-active: #7aa866; --button-outline-bgColor-disabled: #f6f8fa; --button-outline-borderColor-hover: #1f232826; --button-outline-borderColor-active: #1f232826; @@ -845,9 +846,9 @@ --buttonCounter-default-bgColor-rest: #afb8c133; --buttonCounter-invisible-bgColor-rest: #afb8c133; --buttonCounter-primary-bgColor-rest: #002d1133; - --buttonCounter-outline-bgColor-rest: #0969da1a; + --buttonCounter-outline-bgColor-rest: #c9f04d1a; --buttonCounter-outline-bgColor-hover: #ffffff33; - --buttonCounter-outline-bgColor-disabled: #0969da0d; + --buttonCounter-outline-bgColor-disabled: #c9f04d0d; --buttonCounter-outline-fgColor-rest: #0550ae; --buttonCounter-outline-fgColor-hover: #ffffff; --buttonCounter-outline-fgColor-disabled: #0969da80; @@ -876,7 +877,7 @@ --underlineNav-borderColor-active: #fd8c73; --underlineNav-borderColor-hover: #afb8c133; --underlineNav-iconColor-rest: #636c76; - --selection-bgColor: #0969da33; + --selection-bgColor: #c9f04d33; --card-bgColor: #ffffff; --label-green-bgColor-rest: #caf7ca; --label-green-bgColor-hover: #9ceda0; @@ -1022,7 +1023,7 @@ --bgColor-neutral-muted: #afb8c133; --bgColor-neutral-emphasis: #6e7781; --bgColor-accent-muted: #ddf4ff; - --bgColor-accent-emphasis: #0969da; + --bgColor-accent-emphasis: #c9f04d; --bgColor-success-muted: #ddf4ff; --bgColor-success-emphasis: #0f72e3; --bgColor-attention-muted: #fff8c5; @@ -1046,6 +1047,7 @@ --borderColor-emphasis: #6e7781; --borderColor-disabled: #eaeef2b3; --borderColor-transparent: #ffffff00; + --borderColor-translucent: #1f232826; --borderColor-neutral-muted: #afb8c133; --borderColor-neutral-emphasis: #6e7781; --borderColor-accent-muted: #54aeff66; diff --git a/dist/css/functional/themes/light-high-contrast.css b/dist/css/functional/themes/light-high-contrast.css index 29c519977..fff88cdec 100644 --- a/dist/css/functional/themes/light-high-contrast.css +++ b/dist/css/functional/themes/light-high-contrast.css @@ -168,7 +168,7 @@ --control-bgColor-disabled: #ced5dcb3; --control-bgColor-selected: #acb6c0; --control-fgColor-rest: #0e1116; - --control-fgColor-placeholder: #66707b; + --control-fgColor-placeholder: #616a75; --control-fgColor-disabled: #66707b; --control-borderColor-rest: #20252c; --control-borderColor-emphasis: #20252c; @@ -190,15 +190,15 @@ --control-danger-fgColor-hover: #ffffff; --control-danger-bgColor-hover: #a0111f; --control-danger-bgColor-active: #8c0b1d; - --control-checked-bgColor-rest: #0349b4; - --control-checked-bgColor-hover: #0344a8; - --control-checked-bgColor-active: #033f9d; + --control-checked-bgColor-rest: #c9f04d; + --control-checked-bgColor-hover: #a1c956; + --control-checked-bgColor-active: #79a35f; --control-checked-bgColor-disabled: #66707b; --control-checked-fgColor-rest: #ffffff; --control-checked-fgColor-disabled: #ffffff; - --control-checked-borderColor-rest: #0349b4; - --control-checked-borderColor-hover: #0344a8; - --control-checked-borderColor-active: #033f9d; + --control-checked-borderColor-rest: #c9f04d; + --control-checked-borderColor-hover: #a1c956; + --control-checked-borderColor-active: #79a35f; --control-checked-borderColor-disabled: #66707b; --controlTrack-bgColor-rest: #acb6c0; --controlTrack-bgColor-hover: #9ea8b2; @@ -213,7 +213,7 @@ --controlKnob-bgColor-checked: #ffffff; --controlKnob-borderColor-rest: #20252c; --controlKnob-borderColor-disabled: #ced5dcb3; - --controlKnob-borderColor-checked: #0349b4; + --controlKnob-borderColor-checked: #c9f04d; --counter-borderColor: #20252c; --button-default-fgColor-rest: #0e1116; --button-default-bgColor-rest: #e7ecf0; @@ -256,8 +256,8 @@ --button-outline-fgColor-active: #ffffff; --button-outline-fgColor-disabled: #023b9580; --button-outline-bgColor-rest: #e7ecf0; - --button-outline-bgColor-hover: #0349b4; - --button-outline-bgColor-active: #033f9d; + --button-outline-bgColor-hover: #c9f04d; + --button-outline-bgColor-active: #79a35f; --button-outline-bgColor-disabled: #ffffff; --button-outline-borderColor-hover: #01040926; --button-outline-borderColor-active: #01040926; @@ -282,9 +282,9 @@ --buttonCounter-default-bgColor-rest: #66707b33; --buttonCounter-invisible-bgColor-rest: #66707b33; --buttonCounter-primary-bgColor-rest: #00230b33; - --buttonCounter-outline-bgColor-rest: #0349b41a; + --buttonCounter-outline-bgColor-rest: #c9f04d1a; --buttonCounter-outline-bgColor-hover: #ffffff33; - --buttonCounter-outline-bgColor-disabled: #0349b40d; + --buttonCounter-outline-bgColor-disabled: #c9f04d0d; --buttonCounter-outline-fgColor-rest: #023b95; --buttonCounter-outline-fgColor-hover: #ffffff; --buttonCounter-outline-fgColor-disabled: #023b9580; @@ -313,7 +313,7 @@ --underlineNav-borderColor-active: #cd3425; --underlineNav-borderColor-hover: #88929d; --underlineNav-iconColor-rest: #0e1116; - --selection-bgColor: #0349b433; + --selection-bgColor: #c9f04d33; --card-bgColor: #ffffff; --label-green-bgColor-rest: #caf7ca; --label-green-bgColor-hover: #9ceda0; @@ -459,7 +459,7 @@ --bgColor-neutral-muted: #e7ecf0; --bgColor-neutral-emphasis: #66707b; --bgColor-accent-muted: #dff7ff; - --bgColor-accent-emphasis: #0349b4; + --bgColor-accent-emphasis: #c9f04d; --bgColor-success-muted: #f3f8f6; --bgColor-success-emphasis: #055d20; --bgColor-attention-muted: #fcf7be; @@ -483,6 +483,7 @@ --borderColor-emphasis: #66707b; --borderColor-disabled: #ced5dcb3; --borderColor-transparent: #ffffff00; + --borderColor-translucent: #20252c; --borderColor-neutral-muted: #88929d; --borderColor-neutral-emphasis: #66707b; --borderColor-accent-muted: #368cf9; @@ -731,7 +732,7 @@ --control-bgColor-disabled: #ced5dcb3; --control-bgColor-selected: #acb6c0; --control-fgColor-rest: #0e1116; - --control-fgColor-placeholder: #66707b; + --control-fgColor-placeholder: #616a75; --control-fgColor-disabled: #66707b; --control-borderColor-rest: #20252c; --control-borderColor-emphasis: #20252c; @@ -753,15 +754,15 @@ --control-danger-fgColor-hover: #ffffff; --control-danger-bgColor-hover: #a0111f; --control-danger-bgColor-active: #8c0b1d; - --control-checked-bgColor-rest: #0349b4; - --control-checked-bgColor-hover: #0344a8; - --control-checked-bgColor-active: #033f9d; + --control-checked-bgColor-rest: #c9f04d; + --control-checked-bgColor-hover: #a1c956; + --control-checked-bgColor-active: #79a35f; --control-checked-bgColor-disabled: #66707b; --control-checked-fgColor-rest: #ffffff; --control-checked-fgColor-disabled: #ffffff; - --control-checked-borderColor-rest: #0349b4; - --control-checked-borderColor-hover: #0344a8; - --control-checked-borderColor-active: #033f9d; + --control-checked-borderColor-rest: #c9f04d; + --control-checked-borderColor-hover: #a1c956; + --control-checked-borderColor-active: #79a35f; --control-checked-borderColor-disabled: #66707b; --controlTrack-bgColor-rest: #acb6c0; --controlTrack-bgColor-hover: #9ea8b2; @@ -776,7 +777,7 @@ --controlKnob-bgColor-checked: #ffffff; --controlKnob-borderColor-rest: #20252c; --controlKnob-borderColor-disabled: #ced5dcb3; - --controlKnob-borderColor-checked: #0349b4; + --controlKnob-borderColor-checked: #c9f04d; --counter-borderColor: #20252c; --button-default-fgColor-rest: #0e1116; --button-default-bgColor-rest: #e7ecf0; @@ -819,8 +820,8 @@ --button-outline-fgColor-active: #ffffff; --button-outline-fgColor-disabled: #023b9580; --button-outline-bgColor-rest: #e7ecf0; - --button-outline-bgColor-hover: #0349b4; - --button-outline-bgColor-active: #033f9d; + --button-outline-bgColor-hover: #c9f04d; + --button-outline-bgColor-active: #79a35f; --button-outline-bgColor-disabled: #ffffff; --button-outline-borderColor-hover: #01040926; --button-outline-borderColor-active: #01040926; @@ -845,9 +846,9 @@ --buttonCounter-default-bgColor-rest: #66707b33; --buttonCounter-invisible-bgColor-rest: #66707b33; --buttonCounter-primary-bgColor-rest: #00230b33; - --buttonCounter-outline-bgColor-rest: #0349b41a; + --buttonCounter-outline-bgColor-rest: #c9f04d1a; --buttonCounter-outline-bgColor-hover: #ffffff33; - --buttonCounter-outline-bgColor-disabled: #0349b40d; + --buttonCounter-outline-bgColor-disabled: #c9f04d0d; --buttonCounter-outline-fgColor-rest: #023b95; --buttonCounter-outline-fgColor-hover: #ffffff; --buttonCounter-outline-fgColor-disabled: #023b9580; @@ -876,7 +877,7 @@ --underlineNav-borderColor-active: #cd3425; --underlineNav-borderColor-hover: #88929d; --underlineNav-iconColor-rest: #0e1116; - --selection-bgColor: #0349b433; + --selection-bgColor: #c9f04d33; --card-bgColor: #ffffff; --label-green-bgColor-rest: #caf7ca; --label-green-bgColor-hover: #9ceda0; @@ -1022,7 +1023,7 @@ --bgColor-neutral-muted: #e7ecf0; --bgColor-neutral-emphasis: #66707b; --bgColor-accent-muted: #dff7ff; - --bgColor-accent-emphasis: #0349b4; + --bgColor-accent-emphasis: #c9f04d; --bgColor-success-muted: #f3f8f6; --bgColor-success-emphasis: #055d20; --bgColor-attention-muted: #fcf7be; @@ -1046,6 +1047,7 @@ --borderColor-emphasis: #66707b; --borderColor-disabled: #ced5dcb3; --borderColor-transparent: #ffffff00; + --borderColor-translucent: #20252c; --borderColor-neutral-muted: #88929d; --borderColor-neutral-emphasis: #66707b; --borderColor-accent-muted: #368cf9; diff --git a/dist/css/functional/themes/light-tritanopia.css b/dist/css/functional/themes/light-tritanopia.css index 9bf5c322d..8cf5c79ad 100644 --- a/dist/css/functional/themes/light-tritanopia.css +++ b/dist/css/functional/themes/light-tritanopia.css @@ -168,7 +168,7 @@ --control-bgColor-disabled: #eaeef2b3; --control-bgColor-selected: #f6f8fa; --control-fgColor-rest: #24292f; - --control-fgColor-placeholder: #6e7781; + --control-fgColor-placeholder: #69727c; --control-fgColor-disabled: #8c959f; --control-borderColor-rest: #d0d7de; --control-borderColor-emphasis: #868f99; @@ -190,15 +190,15 @@ --control-danger-fgColor-hover: #d1242f; --control-danger-bgColor-hover: #ffebe9; --control-danger-bgColor-active: #ffebe966; - --control-checked-bgColor-rest: #0969da; - --control-checked-bgColor-hover: #0860ca; - --control-checked-bgColor-active: #0757ba; + --control-checked-bgColor-rest: #c9f04d; + --control-checked-bgColor-hover: #a1cc59; + --control-checked-bgColor-active: #7aa866; --control-checked-bgColor-disabled: #8c959f; --control-checked-fgColor-rest: #ffffff; --control-checked-fgColor-disabled: #ffffff; - --control-checked-borderColor-rest: #0969da; - --control-checked-borderColor-hover: #0860ca; - --control-checked-borderColor-active: #0757ba; + --control-checked-borderColor-rest: #c9f04d; + --control-checked-borderColor-hover: #a1cc59; + --control-checked-borderColor-active: #7aa866; --control-checked-borderColor-disabled: #8c959f; --controlTrack-bgColor-rest: #eaeef2; --controlTrack-bgColor-hover: #dee3e8; @@ -213,7 +213,7 @@ --controlKnob-bgColor-checked: #ffffff; --controlKnob-borderColor-rest: #868f99; --controlKnob-borderColor-disabled: #eaeef2b3; - --controlKnob-borderColor-checked: #0969da; + --controlKnob-borderColor-checked: #c9f04d; --counter-borderColor: #ffffff00; --button-default-fgColor-rest: #24292f; --button-default-bgColor-rest: #f6f8fa; @@ -256,8 +256,8 @@ --button-outline-fgColor-active: #ffffff; --button-outline-fgColor-disabled: #0969da80; --button-outline-bgColor-rest: #f6f8fa; - --button-outline-bgColor-hover: #0969da; - --button-outline-bgColor-active: #0757ba; + --button-outline-bgColor-hover: #c9f04d; + --button-outline-bgColor-active: #7aa866; --button-outline-bgColor-disabled: #f6f8fa; --button-outline-borderColor-hover: #1f232826; --button-outline-borderColor-active: #1f232826; @@ -282,9 +282,9 @@ --buttonCounter-default-bgColor-rest: #afb8c133; --buttonCounter-invisible-bgColor-rest: #afb8c133; --buttonCounter-primary-bgColor-rest: #002d1133; - --buttonCounter-outline-bgColor-rest: #0969da1a; + --buttonCounter-outline-bgColor-rest: #c9f04d1a; --buttonCounter-outline-bgColor-hover: #ffffff33; - --buttonCounter-outline-bgColor-disabled: #0969da0d; + --buttonCounter-outline-bgColor-disabled: #c9f04d0d; --buttonCounter-outline-fgColor-rest: #0550ae; --buttonCounter-outline-fgColor-hover: #ffffff; --buttonCounter-outline-fgColor-disabled: #0969da80; @@ -313,7 +313,7 @@ --underlineNav-borderColor-active: #fd8c73; --underlineNav-borderColor-hover: #afb8c133; --underlineNav-iconColor-rest: #636c76; - --selection-bgColor: #0969da33; + --selection-bgColor: #c9f04d33; --card-bgColor: #ffffff; --label-green-bgColor-rest: #caf7ca; --label-green-bgColor-hover: #9ceda0; @@ -459,7 +459,7 @@ --bgColor-neutral-muted: #afb8c133; --bgColor-neutral-emphasis: #6e7781; --bgColor-accent-muted: #ddf4ff; - --bgColor-accent-emphasis: #0969da; + --bgColor-accent-emphasis: #c9f04d; --bgColor-success-muted: #ddf4ff; --bgColor-success-emphasis: #0f72e3; --bgColor-attention-muted: #fff8c5; @@ -483,6 +483,7 @@ --borderColor-emphasis: #6e7781; --borderColor-disabled: #eaeef2b3; --borderColor-transparent: #ffffff00; + --borderColor-translucent: #1f232826; --borderColor-neutral-muted: #afb8c133; --borderColor-neutral-emphasis: #6e7781; --borderColor-accent-muted: #54aeff66; @@ -731,7 +732,7 @@ --control-bgColor-disabled: #eaeef2b3; --control-bgColor-selected: #f6f8fa; --control-fgColor-rest: #24292f; - --control-fgColor-placeholder: #6e7781; + --control-fgColor-placeholder: #69727c; --control-fgColor-disabled: #8c959f; --control-borderColor-rest: #d0d7de; --control-borderColor-emphasis: #868f99; @@ -753,15 +754,15 @@ --control-danger-fgColor-hover: #d1242f; --control-danger-bgColor-hover: #ffebe9; --control-danger-bgColor-active: #ffebe966; - --control-checked-bgColor-rest: #0969da; - --control-checked-bgColor-hover: #0860ca; - --control-checked-bgColor-active: #0757ba; + --control-checked-bgColor-rest: #c9f04d; + --control-checked-bgColor-hover: #a1cc59; + --control-checked-bgColor-active: #7aa866; --control-checked-bgColor-disabled: #8c959f; --control-checked-fgColor-rest: #ffffff; --control-checked-fgColor-disabled: #ffffff; - --control-checked-borderColor-rest: #0969da; - --control-checked-borderColor-hover: #0860ca; - --control-checked-borderColor-active: #0757ba; + --control-checked-borderColor-rest: #c9f04d; + --control-checked-borderColor-hover: #a1cc59; + --control-checked-borderColor-active: #7aa866; --control-checked-borderColor-disabled: #8c959f; --controlTrack-bgColor-rest: #eaeef2; --controlTrack-bgColor-hover: #dee3e8; @@ -776,7 +777,7 @@ --controlKnob-bgColor-checked: #ffffff; --controlKnob-borderColor-rest: #868f99; --controlKnob-borderColor-disabled: #eaeef2b3; - --controlKnob-borderColor-checked: #0969da; + --controlKnob-borderColor-checked: #c9f04d; --counter-borderColor: #ffffff00; --button-default-fgColor-rest: #24292f; --button-default-bgColor-rest: #f6f8fa; @@ -819,8 +820,8 @@ --button-outline-fgColor-active: #ffffff; --button-outline-fgColor-disabled: #0969da80; --button-outline-bgColor-rest: #f6f8fa; - --button-outline-bgColor-hover: #0969da; - --button-outline-bgColor-active: #0757ba; + --button-outline-bgColor-hover: #c9f04d; + --button-outline-bgColor-active: #7aa866; --button-outline-bgColor-disabled: #f6f8fa; --button-outline-borderColor-hover: #1f232826; --button-outline-borderColor-active: #1f232826; @@ -845,9 +846,9 @@ --buttonCounter-default-bgColor-rest: #afb8c133; --buttonCounter-invisible-bgColor-rest: #afb8c133; --buttonCounter-primary-bgColor-rest: #002d1133; - --buttonCounter-outline-bgColor-rest: #0969da1a; + --buttonCounter-outline-bgColor-rest: #c9f04d1a; --buttonCounter-outline-bgColor-hover: #ffffff33; - --buttonCounter-outline-bgColor-disabled: #0969da0d; + --buttonCounter-outline-bgColor-disabled: #c9f04d0d; --buttonCounter-outline-fgColor-rest: #0550ae; --buttonCounter-outline-fgColor-hover: #ffffff; --buttonCounter-outline-fgColor-disabled: #0969da80; @@ -876,7 +877,7 @@ --underlineNav-borderColor-active: #fd8c73; --underlineNav-borderColor-hover: #afb8c133; --underlineNav-iconColor-rest: #636c76; - --selection-bgColor: #0969da33; + --selection-bgColor: #c9f04d33; --card-bgColor: #ffffff; --label-green-bgColor-rest: #caf7ca; --label-green-bgColor-hover: #9ceda0; @@ -1022,7 +1023,7 @@ --bgColor-neutral-muted: #afb8c133; --bgColor-neutral-emphasis: #6e7781; --bgColor-accent-muted: #ddf4ff; - --bgColor-accent-emphasis: #0969da; + --bgColor-accent-emphasis: #c9f04d; --bgColor-success-muted: #ddf4ff; --bgColor-success-emphasis: #0f72e3; --bgColor-attention-muted: #fff8c5; @@ -1046,6 +1047,7 @@ --borderColor-emphasis: #6e7781; --borderColor-disabled: #eaeef2b3; --borderColor-transparent: #ffffff00; + --borderColor-translucent: #1f232826; --borderColor-neutral-muted: #afb8c133; --borderColor-neutral-emphasis: #6e7781; --borderColor-accent-muted: #54aeff66; diff --git a/dist/css/functional/themes/light.css b/dist/css/functional/themes/light.css index c508d43c8..61743b5e4 100644 --- a/dist/css/functional/themes/light.css +++ b/dist/css/functional/themes/light.css @@ -168,7 +168,7 @@ --control-bgColor-disabled: #eaeef2b3; --control-bgColor-selected: #f6f8fa; --control-fgColor-rest: #24292f; - --control-fgColor-placeholder: #6e7781; + --control-fgColor-placeholder: #69727c; --control-fgColor-disabled: #8c959f; --control-borderColor-rest: #d0d7de; --control-borderColor-emphasis: #868f99; @@ -190,15 +190,15 @@ --control-danger-fgColor-hover: #d1242f; --control-danger-bgColor-hover: #ffebe9; --control-danger-bgColor-active: #ffebe966; - --control-checked-bgColor-rest: #0969da; - --control-checked-bgColor-hover: #0860ca; - --control-checked-bgColor-active: #0757ba; + --control-checked-bgColor-rest: #c9f04d; + --control-checked-bgColor-hover: #a1cc59; + --control-checked-bgColor-active: #7aa866; --control-checked-bgColor-disabled: #8c959f; --control-checked-fgColor-rest: #ffffff; --control-checked-fgColor-disabled: #ffffff; - --control-checked-borderColor-rest: #0969da; - --control-checked-borderColor-hover: #0860ca; - --control-checked-borderColor-active: #0757ba; + --control-checked-borderColor-rest: #c9f04d; + --control-checked-borderColor-hover: #a1cc59; + --control-checked-borderColor-active: #7aa866; --control-checked-borderColor-disabled: #8c959f; --controlTrack-bgColor-rest: #eaeef2; --controlTrack-bgColor-hover: #dee3e8; @@ -213,7 +213,7 @@ --controlKnob-bgColor-checked: #ffffff; --controlKnob-borderColor-rest: #868f99; --controlKnob-borderColor-disabled: #eaeef2b3; - --controlKnob-borderColor-checked: #0969da; + --controlKnob-borderColor-checked: #c9f04d; --counter-borderColor: #ffffff00; --button-default-fgColor-rest: #24292f; --button-default-bgColor-rest: #f6f8fa; @@ -256,8 +256,8 @@ --button-outline-fgColor-active: #ffffff; --button-outline-fgColor-disabled: #0969da80; --button-outline-bgColor-rest: #f6f8fa; - --button-outline-bgColor-hover: #0969da; - --button-outline-bgColor-active: #0757ba; + --button-outline-bgColor-hover: #c9f04d; + --button-outline-bgColor-active: #7aa866; --button-outline-bgColor-disabled: #f6f8fa; --button-outline-borderColor-hover: #1f232826; --button-outline-borderColor-active: #1f232826; @@ -282,9 +282,9 @@ --buttonCounter-default-bgColor-rest: #afb8c133; --buttonCounter-invisible-bgColor-rest: #afb8c133; --buttonCounter-primary-bgColor-rest: #002d1133; - --buttonCounter-outline-bgColor-rest: #0969da1a; + --buttonCounter-outline-bgColor-rest: #c9f04d1a; --buttonCounter-outline-bgColor-hover: #ffffff33; - --buttonCounter-outline-bgColor-disabled: #0969da0d; + --buttonCounter-outline-bgColor-disabled: #c9f04d0d; --buttonCounter-outline-fgColor-rest: #0550ae; --buttonCounter-outline-fgColor-hover: #ffffff; --buttonCounter-outline-fgColor-disabled: #0969da80; @@ -313,7 +313,7 @@ --underlineNav-borderColor-active: #fd8c73; --underlineNav-borderColor-hover: #afb8c133; --underlineNav-iconColor-rest: #636c76; - --selection-bgColor: #0969da33; + --selection-bgColor: #c9f04d33; --card-bgColor: #ffffff; --label-green-bgColor-rest: #caf7ca; --label-green-bgColor-hover: #9ceda0; @@ -459,7 +459,7 @@ --bgColor-neutral-muted: #afb8c133; --bgColor-neutral-emphasis: #6e7781; --bgColor-accent-muted: #ddf4ff; - --bgColor-accent-emphasis: #0969da; + --bgColor-accent-emphasis: #c9f04d; --bgColor-success-muted: #f3f8f6; --bgColor-success-emphasis: #1c8e75; --bgColor-attention-muted: #fff8c5; @@ -483,6 +483,7 @@ --borderColor-emphasis: #6e7781; --borderColor-disabled: #eaeef2b3; --borderColor-transparent: #ffffff00; + --borderColor-translucent: #1f232826; --borderColor-neutral-muted: #afb8c133; --borderColor-neutral-emphasis: #6e7781; --borderColor-accent-muted: #54aeff66; @@ -731,7 +732,7 @@ --control-bgColor-disabled: #eaeef2b3; --control-bgColor-selected: #f6f8fa; --control-fgColor-rest: #24292f; - --control-fgColor-placeholder: #6e7781; + --control-fgColor-placeholder: #69727c; --control-fgColor-disabled: #8c959f; --control-borderColor-rest: #d0d7de; --control-borderColor-emphasis: #868f99; @@ -753,15 +754,15 @@ --control-danger-fgColor-hover: #d1242f; --control-danger-bgColor-hover: #ffebe9; --control-danger-bgColor-active: #ffebe966; - --control-checked-bgColor-rest: #0969da; - --control-checked-bgColor-hover: #0860ca; - --control-checked-bgColor-active: #0757ba; + --control-checked-bgColor-rest: #c9f04d; + --control-checked-bgColor-hover: #a1cc59; + --control-checked-bgColor-active: #7aa866; --control-checked-bgColor-disabled: #8c959f; --control-checked-fgColor-rest: #ffffff; --control-checked-fgColor-disabled: #ffffff; - --control-checked-borderColor-rest: #0969da; - --control-checked-borderColor-hover: #0860ca; - --control-checked-borderColor-active: #0757ba; + --control-checked-borderColor-rest: #c9f04d; + --control-checked-borderColor-hover: #a1cc59; + --control-checked-borderColor-active: #7aa866; --control-checked-borderColor-disabled: #8c959f; --controlTrack-bgColor-rest: #eaeef2; --controlTrack-bgColor-hover: #dee3e8; @@ -776,7 +777,7 @@ --controlKnob-bgColor-checked: #ffffff; --controlKnob-borderColor-rest: #868f99; --controlKnob-borderColor-disabled: #eaeef2b3; - --controlKnob-borderColor-checked: #0969da; + --controlKnob-borderColor-checked: #c9f04d; --counter-borderColor: #ffffff00; --button-default-fgColor-rest: #24292f; --button-default-bgColor-rest: #f6f8fa; @@ -819,8 +820,8 @@ --button-outline-fgColor-active: #ffffff; --button-outline-fgColor-disabled: #0969da80; --button-outline-bgColor-rest: #f6f8fa; - --button-outline-bgColor-hover: #0969da; - --button-outline-bgColor-active: #0757ba; + --button-outline-bgColor-hover: #c9f04d; + --button-outline-bgColor-active: #7aa866; --button-outline-bgColor-disabled: #f6f8fa; --button-outline-borderColor-hover: #1f232826; --button-outline-borderColor-active: #1f232826; @@ -845,9 +846,9 @@ --buttonCounter-default-bgColor-rest: #afb8c133; --buttonCounter-invisible-bgColor-rest: #afb8c133; --buttonCounter-primary-bgColor-rest: #002d1133; - --buttonCounter-outline-bgColor-rest: #0969da1a; + --buttonCounter-outline-bgColor-rest: #c9f04d1a; --buttonCounter-outline-bgColor-hover: #ffffff33; - --buttonCounter-outline-bgColor-disabled: #0969da0d; + --buttonCounter-outline-bgColor-disabled: #c9f04d0d; --buttonCounter-outline-fgColor-rest: #0550ae; --buttonCounter-outline-fgColor-hover: #ffffff; --buttonCounter-outline-fgColor-disabled: #0969da80; @@ -876,7 +877,7 @@ --underlineNav-borderColor-active: #fd8c73; --underlineNav-borderColor-hover: #afb8c133; --underlineNav-iconColor-rest: #636c76; - --selection-bgColor: #0969da33; + --selection-bgColor: #c9f04d33; --card-bgColor: #ffffff; --label-green-bgColor-rest: #caf7ca; --label-green-bgColor-hover: #9ceda0; @@ -1022,7 +1023,7 @@ --bgColor-neutral-muted: #afb8c133; --bgColor-neutral-emphasis: #6e7781; --bgColor-accent-muted: #ddf4ff; - --bgColor-accent-emphasis: #0969da; + --bgColor-accent-emphasis: #c9f04d; --bgColor-success-muted: #f3f8f6; --bgColor-success-emphasis: #1c8e75; --bgColor-attention-muted: #fff8c5; @@ -1046,6 +1047,7 @@ --borderColor-emphasis: #6e7781; --borderColor-disabled: #eaeef2b3; --borderColor-transparent: #ffffff00; + --borderColor-translucent: #1f232826; --borderColor-neutral-muted: #afb8c133; --borderColor-neutral-emphasis: #6e7781; --borderColor-accent-muted: #54aeff66; diff --git a/dist/css/functional/typography/typography.css b/dist/css/functional/typography/typography.css index a864d8970..cfe8cfebd 100644 --- a/dist/css/functional/typography/typography.css +++ b/dist/css/functional/typography/typography.css @@ -22,6 +22,7 @@ --text-display-size: 2.5rem; --text-display-lineBoxHeight: 1.4; --fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace; + --fontStack-sansSerifDisplay: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; --fontStack-sansSerif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; --fontStack-system: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; --text-codeInline-weight: 400; @@ -39,9 +40,9 @@ --text-body-shorthand-small: var(--text-body-weight) var(--text-body-size-small) / var(--text-body-lineHeight-small) var(--fontStack-sansSerif); --text-body-shorthand-medium: var(--text-body-weight) var(--text-body-size-medium) / var(--text-body-lineHeight-medium) var(--fontStack-sansSerif); --text-body-shorthand-large: var(--text-body-weight) var(--text-body-size-large) / var(--text-body-lineHeight-large) var(--fontStack-sansSerif); - --text-subtitle-shorthand: var(--text-subtitle-weight) var(--text-subtitle-size) / var(--text-subtitle-lineHeight) var(--fontStack-sansSerif); + --text-subtitle-shorthand: var(--text-subtitle-weight) var(--text-subtitle-size) / var(--text-subtitle-lineHeight) var(--fontStack-sansSerifDisplay); --text-title-shorthand-small: var(--text-title-weight-small) var(--text-title-size-small) / var(--text-title-lineHeight-small) var(--fontStack-sansSerif); - --text-title-shorthand-medium: var(--text-title-weight-medium) var(--text-title-size-medium) / var(--text-title-lineHeight-medium) var(--fontStack-sansSerif); - --text-title-shorthand-large: var(--text-title-weight-large) var(--text-title-size-large) / var(--text-title-lineHeight-large) var(--fontStack-sansSerif); - --text-display-shorthand: var(--text-display-weight) var(--text-display-size) / var(--text-display-lineHeight) var(--fontStack-sansSerif); + --text-title-shorthand-medium: var(--text-title-weight-medium) var(--text-title-size-medium) / var(--text-title-lineHeight-medium) var(--fontStack-sansSerifDisplay); + --text-title-shorthand-large: var(--text-title-weight-large) var(--text-title-size-large) / var(--text-title-lineHeight-large) var(--fontStack-sansSerifDisplay); + --text-display-shorthand: var(--text-display-weight) var(--text-display-size) / var(--text-display-lineHeight) var(--fontStack-sansSerifDisplay); } diff --git a/dist/docs/base/typography/typography.json b/dist/docs/base/typography/typography.json index 34ca65997..6332d540e 100644 --- a/dist/docs/base/typography/typography.json +++ b/dist/docs/base/typography/typography.json @@ -5,7 +5,7 @@ "$extensions": { "org.primer.figma": { "collection": "base/typography", - "scopes": ["all"] + "scopes": ["fontWeight"] } }, "filePath": "src/tokens/base/typography/typography.json", @@ -16,7 +16,7 @@ "$extensions": { "org.primer.figma": { "collection": "base/typography", - "scopes": ["all"] + "scopes": ["fontWeight"] } } }, @@ -30,7 +30,7 @@ "$extensions": { "org.primer.figma": { "collection": "base/typography", - "scopes": ["all"] + "scopes": ["fontWeight"] } }, "filePath": "src/tokens/base/typography/typography.json", @@ -41,7 +41,7 @@ "$extensions": { "org.primer.figma": { "collection": "base/typography", - "scopes": ["all"] + "scopes": ["fontWeight"] } } }, @@ -55,7 +55,7 @@ "$extensions": { "org.primer.figma": { "collection": "base/typography", - "scopes": ["all"] + "scopes": ["fontWeight"] } }, "filePath": "src/tokens/base/typography/typography.json", @@ -66,7 +66,7 @@ "$extensions": { "org.primer.figma": { "collection": "base/typography", - "scopes": ["all"] + "scopes": ["fontWeight"] } } }, @@ -80,7 +80,7 @@ "$extensions": { "org.primer.figma": { "collection": "base/typography", - "scopes": ["all"] + "scopes": ["fontWeight"] } }, "filePath": "src/tokens/base/typography/typography.json", @@ -91,7 +91,7 @@ "$extensions": { "org.primer.figma": { "collection": "base/typography", - "scopes": ["all"] + "scopes": ["fontWeight"] } } }, diff --git a/dist/docs/functional/themes/dark-colorblind.json b/dist/docs/functional/themes/dark-colorblind.json index 99e5ad5bf..dc4e08b91 100644 --- a/dist/docs/functional/themes/dark-colorblind.json +++ b/dist/docs/functional/themes/dark-colorblind.json @@ -4558,11 +4558,10 @@ "scopes": ["borderColor"] } }, - "alpha": 0.15, "filePath": "src/tokens/functional/color/dark/patterns-dark.json5", "isSource": true, "original": { - "value": "{base.color.white}", + "value": "{borderColor.translucent}", "$type": "color", "$extensions": { "org.primer.figma": { @@ -4571,8 +4570,7 @@ "group": "component (internal)", "scopes": ["borderColor"] } - }, - "alpha": 0.15 + } }, "name": "avatar-borderColor", "attributes": {}, @@ -4863,8 +4861,12 @@ "path": ["control", "fgColor", "rest"] }, "control-fgColor-placeholder": { - "value": "#484f58", + "value": "#858e98", "$type": "color", + "mix": { + "color": "#6e7681", + "weight": 0.2 + }, "$extensions": { "org.primer.figma": { "collection": "mode", @@ -4876,8 +4878,12 @@ "filePath": "src/tokens/functional/color/dark/patterns-dark.json5", "isSource": true, "original": { - "value": "{base.color.neutral.5}", + "value": "{base.color.neutral.3}", "$type": "color", + "mix": { + "color": "{base.color.neutral.4}", + "weight": 0.2 + }, "$extensions": { "org.primer.figma": { "collection": "mode", @@ -14416,6 +14422,37 @@ "attributes": {}, "path": ["borderColor", "transparent"] }, + "borderColor-translucent": { + "value": "#ffffff26", + "$type": "color", + "$extensions": { + "org.primer.figma": { + "collection": "mode", + "mode": "dark", + "group": "component (internal)", + "scopes": ["borderColor"] + } + }, + "alpha": 0.15, + "filePath": "src/tokens/functional/color/dark/primitives-dark.json5", + "isSource": true, + "original": { + "value": "{base.color.white}", + "$type": "color", + "$extensions": { + "org.primer.figma": { + "collection": "mode", + "mode": "dark", + "group": "component (internal)", + "scopes": ["borderColor"] + } + }, + "alpha": 0.15 + }, + "name": "borderColor-translucent", + "attributes": {}, + "path": ["borderColor", "translucent"] + }, "borderColor-neutral-muted": { "value": "#6e768166", "$type": "color", diff --git a/dist/docs/functional/themes/dark-dimmed.json b/dist/docs/functional/themes/dark-dimmed.json index cb73490f7..df9b0a312 100644 --- a/dist/docs/functional/themes/dark-dimmed.json +++ b/dist/docs/functional/themes/dark-dimmed.json @@ -4558,11 +4558,10 @@ "scopes": ["borderColor"] } }, - "alpha": 0.15, "filePath": "src/tokens/functional/color/dark/patterns-dark.json5", "isSource": true, "original": { - "value": "{base.color.white}", + "value": "{borderColor.translucent}", "$type": "color", "$extensions": { "org.primer.figma": { @@ -4571,8 +4570,7 @@ "group": "component (internal)", "scopes": ["borderColor"] } - }, - "alpha": 0.15 + } }, "name": "avatar-borderColor", "attributes": {}, @@ -4863,8 +4861,12 @@ "path": ["control", "fgColor", "rest"] }, "control-fgColor-placeholder": { - "value": "#545d68", + "value": "#727f8c", "$type": "color", + "mix": { + "color": "#636e7b", + "weight": 0.2 + }, "$extensions": { "org.primer.figma": { "collection": "mode", @@ -4876,8 +4878,12 @@ "filePath": "src/tokens/functional/color/dark/patterns-dark.json5", "isSource": true, "original": { - "value": "{base.color.neutral.5}", + "value": "{base.color.neutral.3}", "$type": "color", + "mix": { + "color": "{base.color.neutral.4}", + "weight": 0.2 + }, "$extensions": { "org.primer.figma": { "collection": "mode", @@ -14422,6 +14428,37 @@ "attributes": {}, "path": ["borderColor", "transparent"] }, + "borderColor-translucent": { + "value": "#cdd9e526", + "$type": "color", + "$extensions": { + "org.primer.figma": { + "collection": "mode", + "mode": "dark", + "group": "component (internal)", + "scopes": ["borderColor"] + } + }, + "alpha": 0.15, + "filePath": "src/tokens/functional/color/dark/primitives-dark.json5", + "isSource": true, + "original": { + "value": "{base.color.white}", + "$type": "color", + "$extensions": { + "org.primer.figma": { + "collection": "mode", + "mode": "dark", + "group": "component (internal)", + "scopes": ["borderColor"] + } + }, + "alpha": 0.15 + }, + "name": "borderColor-translucent", + "attributes": {}, + "path": ["borderColor", "translucent"] + }, "borderColor-neutral-muted": { "value": "#636e7b66", "$type": "color", diff --git a/dist/docs/functional/themes/dark-high-contrast.json b/dist/docs/functional/themes/dark-high-contrast.json index 8e454c13f..02b181495 100644 --- a/dist/docs/functional/themes/dark-high-contrast.json +++ b/dist/docs/functional/themes/dark-high-contrast.json @@ -4562,9 +4562,9 @@ "scopes": ["borderColor"] } }, - "alpha": 0.9, "filePath": "src/tokens/functional/color/dark/overrides/dark.high-contrast.json5", "isSource": true, + "alpha": 0.9, "original": { "value": "{base.color.white}", "$type": "color", @@ -4867,8 +4867,12 @@ "path": ["control", "fgColor", "rest"] }, "control-fgColor-placeholder": { - "value": "#7a828e", + "value": "#b7bec7", "$type": "color", + "mix": { + "color": "#9ea7b3", + "weight": 0.2 + }, "$extensions": { "org.primer.figma": { "collection": "mode", @@ -4880,8 +4884,12 @@ "filePath": "src/tokens/functional/color/dark/patterns-dark.json5", "isSource": true, "original": { - "value": "{base.color.neutral.5}", + "value": "{base.color.neutral.3}", "$type": "color", + "mix": { + "color": "{base.color.neutral.4}", + "weight": 0.2 + }, "$extensions": { "org.primer.figma": { "collection": "mode", @@ -14438,6 +14446,37 @@ "attributes": {}, "path": ["borderColor", "transparent"] }, + "borderColor-translucent": { + "value": "#7a828e", + "$type": "color", + "$extensions": { + "org.primer.figma": { + "collection": "mode", + "mode": "dark", + "group": "component (internal)", + "scopes": ["borderColor"] + } + }, + "alpha": 1, + "filePath": "src/tokens/functional/color/dark/overrides/dark.high-contrast.json5", + "isSource": true, + "original": { + "value": "{base.color.neutral.5}", + "$type": "color", + "$extensions": { + "org.primer.figma": { + "collection": "mode", + "mode": "dark", + "group": "component (internal)", + "scopes": ["borderColor"] + } + }, + "alpha": 1 + }, + "name": "borderColor-translucent", + "attributes": {}, + "path": ["borderColor", "translucent"] + }, "borderColor-neutral-muted": { "value": "#9ea7b3", "$type": "color", diff --git a/dist/docs/functional/themes/dark-tritanopia.json b/dist/docs/functional/themes/dark-tritanopia.json index fba2ff28f..88a4d5f65 100644 --- a/dist/docs/functional/themes/dark-tritanopia.json +++ b/dist/docs/functional/themes/dark-tritanopia.json @@ -4558,11 +4558,10 @@ "scopes": ["borderColor"] } }, - "alpha": 0.15, "filePath": "src/tokens/functional/color/dark/patterns-dark.json5", "isSource": true, "original": { - "value": "{base.color.white}", + "value": "{borderColor.translucent}", "$type": "color", "$extensions": { "org.primer.figma": { @@ -4571,8 +4570,7 @@ "group": "component (internal)", "scopes": ["borderColor"] } - }, - "alpha": 0.15 + } }, "name": "avatar-borderColor", "attributes": {}, @@ -4863,8 +4861,12 @@ "path": ["control", "fgColor", "rest"] }, "control-fgColor-placeholder": { - "value": "#484f58", + "value": "#858e98", "$type": "color", + "mix": { + "color": "#6e7681", + "weight": 0.2 + }, "$extensions": { "org.primer.figma": { "collection": "mode", @@ -4876,8 +4878,12 @@ "filePath": "src/tokens/functional/color/dark/patterns-dark.json5", "isSource": true, "original": { - "value": "{base.color.neutral.5}", + "value": "{base.color.neutral.3}", "$type": "color", + "mix": { + "color": "{base.color.neutral.4}", + "weight": 0.2 + }, "$extensions": { "org.primer.figma": { "collection": "mode", @@ -14422,6 +14428,37 @@ "attributes": {}, "path": ["borderColor", "transparent"] }, + "borderColor-translucent": { + "value": "#ffffff26", + "$type": "color", + "$extensions": { + "org.primer.figma": { + "collection": "mode", + "mode": "dark", + "group": "component (internal)", + "scopes": ["borderColor"] + } + }, + "alpha": 0.15, + "filePath": "src/tokens/functional/color/dark/primitives-dark.json5", + "isSource": true, + "original": { + "value": "{base.color.white}", + "$type": "color", + "$extensions": { + "org.primer.figma": { + "collection": "mode", + "mode": "dark", + "group": "component (internal)", + "scopes": ["borderColor"] + } + }, + "alpha": 0.15 + }, + "name": "borderColor-translucent", + "attributes": {}, + "path": ["borderColor", "translucent"] + }, "borderColor-neutral-muted": { "value": "#6e768166", "$type": "color", diff --git a/dist/docs/functional/themes/dark.json b/dist/docs/functional/themes/dark.json index e272d2dbc..2432faf49 100644 --- a/dist/docs/functional/themes/dark.json +++ b/dist/docs/functional/themes/dark.json @@ -4558,11 +4558,10 @@ "scopes": ["borderColor"] } }, - "alpha": 0.15, "filePath": "src/tokens/functional/color/dark/patterns-dark.json5", "isSource": true, "original": { - "value": "{base.color.white}", + "value": "{borderColor.translucent}", "$type": "color", "$extensions": { "org.primer.figma": { @@ -4571,8 +4570,7 @@ "group": "component (internal)", "scopes": ["borderColor"] } - }, - "alpha": 0.15 + } }, "name": "avatar-borderColor", "attributes": {}, @@ -4863,8 +4861,12 @@ "path": ["control", "fgColor", "rest"] }, "control-fgColor-placeholder": { - "value": "#484f58", + "value": "#858e98", "$type": "color", + "mix": { + "color": "#6e7681", + "weight": 0.2 + }, "$extensions": { "org.primer.figma": { "collection": "mode", @@ -4876,8 +4878,12 @@ "filePath": "src/tokens/functional/color/dark/patterns-dark.json5", "isSource": true, "original": { - "value": "{base.color.neutral.5}", + "value": "{base.color.neutral.3}", "$type": "color", + "mix": { + "color": "{base.color.neutral.4}", + "weight": 0.2 + }, "$extensions": { "org.primer.figma": { "collection": "mode", @@ -14422,6 +14428,37 @@ "attributes": {}, "path": ["borderColor", "transparent"] }, + "borderColor-translucent": { + "value": "#ffffff26", + "$type": "color", + "$extensions": { + "org.primer.figma": { + "collection": "mode", + "mode": "dark", + "group": "component (internal)", + "scopes": ["borderColor"] + } + }, + "alpha": 0.15, + "filePath": "src/tokens/functional/color/dark/primitives-dark.json5", + "isSource": true, + "original": { + "value": "{base.color.white}", + "$type": "color", + "$extensions": { + "org.primer.figma": { + "collection": "mode", + "mode": "dark", + "group": "component (internal)", + "scopes": ["borderColor"] + } + }, + "alpha": 0.15 + }, + "name": "borderColor-translucent", + "attributes": {}, + "path": ["borderColor", "translucent"] + }, "borderColor-neutral-muted": { "value": "#6e768166", "$type": "color", diff --git a/dist/docs/functional/themes/light-colorblind.json b/dist/docs/functional/themes/light-colorblind.json index db163b0fc..fb961cb09 100644 --- a/dist/docs/functional/themes/light-colorblind.json +++ b/dist/docs/functional/themes/light-colorblind.json @@ -4552,11 +4552,10 @@ "scopes": ["borderColor"] } }, - "alpha": 0.15, "filePath": "src/tokens/functional/color/light/patterns-light.json5", "isSource": true, "original": { - "value": "{base.color.black}", + "value": "{borderColor.translucent}", "$type": "color", "$extensions": { "org.primer.figma": { @@ -4565,8 +4564,7 @@ "group": "component (internal)", "scopes": ["borderColor"] } - }, - "alpha": 0.15 + } }, "name": "avatar-borderColor", "attributes": {}, @@ -4857,8 +4855,12 @@ "path": ["control", "fgColor", "rest"] }, "control-fgColor-placeholder": { - "value": "#6e7781", + "value": "#69727c", "$type": "color", + "mix": { + "color": "#57606a", + "weight": 0.2 + }, "$extensions": { "org.primer.figma": { "collection": "mode", @@ -4872,6 +4874,10 @@ "original": { "value": "{base.color.neutral.5}", "$type": "color", + "mix": { + "color": "{base.color.neutral.6}", + "weight": 0.2 + }, "$extensions": { "org.primer.figma": { "collection": "mode", @@ -5511,7 +5517,7 @@ "path": ["control", "danger", "bgColor", "active"] }, "control-checked-bgColor-rest": { - "value": "#0969da", + "value": "#c9f04d", "$type": "color", "$extensions": { "org.primer.figma": { @@ -5540,7 +5546,7 @@ "path": ["control", "checked", "bgColor", "rest"] }, "control-checked-bgColor-hover": { - "value": "#0860ca", + "value": "#a1cc59", "$type": "color", "$extensions": { "org.primer.figma": { @@ -5577,7 +5583,7 @@ "path": ["control", "checked", "bgColor", "hover"] }, "control-checked-bgColor-active": { - "value": "#0757ba", + "value": "#7aa866", "$type": "color", "$extensions": { "org.primer.figma": { @@ -5701,7 +5707,7 @@ "path": ["control", "checked", "fgColor", "disabled"] }, "control-checked-borderColor-rest": { - "value": "#0969da", + "value": "#c9f04d", "$type": "color", "$extensions": { "org.primer.figma": { @@ -5730,7 +5736,7 @@ "path": ["control", "checked", "borderColor", "rest"] }, "control-checked-borderColor-hover": { - "value": "#0860ca", + "value": "#a1cc59", "$type": "color", "$extensions": { "org.primer.figma": { @@ -5767,7 +5773,7 @@ "path": ["control", "checked", "borderColor", "hover"] }, "control-checked-borderColor-active": { - "value": "#0757ba", + "value": "#7aa866", "$type": "color", "$extensions": { "org.primer.figma": { @@ -6226,7 +6232,7 @@ "path": ["controlKnob", "borderColor", "disabled"] }, "controlKnob-borderColor-checked": { - "value": "#0969da", + "value": "#c9f04d", "$type": "color", "$extensions": { "org.primer.figma": { @@ -7505,7 +7511,7 @@ "path": ["button", "outline", "bgColor", "rest"] }, "button-outline-bgColor-hover": { - "value": "#0969da", + "value": "#c9f04d", "$type": "color", "$extensions": { "org.primer.figma": { @@ -7534,7 +7540,7 @@ "path": ["button", "outline", "bgColor", "hover"] }, "button-outline-bgColor-active": { - "value": "#0757ba", + "value": "#7aa866", "$type": "color", "$extensions": { "org.primer.figma": { @@ -8299,7 +8305,7 @@ "path": ["buttonCounter", "primary", "bgColor", "rest"] }, "buttonCounter-outline-bgColor-rest": { - "value": "#0969da1a", + "value": "#c9f04d1a", "$type": "color", "$extensions": { "org.primer.figma": { @@ -8361,7 +8367,7 @@ "path": ["buttonCounter", "outline", "bgColor", "hover"] }, "buttonCounter-outline-bgColor-disabled": { - "value": "#0969da0d", + "value": "#c9f04d0d", "$type": "color", "$extensions": { "org.primer.figma": { @@ -9204,7 +9210,7 @@ "path": ["underlineNav", "iconColor", "rest"] }, "selection-bgColor": { - "value": "#0969da33", + "value": "#c9f04d33", "$type": "color", "$extensions": { "org.primer.figma": { @@ -13580,7 +13586,7 @@ "path": ["bgColor", "accent", "muted"] }, "bgColor-accent-emphasis": { - "value": "#0969da", + "value": "#c9f04d", "$type": "color", "$extensions": { "org.primer.figma": { @@ -13596,7 +13602,7 @@ "filePath": "src/tokens/functional/color/light/primitives-light.json5", "isSource": true, "original": { - "value": "{base.color.blue.5}", + "value": "{prov.color.neonGreen}", "$type": "color", "$extensions": { "org.primer.figma": { @@ -14415,6 +14421,37 @@ "attributes": {}, "path": ["borderColor", "transparent"] }, + "borderColor-translucent": { + "value": "#1f232826", + "$type": "color", + "$extensions": { + "org.primer.figma": { + "collection": "mode", + "mode": "light", + "group": "semantic", + "scopes": ["borderColor"] + } + }, + "alpha": 0.15, + "filePath": "src/tokens/functional/color/light/primitives-light.json5", + "isSource": true, + "original": { + "value": "{base.color.black}", + "$type": "color", + "$extensions": { + "org.primer.figma": { + "collection": "mode", + "mode": "light", + "group": "semantic", + "scopes": ["borderColor"] + } + }, + "alpha": 0.15 + }, + "name": "borderColor-translucent", + "attributes": {}, + "path": ["borderColor", "translucent"] + }, "borderColor-neutral-muted": { "value": "#afb8c133", "$type": "color", diff --git a/dist/docs/functional/themes/light-high-contrast.json b/dist/docs/functional/themes/light-high-contrast.json index 6cdbf62e8..dec900714 100644 --- a/dist/docs/functional/themes/light-high-contrast.json +++ b/dist/docs/functional/themes/light-high-contrast.json @@ -4550,9 +4550,9 @@ "scopes": ["borderColor"] } }, - "alpha": 0.9, "filePath": "src/tokens/functional/color/light/overrides/light.high-contrast.json5", "isSource": true, + "alpha": 0.9, "original": { "value": "{base.color.black}", "$type": "color", @@ -4855,8 +4855,12 @@ "path": ["control", "fgColor", "rest"] }, "control-fgColor-placeholder": { - "value": "#66707b", + "value": "#616a75", "$type": "color", + "mix": { + "color": "#4b535d", + "weight": 0.2 + }, "$extensions": { "org.primer.figma": { "collection": "mode", @@ -4870,6 +4874,10 @@ "original": { "value": "{base.color.neutral.5}", "$type": "color", + "mix": { + "color": "{base.color.neutral.6}", + "weight": 0.2 + }, "$extensions": { "org.primer.figma": { "collection": "mode", @@ -5519,7 +5527,7 @@ "path": ["control", "danger", "bgColor", "active"] }, "control-checked-bgColor-rest": { - "value": "#0349b4", + "value": "#c9f04d", "$type": "color", "$extensions": { "org.primer.figma": { @@ -5548,7 +5556,7 @@ "path": ["control", "checked", "bgColor", "rest"] }, "control-checked-bgColor-hover": { - "value": "#0344a8", + "value": "#a1c956", "$type": "color", "$extensions": { "org.primer.figma": { @@ -5585,7 +5593,7 @@ "path": ["control", "checked", "bgColor", "hover"] }, "control-checked-bgColor-active": { - "value": "#033f9d", + "value": "#79a35f", "$type": "color", "$extensions": { "org.primer.figma": { @@ -5709,7 +5717,7 @@ "path": ["control", "checked", "fgColor", "disabled"] }, "control-checked-borderColor-rest": { - "value": "#0349b4", + "value": "#c9f04d", "$type": "color", "$extensions": { "org.primer.figma": { @@ -5738,7 +5746,7 @@ "path": ["control", "checked", "borderColor", "rest"] }, "control-checked-borderColor-hover": { - "value": "#0344a8", + "value": "#a1c956", "$type": "color", "$extensions": { "org.primer.figma": { @@ -5775,7 +5783,7 @@ "path": ["control", "checked", "borderColor", "hover"] }, "control-checked-borderColor-active": { - "value": "#033f9d", + "value": "#79a35f", "$type": "color", "$extensions": { "org.primer.figma": { @@ -6234,7 +6242,7 @@ "path": ["controlKnob", "borderColor", "disabled"] }, "controlKnob-borderColor-checked": { - "value": "#0349b4", + "value": "#c9f04d", "$type": "color", "$extensions": { "org.primer.figma": { @@ -7521,7 +7529,7 @@ "path": ["button", "outline", "bgColor", "rest"] }, "button-outline-bgColor-hover": { - "value": "#0349b4", + "value": "#c9f04d", "$type": "color", "$extensions": { "org.primer.figma": { @@ -7550,7 +7558,7 @@ "path": ["button", "outline", "bgColor", "hover"] }, "button-outline-bgColor-active": { - "value": "#033f9d", + "value": "#79a35f", "$type": "color", "$extensions": { "org.primer.figma": { @@ -8319,7 +8327,7 @@ "path": ["buttonCounter", "primary", "bgColor", "rest"] }, "buttonCounter-outline-bgColor-rest": { - "value": "#0349b41a", + "value": "#c9f04d1a", "$type": "color", "$extensions": { "org.primer.figma": { @@ -8381,7 +8389,7 @@ "path": ["buttonCounter", "outline", "bgColor", "hover"] }, "buttonCounter-outline-bgColor-disabled": { - "value": "#0349b40d", + "value": "#c9f04d0d", "$type": "color", "$extensions": { "org.primer.figma": { @@ -9224,7 +9232,7 @@ "path": ["underlineNav", "iconColor", "rest"] }, "selection-bgColor": { - "value": "#0349b433", + "value": "#c9f04d33", "$type": "color", "$extensions": { "org.primer.figma": { @@ -13594,7 +13602,7 @@ "path": ["bgColor", "accent", "muted"] }, "bgColor-accent-emphasis": { - "value": "#0349b4", + "value": "#c9f04d", "$type": "color", "$extensions": { "org.primer.figma": { @@ -13610,7 +13618,7 @@ "filePath": "src/tokens/functional/color/light/primitives-light.json5", "isSource": true, "original": { - "value": "{base.color.blue.5}", + "value": "{prov.color.neonGreen}", "$type": "color", "$extensions": { "org.primer.figma": { @@ -14419,6 +14427,37 @@ "attributes": {}, "path": ["borderColor", "transparent"] }, + "borderColor-translucent": { + "value": "#20252c", + "$type": "color", + "$extensions": { + "org.primer.figma": { + "collection": "mode", + "mode": "light", + "group": "semantic", + "scopes": ["borderColor"] + } + }, + "alpha": 1, + "filePath": "src/tokens/functional/color/light/overrides/light.high-contrast.json5", + "isSource": true, + "original": { + "value": "{base.color.neutral.8}", + "$type": "color", + "$extensions": { + "org.primer.figma": { + "collection": "mode", + "mode": "light", + "group": "semantic", + "scopes": ["borderColor"] + } + }, + "alpha": 1 + }, + "name": "borderColor-translucent", + "attributes": {}, + "path": ["borderColor", "translucent"] + }, "borderColor-neutral-muted": { "value": "#88929d", "$type": "color", diff --git a/dist/docs/functional/themes/light-tritanopia.json b/dist/docs/functional/themes/light-tritanopia.json index 384f417a4..9c789e97c 100644 --- a/dist/docs/functional/themes/light-tritanopia.json +++ b/dist/docs/functional/themes/light-tritanopia.json @@ -4548,11 +4548,10 @@ "scopes": ["borderColor"] } }, - "alpha": 0.15, "filePath": "src/tokens/functional/color/light/patterns-light.json5", "isSource": true, "original": { - "value": "{base.color.black}", + "value": "{borderColor.translucent}", "$type": "color", "$extensions": { "org.primer.figma": { @@ -4561,8 +4560,7 @@ "group": "component (internal)", "scopes": ["borderColor"] } - }, - "alpha": 0.15 + } }, "name": "avatar-borderColor", "attributes": {}, @@ -4853,8 +4851,12 @@ "path": ["control", "fgColor", "rest"] }, "control-fgColor-placeholder": { - "value": "#6e7781", + "value": "#69727c", "$type": "color", + "mix": { + "color": "#57606a", + "weight": 0.2 + }, "$extensions": { "org.primer.figma": { "collection": "mode", @@ -4868,6 +4870,10 @@ "original": { "value": "{base.color.neutral.5}", "$type": "color", + "mix": { + "color": "{base.color.neutral.6}", + "weight": 0.2 + }, "$extensions": { "org.primer.figma": { "collection": "mode", @@ -5507,7 +5513,7 @@ "path": ["control", "danger", "bgColor", "active"] }, "control-checked-bgColor-rest": { - "value": "#0969da", + "value": "#c9f04d", "$type": "color", "$extensions": { "org.primer.figma": { @@ -5536,7 +5542,7 @@ "path": ["control", "checked", "bgColor", "rest"] }, "control-checked-bgColor-hover": { - "value": "#0860ca", + "value": "#a1cc59", "$type": "color", "$extensions": { "org.primer.figma": { @@ -5573,7 +5579,7 @@ "path": ["control", "checked", "bgColor", "hover"] }, "control-checked-bgColor-active": { - "value": "#0757ba", + "value": "#7aa866", "$type": "color", "$extensions": { "org.primer.figma": { @@ -5697,7 +5703,7 @@ "path": ["control", "checked", "fgColor", "disabled"] }, "control-checked-borderColor-rest": { - "value": "#0969da", + "value": "#c9f04d", "$type": "color", "$extensions": { "org.primer.figma": { @@ -5726,7 +5732,7 @@ "path": ["control", "checked", "borderColor", "rest"] }, "control-checked-borderColor-hover": { - "value": "#0860ca", + "value": "#a1cc59", "$type": "color", "$extensions": { "org.primer.figma": { @@ -5763,7 +5769,7 @@ "path": ["control", "checked", "borderColor", "hover"] }, "control-checked-borderColor-active": { - "value": "#0757ba", + "value": "#7aa866", "$type": "color", "$extensions": { "org.primer.figma": { @@ -6222,7 +6228,7 @@ "path": ["controlKnob", "borderColor", "disabled"] }, "controlKnob-borderColor-checked": { - "value": "#0969da", + "value": "#c9f04d", "$type": "color", "$extensions": { "org.primer.figma": { @@ -7501,7 +7507,7 @@ "path": ["button", "outline", "bgColor", "rest"] }, "button-outline-bgColor-hover": { - "value": "#0969da", + "value": "#c9f04d", "$type": "color", "$extensions": { "org.primer.figma": { @@ -7530,7 +7536,7 @@ "path": ["button", "outline", "bgColor", "hover"] }, "button-outline-bgColor-active": { - "value": "#0757ba", + "value": "#7aa866", "$type": "color", "$extensions": { "org.primer.figma": { @@ -8295,7 +8301,7 @@ "path": ["buttonCounter", "primary", "bgColor", "rest"] }, "buttonCounter-outline-bgColor-rest": { - "value": "#0969da1a", + "value": "#c9f04d1a", "$type": "color", "$extensions": { "org.primer.figma": { @@ -8357,7 +8363,7 @@ "path": ["buttonCounter", "outline", "bgColor", "hover"] }, "buttonCounter-outline-bgColor-disabled": { - "value": "#0969da0d", + "value": "#c9f04d0d", "$type": "color", "$extensions": { "org.primer.figma": { @@ -9200,7 +9206,7 @@ "path": ["underlineNav", "iconColor", "rest"] }, "selection-bgColor": { - "value": "#0969da33", + "value": "#c9f04d33", "$type": "color", "$extensions": { "org.primer.figma": { @@ -13576,7 +13582,7 @@ "path": ["bgColor", "accent", "muted"] }, "bgColor-accent-emphasis": { - "value": "#0969da", + "value": "#c9f04d", "$type": "color", "$extensions": { "org.primer.figma": { @@ -13592,7 +13598,7 @@ "filePath": "src/tokens/functional/color/light/primitives-light.json5", "isSource": true, "original": { - "value": "{base.color.blue.5}", + "value": "{prov.color.neonGreen}", "$type": "color", "$extensions": { "org.primer.figma": { @@ -14407,6 +14413,37 @@ "attributes": {}, "path": ["borderColor", "transparent"] }, + "borderColor-translucent": { + "value": "#1f232826", + "$type": "color", + "$extensions": { + "org.primer.figma": { + "collection": "mode", + "mode": "light", + "group": "semantic", + "scopes": ["borderColor"] + } + }, + "alpha": 0.15, + "filePath": "src/tokens/functional/color/light/primitives-light.json5", + "isSource": true, + "original": { + "value": "{base.color.black}", + "$type": "color", + "$extensions": { + "org.primer.figma": { + "collection": "mode", + "mode": "light", + "group": "semantic", + "scopes": ["borderColor"] + } + }, + "alpha": 0.15 + }, + "name": "borderColor-translucent", + "attributes": {}, + "path": ["borderColor", "translucent"] + }, "borderColor-neutral-muted": { "value": "#afb8c133", "$type": "color", diff --git a/dist/docs/functional/themes/light.json b/dist/docs/functional/themes/light.json index 3bfc4d9a9..c812b16bb 100644 --- a/dist/docs/functional/themes/light.json +++ b/dist/docs/functional/themes/light.json @@ -4548,11 +4548,10 @@ "scopes": ["borderColor"] } }, - "alpha": 0.15, "filePath": "src/tokens/functional/color/light/patterns-light.json5", "isSource": true, "original": { - "value": "{base.color.black}", + "value": "{borderColor.translucent}", "$type": "color", "$extensions": { "org.primer.figma": { @@ -4561,8 +4560,7 @@ "group": "component (internal)", "scopes": ["borderColor"] } - }, - "alpha": 0.15 + } }, "name": "avatar-borderColor", "attributes": {}, @@ -4853,8 +4851,12 @@ "path": ["control", "fgColor", "rest"] }, "control-fgColor-placeholder": { - "value": "#6e7781", + "value": "#69727c", "$type": "color", + "mix": { + "color": "#57606a", + "weight": 0.2 + }, "$extensions": { "org.primer.figma": { "collection": "mode", @@ -4868,6 +4870,10 @@ "original": { "value": "{base.color.neutral.5}", "$type": "color", + "mix": { + "color": "{base.color.neutral.6}", + "weight": 0.2 + }, "$extensions": { "org.primer.figma": { "collection": "mode", @@ -5507,7 +5513,7 @@ "path": ["control", "danger", "bgColor", "active"] }, "control-checked-bgColor-rest": { - "value": "#0969da", + "value": "#c9f04d", "$type": "color", "$extensions": { "org.primer.figma": { @@ -5536,7 +5542,7 @@ "path": ["control", "checked", "bgColor", "rest"] }, "control-checked-bgColor-hover": { - "value": "#0860ca", + "value": "#a1cc59", "$type": "color", "$extensions": { "org.primer.figma": { @@ -5573,7 +5579,7 @@ "path": ["control", "checked", "bgColor", "hover"] }, "control-checked-bgColor-active": { - "value": "#0757ba", + "value": "#7aa866", "$type": "color", "$extensions": { "org.primer.figma": { @@ -5697,7 +5703,7 @@ "path": ["control", "checked", "fgColor", "disabled"] }, "control-checked-borderColor-rest": { - "value": "#0969da", + "value": "#c9f04d", "$type": "color", "$extensions": { "org.primer.figma": { @@ -5726,7 +5732,7 @@ "path": ["control", "checked", "borderColor", "rest"] }, "control-checked-borderColor-hover": { - "value": "#0860ca", + "value": "#a1cc59", "$type": "color", "$extensions": { "org.primer.figma": { @@ -5763,7 +5769,7 @@ "path": ["control", "checked", "borderColor", "hover"] }, "control-checked-borderColor-active": { - "value": "#0757ba", + "value": "#7aa866", "$type": "color", "$extensions": { "org.primer.figma": { @@ -6222,7 +6228,7 @@ "path": ["controlKnob", "borderColor", "disabled"] }, "controlKnob-borderColor-checked": { - "value": "#0969da", + "value": "#c9f04d", "$type": "color", "$extensions": { "org.primer.figma": { @@ -7501,7 +7507,7 @@ "path": ["button", "outline", "bgColor", "rest"] }, "button-outline-bgColor-hover": { - "value": "#0969da", + "value": "#c9f04d", "$type": "color", "$extensions": { "org.primer.figma": { @@ -7530,7 +7536,7 @@ "path": ["button", "outline", "bgColor", "hover"] }, "button-outline-bgColor-active": { - "value": "#0757ba", + "value": "#7aa866", "$type": "color", "$extensions": { "org.primer.figma": { @@ -8295,7 +8301,7 @@ "path": ["buttonCounter", "primary", "bgColor", "rest"] }, "buttonCounter-outline-bgColor-rest": { - "value": "#0969da1a", + "value": "#c9f04d1a", "$type": "color", "$extensions": { "org.primer.figma": { @@ -8357,7 +8363,7 @@ "path": ["buttonCounter", "outline", "bgColor", "hover"] }, "buttonCounter-outline-bgColor-disabled": { - "value": "#0969da0d", + "value": "#c9f04d0d", "$type": "color", "$extensions": { "org.primer.figma": { @@ -9200,7 +9206,7 @@ "path": ["underlineNav", "iconColor", "rest"] }, "selection-bgColor": { - "value": "#0969da33", + "value": "#c9f04d33", "$type": "color", "$extensions": { "org.primer.figma": { @@ -13576,7 +13582,7 @@ "path": ["bgColor", "accent", "muted"] }, "bgColor-accent-emphasis": { - "value": "#0969da", + "value": "#c9f04d", "$type": "color", "$extensions": { "org.primer.figma": { @@ -13592,7 +13598,7 @@ "filePath": "src/tokens/functional/color/light/primitives-light.json5", "isSource": true, "original": { - "value": "{base.color.blue.5}", + "value": "{prov.color.neonGreen}", "$type": "color", "$extensions": { "org.primer.figma": { @@ -14407,6 +14413,37 @@ "attributes": {}, "path": ["borderColor", "transparent"] }, + "borderColor-translucent": { + "value": "#1f232826", + "$type": "color", + "$extensions": { + "org.primer.figma": { + "collection": "mode", + "mode": "light", + "group": "semantic", + "scopes": ["borderColor"] + } + }, + "alpha": 0.15, + "filePath": "src/tokens/functional/color/light/primitives-light.json5", + "isSource": true, + "original": { + "value": "{base.color.black}", + "$type": "color", + "$extensions": { + "org.primer.figma": { + "collection": "mode", + "mode": "light", + "group": "semantic", + "scopes": ["borderColor"] + } + }, + "alpha": 0.15 + }, + "name": "borderColor-translucent", + "attributes": {}, + "path": ["borderColor", "translucent"] + }, "borderColor-neutral-muted": { "value": "#afb8c133", "$type": "color", diff --git a/dist/docs/functional/typography/typography.json b/dist/docs/functional/typography/typography.json index d3440a010..8e5efae90 100644 --- a/dist/docs/functional/typography/typography.json +++ b/dist/docs/functional/typography/typography.json @@ -5,7 +5,7 @@ "$extensions": { "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["fontFamily"] } }, "filePath": "src/tokens/functional/typography/typography.json", @@ -16,7 +16,7 @@ "$extensions": { "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["fontFamily"] } } }, @@ -30,7 +30,7 @@ "$extensions": { "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["fontFamily"] } }, "filePath": "src/tokens/functional/typography/typography.json", @@ -41,7 +41,7 @@ "$extensions": { "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["fontFamily"] } } }, @@ -49,13 +49,38 @@ "attributes": {}, "path": ["fontStack", "sansSerif"] }, + "fontStack-sansSerifDisplay": { + "value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'", + "$type": "fontFamily", + "$extensions": { + "org.primer.figma": { + "collection": "typography", + "scopes": ["fontFamily"] + } + }, + "filePath": "src/tokens/functional/typography/typography.json", + "isSource": true, + "original": { + "value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'", + "$type": "fontFamily", + "$extensions": { + "org.primer.figma": { + "collection": "typography", + "scopes": ["fontFamily"] + } + } + }, + "name": "fontStack-sansSerifDisplay", + "attributes": {}, + "path": ["fontStack", "sansSerifDisplay"] + }, "fontStack-monospace": { "value": "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace", "$type": "fontFamily", "$extensions": { "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["fontFamily"] } }, "filePath": "src/tokens/functional/typography/typography.json", @@ -66,7 +91,7 @@ "$extensions": { "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["fontFamily"] } } }, @@ -83,7 +108,7 @@ }, "org.primer.figma": { "collection": "typography", - "scopes": ["all"], + "scopes": ["lineHeight"], "fontSizeInPx": 40 } }, @@ -98,7 +123,7 @@ }, "org.primer.figma": { "collection": "typography", - "scopes": ["all"], + "scopes": ["lineHeight"], "fontSizeInPx": 40 } } @@ -113,7 +138,7 @@ "$extensions": { "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["fontSize"] } }, "filePath": "src/tokens/functional/typography/typography.json", @@ -124,7 +149,7 @@ "$extensions": { "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["fontSize"] } } }, @@ -141,7 +166,7 @@ }, "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["lineHeight"] } }, "filePath": "src/tokens/functional/typography/typography.json", @@ -155,7 +180,7 @@ }, "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["lineHeight"] } } }, @@ -169,7 +194,7 @@ "$extensions": { "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["fontWeight"] } }, "filePath": "src/tokens/functional/typography/typography.json", @@ -180,7 +205,7 @@ "$extensions": { "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["fontWeight"] } } }, @@ -199,7 +224,7 @@ "fontWeight": "{text.display.weight}", "fontSize": "{text.display.size}", "lineHeight": "{text.display.lineHeight}", - "fontFamily": "{fontStack.sansSerif}" + "fontFamily": "{fontStack.sansSerifDisplay}" }, "$type": "typography", "comment": "Hero-style text for brand to product transition pages. Utilize Title (large) styles on narrow viewports." @@ -214,7 +239,7 @@ "$extensions": { "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["fontSize"] } }, "filePath": "src/tokens/functional/typography/typography.json", @@ -225,7 +250,7 @@ "$extensions": { "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["fontSize"] } } }, @@ -239,7 +264,7 @@ "$extensions": { "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["fontSize"] } }, "filePath": "src/tokens/functional/typography/typography.json", @@ -250,7 +275,7 @@ "$extensions": { "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["fontSize"] } } }, @@ -264,7 +289,7 @@ "$extensions": { "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["fontSize"] } }, "filePath": "src/tokens/functional/typography/typography.json", @@ -275,7 +300,7 @@ "$extensions": { "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["fontSize"] } } }, @@ -292,7 +317,7 @@ }, "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["lineHeight"] } }, "filePath": "src/tokens/functional/typography/typography.json", @@ -306,7 +331,7 @@ }, "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["lineHeight"] } } }, @@ -323,7 +348,7 @@ }, "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["lineHeight"] } }, "filePath": "src/tokens/functional/typography/typography.json", @@ -337,7 +362,7 @@ }, "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["lineHeight"] } } }, @@ -354,7 +379,7 @@ }, "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["lineHeight"] } }, "filePath": "src/tokens/functional/typography/typography.json", @@ -368,7 +393,7 @@ }, "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["lineHeight"] } } }, @@ -382,7 +407,7 @@ "$extensions": { "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["fontWeight"] } }, "filePath": "src/tokens/functional/typography/typography.json", @@ -393,7 +418,7 @@ "$extensions": { "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["fontWeight"] } } }, @@ -407,7 +432,7 @@ "$extensions": { "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["fontWeight"] } }, "filePath": "src/tokens/functional/typography/typography.json", @@ -418,7 +443,7 @@ "$extensions": { "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["fontWeight"] } } }, @@ -432,7 +457,7 @@ "$extensions": { "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["fontWeight"] } }, "filePath": "src/tokens/functional/typography/typography.json", @@ -443,7 +468,7 @@ "$extensions": { "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["fontWeight"] } } }, @@ -462,7 +487,7 @@ "fontWeight": "{text.title.weight.large}", "fontSize": "{text.title.size.large}", "lineHeight": "{text.title.lineHeight.large}", - "fontFamily": "{fontStack.sansSerif}" + "fontFamily": "{fontStack.sansSerifDisplay}" }, "$type": "typography", "comment": "Page headings for user-created objects, such as issues or pull requests. Utilize title (medium) styles on narrow viewports." @@ -482,7 +507,7 @@ "fontWeight": "{text.title.weight.medium}", "fontSize": "{text.title.size.medium}", "lineHeight": "{text.title.lineHeight.medium}", - "fontFamily": "{fontStack.sansSerif}" + "fontFamily": "{fontStack.sansSerifDisplay}" }, "$type": "typography", "comment": "Default page title. The 32px-equivalent line-height matches with button and other medium control heights. Great for page header composition." @@ -517,7 +542,7 @@ "$extensions": { "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["fontSize"] } }, "filePath": "src/tokens/functional/typography/typography.json", @@ -528,7 +553,7 @@ "$extensions": { "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["fontSize"] } } }, @@ -545,7 +570,7 @@ }, "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["lineHeight"] } }, "filePath": "src/tokens/functional/typography/typography.json", @@ -559,7 +584,7 @@ }, "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["lineHeight"] } } }, @@ -573,7 +598,7 @@ "$extensions": { "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["fontWeight"] } }, "filePath": "src/tokens/functional/typography/typography.json", @@ -584,7 +609,7 @@ "$extensions": { "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["fontWeight"] } } }, @@ -603,7 +628,7 @@ "fontWeight": "{text.subtitle.weight}", "fontSize": "{text.subtitle.size}", "lineHeight": "{text.subtitle.lineHeight}", - "fontFamily": "{fontStack.sansSerif}" + "fontFamily": "{fontStack.sansSerifDisplay}" }, "$type": "typography", "comment": "Page sections/sub headings, or less important object names in page titles (automated action titles, for example). Same line-height as title (medium)." @@ -618,7 +643,7 @@ "$extensions": { "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["fontSize"] } }, "filePath": "src/tokens/functional/typography/typography.json", @@ -629,7 +654,7 @@ "$extensions": { "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["fontSize"] } } }, @@ -643,7 +668,7 @@ "$extensions": { "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["fontSize"] } }, "filePath": "src/tokens/functional/typography/typography.json", @@ -654,7 +679,7 @@ "$extensions": { "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["fontSize"] } } }, @@ -668,7 +693,7 @@ "$extensions": { "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["fontSize"] } }, "filePath": "src/tokens/functional/typography/typography.json", @@ -679,7 +704,7 @@ "$extensions": { "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["fontSize"] } } }, @@ -696,7 +721,7 @@ }, "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["lineHeight"] } }, "filePath": "src/tokens/functional/typography/typography.json", @@ -710,7 +735,7 @@ }, "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["lineHeight"] } } }, @@ -727,7 +752,7 @@ }, "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["lineHeight"] } }, "filePath": "src/tokens/functional/typography/typography.json", @@ -741,7 +766,7 @@ }, "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["lineHeight"] } } }, @@ -758,7 +783,7 @@ }, "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["lineHeight"] } }, "filePath": "src/tokens/functional/typography/typography.json", @@ -772,7 +797,7 @@ }, "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["lineHeight"] } } }, @@ -786,7 +811,7 @@ "$extensions": { "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["fontWeight"] } }, "filePath": "src/tokens/functional/typography/typography.json", @@ -797,7 +822,7 @@ "$extensions": { "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["fontWeight"] } } }, @@ -871,7 +896,7 @@ "$extensions": { "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["fontSize"] } }, "filePath": "src/tokens/functional/typography/typography.json", @@ -882,7 +907,7 @@ "$extensions": { "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["fontSize"] } } }, @@ -899,7 +924,7 @@ }, "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["lineHeight"] } }, "filePath": "src/tokens/functional/typography/typography.json", @@ -913,7 +938,7 @@ }, "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["lineHeight"] } } }, @@ -927,7 +952,7 @@ "$extensions": { "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["fontWeight"] } }, "filePath": "src/tokens/functional/typography/typography.json", @@ -938,7 +963,7 @@ "$extensions": { "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["fontWeight"] } } }, @@ -972,7 +997,7 @@ "$extensions": { "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["fontSize"] } }, "filePath": "src/tokens/functional/typography/typography.json", @@ -983,7 +1008,7 @@ "$extensions": { "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["fontSize"] } } }, @@ -1000,7 +1025,7 @@ }, "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["lineHeight"] } }, "filePath": "src/tokens/functional/typography/typography.json", @@ -1014,7 +1039,7 @@ }, "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["lineHeight"] } } }, @@ -1028,7 +1053,7 @@ "$extensions": { "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["fontWeight"] } }, "filePath": "src/tokens/functional/typography/typography.json", @@ -1039,7 +1064,7 @@ "$extensions": { "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["fontWeight"] } } }, @@ -1073,7 +1098,7 @@ "$extensions": { "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["fontSize"] } }, "filePath": "src/tokens/functional/typography/typography.json", @@ -1084,7 +1109,7 @@ "$extensions": { "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["fontSize"] } } }, @@ -1098,7 +1123,7 @@ "$extensions": { "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["fontWeight"] } }, "filePath": "src/tokens/functional/typography/typography.json", @@ -1109,7 +1134,7 @@ "$extensions": { "org.primer.figma": { "collection": "typography", - "scopes": ["all"] + "scopes": ["fontWeight"] } } }, diff --git a/dist/fallbacks/functional/typography/typography.json b/dist/fallbacks/functional/typography/typography.json index b7c701661..5a0bb47c5 100644 --- a/dist/fallbacks/functional/typography/typography.json +++ b/dist/fallbacks/functional/typography/typography.json @@ -1,6 +1,7 @@ { "--fontStack-system": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'", "--fontStack-sansSerif": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'", + "--fontStack-sansSerifDisplay": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'", "--fontStack-monospace": "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace", "--text-display-lineBoxHeight": 1.4, "--text-display-size": "2.5rem", diff --git a/dist/figma/figma.json b/dist/figma/figma.json index 2462fc064..9a40652f2 100644 --- a/dist/figma/figma.json +++ b/dist/figma/figma.json @@ -82,8 +82,8 @@ "component shadow", "syntax", "semantic", - "component", - "component (internal)" + "component (internal)", + "component" ] }, "typography": { diff --git a/dist/figma/themes/dark.json b/dist/figma/themes/dark.json index a4db80719..61cae4f1b 100644 --- a/dist/figma/themes/dark.json +++ b/dist/figma/themes/dark.json @@ -1433,6 +1433,23 @@ "group": "semantic", "scopes": ["STROKE_COLOR"] }, + { + "name": "borderColor/translucent", + "value": { + "r": 1, + "g": 1, + "b": 1, + "a": 0.15 + }, + "type": "COLOR", + "alpha": 0.15, + "refId": "mode/borderColor/translucent", + "reference": "base/color/dark/base/color/white", + "collection": "mode", + "mode": "dark", + "group": "component (internal)", + "scopes": ["STROKE_COLOR"] + }, { "name": "borderColor/transparent", "value": { @@ -5314,14 +5331,15 @@ { "name": "control/fgColor/placeholder", "value": { - "r": 0.2823529411764706, - "g": 0.30980392156862746, - "b": 0.34509803921568627, + "r": 0.5215686274509804, + "g": 0.5568627450980392, + "b": 0.596078431372549, "a": 1 }, "type": "COLOR", + "isMix": true, "refId": "mode/control/fgColor/placeholder", - "reference": "base/color/dark/base/color/neutral/5", + "reference": "base/color/dark/base/color/neutral/3", "collection": "mode", "mode": "dark", "group": "component", @@ -5491,23 +5509,6 @@ "collection": "mode", "group": "component shadow" }, - { - "name": "avatar/borderColor", - "value": { - "r": 1, - "g": 1, - "b": 1, - "a": 0.15 - }, - "type": "COLOR", - "alpha": 0.15, - "refId": "mode/avatar/borderColor", - "reference": "base/color/dark/base/color/white", - "collection": "mode", - "mode": "dark", - "group": "component (internal)", - "scopes": ["STROKE_COLOR"] - }, { "name": "avatar/bgColor", "value": { @@ -8965,6 +8966,22 @@ "group": "component", "scopes": ["FRAME_FILL", "SHAPE_FILL"] }, + { + "name": "avatar/borderColor", + "value": { + "r": 1, + "g": 1, + "b": 1, + "a": 0.15 + }, + "type": "COLOR", + "refId": "mode/avatar/borderColor", + "reference": "mode/borderColor/translucent", + "collection": "mode", + "mode": "dark", + "group": "component (internal)", + "scopes": ["STROKE_COLOR"] + }, { "name": "codeMirror/lines/bgColor", "value": { diff --git a/dist/figma/themes/light.json b/dist/figma/themes/light.json index 79e69e075..9ee9a0a61 100644 --- a/dist/figma/themes/light.json +++ b/dist/figma/themes/light.json @@ -1333,6 +1333,23 @@ "group": "semantic", "scopes": ["STROKE_COLOR"] }, + { + "name": "borderColor/translucent", + "value": { + "r": 0.12156862745098039, + "g": 0.13725490196078433, + "b": 0.1568627450980392, + "a": 0.15 + }, + "type": "COLOR", + "alpha": 0.15, + "refId": "mode/borderColor/translucent", + "reference": "base/color/light/base/color/black", + "collection": "mode", + "mode": "light", + "group": "semantic", + "scopes": ["STROKE_COLOR"] + }, { "name": "borderColor/transparent", "value": { @@ -1692,14 +1709,14 @@ { "name": "bgColor/accent-emphasis", "value": { - "r": 0.03529411764705882, - "g": 0.4117647058823529, - "b": 0.8549019607843137, + "r": 0.788235294117647, + "g": 0.9411764705882353, + "b": 0.30196078431372547, "a": 1 }, "type": "COLOR", "refId": "mode/bgColor/accent-emphasis", - "reference": "base/color/light/base/color/blue/5", + "reference": "base/color/light/prov/color/neonGreen", "collection": "mode", "mode": "light", "group": "semantic", @@ -5039,12 +5056,13 @@ { "name": "control/fgColor/placeholder", "value": { - "r": 0.43137254901960786, - "g": 0.4666666666666667, - "b": 0.5058823529411764, + "r": 0.4117647058823529, + "g": 0.4470588235294118, + "b": 0.48627450980392156, "a": 1 }, "type": "COLOR", + "isMix": true, "refId": "mode/control/fgColor/placeholder", "reference": "base/color/light/base/color/neutral/5", "collection": "mode", @@ -5216,23 +5234,6 @@ "collection": "mode", "group": "component shadow" }, - { - "name": "avatar/borderColor", - "value": { - "r": 0.12156862745098039, - "g": 0.13725490196078433, - "b": 0.1568627450980392, - "a": 0.15 - }, - "type": "COLOR", - "alpha": 0.15, - "refId": "mode/avatar/borderColor", - "reference": "base/color/light/base/color/black", - "collection": "mode", - "mode": "light", - "group": "component (internal)", - "scopes": ["STROKE_COLOR"] - }, { "name": "avatar/bgColor", "value": { @@ -7649,9 +7650,9 @@ { "name": "selection/bgColor", "value": { - "r": 0.03529411764705882, - "g": 0.4117647058823529, - "b": 0.8549019607843137, + "r": 0.788235294117647, + "g": 0.9411764705882353, + "b": 0.30196078431372547, "a": 0.2 }, "type": "COLOR", @@ -7799,9 +7800,9 @@ { "name": "buttonCounter/outline/bgColor/disabled", "value": { - "r": 0.03529411764705882, - "g": 0.4117647058823529, - "b": 0.8549019607843137, + "r": 0.788235294117647, + "g": 0.9411764705882353, + "b": 0.30196078431372547, "a": 0.05 }, "type": "COLOR", @@ -7816,9 +7817,9 @@ { "name": "buttonCounter/outline/bgColor/rest", "value": { - "r": 0.03529411764705882, - "g": 0.4117647058823529, - "b": 0.8549019607843137, + "r": 0.788235294117647, + "g": 0.9411764705882353, + "b": 0.30196078431372547, "a": 0.1 }, "type": "COLOR", @@ -7978,9 +7979,9 @@ { "name": "button/outline/bgColor/active", "value": { - "r": 0.027450980392156862, - "g": 0.3411764705882353, - "b": 0.7294117647058823, + "r": 0.47843137254901963, + "g": 0.6588235294117647, + "b": 0.4, "a": 1 }, "type": "COLOR", @@ -7995,9 +7996,9 @@ { "name": "button/outline/bgColor/hover", "value": { - "r": 0.03529411764705882, - "g": 0.4117647058823529, - "b": 0.8549019607843137, + "r": 0.788235294117647, + "g": 0.9411764705882353, + "b": 0.30196078431372547, "a": 1 }, "type": "COLOR", @@ -8559,9 +8560,9 @@ { "name": "control/checked/borderColor/active", "value": { - "r": 0.027450980392156862, - "g": 0.3411764705882353, - "b": 0.7294117647058823, + "r": 0.47843137254901963, + "g": 0.6588235294117647, + "b": 0.4, "a": 1 }, "type": "COLOR", @@ -8576,9 +8577,9 @@ { "name": "control/checked/borderColor/hover", "value": { - "r": 0.03137254901960784, - "g": 0.3764705882352941, - "b": 0.792156862745098, + "r": 0.6313725490196078, + "g": 0.8, + "b": 0.34901960784313724, "a": 1 }, "type": "COLOR", @@ -8593,9 +8594,9 @@ { "name": "control/checked/borderColor/rest", "value": { - "r": 0.03529411764705882, - "g": 0.4117647058823529, - "b": 0.8549019607843137, + "r": 0.788235294117647, + "g": 0.9411764705882353, + "b": 0.30196078431372547, "a": 1 }, "type": "COLOR", @@ -8657,9 +8658,9 @@ { "name": "control/checked/bgColor/active", "value": { - "r": 0.027450980392156862, - "g": 0.3411764705882353, - "b": 0.7294117647058823, + "r": 0.47843137254901963, + "g": 0.6588235294117647, + "b": 0.4, "a": 1 }, "type": "COLOR", @@ -8674,9 +8675,9 @@ { "name": "control/checked/bgColor/hover", "value": { - "r": 0.03137254901960784, - "g": 0.3764705882352941, - "b": 0.792156862745098, + "r": 0.6313725490196078, + "g": 0.8, + "b": 0.34901960784313724, "a": 1 }, "type": "COLOR", @@ -8691,9 +8692,9 @@ { "name": "control/checked/bgColor/rest", "value": { - "r": 0.03529411764705882, - "g": 0.4117647058823529, - "b": 0.8549019607843137, + "r": 0.788235294117647, + "g": 0.9411764705882353, + "b": 0.30196078431372547, "a": 1 }, "type": "COLOR", @@ -8897,6 +8898,22 @@ "group": "component", "scopes": ["FRAME_FILL", "SHAPE_FILL"] }, + { + "name": "avatar/borderColor", + "value": { + "r": 0.12156862745098039, + "g": 0.13725490196078433, + "b": 0.1568627450980392, + "a": 0.15 + }, + "type": "COLOR", + "refId": "mode/avatar/borderColor", + "reference": "mode/borderColor/translucent", + "collection": "mode", + "mode": "light", + "group": "component (internal)", + "scopes": ["STROKE_COLOR"] + }, { "name": "codeMirror/lines/bgColor", "value": { @@ -9269,9 +9286,9 @@ { "name": "controlKnob/borderColor/checked", "value": { - "r": 0.03529411764705882, - "g": 0.4117647058823529, - "b": 0.8549019607843137, + "r": 0.788235294117647, + "g": 0.9411764705882353, + "b": 0.30196078431372547, "a": 1 }, "type": "COLOR",