Dadido3/D3vugu-components
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
cd35a61dc8
D3vugu-components/page-colors.vugu

131 lines
5.4 KiB
Plaintext
Raw Normal View History

Rework colors and theming - Add example colors page - Store all theme colors in CSS variables - Add layer container component - Use accent color for active pagination page - Automatically use layer-1 color in sidebar, sidebar menu and code containers - Adjust tag padding - Add base color scheme/theme
2023-05-18 11:55:48 +00:00
<div>
<layout:Container>
<h2>Signal colors</h2>
<p>Colors can be set via special color classes:</p>
<ul>
<li><view:CodeInline>d3c-color-layer-0</view:CodeInline> This is the default color scheme.</li>
<li><view:CodeInline>d3c-color-layer-1</view:CodeInline></li>
<li><view:CodeInline>d3c-color-layer-2</view:CodeInline></li>
<li><view:CodeInline>d3c-color-success</view:CodeInline></li>
<li><view:CodeInline>d3c-color-success-faded</view:CodeInline></li>
<li><view:CodeInline>d3c-color-attention</view:CodeInline></li>
<li><view:CodeInline>d3c-color-attention-faded</view:CodeInline></li>
<li><view:CodeInline>d3c-color-caution</view:CodeInline></li>
<li><view:CodeInline>d3c-color-caution-faded</view:CodeInline></li>
<li><view:CodeInline>d3c-color-critical</view:CodeInline></li>
<li><view:CodeInline>d3c-color-critical-faded</view:CodeInline></li>
</ul>
<h2>Buttons</h2>
<view:Code>
<pre vg-content='"<input:Button class=\"d3c-color-success\">\n" +
Add input field and a lot of other fixes - Add input field and general data binding - Rename SymbolSlot to IconSlot - Remove d3c-color-accent - Update icons page - Add input example page - Update button to support highlighting - Update navigation entry to support highlighting - Add d3c-button-only-icon to button and let sidebar use that - Use d3c-button-transparent in sidebar - Add focus indicator to buttons - Rename CSS color variables and change definition of some - Let pagination use input:Button - Add some padding to the inline code component
2023-05-25 13:59:13 +00:00
" <vg-slot name=\"IconSlot\"><icons:LPlus></icons:LPlus></vg-slot>\n" +
Rework colors and theming - Add example colors page - Store all theme colors in CSS variables - Add layer container component - Use accent color for active pagination page - Automatically use layer-1 color in sidebar, sidebar menu and code containers - Adjust tag padding - Add base color scheme/theme
2023-05-18 11:55:48 +00:00
" <vg-slot name=\"DefaultSlot\">Successful action</vg-slot>\n" +
"</input:Button>"' style="margin: 0;"></pre>
</view:Code>
<div class="flex-container">
<input:Button class="d3c-color-success">
Add input field and a lot of other fixes - Add input field and general data binding - Rename SymbolSlot to IconSlot - Remove d3c-color-accent - Update icons page - Add input example page - Update button to support highlighting - Update navigation entry to support highlighting - Add d3c-button-only-icon to button and let sidebar use that - Use d3c-button-transparent in sidebar - Add focus indicator to buttons - Rename CSS color variables and change definition of some - Let pagination use input:Button - Add some padding to the inline code component
2023-05-25 13:59:13 +00:00
<vg-slot name="IconSlot"><icons:LPlus></icons:LPlus></vg-slot>
Rework colors and theming - Add example colors page - Store all theme colors in CSS variables - Add layer container component - Use accent color for active pagination page - Automatically use layer-1 color in sidebar, sidebar menu and code containers - Adjust tag padding - Add base color scheme/theme
2023-05-18 11:55:48 +00:00
<vg-slot name="DefaultSlot">Successful action</vg-slot>
</input:Button>
<input:Button class="d3c-color-attention">
Add input field and a lot of other fixes - Add input field and general data binding - Rename SymbolSlot to IconSlot - Remove d3c-color-accent - Update icons page - Add input example page - Update button to support highlighting - Update navigation entry to support highlighting - Add d3c-button-only-icon to button and let sidebar use that - Use d3c-button-transparent in sidebar - Add focus indicator to buttons - Rename CSS color variables and change definition of some - Let pagination use input:Button - Add some padding to the inline code component
2023-05-25 13:59:13 +00:00
<vg-slot name="IconSlot"><icons:LGlobe></icons:LGlobe></vg-slot>
Rework colors and theming - Add example colors page - Store all theme colors in CSS variables - Add layer container component - Use accent color for active pagination page - Automatically use layer-1 color in sidebar, sidebar menu and code containers - Adjust tag padding - Add base color scheme/theme
2023-05-18 11:55:48 +00:00
<vg-slot name="DefaultSlot">Highlighted action</vg-slot>
</input:Button>
<input:Button class="d3c-color-caution">
Add input field and a lot of other fixes - Add input field and general data binding - Rename SymbolSlot to IconSlot - Remove d3c-color-accent - Update icons page - Add input example page - Update button to support highlighting - Update navigation entry to support highlighting - Add d3c-button-only-icon to button and let sidebar use that - Use d3c-button-transparent in sidebar - Add focus indicator to buttons - Rename CSS color variables and change definition of some - Let pagination use input:Button - Add some padding to the inline code component
2023-05-25 13:59:13 +00:00
<vg-slot name="IconSlot"><icons:LInfoCircle></icons:LInfoCircle></vg-slot>
Rework colors and theming - Add example colors page - Store all theme colors in CSS variables - Add layer container component - Use accent color for active pagination page - Automatically use layer-1 color in sidebar, sidebar menu and code containers - Adjust tag padding - Add base color scheme/theme
2023-05-18 11:55:48 +00:00
<vg-slot name="DefaultSlot">Press with caution</vg-slot>
</input:Button>
<input:Button class="d3c-color-critical">
Add input field and a lot of other fixes - Add input field and general data binding - Rename SymbolSlot to IconSlot - Remove d3c-color-accent - Update icons page - Add input example page - Update button to support highlighting - Update navigation entry to support highlighting - Add d3c-button-only-icon to button and let sidebar use that - Use d3c-button-transparent in sidebar - Add focus indicator to buttons - Rename CSS color variables and change definition of some - Let pagination use input:Button - Add some padding to the inline code component
2023-05-25 13:59:13 +00:00
<vg-slot name="IconSlot"><icons:LWarning></icons:LWarning></vg-slot>
Rework colors and theming - Add example colors page - Store all theme colors in CSS variables - Add layer container component - Use accent color for active pagination page - Automatically use layer-1 color in sidebar, sidebar menu and code containers - Adjust tag padding - Add base color scheme/theme
2023-05-18 11:55:48 +00:00
<vg-slot name="DefaultSlot">Dangerous action</vg-slot>
</input:Button>
</div>
<div class="flex-container">
<input:Button class="d3c-color-success-faded">
Add input field and a lot of other fixes - Add input field and general data binding - Rename SymbolSlot to IconSlot - Remove d3c-color-accent - Update icons page - Add input example page - Update button to support highlighting - Update navigation entry to support highlighting - Add d3c-button-only-icon to button and let sidebar use that - Use d3c-button-transparent in sidebar - Add focus indicator to buttons - Rename CSS color variables and change definition of some - Let pagination use input:Button - Add some padding to the inline code component
2023-05-25 13:59:13 +00:00
<vg-slot name="IconSlot"><icons:LPlus></icons:LPlus></vg-slot>
Rework colors and theming - Add example colors page - Store all theme colors in CSS variables - Add layer container component - Use accent color for active pagination page - Automatically use layer-1 color in sidebar, sidebar menu and code containers - Adjust tag padding - Add base color scheme/theme
2023-05-18 11:55:48 +00:00
<vg-slot name="DefaultSlot">Successful action</vg-slot>
</input:Button>
<input:Button class="d3c-color-attention-faded">
Add input field and a lot of other fixes - Add input field and general data binding - Rename SymbolSlot to IconSlot - Remove d3c-color-accent - Update icons page - Add input example page - Update button to support highlighting - Update navigation entry to support highlighting - Add d3c-button-only-icon to button and let sidebar use that - Use d3c-button-transparent in sidebar - Add focus indicator to buttons - Rename CSS color variables and change definition of some - Let pagination use input:Button - Add some padding to the inline code component
2023-05-25 13:59:13 +00:00
<vg-slot name="IconSlot"><icons:LGlobe></icons:LGlobe></vg-slot>
Rework colors and theming - Add example colors page - Store all theme colors in CSS variables - Add layer container component - Use accent color for active pagination page - Automatically use layer-1 color in sidebar, sidebar menu and code containers - Adjust tag padding - Add base color scheme/theme
2023-05-18 11:55:48 +00:00
<vg-slot name="DefaultSlot">Highlighted action</vg-slot>
</input:Button>
<input:Button class="d3c-color-caution-faded">
Add input field and a lot of other fixes - Add input field and general data binding - Rename SymbolSlot to IconSlot - Remove d3c-color-accent - Update icons page - Add input example page - Update button to support highlighting - Update navigation entry to support highlighting - Add d3c-button-only-icon to button and let sidebar use that - Use d3c-button-transparent in sidebar - Add focus indicator to buttons - Rename CSS color variables and change definition of some - Let pagination use input:Button - Add some padding to the inline code component
2023-05-25 13:59:13 +00:00
<vg-slot name="IconSlot"><icons:LInfoCircle></icons:LInfoCircle></vg-slot>
Rework colors and theming - Add example colors page - Store all theme colors in CSS variables - Add layer container component - Use accent color for active pagination page - Automatically use layer-1 color in sidebar, sidebar menu and code containers - Adjust tag padding - Add base color scheme/theme
2023-05-18 11:55:48 +00:00
<vg-slot name="DefaultSlot">Press with caution</vg-slot>
</input:Button>
<input:Button class="d3c-color-critical-faded">
Add input field and a lot of other fixes - Add input field and general data binding - Rename SymbolSlot to IconSlot - Remove d3c-color-accent - Update icons page - Add input example page - Update button to support highlighting - Update navigation entry to support highlighting - Add d3c-button-only-icon to button and let sidebar use that - Use d3c-button-transparent in sidebar - Add focus indicator to buttons - Rename CSS color variables and change definition of some - Let pagination use input:Button - Add some padding to the inline code component
2023-05-25 13:59:13 +00:00
<vg-slot name="IconSlot"><icons:LWarning></icons:LWarning></vg-slot>
Rework colors and theming - Add example colors page - Store all theme colors in CSS variables - Add layer container component - Use accent color for active pagination page - Automatically use layer-1 color in sidebar, sidebar menu and code containers - Adjust tag padding - Add base color scheme/theme
2023-05-18 11:55:48 +00:00
<vg-slot name="DefaultSlot">Dangerous action</vg-slot>
</input:Button>
</div>
<h2>Tags</h2>
<view:Code>
<pre vg-content='"<view:Tag class=\"d3c-color-success\">This was a success</view:Tag>"' style="margin: 0;"></pre>
</view:Code>
<div class="flex-container">
<view:Tag class="d3c-color-success">This was a success</view:Tag>
<view:Tag class="d3c-color-attention">Attention needed</view:Tag>
<view:Tag class="d3c-color-caution">Warning</view:Tag>
<view:Tag class="d3c-color-critical">Something went wrong</view:Tag>
</div>
<div class="flex-container">
<view:Tag class="d3c-color-success-faded">This was a success</view:Tag>
<view:Tag class="d3c-color-attention-faded">Attention needed</view:Tag>
<view:Tag class="d3c-color-caution-faded">Warning</view:Tag>
<view:Tag class="d3c-color-critical-faded">Something went wrong</view:Tag>
</div>
<h2>Icons</h2>
<p>Icons will use the text color by default, if you need to change their stroke/fill coloring, use the <view:CodeInline>d3c-icon-use-color</view:CodeInline> class.</p>
<view:Code>
<pre vg-content='"<icons:LInfoCircle class=\"d3c-color-attention d3c-icon-use-color\"></icons:LInfoCircle>"' style="margin: 0;"></pre>
</view:Code>
<div class="flex-container" style="font-size: 2em;">
<icons:LInfoCircle class="d3c-color-attention d3c-icon-use-color"></icons:LInfoCircle>
<icons:LWarning class="d3c-color-critical d3c-icon-use-color"></icons:LWarning>
</div>
<h2>Containers</h2>
<layout:LayerContainer class="d3c-color-layer-1">
<span>This container uses the <view:CodeInline class="d3c-color-layer-2">d3c-color-layer-1</view:CodeInline> class. All child elements inherit the color scheme.</span>
<input:Button>
Add input field and a lot of other fixes - Add input field and general data binding - Rename SymbolSlot to IconSlot - Remove d3c-color-accent - Update icons page - Add input example page - Update button to support highlighting - Update navigation entry to support highlighting - Add d3c-button-only-icon to button and let sidebar use that - Use d3c-button-transparent in sidebar - Add focus indicator to buttons - Rename CSS color variables and change definition of some - Let pagination use input:Button - Add some padding to the inline code component
2023-05-25 13:59:13 +00:00
<vg-slot name="IconSlot"><icons:LPlus></icons:LPlus></vg-slot>
Rework colors and theming - Add example colors page - Store all theme colors in CSS variables - Add layer container component - Use accent color for active pagination page - Automatically use layer-1 color in sidebar, sidebar menu and code containers - Adjust tag padding - Add base color scheme/theme
2023-05-18 11:55:48 +00:00
<vg-slot name="DefaultSlot">Does inherit color</vg-slot>
</input:Button>
<input:Button class="d3c-color-layer-0">
Add input field and a lot of other fixes - Add input field and general data binding - Rename SymbolSlot to IconSlot - Remove d3c-color-accent - Update icons page - Add input example page - Update button to support highlighting - Update navigation entry to support highlighting - Add d3c-button-only-icon to button and let sidebar use that - Use d3c-button-transparent in sidebar - Add focus indicator to buttons - Rename CSS color variables and change definition of some - Let pagination use input:Button - Add some padding to the inline code component
2023-05-25 13:59:13 +00:00
<vg-slot name="IconSlot"><icons:LPlus></icons:LPlus></vg-slot>
Rework colors and theming - Add example colors page - Store all theme colors in CSS variables - Add layer container component - Use accent color for active pagination page - Automatically use layer-1 color in sidebar, sidebar menu and code containers - Adjust tag padding - Add base color scheme/theme
2023-05-18 11:55:48 +00:00
<vg-slot name="DefaultSlot">Doesn't inherit color</vg-slot>
</input:Button>
</layout:LayerContainer>
<layout:LayerContainer class="d3c-color-critical-faded">
<icons:LWarning></icons:LWarning> <span>Something bad happened!</span>
</layout:LayerContainer>
</layout:Container>
</div>
<style>
.flex-container {
margin: 0.5em 0;
display: flex;
flex-wrap: wrap;
gap: 0.5em;
}
.flex-container > * {
margin: 0;
}
</style>
<script type="application/x-go">
import (
"git.d3nexus.de/Dadido3/D3vugu-components/components/layout"
"git.d3nexus.de/Dadido3/D3vugu-components/components/view"
"git.d3nexus.de/Dadido3/D3vugu-components/components/input"
"git.d3nexus.de/Dadido3/D3vugu-components/icons"
)
type PageColors struct {}
</script>
Reference in New Issue Copy Permalink