Skip to content

Commit

Permalink
color and layout update
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexyakir
alexyakir committed Feb 2, 2024
1 parent 897d17a commit ffa6adf
Show file tree
Hide file tree
Showing 2 changed files with 9 additions and 5 deletions.
12 changes: 8 additions & 4 deletions .storybook/preview-head.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
background-color: var(--fui-color-surface-base);
}
.sbdocs.sbdocs-content {
max-width: 600px;
max-width: 650px;
outline: 10px solid rgba(130, 130, 130, 0.2);
border-radius: 4px;
outline-offset: 20px;
Expand All @@ -43,19 +43,23 @@
font-size: 23px;
color: #7955e4;
}


[data-theme="light"] .sbdocs-title::before {
content: url('data:image/svg+xml,<svg width="23" height="24" viewBox="0 0 23 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.4802 10.3736C10.9879 10.8813 11.811 10.8813 12.3187 10.3736L16.1371 6.55523C16.6448 6.04754 16.6448 5.22443 16.1371 4.71675L12.4601 1.03979C11.8744 0.454006 10.9246 0.454006 10.3388 1.03979L6.66187 4.71675C6.15419 5.22443 6.15419 6.04754 6.66187 6.55523L10.4802 10.3736ZM5.95477 16.7376C5.44709 17.2453 4.62398 17.2453 4.1163 16.7376L0.43934 13.0607C-0.146447 12.4749 -0.146447 11.5251 0.43934 10.9393L4.11629 7.26238C4.62398 6.7547 5.44709 6.7547 5.95477 7.26238L9.77315 11.0808C10.2808 11.5884 10.2808 12.4115 9.77315 12.9192L5.95477 16.7376ZM16.8442 16.7376C17.3519 17.2453 18.175 17.2453 18.6827 16.7376L22.3596 13.0607C22.9454 12.4749 22.9454 11.5251 22.3596 10.9393L18.6827 7.26238C18.175 6.7547 17.3519 6.7547 16.8442 7.26238L13.0258 11.0808C12.5182 11.5884 12.5182 12.4116 13.0258 12.9192L16.8442 16.7376ZM10.3388 22.9602C10.9246 23.546 11.8744 23.546 12.4602 22.9602L16.1371 19.2833C16.6448 18.7756 16.6448 17.9525 16.1371 17.4448L12.3187 13.6264C11.8111 13.1187 10.9879 13.1187 10.4803 13.6264L6.66189 17.4448C6.1542 17.9525 6.1542 18.7756 6.66189 19.2833L10.3388 22.9602Z" fill="%23714CE0"/></svg>');
color: red;
content: url('data:image/svg+xml,<svg width="23" height="24" viewBox="0 0 23 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.4802 10.3736C10.9879 10.8813 11.811 10.8813 12.3187 10.3736L16.1371 6.55523C16.6448 6.04754 16.6448 5.22443 16.1371 4.71675L12.4601 1.03979C11.8744 0.454006 10.9246 0.454006 10.3388 1.03979L6.66187 4.71675C6.15419 5.22443 6.15419 6.04754 6.66187 6.55523L10.4802 10.3736ZM5.95477 16.7376C5.44709 17.2453 4.62398 17.2453 4.1163 16.7376L0.43934 13.0607C-0.146447 12.4749 -0.146447 11.5251 0.43934 10.9393L4.11629 7.26238C4.62398 6.7547 5.44709 6.7547 5.95477 7.26238L9.77315 11.0808C10.2808 11.5884 10.2808 12.4115 9.77315 12.9192L5.95477 16.7376ZM16.8442 16.7376C17.3519 17.2453 18.175 17.2453 18.6827 16.7376L22.3596 13.0607C22.9454 12.4749 22.9454 11.5251 22.3596 10.9393L18.6827 7.26238C18.175 6.7547 17.3519 6.7547 16.8442 7.26238L13.0258 11.0808C12.5182 11.5884 12.5182 12.4116 13.0258 12.9192L16.8442 16.7376ZM10.3388 22.9602C10.9246 23.546 11.8744 23.546 12.4602 22.9602L16.1371 19.2833C16.6448 18.7756 16.6448 17.9525 16.1371 17.4448L12.3187 13.6264C11.8111 13.1187 10.9879 13.1187 10.4803 13.6264L6.66189 17.4448C6.1542 17.9525 6.1542 18.7756 6.66189 19.2833L10.3388 22.9602Z" fill="%23714CE0"/></svg>');
}



[data-theme="dark"] .sbdocs-title::before {
content: url('');
color: red;
content: url('data:image/svg+xml,<svg width="23" height="24" viewBox="0 0 23 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.4802 10.3736C10.9879 10.8813 11.811 10.8813 12.3187 10.3736L16.1371 6.55523C16.6448 6.04754 16.6448 5.22443 16.1371 4.71675L12.4601 1.03979C11.8744 0.454006 10.9246 0.454006 10.3388 1.03979L6.66187 4.71675C6.15419 5.22443 6.15419 6.04754 6.66187 6.55523L10.4802 10.3736ZM5.95477 16.7376C5.44709 17.2453 4.62398 17.2453 4.1163 16.7376L0.43934 13.0607C-0.146447 12.4749 -0.146447 11.5251 0.43934 10.9393L4.11629 7.26238C4.62398 6.7547 5.44709 6.7547 5.95477 7.26238L9.77315 11.0808C10.2808 11.5884 10.2808 12.4115 9.77315 12.9192L5.95477 16.7376ZM16.8442 16.7376C17.3519 17.2453 18.175 17.2453 18.6827 16.7376L22.3596 13.0607C22.9454 12.4749 22.9454 11.5251 22.3596 10.9393L18.6827 7.26238C18.175 6.7547 17.3519 6.7547 16.8442 7.26238L13.0258 11.0808C12.5182 11.5884 12.5182 12.4116 13.0258 12.9192L16.8442 16.7376ZM10.3388 22.9602C10.9246 23.546 11.8744 23.546 12.4602 22.9602L16.1371 19.2833C16.6448 18.7756 16.6448 17.9525 16.1371 17.4448L12.3187 13.6264C11.8111 13.1187 10.9879 13.1187 10.4803 13.6264L6.66189 17.4448C6.1542 17.9525 6.1542 18.7756 6.66189 19.2833L10.3388 22.9602Z" fill="%239370FA"/></svg>');
}

.sbdocs-title::before {
display: block;
position: relative;
fill: red;
top: 4px;
left: 0;
float: left;
Expand Down
2 changes: 1 addition & 1 deletion src/components/fui-button/fui-button.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const meta = {
},
docs: {
description: {
component: "These button styles are well-known, user-friendly, and feature a distinct visual hierarchy that doesn't rely solely on color. Show people how significant actions are by setting: primary, secondary or tertiary hierarchy. You might also need varying button sizes, depending on the interface's complexity. Use actionType to provide feedback about the outcome of actions."
component: "Help people take action by showing how significant they are using: primary, secondary or tertiary hierarchy. You might also need varying button sizes, depending on the interface's complexity. Use actionType to provide feedback about the outcome of actions."
}
}
},
Expand Down

0 comments on commit ffa6adf

Please sign in to comment.