Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add theme support for code snippet #5004

Merged
merged 6 commits into from
Mar 1, 2024
Merged

Add theme support for code snippet #5004

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9e81c0b
Add theming for icons
britneywwc Feb 23, 2024
4d480f3
Add theme support for code snippet
britneywwc Feb 23, 2024
45c573f
Add code snippet dark examples
britneywwc Feb 23, 2024
7539e6c
Fix scss linting
britneywwc Feb 23, 2024
89aebe5
Rename code background variable from PR comments
britneywwc Feb 27, 2024
90dacd7
Fix linux prompt icon.
bartaz Mar 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
10 changes: 5 additions & 5 deletions scss/_base_code.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ $code-inline-padding: 0.25rem;
code,
kbd,
samp {
background-color: $color-code-background;
background-color: $colors--theme--background-code;
box-decoration-break: slice;
color: inherit;
line-height: map-get($line-heights, default-text) - $code-inline-padding;
Expand Down Expand Up @@ -59,8 +59,8 @@ $code-inline-padding: 0.25rem;
}

pre {
background-color: $color-code-background;
color: $colors--light-theme--text-default;
background-color: $colors--theme--background-code;
color: $colors--theme--text-default;
display: block;
margin-bottom: $spv--x-large;
margin-top: 0;
Expand All @@ -81,7 +81,7 @@ $code-inline-padding: 0.25rem;
%leading-linux-prompt-icon {
&::before {
@extend %icon;
@include vf-icon-linux-prompt($color-mid-dark);
@include vf-icon-linux-prompt-themed;

content: '';
left: $sph--large;
Expand Down Expand Up @@ -110,7 +110,7 @@ $code-inline-padding: 0.25rem;
}

&::before {
color: $color-mid-dark;
color: $colors--theme--text-muted;
content: counter(line-numbering);
counter-increment: line-numbering;
height: 100%;
Expand Down
34 changes: 26 additions & 8 deletions scss/_base_icon-definitions.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -358,6 +358,32 @@
@include vf-themed-icon($light-value: vf-icon-hide-url($colors--light-theme--icon), $dark-value: vf-icon-hide-url($colors--dark-theme--icon));
}

// get-link
@function vf-icon-get-link-url($color) {
@return url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.781 4.772c.976.683 1.5 1.77 1.508 2.876l-.065.105c-.317.457-.88.637-1.308.399a.831.831 0 01-.162-.117A2.036 2.036 0 005.177 6.38l-.091.121L2.832 9.72a2.036 2.036 0 003.243 2.456l.092-.121.114-.162a3.582 3.582 0 001.34.7l-.225.322a3.536 3.536 0 11-5.792-4.056L3.857 5.64a3.536 3.536 0 014.924-.868zm4.747-3.042a3.536 3.536 0 01.868 4.924l-2.253 3.218A3.536 3.536 0 015.71 7.865l.065-.105c.317-.458.88-.637 1.308-.4.06.033.113.073.162.117a2.036 2.036 0 003.577 1.656l.091-.121 2.254-3.218a2.036 2.036 0 00-3.243-2.457l-.092.122-.114.162a3.582 3.582 0 00-1.34-.701l.225-.322a3.536 3.536 0 014.924-.868z' fill='#{vf-url-friendly-color($color)}' fill-rule='nonzero'/%3E%3C/svg%3E");
}

@mixin vf-icon-get-link($color) {
background-image: vf-icon-chevron-url($color);
}

@mixin vf-icon-get-link-themed {
@include vf-themed-icon($light-value: vf-icon-get-link-url($colors--light-theme--icon), $dark-value: vf-icon-get-link-url($colors--dark-theme--icon));
}

// linux-prompt
@function vf-icon-linux-url($color) {
@return url("data:image/svg+xml,%3Csvg width='16px' height='16px' viewBox='0 0 16 16' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='dollar-sign' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cpath d='M8.85063291,15 L8.85063291,13.1075949 C9.73924051,12.9978903 10.3974684,12.7181434 10.8253165,12.2683544 C11.2531646,11.8185654 11.4670886,11.2700422 11.4670886,10.6227848 C11.4670886,10.1949367 11.3875528,9.82742616 11.228481,9.52025316 C11.0694092,9.21308017 10.8582278,8.94978903 10.5949367,8.73037975 C10.3316456,8.51097047 10.0244726,8.32172996 9.67341772,8.16265823 C9.32236287,8.00358649 8.96033756,7.85274262 8.58734177,7.71012658 C8.29113924,7.60042194 8.02510548,7.49620253 7.78924051,7.39746835 C7.55337553,7.29873418 7.34767933,7.18902953 7.1721519,7.06835443 C6.99662447,6.94767933 6.86223629,6.81054852 6.76898734,6.65696203 C6.67573839,6.50337553 6.62911392,6.31139241 6.62911392,6.08101266 C6.62911392,5.66413502 6.78544304,5.34599156 7.09810127,5.12658228 C7.41075949,4.907173 7.86329114,4.79746835 8.4556962,4.79746835 C8.99324895,4.79746835 9.43755275,4.84409282 9.78860759,4.93734177 C10.1396624,5.03059072 10.4303797,5.12109705 10.6607595,5.20886076 L10.9405063,4.05696203 C10.7210971,3.96919832 10.4276371,3.88417722 10.0601266,3.80189873 C9.69261604,3.71962025 9.28945148,3.66751055 8.85063291,3.64556962 L8.85063291,2 L7.63291139,2 L7.63291139,3.69493671 C6.84303797,3.81561181 6.23966244,4.09535865 5.82278481,4.53417722 C5.40590718,4.97299578 5.19746835,5.54345991 5.19746835,6.24556962 C5.19746835,6.64050633 5.26877637,6.97236287 5.41139241,7.24113924 C5.55400844,7.50991561 5.73776371,7.74029536 5.96265823,7.93227848 C6.18755275,8.12426161 6.44535865,8.28607595 6.73607595,8.41772152 C7.02679325,8.54936709 7.32025316,8.67004219 7.6164557,8.77974684 C7.9236287,8.88945148 8.21983123,9.00189873 8.50506329,9.11708861 C8.79029536,9.23227848 9.04535865,9.36392405 9.27025316,9.51202532 C9.49514768,9.66012658 9.67341772,9.83016877 9.80506329,10.0221519 C9.93670886,10.214135 10.0025316,10.4472574 10.0025316,10.721519 C10.0025316,10.9080169 9.96962025,11.0808017 9.90379747,11.2398734 C9.83797468,11.3989452 9.72827004,11.5360759 9.57468354,11.6512658 C9.42109705,11.7664557 9.20991561,11.8542194 8.94113924,11.914557 C8.67236287,11.9748945 8.34050633,12.0050633 7.94556962,12.0050633 C7.33122363,12.0050633 6.82109705,11.9419832 6.41518987,11.8158228 C6.0092827,11.6896624 5.65822785,11.5552743 5.36202532,11.4126582 L5,12.5481013 C5.20843882,12.6687763 5.52658228,12.7949367 5.95443038,12.9265823 C6.38227848,13.0582278 6.94177215,13.1350211 7.63291139,13.156962 L7.63291139,15 L8.85063291,15 Z' id='$' fill='#{vf-url-friendly-color($color)}' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}

@mixin vf-icon-linux-prompt($color) {
background-image: vf-icon-linux-url($color);
}

@mixin vf-icon-linux-prompt-themed {
@include vf-themed-icon($light-value: vf-icon-linux-url($colors--light-theme--icon), $dark-value: vf-icon-linux-url($colors--dark-theme--icon));
}

// SOCIAL ICONS

// currently only GitHub and Twitter/X icons need theming support
Expand Down Expand Up @@ -563,10 +589,6 @@
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.576.363l2.541 2.54-1.06 1.061-.81-.81V4.2a4.358 4.358 0 01-2.514 3.949l-.202.088a2.858 2.858 0 00-1.684 1.91 2.5 2.5 0 11-1.525-.055 4.359 4.359 0 012.442-3.156l.202-.088a2.858 2.858 0 001.775-2.455l.006-.193v-.888l-.65.651-1.061-1.06 1.71-1.712.001-.063.063-.001.766-.765zM8 11.5a1 1 0 100 2 1 1 0 000-2zM4 .363l2.54 2.54-1.06 1.061-.73-.73V4.2l.006.193a2.858 2.858 0 001.6 2.376l.377.167c.083.039.165.08.244.123l-.803 1.272-.103-.049-.307-.133a4.358 4.358 0 01-2.508-3.728l-.006-.22v-.968l-.73.73-1.06-1.06L4 .363z' fill='#{vf-url-friendly-color($color)}' fill-rule='nonzero'/%3E%3C/svg%3E");
}

@mixin vf-icon-get-link($color) {
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.781 4.772c.976.683 1.5 1.77 1.508 2.876l-.065.105c-.317.457-.88.637-1.308.399a.831.831 0 01-.162-.117A2.036 2.036 0 005.177 6.38l-.091.121L2.832 9.72a2.036 2.036 0 003.243 2.456l.092-.121.114-.162a3.582 3.582 0 001.34.7l-.225.322a3.536 3.536 0 11-5.792-4.056L3.857 5.64a3.536 3.536 0 014.924-.868zm4.747-3.042a3.536 3.536 0 01.868 4.924l-2.253 3.218A3.536 3.536 0 015.71 7.865l.065-.105c.317-.458.88-.637 1.308-.4.06.033.113.073.162.117a2.036 2.036 0 003.577 1.656l.091-.121 2.254-3.218a2.036 2.036 0 00-3.243-2.457l-.092.122-.114.162a3.582 3.582 0 00-1.34-.701l.225-.322a3.536 3.536 0 014.924-.868z' fill='#{vf-url-friendly-color($color)}' fill-rule='nonzero'/%3E%3C/svg%3E");
}

@mixin vf-icon-halfscreen-bar($color) {
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 9v5a1 1 0 01-1 1H2a1 1 0 01-1-1V9h14zm-3-8a3 3 0 012.995 2.824L15 4v3h-1.5V4l-.007-.144a1.5 1.5 0 00-1.349-1.35L12 2.5H4l-.144.007a1.5 1.5 0 00-1.35 1.349L2.5 4v3H1V4a3 3 0 012.824-2.995L4 1h8z' fill='#{vf-url-friendly-color($color)}' fill-rule='evenodd'/%3E%3C/svg%3E");
}
Expand Down Expand Up @@ -771,10 +793,6 @@
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.734.289a1 1 0 01.429.429l6.631 12.823A1 1 0 0114.906 15H1.643a1 1 0 01-.888-1.46L7.386.719a1 1 0 011.348-.43zm-.46 1.976L2.464 13.5h11.62L8.274 2.265zm.5 8.022a.5.5 0 01.492.41l.008.09v1a.5.5 0 01-.41.492l-.09.008h-1a.5.5 0 01-.491-.41l-.009-.09v-1a.5.5 0 01.41-.492l.09-.008h1zm.5-4.68V8.98h-2V5.608h2z' fill='#{vf-url-friendly-color($color)}' fill-rule='nonzero'/%3E%3C/svg%3E");
}

@mixin vf-icon-linux-prompt($color) {
background-image: url("data:image/svg+xml,%3Csvg width='16px' height='16px' viewBox='0 0 16 16' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='dollar-sign' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cpath d='M8.85063291,15 L8.85063291,13.1075949 C9.73924051,12.9978903 10.3974684,12.7181434 10.8253165,12.2683544 C11.2531646,11.8185654 11.4670886,11.2700422 11.4670886,10.6227848 C11.4670886,10.1949367 11.3875528,9.82742616 11.228481,9.52025316 C11.0694092,9.21308017 10.8582278,8.94978903 10.5949367,8.73037975 C10.3316456,8.51097047 10.0244726,8.32172996 9.67341772,8.16265823 C9.32236287,8.00358649 8.96033756,7.85274262 8.58734177,7.71012658 C8.29113924,7.60042194 8.02510548,7.49620253 7.78924051,7.39746835 C7.55337553,7.29873418 7.34767933,7.18902953 7.1721519,7.06835443 C6.99662447,6.94767933 6.86223629,6.81054852 6.76898734,6.65696203 C6.67573839,6.50337553 6.62911392,6.31139241 6.62911392,6.08101266 C6.62911392,5.66413502 6.78544304,5.34599156 7.09810127,5.12658228 C7.41075949,4.907173 7.86329114,4.79746835 8.4556962,4.79746835 C8.99324895,4.79746835 9.43755275,4.84409282 9.78860759,4.93734177 C10.1396624,5.03059072 10.4303797,5.12109705 10.6607595,5.20886076 L10.9405063,4.05696203 C10.7210971,3.96919832 10.4276371,3.88417722 10.0601266,3.80189873 C9.69261604,3.71962025 9.28945148,3.66751055 8.85063291,3.64556962 L8.85063291,2 L7.63291139,2 L7.63291139,3.69493671 C6.84303797,3.81561181 6.23966244,4.09535865 5.82278481,4.53417722 C5.40590718,4.97299578 5.19746835,5.54345991 5.19746835,6.24556962 C5.19746835,6.64050633 5.26877637,6.97236287 5.41139241,7.24113924 C5.55400844,7.50991561 5.73776371,7.74029536 5.96265823,7.93227848 C6.18755275,8.12426161 6.44535865,8.28607595 6.73607595,8.41772152 C7.02679325,8.54936709 7.32025316,8.67004219 7.6164557,8.77974684 C7.9236287,8.88945148 8.21983123,9.00189873 8.50506329,9.11708861 C8.79029536,9.23227848 9.04535865,9.36392405 9.27025316,9.51202532 C9.49514768,9.66012658 9.67341772,9.83016877 9.80506329,10.0221519 C9.93670886,10.214135 10.0025316,10.4472574 10.0025316,10.721519 C10.0025316,10.9080169 9.96962025,11.0808017 9.90379747,11.2398734 C9.83797468,11.3989452 9.72827004,11.5360759 9.57468354,11.6512658 C9.42109705,11.7664557 9.20991561,11.8542194 8.94113924,11.914557 C8.67236287,11.9748945 8.34050633,12.0050633 7.94556962,12.0050633 C7.33122363,12.0050633 6.82109705,11.9419832 6.41518987,11.8158228 C6.0092827,11.6896624 5.65822785,11.5552743 5.36202532,11.4126582 L5,12.5481013 C5.20843882,12.6687763 5.52658228,12.7949367 5.95443038,12.9265823 C6.38227848,13.0582278 6.94177215,13.1350211 7.63291139,13.156962 L7.63291139,15 L8.85063291,15 Z' id='$' fill='#{vf-url-friendly-color($color)}' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}

@mixin vf-icon-desktop($color) {
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='desktop-2'%3E%3Crect width='16' height='16' /%3E%3Cpath id='Union' fill-rule='evenodd' clip-rule='evenodd' d='M2.5 3.5H13.5V10.5H2.5L2.5 3.5ZM1 3.5C1 2.67157 1.67157 2 2.5 2H13.5C14.3284 2 15 2.67157 15 3.5V10.5C15 11.3284 14.3284 12 13.5 12H8.75V13.25H11V14.75H5V13.25H7.25V12H2.5C1.67157 12 1 11.3284 1 10.5V3.5Z' fill='#{vf-url-friendly-color($color)}'/%3E%3C/g%3E%3C/svg%3E");
}
Expand Down
4 changes: 2 additions & 2 deletions scss/_base_syntax-highlighting.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,11 @@
&.prolog,
&.doctype,
&.cdata {
color: $colors--light-theme--text-muted;
color: $colors--theme--text-muted;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We probably need to look into theming rest of the syntax highlighting colours, but this can wait.

}

&.punctuation {
color: $colors--light-theme--text-default;
color: $colors--theme--text-default;
}

&.namespace {
Expand Down
15 changes: 7 additions & 8 deletions scss/_patterns_code-snippet.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,15 +46,14 @@

@import 'settings';

$color-snippet-heading-bg: rgba($color-x-dark, 0.08);
$code-snippet-header-v-spacing: $spv--small;

@mixin vf-p-code-snippet {
.p-code-snippet {
margin-bottom: $spv--x-large;

&.is-bordered {
border: 1px solid $colors--light-theme--border-low-contrast;
border: 1px solid $colors--theme--border-low-contrast;
}

.p-code-snippet__block,
Expand All @@ -74,13 +73,13 @@ $code-snippet-header-v-spacing: $spv--small;
position: relative;

&.is-windows-prompt::before {
@include vf-icon-chevron($color-mid-dark);
@include vf-icon-chevron-themed;

transform: rotate(270deg);
}

&.is-url::before {
@include vf-icon-get-link($color-mid-dark);
@include vf-icon-get-link-themed;
}
}

Expand All @@ -94,7 +93,7 @@ $code-snippet-header-v-spacing: $spv--small;

.p-code-snippet__header {
align-items: flex-start;
background-color: $color-code-heading-background;
background-color: $colors--theme--background-active;
display: flex;
justify-content: space-between;
padding-left: $sph--large;
Expand All @@ -115,7 +114,7 @@ $code-snippet-header-v-spacing: $spv--small;
.p-code-snippet__dropdown {
background-color: $color-transparent;
border: 0;
color: $colors--light-theme--text-default;
color: $colors--theme--text-default;
margin-bottom: 0;
margin-left: $sph--small;
min-width: min-content;
Expand All @@ -137,7 +136,7 @@ $code-snippet-header-v-spacing: $spv--small;
}

.p-code-snippet__dropdown + .p-code-snippet__dropdown {
border-left: 1px solid $colors--light-theme--border-default;
border-left: 1px solid $colors--theme--border-default;
}

.p-code-snippet__header.is-stacked {
Expand All @@ -154,7 +153,7 @@ $code-snippet-header-v-spacing: $spv--small;
}

.p-code-snippet__title + .p-code-snippet__dropdowns {
border-top: 1px solid $colors--light-theme--border-default;
border-top: 1px solid $colors--theme--border-default;
}
}

Expand Down
5 changes: 5 additions & 0 deletions scss/_settings_colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,7 @@ $colors--light-theme--link-visited: $color-link-visited !default;

$colors--light-theme--background-default: #fff !default;
$colors--light-theme--background-alt: #f7f7f7 !default;
$colors--light-theme--background-code: $color-code-background !default;
$colors--light-theme--background-inputs: adjust-color($color-x-dark, $lightness: 100% * (1 - $input-background-opacity-amount)) !default;
$colors--light-theme--background-active: adjust-color($color-x-dark, $lightness: 100% * (1 - $active-background-opacity-amount)) !default;
$colors--light-theme--background-hover: adjust-color($color-x-dark, $lightness: 100% * (1 - $hover-background-opacity-amount)) !default;
Expand Down Expand Up @@ -169,6 +170,7 @@ $colors--dark-theme--link-visited: $color-link-visited-dark !default;

$colors--dark-theme--background-default: #262626 !default;
$colors--dark-theme--background-alt: #2d2d2d !default;
$colors--dark-theme--background-code: $color-code-background-dark !default;
$colors--dark-theme--background-inputs: rgba($colors--dark-theme--text-default, $input-background-opacity-amount) !default;
$colors--dark-theme--background-active: rgba($colors--dark-theme--text-default, $active-background-opacity-amount) !default;
$colors--dark-theme--background-hover: rgba($colors--dark-theme--text-default, $hover-background-opacity-amount) !default;
Expand Down Expand Up @@ -234,6 +236,7 @@ $colors--theme--link-visited: var(--vf-color-link-visited);

$colors--theme--background-default: var(--vf-color-background-default);
$colors--theme--background-alt: var(--vf-color-background-alt);
$colors--theme--background-code: var(--vf-color-background-code);
$colors--theme--background-inputs: var(--vf-color-background-inputs);
$colors--theme--background-active: var(--vf-color-background-active);
$colors--theme--background-hover: var(--vf-color-background-hover);
Expand Down Expand Up @@ -277,6 +280,7 @@ $colors--theme--background-information-active: var(--vf-color-background-informa

--vf-color-background-default: #{$colors--light-theme--background-default};
--vf-color-background-alt: #{$colors--light-theme--background-alt};
--vf-color-background-code: #{$colors--light-theme--background-code};
--vf-color-background-inputs: #{$colors--light-theme--background-inputs};
--vf-color-background-active: #{$colors--light-theme--background-active};
--vf-color-background-hover: #{$colors--light-theme--background-hover};
Expand Down Expand Up @@ -320,6 +324,7 @@ $colors--theme--background-information-active: var(--vf-color-background-informa

--vf-color-background-default: #{$colors--dark-theme--background-default};
--vf-color-background-alt: #{$colors--dark-theme--background-alt};
--vf-color-background-code: #{$colors--dark-theme--background-code};
--vf-color-background-inputs: #{$colors--dark-theme--background-inputs};
--vf-color-background-active: #{$colors--dark-theme--background-active};
--vf-color-background-hover: #{$colors--dark-theme--background-hover};
Expand Down
17 changes: 17 additions & 0 deletions templates/docs/examples/patterns/code-snippet/_default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<div class="p-code-snippet">
<div class="p-code-snippet__header">
<h5 class="p-code-snippet__title">Check you have snap installed</h5>
</div>

<pre class="p-code-snippet__block"><code>snap --version</code></pre>

<div class="p-code-snippet__header">
<h5 class="p-code-snippet__title">Output</h5>
</div>

<pre class="p-code-snippet__block"><code>snap 2.39.3
snapd 2.39.3
series 16
ubuntu 18.04
kernel 5.0.0-36-generic</code></pre>
</div>