Page MenuHomePhorge
Files F85833200

No OneTemporary
Actions

Authored By
Unknown
Size
10 KB
Referenced Files
None
Subscribers
None

View Options

diff --git a/src/components/button.style.js b/src/components/button.style.js
index 95ef3e4039..248da8bbd8 100644
--- a/src/components/button.style.js
+++ b/src/components/button.style.js
@@ -1,122 +1,122 @@
export default {
name: 'Button', // Name of the component
selector: '.button-default', // CSS selector/prefix
// outOfTreeSelector: '' // out-of-tree selector is used when other components are laid over it but it's not part of the tree, see Underlay component
// States, system witll calculate ALL possible combinations of those and prepend "normal" to them + standalone "normal" state
states: {
// States are a bit expensive - the amount of combinations generated is about (1/6)n^3+n, so adding more state increased number of combination by an order of magnitude!
// All states inherit from "normal" state, there is no other inheirtance, i.e. hover+disabled only inherits from "normal", not from hover nor disabled.
// However, cascading still works, so resulting state will be result of merging of all relevant states/variants
// normal: '' // normal state is implicitly added, it is always included
toggled: '.toggled',
focused: ':focus-visible',
pressed: ':focus:active',
hover: ':hover:not(:disabled)',
disabled: ':disabled'
},
// Variants are mutually exclusive, each component implicitly has "normal" variant, and all other variants inherit from it.
variants: {
// Variants save on computation time since adding new variant just adds one more "set".
// normal: '', // you can override normal variant, it will be appenended to the main class
danger: '.danger'
// Overall the compuation difficulty is N*((1/6)M^3+M) where M is number of distinct states and N is number of variants.
// This (currently) is further multipled by number of places where component can exist.
},
editor: {
aspect: '2 / 1'
},
// This lists all other components that can possibly exist within one. Recursion is currently not supported (and probably won't be supported ever).
validInnerComponents: [
'Text',
'Icon'
],
// Default rules, used as "default theme", essentially.
defaultRules: [
{
component: 'Root',
directives: {
- '--defaultButtonHoverGlow': 'shadow | 0 0 4 --text / 0.5',
- '--defaultButtonFocusGlow': 'shadow | 0 0 4 4 --link / 0.5',
- '--defaultButtonShadow': 'shadow | 0 0 2 #000000',
- '--defaultButtonBevel': 'shadow | $borderSide(#FFFFFF top 0.2 2), $borderSide(#000000 bottom 0.2 2)',
- '--pressedButtonBevel': 'shadow | $borderSide(#FFFFFF bottom 0.2 2), $borderSide(#000000 top 0.2 2)'
+ '--buttonDefaultHoverGlow': 'shadow | 0 0 4 --text / 0.5',
+ '--buttonDefaultFocusGlow': 'shadow | 0 0 4 4 --link / 0.5',
+ '--buttonDefaultShadow': 'shadow | 0 0 2 #000000',
+ '--buttonDefaultBevel': 'shadow | $borderSide(#FFFFFF top 0.2 2), $borderSide(#000000 bottom 0.2 2)',
+ '--buttonPressedBevel': 'shadow | $borderSide(#FFFFFF bottom 0.2 2), $borderSide(#000000 top 0.2 2)'
}
},
{
// component: 'Button', // no need to specify components every time unless you're specifying how other component should look
// like within it
directives: {
background: '--fg',
- shadow: ['--defaultButtonShadow', '--defaultButtonBevel'],
+ shadow: ['--buttonDefaultShadow', '--buttonDefaultBevel'],
roundness: 3
}
},
{
state: ['hover'],
directives: {
- shadow: ['--defaultButtonHoverGlow', '--defaultButtonBevel']
+ shadow: ['--buttonDefaultHoverGlow', '--buttonDefaultBevel']
}
},
{
state: ['focused'],
directives: {
- shadow: ['--defaultButtonFocusGlow', '--defaultButtonBevel']
+ shadow: ['--buttonDefaultFocusGlow', '--buttonDefaultBevel']
}
},
{
state: ['pressed'],
directives: {
- shadow: ['--defaultButtonShadow', '--pressedButtonBevel']
+ shadow: ['--buttonDefaultShadow', '--buttonPressedBevel']
}
},
{
state: ['pressed', 'hover'],
directives: {
- shadow: ['--pressedButtonBevel', '--defaultButtonHoverGlow']
+ shadow: ['--buttonPressedBevel', '--buttonDefaultHoverGlow']
}
},
{
state: ['toggled'],
directives: {
background: '--inheritedBackground,-14.2',
- shadow: ['--defaultButtonShadow', '--pressedButtonBevel']
+ shadow: ['--buttonDefaultShadow', '--buttonPressedBevel']
}
},
{
state: ['toggled', 'hover'],
directives: {
background: '--inheritedBackground,-14.2',
- shadow: ['--defaultButtonHoverGlow', '--pressedButtonBevel']
+ shadow: ['--buttonDefaultHoverGlow', '--buttonPressedBevel']
}
},
{
state: ['disabled'],
directives: {
background: '$blend(--inheritedBackground 0.25 --parent)',
- shadow: ['--defaultButtonBevel']
+ shadow: ['--buttonDefaultBevel']
}
},
{
component: 'Text',
parent: {
component: 'Button',
state: ['disabled']
},
directives: {
textOpacity: 0.25,
textOpacityMode: 'blend'
}
},
{
component: 'Icon',
parent: {
component: 'Button',
state: ['disabled']
},
directives: {
textOpacity: 0.25,
textOpacityMode: 'blend'
}
}
]
}
diff --git a/src/components/input.style.js b/src/components/input.style.js
index c60ac1e4ee..087de1e145 100644
--- a/src/components/input.style.js
+++ b/src/components/input.style.js
@@ -1,94 +1,94 @@
export default {
name: 'Input',
selector: '.input',
states: {
hover: ':hover:not(.disabled)',
focused: ':focus-within',
disabled: '.disabled'
},
variants: {
checkbox: '.-checkbox',
radio: '.-radio'
},
validInnerComponents: [
'Text',
'Icon'
],
defaultRules: [
{
component: 'Root',
directives: {
- '--defaultInputBevel': 'shadow | $borderSide(#FFFFFF bottom 0.2), $borderSide(#000000 top 0.2)',
- '--defaultInputHoverGlow': 'shadow | 0 0 4 --text / 0.5',
- '--defaultInputFocusGlow': 'shadow | 0 0 4 4 --link / 0.5'
+ '--inputDefaultBevel': 'shadow | $borderSide(#FFFFFF bottom 0.2), $borderSide(#000000 top 0.2)',
+ '--inputDefaultHoverGlow': 'shadow | 0 0 4 --text / 0.5',
+ '--inputDefaultFocusGlow': 'shadow | 0 0 4 4 --link / 0.5'
}
},
{
variant: 'checkbox',
directives: {
roundness: 1
}
},
{
directives: {
'--font': 'generic | inherit',
background: '--fg, -5',
roundness: 3,
shadow: [{
x: 0,
y: 0,
blur: 2,
spread: 0,
color: '#000000',
alpha: 1
- }, '--defaultInputBevel']
+ }, '--inputDefaultBevel']
}
},
{
state: ['hover'],
directives: {
- shadow: ['--defaultInputHoverGlow', '--defaultInputBevel']
+ shadow: ['--inputDefaultHoverGlow', '--inputDefaultBevel']
}
},
{
state: ['focused'],
directives: {
- shadow: ['--defaultInputFocusGlow', '--defaultInputBevel']
+ shadow: ['--inputDefaultFocusGlow', '--inputDefaultBevel']
}
},
{
state: ['focused', 'hover'],
directives: {
- shadow: ['--defaultInputFocusGlow', '--defaultInputHoverGlow', '--defaultInputBevel']
+ shadow: ['--inputDefaultFocusGlow', '--inputDefaultHoverGlow', '--inputDefaultBevel']
}
},
{
state: ['disabled'],
directives: {
background: '--parent'
}
},
{
component: 'Text',
parent: {
component: 'Input',
state: ['disabled']
},
directives: {
textOpacity: 0.25,
textOpacityMode: 'blend'
}
},
{
component: 'Icon',
parent: {
component: 'Input',
state: ['disabled']
},
directives: {
textOpacity: 0.25,
textOpacityMode: 'blend'
}
}
]
}
diff --git a/src/components/tab_switcher/tab.style.js b/src/components/tab_switcher/tab.style.js
index 217d42ebc2..814d330472 100644
--- a/src/components/tab_switcher/tab.style.js
+++ b/src/components/tab_switcher/tab.style.js
@@ -1,78 +1,78 @@
export default {
name: 'Tab', // Name of the component
selector: '.tab', // CSS selector/prefix
states: {
active: '.active',
hover: ':hover:not(.disabled)',
disabled: '.disabled'
},
validInnerComponents: [
'Text',
'Icon'
],
defaultRules: [
{
directives: {
background: '--fg',
- shadow: ['--defaultButtonShadow', '--defaultButtonBevel'],
+ shadow: ['--buttonDefaultShadow', '--buttonDefaultBevel'],
roundness: 3
}
},
{
state: ['hover'],
directives: {
- shadow: ['--defaultButtonHoverGlow', '--defaultButtonBevel']
+ shadow: ['--buttonDefaultHoverGlow', '--buttonDefaultBevel']
}
},
{
state: ['active'],
directives: {
opacity: 0
}
},
{
state: ['hover', 'active'],
directives: {
- shadow: ['--defaultButtonShadow', '--defaultButtonBevel']
+ shadow: ['--buttonDefaultShadow', '--buttonDefaultBevel']
}
},
{
state: ['disabled'],
directives: {
background: '$blend(--inheritedBackground 0.25 --parent)',
- shadow: ['--defaultButtonBevel']
+ shadow: ['--buttonDefaultBevel']
}
},
{
component: 'Text',
parent: {
component: 'Tab',
state: ['disabled']
},
directives: {
textOpacity: 0.25,
textOpacityMode: 'blend'
}
},
{
component: 'Icon',
parent: {
component: 'Tab',
state: ['active']
},
directives: {
textColor: '--text'
}
},
{
component: 'Icon',
parent: {
component: 'Tab',
state: ['active', 'hover']
},
directives: {
textColor: '--text'
}
}
]
}

File Metadata

Mime Type
text/x-diff
Expires
Mon, Nov 2, 10:14 AM (1 h, 50 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
1804432
Default Alt Text
(10 KB)

Event Timeline