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’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: align text input #1918

Merged
merged 15 commits into from
Jan 15, 2025
Merged

feat: align text input #1918

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
fdd89e8
feat: align o-forms text-input to new designs
frshwtr Jan 8, 2025
310ff1e
chore: Merge branch '2025-release' into 2025-release-align-text-input
frshwtr Jan 8, 2025
0bf1d98
chore: use --o3-border-radius token in form text inputs
frshwtr Jan 8, 2025
8de6520
chore: update form font size and borders
frshwtr Jan 9, 2025
7cb74de
chore: align form border width
frshwtr Jan 10, 2025
93ad4b5
chore: enable border-radius on professional
frshwtr Jan 10, 2025
5b3c03a
chore: reduce border to match design
frshwtr Jan 10, 2025
5fff75e
chore: update form typography
frshwtr Jan 10, 2025
badbc57
feat: align o2 forms to designs
frshwtr Jan 13, 2025
c6b6540
chore: Merge branch '2025-release' into 2025-release-align-text-input
frshwtr Jan 14, 2025
85a1c3a
chore: restore border-radius to source, add exception for border radi…
frshwtr Jan 14, 2025
31351a3
chore: add lineheight to input fields
frshwtr Jan 14, 2025
65364f2
Merge branch '2025-release' into 2025-release-align-text-input
frshwtr Jan 14, 2025
4f6951c
chore: add correct padding to inputs
frshwtr Jan 14, 2025
cd122b7
chore: ensure o3-form text input is 44px
frshwtr Jan 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions apps/dictionary/src/transforms/private-prefix.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
import {tokenStudioThemeToBrand, getTokenStudioThemes} from '../utils.js';

const sourceExceptions = ['base/typography', 'base/border-radius']

const privatePrefix = token => {
const isSourceExceptionForEngineering = token => {
// We do not want to export our typography scale in Figma for end users.
// However to support migration efforts we want it to still be available in the engineering token set.
if (token.filePath.includes('base/typography')) {
// We do not want to export our typography scale and border radius in Figma for end users.
// However, to support migration efforts we want it to still be available in the engineering token set.
if (sourceExceptions.find((sourceException) => token.filePath.includes(sourceException))) {
return true;
}
return false;
Expand Down
20 changes: 7 additions & 13 deletions apps/dictionary/tokens/$themes.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,7 @@
"core/components/o3-editorial-typography": "source",
"core/components/o3-form/use-case": "source",
"core/components/o3-form": "source",
"core/base/border-radius": "enabled",
"sustainable-views/base/border-radius": "disabled",
"internal/base/border-radius": "disabled",
"core/base/border-radius": "source",
"core/base/typography": "source",
"core/use-case/focus": "enabled"
},
Expand Down Expand Up @@ -228,10 +226,9 @@
"core/components/o3-editorial-typography": "source",
"core/professional/components/o3-form/use-case": "source",
"core/professional/components/o3-form": "source",
"sustainable-views/base/border-radius": "disabled",
"internal/base/border-radius": "disabled",
"core/base/typography": "source",
"core/use-case/focus": "enabled"
"core/use-case/focus": "enabled",
"core/base/border-radius": "source"
},
"$figmaStyleReferences": {
"color-usecase.background.button.primary.active": "S:55d4b73d90c40ff305a097a15d86f53de276da57,",
Expand Down Expand Up @@ -436,7 +433,7 @@
"internal/components/o3-form/use-case": "source",
"internal/base/typography": "source",
"internal/use-case/focus": "enabled",
"internal/base/border-radius": "enabled"
"internal/base/border-radius": "source"
},
"$figmaCollectionId": "VariableCollectionId:6510:3502",
"$figmaModeId": "6510:2",
Expand Down Expand Up @@ -586,9 +583,7 @@
"whitelabel/components/o3-editorial-typography": "source",
"whitelabel/components/o3-form": "source",
"whitelabel/components/o3-form/use-case": "source",
"whitelabel/base/border-radius": "enabled",
"sustainable-views/base/border-radius": "disabled",
"internal/base/border-radius": "disabled",
"whitelabel/base/border-radius": "source",
"core/base/typography": "source",
"core/use-case/focus": "source",
"whitelabel/base/typography": "source",
Expand Down Expand Up @@ -668,8 +663,7 @@
"sustainable-views/components/o3-form/use-case": "source",
"sustainable-views/base/typography": "source",
"sustainable-views/use-case/focus": "enabled",
"sustainable-views/base/border-radius": "enabled",
"internal/base/border-radius": "disabled"
"sustainable-views/base/border-radius": "source"
},
"$figmaCollectionId": "VariableCollectionId:6169:227",
"$figmaModeId": "6169:4",
Expand Down Expand Up @@ -711,4 +705,4 @@
},
"group": "sustainable-views"
}
]
]
6 changes: 3 additions & 3 deletions apps/dictionary/tokens/core/components/o3-form.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,22 @@
"@": {
"value": {
"color": "{o3.color.palette.black-30}",
"width": "2px",
"width": "1.5px",
Copy link
Member

@j-mes j-mes Jan 13, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

Any particular reason for going half a pixel there? Mostly for my own curiosity!

I also can see this in the design file as well. Also curious to as why 😂

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Unsure, Deyan may have an answer.

"style": "solid"
},
"type": "border"
},
"error": {
"value": {
"color": "{o3.color.use-case.error}",
"width": "2px",
"width": "1.5px",
"style": "solid"
},
"type": "border"
}
},
"border-radius": {
"value": "6px",
"value": "{o3.border-radius.1}",
"type": "borderRadius"
}
},
Expand Down
6 changes: 3 additions & 3 deletions apps/dictionary/tokens/core/professional/components/o3-form.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,22 @@
"@": {
"value": {
"color": "{o3.color.palette.black-30}",
"width": "2px",
"width": "1.5px",
"style": "solid"
},
"type": "border"
},
"error": {
"value": {
"color": "{o3.color.use-case.error}",
"width": "2px",
"width": "1.5px",
"style": "solid"
},
"type": "border"
}
},
"border-radius": {
"value": "6px",
"value": "{o3.border-radius.1}",
"type": "borderRadius"
}
},
Expand Down
2 changes: 1 addition & 1 deletion apps/dictionary/tokens/icons/icons.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -339,4 +339,4 @@
}
}
}
}
}
6 changes: 3 additions & 3 deletions apps/dictionary/tokens/internal/components/o3-form.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,22 @@
"@": {
"value": {
"color": "{o3.color.palette.black-30}",
"width": "2px",
"width": "1.5px",
"style": "solid"
},
"type": "border"
},
"error": {
"value": {
"color": "{o3.color.use-case.error}",
"width": "2px",
"width": "1.5px",
"style": "solid"
},
"type": "border"
}
},
"border-radius": {
"value": "6px",
"value": "{o3.border-radius.1}",
"type": "borderRadius"
}
},
Expand Down
6 changes: 3 additions & 3 deletions apps/dictionary/tokens/sustainable-views/components/o3-form.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,22 @@
"@": {
"value": {
"color": "{o3.color.palette.black-30}",
"width": "2px",
"width": "1.5px",
"style": "solid"
},
"type": "border"
},
"error": {
"value": {
"color": "{o3.color.use-case.error}",
"width": "2px",
"width": "1.5px",
"style": "solid"
},
"type": "border"
}
},
"border-radius": {
"value": "6px",
"value": "{o3.border-radius.1}",
"type": "borderRadius"
}
},
Expand Down
6 changes: 3 additions & 3 deletions apps/dictionary/tokens/whitelabel/components/o3-form.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,22 @@
"@": {
"value": {
"color": "{o3.color.palette.black-30}",
"width": "2px",
"width": "1.5px",
"style": "solid"
},
"type": "border"
},
"error": {
"value": {
"color": "{o3.color.use-case.error}",
"width": "2px",
"width": "1.5px",
"style": "solid"
},
"type": "border"
}
},
"border-radius": {
"value": "6px",
"value": "{o3.border-radius.1}",
"type": "borderRadius"
}
},
Expand Down
11 changes: 6 additions & 5 deletions components/o-forms/src/scss/shared/_base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,15 +27,15 @@
}

.o-forms-field--optional .o-forms-title__main:after {
@include oPrivateTypographySans($scale: -1);
content: '(optional)';
@include oPrivateTypographySans($scale: 1);
content: 'Optional';
color: _oFormsGet('default-prompt-text');
font-weight: 400;
margin-left: $_o-forms-spacing-one;
margin-left: oPrivateFoundationGet('o3-spacing-3xs');
}

.o-forms-title__main {
@include oPrivateTypographySans($weight: 'semibold');
@include oPrivateTypographySans($weight: 'semibold', $scale: 1);
display: block;
}

Expand All @@ -46,7 +46,8 @@

.o-forms-input__label__prompt,
.o-forms-title__prompt {
@include oPrivateTypographySans($scale: -1);
@include oPrivateTypographySans($scale: 1);
margin-top: oPrivateFoundationGet('o3-spacing-5xs');
color: _oFormsGet('default-prompt-text');
display: block;
}
Expand Down
10 changes: 6 additions & 4 deletions components/o-forms/src/scss/shared/_single-inputs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,15 @@
/// @param {Boolean} $disabled Whether to output disabled state styling
/// @output base styles for select, textarea and text input
@mixin _oFormsInputBase($disabled) {
font-family: inherit;
font-size: inherit;
font-family: oPrivateFoundationGet('o3-font-family-metric');
font-size: oPrivateFoundationGet('o3-font-size-metric2-1');
Copy link
Contributor

Choose a reason for hiding this comment

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

Getting ahead on OR-1195 here! The vertical alignment looks a touch low, but setting the line-height for this scale helps.

line-height: oPrivateFoundationGet('o3-font-lineheight-metric2-1');
background-color: _oFormsGet('default-background');
border: $_o-forms-border;
border-radius: oPrivateFoundationGet('o3-border-radius-1');
box-sizing: border-box;
min-height: $_o-forms-spacing-ten;
padding: $_o-forms-spacing-two;
min-height: $_o-forms-spacing-eleven;
padding: oPrivateFoundationGet('o3-spacing-4xs') oPrivateFoundationGet('o3-spacing-2xs');
width: 100%;

@if $disabled {
Expand Down
4 changes: 2 additions & 2 deletions components/o-forms/src/scss/shared/_validity.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,11 @@
}

.o-forms-input__error {
@include oPrivateTypographySans($scale: -1);
@include oPrivateTypographySans($scale: 1);
color: _oFormsGet('invalid-base');
display: block;
position: relative;
margin-top: $_o-forms-spacing-one;
margin-top: oPrivateFoundationGet('o3-spacing-3xs');
margin-bottom: -$_o-forms-spacing-five;
}
}
Expand Down
3 changes: 2 additions & 1 deletion components/o-forms/src/scss/shared/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
$o-forms-is-silent: true !default;

$_o-forms-border: 1px solid _oFormsGet('default-border');
$_o-forms-border: oPrivateFoundationGet('_o3-form-input-border');

$_o-forms-spacing-half: div(oPrivateSpacingByIncrement(1), 2); //2px
$_o-forms-spacing-one: oPrivateSpacingByIncrement(1); // 4px
Expand All @@ -13,6 +13,7 @@ $_o-forms-spacing-seven: oPrivateSpacingByIncrement(7); // 28px
$_o-forms-spacing-eight: oPrivateSpacingByIncrement(8); // 32px
$_o-forms-spacing-nine: oPrivateSpacingByIncrement(9); // 36px
$_o-forms-spacing-ten: oPrivateSpacingByIncrement(10); // 40px
$_o-forms-spacing-eleven: oPrivateSpacingByIncrement(11); // 44px

$_o-forms-checkbox-radio-width: oPrivateSpacingByIncrement(6);
$_o-forms-spacing-controls: $_o-forms-spacing-nine + $_o-forms-spacing-half;
10 changes: 5 additions & 5 deletions components/o-private-foundation/src/scss/tokens/core.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,6 @@

$tokens: (
'do-not-use': rgba(0, 0, 0, 0),
'o3-border-radius-1': 4px,
'o3-border-radius-2': 6px,
// FT Pink is used for the FT logo
'o3-color-palette-ft-pink': #fcd0b1,
'o3-color-palette-ft-grey': #333333,
Expand Down Expand Up @@ -420,10 +418,12 @@ $tokens: (
'_o3-form-color-use-case-selected-hover': #0a5e66,
'_o3-form-color-use-case-selected-active': #052f33,
'_o3-form-color-use-case-selected-disabled': #9ec0bd,
'_o3-form-input-border': 2px solid #b3a9a0,
'_o3-form-input-border-error': 2px solid #cc0000,
'_o3-form-input-border-radius': 6px,
'_o3-form-input-border': 1.5px solid #b3a9a0,
'_o3-form-input-border-error': 1.5px solid #cc0000,
'_o3-form-input-border-radius': 4px,
'_o3-form-error-summary-background-color': rgba(204, 0, 0, 0.14),
'o3-border-radius-1': 4px,
'o3-border-radius-2': 6px,
'o3-font-family-metric': 'metric 2 VF',
'o3-font-family-financier-display': 'financier display VF',
'o3-font-family-georgia': georgia,
Expand Down
6 changes: 3 additions & 3 deletions components/o-private-foundation/src/scss/tokens/internal.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -292,9 +292,9 @@ $tokens: (
'o3-typography-use-case-label-line-height': 20px,
// Use this style for labels such as badges and metadata in teasers and toppers (e.g., "Live," "Premium," or the main timestamp). Avoid using full sentences.
'o3-typography-use-case-label-text-case': uppercase,
'_o3-form-input-border': 2px solid #b3b3b3,
'_o3-form-input-border-error': 2px solid #cc0000,
'_o3-form-input-border-radius': 6px,
'_o3-form-input-border': 1.5px solid #b3b3b3,
'_o3-form-input-border-error': 1.5px solid #cc0000,
'_o3-form-input-border-radius': 4px,
'_o3-form-error-summary-background-color': rgba(204, 0, 0, 0.14),
'_o3-form-color-use-case-background': #ffffff,
'_o3-form-color-use-case-background-disabled': #e6e6e6,
Expand Down
10 changes: 5 additions & 5 deletions components/o-private-foundation/src/scss/tokens/professional.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -304,8 +304,6 @@ $tokens: (
'_o3-editorial-typography-big-number-title-font-weight': 700,
'_o3-editorial-typography-big-number-title-font-size': 48px,
'_o3-editorial-typography-big-number-title-line-height': 56px,
'o3-border-radius-1': 4px,
'o3-border-radius-2': 6px,
'o3-font-family-metric': 'metric 2 VF',
'o3-font-family-financier-display': 'financier display VF',
'o3-font-family-georgia': georgia,
Expand Down Expand Up @@ -372,6 +370,8 @@ $tokens: (
'o3-focus-use-case-ring-inverse-outer': 0px 0px 0px 8px #ffffff,
'o3-focus-use-case-outline-color': 0px 0px 0px 2px #807973,
'o3-focus-use-case-outline-inverse-color': 0px 0px 0px 2px #ffffff,
'o3-border-radius-1': 4px,
'o3-border-radius-2': 6px,
'_o3-button-primary-standard-color': #ffffff,
'_o3-button-primary-standard-background': #262a33,
'_o3-button-primary-standard-border': rgba(255, 255, 255, 0),
Expand Down Expand Up @@ -459,9 +459,9 @@ $tokens: (
'_o3-form-color-use-case-selected-hover': #515257,
'_o3-form-color-use-case-selected-active': #7d7a7a,
'_o3-form-color-use-case-selected-disabled': #d4c9c1,
'_o3-form-input-border': 2px solid #b3a9a0,
'_o3-form-input-border-error': 2px solid #cc0000,
'_o3-form-input-border-radius': 6px,
'_o3-form-input-border': 1.5px solid #b3a9a0,
'_o3-form-input-border-error': 1.5px solid #cc0000,
'_o3-form-input-border-radius': 4px,
'_o3-form-error-summary-background-color': rgba(204, 0, 0, 0.14),
'o3-icon-at': url("data:image/svg+xml,%3Csvg%20viewBox=%220%200%201024%201024%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20fill-rule=%22evenodd%22%20clip-rule=%22evenodd%22%20d=%22M575.9%20171.2H448.1C295.172%20171.2%20171.2%20295.172%20171.2%20448.1V575.9C171.2%20728.828%20295.172%20852.8%20448.1%20852.8H575.9C602.384%20852.8%20628%20849.082%20652.254%20842.139C666.869%20837.955%20682.4%20848.337%20682.4%20863.539V906.347C682.4%20915.701%20676.313%20924.023%20667.26%20926.376C638.075%20933.963%20607.459%20938%20575.9%20938H448.1C248.118%20938%2086%20775.882%2086%20575.9V448.1C86%20248.118%20248.118%2086%20448.1%2086H575.9C775.882%2086%20938%20248.118%20938%20448.1V597.197C937.999%20679.542%20871.245%20746.297%20788.9%20746.297C732.022%20746.297%20682.584%20714.45%20657.443%20667.614C619.373%20703.21%20568.231%20725%20512%20725C394.363%20725%20299%20629.637%20299%20512C299%20394.363%20394.363%20299%20512%20299C559.951%20299%20604.201%20314.845%20639.8%20341.584C639.808%20329.828%20649.341%20320.3%20661.1%20320.3H703.7C715.464%20320.3%20725%20329.836%20725%20341.6V597.215C725.009%20632.498%20753.615%20661.097%20788.9%20661.097C824.185%20661.097%20852.791%20632.48%20852.8%20597.197V448.1C852.8%20295.172%20728.828%20171.2%20575.9%20171.2ZM639.8%20512C639.8%20441.418%20582.582%20384.2%20512%20384.2C441.418%20384.2%20384.2%20441.418%20384.2%20512C384.2%20582.582%20441.418%20639.8%20512%20639.8C582.582%20639.8%20639.8%20582.582%20639.8%20512Z%22%20fill=%22black%22/%3E%3C/svg%3E"),
'o3-icon-book': url("data:image/svg+xml,%3Csvg%20viewBox=%220%200%201024%201024%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20fill-rule=%22evenodd%22%20clip-rule=%22evenodd%22%20d=%22M512%20871.126C517.342%20871.133%20522.536%20870.12%20527.357%20868.248L881.8%20742.492C890.312%20739.472%20896%20731.419%20896%20722.387L896%20158.218C896%20143.485%20881.419%20133.186%20867.533%20138.113L512%20264.256L156.467%20138.113C142.581%20133.186%20128%20143.485%20128%20158.218L128%20722.387C128%20731.419%20133.688%20739.472%20142.2%20742.492L496.643%20868.248C501.463%20870.12%20506.658%20871.133%20512%20871.126ZM554.667%20768.013L810.667%20677.185L810.667%20248.834L554.667%20339.663L554.667%20768.013ZM469.333%20768.013L469.333%20339.663L213.333%20248.834L213.333%20677.185L469.333%20768.013Z%22%20fill=%22black%22/%3E%3C/svg%3E"),
Expand Down
10 changes: 5 additions & 5 deletions components/o-private-foundation/src/scss/tokens/sustainable-views.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,6 @@
*/

$tokens: (
'o3-border-radius-1': 4px,
'o3-border-radius-2': 6px,
'o3-spacing-5xs': 4px,
'o3-spacing-4xs': 8px,
'o3-spacing-3xs': 12px,
Expand Down Expand Up @@ -338,9 +336,9 @@ $tokens: (
'o3-typography-use-case-body-content-link-font-size': 24px,
// Use this style only for the body copy of content pages, such as articles, live news and other content experience page.
'o3-typography-use-case-body-content-link-line-height': 32px,
'_o3-form-input-border': 2px solid #b3a9a0,
'_o3-form-input-border-error': 2px solid #cc0000,
'_o3-form-input-border-radius': 6px,
'_o3-form-input-border': 1.5px solid #b3a9a0,
'_o3-form-input-border-error': 1.5px solid #cc0000,
'_o3-form-input-border-radius': 4px,
'_o3-form-error-summary-background-color': rgba(204, 0, 0, 0.14),
'_o3-form-color-use-case-background': #ffffff,
'_o3-form-color-use-case-background-disabled': #e6d9ce,
Expand Down Expand Up @@ -420,6 +418,8 @@ $tokens: (
'o3-focus-use-case-ring-inverse-outer': 0px 0px 0px 8px #ffffff,
'o3-focus-use-case-outline-color': 0px 0px 0px 2px #807973,
'o3-focus-use-case-outline-inverse-color': 0px 0px 0px 2px #ffffff,
'o3-border-radius-1': 4px,
'o3-border-radius-2': 6px,
'o3-icon-at': url("data:image/svg+xml,%3Csvg%20viewBox=%220%200%201024%201024%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20fill-rule=%22evenodd%22%20clip-rule=%22evenodd%22%20d=%22M575.9%20171.2H448.1C295.172%20171.2%20171.2%20295.172%20171.2%20448.1V575.9C171.2%20728.828%20295.172%20852.8%20448.1%20852.8H575.9C602.384%20852.8%20628%20849.082%20652.254%20842.139C666.869%20837.955%20682.4%20848.337%20682.4%20863.539V906.347C682.4%20915.701%20676.313%20924.023%20667.26%20926.376C638.075%20933.963%20607.459%20938%20575.9%20938H448.1C248.118%20938%2086%20775.882%2086%20575.9V448.1C86%20248.118%20248.118%2086%20448.1%2086H575.9C775.882%2086%20938%20248.118%20938%20448.1V597.197C937.999%20679.542%20871.245%20746.297%20788.9%20746.297C732.022%20746.297%20682.584%20714.45%20657.443%20667.614C619.373%20703.21%20568.231%20725%20512%20725C394.363%20725%20299%20629.637%20299%20512C299%20394.363%20394.363%20299%20512%20299C559.951%20299%20604.201%20314.845%20639.8%20341.584C639.808%20329.828%20649.341%20320.3%20661.1%20320.3H703.7C715.464%20320.3%20725%20329.836%20725%20341.6V597.215C725.009%20632.498%20753.615%20661.097%20788.9%20661.097C824.185%20661.097%20852.791%20632.48%20852.8%20597.197V448.1C852.8%20295.172%20728.828%20171.2%20575.9%20171.2ZM639.8%20512C639.8%20441.418%20582.582%20384.2%20512%20384.2C441.418%20384.2%20384.2%20441.418%20384.2%20512C384.2%20582.582%20441.418%20639.8%20512%20639.8C582.582%20639.8%20639.8%20582.582%20639.8%20512Z%22%20fill=%22black%22/%3E%3C/svg%3E"),
'o3-icon-book': url("data:image/svg+xml,%3Csvg%20viewBox=%220%200%201024%201024%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20fill-rule=%22evenodd%22%20clip-rule=%22evenodd%22%20d=%22M512%20871.126C517.342%20871.133%20522.536%20870.12%20527.357%20868.248L881.8%20742.492C890.312%20739.472%20896%20731.419%20896%20722.387L896%20158.218C896%20143.485%20881.419%20133.186%20867.533%20138.113L512%20264.256L156.467%20138.113C142.581%20133.186%20128%20143.485%20128%20158.218L128%20722.387C128%20731.419%20133.688%20739.472%20142.2%20742.492L496.643%20868.248C501.463%20870.12%20506.658%20871.133%20512%20871.126ZM554.667%20768.013L810.667%20677.185L810.667%20248.834L554.667%20339.663L554.667%20768.013ZM469.333%20768.013L469.333%20339.663L213.333%20248.834L213.333%20677.185L469.333%20768.013Z%22%20fill=%22black%22/%3E%3C/svg%3E"),
'o3-icon-bookmark-filled': url("data:image/svg+xml,%3Csvg%20viewBox=%220%200%201024%201024%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20fill-rule=%22evenodd%22%20clip-rule=%22evenodd%22%20d=%22M256%20106.667C256%2094.8852%20265.551%2085.334%20277.333%2085.334H746.667C758.449%2085.334%20768%2094.8853%20768%20106.667V904.837C768%20923.843%20745.021%20933.361%20731.582%20919.922L512.354%20700.694C512.158%20700.499%20511.842%20700.499%20511.646%20700.694L292.418%20919.922C278.979%20933.361%20256%20923.843%20256%20904.837V106.667Z%22%20fill=%22black%22/%3E%3C/svg%3E"),
Expand Down
Loading
Loading