/* This code is mainly generated by the Theme Designer,
therefore linting has been turned off. */
/* eslint-disable */
import 'ptcs-dropdown/ptcs-dropdown.js';
(() => {
// Search for parameter in the URL
function getParam(name) {
let value = null;
location.search
.substr(1)
.split('&')
.find(item => {
const pair = item.split('=');
if (pair[0] === name) {
value = decodeURIComponent(pair[1]);
}
});
return value;
}
// Load theme styling?
if (getParam('td-active')) {
console.log('ptcs-multi-theme: the theme designer handles theme styling');
return;
}
// Naive but compact implemention of lodash functions that the Theme Engine uses
/* eslint-disable no-confusing-arrow */
// eslint-disable-next-line no-unused-vars
var _;
(() => {
function __cloneDeep(obj) {
if (null === obj || 'object' !== typeof obj) {
return obj;
}
if (obj instanceof Array) {
return obj.map(item => __cloneDeep(item));
}
if (obj instanceof Object) {
const copy = {};
for (const k in obj) {
if (obj.hasOwnProperty(k)) {
copy[k] = __cloneDeep(obj[k]);
}
}
return copy;
}
throw new Error('Unable to copy obj! Unsupported type.');
}
function __get(obj, key, dflt) {
if (!obj || !(obj instanceof Object)) {
return dflt;
}
return obj.hasOwnProperty(key) ? obj[key] : dflt;
}
_ = {
forEach:   (a, f) => a instanceof Array ? a.forEach(f) : undefined,
trim:      s => s instanceof String ? s.trim() : String(s).trim(),
cloneDeep: __cloneDeep,
isBoolean: x => x === true || x === false,
isEmpty:   x => x === '' || x === undefined || x === null,
get:       __get
};
})();
/*
* The theme manager - font fallbacks
*/
// eslint-disable-next-line no-use-before-define
var ThemeEngine = ThemeEngine || {};
// JSON structure in font-fallback.json
var fontfallbackJson;
(() => {
var fontNames = null;
ThemeEngine.FontFallbackMgr = class {
constructor(delta, base) {
// One-time global init
if (!fontNames) {
fontNames = new Set();
_.forEach(fontfallbackJson.fonts, name => fontNames.add(name));
}
// Global or local base?
if (base) {
this.fontNames = new Set();
for (const k in base) {
this.fontNames.add(k);
}
this._base = ThemeEngine.FontFallbackMgr._copyMap(base);
} else {
this.fontNames = fontNames;
this._base = fontfallbackJson.map;
}
// Delta
this._delta = ThemeEngine.FontFallbackMgr._copyMap(delta || {});
this._deltaNames = {};
for (const k in delta) {
this._deltaNames[k] = true;
}
this._map = {};
}
remap(font, fallback) {
// eslint-disable-next-line no-unneeded-ternary
this._deltaNames[font] = fallback ? true : false;
this._delta[ThemeEngine.FontFallbackMgr.key(font)] = fallback;
// Drop existing maps: _very_ simple algorithm ... and rather poor
this._map = {};
}
map(font) {
let r = this._map[font];
if (r) {
return r;
}
const list = [];
try {
return this._createMap(font, list);
} catch (err) {
console.log(err.message);
this._map[font] = list.join(',');
}
return this._map[font];
}
eachFont(cb) {
fontNames.forEach(name => {
if (this._deltaNames[name] === undefined) {
cb(name);
}
});
for (const k in this._deltaNames) {
if (this._deltaNames[k]) {
cb(k);
}
}
}
_createMap(font, list) {
const _font = ThemeEngine.FontFallbackMgr.font(font);
if (list.find(item => item === _font)) {
throw Error('Font fallback loop: ' + font);
}
list.push(_font);
const key = ThemeEngine.FontFallbackMgr.key(font);
const fb = this._delta[key] || this._base[key];
if (fb) {
this._map[font] = _font + ',' + this._createMap(fb, list);
} else {
this._map[font] = _font;
}
return this._map[font];
}
static key(font) {
if (typeof font !== 'string') {
font = String(font);
}
return font.replace(/[ \n\t"]+/g, '').toLowerCase();
}
static font(_font) {
if (typeof _font !== 'string') {
_font = String(_font);
}
_font = _font.replace(/^[ \n\t"]+/, '').replace(/[ \n\t"]+$/, '').replace(/[ \n\t"]+/g, ' ');
return _font.indexOf(' ') >= 0 ? `"${_font}"` : _font;
}
static _copyMap(m) {
const r = {};
for (const k in m) {
r[ThemeEngine.FontFallbackMgr.key(k)] = m[k];
}
return r;
}
};
})();
/*
* Functions used by the theme manager
*/
// eslint-disable-next-line no-use-before-define
var ThemeEngine = ThemeEngine || {};
(() => {
// Convert RGB to HSV
function rgb2hsv(rgb) {
const r = rgb[0] / 255;
const g = rgb[1] / 255;
const b = rgb[2] / 255;
const a = rgb[3];
const v = Math.max(r, g, b);
const diff = v - Math.min(r, g, b);
const diffc = c => (v - c) / 6 / diff + 0.5;
let h, s;
if (diff === 0) {
h = s = 0;
} else {
const rdif = diffc(r);
const gdif = diffc(g);
const bdif = diffc(b);
s = diff / v;
if (r === v) {
h = bdif - gdif;
} else if (g === v) {
h = (1 / 3) + rdif - bdif;
} else if (b === v) {
h = (2 / 3) + gdif - rdif;
}
if (h < 0) {
h += 1;
} else if (h > 1) {
h -= 1;
}
}
return [
h * 360,
s * 100,
v * 100,
a
];
}
// Convert HSV to RGB
function hsv2rgb(hsv) {
const h = hsv[0] / 60;
const s = hsv[1] / 100;
let v = hsv[2] / 100;
const a = hsv[3];
const hi = Math.floor(h) % 6;
const f = h - Math.floor(h);
const p = 255 * v * (1 - s);
const q = 255 * v * (1 - (s * f));
const t = 255 * v * (1 - (s * (1 - f)));
v *= 255;
switch (hi) {
case 0:
return [v, t, p, a];
case 1:
return [q, v, p, a];
case 2:
return [p, v, t, a];
case 3:
return [p, q, v, a];
case 4:
return [t, p, v, a];
case 5:
return [v, p, q, a];
}
// Unreachable
return [0, 0, 0, 1];
}
// Convert s[ix] to hex value
function _hc(s, ix) {
var x = s.charCodeAt(ix);
if (0x30 <= x && x <= 0x39) {
return x - 0x30;
}
if (0x41 <= x && x <= 0x46) {
return x - 0x41 + 10;
}
if (0x61 <= x && x <= 0x66) {
return x - 0x61 + 10;
}
return 0;
}
// Convert '#rrggbb' to [r, g, b]
function rgbDecode(rgb) {
if (rgb.charAt(0) === '#') {
switch (rgb.length) {
case 7:
return [16 * _hc(rgb, 1) + _hc(rgb, 2), 16 * _hc(rgb, 3) + _hc(rgb, 4), 16 * _hc(rgb, 5) + _hc(rgb, 6), 1];
case 4:
return [16 * _hc(rgb, 1) + _hc(rgb, 1), 16 * _hc(rgb, 2) + _hc(rgb, 2), 16 * _hc(rgb, 3) + _hc(rgb, 3), 1];
case 2:
{
let t = _hc(rgb, 1);
t = 16 * t + t;
return [t, t, t, 1];
}
case 3:
{
let t = 16 * _hc(rgb, 1) + _hc(rgb, 2);
return [t, t, t, 1];
}
}
}
let m = /rgba\s*\(\s*([0-9]+(\.[0-9]*)?)\s*,\s*([0-9]+(\.[0-9]*)?)\s*,\s*([0-9]+(\.[0-9]*)?)\s*,\s*([0-9]+(\.[0-9]*)?)\s*\)\s*/g.exec(rgb);
if (m) {
return [Number(m[1]), Number(m[3]), Number(m[5]), Number(m[7])];
}
m = /rgb\s*\(\s*([0-9]+(\.[0-9]*)?)\s*,\s*([0-9]+(\.[0-9]*)?)\s*,\s*([0-9]+(\.[0-9]*)?)\s*\)/g.exec(rgb);
if (m) {
return [Number(m[1]), Number(m[3]), Number(m[5]), 1];
}
console.error('Unkown rgb color: ' + rgb);
// Handle invalid/unsupported colors as solid  black
return [0, 0, 0, 1];
}
const _hexchar = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'];
// Convert hex to character
function _hd(x) {
x = Math.round(x);
if (x < 0) {
return '00';
}
if (x > 255) {
return 'FF';
}
return _hexchar[Math.floor(x / 16)] + _hexchar[x % 16];
}
// Convert [r, g, b, a] to '#rrggbb' or rgba(r,g,b,a)
function rgbEncode(rgb) {
return rgb[3] === 1 ? '#' + _hd(rgb[0]) + _hd(rgb[1]) + _hd(rgb[2]) : `rgba(${rgb[0]},${rgb[1]},${rgb[2]},${rgb[3]})`;
}
// Adjust hue, saturation and brightness
function adjustColor(rgb, h, s, v) {
const hsv = rgb2hsv(rgbDecode(rgb));
return rgbEncode(hsv2rgb(
[
Math.max(Math.min(hsv[0] + h, 360), 0),
Math.max(Math.min(hsv[1] + s, 100), 0),
Math.max(Math.min(hsv[2] + v, 100), 0),
hsv[3]
]));
}
// Theme Manager functions
/* eslint-disable no-unused-vars */
ThemeEngine.themeMgrFunc = {
hover: ([rgb]) => {
return rgb ? adjustColor(rgb, 10, -20, -22) : '';
},
pressed: ([rgb]) => {
return rgb ? adjustColor(rgb, 0, 3, -31) : '';
},
disabled: ([rgb]) => {
if (!rgb) {
return '';
}
const hsv = rgb2hsv(rgbDecode(rgb));
return rgbEncode(hsv2rgb(
[
Math.max(Math.min(hsv[0] + 14, 360), 0),
8,
74,
hsv[3]
]));
},
disabledSelected: ([rgb]) => {
if (!rgb) {
return '';
}
const hsv = rgb2hsv(rgbDecode(rgb));
return rgbEncode(hsv2rgb(
[
Math.max(Math.min(hsv[0] + 4, 360), 0),
3,
Math.max(Math.min(hsv[2] - 13, 100), 0),
hsv[3]
]));
},
selected: ([rgb]) => {
return rgb ? adjustColor(rgb, 0, 3, -31) : '';
},
// Return 'normal', 'italic', ... if input string contains it
fontStyleCond: ([style]) => {
const list = (style && style.split) ? style.split(/\s+/) : [];
for (const s of list) {
switch (s) {
case 'normal':
case 'italic':
case 'oblique':
case 'initial':
return s;
}
}
return 'normal';
},
// Return 'underline' or 'initial' if input string contains it
textDecorationCond: ([decoration]) => {
const list = (decoration && decoration.split) ? decoration.split(/\s+/) : [];
for (const s of list) {
switch (s) {
case 'underline':
case 'initial':
return s;
}
}
return 'none';
},
// Return numeric prefix
strokeWidth: ([width]) => {
const m = /^([0-9]+(\.[0-9]*)?)/g.exec(width);
return m ? m[1] : '';
},
if: (args) => {
return (args[0] && args[0] !== 'false') ? (args[1] || '') : (args[2] || '');
}
};
/* eslint-enable no-unused-vars */
// camelCase to kebab-case: do it once instead of every call
ThemeEngine.themeMgrFunc['font-style-cond'] = ThemeEngine.themeMgrFunc.fontStyleCond;
ThemeEngine.themeMgrFunc['text-decoration-cond'] = ThemeEngine.themeMgrFunc.textDecorationCond;
ThemeEngine.themeMgrFunc['stroke-width'] = ThemeEngine.themeMgrFunc.strokeWidth;
ThemeEngine.themeMgrFunc['disabled-selected'] = ThemeEngine.themeMgrFunc.disabledSelected;
})();
/*
* The theme manager
*/
// eslint-disable-next-line no-use-before-define
var ThemeEngine = ThemeEngine || {};
// JSON structure in themeprop.json
var themepropsJson;
var themesJson;
var _; // lodash
(() => {
ThemeEngine.themes = themesJson;
class _ThemeObj {
constructor(themeMgr, {props, fontmap}) {
this._themeMgr = themeMgr;
this._lookup = {};
this._fontMgr = new ThemeEngine.FontFallbackMgr(fontmap);
// Copy properties
if (props instanceof Array) {
_.forEach(props, item => themeMgr._setProp(item.name, item.value, this._lookup));
} else if (props instanceof Object) {
for (const name in props) {
themeMgr._setProp(name, props[name], this._lookup);
}
}
}
eachProp(cb) {
const themeMgr = this._themeMgr;
const lookup = this._lookup;
_.forEach(themeMgr._gList, prop => cb(themeMgr._getProp(prop.name, lookup)));
}
prop(name) {
return this._themeMgr._getProp(name, this._lookup);
}
setProp(name, value) {
return this._themeMgr._setProp(name, value, this._lookup);
}
value(s, cbUndeclared) {
return this._themeMgr._evalValue(s, this._lookup, cbUndeclared);
}
get fontMgr() {
return this._fontMgr;
}
};
// Expression parser that extract dependencies. Only used by ThemeMgr._getUse
class _ParseEngineGetDep {
constructor(set) {
this.set = set;
}
evalName(name) {
// Handle name when it occurs as a parameter
return name;
}
evalFunc(func, args) {
args.forEach(arg => this.set.add(arg));
}
}
// Expression parser that evaluates expression. Only used by ThemeMgr._evalExpr
class ParseEngineEval {
constructor(themeMgr, lookup, cbUndeclared) {
this.themeMgr = themeMgr;
this.lookup = lookup;
this.cbUndeclared = cbUndeclared ? cbUndeclared : () => '';
}
evalName(name) {
const prop = this.themeMgr._filePropTry(name, this.lookup);
return prop ? prop.rValue : this.cbUndeclared(name);
}
evalFunc(funcName, args) {
// Get function
const func = this.themeMgr.themeMgrFunc[funcName];
console.assert(func, `Unknown function: ${funcName}`);
// Evaluate function call
return func ? func(args) : '-error-';
}
}
// The Theme Manager
ThemeEngine.ThemeMgr = class {
constructor(arg = {}) {
console.assert(arg.props || themepropsJson, 'Theme manager: theme properties has not been loaded');
console.assert(ThemeEngine.themeMgrFunc, 'Theme manager: theme function library has not been loaded');
// Keep loaded themes in a wek map
this._gMap = new WeakMap();
// Keys for _gwmap. Wish it could use strings directly
this._gKey = {};
// List of all properties in theme { name, value, type }
this._gList = [];
// Lookup table for list : { name: { list item } }
this._gLookup = {};
// Theme Functions
this.themeMgrFunc = arg.func || ThemeEngine.themeMgrFunc;
// Initialize theme manager properties
this._init(arg.props || themepropsJson);
}
_getKey(themeId) {
return this._gKey[themeId] || (this._gKey[themeId] = {themeId});
}
// get cached theme or load it if not cached
_getTheme(themeId, loader) {
return new Promise(resolve => {
const k = this._getKey(themeId);
const t = this._gMap.get(k);
if (t) {
resolve(t);
} else {
loader(themeId).then(result => {
this._gMap.set(k, result);
resolve(result);
});
}
});
}
/*
* expr ::= func '(' args ')'
*        | string    // string in quotes
*        | name      // name that is a string
*        | var       // name that is a variable
*        | unit      // e.g. 12px
*        | number    // e.g. 3.14
*
* args ::= expr ',' args
*        |  expr
*        |  // empty
*/
_parseExpr(expr, engine) {
// Tokenize expression
let re = /(\s+|\(|\)|\,|"[^"]*"|'[^']*'|[a-zA-Z][a-zA-Z\d\-]*|[\d]+(\.[\d]*)?[a-z]*)/g;
let tokens = [];
let lastIndex = 0;
let m;
while ((m = re.exec(expr)) !== null) {
if (!/\s+/.test(m[1])) {
tokens.push(m[1]);
}
if (lastIndex !== m.index) {
throw Error(`Syntax error: "${expr}"`);
}
lastIndex = re.lastIndex;
}
// Was whole string tokenized?
if (lastIndex < expr.length) {
throw Error(`Syntax error: "${expr}"`);
}
// Parse tokens
let e = {stack: [], engine};
const i = this._parseTokens(tokens, 0, e);
if (i < tokens.length) {
throw Error(`Syntax error: "${expr}"`);
}
// Return result
return e.stack[0];
}
_parseTokens(tokens, i, e) {
const head = tokens[i][0];
// Numeric?
if (/\d/.test(head)) {
// Self-evaluated
e.stack.push(tokens[i]);
return i + 1;
}
// Name?
if (/\w/.test(head)) {
// A function call?
if (tokens[i + 1] === '(') {
const func = i;
const depth = e.stack.length;
i = this._parseArgs(tokens, i + 2, e);
e.stack.push(e.engine.evalFunc(tokens[func],
e.stack.splice(depth, e.stack.length - depth)));
return i;
}
// Self-evaluated
e.stack.push(e.engine.evalName(tokens[i]));
return i + 1;
}
// String?
if (head === '"' || head === '\'') {
// Self-evaluated
e.stack.push(tokens[i].substring(1, tokens[i].length - 1));
return i + 1;
}
throw Error('Syntax error');
}
_parseArgs(tokens, i, e) {
if (tokens[i] !== ')') {
i = this._parseTokens(tokens, i, e);
while (tokens[i] === ',') {
i = this._parseTokens(tokens, i + 1, e);
}
if (tokens[i] !== ')') {
throw Error('Syntax error');
}
}
return i + 1;
}
// Get list of all properties that value depends on
_parseString(value, cbExpr, cbConst) {
if (typeof value !== 'string') {
if (cbConst) {
cbConst(value);
}
return;
}
let i = 0;
let iNext;
for (; ; i = iNext + 1) {
const i1 = value.indexOf('${', i);
if (i1 < 0) {
break;
}
iNext = value.indexOf('}', i1 + 2);
if (iNext < 0) {
break;
}
// Make sure we don't have nested ${   ${} }
const i2 = value.indexOf('${', i1 + 2);
if (i2 >= 0 && i2 < iNext) {
console.error(`Invalid value: ${value}`);
return;
}
if (i < i1 && cbConst) {
cbConst(value.substring(i, i1));
}
cbExpr(_.trim(value.substring(i1 + 2, iNext)));
}
if (cbConst) {
if (i) {
if (i < value.length) {
cbConst(value.substring(i));
}
} else {
cbConst(value);
}
}
}
// If this is a function, extract parameters, otherwise extract value itself
_getExprUse(value, set) {
if (!value || !value.includes || !value.includes('(')) {
// Not a function call
set.add(value);
} else {
// Parse function call and collect all dependent variables
this._parseExpr(value, new _ParseEngineGetDep(set));
}
}
// Get list of all properties that value depends on
_getUse(value) {
let r = new Set();
this._parseString(value, expr => this._getExprUse(_.trim(expr), r));
return r;
}
// Get property that will be edited, if propert exist
_filePropTry(name, lookup) {
let prop = lookup[name];
if (prop) {
return prop;
}
prop = this._gLookup[name];
if (!prop) {
return null;
}
// Create and register theme property
lookup[name] = prop = _.cloneDeep(prop);
return prop;
}
// Get property that will be edited
_fileProp(name, lookup) {
const prop = this._filePropTry(name, lookup);
if (!prop) {
throw Error(`Unknown property: ${name}`);
}
// Create and register theme property
return prop;
}
// Collect all dependent properties - and file all properties that are dependent
_collectDep(dep, lookup, map) {
_.forEach(dep, name => {
if (!map[name]) {
map[name] = true;
const prop = this._fileProp(name, lookup);
if (prop.dep) {
this._collectDep(prop.dep, lookup, map);
}
}
});
return map;
}
// Evaluate expression
_evalExpr(expr, lookup, cbUndeclared) {
// Expr is typically a property name
let prop = this._filePropTry(expr, lookup);
if (!prop) {
// Not a property name. Process as expression
return this._parseExpr(expr, new ParseEngineEval(this, lookup, cbUndeclared));
}
// Evaluate property value
if (prop.rValue === undefined) {
prop.rValue = this._evalValue(prop.value, lookup, cbUndeclared);
}
return prop.rValue;
}
// Evaluate value
_evalValue(value, lookup, cbUndeclared) {
let r = '';
this._parseString(value,
e => {
const v = this._evalExpr(_.trim(e), lookup, cbUndeclared);
if (_.isBoolean(v) && _.isEmpty(r)) {
r = v;
} else {
r += v;
}
},
v => {
if (_.isBoolean(v) && _.isEmpty(r)) {
r = v;
} else {
r += v;
}
});
return r;
}
// Initialize theme manager
_init(data) {
// Reset old theme data, if any
this._gList = [];
this._gLookup = {};
// Prepare theme data
let list = [];
let lookup = {};
// Copy properties
_.forEach(data, item => {
// Some error checking needed
if (!item.name) {
throw Error('Theme property has no name');
}
if (!item.type) {
throw Error(`Theme property ${item.name} has no type`);
}
if (lookup[item.name]) {
throw Error(`Property ${item.name} assigned twice`);
}
// Create and register theme property
let prop = {name: item.name, value: item.value, type: item.type};
list.push(prop);
lookup[prop.name] = prop;
});
// Resolve theme dependency structure
_.forEach(list, item => {
this._getUse(item.value).forEach(name => {
let p = this._fileProp(name, lookup);
if (!p.dep) {
p.dep = [];
}
p.dep.push(item.name);
});
});
// Compute values
_.forEach(list, item => {
if (item.rValue === undefined) {
item.rValue = this._evalValue(item.value, lookup);
}
});
// Save variables
this._gList = list;
this._gLookup = lookup;
}
// Get information about a theme property
_getProp(name, lookup) {
const gProp = this._gLookup[name];
if (!gProp) {
return {};
}
const prop = lookup[name] || gProp;
return {name, value: prop.value, rValue: prop.rValue, type: prop.type, default: gProp.value};
}
// Process changed usage
_updateUse(prop, oldUse, newUse, lookup) {
if (oldUse.size === 0 && newUse.size === 0) {
return;
}
// Slow implementation, but the use lists are typically very short
oldUse.forEach(name => {
if (!newUse.has(name)) {
// Remove this from name
let p = this._fileProp(name, lookup);
if (!p.dep.find(x => x === prop)) {
throw Error('Internal error');
}
p.dep.splice(p.dep.findIndex(x => x === prop), 1);
}
});
newUse.forEach(name => {
if (!oldUse.has(name)) {
// Add name this to name
let p = this._fileProp(name, lookup);
if (!p.dep) {
p.dep = [];
}
if (p.dep.find(x => x === prop)) {
throw Error('Internal error');
}
p.dep.push(prop);
}
});
}
// Assign new value to a theme propery
_setProp(name, value, lookup) {
let prop = lookup[name];
if (!prop) {
const orgProp = this._gLookup[name];
if (!orgProp) {
console.error(`Assign unknown property: ${name}`);
return null;
}
// If new value is the default value
if (orgProp.value === value) {
return null;
}
// Create and register theme property
lookup[name] = prop = _.cloneDeep(orgProp);
} else if (prop.value === value) {
return null;
}
// Inform variables that affects this variable of any changes
this._updateUse(name, this._getUse(prop.value), this._getUse(value), lookup);
// Set new value
prop.value = value;
prop.rValue = this._evalValue(value, lookup);
// Information about change
let r = [{name, value, rValue: prop.rValue}];
// Update all dependent properties
if (prop.dep) {
const map = this._collectDep(prop.dep, lookup, {});
// Reset all dependent values
for (let k in map) {
lookup[k].rValue = undefined;
}
// Reassign dependent values
for (let k in map) {
let p = lookup[k];
if (p.rValue === undefined) {
p.rValue = this._evalValue(p.value, lookup);
}
// Information about change
r.push({name: k, rValue: p.rValue});
}
}
return r;
}
// Get names of all properties that are used in string / expression
extractProps(s) {
return this._getUse(s);
}
// Get all expressions used in string
extractExprs(s) {
let exprs = [];
this._parseString(s, expr => exprs.push(expr));
return exprs;
}
// Load a theme
load(themeId, content, clearCache = false) {
// content =  [<props>]
//        || {props: [<props>], fontmap: {<font-fallbacks>}}
//        || () => Promise(resolve => content)
if (clearCache) {
const key = this._gKey[themeId];
if (key) {
this._gMap.delete(key);
}
}
return this._getTheme(themeId, () => {
return new Promise((resolve, reject) => {
if (content instanceof Array) {
resolve(this._createTheme({props: content}));
} else if (content instanceof Function) {
content().then(result => {
if (result instanceof Array) {
resolve(this._createTheme({props: result}));
} else if (result instanceof Object && result.props) {
resolve(this._createTheme(result));
} else {
console.error(`theme content loader returned invalid theme data for theme: "${themeId}"`);
console.log(result);
reject('Invalid theme content loader');
}
});
} else if (content instanceof Object && content.props) {
resolve(this._createTheme(content));
} else {
console.error(`Unknown theme content argument when loading theme: "${themeId}"`);
console.log(content);
reject('Invalid theme content argument');
}
});
});
}
// Create a theme
_createTheme(content) {
return new _ThemeObj(this, content);
}
getCachedTheme(themeId) {
return this._gMap.get(this._getKey(themeId));
}
updateCachedTheme(themeId, content) {
let r = null;
if (content instanceof Array) {
r = this._createTheme({props: content});
} else if (content instanceof Object && content.props) {
r = this._createTheme(content);
} else if (content) {
console.error(`updateCachedTheme got invalid theme data for theme: "${themeId}"`);
}
const key = this._getKey(themeId);
if (r) {
this._gMap.set(key, r);
} else {
this._gMap.delete(key);
}
return r;
}
};
})();
/*
* The theme manager
*/
// eslint-disable-next-line no-use-before-define
var ThemeEngine = ThemeEngine || {};
// JSON structure in themeprop.json
var stylemapsJson;
// JSON structure in widgetmeta.json
var widgetmetaJson;
(() => {
// A Transformation Engine
class Engine {
constructor(options) {
this.output = null;
this.widget = null;
this.variant = null;
this.part = null;
this.emitWidget = _.get(options, 'widget', (name, variant, state) => `${name}${variant ? '[variant=' + variant + ']' : ''}${state}`);
this.emitPart = _.get(options, 'part', (name, state, statePath) => `${statePath ? statePath + ' ' : ''}[part=${name}]${state}`);
}
// Begin a new style sheet
beginSheet() {
this.output = '';
}
endSheet() {
let r = this.output;
this.output = null;
return r;
}
// Begin a new widget
beginWidget(name) {
this.widget = name;
return true;
}
endWidget() {
this.widget = null;
}
// Begin a new variant. variant = '' -> default/base variant
beginVariant(name) {
this.variant = name;
return true;
}
endVariant() {
this.variant = null;
}
// Begin a new part. name = '' -> styles the entire widget
beginPart(name) {
this.part = name;
return true;
}
endPart() {
this.part = null;
}
// Emit styles
emitStyle(selectorWidget, selectorPart, styles, selectorPath) {
let r = this.emitWidget(this.widget, this.variant, selectorWidget);
if (this.part) {
r += ' ' + this.emitPart(this.part, selectorPart, selectorPath);
}
r += ' {\n';
for (let prop in styles) {
r += `  ${prop}: ${styles[prop]};\n`;
}
r += '}\n\n';
// Append rule to output
this.output += r;
}
};
// The Style Manager
ThemeEngine.StyleMgr = class {
constructor(themeMgr, stylesDict, meta) {
stylesDict = stylesDict || stylemapsJson;
console.assert(stylesDict, 'Theme StyleMgr: style properties has not been loaded');
console.assert(themeMgr, 'Theme StyleMgr: must be created with a theme manager');
this.themeMgr = themeMgr;
this.stylesDict = stylesDict;
this.meta = meta || widgetmetaJson;
}
// Is sub a subset of sup, CSS selector wise?
_isSub(sub, sup) {
if (sup === sub) {
return false;
}
let s1 = sup.stateHost || '';
let s2 = sub.stateHost || '';
if (!s2.startsWith(s1)) {
return false;
}
s1 = sup.statePath || '';
s2 = sub.statePath || '';
if (!s2.startsWith(s1)) {
return false;
}
s1 = sup.state || '';
s2 = sub.state || '';
return s2.startsWith(s1);
}
// _build styles
_buildStyles(theme, json, engine, fontmgr, meta) {
engine.beginSheet(json);
// Test  if the style has any properties
const _hasProp = styles => {
for (let k in styles) { // eslint-disable-line no-unused-vars
return true; // Found a property. style is not empty
}
return false;
};
for (let widgetName in json) {
if (engine.beginWidget(widgetName, meta[widgetName])) {
_.forEach(json[widgetName], variant => {
if (engine.beginVariant(variant.variant, variant)) {
_.forEach(variant.parts, part => {
if (engine.beginPart(part.part, part)) {
_.forEach(part.states, state => {
// Find all existing states that are a super-set of this state
const sup = part.states.filter(item => this._isSub(state, item));
let styles = {};
if (sup.length > 0) {
for (let prop in state.styles) {
const v = theme.value(state.styles[prop]);
if (!v) {
continue; // No value
}
// Do any of the sup classes have a different value for this property?
const x = sup.find(item => theme.value(item.styles[prop] || '') !== v);
// If so, this value must be emitted
if (x) {
styles[prop] = prop !== 'font-family' ? v : fontmgr.map(v);
}
}
} else {
// No sup classes. Emit every property
for (let prop in state.styles) {
const v = theme.value(state.styles[prop]);
if (v) {
styles[prop] = prop !== 'font-family' ? v : fontmgr.map(v);
}
}
}
if (_hasProp(styles)) {
engine.emitStyle(state.stateHost || '', state.state || '', styles, state.statePath || '');
}
});
engine.endPart(part.part);
}
});
engine.endVariant(variant.variant);
}
});
engine.endWidget(widgetName);
}
}
return engine.endSheet();
}
build(theme, options) {
const json = _.get(options, 'sheet', this.stylesDict);
const opts = _.get(options, 'options', {});
const engine = _.get(options, 'engine', null) || new Engine(opts);
const fontMgr = _.get(options, 'fontmgr', theme.fontMgr) || new ThemeEngine.FontFallbackMgr();
const meta = _.get(options, 'meta', this.meta) || {};
return new Promise(resolve => {
resolve(this._buildStyles(theme, json, engine, fontMgr, meta));
});
}
_resolveVariables(theme, widget, variant, json) {
const w = json[widget];
if (!w) {
console.warn(`Unknown widget: "${widget}"`);
return null;
}
const v = w.find(item => item.variant === variant);
if (!v) {
console.warn(`Unknown variant "${variant}" for widget: "${widget}"`);
return null;
}
let dict = {};
v.parts.forEach(part => {
part.states.forEach(state => {
for (let prop in state.styles) {
const value = state.styles[prop];
if (value === '') {
continue; // No value
}
this.themeMgr.extractProps(value).forEach(name => {
if (!dict[name]) {
dict[name] = theme.prop(name).rValue;
}
});
}
});
});
return dict;
}
resolveVariables(theme, widget, variant = '') {
return this._resolveVariables(theme, ThemeEngine.normWidgetName(widget), variant, this.stylesDict);
}
_resolveExpressions(theme, widget, variant, json, cbUndeclared) {
const w = json[widget];
if (!w) {
console.warn(`Unknown widget: "${widget}"`);
return null;
}
const v = w.find(item => item.variant === variant);
if (!v) {
console.warn(`Unknown variant "${variant}" for widget: "${widget}"`);
return null;
}
let dict = {};
v.parts.forEach(part => {
part.states.forEach(state => {
for (let prop in state.styles) {
const value = state.styles[prop];
if (value === '') {
continue; // No value
}
this.themeMgr.extractExprs(value).forEach(expr => {
if (!dict[expr]) {
const val = theme.value('${' + expr + '}', cbUndeclared);
if (val) {
dict[expr] = val;
}
}
});
}
});
});
return dict;
}
resolveExpressions(theme, widget, variant, cbUndeclared) {
return this._resolveExpressions(theme, ThemeEngine.normWidgetName(widget), variant || '', this.stylesDict, cbUndeclared);
}
};
})();
//
// Style engine that produces ptcs-style-unit's for web component widgets
//
function getElementTag(name) {
const name2TagMap = {
ptcstogglebutton:    'ptcs-toggle-button',
ptcstabset:          'ptcs-tab-set',
'ptcs-togglebutton': 'ptcs-toggle-button',
'ptcs-tabset':       'ptcs-tab-set'
};
return name2TagMap[name] || name;
}
// A Transformation Engine
class StyleAggrEngine {
constructor() {
this.output = null;
this.widget = null;
this.widgetType = null;
this.widgetMatch = null;
this.variant = null;
this.part = null;
this.partMatch = '';
}
// Begin a new style sheet
beginSheet() {
this.output = '';
this.$style = '';
}
endSheet() {
let r = this.output;
this.output = null;
if (this.$style) {
r = `<style>\n${this.$style}</style>\n\n${r}`;
}
return r;
}
// Begin a new widget
beginWidget(name, meta) {
if (name === '$partmap') {
return false;
}
this.widget = getElementTag(name);
if (meta && meta.$type) {
this.widgetType = meta.$type;
this.widgetMatch = meta['$css-selector'] || this.widget;
this.partMeta = meta.part || meta.parts || {};
} else {
this.widgetType = 'wc';
}
return true;
}
endWidget() {
this.widget = null;
this.widgetType = null;
this.widgetMatch = null;
}
// Begin a new variant. variant = '' -> default/base variant
beginVariant(name) {
this.variant = name;
this._out = {$style: '', $unit: ''};
this._externalParts = {};
return true;
}
endVariant() {
if (this._out.$style) {
//console.log('$style: ' + this._out.$style);
this.$style += this._out.$style;
}
const wc = `${this.widget.toUpperCase()}${this.variant ? '.' + this.variant : ''}`;
if (this._out.$unit) {
this.output += `<ptcs-style-unit wc="${wc}">\n${this._out.$unit}</ptcs-style-unit>\n\n`;
}
for (const k in this._externalParts) {
this.output += `<ptcs-style-unit wc="${wc}:${k}">\n${this._externalParts[k]}</ptcs-style-unit>\n\n`;
}
this._out = null;
this._externalParts = null;
this.variant = null;
}
// Begin a new part. name = '' -> styles the entire widget
beginPart(name, part) {
console.assert(!this._externalPath);
const ix = name.lastIndexOf(':');
if (ix > 0) {
// Send the formatting of this part to a separate ptcs-style-unit
this._externalPath = name.substring(0, ix);
this._out.$unitSaved = this._out.$unit;
this._out.$unit = '';
if (!this._externalParts[this._externalPath]) {
this._externalParts[this._externalPath] = '';
}
this.part = name.substring(ix + 1);
} else {
this.part = name;
}
if (this.widgetType !== 'wc' && this.part) {
const t = this.partMeta[this.part];
this.partMatch = (t && t['$css-selector']) ? t['$css-selector'] : `[part~="${this.part}"]`;
}
return true;
}
endPart() {
if (this._externalPath) {
// Restore the redirected formatting of this part
this._externalParts[this._externalPath] += this._out.$unit;
this._out.$unit = this._out.$unitSaved;
this._externalPath = undefined;
}
this.part = null;
this.partMatch = '';
}
// Emit styles
emitStyle(selectorWidget, selectorPart, styles, selectorPath) {
if (this.widgetType === 'wc') {
if (this.part) {
// Send output to $unit
this._out.$unit += this._emitPart(this.widget, this.variant, this.part, selectorWidget, selectorPart, styles, null, selectorPath);
} else {
// Send output to $style
this._out.$style += this._emitHostExternal(this.widget, this.variant, selectorWidget, styles);
// ... and to unit
this._out.$unit += this._emitHostInternal(selectorWidget, styles);
}
} else {
// Emit hybrid styling for host
this._out.$style += this._emitHybrid(selectorWidget, selectorPart, styles);
}
}
// Internal methods
_emitStyleSec(styles) {
let r = '{\n';
for (let prop in styles) {
r += `  ${prop}: ${styles[prop]};\n`;
}
return r + '}\n\n';
}
_emitPart(widget, variant, part, selectorWidget, selectorPart, styles, ctxPart, selectorPath) {
// eslint-disable-next-line max-len
return (selectorWidget ? `:host(${selectorWidget}) ` : '') + `${selectorPath ? selectorPath + ' ' : ''}[part~=${part}]${selectorPart} ${this._emitStyleSec(styles)}`;
}
// Emit ":host" styling as regular CSS
_emitHostExternal(widget, variant, selectorWidget, styles) {
return `${widget}:not([no-wc-style])${variant ? '[variant=' + variant + ']' : ''}${selectorWidget} ${this._emitStyleSec(styles)}`;
}
// Emit ":host" styling as :host { CSS } inside the component
_emitHostInternal(selectorWidget, styles) {
return `:host${selectorWidget ? '(' + selectorWidget + ')' : ''} ${this._emitStyleSec(styles)}`;
}
// Emit styling for non-component
_emitHybrid(selectorWidget, selectorPart, styles) {
// eslint-disable-next-line max-len
return `${this.widgetMatch}${this.variant ? '[variant=' + this.variant + ']' : ''}${selectorWidget} ${this.part ? this.partMatch + selectorPart : ''} ${this._emitStyleSec(styles)}`;
}
};
var themepropsJson = [
{
name: "global-color-core-primary",
value: "#0094c8",
type: "color"
},
{
name: "global-color-core-primary-hover",
value: "${hover(global-color-core-primary)}",
type: "color"
},
{
name: "global-color-core-primary-pressed",
value: "${pressed(global-color-core-primary)}",
type: "color"
},
{
name: "global-color-core-primary-disabled",
value: "${disabled(global-color-core-primary)}",
type: "color"
},
{
name: "global-color-core-secondary1",
value: "#adb5bd",
type: "color"
},
{
name: "global-color-core-danger",
value: "#f25454",
type: "color"
},
{
name: "global-color-text-header",
value: "#232b2d",
type: "color"
},
{
name: "global-color-text-subheader",
value: "#232b2d",
type: "color"
},
{
name: "global-color-text-label",
value: "#232b2d",
type: "color"
},
{
name: "global-color-text-label-disabled",
value: "${disabled(global-color-text-label)}",
type: "color"
},
{
name: "global-color-text-body",
value: "#232b2d",
type: "color"
},
{
name: "global-color-text-body-disabled",
value: "${disabled(global-color-text-body)}",
type: "color"
},
{
name: "global-color-bg-primary",
value: "#ffffff",
type: "background"
},
{
name: "global-color-bg-secondary",
value: "#f7f7f7",
type: "background"
},
{
name: "global-color-bg-selected",
value: "#eaf6ff",
type: "color"
},
{
name: "global-color-bg-hover",
value: "#e6e8ea",
type: "color"
},
{
name: "global-color-bg-disabled",
value: "#f7f7f7",
type: "color"
},
{
name: "global-color-bg-disabled-selected",
value: "${disabled-selected(global-color-bg-selected)}",
type: "color"
},
{
name: "global-color-line-border",
value: "#c2c7ce",
type: "color"
},
{
name: "global-color-line-divider",
value: "#d8dbde",
type: "color"
},
{
name: "global-color-line-interior",
value: "#c2c7ce",
type: "color"
},
{
name: "global-text-header-fontfamily",
value: "Arial",
type: "font-family"
},
{
name: "global-text-header-fontweight",
value: "normal",
type: "font-weight"
},
{
name: "global-text-header-fontsize",
value: "26px",
type: "font-size"
},
{
name: "global-text-header-fontstyle",
value: "normal",
type: "font-style"
},
{
name: "global-text-subheader-fontfamily",
value: "Arial",
type: "font-family"
},
{
name: "global-text-subheader-fontweight",
value: "normal",
type: "font-weight"
},
{
name: "global-text-subheader-fontsize",
value: "20px",
type: "font-size"
},
{
name: "global-text-subheader-fontstyle",
value: "normal",
type: "font-style"
},
{
name: "global-text-label-fontfamily",
value: "Arial",
type: "font-family"
},
{
name: "global-text-label-fontweight",
value: "600",
type: "font-weight"
},
{
name: "global-text-label-fontsize",
value: "14px",
type: "font-size"
},
{
name: "global-text-label-fontstyle",
value: "normal",
type: "font-style"
},
{
name: "global-text-body-fontfamily",
value: "Arial",
type: "font-family"
},
{
name: "global-text-body-fontweight",
value: "normal",
type: "font-weight"
},
{
name: "global-text-body-fontsize",
value: "14px",
type: "font-size"
},
{
name: "global-text-body-fontstyle",
value: "normal",
type: "font-style"
},
{
name: "global-text-link-fontfamily",
value: "Arial",
type: "font-family"
},
{
name: "global-text-link-fontweight",
value: "bold",
type: "font-weight"
},
{
name: "global-text-link-fontsize",
value: "14px",
type: "font-size"
},
{
name: "global-text-link-fontstyle",
value: "underline",
type: "font-style"
},
{
name: "global-line-border-thickness",
value: "1px",
type: "border-width"
},
{
name: "global-line-divider-thickness",
value: "1px",
type: "border-width"
},
{
name: "global-line-interior-thickness",
value: "1px",
type: "border-width"
},
{
name: "e-button-primary-fontcolor",
value: "${global-color-text-label}",
type: "color"
},
{
name: "e-button-primary-fontfamily",
value: "${global-text-label-fontfamily}",
type: "font-family"
},
{
name: "e-button-primary-fontweight",
value: "${global-text-label-fontweight}",
type: "font-weight"
},
{
name: "e-button-primary-fontstyle",
value: "${global-text-label-fontstyle}",
type: "font-style"
},
{
name: "e-button-primary-fontsize",
value: "${global-text-label-fontsize}",
type: "font-size"
},
{
name: "e-button-primary-backgroundcolor",
value: "${global-color-core-primary}",
type: "color"
},
{
name: "e-button-primary-bordercolor",
value: "${global-color-core-primary}",
type: "color"
},
{
name: "e-button-primary-borderthickness",
value: "${global-line-border-thickness}",
type: "border-width"
},
{
name: "e-button-primary-radius",
value: "4px",
type: "radius"
},
{
name: "e-button-primary-hover-fontcolor",
value: "${e-button-primary-fontcolor}",
type: "color"
},
{
name: "e-button-primary-hover-fontfamily",
value: "${e-button-primary-fontfamily}",
type: "font-family"
},
{
name: "e-button-primary-hover-fontweight",
value: "${e-button-primary-fontweight}",
type: "font-weight"
},
{
name: "e-button-primary-hover-fontstyle",
value: "${e-button-primary-fontstyle}",
type: "font-style"
},
{
name: "e-button-primary-hover-fontsize",
value: "${e-button-primary-fontsize}",
type: "font-size"
},
{
name: "e-button-primary-hover-backgroundcolor",
value: "${hover(e-button-primary-backgroundcolor)}",
type: "color"
},
{
name: "e-button-primary-hover-bordercolor",
value: "${hover(e-button-primary-bordercolor)}",
type: "color"
},
{
name: "e-button-primary-hover-borderthickness",
value: "${e-button-primary-borderthickness}",
type: "border-width"
},
{
name: "e-button-primary-hover-radius",
value: "${e-button-primary-radius}",
type: "radius"
},
{
name: "e-button-primary-pressed-fontcolor",
value: "${e-button-primary-fontcolor}",
type: "color"
},
{
name: "e-button-primary-pressed-fontfamily",
value: "${e-button-primary-fontfamily}",
type: "font-family"
},
{
name: "e-button-primary-pressed-fontweight",
value: "${e-button-primary-fontweight}",
type: "font-weight"
},
{
name: "e-button-primary-pressed-fontstyle",
value: "${e-button-primary-fontstyle}",
type: "font-style"
},
{
name: "e-button-primary-pressed-fontsize",
value: "${e-button-primary-fontsize}",
type: "font-size"
},
{
name: "e-button-primary-pressed-backgroundcolor",
value: "${pressed(e-button-primary-backgroundcolor)}",
type: "color"
},
{
name: "e-button-primary-pressed-bordercolor",
value: "${pressed(e-button-primary-bordercolor)}",
type: "color"
},
{
name: "e-button-primary-pressed-borderthickness",
value: "${e-button-primary-borderthickness}",
type: "border-width"
},
{
name: "e-button-primary-pressed-radius",
value: "${e-button-primary-radius}",
type: "radius"
},
{
name: "e-button-primary-disabled-fontcolor",
value: "${global-color-text-label-disabled}",
type: "color"
},
{
name: "e-button-primary-disabled-fontfamily",
value: "${e-button-primary-fontfamily}",
type: "font-family"
},
{
name: "e-button-primary-disabled-fontweight",
value: "${e-button-primary-fontweight}",
type: "font-weight"
},
{
name: "e-button-primary-disabled-fontstyle",
value: "${e-button-primary-fontstyle}",
type: "font-style"
},
{
name: "e-button-primary-disabled-fontsize",
value: "${e-button-primary-fontsize}",
type: "font-size"
},
{
name: "e-button-primary-disabled-backgroundcolor",
value: "${global-color-bg-disabled}",
type: "color"
},
{
name: "e-button-primary-disabled-bordercolor",
value: "${disabled(e-button-primary-bordercolor)}",
type: "color"
},
{
name: "e-button-primary-disabled-borderthickness",
value: "${e-button-primary-borderthickness}",
type: "border-width"
},
{
name: "e-button-primary-disabled-radius",
value: "${e-button-primary-radius}",
type: "radius"
},
{
name: "e-button-secondary-fontcolor",
value: "${global-color-text-label}",
type: "color"
},
{
name: "e-button-secondary-fontfamily",
value: "${global-text-label-fontfamily}",
type: "font-family"
},
{
name: "e-button-secondary-fontweight",
value: "${global-text-label-fontweight}",
type: "font-weight"
},
{
name: "e-button-secondary-fontstyle",
value: "${global-text-label-fontstyle}",
type: "font-style"
},
{
name: "e-button-secondary-fontsize",
value: "${global-text-label-fontsize}",
type: "font-size"
},
{
name: "e-button-secondary-backgroundcolor",
value: "${global-color-core-secondary1}",
type: "color"
},
{
name: "e-button-secondary-bordercolor",
value: "${global-color-core-secondary1}",
type: "color"
},
{
name: "e-button-secondary-borderthickness",
value: "${global-line-border-thickness}",
type: "border-width"
},
{
name: "e-button-secondary-radius",
value: "4px",
type: "radius"
},
{
name: "e-button-secondary-hover-fontcolor",
value: "${e-button-secondary-fontcolor}",
type: "color"
},
{
name: "e-button-secondary-hover-fontfamily",
value: "${e-button-secondary-fontfamily}",
type: "font-family"
},
{
name: "e-button-secondary-hover-fontweight",
value: "${e-button-secondary-fontweight}",
type: "font-weight"
},
{
name: "e-button-secondary-hover-fontstyle",
value: "${e-button-secondary-fontstyle}",
type: "font-style"
},
{
name: "e-button-secondary-hover-fontsize",
value: "${e-button-secondary-fontsize}",
type: "font-size"
},
{
name: "e-button-secondary-hover-backgroundcolor",
value: "${e-button-primary-hover-backgroundcolor}",
type: "color"
},
{
name: "e-button-secondary-hover-bordercolor",
value: "${e-button-primary-hover-bordercolor}",
type: "color"
},
{
name: "e-button-secondary-hover-borderthickness",
value: "${e-button-secondary-borderthickness}",
type: "border-width"
},
{
name: "e-button-secondary-hover-radius",
value: "${e-button-secondary-radius}",
type: "radius"
},
{
name: "e-button-secondary-pressed-fontcolor",
value: "${e-button-secondary-fontcolor}",
type: "color"
},
{
name: "e-button-secondary-pressed-fontfamily",
value: "${e-button-secondary-fontfamily}",
type: "font-family"
},
{
name: "e-button-secondary-pressed-fontweight",
value: "${e-button-secondary-fontweight}",
type: "font-weight"
},
{
name: "e-button-secondary-pressed-fontstyle",
value: "${e-button-secondary-fontstyle}",
type: "font-style"
},
{
name: "e-button-secondary-pressed-fontsize",
value: "${e-button-secondary-fontsize}",
type: "font-size"
},
{
name: "e-button-secondary-pressed-backgroundcolor",
value: "${e-button-primary-pressed-backgroundcolor}",
type: "color"
},
{
name: "e-button-secondary-pressed-bordercolor",
value: "${e-button-primary-pressed-bordercolor}",
type: "color"
},
{
name: "e-button-secondary-pressed-borderthickness",
value: "${e-button-secondary-borderthickness}",
type: "border-width"
},
{
name: "e-button-secondary-pressed-radius",
value: "${e-button-secondary-radius}",
type: "radius"
},
{
name: "e-button-secondary-disabled-fontcolor",
value: "${global-color-text-label-disabled}",
type: "color"
},
{
name: "e-button-secondary-disabled-fontfamily",
value: "${e-button-secondary-fontfamily}",
type: "font-family"
},
{
name: "e-button-secondary-disabled-fontweight",
value: "${e-button-secondary-fontweight}",
type: "font-weight"
},
{
name: "e-button-secondary-disabled-fontstyle",
value: "${e-button-secondary-fontstyle}",
type: "font-style"
},
{
name: "e-button-secondary-disabled-fontsize",
value: "${e-button-secondary-fontsize}",
type: "font-size"
},
{
name: "e-button-secondary-disabled-backgroundcolor",
value: "${e-button-primary-disabled-backgroundcolor}",
type: "color"
},
{
name: "e-button-secondary-disabled-bordercolor",
value: "${e-button-primary-disabled-bordercolor}",
type: "color"
},
{
name: "e-button-secondary-disabled-borderthickness",
value: "${e-button-secondary-borderthickness}",
type: "border-width"
},
{
name: "e-button-secondary-disabled-radius",
value: "${e-button-secondary-radius}",
type: "radius"
},
{
name: "e-button-tertiary-fontcolor",
value: "${global-color-text-label}",
type: "color"
},
{
name: "e-button-tertiary-fontfamily",
value: "${global-text-label-fontfamily}",
type: "font-family"
},
{
name: "e-button-tertiary-fontweight",
value: "${global-text-label-fontweight}",
type: "font-weight"
},
{
name: "e-button-tertiary-fontstyle",
value: "${global-text-label-fontstyle}",
type: "font-style"
},
{
name: "e-button-tertiary-fontsize",
value: "${global-text-label-fontsize}",
type: "font-size"
},
{
name: "e-button-tertiary-backgroundcolor",
value: "rgba(0,0,0,0)",
type: "color"
},
{
name: "e-button-tertiary-bordercolor",
value: "${global-color-core-secondary1}",
type: "color"
},
{
name: "e-button-tertiary-borderthickness",
value: "${global-line-border-thickness}",
type: "border-width"
},
{
name: "e-button-tertiary-radius",
value: "4px",
type: "radius"
},
{
name: "e-button-tertiary-hover-fontcolor",
value: "${e-button-tertiary-fontcolor}",
type: "color"
},
{
name: "e-button-tertiary-hover-fontfamily",
value: "${e-button-tertiary-fontfamily}",
type: "font-family"
},
{
name: "e-button-tertiary-hover-fontweight",
value: "${e-button-tertiary-fontweight}",
type: "font-weight"
},
{
name: "e-button-tertiary-hover-fontstyle",
value: "${e-button-tertiary-fontstyle}",
type: "font-style"
},
{
name: "e-button-tertiary-hover-fontsize",
value: "${e-button-tertiary-fontsize}",
type: "font-size"
},
{
name: "e-button-tertiary-hover-backgroundcolor",
value: "${e-button-primary-hover-backgroundcolor}",
type: "color"
},
{
name: "e-button-tertiary-hover-bordercolor",
value: "${e-button-primary-hover-bordercolor}",
type: "color"
},
{
name: "e-button-tertiary-hover-borderthickness",
value: "${e-button-tertiary-borderthickness}",
type: "border-width"
},
{
name: "e-button-tertiary-hover-radius",
value: "${e-button-tertiary-radius}",
type: "radius"
},
{
name: "e-button-tertiary-pressed-fontcolor",
value: "${e-button-tertiary-fontcolor}",
type: "color"
},
{
name: "e-button-tertiary-pressed-fontfamily",
value: "${e-button-tertiary-fontfamily}",
type: "font-family"
},
{
name: "e-button-tertiary-pressed-fontweight",
value: "${e-button-tertiary-fontweight}",
type: "font-weight"
},
{
name: "e-button-tertiary-pressed-fontstyle",
value: "${e-button-tertiary-fontstyle}",
type: "font-style"
},
{
name: "e-button-tertiary-pressed-fontsize",
value: "${e-button-tertiary-fontsize}",
type: "font-size"
},
{
name: "e-button-tertiary-pressed-backgroundcolor",
value: "${e-button-primary-pressed-backgroundcolor}",
type: "color"
},
{
name: "e-button-tertiary-pressed-bordercolor",
value: "${e-button-primary-pressed-bordercolor}",
type: "color"
},
{
name: "e-button-tertiary-pressed-borderthickness",
value: "${e-button-tertiary-borderthickness}",
type: "border-width"
},
{
name: "e-button-tertiary-pressed-radius",
value: "${e-button-tertiary-radius}",
type: "radius"
},
{
name: "e-button-tertiary-disabled-fontcolor",
value: "${global-color-text-label-disabled}",
type: "color"
},
{
name: "e-button-tertiary-disabled-fontfamily",
value: "${e-button-tertiary-fontfamily}",
type: "font-family"
},
{
name: "e-button-tertiary-disabled-fontweight",
value: "${e-button-tertiary-fontweight}",
type: "font-weight"
},
{
name: "e-button-tertiary-disabled-fontstyle",
value: "${e-button-tertiary-fontstyle}",
type: "font-style"
},
{
name: "e-button-tertiary-disabled-fontsize",
value: "${e-button-tertiary-fontsize}",
type: "font-size"
},
{
name: "e-button-tertiary-disabled-backgroundcolor",
value: "${e-button-primary-disabled-backgroundcolor}",
type: "color"
},
{
name: "e-button-tertiary-disabled-bordercolor",
value: "${e-button-primary-disabled-bordercolor}",
type: "color"
},
{
name: "e-button-tertiary-disabled-borderthickness",
value: "${e-button-tertiary-borderthickness}",
type: "border-width"
},
{
name: "e-button-tertiary-disabled-radius",
value: "${e-button-tertiary-radius}",
type: "radius"
},
{
name: "e-button-danger-fontcolor",
value: "${global-color-text-label}",
type: "color"
},
{
name: "e-button-danger-fontfamily",
value: "${global-text-label-fontfamily}",
type: "font-family"
},
{
name: "e-button-danger-fontweight",
value: "${global-text-label-fontweight}",
type: "font-weight"
},
{
name: "e-button-danger-fontstyle",
value: "${global-text-label-fontstyle}",
type: "font-style"
},
{
name: "e-button-danger-fontsize",
value: "${global-text-label-fontsize}",
type: "font-size"
},
{
name: "e-button-danger-backgroundcolor",
value: "${global-color-core-danger}",
type: "color"
},
{
name: "e-button-danger-bordercolor",
value: "${global-color-core-danger}",
type: "color"
},
{
name: "e-button-danger-borderthickness",
value: "${global-line-border-thickness}",
type: "border-width"
},
{
name: "e-button-danger-radius",
value: "4px",
type: "radius"
},
{
name: "e-button-danger-hover-fontcolor",
value: "${e-button-danger-fontcolor}",
type: "color"
},
{
name: "e-button-danger-hover-fontfamily",
value: "${e-button-danger-fontfamily}",
type: "font-family"
},
{
name: "e-button-danger-hover-fontweight",
value: "${e-button-danger-fontweight}",
type: "font-weight"
},
{
name: "e-button-danger-hover-fontstyle",
value: "${e-button-danger-fontstyle}",
type: "font-style"
},
{
name: "e-button-danger-hover-fontsize",
value: "${e-button-danger-fontsize}",
type: "font-size"
},
{
name: "e-button-danger-hover-backgroundcolor",
value: "${hover(e-button-danger-backgroundcolor)}",
type: "color"
},
{
name: "e-button-danger-hover-bordercolor",
value: "${hover(e-button-danger-bordercolor)}",
type: "color"
},
{
name: "e-button-danger-hover-borderthickness",
value: "${e-button-danger-borderthickness}",
type: "border-width"
},
{
name: "e-button-danger-hover-radius",
value: "${e-button-danger-radius}",
type: "radius"
},
{
name: "e-button-danger-pressed-fontcolor",
value: "${e-button-danger-fontcolor}",
type: "color"
},
{
name: "e-button-danger-pressed-fontfamily",
value: "${e-button-danger-fontfamily}",
type: "font-family"
},
{
name: "e-button-danger-pressed-fontweight",
value: "${e-button-danger-fontweight}",
type: "font-weight"
},
{
name: "e-button-danger-pressed-fontstyle",
value: "${e-button-danger-fontstyle}",
type: "font-style"
},
{
name: "e-button-danger-pressed-fontsize",
value: "${e-button-danger-fontsize}",
type: "font-size"
},
{
name: "e-button-danger-pressed-backgroundcolor",
value: "${pressed(e-button-danger-backgroundcolor)}",
type: "color"
},
{
name: "e-button-danger-pressed-bordercolor",
value: "${pressed(e-button-danger-bordercolor)}",
type: "color"
},
{
name: "e-button-danger-pressed-borderthickness",
value: "${e-button-danger-borderthickness}",
type: "border-width"
},
{
name: "e-button-danger-pressed-radius",
value: "${e-button-danger-radius}",
type: "radius"
},
{
name: "e-button-danger-disabled-fontcolor",
value: "${global-color-text-label-disabled}",
type: "color"
},
{
name: "e-button-danger-disabled-fontfamily",
value: "${e-button-danger-fontfamily}",
type: "font-family"
},
{
name: "e-button-danger-disabled-fontweight",
value: "${e-button-danger-fontweight}",
type: "font-weight"
},
{
name: "e-button-danger-disabled-fontstyle",
value: "${e-button-danger-fontstyle}",
type: "font-style"
},
{
name: "e-button-danger-disabled-fontsize",
value: "${e-button-danger-fontsize}",
type: "font-size"
},
{
name: "e-button-danger-disabled-backgroundcolor",
value: "${e-button-primary-disabled-backgroundcolor}",
type: "color"
},
{
name: "e-button-danger-disabled-bordercolor",
value: "${disabled(e-button-danger-bordercolor)}",
type: "color"
},
{
name: "e-button-danger-disabled-borderthickness",
value: "${e-button-danger-borderthickness}",
type: "border-width"
},
{
name: "e-button-danger-disabled-radius",
value: "${e-button-danger-radius}",
type: "radius"
},
{
name: "e-button-transparent-fontcolor",
value: "${global-color-text-label}",
type: "color"
},
{
name: "e-button-transparent-fontfamily",
value: "${global-text-label-fontfamily}",
type: "font-family"
},
{
name: "e-button-transparent-fontweight",
value: "${global-text-label-fontweight}",
type: "font-weight"
},
{
name: "e-button-transparent-fontstyle",
value: "${global-text-label-fontstyle}",
type: "font-style"
},
{
name: "e-button-transparent-fontsize",
value: "${global-text-label-fontsize}",
type: "font-size"
},
{
name: "e-button-transparent-backgroundcolor",
value: "rgba(0,0,0,0)",
type: "color"
},
{
name: "e-button-transparent-bordercolor",
value: "rgba(0,0,0,0)",
type: "color"
},
{
name: "e-button-transparent-borderthickness",
value: "1px",
type: "border-width"
},
{
name: "e-button-transparent-radius",
value: "4px",
type: "radius"
},
{
name: "e-button-transparent-hover-fontcolor",
value: "${e-button-primary-hover-fontcolor}",
type: "color"
},
{
name: "e-button-transparent-hover-fontfamily",
value: "${e-button-transparent-fontfamily}",
type: "font-family"
},
{
name: "e-button-transparent-hover-fontweight",
value: "${e-button-transparent-fontweight}",
type: "font-weight"
},
{
name: "e-button-transparent-hover-fontstyle",
value: "${e-button-transparent-fontstyle}",
type: "font-style"
},
{
name: "e-button-transparent-hover-fontsize",
value: "${e-button-transparent-fontsize}",
type: "font-size"
},
{
name: "e-button-transparent-hover-backgroundcolor",
value: "${e-button-primary-hover-backgroundcolor}",
type: "color"
},
{
name: "e-button-transparent-hover-bordercolor",
value: "${e-button-primary-hover-bordercolor}",
type: "color"
},
{
name: "e-button-transparent-hover-borderthickness",
value: "${e-button-primary-hover-borderthickness}",
type: "border-width"
},
{
name: "e-button-transparent-hover-radius",
value: "${e-button-primary-hover-radius}",
type: "radius"
},
{
name: "e-button-transparent-pressed-fontcolor",
value: "${e-button-primary-pressed-fontcolor}",
type: "color"
},
{
name: "e-button-transparent-pressed-fontfamily",
value: "${e-button-transparent-fontfamily}",
type: "font-family"
},
{
name: "e-button-transparent-pressed-fontweight",
value: "${e-button-transparent-fontweight}",
type: "font-weight"
},
{
name: "e-button-transparent-pressed-fontstyle",
value: "${e-button-transparent-fontstyle}",
type: "font-style"
},
{
name: "e-button-transparent-pressed-fontsize",
value: "${e-button-transparent-fontsize}",
type: "font-size"
},
{
name: "e-button-transparent-pressed-backgroundcolor",
value: "${e-button-primary-pressed-backgroundcolor}",
type: "color"
},
{
name: "e-button-transparent-pressed-bordercolor",
value: "${e-button-primary-pressed-bordercolor}",
type: "color"
},
{
name: "e-button-transparent-pressed-borderthickness",
value: "${e-button-primary-pressed-borderthickness}",
type: "border-width"
},
{
name: "e-button-transparent-pressed-radius",
value: "${e-button-primary-pressed-radius}",
type: "radius"
},
{
name: "e-button-transparent-disabled-fontcolor",
value: "${global-color-text-label-disabled}",
type: "color"
},
{
name: "e-button-transparent-disabled-fontfamily",
value: "${e-button-transparent-fontfamily}",
type: "font-family"
},
{
name: "e-button-transparent-disabled-fontweight",
value: "${e-button-transparent-fontweight}",
type: "font-weight"
},
{
name: "e-button-transparent-disabled-fontstyle",
value: "${e-button-transparent-fontstyle}",
type: "font-style"
},
{
name: "e-button-transparent-disabled-fontsize",
value: "${e-button-transparent-fontsize}",
type: "font-size"
},
{
name: "e-button-transparent-disabled-backgroundcolor",
value: "${e-button-transparent-backgroundcolor}",
type: "color"
},
{
name: "e-button-transparent-disabled-bordercolor",
value: "${e-button-transparent-bordercolor}",
type: "color"
},
{
name: "e-button-transparent-disabled-borderthickness",
value: "${e-button-transparent-borderthickness}",
type: "border-width"
},
{
name: "e-button-transparent-disabled-radius",
value: "${e-button-transparent-radius}",
type: "radius"
},
{
name: "e-list-row-backgroundcolor",
value: "${global-color-bg-primary}",
type: "color"
},
{
name: "e-list-row-usealternating",
value: false,
type: "boolean"
},
{
name: "e-list-row-backgroundcolor-alt",
value: "${global-color-bg-secondary}",
type: "color"
},
{
name: "e-list-row-backgroundcolor-selected",
value: "${global-color-bg-selected}",
type: "color"
},
{
name: "e-list-row-backgroundcolor-hover",
value: "${global-color-bg-hover}",
type: "color"
},
{
name: "e-list-row-backgroundcolor-disabled",
value: "${global-color-bg-disabled}",
type: "color"
},
{
name: "e-list-bordercolor",
value: "${global-color-line-border}",
type: "color"
},
{
name: "e-list-borderthickness",
value: "${global-line-border-thickness}",
type: "border-width"
},
{
name: "e-list-row-bordercolor",
value: "${global-color-line-interior}",
type: "color"
},
{
name: "e-list-row-borderthickness",
value: "${global-line-interior-thickness}",
type: "border-width"
},
{
name: "e-list-text-label-color",
value: "${global-color-text-label}",
type: "color"
},
{
name: "e-list-text-label-fontfamily",
value: "${global-text-label-fontfamily}",
type: "font-family"
},
{
name: "e-list-text-label-fontweight",
value: "${global-text-label-fontweight}",
type: "font-weight"
},
{
name: "e-list-text-label-fontsize",
value: "${global-text-label-fontsize}",
type: "font-size"
},
{
name: "e-list-text-label-fontstyle",
value: "${global-text-label-fontstyle}",
type: "font-style"
},
{
name: "e-list-text-text-fontcolor",
value: "${global-color-text-body}",
type: "color"
},
{
name: "e-list-text-text-fontfamily",
value: "${global-text-body-fontfamily}",
type: "font-family"
},
{
name: "e-list-text-text-fontweight",
value: "${global-text-body-fontweight}",
type: "font-weight"
},
{
name: "e-list-text-text-fontsize",
value: "${global-text-body-fontsize}",
type: "font-size"
},
{
name: "e-list-text-text-fontstyle",
value: "${global-text-body-fontstyle}",
type: "font-style"
},
{
name: "e-list-text-text-fontcolor-selected",
value: "${e-list-text-text-fontcolor}",
type: "color"
},
{
name: "e-list-text-text-fontfamily-selected",
value: "${e-list-text-text-fontfamily}",
type: "font-family"
},
{
name: "e-list-text-text-fontweight-selected",
value: "${e-list-text-text-fontweight}",
type: "font-weight"
},
{
name: "e-list-text-text-fontsize-selected",
value: "${e-list-text-text-fontsize}",
type: "font-size"
},
{
name: "e-list-text-text-fontstyle-selected",
value: "${e-list-text-text-fontstyle}",
type: "font-style"
},
{
name: "e-list-text-text-fontcolor-hover",
value: "${e-list-text-text-fontcolor}",
type: "color"
},
{
name: "e-list-text-text-fontfamily-hover",
value: "${e-list-text-text-fontfamily}",
type: "font-family"
},
{
name: "e-list-text-text-fontweight-hover",
value: "bold",
type: "font-weight"
},
{
name: "e-list-text-text-fontsize-hover",
value: "${e-list-text-text-fontsize}",
type: "font-size"
},
{
name: "e-list-text-text-fontstyle-hover",
value: "${e-list-text-text-fontstyle}",
type: "font-style"
},
{
name: "e-textfield-backgroundcolor",
value: "${global-color-bg-primary}",
type: "color"
},
{
name: "e-textfield-bordercolor",
value: "${global-color-line-border}",
type: "color"
},
{
name: "e-textfield-borderthickness",
value: "${global-line-border-thickness}",
type: "border-width"
},
{
name: "e-textfield-border-radius",
value: "0px",
type: "radius"
},
{
name: "e-textfield-text-label-color",
value: "${global-color-text-label}",
type: "color"
},
{
name: "e-textfield-text-label-fontfamily",
value: "${global-text-label-fontfamily}",
type: "font-family"
},
{
name: "e-textfield-text-label-fontweight",
value: "${global-text-label-fontweight}",
type: "font-weight"
},
{
name: "e-textfield-text-label-fontsize",
value: "${global-text-label-fontsize}",
type: "font-size"
},
{
name: "e-textfield-text-label-fontstyle",
value: "${global-text-label-fontstyle}",
type: "font-style"
},
{
name: "e-textfield-text-text-color",
value: "${global-color-text-body}",
type: "color"
},
{
name: "e-textfield-text-text-fontfamily",
value: "${global-text-body-fontfamily}",
type: "font-family"
},
{
name: "e-textfield-text-text-fontweight",
value: "${global-text-body-fontweight}",
type: "font-weight"
},
{
name: "e-textfield-text-text-fontsize",
value: "${global-text-body-fontsize}",
type: "font-size"
},
{
name: "e-textfield-text-text-fontstyle",
value: "${global-text-body-fontstyle}",
type: "font-style"
},
{
name: "e-textfield-text-hinttext-color",
value: "${global-color-text-body}",
type: "color"
},
{
name: "e-textfield-text-hinttext-fontfamily",
value: "${global-text-body-fontfamily}",
type: "font-family"
},
{
name: "e-textfield-text-hinttext-fontweight",
value: "${global-text-body-fontweight}",
type: "font-weight"
},
{
name: "e-textfield-text-hinttext-fontsize",
value: "${global-text-body-fontsize}",
type: "font-size"
},
{
name: "e-textfield-text-hinttext-fontstyle",
value: "${global-text-body-fontstyle}",
type: "font-style"
},
{
name: "e-checkbox-backgroundcolor",
value: "${global-color-bg-primary}",
type: "color"
},
{
name: "e-checkbox-bordercolor",
value: "${global-color-line-border}",
type: "color"
},
{
name: "e-checkbox-borderthickness",
value: "1px",
type: "border-width"
},
{
name: "e-checkbox-border-radius",
value: "0px",
type: "radius"
},
{
name: "e-checkbox-text-label-color",
value: "${global-color-text-label}",
type: "color"
},
{
name: "e-checkbox-text-label-fontfamily",
value: "${global-text-label-fontfamily}",
type: "font-family"
},
{
name: "e-checkbox-text-label-fontsize",
value: "${global-text-label-fontsize}",
type: "font-size"
},
{
name: "e-checkbox-text-label-fontweight",
value: "${global-text-label-fontweight}",
type: "font-weight"
},
{
name: "e-checkbox-text-label-fontstyle",
value: "${global-text-label-fontstyle}",
type: "font-style"
},
{
name: "e-checkbox-backgroundcolor-selected",
value: "#0094c8",
type: "color"
},
{
name: "e-checkbox-bordercolor-selected",
value: "${e-checkbox-bordercolor}",
type: "color"
},
{
name: "e-checkbox-borderthickness-selected",
value: "${e-checkbox-borderthickness}",
type: "border-width"
},
{
name: "e-checkbox-border-radius-selected",
value: "${e-checkbox-border-radius}",
type: "radius"
},
{
name: "e-checkbox-text-label-color-selected",
value: "${e-checkbox-text-label-color}",
type: "color"
},
{
name: "e-checkbox-text-label-fontfamily-selected",
value: "${e-checkbox-text-label-fontfamily}",
type: "font-family"
},
{
name: "e-checkbox-text-label-fontsize-selected",
value: "${e-checkbox-text-label-fontsize}",
type: "font-size"
},
{
name: "e-checkbox-text-label-fontweight-selected",
value: "${e-checkbox-text-label-fontweight}",
type: "font-weight"
},
{
name: "e-checkbox-text-label-fontstyle-selected",
value: "${e-checkbox-text-label-fontstyle}",
type: "font-style"
},
{
name: "e-radiobutton-backgroundcolor",
value: "${global-color-bg-primary}",
type: "color"
},
{
name: "e-radiobutton-bordercolor",
value: "${global-color-line-border}",
type: "color"
},
{
name: "e-radiobutton-borderthickness",
value: "${global-line-border-thickness}",
type: "border-width"
},
{
name: "e-radiobutton-text-label-color",
value: "${global-color-text-label}",
type: "color"
},
{
name: "e-radiobutton-text-label-fontfamily",
value: "${global-text-label-fontfamily}",
type: "font-family"
},
{
name: "e-radiobutton-text-label-fontsize",
value: "${global-text-label-fontsize}",
type: "font-size"
},
{
name: "e-radiobutton-text-label-fontweight",
value: "${global-text-label-fontweight}",
type: "font-weight"
},
{
name: "e-radiobutton-text-label-fontstyle",
value: "${global-text-label-fontstyle}",
type: "font-style"
},
{
name: "e-radiobutton-backgroundcolor-selected",
value: "${e-radiobutton-backgroundcolor}",
type: "color"
},
{
name: "e-radiobutton-fillcolor-selected",
value: "${global-color-core-primary}",
type: "color"
},
{
name: "e-radiobutton-fillcolorcompletely-selected",
value: false,
type: "boolean"
},
{
name: "e-radiobutton-bordercolor-selected",
value: "${global-color-core-primary}",
type: "color"
},
{
name: "e-radiobutton-borderthickness-selected",
value: "${e-radiobutton-borderthickness}",
type: "border-width"
},
{
name: "e-radiobutton-text-label-color-selected",
value: "${e-radiobutton-text-label-color}",
type: "color"
},
{
name: "e-radiobutton-text-label-fontfamily-selected",
value: "${e-radiobutton-text-label-fontfamily}",
type: "font-family"
},
{
name: "e-radiobutton-text-label-fontweight-selected",
value: "${e-radiobutton-text-label-fontweight}",
type: "font-weight"
},
{
name: "e-radiobutton-text-label-fontsize-selected",
value: "${e-radiobutton-text-label-fontsize}",
type: "font-size"
},
{
name: "e-radiobutton-text-label-fontstyle-selected",
value: "${e-radiobutton-text-label-fontstyle}",
type: "font-style"
},
{
name: "e-link-primary-color",
value: "${global-color-core-primary}",
type: "color"
},
{
name: "e-link-primary-fontfamily",
value: "${global-text-link-fontfamily}",
type: "font-family"
},
{
name: "e-link-primary-fontweight",
value: "${global-text-link-fontweight}",
type: "font-weight"
},
{
name: "e-link-primary-fontstyle",
value: "${global-text-link-fontstyle}",
type: "font-style"
},
{
name: "e-link-primary-fontsize",
value: "${global-text-link-fontsize}",
type: "font-size"
},
{
name: "e-link-primary-color-hover",
value: "${hover(e-link-primary-color)}",
type: "color"
},
{
name: "e-link-primary-fontfamily-hover",
value: "${e-link-primary-fontfamily}",
type: "font-family"
},
{
name: "e-link-primary-fontweight-hover",
value: "${e-link-primary-fontweight}",
type: "font-weight"
},
{
name: "e-link-primary-fontstyle-hover",
value: "${e-link-primary-fontstyle}",
type: "font-style"
},
{
name: "e-link-primary-fontsize-hover",
value: "${e-link-primary-fontsize}",
type: "font-size"
},
{
name: "e-link-primary-color-pressed",
value: "${pressed(e-link-primary-color)}",
type: "color"
},
{
name: "e-link-primary-fontfamily-pressed",
value: "${e-link-primary-fontfamily}",
type: "font-family"
},
{
name: "e-link-primary-fontweight-pressed",
value: "${e-link-primary-fontweight}",
type: "font-weight"
},
{
name: "e-link-primary-fontstyle-pressed",
value: "${e-link-primary-fontstyle}",
type: "font-style"
},
{
name: "e-link-primary-fontsize-pressed",
value: "${e-link-primary-fontsize}",
type: "font-size"
},
{
name: "e-link-primary-color-disabled",
value: "${disabled(e-link-primary-color)}",
type: "color"
},
{
name: "e-link-primary-fontfamily-disabled",
value: "${e-link-primary-fontfamily}",
type: "font-family"
},
{
name: "e-link-primary-fontweight-disabled",
value: "${e-link-primary-fontweight}",
type: "font-weight"
},
{
name: "e-link-primary-fontstyle-disabled",
value: "${e-link-primary-fontstyle}",
type: "font-style"
},
{
name: "e-link-primary-fontsize-disabled",
value: "${e-link-primary-fontsize}",
type: "font-size"
},
{
name: "e-link-primary-color-visited",
value: "${pressed(e-link-primary-color)}",
type: "color"
},
{
name: "e-link-secondary-color",
value: "${global-color-core-secondary1}",
type: "color"
},
{
name: "e-link-secondary-fontfamily",
value: "${global-text-link-fontfamily}",
type: "font-family"
},
{
name: "e-link-secondary-fontweight",
value: "${global-text-link-fontweight}",
type: "font-weight"
},
{
name: "e-link-secondary-fontstyle",
value: "${global-text-link-fontstyle}",
type: "font-style"
},
{
name: "e-link-secondary-fontsize",
value: "${global-text-link-fontsize}",
type: "font-size"
},
{
name: "e-link-secondary-color-hover",
value: "${hover(e-link-secondary-color)}",
type: "color"
},
{
name: "e-link-secondary-fontfamily-hover",
value: "${e-link-secondary-fontfamily}",
type: "font-family"
},
{
name: "e-link-secondary-fontweight-hover",
value: "${e-link-secondary-fontweight}",
type: "font-weight"
},
{
name: "e-link-secondary-fontstyle-hover",
value: "${e-link-secondary-fontstyle}",
type: "font-style"
},
{
name: "e-link-secondary-fontsize-hover",
value: "${e-link-secondary-fontsize}",
type: "font-size"
},
{
name: "e-link-secondary-color-pressed",
value: "${pressed(e-link-secondary-color)}",
type: "color"
},
{
name: "e-link-secondary-fontfamily-pressed",
value: "${e-link-secondary-fontfamily}",
type: "font-family"
},
{
name: "e-link-secondary-fontweight-pressed",
value: "${e-link-secondary-fontweight}",
type: "font-weight"
},
{
name: "e-link-secondary-fontstyle-pressed",
value: "${e-link-secondary-fontstyle}",
type: "font-style"
},
{
name: "e-link-secondary-fontsize-pressed",
value: "${e-link-secondary-fontsize}",
type: "font-size"
},
{
name: "e-link-secondary-color-disabled",
value: "${disabled(e-link-secondary-color)}",
type: "color"
},
{
name: "e-link-secondary-fontfamily-disabled",
value: "${e-link-secondary-fontfamily}",
type: "font-family"
},
{
name: "e-link-secondary-fontweight-disabled",
value: "${e-link-secondary-fontweight}",
type: "font-weight"
},
{
name: "e-link-secondary-fontstyle-disabled",
value: "none",
type: "font-style"
},
{
name: "e-link-secondary-fontsize-disabled",
value: "${e-link-secondary-fontsize}",
type: "font-size"
},
{
name: "e-link-secondary-color-visited",
value: "${pressed(e-link-secondary-color)}",
type: "color"
},
{
name: "button-primary-backgroundcolor",
value: "${e-button-primary-backgroundcolor}",
type: "background"
},
{
name: "button-primary-bordercolor",
value: "${e-button-primary-bordercolor}",
type: "color"
},
{
name: "button-primary-borderthickness",
value: "${e-button-primary-borderthickness}",
type: "border-width"
},
{
name: "button-primary-border-style",
value: "solid",
type: "border-style"
},
{
name: "button-primary-radius",
value: "${e-button-primary-radius}",
type: "radius"
},
{
name: "button-primary-icon-image",
value: "",
type: "icon"
},
{
name: "button-primary-text-color",
value: "${e-button-primary-fontcolor}",
type: "color"
},
{
name: "button-primary-fontfamily",
value: "${e-button-primary-fontfamily}",
type: "font-family"
},
{
name: "button-primary-fontweight",
value: "${e-button-primary-fontweight}",
type: "font-weight"
},
{
name: "button-primary-fontstyle",
value: "${e-button-primary-fontstyle}",
type: "font-style"
},
{
name: "button-primary-fontstyle-hover",
value: "${e-button-primary-hover-fontstyle}",
type: "font-style"
},
{
name: "button-primary-fontstyle-pressed",
value: "${e-button-primary-pressed-fontstyle}",
type: "font-style"
},
{
name: "button-primary-fontstyle-selected",
value: "${button-primary-fontstyle}",
type: "font-style"
},
{
name: "button-primary-fontstyle-disabled",
value: "${e-button-primary-disabled-fontstyle}",
type: "font-style"
},
{
name: "button-primary-fontsize",
value: "${e-button-primary-fontsize}",
type: "font-size"
},
{
name: "button-secondary-backgroundcolor",
value: "${e-button-secondary-backgroundcolor}",
type: "background"
},
{
name: "button-secondary-bordercolor",
value: "${e-button-secondary-bordercolor}",
type: "color"
},
{
name: "button-secondary-borderthickness",
value: "${e-button-secondary-borderthickness}",
type: "border-width"
},
{
name: "button-secondary-border-style",
value: "solid",
type: "border-style"
},
{
name: "button-secondary-radius",
value: "${e-button-secondary-radius}",
type: "radius"
},
{
name: "button-secondary-icon-image",
value: "",
type: "icon"
},
{
name: "button-secondary-text-color",
value: "${e-button-secondary-fontcolor}",
type: "color"
},
{
name: "button-secondary-fontfamily",
value: "${e-button-secondary-fontfamily}",
type: "font-family"
},
{
name: "button-secondary-fontweight",
value: "${e-button-secondary-fontweight}",
type: "font-weight"
},
{
name: "button-secondary-fontstyle",
value: "${e-button-secondary-fontstyle}",
type: "font-style"
},
{
name: "button-secondary-fontstyle-hover",
value: "${e-button-secondary-hover-fontstyle}",
type: "font-style"
},
{
name: "button-secondary-fontstyle-pressed",
value: "${e-button-secondary-pressed-fontstyle}",
type: "font-style"
},
{
name: "button-secondary-fontstyle-selected",
value: "${button-secondary-fontstyle}",
type: "font-style"
},
{
name: "button-secondary-fontstyle-disabled",
value: "${e-button-secondary-disabled-fontstyle}",
type: "font-style"
},
{
name: "button-secondary-fontsize",
value: "${e-button-secondary-fontsize}",
type: "font-size"
},
{
name: "button-tertiary-backgroundcolor",
value: "${e-button-tertiary-backgroundcolor}",
type: "background"
},
{
name: "button-tertiary-backgroundcolor-hover",
value: "${e-button-tertiary-hover-backgroundcolor}",
type: "background"
},
{
name: "button-tertiary-backgroundcolor-pressed",
value: "${e-button-tertiary-pressed-backgroundcolor}",
type: "background"
},
{
name: "button-tertiary-backgroundcolor-disabled",
value: "${e-button-tertiary-disabled-backgroundcolor}",
type: "background"
},
{
name: "button-tertiary-bordercolor",
value: "${e-button-tertiary-bordercolor}",
type: "color"
},
{
name: "button-tertiary-bordercolor-hover",
value: "${e-button-tertiary-hover-bordercolor}",
type: "color"
},
{
name: "button-tertiary-bordercolor-pressed",
value: "${e-button-tertiary-pressed-bordercolor}",
type: "color"
},
{
name: "button-tertiary-bordercolor-disabled",
value: "${e-button-tertiary-disabled-bordercolor}",
type: "color"
},
{
name: "button-tertiary-borderthickness",
value: "${e-button-tertiary-borderthickness}",
type: "border-width"
},
{
name: "button-tertiary-borderthickness-hover",
value: "${e-button-tertiary-hover-borderthickness}",
type: "border-width"
},
{
name: "button-tertiary-borderthickness-pressed",
value: "${e-button-tertiary-pressed-borderthickness}",
type: "border-width"
},
{
name: "button-tertiary-borderthickness-disabled",
value: "${e-button-tertiary-disabled-borderthickness}",
type: "border-width"
},
{
name: "button-tertiary-border-style",
value: "solid",
type: "border-style"
},
{
name: "button-tertiary-border-style-hover",
value: "${button-tertiary-border-style}",
type: "border-style"
},
{
name: "button-tertiary-border-style-pressed",
value: "${button-tertiary-border-style}",
type: "border-style"
},
{
name: "button-tertiary-border-style-disabled",
value: "${button-tertiary-border-style}",
type: "border-style"
},
{
name: "button-tertiary-radius",
value: "${e-button-tertiary-radius}",
type: "radius"
},
{
name: "button-tertiary-alignment",
value: "inherit",
type: "text-align"
},
{
name: "button-tertiary-icon-image",
value: "",
type: "icon"
},
{
name: "button-tertiary-text-color",
value: "${e-button-tertiary-fontcolor}",
type: "color"
},
{
name: "button-tertiary-text-color-hover",
value: "${e-button-tertiary-hover-fontcolor}",
type: "color"
},
{
name: "button-tertiary-text-color-pressed",
value: "${e-button-tertiary-pressed-fontcolor}",
type: "color"
},
{
name: "button-tertiary-text-color-disabled",
value: "${e-button-tertiary-disabled-fontcolor}",
type: "color"
},
{
name: "button-tertiary-fontfamily",
value: "${e-button-tertiary-fontfamily}",
type: "font-family"
},
{
name: "button-tertiary-fontfamily-hover",
value: "${e-button-tertiary-hover-fontfamily}",
type: "font-family"
},
{
name: "button-tertiary-fontfamily-pressed",
value: "${e-button-tertiary-pressed-fontfamily}",
type: "font-family"
},
{
name: "button-tertiary-fontfamily-disabled",
value: "${e-button-tertiary-disabled-fontfamily}",
type: "font-family"
},
{
name: "button-tertiary-fontweight",
value: "${e-button-tertiary-fontweight}",
type: "font-weight"
},
{
name: "button-tertiary-fontweight-hover",
value: "${e-button-tertiary-hover-fontweight}",
type: "font-weight"
},
{
name: "button-tertiary-fontweight-pressed",
value: "${e-button-tertiary-pressed-fontweight}",
type: "font-weight"
},
{
name: "button-tertiary-fontweight-disabled",
value: "${e-button-tertiary-disabled-fontweight}",
type: "font-weight"
},
{
name: "button-tertiary-fontstyle",
value: "${e-button-tertiary-fontstyle}",
type: "font-style"
},
{
name: "button-tertiary-fontstyle-hover",
value: "${e-button-tertiary-hover-fontstyle}",
type: "font-style"
},
{
name: "button-tertiary-fontstyle-pressed",
value: "${e-button-tertiary-pressed-fontstyle}",
type: "font-style"
},
{
name: "button-tertiary-fontstyle-selected",
value: "${button-tertiary-fontstyle}",
type: "font-style"
},
{
name: "button-tertiary-fontstyle-disabled",
value: "${e-button-tertiary-disabled-fontstyle}",
type: "font-style"
},
{
name: "button-tertiary-fontsize",
value: "${e-button-tertiary-fontsize}",
type: "font-size"
},
{
name: "button-tertiary-fontsize-hover",
value: "${e-button-tertiary-hover-fontsize}",
type: "font-size"
},
{
name: "button-tertiary-fontsize-pressed",
value: "${e-button-tertiary-pressed-fontsize}",
type: "font-size"
},
{
name: "button-tertiary-fontsize-disabled",
value: "${e-button-tertiary-disabled-fontsize}",
type: "font-size"
},
{
name: "button-tertiary-linespacing",
value: "normal",
type: "line-height"
},
{
name: "button-tertiary-letterspacing",
value: "normal",
type: "letter-spacing"
},
{
name: "button-tertiary-text-alignment",
value: "inherit",
type: "text-align"
},
{
name: "button-danger-backgroundcolor",
value: "${e-button-danger-backgroundcolor}",
type: "background"
},
{
name: "button-danger-bordercolor",
value: "${e-button-danger-bordercolor}",
type: "color"
},
{
name: "button-danger-borderthickness",
value: "${e-button-danger-borderthickness}",
type: "border-width"
},
{
name: "button-danger-border-style",
value: "solid",
type: "border-style"
},
{
name: "button-danger-radius",
value: "${e-button-danger-radius}",
type: "radius"
},
{
name: "button-danger-icon-image",
value: "",
type: "icon"
},
{
name: "button-danger-text-color",
value: "${e-button-danger-fontcolor}",
type: "color"
},
{
name: "button-danger-fontfamily",
value: "${e-button-danger-fontfamily}",
type: "font-family"
},
{
name: "button-danger-fontweight",
value: "${e-button-danger-fontweight}",
type: "font-weight"
},
{
name: "button-danger-fontstyle",
value: "${e-button-danger-fontstyle}",
type: "font-style"
},
{
name: "button-danger-fontstyle-hover",
value: "${e-button-danger-hover-fontstyle}",
type: "font-style"
},
{
name: "button-danger-fontstyle-pressed",
value: "${e-button-danger-pressed-fontstyle}",
type: "font-style"
},
{
name: "button-danger-fontstyle-selected",
value: "${button-danger-fontstyle}",
type: "font-style"
},
{
name: "button-danger-fontstyle-disabled",
value: "${e-button-danger-disabled-fontstyle}",
type: "font-style"
},
{
name: "button-danger-fontsize",
value: "${e-button-danger-fontsize}",
type: "font-size"
},
{
name: "button-transparent-borderthickness",
value: "${e-button-transparent-borderthickness}",
type: "border-width"
},
{
name: "button-transparent-border-style",
value: "solid",
type: "border-style"
},
{
name: "button-transparent-radius",
value: "${e-button-transparent-radius}",
type: "radius"
},
{
name: "button-transparent-icon-image",
value: "",
type: "icon"
},
{
name: "button-transparent-fontfamily",
value: "${e-button-transparent-fontfamily}",
type: "font-family"
},
{
name: "button-transparent-fontweight",
value: "${e-button-transparent-fontweight}",
type: "font-weight"
},
{
name: "button-transparent-fontstyle",
value: "${e-button-transparent-fontstyle}",
type: "font-style"
},
{
name: "button-transparent-fontstyle-hover",
value: "${e-button-transparent-hover-fontstyle}",
type: "font-style"
},
{
name: "button-transparent-fontstyle-pressed",
value: "${e-button-transparent-pressed-fontstyle}",
type: "font-style"
},
{
name: "button-transparent-fontstyle-selected",
value: "${button-transparent-fontstyle}",
type: "font-style"
},
{
name: "button-transparent-fontstyle-disabled",
value: "${e-button-transparent-disabled-fontstyle}",
type: "font-style"
},
{
name: "button-transparent-fontsize",
value: "${e-button-transparent-fontsize}",
type: "font-size"
},
{
name: "button-small-bordercolor-hover",
value: "${button-tertiary-bordercolor-hover}",
type: "color"
},
{
name: "button-small-radius",
value: "2px",
type: "radius"
},
{
name: "button-small-icon-image",
value: "",
type: "icon"
},
{
name: "button-small-fontstyle",
value: "${button-tertiary-fontstyle}",
type: "font-style"
},
{
name: "button-small-fontstyle-hover",
value: "${button-tertiary-fontstyle-hover}",
type: "font-style"
},
{
name: "button-small-fontstyle-pressed",
value: "${button-tertiary-fontstyle-pressed}",
type: "font-style"
},
{
name: "button-small-fontstyle-selected",
value: "${button-tertiary-fontstyle}",
type: "font-style"
},
{
name: "button-small-fontstyle-disabled",
value: "${button-tertiary-fontstyle-disabled}",
type: "font-style"
},
{
name: "checkbox-bordercolor",
value: "${e-checkbox-bordercolor}",
type: "color"
},
{
name: "checkbox-bordercolor-selected",
value: "${e-checkbox-bordercolor-selected}",
type: "color"
},
{
name: "checkbox-borderthickness",
value: "${e-checkbox-borderthickness}",
type: "border-width"
},
{
name: "checkbox-borderthickness-selected",
value: "${e-checkbox-borderthickness-selected}",
type: "border-width"
},
{
name: "checkbox-border-radius",
value: "${e-checkbox-border-radius}",
type: "radius"
},
{
name: "checkbox-border-radius-selected",
value: "${e-checkbox-border-radius-selected}",
type: "radius"
},
{
name: "checkbox-border-style",
value: "solid",
type: "border-style"
},
{
name: "checkbox-border-style-selected",
value: "${checkbox-border-style}",
type: "border-style"
},
{
name: "checkbox-icon-image-selected",
value: "e-checkbox-check-selected",
type: "icon"
},
{
name: "checkbox-text-label-color",
value: "${e-checkbox-text-label-color}",
type: "color"
},
{
name: "checkbox-text-label-color-selected",
value: "${e-checkbox-text-label-color-selected}",
type: "color"
},
{
name: "checkbox-text-label-fontfamily",
value: "${e-checkbox-text-label-fontfamily}",
type: "font-family"
},
{
name: "checkbox-text-label-fontfamily-selected",
value: "${e-checkbox-text-label-fontfamily-selected}",
type: "font-family"
},
{
name: "checkbox-text-label-fontweight",
value: "${e-checkbox-text-label-fontweight}",
type: "font-weight"
},
{
name: "checkbox-text-label-fontweight-selected",
value: "${e-checkbox-text-label-fontweight-selected}",
type: "font-weight"
},
{
name: "checkbox-text-label-fontstyle",
value: "${e-checkbox-text-label-fontstyle}",
type: "font-style"
},
{
name: "checkbox-text-label-fontstyle-hover",
value: "${checkbox-text-label-fontstyle}",
type: "font-style"
},
{
name: "checkbox-text-label-fontstyle-hoverselected",
value: "${checkbox-text-label-fontstyle-selected}",
type: "font-style"
},
{
name: "checkbox-text-label-fontstyle-pressed",
value: "${checkbox-text-label-fontstyle}",
type: "font-style"
},
{
name: "checkbox-text-label-fontstyle-pressedselected",
value: "${checkbox-text-label-fontstyle-selected}",
type: "font-style"
},
{
name: "checkbox-text-label-fontstyle-selected",
value: "${e-checkbox-text-label-fontstyle-selected}",
type: "font-style"
},
{
name: "checkbox-text-label-fontstyle-disabled",
value: "${checkbox-text-label-fontstyle}",
type: "font-style"
},
{
name: "checkbox-text-label-fontstyle-disabledselected",
value: "${checkbox-text-label-fontstyle-selected}",
type: "font-style"
},
{
name: "checkbox-text-label-fontsize",
value: "${e-checkbox-text-label-fontsize}",
type: "font-size"
},
{
name: "checkbox-text-label-fontsize-selected",
value: "${e-checkbox-text-label-fontsize-selected}",
type: "font-size"
},
{
name: "checkbox-text-linespacing",
value: "normal",
type: "line-height"
},
{
name: "checkbox-text-linespacing-selected",
value: "${checkbox-text-linespacing}",
type: "line-height"
},
{
name: "checkbox-text-letterspacing",
value: "normal",
type: "letter-spacing"
},
{
name: "checkbox-text-letterspacing-selected",
value: "${checkbox-text-letterspacing}",
type: "letter-spacing"
},
{
name: "datepicker-bodycell-bordercolor",
value: "${global-color-line-interior}",
type: "color"
},
{
name: "datepicker-bodycell-borderthickness",
value: "${global-line-interior-thickness}",
type: "border-width"
},
{
name: "datepicker-bodycell-border-style",
value: "solid",
type: "border-style"
},
{
name: "datepicker-bodycell-fontfamily",
value: "${global-text-label-fontfamily}",
type: "font-family"
},
{
name: "datepicker-bodycell-fontsize",
value: "${global-text-label-fontsize}",
type: "font-size"
},
{
name: "datepicker-bodycell-fontstyle",
value: "${global-text-label-fontstyle}",
type: "font-style"
},
{
name: "datepicker-bodycell-fontstyle-hover",
value: "${datepicker-bodycell-fontstyle}",
type: "font-style"
},
{
name: "datepicker-bodycell-fontstyle-pressed",
value: "${datepicker-bodycell-fontstyle}",
type: "font-style"
},
{
name: "datepicker-bodycell-fontstyle-selected",
value: "${datepicker-bodycell-fontstyle}",
type: "font-style"
},
{
name: "datepicker-bodycell-fontstyle-disabled",
value: "${datepicker-bodycell-fontstyle}",
type: "font-style"
},
{
name: "datepicker-bodycell-fontweight",
value: "${global-text-label-fontweight}",
type: "font-weight"
},
{
name: "datepicker-headercell-fontfamily",
value: "${global-text-label-fontfamily}",
type: "font-family"
},
{
name: "datepicker-headercell-fontstyle",
value: "${global-text-label-fontstyle}",
type: "font-style"
},
{
name: "datepicker-headercell-fontweight",
value: "${global-text-label-fontweight}",
type: "font-weight"
},
{
name: "divider-line-color",
value: "${global-color-line-divider}",
type: "background"
},
{
name: "dropdown-text-outlabel-fontstyle",
value: "${e-list-text-label-fontstyle}",
type: "font-style"
},
{
name: "dropdown-text-label-color",
value: "${e-list-text-text-fontcolor}",
type: "color"
},
{
name: "dropdown-text-label-fontstyle",
value: "${e-list-text-text-fontstyle}",
type: "font-style"
},
{
name: "dropdown-icon-image",
value: "e-dropdown-caret",
type: "icon"
},
{
name: "label-header-fontstyle",
value: "${global-text-header-fontstyle}",
type: "font-style"
},
{
name: "label-header-show-fontstyle",
value: "${e-link-primary-fontstyle}",
type: "font-style"
},
{
name: "label-header-show-fontstyle-hover",
value: "${e-link-primary-fontstyle-hover}",
type: "font-style"
},
{
name: "label-header-show-fontstyle-pressed",
value: "${e-link-primary-fontstyle-pressed}",
type: "font-style"
},
{
name: "label-header-show-fontstyle-disabled",
value: "${e-link-primary-fontstyle-disabled}",
type: "font-style"
},
{
name: "label-subheader-fontstyle",
value: "${global-text-subheader-fontstyle}",
type: "font-style"
},
{
name: "label-subheader-show-fontstyle",
value: "${e-link-primary-fontstyle}",
type: "font-style"
},
{
name: "label-subheader-show-fontstyle-hover",
value: "${e-link-primary-fontstyle-hover}",
type: "font-style"
},
{
name: "label-subheader-show-fontstyle-pressed",
value: "${e-link-primary-fontstyle-pressed}",
type: "font-style"
},
{
name: "label-subheader-show-fontstyle-disabled",
value: "${e-link-primary-fontstyle-disabled}",
type: "font-style"
},
{
name: "label-body-fontstyle",
value: "${global-text-body-fontstyle}",
type: "font-style"
},
{
name: "label-body-show-fontstyle",
value: "${e-link-primary-fontstyle}",
type: "font-style"
},
{
name: "label-body-show-fontstyle-hover",
value: "${e-link-primary-fontstyle-hover}",
type: "font-style"
},
{
name: "label-body-show-fontstyle-pressed",
value: "${e-link-primary-fontstyle-pressed}",
type: "font-style"
},
{
name: "label-body-show-fontstyle-disabled",
value: "${e-link-primary-fontstyle-disabled}",
type: "font-style"
},
{
name: "label-fontstyle",
value: "${global-text-label-fontstyle}",
type: "font-style"
},
{
name: "label-show-fontstyle",
value: "${e-link-primary-fontstyle}",
type: "font-style"
},
{
name: "label-show-fontstyle-hover",
value: "${e-link-primary-fontstyle-hover}",
type: "font-style"
},
{
name: "label-show-fontstyle-pressed",
value: "${e-link-primary-fontstyle-pressed}",
type: "font-style"
},
{
name: "label-show-fontstyle-disabled",
value: "${e-link-primary-fontstyle-disabled}",
type: "font-style"
},
{
name: "label-show-linespacing",
value: "normal",
type: "line-height"
},
{
name: "label-show-letterspacing",
value: "normal",
type: "letter-spacing"
},
{
name: "label-show-alignment",
value: "right",
type: "text-align"
},
{
name: "link-primary-fontstyle",
value: "${e-link-primary-fontstyle}",
type: "font-style"
},
{
name: "link-primary-fontstyle-hover",
value: "${e-link-primary-fontstyle-hover}",
type: "font-style"
},
{
name: "link-primary-fontstyle-pressed",
value: "${e-link-primary-fontstyle-pressed}",
type: "font-style"
},
{
name: "link-primary-fontstyle-disabled",
value: "${e-link-primary-fontstyle-disabled}",
type: "font-style"
},
{
name: "link-primary-linespacing",
value: "normal",
type: "line-height"
},
{
name: "link-primary-letterspacing",
value: "normal",
type: "letter-spacing"
},
{
name: "link-primary-alignment",
value: "inherit",
type: "text-align"
},
{
name: "link-secondary-fontstyle",
value: "${e-link-secondary-fontstyle}",
type: "font-style"
},
{
name: "link-secondary-fontstyle-hover",
value: "${e-link-secondary-fontstyle-hover}",
type: "font-style"
},
{
name: "link-secondary-fontstyle-pressed",
value: "${e-link-secondary-fontstyle-pressed}",
type: "font-style"
},
{
name: "link-secondary-fontstyle-disabled",
value: "${e-link-secondary-fontstyle-disabled}",
type: "font-style"
},
{
name: "link-secondary-linespacing",
value: "normal",
type: "line-height"
},
{
name: "link-secondary-letterspacing",
value: "normal",
type: "letter-spacing"
},
{
name: "link-secondary-alignment",
value: "inherit",
type: "text-align"
},
{
name: "list-item-container-backgroundcolor-selected",
value: "${e-list-row-backgroundcolor-selected}",
type: "background"
},
{
name: "list-item-container-backgroundcolor-disabled",
value: "${e-list-row-backgroundcolor-disabled}",
type: "background"
},
{
name: "list-item-container-usealternating",
value: "${e-list-row-usealternating}",
type: "boolean"
},
{
name: "list-item-container-backgroundcolor-alt",
value: "${e-list-row-backgroundcolor-alt}",
type: "background"
},
{
name: "list-item-container-backgroundcolor-alt-selected",
value: "${e-list-row-backgroundcolor-selected}",
type: "background"
},
{
name: "list-item-container-bordercolor",
value: "${e-list-row-bordercolor}",
type: "color"
},
{
name: "list-item-container-bordercolor-hover",
value: "${list-item-container-bordercolor}",
type: "color"
},
{
name: "list-item-container-bordercolor-selected",
value: "${list-item-container-bordercolor}",
type: "color"
},
{
name: "list-item-container-bordercolor-disabled",
value: "${list-item-container-bordercolor}",
type: "color"
},
{
name: "list-item-container-borderthickness",
value: "${e-list-row-borderthickness}",
type: "border-width"
},
{
name: "list-item-container-borderthickness-hover",
value: "${list-item-container-borderthickness}",
type: "border-width"
},
{
name: "list-item-container-borderthickness-selected",
value: "${list-item-container-borderthickness}",
type: "border-width"
},
{
name: "list-item-container-borderthickness-disabled",
value: "${list-item-container-borderthickness}",
type: "border-width"
},
{
name: "list-item-container-border-style",
value: "solid",
type: "border-style"
},
{
name: "list-item-container-border-style-hover",
value: "${list-item-container-border-style}",
type: "border-style"
},
{
name: "list-item-container-border-style-selected",
value: "${list-item-container-border-style}",
type: "border-style"
},
{
name: "list-item-container-border-style-disabled",
value: "${list-item-container-border-style}",
type: "border-style"
},
{
name: "list-item-value-text-color-selected",
value: "${e-list-text-text-fontcolor-selected}",
type: "color"
},
{
name: "list-item-value-text-color-disabled",
value: "${global-color-text-body-disabled}",
type: "color"
},
{
name: "list-item-value-fontfamily",
value: "${e-list-text-text-fontfamily}",
type: "font-family"
},
{
name: "list-item-value-fontfamily-selected",
value: "${e-list-text-text-fontfamily-selected}",
type: "font-family"
},
{
name: "list-item-value-fontfamily-disabled",
value: "${list-item-value-fontfamily}",
type: "font-family"
},
{
name: "list-item-value-fontweight",
value: "${e-list-text-text-fontweight}",
type: "font-weight"
},
{
name: "list-item-value-fontweight-selected",
value: "bold",
type: "font-weight"
},
{
name: "list-item-value-fontweight-disabled",
value: "${list-item-value-fontweight}",
type: "font-weight"
},
{
name: "list-item-value-fontstyle",
value: "${e-list-text-text-fontstyle}",
type: "font-style"
},
{
name: "list-item-value-fontstyle-hover",
value: "${e-list-text-text-fontstyle-hover}",
type: "font-style"
},
{
name: "list-item-value-fontstyle-selected",
value: "${e-list-text-text-fontstyle-selected}",
type: "font-style"
},
{
name: "list-item-value-fontstyle-disabled",
value: "${list-item-value-fontstyle}",
type: "font-style"
},
{
name: "list-item-value-fontstyle-disabledselected",
value: "${list-item-value-fontstyle-disabled}",
type: "font-style"
},
{
name: "list-item-value-fontsize",
value: "${e-list-text-text-fontsize}",
type: "font-size"
},
{
name: "list-item-value-fontsize-selected",
value: "${e-list-text-text-fontsize-selected}",
type: "font-size"
},
{
name: "list-item-value-fontsize-disabled",
value: "${list-item-value-fontsize}",
type: "font-size"
},
{
name: "list-item-metadata-text-color-selected",
value: "${e-list-text-text-fontcolor-selected}",
type: "color"
},
{
name: "list-item-metadata-text-color-disabled",
value: "${global-color-text-body-disabled}",
type: "color"
},
{
name: "list-item-metadata-fontfamily",
value: "${e-list-text-text-fontfamily}",
type: "font-family"
},
{
name: "list-item-metadata-fontfamily-selected",
value: "${e-list-text-text-fontfamily-selected}",
type: "font-family"
},
{
name: "list-item-metadata-fontfamily-disabled",
value: "${list-item-metadata-fontfamily}",
type: "font-family"
},
{
name: "list-item-metadata-fontweight",
value: "${e-list-text-text-fontweight}",
type: "font-weight"
},
{
name: "list-item-metadata-fontweight-selected",
value: "${e-list-text-text-fontweight-selected}",
type: "font-weight"
},
{
name: "list-item-metadata-fontweight-disabled",
value: "${list-item-metadata-fontweight}",
type: "font-weight"
},
{
name: "list-item-metadata-fontstyle",
value: "${e-list-text-text-fontstyle}",
type: "font-style"
},
{
name: "list-item-metadata-fontstyle-hover",
value: "${e-list-text-text-fontstyle-hover}",
type: "font-style"
},
{
name: "list-item-metadata-fontstyle-selected",
value: "${e-list-text-text-fontstyle-selected}",
type: "font-style"
},
{
name: "list-item-metadata-fontstyle-disabled",
value: "${list-item-metadata-fontstyle}",
type: "font-style"
},
{
name: "list-item-metadata-fontstyle-disabledselected",
value: "${list-item-metadata-fontstyle-disabled}",
type: "font-style"
},
{
name: "list-item-metadata-fontsize",
value: "${e-list-text-text-fontsize}",
type: "font-size"
},
{
name: "list-item-metadata-fontsize-selected",
value: "${e-list-text-text-fontsize-selected}",
type: "font-size"
},
{
name: "list-item-metadata-fontsize-disabled",
value: "${list-item-metadata-fontsize}",
type: "font-size"
},
{
name: "list-container-backgroundcolor-disabled",
value: "${global-color-bg-disabled}",
type: "background"
},
{
name: "list-container-bordercolor",
value: "${e-list-bordercolor}",
type: "color"
},
{
name: "list-container-borderthickness",
value: "${e-list-borderthickness}",
type: "border-width"
},
{
name: "list-container-border-style",
value: "solid",
type: "border-style"
},
{
name: "propertydisplay-groupcontainer-backgroundcolor",
value: "${global-color-bg-primary}",
type: "background"
},
{
name: "propertydisplay-groupcontainer-bordercolor",
value: "${global-color-line-border}",
type: "color"
},
{
name: "propertydisplay-groupcontainer-borderthickness",
value: "${global-line-border-thickness}",
type: "border-width"
},
{
name: "propertydisplay-groupcontainer-border-style",
value: "none",
type: "border-style"
},
{
name: "slider-container-bordercolor",
value: "${global-color-line-border}",
type: "color"
},
{
name: "slider-container-backgroundcolor",
value: "${global-color-bg-primary}",
type: "background"
},
{
name: "slider-textbox-borderthickness",
value: "1px",
type: "border-width"
},
{
name: "slider-container-border-style-clicked",
value: "${global-color-core-primary}",
type: "color"
},
{
name: "slider-textbox-border-radius",
value: "2px",
type: "radius"
},
{
name: "slider-thumbs-borderthickness-clicked",
value: "2px",
type: "border-width"
},
{
name: "slider-thumbs-bordercolor-clicked",
value: "${hover(global-color-core-primary)}",
type: "color"
},
{
name: "slider-range-border-style",
value: "none",
type: "border-style"
},
{
name: "slider-range-borderthickness",
value: "0px",
type: "border-width"
},
{
name: "slider-range-bordercolor",
value: "${global-color-line-border}",
type: "color"
},
{
name: "slider-range-backgroundcolor",
value: "${global-color-bg-primary}",
type: "background"
},
{
name: "slider-color-halo",
value: "rgba(234, 246, 255, 0.55)",
type: "color"
},
{
name: "slider-color-track-active",
value: "#0094c8",
type: "color"
},
{
name: "slider-color-track-disabled",
value: "#adb5bd",
type: "color"
},
{
name: "slider-thumbhalos-shadow-clicked",
value: "0px 0px 0px 13px ${slider-color-halo}",
type: "box-shadow"
},
{
name: "slider-track-radius",
value: "9px",
type: "radius"
},
{
name: "slider-value-padding",
value: "6px 0 6px",
type: "size"
},
{
name: "slider-value-distance",
value: "6px",
type: "size"
},
{
name: "radiobutton-fillcolor-pressedselected",
value: "${pressed(radiobutton-fillcolor-selected)}",
type: "color"
},
{
name: "radiobutton-fillcolor-selected",
value: "${e-radiobutton-fillcolor-selected}",
type: "color"
},
{
name: "radiobutton-fillcolor-disabledselected",
value: "${disabled(radiobutton-fillcolor-selected)}",
type: "color"
},
{
name: "radiobutton-backgroundcolor",
value: "${e-radiobutton-backgroundcolor}",
type: "color"
},
{
name: "radiobutton-backgroundcolor-selected",
value: "${if(e-radiobutton-fillcolorcompletely-selected,radiobutton-fillcolor-selected,e-radiobutton-backgroundcolor-selected)}",
type: "color"
},
{
name: "radiobutton-bordercolor",
value: "${e-radiobutton-bordercolor}",
type: "color"
},
{
name: "radiobutton-bordercolor-selected",
value: "${e-radiobutton-bordercolor-selected}",
type: "color"
},
{
name: "radiobutton-borderthickness",
value: "${e-radiobutton-borderthickness}",
type: "size"
},
{
name: "radiobutton-borderthickness-selected",
value: "${e-radiobutton-borderthickness-selected}",
type: "size"
},
{
name: "radiobutton-text-label-color",
value: "${e-radiobutton-text-label-color}",
type: "color"
},
{
name: "radiobutton-text-label-color-selected",
value: "${e-radiobutton-text-label-color-selected}",
type: "color"
},
{
name: "radiobutton-text-label-fontfamily",
value: "${e-radiobutton-text-label-fontfamily}",
type: "font-family"
},
{
name: "radiobutton-text-label-fontfamily-selected",
value: "${e-radiobutton-text-label-fontfamily-selected}",
type: "font-family"
},
{
name: "radiobutton-text-label-fontweight",
value: "${e-radiobutton-text-label-fontweight}",
type: "font-weight"
},
{
name: "radiobutton-text-label-fontweight-selected",
value: "${e-radiobutton-text-label-fontweight-selected}",
type: "font-weight"
},
{
name: "radiobutton-text-label-fontstyle",
value: "${e-radiobutton-text-label-fontstyle}",
type: "font-style"
},
{
name: "radiobutton-text-label-fontstyle-hover",
value: "${radiobutton-text-label-fontstyle}",
type: "font-style"
},
{
name: "radiobutton-text-label-fontstyle-hoverselected",
value: "${radiobutton-text-label-fontstyle-selected}",
type: "font-style"
},
{
name: "radiobutton-text-label-fontstyle-pressed",
value: "${radiobutton-text-label-fontstyle}",
type: "font-style"
},
{
name: "radiobutton-text-label-fontstyle-pressedselected",
value: "${radiobutton-text-label-fontstyle-selected}",
type: "font-style"
},
{
name: "radiobutton-text-label-fontstyle-selected",
value: "${e-radiobutton-text-label-fontstyle-selected}",
type: "font-style"
},
{
name: "radiobutton-text-label-fontstyle-disabled",
value: "${radiobutton-text-label-fontstyle}",
type: "font-style"
},
{
name: "radiobutton-text-label-fontstyle-disabledselected",
value: "${radiobutton-text-label-fontstyle-selected}",
type: "font-style"
},
{
name: "radiobutton-text-label-fontsize",
value: "${e-radiobutton-text-label-fontsize}",
type: "font-size"
},
{
name: "radiobutton-text-label-fontsize-selected",
value: "${e-radiobutton-text-label-fontsize-selected}",
type: "font-size"
},
{
name: "radiobutton-label-linespacing",
value: "normal",
type: "line-height"
},
{
name: "radiobutton-label-linespacing-selected",
value: "${radiobutton-label-linespacing}",
type: "line-height"
},
{
name: "radiobutton-label-letterspacing",
value: "normal",
type: "letter-spacing"
},
{
name: "radiobutton-label-letterspacing-selected",
value: "${radiobutton-label-letterspacing}",
type: "letter-spacing"
},
{
name: "tabset-tab-label-color",
value: "${global-color-text-label}",
type: "color"
},
{
name: "tabset-tab-label-color-hover",
value: "${hover(tabset-tab-label-color)}",
type: "color"
},
{
name: "tabset-tab-label-color-pressed",
value: "${pressed(tabset-tab-label-color)}",
type: "color"
},
{
name: "tabset-tab-label-color-disabled",
value: "${disabled(tabset-tab-label-color)}",
type: "color"
},
{
name: "tabset-tab-label-fontfamily",
value: "${global-text-label-fontfamily}",
type: "font-family"
},
{
name: "tabset-tab-label-fontweight",
value: "${global-text-label-fontweight}",
type: "font-weight"
},
{
name: "tabset-tab-label-fontstyle",
value: "${global-text-label-fontstyle}",
type: "font-style"
},
{
name: "tabset-tab-label-fontstyle-hover",
value: "${tabset-tab-label-fontstyle}",
type: "font-style"
},
{
name: "tabset-tab-label-fontstyle-pressed",
value: "${tabset-tab-label-fontstyle}",
type: "font-style"
},
{
name: "tabset-tab-label-fontstyle-selected",
value: "${tabset-tab-label-fontstyle}",
type: "font-style"
},
{
name: "tabset-tab-label-fontstyle-disabled",
value: "${tabset-tab-label-fontstyle}",
type: "font-style"
},
{
name: "tabset-tab-label-fontsize",
value: "${global-text-label-fontsize}",
type: "font-size"
},
{
name: "tabset-tab-backgroundcolor",
value: "${global-color-bg-primary}",
type: "background"
},
{
name: "tabset-tab-radius",
value: "0px",
type: "radius"
},
{
name: "tabset-tab-indicator-color",
value: "${global-color-line-divider}",
type: "color"
},
{
name: "tabset-tab-padding",
value: "",
type: "size"
},
{
name: "tabset-divider-line-height",
value: "2px",
type: "size"
},
{
name: "textarea-text-label-fontstyle",
value: "${e-textfield-text-label-fontstyle}",
type: "font-style"
},
{
name: "textarea-hinttext-color",
value: "${e-textfield-text-hinttext-color}",
type: "color"
},
{
name: "textarea-hinttext-fontfamily",
value: "${e-textfield-text-hinttext-fontfamily}",
type: "font-family"
},
{
name: "textarea-hinttext-fontweight",
value: "${e-textfield-text-hinttext-fontweight}",
type: "font-weight"
},
{
name: "textarea-hinttext-fontstyle",
value: "${e-textfield-text-hinttext-fontstyle}",
type: "font-style"
},
{
name: "textarea-hinttext-fontstyle-hover",
value: "${textarea-hinttext-fontstyle}",
type: "font-style"
},
{
name: "textarea-hinttext-fontstyle-pressed",
value: "${textarea-hinttext-fontstyle}",
type: "font-style"
},
{
name: "textarea-hinttext-fontstyle-disabled",
value: "${textarea-hinttext-fontstyle}",
type: "font-style"
},
{
name: "textarea-hinttext-fontsize",
value: "${e-textfield-text-hinttext-fontsize}",
type: "font-size"
},
{
name: "textarea-hinttext-linespacing",
value: "normal",
type: "line-height"
},
{
name: "textarea-hinttext-letterspacing",
value: "normal",
type: "letter-spacing"
},
{
name: "textarea-field-text-color",
value: "${e-textfield-text-text-color}",
type: "color"
},
{
name: "textarea-field-fontfamily",
value: "${e-textfield-text-text-fontfamily}",
type: "font-family"
},
{
name: "textarea-field-fontstyle",
value: "${e-textfield-text-text-fontstyle}",
type: "font-style"
},
{
name: "textarea-field-fontstyle-hover",
value: "${textarea-field-fontstyle}",
type: "font-style"
},
{
name: "textarea-field-fontstyle-pressed",
value: "${textarea-field-fontstyle}",
type: "font-style"
},
{
name: "textarea-field-fontstyle-disabled",
value: "${textarea-field-fontstyle}",
type: "font-style"
},
{
name: "textarea-field-fontweight",
value: "${e-textfield-text-text-fontweight}",
type: "font-weight"
},
{
name: "textarea-field-fontsize",
value: "${e-textfield-text-text-fontsize}",
type: "font-size"
},
{
name: "textarea-field-backgroundcolor",
value: "${e-textfield-backgroundcolor}",
type: "background"
},
{
name: "textarea-field-bordercolor",
value: "${e-textfield-bordercolor}",
type: "color"
},
{
name: "textarea-field-borderthickness",
value: "${e-textfield-borderthickness}",
type: "border-width"
},
{
name: "textarea-controltext-color",
value: "${e-textfield-text-hinttext-color}",
type: "color"
},
{
name: "textarea-controltext-fontfamily",
value: "${e-textfield-text-hinttext-fontfamily}",
type: "font-family"
},
{
name: "textarea-controltext-fontweight",
value: "${e-textfield-text-hinttext-fontweight}",
type: "font-weight"
},
{
name: "textarea-controltext-fontstyle",
value: "${e-textfield-text-hinttext-fontstyle}",
type: "font-style"
},
{
name: "textarea-controltext-fontstyle-hover",
value: "${textarea-controltext-fontstyle}",
type: "font-style"
},
{
name: "textarea-controltext-fontstyle-pressed",
value: "${textarea-controltext-fontstyle}",
type: "font-style"
},
{
name: "textarea-controltext-fontstyle-disabled",
value: "${textarea-controltext-fontstyle}",
type: "font-style"
},
{
name: "textarea-controltext-fontsize",
value: "${e-textfield-text-hinttext-fontsize}",
type: "font-size"
},
{
name: "textfield-text-label-fontstyle",
value: "${e-textfield-text-label-fontstyle}",
type: "font-style"
},
{
name: "textfield-hinttext-color",
value: "${e-textfield-text-hinttext-color}",
type: "color"
},
{
name: "textfield-hinttext-fontfamily",
value: "${e-textfield-text-hinttext-fontfamily}",
type: "font-family"
},
{
name: "textfield-hinttext-fontweight",
value: "${e-textfield-text-hinttext-fontweight}",
type: "font-weight"
},
{
name: "textfield-hinttext-fontstyle",
value: "${e-textfield-text-hinttext-fontstyle}",
type: "font-style"
},
{
name: "textfield-hinttext-fontstyle-hover",
value: "${textfield-hinttext-fontstyle}",
type: "font-style"
},
{
name: "textfield-hinttext-fontstyle-pressed",
value: "${textfield-hinttext-fontstyle}",
type: "font-style"
},
{
name: "textfield-hinttext-fontstyle-disabled",
value: "${textfield-hinttext-fontstyle}",
type: "font-style"
},
{
name: "textfield-hinttext-fontsize",
value: "${e-textfield-text-hinttext-fontsize}",
type: "font-size"
},
{
name: "textfield-hinttext-linespacing",
value: "normal",
type: "line-height"
},
{
name: "textfield-hinttext-letterspacing",
value: "normal",
type: "letter-spacing"
},
{
name: "textfield-field-text-color",
value: "${e-textfield-text-text-color}",
type: "color"
},
{
name: "textfield-field-fontfamily",
value: "${e-textfield-text-text-fontfamily}",
type: "font-family"
},
{
name: "textfield-field-fontstyle",
value: "${e-textfield-text-text-fontstyle}",
type: "font-style"
},
{
name: "textfield-field-fontstyle-hover",
value: "${textfield-field-fontstyle}",
type: "font-style"
},
{
name: "textfield-field-fontstyle-pressed",
value: "${textfield-field-fontstyle}",
type: "font-style"
},
{
name: "textfield-field-fontstyle-disabled",
value: "${textfield-field-fontstyle}",
type: "font-style"
},
{
name: "textfield-field-fontweight",
value: "${e-textfield-text-text-fontweight}",
type: "font-weight"
},
{
name: "textfield-field-fontsize",
value: "${e-textfield-text-text-fontsize}",
type: "font-size"
},
{
name: "textfield-field-backgroundcolor",
value: "${e-textfield-backgroundcolor}",
type: "background"
},
{
name: "textfield-field-backgroundcolor-hover",
value: "${textfield-field-backgroundcolor}",
type: "background"
},
{
name: "textfield-field-backgroundcolor-pressed",
value: "${textfield-field-backgroundcolor}",
type: "background"
},
{
name: "textfield-field-backgroundcolor-disabled",
value: "${global-color-bg-disabled}",
type: "background"
},
{
name: "textfield-field-bordercolor",
value: "${e-textfield-bordercolor}",
type: "color"
},
{
name: "textfield-field-bordercolor-hover",
value: "${hover(textfield-field-bordercolor)}",
type: "color"
},
{
name: "textfield-field-bordercolor-pressed",
value: "${pressed(textfield-field-bordercolor)}",
type: "color"
},
{
name: "textfield-field-bordercolor-disabled",
value: "${textfield-field-bordercolor}",
type: "color"
},
{
name: "textfield-field-borderthickness",
value: "${e-textfield-borderthickness}",
type: "border-width"
},
{
name: "textfield-field-borderthickness-hover",
value: "${textfield-field-borderthickness}",
type: "border-width"
},
{
name: "textfield-field-borderthickness-pressed",
value: "${textfield-field-borderthickness}",
type: "border-width"
},
{
name: "textfield-field-borderthickness-disabled",
value: "${textfield-field-borderthickness}",
type: "border-width"
},
{
name: "textfield-field-border-style",
value: "solid",
type: "border-style"
},
{
name: "textfield-field-border-radius",
value: "${e-textfield-border-radius}",
type: "radius"
},
{
name: "textfield-controltext-color",
value: "${e-textfield-text-hinttext-color}",
type: "color"
},
{
name: "textfield-controltext-fontfamily",
value: "${e-textfield-text-hinttext-fontfamily}",
type: "font-family"
},
{
name: "textfield-controltext-fontweight",
value: "${e-textfield-text-hinttext-fontweight}",
type: "font-weight"
},
{
name: "textfield-controltext-fontstyle",
value: "${e-textfield-text-hinttext-fontstyle}",
type: "font-style"
},
{
name: "textfield-controltext-fontstyle-hover",
value: "${textfield-controltext-fontstyle}",
type: "font-style"
},
{
name: "textfield-controltext-fontstyle-pressed",
value: "${textfield-controltext-fontstyle}",
type: "font-style"
},
{
name: "textfield-controltext-fontstyle-disabled",
value: "${textfield-controltext-fontstyle}",
type: "font-style"
},
{
name: "textfield-controltext-fontsize",
value: "${e-textfield-text-hinttext-fontsize}",
type: "font-size"
},
{
name: "toggle-track-backgroundcolor",
value: "${global-color-line-border}",
type: "background"
},
{
name: "toggle-track-backgroundcolor-selected",
value: "${global-color-core-primary}",
type: "background"
},
{
name: "toggle-track-backgroundcolor-disabled",
value: "${global-color-bg-disabled}",
type: "background"
},
{
name: "toggle-track-bordercolor",
value: "${global-color-line-border}",
type: "color"
},
{
name: "toggle-track-bordercolor-selected",
value: "${global-color-core-primary}",
type: "color"
},
{
name: "toggle-track-bordercolor-disabled",
value: "${toggle-track-bordercolor}",
type: "color"
},
{
name: "toggle-track-borderthickness",
value: "${global-line-border-thickness}",
type: "border-width"
},
{
name: "toggle-track-borderstyle",
value: "solid",
type: "border-style"
},
{
name: "toggle-handle-backgroundcolor",
value: "${global-color-bg-primary}",
type: "background"
},
{
name: "toggle-handle-backgroundcolor-selected",
value: "${toggle-handle-backgroundcolor}",
type: "background"
},
{
name: "toggle-handle-backgroundcolor-disabled",
value: "${toggle-track-bordercolor}",
type: "background"
},
{
name: "toggle-handle-bordercolor",
value: "${global-color-bg-primary}",
type: "color"
},
{
name: "toggle-handle-bordercolor-selected",
value: "${toggle-handle-bordercolor}",
type: "color"
},
{
name: "toggle-handle-bordercolor-disabled",
value: "${toggle-track-bordercolor}",
type: "color"
},
{
name: "toggle-handle-thickness",
value: "0px",
type: "border-width"
},
{
name: "toggle-handle-style",
value: "none",
type: "border-style"
},
{
name: "tooltip-backgroundcolor",
value: "${global-color-bg-primary}",
type: "background"
},
{
name: "tooltip-bordercolor",
value: "${global-color-line-border}",
type: "color"
},
{
name: "tooltip-text-color",
value: "${global-color-text-body}",
type: "color"
},
{
name: "tooltip-text-fontfamily",
value: "${global-text-body-fontfamily}",
type: "font-family"
},
{
name: "tooltip-text-fontweight",
value: "${global-text-body-fontweight}",
type: "font-weight"
},
{
name: "tooltip-text-fontstyle",
value: "${font-style-cond(label-body-fontstyle)}",
type: "font-style"
},
{
name: "tooltip-text-fontsize",
value: "${global-text-tooltip-fontsize}",
type: "font-size"
},
{
name: "tooltip-text-linespacing",
value: "normal",
type: "line-height"
},
{
name: "tooltip-text-letterspacing",
value: "normal",
type: "letter-spacing"
},
{
name: "tooltip-box-shadow",
value: "0px 2px 4px 0px #000000",
type: "box-shadow"
},
{
name: "global-color-shadow",
value: "#232b2d",
type: "color"
},
{
name: "confirmationdialogue-shadowcolor",
value: "${global-color-shadow}",
type: "color"
},
{
name: "datepicker-gridcontainer-shadowcolor",
value: "rgba(0, 0, 0, 0.3)",
type: "color"
},
{
name: "e-list-container-shadowcolor",
value: "rgba(35, 43, 45, 0.3)",
type: "color"
},
{
name: "listshuttle-header-backgroundcolor",
value: "${global-color-bg-secondary}",
type: "background"
},
{
name: "listshuttle-header-bordercolor",
value: "${global-color-line-border}",
type: "color"
},
{
name: "listshuttle-header-borderthickness",
value: "${global-line-border-thickness}",
type: "line-height"
},
{
name: "listshuttle-header-border-style",
value: "none",
type: "border-style"
},
{
name: "listshuttle-container-backgroundcolor",
value: "${global-color-bg-primary}",
type: "background"
},
{
name: "listshuttle-container-bordercolor",
value: "${global-color-line-border}",
type: "color"
},
{
name: "listshuttle-container-borderthickness",
value: "${global-line-border-thickness}",
type: "border-width"
},
{
name: "listshuttle-container-borderstyle",
value: "solid",
type: "border-style"
},
{
name: "slider-value-color",
value: "${global-color-text-label}",
type: "color"
},
{
name: "label-show-backgroundcolor",
value: "${global-color-bg-primary}",
type: "background"
},
{
name: "label-show-shadow",
value: "0px -10px 14px 7px ${label-show-backgroundcolor}",
type: "box-shadow"
},
{
name: "list-item-border-style-disabled",
value: "${list-item-container-border-style-disabled}",
type: "border-style"
},
{
name: "checkbox-mark-color",
value: "${checkbox-text-label-color-selected}",
type: "color"
},
{
name: "checkbox-mark-color-pressed",
value: "${checkbox-mark-color}",
type: "color"
},
{
name: "textfield-field-backgroundcolor-focus",
value: "${textfield-field-backgroundcolor-hover}",
type: "color"
},
{
name: "textfield-field-bordercolor-focus",
value: "${textfield-field-bordercolor-hover}",
type: "color"
},
{
name: "e-chart-series-1-color",
value: "#f05b80",
type: "color"
},
{
name: "e-chart-series-2-color",
value: "#8D909A",
type: "color"
},
{
name: "e-chart-series-3-color",
value: "#bb68c8",
type: "color"
},
{
name: "e-chart-series-4-color",
value: "#2f97ff",
type: "color"
},
{
name: "e-chart-series-5-color",
value: "#EB6D00",
type: "color"
},
{
name: "e-chart-series-6-color",
value: "#b8849a",
type: "color"
},
{
name: "e-chart-series-7-color",
value: "#8A4FF7",
type: "color"
},
{
name: "e-chart-series-8-color",
value: "#139492",
type: "color"
},
{
name: "e-chart-series-9-color",
value: "#AA9103",
type: "color"
},
{
name: "e-chart-series-10-color",
value: "#C33E70",
type: "color"
},
{
name: "e-chart-series-11-color",
value: "#904B6F",
type: "color"
},
{
name: "e-chart-series-12-color",
value: "#9D27B0",
type: "color"
},
{
name: "e-chart-series-13-color",
value: "#3363D8",
type: "color"
},
{
name: "e-chart-series-14-color",
value: "#00709E",
type: "color"
},
{
name: "e-chart-series-15-color",
value: "#2A5B59",
type: "color"
},
{
name: "e-chart-series-16-color",
value: "#381394",
type: "color"
},
{
name: "e-chart-series-17-color",
value: "#8F3809",
type: "color"
},
{
name: "e-chart-series-18-color",
value: "#8E6514",
type: "color"
},
{
name: "e-chart-series-19-color",
value: "#5D5F69",
type: "color"
},
{
name: "e-chart-series-20-color",
value: "#86335E",
type: "color"
},
{
name: "e-chart-series-21-color",
value: "#490E3E",
type: "color"
},
{
name: "e-chart-series-22-color",
value: "#56226E",
type: "color"
},
{
name: "e-chart-series-23-color",
value: "#2B387F",
type: "color"
},
{
name: "e-chart-series-24-color",
value: "#1D496E",
type: "color"
},
{
name: "e-chart-ruler-color",
value: "${global-color-line-border}",
type: "color"
},
{
name: "e-chart-tick-label-color",
value: "${global-color-text-label}",
type: "color"
},
{
name: "e-chart-zero-line-thickness",
value: "3px",
type: "size"
},
{
name: "e-chart-zero-line-color",
value: "${global-color-line-border}",
type: "color"
},
{
name: "e-chart-value-background",
value: "rgba(255, 255, 255, 0.3)",
type: "color"
},
{
name: "e-chart-value-color",
value: "${global-color-text-label}",
type: "color"
},
{
name: "global-text-tooltip-fontsize",
value: "12px",
type: "font-size"
},
{
name: "global-color-field-icon",
value: "#232b2d",
type: "color"
},
{
name: "button-icon-size",
value: "18px",
type: "size"
},
{
name: "tooltip-borderwidth",
value: "${global-line-border-thickness}",
type: "border-width"
},
{
name: "tooltip-borderstyle",
value: "solid",
type: "string"
},
{
name: "tooltip-borderradius",
value: "4px",
type: "size"
},
{
name: "tooltip-text-fontstretch",
value: "normal",
type: "font-stretch"
},
{
name: "tooltip-truncation-overflow-marginbottom",
value: "${global-text-tooltip-fontsize}",
type: "size"
},
{
name: "tooltip-maxwidth",
value: "546px",
type: "size"
},
{
name: "datepicker-input-label-text-fontweight",
value: "${global-text-label-fontstyle}",
type: "font-weight"
},
{
name: "datepicker-input-label-placeholder-textcolor",
value: "${datepicker-gridcontainer-shadowcolor}",
type: "color"
},
{
name: "datepicker-input-label-text-fontfamily",
value: "${global-text-label-fontfamily}",
type: "font-family"
},
{
name: "datepicker-input-label-text-fontsize",
value: "${global-text-label-fontsize}",
type: "font-size"
},
{
name: "datepicker-input-label-bordercolor",
value: "${textfield-field-bordercolor}",
type: "color"
},
{
name: "datepicker-input-label-borderthickness",
value: "${textfield-field-borderthickness}",
type: "border-width"
},
{
name: "datepicker-input-label-borderstyle",
value: "${textfield-field-border-style}",
type: "border-style"
},
{
name: "datepicker-input-label-minheight",
value: "34px",
type: "size"
},
{
name: "datepicker-bodycell-dot-size",
value: "8px",
type: "size"
},
{
name: "chipbaseddatafilter-label-fontsize",
value: "${global-text-label-fontsize}",
type: "font-size"
},
{
name: "chipbaseddatafilter-label-fontfamily",
value: "${global-text-label-fontfamily}",
type: "font-family"
},
{
name: "chipbaseddatafilter-label-fontweight",
value: "${global-text-body-fontweight}",
type: "font-weight"
},
{
name: "chipbaseddatafilter-bg-color",
value: "${global-color-bg-primary}",
type: "background"
},
{
name: "chipbaseddatafilter-button-color",
value: "${global-color-core-primary}",
type: "color"
},
{
name: "chipbaseddatafilter-borderstyle",
value: "solid",
type: "border-style"
},
{
name: "chipbaseddatafilter-chips-base-height",
value: "17px",
type: "size"
},
{
name: "chipbaseddatafilter-chips-minwidth",
value: "50px",
type: "size"
},
{
name: "chipbaseddatafilter-chips-maxwidth",
value: "238px",
type: "size"
},
{
name: "chipbaseddatafilter-chips-lineheight",
value: "34px",
type: "line-height"
},
{
name: "chipbaseddatafilter-chips-color",
value: "${global-color-core-secondary1}",
type: "color"
},
{
name: "chipbaseddatafilter-chips-borderradius",
value: "${chipbaseddatafilter-chips-base-height}",
type: "radius"
},
{
name: "chipbaseddatafilter-chips-crossbutton-color-hover",
value: "${global-color-bg-primary}",
type: "color"
},
{
name: "chipbaseddatafilter-chips-crossbutton-bg-color",
value: "${button-small-bordercolor-hover}",
type: "background"
},
{
name: "chipbaseddatafilter-chips-borderstyle",
value: "${chipbaseddatafilter-borderstyle}",
type: "border-style"
},
{
name: "chipbaseddatafilter-chips-borderthickness",
value: "${global-line-interior-thickness}",
type: "border-width"
},
{
name: "chipbaseddatafilter-chipscontainer-showbutton-fontweight",
value: "${global-text-label-fontweight}",
type: "font-width"
},
{
name: "chipbaseddatafilter-base-subcomponents-width",
value: "273px",
type: "size"
},
{
name: "e-chart-grid-gap",
value: "32px",
type: "size"
},
{
name: "e-chart-grid-gap-title",
value: "16px",
type: "size"
},
{
name: "e-chart-legend-column-gap",
value: "32px",
type: "size"
},
{
name: "e-chart-legend-row-gap",
value: "16px",
type: "size"
},
{
name: "global-text-title-fontfamily",
value: "Arial",
type: "font-family"
},
{
name: "global-text-title-fontsize",
value: "16px",
type: "font-size"
},
{
name: "global-text-caption-fontfamily",
value: "Arial",
type: "font-family"
},
{
name: "global-text-caption-fontsize",
value: "12px",
type: "font-size"
},
{
name: "global-text-caption-fontweight",
value: "normal",
type: "font-weight"
},
{
name: "global-text-caption-fontstyle",
value: "normal",
type: "font-style"
},
{
name: "global-color-text-caption",
value: "#232b2d",
type: "color"
},
{
name: "global-text-title-fontweight",
value: "bold",
type: "font-weight"
},
{
name: "global-text-title-fontstyle",
value: "normal",
type: "font-style"
},
{
name: "global-color-text-title",
value: "#232B2D",
type: "color"
},
{
name: "pagination-arrow-button-size",
value: "18px",
type: "size"
},
{
name: "pagination-components-height",
value: "34px",
type: "size"
},
{
name: "pagination-error-message-color",
value: "#ce3939",
type: "size"
},
{
name: "pagination-error-message-textsize",
value: "12px",
type: "font-size"
},
{
name: "dynamicpanel-toggle-button-hit-area",
value: "34px",
type: "size"
},
{
name: "dynamicpanel-padding",
value: "34px",
type: "size"
}
];
var stylemapsJson = {
"ptc1-divider": [
{
variant: "",
parts: [
{
part: "",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
padding: "0px 0px 0px 0px"
}
}
]
},
{
part: "line",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
background: "${divider-line-color}",
height: "${global-line-divider-thickness}",
width: "100%"
}
}
]
}
]
}
],
"ptcs-breadcrumb": [
{
variant: "",
parts: [
{
part: "link",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
"border-color": "rgba(0,0,0,0)",
"border-style": "solid",
"border-width": "0px"
}
}
]
},
{
part: "root",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
width: "",
background: "rgba(0,0,0,0)",
"border-style": "none",
"border-width": "0px",
"border-color": "${global-color-line-border}",
"min-height": "34px",
"margin-left": "16px"
}
}
]
},
{
part: "",
states: [
{
stateHost: ":focus",
stateKey: "focus",
styles: {
outline: "none"
}
}
]
},
{
part: "leftbutton",
states: [
{
stateKey: "base",
styles: {
margin: "0px"
}
}
]
},
{
part: "rightbutton",
states: [
{
stateKey: "base",
styles: {
margin: "0px"
}
}
]
},
{
part: "link:link",
states: [
{
stateKey: "base",
styles: {
"padding-left": "8px",
"padding-right": "8px"
}
}
]
}
]
}
],
"ptcs-button": [
{
variant: "primary",
parts: [
{
part: "",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
background: "${button-primary-backgroundcolor}",
"border-color": "${button-primary-bordercolor}",
"border-width": "${button-primary-borderthickness}",
"border-style": "${button-primary-border-style}",
width: "",
"min-height": "34px",
"border-radius": "${button-primary-radius}",
"text-align": "inherit",
color: "${button-primary-text-color}",
"min-width": "34px"
}
},
{
stateKey: "hover",
state: "",
stateHost: ":not([disabled]):hover",
styles: {
background: "${e-button-primary-hover-backgroundcolor}",
"border-color": "${e-button-primary-hover-bordercolor}",
"border-width": "${e-button-primary-hover-borderthickness}",
"border-style": "${button-primary-border-style}",
"border-radius": "${e-button-primary-hover-radius}",
color: "${e-button-primary-hover-fontcolor}"
}
},
{
stateKey: "pressed",
state: "",
stateHost: ":not([disabled]):hover:active",
styles: {
background: "${e-button-primary-pressed-backgroundcolor}",
"border-color": "${e-button-primary-pressed-bordercolor}",
"border-width": "${e-button-primary-pressed-borderthickness}",
"border-style": "${button-primary-border-style}",
"border-radius": "${e-button-primary-pressed-radius}",
color: "${e-button-primary-pressed-fontcolor}"
}
},
{
stateKey: "selected",
state: "",
stateHost: "[selected]",
styles: {
background: "${button-primary-backgroundcolor}",
"border-color": "${button-primary-bordercolor}",
"border-width": "${button-primary-borderthickness}",
"border-style": "${button-primary-border-style}",
"border-radius": "${button-primary-radius}",
color: "${button-primary-text-color}"
}
},
{
stateKey: "disabled",
state: "",
stateHost: "[disabled]",
styles: {
background: "${e-button-primary-disabled-backgroundcolor}",
"border-color": "${e-button-primary-disabled-bordercolor}",
"border-width": "${e-button-primary-disabled-borderthickness}",
"border-style": "${button-primary-border-style}",
"border-radius": "${e-button-primary-disabled-radius}",
color: "${e-button-primary-disabled-fontcolor}"
}
},
{
stateHost: ":focus",
stateKey: "focus",
styles: {
outline: "none",
"--ptcs-focus-overlay--padding": "0px",
"--ptcs-focus-overlay--border-radius": "${button-primary-radius}",
"box-shadow": "inset 0 0 0 3px white"
}
}
]
},
{
part: "icon",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
width: "${button-icon-size}",
height: "${button-icon-size}",
"--ptcs-use-icon": "${button-primary-icon-image}",
padding: "0px"
}
},
{
stateKey: "hover",
state: "",
stateHost: ":not([disabled]):hover",
styles: {
"--ptcs-use-icon": "${button-primary-icon-image}"
}
},
{
stateKey: "pressed",
state: "",
stateHost: ":not([disabled]):hover:active",
styles: {
"--ptcs-use-icon": "${button-primary-icon-image}"
}
},
{
stateKey: "selected",
state: "",
stateHost: "[selected]",
styles: {
"--ptcs-use-icon": "${button-primary-icon-image}"
}
},
{
stateKey: "disabled",
state: "",
stateHost: "[disabled]",
styles: {
"--ptcs-use-icon": "${button-primary-icon-image}"
}
}
]
},
{
part: "label",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
"font-family": "${button-primary-fontfamily}",
"font-weight": "${button-primary-fontweight}",
"font-style": "${font-style-cond(button-primary-fontstyle)}",
"text-decoration": "${text-decoration-cond(button-primary-fontstyle)}",
"font-size": "${button-primary-fontsize}",
"line-height": "normal",
"letter-spacing": "normal",
"text-align": "inherit"
}
},
{
stateKey: "hover",
state: "",
stateHost: ":not([disabled]):hover",
styles: {
"font-family": "${e-button-primary-hover-fontfamily}",
"font-weight": "${e-button-primary-hover-fontweight}",
"font-style": "${font-style-cond(button-primary-fontstyle-hover)}",
"text-decoration": "${text-decoration-cond(button-primary-fontstyle-hover)}",
"font-size": "${e-button-primary-hover-fontsize}"
}
},
{
stateKey: "pressed",
state: "",
stateHost: ":not([disabled]):hover:active",
styles: {
"font-family": "${e-button-primary-pressed-fontfamily}",
"font-weight": "${e-button-primary-pressed-fontweight}",
"font-style": "${font-style-cond(button-primary-fontstyle-pressed)}",
"text-decoration": "${text-decoration-cond(button-primary-fontstyle-pressed)}",
"font-size": "${e-button-primary-pressed-fontsize}"
}
},
{
stateKey: "selected",
state: "",
stateHost: "[selected]",
styles: {
"font-family": "${button-primary-fontfamily}",
"font-weight": "${button-primary-fontweight}",
"font-style": "${font-style-cond(button-primary-fontstyle-selected)}",
"text-decoration": "${text-decoration-cond(button-primary-fontstyle-selected)}",
"font-size": "${button-primary-fontsize}"
}
},
{
stateKey: "disabled",
state: "",
stateHost: "[disabled]",
styles: {
"font-family": "${e-button-primary-disabled-fontfamily}",
"font-weight": "${e-button-primary-disabled-fontweight}",
"font-style": "${font-style-cond(button-primary-fontstyle-disabled)}",
"text-decoration": "${text-decoration-cond(button-primary-fontstyle-disabled)}",
"font-size": "${e-button-primary-disabled-fontsize}"
}
}
]
},
{
part: "root",
states: [
{
stateHost: "[mode=label]",
stateKey: "label",
styles: {
padding: "0px 20px"
}
},
{
stateHost: "[mode=icon]",
stateKey: "icon",
styles: {
"max-width": "34px",
"max-height": "34px"
}
},
{
stateHost: "[mode='icon+label']",
stateKey: "icon-label",
styles: {
padding: "0px 20px"
}
}
]
}
]
},
{
variant: "secondary",
parts: [
{
part: "",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
background: "${button-secondary-backgroundcolor}",
"border-color": "${button-secondary-bordercolor}",
"border-width": "${button-secondary-borderthickness}",
"border-style": "${button-secondary-border-style}",
width: "",
"min-height": "34px",
"border-radius": "${button-secondary-radius}",
"text-align": "inherit",
color: "${button-secondary-text-color}",
"min-width": "34px"
}
},
{
stateKey: "hover",
state: "",
stateHost: ":not([disabled]):hover",
styles: {
background: "${e-button-secondary-hover-backgroundcolor}",
"border-color": "${e-button-secondary-hover-bordercolor}",
"border-width": "${e-button-secondary-hover-borderthickness}",
"border-style": "${button-secondary-border-style}",
"border-radius": "${e-button-secondary-hover-radius}",
color: "${e-button-secondary-hover-fontcolor}"
}
},
{
stateKey: "pressed",
state: "",
stateHost: ":not([disabled]):hover:active",
styles: {
background: "${e-button-secondary-pressed-backgroundcolor}",
"border-color": "${e-button-secondary-pressed-bordercolor}",
"border-width": "${e-button-secondary-pressed-borderthickness}",
"border-style": "${button-secondary-border-style}",
"border-radius": "${e-button-secondary-pressed-radius}",
color: "${e-button-secondary-pressed-fontcolor}"
}
},
{
stateKey: "selected",
state: "",
stateHost: "[selected]",
styles: {
background: "${button-secondary-backgroundcolor}",
"border-color": "${button-secondary-bordercolor}",
"border-width": "${button-secondary-borderthickness}",
"border-style": "${button-secondary-border-style}",
"border-radius": "${button-secondary-radius}",
color: "${button-secondary-text-color}"
}
},
{
stateKey: "disabled",
state: "",
stateHost: "[disabled]",
styles: {
background: "${e-button-secondary-disabled-backgroundcolor}",
"border-color": "${e-button-secondary-disabled-bordercolor}",
"border-width": "${e-button-secondary-disabled-borderthickness}",
"border-style": "${button-secondary-border-style}",
"border-radius": "${e-button-secondary-disabled-radius}",
color: "${e-button-secondary-disabled-fontcolor}"
}
},
{
stateHost: ":focus",
stateKey: "focus",
styles: {
outline: "none",
"--ptcs-focus-overlay--padding": "0px",
"--ptcs-focus-overlay--border-radius": "${button-secondary-radius}",
"box-shadow": "inset 0 0 0 3px white"
}
}
]
},
{
part: "icon",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
width: "${button-icon-size}",
height: "${button-icon-size}",
"--ptcs-use-icon": "${button-secondary-icon-image}",
padding: "0px"
}
},
{
stateKey: "hover",
state: "",
stateHost: ":not([disabled]):hover",
styles: {
"--ptcs-use-icon": "${button-secondary-icon-image}"
}
},
{
stateKey: "pressed",
state: "",
stateHost: ":not([disabled]):hover:active",
styles: {
"--ptcs-use-icon": "${button-secondary-icon-image}"
}
},
{
stateKey: "selected",
state: "",
stateHost: "[selected]",
styles: {
"--ptcs-use-icon": "${button-secondary-icon-image}"
}
},
{
stateKey: "disabled",
state: "",
stateHost: "[disabled]",
styles: {
"--ptcs-use-icon": "${button-secondary-icon-image}"
}
}
]
},
{
part: "label",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
"font-family": "${button-secondary-fontfamily}",
"font-weight": "${button-secondary-fontweight}",
"font-style": "${font-style-cond(button-secondary-fontstyle)}",
"text-decoration": "${text-decoration-cond(button-secondary-fontstyle)}",
"font-size": "${button-secondary-fontsize}",
"line-height": "normal",
"letter-spacing": "normal",
"text-align": "inherit"
}
},
{
stateKey: "hover",
state: "",
stateHost: ":not([disabled]):hover",
styles: {
"font-family": "${e-button-secondary-hover-fontfamily}",
"font-weight": "${e-button-secondary-hover-fontweight}",
"font-style": "${font-style-cond(button-secondary-fontstyle-hover)}",
"text-decoration": "${text-decoration-cond(button-secondary-fontstyle-hover)}",
"font-size": "${e-button-secondary-hover-fontsize}"
}
},
{
stateKey: "pressed",
state: "",
stateHost: ":not([disabled]):hover:active",
styles: {
"font-family": "${e-button-secondary-pressed-fontfamily}",
"font-weight": "${e-button-secondary-pressed-fontweight}",
"font-style": "${font-style-cond(button-secondary-fontstyle-pressed)}",
"text-decoration": "${text-decoration-cond(button-secondary-fontstyle-pressed)}",
"font-size": "${e-button-secondary-pressed-fontsize}"
}
},
{
stateKey: "selected",
state: "",
stateHost: "[selected]",
styles: {
"font-family": "${button-secondary-fontfamily}",
"font-weight": "${button-secondary-fontweight}",
"font-style": "${font-style-cond(button-secondary-fontstyle-selected)}",
"text-decoration": "${text-decoration-cond(button-secondary-fontstyle-selected)}",
"font-size": "${button-secondary-fontsize}"
}
},
{
stateKey: "disabled",
state: "",
stateHost: "[disabled]",
styles: {
"font-family": "${e-button-secondary-disabled-fontfamily}",
"font-weight": "${e-button-secondary-disabled-fontweight}",
"font-style": "${font-style-cond(button-secondary-fontstyle-disabled)}",
"text-decoration": "${text-decoration-cond(button-secondary-fontstyle-disabled)}",
"font-size": "${e-button-secondary-disabled-fontsize}"
}
}
]
},
{
part: "root",
states: [
{
stateHost: "[mode='icon+label']",
stateKey: "icon-label",
styles: {
padding: "0px 20px"
}
},
{
stateHost: "[mode=label]",
stateKey: "label",
styles: {
padding: "0px 20px"
}
},
{
stateHost: "[mode=icon]",
stateKey: "icon",
styles: {
"max-width": "34px",
"max-height": "34px"
}
}
]
}
]
},
{
variant: "tertiary",
parts: [
{
part: "",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
background: "${button-tertiary-backgroundcolor}",
"border-color": "${button-tertiary-bordercolor}",
"border-width": "${button-tertiary-borderthickness}",
"border-style": "${button-tertiary-border-style}",
width: "",
"min-height": "34px",
"border-radius": "${button-tertiary-radius}",
"text-align": "${button-tertiary-alignment}",
color: "${button-tertiary-text-color}",
"min-width": "34px"
}
},
{
stateKey: "hover",
state: "",
stateHost: ":not([disabled]):hover",
styles: {
background: "${button-tertiary-backgroundcolor-hover}",
"border-color": "${button-tertiary-bordercolor-hover}",
"border-width": "${button-tertiary-borderthickness-hover}",
"border-style": "${button-tertiary-border-style-hover}",
"border-radius": "${e-button-tertiary-hover-radius}",
color: "${button-tertiary-text-color-hover}"
}
},
{
stateKey: "pressed",
state: "",
stateHost: ":not([disabled]):hover:active",
styles: {
background: "${button-tertiary-backgroundcolor-pressed}",
"border-color": "${button-tertiary-bordercolor-pressed}",
"border-width": "${button-tertiary-borderthickness-pressed}",
"border-style": "${button-tertiary-border-style-pressed}",
"border-radius": "${e-button-tertiary-pressed-radius}",
color: "${button-tertiary-text-color-pressed}"
}
},
{
stateKey: "selected",
state: "",
stateHost: "[selected]",
styles: {
background: "${button-tertiary-backgroundcolor}",
"border-color": "${button-tertiary-bordercolor}",
"border-width": "${button-tertiary-borderthickness}",
"border-style": "${button-tertiary-border-style}",
"border-radius": "${button-tertiary-radius}",
color: "${button-tertiary-text-color}"
}
},
{
stateKey: "disabled",
state: "",
stateHost: "[disabled]",
styles: {
background: "${button-tertiary-backgroundcolor-disabled}",
"border-color": "${button-tertiary-bordercolor-disabled}",
"border-width": "${button-tertiary-borderthickness-disabled}",
"border-style": "${button-tertiary-border-style-disabled}",
"border-radius": "${e-button-tertiary-disabled-radius}",
color: "${button-tertiary-text-color-disabled}"
}
},
{
stateHost: ":focus",
stateKey: "focus",
styles: {
outline: "none",
"--ptcs-focus-overlay--padding": "0px",
"--ptcs-focus-overlay--border-radius": "${button-tertiary-radius}",
"box-shadow": "inset 0 0 0 3px white"
}
}
]
},
{
part: "icon",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
width: "${button-icon-size}",
height: "${button-icon-size}",
"--ptcs-use-icon": "${button-tertiary-icon-image}",
padding: "0px"
}
},
{
stateKey: "hover",
state: "",
stateHost: ":not([disabled]):hover",
styles: {
"--ptcs-use-icon": "${button-tertiary-icon-image}"
}
},
{
stateKey: "pressed",
state: "",
stateHost: ":not([disabled]):hover:active",
styles: {
"--ptcs-use-icon": "${button-tertiary-icon-image}"
}
},
{
stateKey: "selected",
state: "",
stateHost: "[selected]",
styles: {
"--ptcs-use-icon": "${button-tertiary-icon-image}"
}
},
{
stateKey: "disabled",
state: "",
stateHost: "[disabled]",
styles: {
"--ptcs-use-icon": "${button-tertiary-icon-image}"
}
}
]
},
{
part: "label",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
"font-family": "${button-tertiary-fontfamily}",
"font-weight": "${button-tertiary-fontweight}",
"font-style": "${font-style-cond(button-tertiary-fontstyle)}",
"text-decoration": "${text-decoration-cond(button-tertiary-fontstyle)}",
"font-size": "${button-tertiary-fontsize}",
"line-height": "${button-tertiary-linespacing}",
"letter-spacing": "${button-tertiary-letterspacing}",
"text-align": "${button-tertiary-text-alignment}"
}
},
{
stateKey: "hover",
state: "",
stateHost: ":not([disabled]):hover",
styles: {
"font-family": "${button-tertiary-fontfamily-hover}",
"font-weight": "${button-tertiary-fontweight-hover}",
"font-style": "${font-style-cond(button-tertiary-fontstyle-hover)}",
"text-decoration": "${text-decoration-cond(button-tertiary-fontstyle-hover)}",
"font-size": "${button-tertiary-fontsize-hover}"
}
},
{
stateKey: "pressed",
state: "",
stateHost: ":not([disabled]):hover:active",
styles: {
"font-family": "${button-tertiary-fontfamily-pressed}",
"font-weight": "${button-tertiary-fontweight-pressed}",
"font-style": "${font-style-cond(button-tertiary-fontstyle-pressed)}",
"text-decoration": "${text-decoration-cond(button-tertiary-fontstyle-pressed)}",
"font-size": "${button-tertiary-fontsize-pressed}"
}
},
{
stateKey: "selected",
state: "",
stateHost: "[selected]",
styles: {
"font-family": "${button-tertiary-fontfamily}",
"font-weight": "${button-tertiary-fontweight}",
"font-style": "${font-style-cond(button-tertiary-fontstyle-selected)}",
"text-decoration": "${text-decoration-cond(button-tertiary-fontstyle-selected)}",
"font-size": "${button-tertiary-fontsize}"
}
},
{
stateKey: "disabled",
state: "",
stateHost: "[disabled]",
styles: {
"font-family": "${button-tertiary-fontfamily-disabled}",
"font-weight": "${button-tertiary-fontweight-disabled}",
"font-style": "${font-style-cond(button-tertiary-fontstyle-disabled)}",
"text-decoration": "${text-decoration-cond(button-tertiary-fontstyle-disabled)}",
"font-size": "${button-tertiary-fontsize-disabled}"
}
}
]
},
{
part: "root",
states: [
{
stateHost: "[mode=label]",
stateKey: "label",
styles: {
padding: "0px 20px"
}
},
{
stateHost: "[mode='icon+label']",
stateKey: "icon-label",
styles: {
padding: "0px 20px"
}
},
{
stateHost: "[mode=icon]",
stateKey: "icon",
styles: {
"max-width": "34px",
"max-height": "34px"
}
}
]
}
]
},
{
variant: "danger",
parts: [
{
part: "",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
background: "${button-danger-backgroundcolor}",
"border-color": "${button-danger-bordercolor}",
"border-width": "${button-danger-borderthickness}",
"border-style": "${button-danger-border-style}",
width: "",
"min-height": "34px",
"border-radius": "${button-danger-radius}",
"text-align": "inherit",
color: "${button-danger-text-color}",
"min-width": "34px"
}
},
{
stateKey: "hover",
state: "",
stateHost: ":not([disabled]):hover",
styles: {
background: "${e-button-danger-hover-backgroundcolor}",
"border-color": "${e-button-danger-hover-bordercolor}",
"border-width": "${e-button-danger-hover-borderthickness}",
"border-style": "${button-danger-border-style}",
"border-radius": "${e-button-danger-hover-radius}",
color: "${e-button-danger-hover-fontcolor}"
}
},
{
stateKey: "pressed",
state: "",
stateHost: ":not([disabled]):hover:active",
styles: {
background: "${e-button-danger-pressed-backgroundcolor}",
"border-color": "${e-button-danger-pressed-bordercolor}",
"border-width": "${e-button-danger-pressed-borderthickness}",
"border-style": "${button-danger-border-style}",
"border-radius": "${e-button-danger-pressed-radius}",
color: "${e-button-danger-pressed-fontcolor}"
}
},
{
stateKey: "selected",
state: "",
stateHost: "[selected]",
styles: {
background: "${button-danger-backgroundcolor}",
"border-color": "${button-danger-bordercolor}",
"border-width": "${button-danger-borderthickness}",
"border-style": "${button-danger-border-style}",
"border-radius": "${button-danger-radius}",
color: "${button-danger-text-color}"
}
},
{
stateKey: "disabled",
state: "",
stateHost: "[disabled]",
styles: {
background: "${e-button-danger-disabled-backgroundcolor}",
"border-color": "${e-button-danger-disabled-bordercolor}",
"border-width": "${e-button-danger-disabled-borderthickness}",
"border-style": "${button-danger-border-style}",
"border-radius": "${e-button-danger-disabled-radius}",
color: "${e-button-danger-disabled-fontcolor}"
}
},
{
stateHost: ":focus",
stateKey: "focus",
styles: {
outline: "none",
"--ptcs-focus-overlay--padding": "0px",
"--ptcs-focus-overlay--border-radius": "${button-danger-radius}",
"box-shadow": "inset 0 0 0 3px white"
}
}
]
},
{
part: "icon",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
width: "${button-icon-size}",
height: "${button-icon-size}",
"--ptcs-use-icon": "${button-danger-icon-image}",
padding: "0px"
}
},
{
stateKey: "hover",
state: "",
stateHost: ":not([disabled]):hover",
styles: {
"--ptcs-use-icon": "${button-danger-icon-image}"
}
},
{
stateKey: "pressed",
state: "",
stateHost: ":not([disabled]):hover:active",
styles: {
"--ptcs-use-icon": "${button-danger-icon-image}"
}
},
{
stateKey: "selected",
state: "",
stateHost: "[selected]",
styles: {
"--ptcs-use-icon": "${button-danger-icon-image}"
}
},
{
stateKey: "disabled",
state: "",
stateHost: "[disabled]",
styles: {
"--ptcs-use-icon": "${button-danger-icon-image}"
}
}
]
},
{
part: "label",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
"font-family": "${button-danger-fontfamily}",
"font-weight": "${button-danger-fontweight}",
"font-style": "${font-style-cond(button-danger-fontstyle)}",
"text-decoration": "${text-decoration-cond(button-danger-fontstyle)}",
"font-size": "${button-danger-fontsize}",
"line-height": "normal",
"letter-spacing": "normal",
"text-align": "inherit"
}
},
{
stateKey: "hover",
state: "",
stateHost: ":not([disabled]):hover",
styles: {
"font-family": "${e-button-danger-hover-fontfamily}",
"font-weight": "${e-button-danger-hover-fontweight}",
"font-style": "${font-style-cond(button-danger-fontstyle-hover)}",
"text-decoration": "${text-decoration-cond(button-danger-fontstyle-hover)}",
"font-size": "${e-button-danger-hover-fontsize}"
}
},
{
stateKey: "pressed",
state: "",
stateHost: ":not([disabled]):hover:active",
styles: {
"font-family": "${e-button-danger-pressed-fontfamily}",
"font-weight": "${e-button-danger-pressed-fontweight}",
"font-style": "${font-style-cond(button-danger-fontstyle-pressed)}",
"text-decoration": "${text-decoration-cond(button-danger-fontstyle-pressed)}",
"font-size": "${e-button-danger-pressed-fontsize}"
}
},
{
stateKey: "selected",
state: "",
stateHost: "[selected]",
styles: {
"font-family": "${button-danger-fontfamily}",
"font-weight": "${button-danger-fontweight}",
"font-style": "${font-style-cond(button-danger-fontstyle-selected)}",
"text-decoration": "${text-decoration-cond(button-danger-fontstyle-selected)}",
"font-size": "${button-danger-fontsize}"
}
},
{
stateKey: "disabled",
state: "",
stateHost: "[disabled]",
styles: {
"font-family": "${e-button-danger-disabled-fontfamily}",
"font-weight": "${e-button-danger-disabled-fontweight}",
"font-style": "${font-style-cond(button-danger-fontstyle-disabled)}",
"text-decoration": "${text-decoration-cond(button-danger-fontstyle-disabled)}",
"font-size": "${e-button-danger-disabled-fontsize}"
}
}
]
},
{
part: "root",
states: [
{
stateHost: "[mode='icon+label']",
stateKey: "icon-label",
styles: {
padding: "0px 20px"
}
},
{
stateHost: "[mode=label]",
stateKey: "label",
styles: {
padding: "0px 20px"
}
},
{
stateHost: "[mode=icon]",
stateKey: "icon",
styles: {
"max-width": "34px",
"max-height": "34px"
}
}
]
}
]
},
{
variant: "transparent",
parts: [
{
part: "",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
background: "${e-button-transparent-backgroundcolor}",
"border-color": "${e-button-transparent-bordercolor}",
"border-width": "${button-transparent-borderthickness}",
"border-style": "${button-transparent-border-style}",
width: "",
"min-height": "34px",
"border-radius": "${button-transparent-radius}",
"text-align": "inherit",
color: "${e-button-transparent-fontcolor}",
"min-width": "34px"
}
},
{
stateKey: "hover",
state: "",
stateHost: ":not([disabled]):hover",
styles: {
background: "${e-button-transparent-hover-backgroundcolor}",
"border-color": "${e-button-transparent-hover-bordercolor}",
"border-width": "${e-button-transparent-hover-borderthickness}",
"border-style": "${button-transparent-border-style}",
"border-radius": "${e-button-transparent-hover-radius}",
color: "${e-button-transparent-hover-fontcolor}"
}
},
{
stateKey: "pressed",
state: "",
stateHost: ":not([disabled]):hover:active",
styles: {
background: "${e-button-transparent-pressed-backgroundcolor}",
"border-color": "${e-button-transparent-pressed-bordercolor}",
"border-width": "${e-button-transparent-pressed-borderthickness}",
"border-style": "${button-transparent-border-style}",
"border-radius": "${e-button-transparent-pressed-radius}",
color: "${e-button-transparent-pressed-fontcolor}"
}
},
{
stateKey: "selected",
state: "",
stateHost: "[selected]",
styles: {
background: "${button-primary-backgroundcolor}",
"border-color": "${button-primary-bordercolor}",
"border-width": "${button-transparent-borderthickness}",
"border-style": "${button-transparent-border-style}",
"border-radius": "${button-transparent-radius}",
color: "${button-primary-text-color}"
}
},
{
stateKey: "disabled",
state: "",
stateHost: "[disabled]",
styles: {
background: "${e-button-transparent-disabled-backgroundcolor}",
"border-color": "${e-button-transparent-disabled-bordercolor}",
"border-width": "${e-button-transparent-disabled-borderthickness}",
"border-style": "${button-transparent-border-style}",
"border-radius": "${e-button-transparent-disabled-radius}",
color: "${e-button-transparent-disabled-fontcolor}"
}
},
{
stateHost: ":focus",
stateKey: "focus",
styles: {
outline: "none",
"--ptcs-focus-overlay--padding": "0px",
"--ptcs-focus-overlay--border-radius": "${button-transparent-radius}",
"box-shadow": "inset 0 0 0 3px white"
}
}
]
},
{
part: "icon",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
width: "${button-icon-size}",
height: "${button-icon-size}",
"--ptcs-use-icon": "${button-transparent-icon-image}",
padding: "0px"
}
},
{
stateKey: "hover",
state: "",
stateHost: ":not([disabled]):hover",
styles: {
"--ptcs-use-icon": "${button-transparent-icon-image}"
}
},
{
stateKey: "pressed",
state: "",
stateHost: ":not([disabled]):hover:active",
styles: {
"--ptcs-use-icon": "${button-transparent-icon-image}"
}
},
{
stateKey: "selected",
state: "",
stateHost: "[selected]",
styles: {
"--ptcs-use-icon": "${button-transparent-icon-image}"
}
},
{
stateKey: "disabled",
state: "",
stateHost: "[disabled]",
styles: {
"--ptcs-use-icon": "${button-transparent-icon-image}"
}
}
]
},
{
part: "label",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
"font-family": "${button-transparent-fontfamily}",
"font-weight": "${button-transparent-fontweight}",
"font-style": "${font-style-cond(button-transparent-fontstyle)}",
"text-decoration": "${text-decoration-cond(button-transparent-fontstyle)}",
"font-size": "${button-transparent-fontsize}",
"line-height": "normal",
"letter-spacing": "normal",
"text-align": "inherit"
}
},
{
stateKey: "hover",
state: "",
stateHost: ":not([disabled]):hover",
styles: {
"font-family": "${e-button-transparent-hover-fontfamily}",
"font-weight": "${e-button-transparent-hover-fontweight}",
"font-style": "${font-style-cond(button-transparent-fontstyle-hover)}",
"text-decoration": "${text-decoration-cond(button-transparent-fontstyle-hover)}",
"font-size": "${e-button-transparent-hover-fontsize}"
}
},
{
stateKey: "pressed",
state: "",
stateHost: ":not([disabled]):hover:active",
styles: {
"font-family": "${e-button-transparent-pressed-fontfamily}",
"font-weight": "${e-button-transparent-pressed-fontweight}",
"font-style": "${font-style-cond(button-transparent-fontstyle-pressed)}",
"text-decoration": "${text-decoration-cond(button-transparent-fontstyle-pressed)}",
"font-size": "${e-button-transparent-pressed-fontsize}"
}
},
{
stateKey: "selected",
state: "",
stateHost: "[selected]",
styles: {
"font-family": "${button-transparent-fontfamily}",
"font-weight": "${button-transparent-fontweight}",
"font-style": "${font-style-cond(button-transparent-fontstyle-selected)}",
"text-decoration": "${text-decoration-cond(button-transparent-fontstyle-selected)}",
"font-size": "${button-transparent-fontsize}"
}
},
{
stateKey: "disabled",
state: "",
stateHost: "[disabled]",
styles: {
"font-family": "${e-button-transparent-disabled-fontfamily}",
"font-weight": "${e-button-transparent-disabled-fontweight}",
"font-style": "${font-style-cond(button-transparent-fontstyle-disabled)}",
"text-decoration": "${text-decoration-cond(button-transparent-fontstyle-disabled)}",
"font-size": "${e-button-transparent-disabled-fontsize}"
}
}
]
},
{
part: "root",
states: [
{
stateHost: "[mode='icon+label']",
stateKey: "icon-label",
styles: {
padding: "0px 20px"
}
},
{
stateHost: "[mode=label]",
stateKey: "label",
styles: {
padding: "0px 20px"
}
},
{
stateHost: "[mode=icon]",
stateKey: "icon",
styles: {
"max-width": "34px",
"max-height": "34px"
}
}
]
}
]
},
{
variant: "small",
parts: [
{
part: "",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
background: "${button-tertiary-backgroundcolor}",
"border-color": "${button-tertiary-bordercolor}",
"border-width": "${button-tertiary-borderthickness}",
"border-style": "${button-tertiary-border-style}",
"border-radius": "${button-small-radius}",
"text-align": "${button-tertiary-alignment}",
color: "${button-tertiary-text-color}",
"min-height": "18px",
"min-width": "18px",
padding: "0px"
}
},
{
stateKey: "hover",
state: "",
stateHost: ":not([disabled]):hover",
styles: {
background: "${button-tertiary-backgroundcolor-hover}",
"border-color": "${button-tertiary-bordercolor-hover}",
"border-width": "${button-tertiary-borderthickness-hover}",
"border-style": "${button-tertiary-border-style-hover}",
"border-radius": "${button-small-radius}",
color: "${button-tertiary-text-color-hover}"
}
},
{
stateKey: "pressed",
state: "",
stateHost: ":not([disabled]):hover:active",
styles: {
background: "${button-tertiary-backgroundcolor-pressed}",
"border-color": "${button-tertiary-bordercolor-pressed}",
"border-width": "${button-tertiary-borderthickness-pressed}",
"border-style": "${button-tertiary-border-style-pressed}",
"border-radius": "${button-small-radius}",
color: "${button-tertiary-text-color-pressed}"
}
},
{
stateKey: "selected",
state: "",
stateHost: "[selected]",
styles: {
background: "${button-primary-backgroundcolor}",
"border-color": "${button-primary-bordercolor}",
"border-width": "${button-tertiary-borderthickness}",
"border-style": "${button-tertiary-border-style}",
"border-radius": "${button-small-radius}",
color: "${button-primary-text-color}"
}
},
{
stateKey: "disabled",
state: "",
stateHost: "[disabled]",
styles: {
background: "${button-tertiary-backgroundcolor-disabled}",
"border-color": "${button-tertiary-bordercolor-disabled}",
"border-width": "${button-tertiary-borderthickness-disabled}",
"border-style": "${button-tertiary-border-style-disabled}",
"border-radius": "${button-small-radius}",
color: "${button-tertiary-text-color-disabled}"
}
},
{
stateHost: ":focus",
stateKey: "focus",
styles: {
outline: "none",
"--ptcs-focus-overlay--padding": "0px",
"--ptcs-focus-overlay--border-radius": "${button-small-radius}",
"box-shadow": "inset 0 0 0 3px white"
}
}
]
},
{
part: "icon",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
"--ptcs-use-icon": "${button-small-icon-image}",
height: "calc(${button-icon-size} - 2 * ${button-tertiary-borderthickness})",
width: "calc(${button-icon-size} - 2 * ${button-tertiary-borderthickness})",
padding: "0px"
}
},
{
stateKey: "hover",
state: "",
stateHost: ":not([disabled]):hover",
styles: {
"--ptcs-use-icon": "${button-small-icon-image}"
}
},
{
stateKey: "pressed",
state: "",
stateHost: ":not([disabled]):hover:active",
styles: {
"--ptcs-use-icon": "${button-small-icon-image}"
}
},
{
stateKey: "selected",
state: "",
stateHost: "[selected]",
styles: {
"--ptcs-use-icon": "${button-small-icon-image}"
}
},
{
stateKey: "disabled",
state: "",
stateHost: "[disabled]",
styles: {
"--ptcs-use-icon": "${button-small-icon-image}"
}
}
]
},
{
part: "label",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
"font-family": "${button-tertiary-fontfamily}",
"font-weight": "${button-tertiary-fontweight}",
"font-style": "${font-style-cond(button-small-fontstyle)}",
"text-decoration": "${text-decoration-cond(button-small-fontstyle)}",
"font-size": "${button-tertiary-fontsize}",
"line-height": "${button-tertiary-linespacing}",
"letter-spacing": "${button-tertiary-letterspacing}",
"text-align": "${button-tertiary-text-alignment}"
}
},
{
stateKey: "hover",
state: "",
stateHost: ":not([disabled]):hover",
styles: {
"font-family": "${button-tertiary-fontfamily-hover}",
"font-weight": "${button-tertiary-fontweight-hover}",
"font-style": "${font-style-cond(button-small-fontstyle-hover)}",
"text-decoration": "${text-decoration-cond(button-small-fontstyle-hover)}",
"font-size": "${button-tertiary-fontsize-hover}"
}
},
{
stateKey: "pressed",
state: "",
stateHost: ":not([disabled]):hover:active",
styles: {
"font-family": "${button-tertiary-fontfamily-pressed}",
"font-weight": "${button-tertiary-fontweight-pressed}",
"font-style": "${font-style-cond(button-small-fontstyle-pressed)}",
"text-decoration": "${text-decoration-cond(button-small-fontstyle-pressed)}",
"font-size": "${button-tertiary-fontsize-pressed}"
}
},
{
stateKey: "selected",
state: "",
stateHost: "[selected]",
styles: {
"font-family": "${button-tertiary-fontfamily}",
"font-weight": "${button-tertiary-fontweight}",
"font-style": "${font-style-cond(button-small-fontstyle-selected)}",
"text-decoration": "${text-decoration-cond(button-small-fontstyle-selected)}",
"font-size": "${button-tertiary-fontsize}"
}
},
{
stateKey: "disabled",
state: "",
stateHost: "[disabled]",
styles: {
"font-family": "${button-tertiary-fontfamily-disabled}",
"font-weight": "${button-tertiary-fontweight-disabled}",
"font-style": "${font-style-cond(button-small-fontstyle-disabled)}",
"text-decoration": "${text-decoration-cond(button-small-fontstyle-disabled)}",
"font-size": "${button-tertiary-fontsize-disabled}"
}
}
]
}
]
}
],
"ptcs-chart-axis": [
{
variant: "",
parts: [
{
part: "label",
states: [
{
stateKey: "base",
styles: {
"font-family": "${global-text-label-fontfamily}",
"font-size": "${global-text-label-fontsize}",
"font-weight": "${global-text-label-fontweight}",
"font-style": "${global-text-label-fontstyle}",
color: "${global-color-text-label}"
}
}
]
},
{
part: "tick-label:label",
states: [
{
stateKey: "base",
styles: {
color: "${global-color-text-body}",
"font-family": "${global-text-body-fontfamily}",
"font-size": "${global-text-body-fontsize}",
"font-weight": "${global-text-body-fontweight}",
"font-style": "${global-text-body-fontstyle}",
outline: "none"
}
}
]
},
{
part: "",
states: [
{
stateKey: "base",
styles: {
"border-style": "none",
outline: "none"
}
}
]
},
{
part: "tick-label",
states: [
{
stateKey: "base",
styles: {
color: "${e-chart-tick-label-color}",
"font-family": "${global-text-body-fontfamily}",
"font-size": "${global-text-body-fontsize}",
"font-weight": "${global-text-body-fontweight}",
"font-style": "${global-text-body-fontstyle}",
"--ptcs-focus-overlay--padding": "8px",
outline: "none"
}
},
{
stateHost: "[side=bottom]",
stateKey: "bottom-side",
styles: {
padding: "0 4px"
}
},
{
stateHost: "[side=top]",
stateKey: "top-side",
styles: {
padding: "0 4px"
}
},
{
stateHost: "[side=bottom][rotate-ticks]",
stateKey: "bottom-side+rotated-ticks",
styles: {
padding: "4px 0"
}
},
{
stateHost: "[rotate-ticks][side=top]",
stateKey: "rotated-ticks+top-side",
styles: {
padding: "4px 0"
}
}
]
},
{
part: "tick-link:label",
states: [
{
stateKey: "base",
styles: {
outline: "none"
}
}
]
},
{
part: "tick-link",
states: [
{
stateKey: "base",
styles: {
"--ptcs-focus-overlay--padding": "8px",
"margin-right": "1px"
}
},
{
stateHost: "[side=bottom]",
stateKey: "bottom-side",
styles: {
padding: "0 4px"
}
},
{
stateHost: "[side=top]",
stateKey: "top-side",
styles: {
padding: "0 4px"
}
},
{
stateHost: "[side=bottom][rotate-ticks]",
stateKey: "bottom-side+rotated-ticks",
styles: {
padding: "4px 0"
}
},
{
stateHost: "[rotate-ticks][side=top]",
stateKey: "rotated-ticks+top-side",
styles: {
padding: "4px 0"
}
}
]
},
{
part: "label-container",
states: [
{
stateKey: "base",
styles: {
"--ptcs-chart-axis-label--vertical-margin": "16px"
}
}
]
}
]
}
],
"ptcs-chart-bar": [
{
variant: "",
parts: [
{
part: "",
states: [
{
stateKey: "base",
styles: {
"min-width": "273px ",
"min-height": "150px",
"--ptcs-focus-overlay--padding": "0px"
}
}
]
}
]
}
],
"ptcs-chart-coord": [
{
variant: "",
parts: [
{
part: "ruler",
states: [
{
stateKey: "base",
styles: {
background: "${e-chart-ruler-color}"
}
}
]
},
{
part: "zero-ruler",
states: [
{
stateKey: "base",
styles: {
background: "${e-chart-zero-line-color}"
}
},
{
stateHost: ":not([flip-axes])",
stateKey: "regular",
styles: {
height: "${e-chart-zero-line-thickness}"
}
},
{
stateHost: "[flip-axes]",
stateKey: "flipped",
styles: {
width: "${e-chart-zero-line-thickness}"
}
}
]
}
]
}
],
"ptcs-chart-core-bar": [
{
variant: "",
parts: [
{
part: "bar",
states: [
{
stateKey: "serie1",
state: "[legend=L1]",
styles: {
background: "${e-chart-series-1-color}"
}
},
{
stateKey: "serie2",
state: "[legend=L2]",
styles: {
background: "${e-chart-series-2-color}"
}
},
{
stateKey: "serie3",
state: "[legend=L3]",
styles: {
background: "${e-chart-series-3-color}"
}
},
{
stateKey: "serie4",
state: "[legend=L4]",
styles: {
background: "${e-chart-series-4-color}"
}
},
{
stateKey: "serie5",
state: "[legend=L5]",
styles: {
background: "${e-chart-series-5-color}"
}
},
{
stateKey: "serie6",
state: "[legend=L6]",
styles: {
background: "${e-chart-series-6-color}"
}
},
{
stateKey: "serie7",
state: "[legend=L7]",
styles: {
background: "${e-chart-series-7-color}"
}
},
{
stateKey: "serie8",
state: "[legend=L8]",
styles: {
background: "${e-chart-series-8-color}"
}
},
{
stateKey: "serie9",
state: "[legend=L9]",
styles: {
background: "${e-chart-series-9-color}"
}
},
{
stateKey: "serie10",
state: "[legend=L10]",
styles: {
background: "${e-chart-series-10-color}"
}
},
{
stateKey: "serie11",
state: "[legend=L11]",
styles: {
background: "${e-chart-series-11-color}"
}
},
{
stateKey: "serie12",
state: "[legend=L12]",
styles: {
background: "${e-chart-series-12-color}"
}
},
{
stateKey: "serie13",
state: "[legend=L13]",
styles: {
background: "${e-chart-series-13-color}"
}
},
{
stateKey: "serie14",
state: "[legend=L14]",
styles: {
background: "${e-chart-series-14-color}"
}
},
{
stateKey: "serie15",
state: "[legend=L15]",
styles: {
background: "${e-chart-series-15-color}"
}
},
{
stateKey: "serie16",
state: "[legend=L16]",
styles: {
background: "${e-chart-series-16-color}"
}
},
{
stateKey: "serie17",
state: "[legend=L17]",
styles: {
background: "${e-chart-series-17-color}"
}
},
{
stateKey: "serie18",
state: "[legend=L18]",
styles: {
background: "${e-chart-series-18-color}"
}
},
{
stateKey: "serie19",
state: "[legend=L19]",
styles: {
background: "${e-chart-series-19-color}"
}
},
{
stateKey: "serie20",
state: "[legend=L20]",
styles: {
background: "${e-chart-series-20-color}"
}
},
{
stateKey: "serie21",
state: "[legend=L21]",
styles: {
background: "${e-chart-series-21-color}"
}
},
{
stateKey: "serie22",
state: "[legend=L22]",
styles: {
background: "${e-chart-series-22-color}"
}
},
{
stateKey: "serie23",
state: "[legend=L23]",
styles: {
background: "${e-chart-series-23-color}"
}
},
{
stateKey: "serie24",
state: "[legend=L24]",
styles: {
background: "${e-chart-series-24-color}"
}
},
{
state: ":hover",
stateKey: "hover",
styles: {
filter: "brightness(0.8)"
}
}
]
},
{
part: "value",
states: [
{
stateKey: "base",
styles: {
"box-sizing": "border-box",
padding: "4px",
background: "${e-chart-value-background}",
color: "${e-chart-value-color}"
}
}
]
},
{
part: "",
states: [
{
stateKey: "base",
styles: {
"--ptcs-focus-overlay--padding": "2px",
"--ptcs-focus-outline": "solid ${global-color-core-primary} 2px",
"--ptcs-focus-overlay--border-color": "${global-color-bg-primary}",
"--ptcs-selected-bar-overlay--padding": "2px",
"line-height": "11px"
}
},
{
stateHost: ":focus",
stateKey: "focus",
styles: {
outline: "none"
}
}
]
},
{
part: "drag-rect",
states: [
{
stateKey: "base",
styles: {
opacity: "0.5",
background: "#FFCCCC"
}
}
]
},
{
part: "selected",
states: [
{
stateKey: "base",
styles: {
background: "${global-color-bg-primary}",
"--ptcs-selected-bar-overlay--padding": "2px",
"z-index": "12"
}
}
]
}
]
}
],
"ptcs-chart-core-line": [
{
variant: "",
parts: [
{
part: "line",
states: [
{
stateKey: "base",
styles: {
"stroke-width": "2.5",
transition: "opacity 500ms"
}
},
{
stateHost: "[stacked]",
stateKey: "stacked",
styles: {
display: "none"
}
},
{
state: "[legend=L1]",
stateKey: "serie1",
styles: {
stroke: "${e-chart-series-1-color}"
}
},
{
state: "[legend=L2]",
stateKey: "serie2",
styles: {
stroke: "${e-chart-series-2-color}"
}
},
{
state: "[legend=L3]",
stateKey: "serie3",
styles: {
stroke: "${e-chart-series-3-color}"
}
},
{
state: "[legend=L4]",
stateKey: "serie4",
styles: {
stroke: "${e-chart-series-4-color}"
}
},
{
state: "[legend=L5]",
stateKey: "serie5",
styles: {
stroke: "${e-chart-series-5-color}"
}
},
{
state: "[legend=L6]",
stateKey: "serie6",
styles: {
stroke: "${e-chart-series-6-color}"
}
},
{
state: "[legend=L7]",
stateKey: "serie7",
styles: {
stroke: "${e-chart-series-7-color}"
}
},
{
state: "[legend=L8]",
stateKey: "serie8",
styles: {
stroke: "${e-chart-series-8-color}"
}
},
{
state: "[legend=L9]",
stateKey: "serie9",
styles: {
stroke: "${e-chart-series-9-color}"
}
},
{
state: "[legend=L10]",
stateKey: "serie10",
styles: {
stroke: "${e-chart-series-10-color}"
}
},
{
state: "[legend=L11]",
stateKey: "serie11",
styles: {
stroke: "${e-chart-series-11-color}"
}
},
{
state: "[legend=L12]",
stateKey: "serie12",
styles: {
stroke: "${e-chart-series-12-color}"
}
},
{
state: "[legend=L13]",
stateKey: "serie13",
styles: {
stroke: "${e-chart-series-13-color}"
}
},
{
state: "[legend=L14]",
stateKey: "serie14",
styles: {
stroke: "${e-chart-series-14-color}"
}
},
{
state: "[legend=L15]",
stateKey: "serie15",
styles: {
stroke: "${e-chart-series-15-color}"
}
},
{
state: "[legend=L16]",
stateKey: "serie16",
styles: {
stroke: "${e-chart-series-16-color}"
}
},
{
state: "[legend=L17]",
stateKey: "serie17",
styles: {
stroke: "${e-chart-series-17-color}"
}
},
{
state: "[legend=L18]",
stateKey: "serie18",
styles: {
stroke: "${e-chart-series-18-color}"
}
},
{
state: "[legend=L19]",
stateKey: "serie19",
styles: {
stroke: "${e-chart-series-19-color}"
}
},
{
state: "[legend=L20]",
stateKey: "serie20",
styles: {
stroke: "${e-chart-series-20-color}"
}
},
{
state: "[legend=L21]",
stateKey: "serie21",
styles: {
stroke: "${e-chart-series-21-color}"
}
},
{
state: "[legend=L22]",
stateKey: "serie22",
styles: {
stroke: "${e-chart-series-22-color}"
}
},
{
state: "[legend=L23]",
stateKey: "serie23",
styles: {
stroke: "${e-chart-series-23-color}"
}
},
{
state: "[legend=L24]",
stateKey: "serie24",
styles: {
stroke: "${e-chart-series-24-color}"
}
}
]
},
{
part: "area",
states: [
{
stateKey: "base",
styles: {
transition: "opacity 500ms",
"--ptcs-chart-area--opacity": "0.5"
}
},
{
stateHost: ":not([stacked])",
stateKey: "overlapped",
styles: {
opacity: "0.5"
}
},
{
state: "[legend=L1]",
stateKey: "serie1",
styles: {
fill: "${e-chart-series-1-color}"
}
},
{
state: "[legend=L2]",
stateKey: "serie2",
styles: {
fill: "${e-chart-series-2-color}"
}
},
{
state: "[legend=L3]",
stateKey: "serie3",
styles: {
fill: "${e-chart-series-3-color}"
}
},
{
state: "[legend=L4]",
stateKey: "serie4",
styles: {
fill: "${e-chart-series-4-color}"
}
},
{
state: "[legend=L5]",
stateKey: "serie5",
styles: {
fill: "${e-chart-series-5-color}"
}
},
{
state: "[legend=L6]",
stateKey: "serie6",
styles: {
fill: "${e-chart-series-6-color}"
}
},
{
state: "[legend=L7]",
stateKey: "serie7",
styles: {
fill: "${e-chart-series-7-color}"
}
},
{
state: "[legend=L8]",
stateKey: "serie8",
styles: {
fill: "${e-chart-series-8-color}"
}
},
{
state: "[legend=L9]",
stateKey: "serie9",
styles: {
fill: "${e-chart-series-9-color}"
}
},
{
state: "[legend=L10]",
stateKey: "serie10",
styles: {
fill: "${e-chart-series-10-color}"
}
},
{
state: "[legend=L11]",
stateKey: "serie11",
styles: {
fill: "${e-chart-series-11-color}"
}
},
{
state: "[legend=L12]",
stateKey: "serie12",
styles: {
fill: "${e-chart-series-12-color}"
}
},
{
state: "[legend=L13]",
stateKey: "serie13",
styles: {
fill: "${e-chart-series-13-color}"
}
},
{
state: "[legend=L14]",
stateKey: "serie14",
styles: {
fill: "${e-chart-series-14-color}"
}
},
{
state: "[legend=L15]",
stateKey: "serie15",
styles: {
fill: "${e-chart-series-15-color}"
}
},
{
state: "[legend=L16]",
stateKey: "serie16",
styles: {
fill: "${e-chart-series-16-color}"
}
},
{
state: "[legend=L17]",
stateKey: "serie17",
styles: {
fill: "${e-chart-series-17-color}"
}
},
{
state: "[legend=L18]",
stateKey: "serie18",
styles: {
fill: "${e-chart-series-18-color}"
}
},
{
state: "[legend=L19]",
stateKey: "serie19",
styles: {
fill: "${e-chart-series-19-color}"
}
},
{
state: "[legend=L20]",
stateKey: "serie20",
styles: {
fill: "${e-chart-series-20-color}"
}
},
{
state: "[legend=L21]",
stateKey: "serie21",
styles: {
fill: "${e-chart-series-21-color}"
}
},
{
state: "[legend=L22]",
stateKey: "serie22",
styles: {
fill: "${e-chart-series-22-color}"
}
},
{
state: "[legend=L23]",
stateKey: "serie23",
styles: {
fill: "${e-chart-series-23-color}"
}
},
{
state: "[legend=L24]",
stateKey: "serie24",
styles: {
fill: "${e-chart-series-24-color}"
}
}
]
},
{
part: "marker",
states: [
{
stateKey: "base",
styles: {
stroke: "#ffffff",
"stroke-width": "1"
}
},
{
statePath: ".marker-legend[legend=L1]",
stateKey: "serie1",
styles: {
fill: "${e-chart-series-1-color}"
}
},
{
statePath: ".marker-legend[legend=L2]",
stateKey: "serie2",
styles: {
fill: "${e-chart-series-2-color}"
}
},
{
statePath: ".marker-legend[legend=L3]",
stateKey: "serie3",
styles: {
fill: "${e-chart-series-3-color}"
}
},
{
statePath: ".marker-legend[legend=L4]",
stateKey: "serie4",
styles: {
fill: "${e-chart-series-4-color}"
}
},
{
statePath: ".marker-legend[legend=L5]",
stateKey: "serie5",
styles: {
fill: "${e-chart-series-5-color}"
}
},
{
statePath: ".marker-legend[legend=L6]",
stateKey: "serie6",
styles: {
fill: "${e-chart-series-6-color}"
}
},
{
statePath: ".marker-legend[legend=L7]",
stateKey: "serie7",
styles: {
fill: "${e-chart-series-7-color}"
}
},
{
statePath: ".marker-legend[legend=L8]",
stateKey: "serie8",
styles: {
fill: "${e-chart-series-8-color}"
}
},
{
statePath: ".marker-legend[legend=L9]",
stateKey: "serie9",
styles: {
fill: "${e-chart-series-9-color}"
}
},
{
statePath: ".marker-legend[legend=L10]",
stateKey: "serie10",
styles: {
fill: "${e-chart-series-10-color}"
}
},
{
statePath: ".marker-legend[legend=L11]",
stateKey: "serie11",
styles: {
fill: "${e-chart-series-11-color}"
}
},
{
statePath: ".marker-legend[legend=L12]",
stateKey: "serie12",
styles: {
fill: "${e-chart-series-12-color}"
}
},
{
statePath: ".marker-legend[legend=L13]",
stateKey: "serie13",
styles: {
fill: "${e-chart-series-13-color}"
}
},
{
statePath: ".marker-legend[legend=L14]",
stateKey: "serie14",
styles: {
fill: "${e-chart-series-14-color}"
}
},
{
statePath: ".marker-legend[legend=L15]",
stateKey: "serie15",
styles: {
fill: "${e-chart-series-15-color}"
}
},
{
statePath: ".marker-legend[legend=L16]",
stateKey: "serie16",
styles: {
fill: "${e-chart-series-16-color}"
}
},
{
statePath: ".marker-legend[legend=L17]",
stateKey: "serie17",
styles: {
fill: "${e-chart-series-17-color}"
}
},
{
statePath: ".marker-legend[legend=L18]",
stateKey: "serie18",
styles: {
fill: "${e-chart-series-18-color}"
}
},
{
statePath: ".marker-legend[legend=L19]",
stateKey: "serie19",
styles: {
fill: "${e-chart-series-19-color}"
}
},
{
statePath: ".marker-legend[legend=L20]",
stateKey: "serie20",
styles: {
fill: "${e-chart-series-20-color}"
}
},
{
statePath: ".marker-legend[legend=L21]",
stateKey: "serie21",
styles: {
fill: "${e-chart-series-21-color}"
}
},
{
statePath: ".marker-legend[legend=L22]",
stateKey: "serie22",
styles: {
fill: "${e-chart-series-22-color}"
}
},
{
statePath: ".marker-legend[legend=L23]",
stateKey: "serie23",
styles: {
fill: "${e-chart-series-23-color}"
}
},
{
statePath: ".marker-legend[legend=L24]",
stateKey: "serie24",
styles: {
fill: "${e-chart-series-24-color}"
}
}
]
},
{
part: "value",
states: [
{
stateKey: "base",
styles: {
background: "${e-chart-value-background}",
color: "${e-chart-value-color}",
"font-family": "${global-text-caption-fontfamily}",
"font-size": "${global-text-caption-fontsize}",
"font-weight": "${global-text-caption-fontweight}",
"font-style": "${global-text-caption-fontstyle}"
}
}
]
},
{
part: "focus",
states: [
{
stateKey: "base",
styles: {
stroke: "${global-color-core-primary}",
"stroke-width": "2px",
fill: "none"
}
}
]
},
{
part: "selected",
states: [
{
stateKey: "base",
styles: {
fill: "${global-color-bg-primary}",
stroke: "none"
}
}
]
},
{
part: "drag-rect",
states: [
{
stateKey: "base",
styles: {
fill: "${global-color-bg-selected}",
"fill-opacity": ".5"
}
}
]
},
{
part: "hover-line",
states: [
{
stateKey: "base",
styles: {
stroke: "${global-color-core-primary}",
"stroke-width": "2",
"stroke-dasharray": "5 5"
}
}
]
},
{
part: "hover-marker",
states: [
{
stateHost: "[marker]:not([marker=none])",
statePath: ".marker-legend[legend]",
stateKey: "mask",
styles: {
fill: "#232b2d",
"fill-opacity": "0.5"
}
}
]
},
{
part: "",
states: [
{
stateHost: ":focus",
stateKey: "focus",
styles: {
outline: "none"
}
}
]
}
]
}
],
"ptcs-chart-core-schedule": [
{
variant: "",
parts: [
{
part: "task",
states: [
{
state: "[legend=L1]",
stateKey: "serie1",
styles: {
background: "${e-chart-series-1-color}"
}
},
{
state: "[legend=L2]",
stateKey: "serie2",
styles: {
background: "${e-chart-series-2-color}"
}
},
{
state: "[legend=L3]",
stateKey: "serie3",
styles: {
background: "${e-chart-series-3-color}"
}
},
{
state: "[legend=L4]",
stateKey: "serie4",
styles: {
background: "${e-chart-series-4-color}"
}
},
{
state: "[legend=L5]",
stateKey: "serie5",
styles: {
background: "${e-chart-series-5-color}"
}
},
{
state: "[legend=L6]",
stateKey: "serie6",
styles: {
background: "${e-chart-series-6-color}"
}
},
{
state: "[legend=L7]",
stateKey: "serie7",
styles: {
background: "${e-chart-series-7-color}"
}
},
{
state: "[legend=L8]",
stateKey: "serie8",
styles: {
background: "${e-chart-series-8-color}"
}
},
{
state: "[legend=L9]",
stateKey: "serie9",
styles: {
background: "${e-chart-series-9-color}"
}
},
{
stateKey: "serie10",
state: "[legend=L10]",
styles: {
background: "${e-chart-series-10-color}"
}
},
{
stateKey: "serie11",
state: "[legend=L11]",
styles: {
background: "${e-chart-series-11-color}"
}
},
{
stateKey: "serie12",
state: "[legend=L12]",
styles: {
background: "${e-chart-series-12-color}"
}
},
{
stateKey: "serie13",
state: "[legend=L13]",
styles: {
background: "${e-chart-series-13-color}"
}
},
{
stateKey: "serie14",
state: "[legend=L14]",
styles: {
background: "${e-chart-series-14-color}"
}
},
{
stateKey: "serie15",
state: "[legend=L15]",
styles: {
background: "${e-chart-series-15-color}"
}
},
{
stateKey: "serie16",
state: "[legend=L16]",
styles: {
background: "${e-chart-series-16-color}"
}
},
{
stateKey: "serie17",
state: "[legend=L17]",
styles: {
background: "${e-chart-series-17-color}"
}
},
{
stateKey: "serie18",
state: "[legend=L18]",
styles: {
background: "${e-chart-series-18-color}"
}
},
{
stateKey: "serie19",
state: "[legend=L19]",
styles: {
background: "${e-chart-series-19-color}"
}
},
{
stateKey: "serie20",
state: "[legend=L20]",
styles: {
background: "${e-chart-series-20-color}"
}
},
{
stateKey: "serie21",
state: "[legend=L21]",
styles: {
background: "${e-chart-series-21-color}"
}
},
{
stateKey: "serie22",
state: "[legend=L22]",
styles: {
background: "${e-chart-series-22-color}"
}
},
{
stateKey: "serie23",
state: "[legend=L23]",
styles: {
background: "${e-chart-series-23-color}"
}
},
{
stateKey: "serie24",
state: "[legend=L24]",
styles: {
background: "${e-chart-series-24-color}"
}
},
{
state: ":hover",
stateKey: "hover",
styles: {
"z-index": "10",
filter: "brightness(0.8)"
}
},
{
stateKey: "base",
styles: {
transition: "opacity 1000ms",
background: "${global-color-core-secondary1}"
}
},
{
state: "[selected]",
stateKey: "selected",
styles: {
"z-index": "9",
background: "${global-color-bg-primary}",
"border-color": "${global-color-line-border}",
"border-width": "2px",
"border-style": "solid"
}
},
{
stateHost: ":focus",
state: "[focus]",
stateKey: "focus",
styles: {
"z-index": "12"
}
},
{
state: "[selected][legend=L1]",
stateKey: "selected+serie1",
styles: {
"border-color": "${e-chart-series-1-color}"
}
},
{
state: "[selected][legend=L10]",
stateKey: "selected+serie10",
styles: {
"border-color": "${e-chart-series-10-color}"
}
},
{
state: "[selected][legend=L11]",
stateKey: "selected+serie11",
styles: {
"border-color": "${e-chart-series-11-color}"
}
},
{
state: "[selected][legend=L12]",
stateKey: "selected+serie12",
styles: {
"border-color": "${e-chart-series-12-color}"
}
},
{
state: "[selected][legend=L13]",
stateKey: "selected+serie13",
styles: {
"border-color": "${e-chart-series-13-color}"
}
},
{
state: "[selected][legend=L14]",
stateKey: "selected+serie14",
styles: {
"border-color": "${e-chart-series-14-color}"
}
},
{
state: "[selected][legend=L15]",
stateKey: "selected+serie15",
styles: {
"border-color": "${e-chart-series-15-color}"
}
},
{
state: "[selected][legend=L16]",
stateKey: "selected+serie16",
styles: {
"border-color": "${e-chart-series-16-color}"
}
},
{
state: "[selected][legend=L17]",
stateKey: "selected+serie17",
styles: {
"border-color": "${e-chart-series-17-color}"
}
},
{
state: "[selected][legend=L18]",
stateKey: "selected+serie18",
styles: {
"border-color": "${e-chart-series-18-color}"
}
},
{
state: "[selected][legend=L19]",
stateKey: "selected+serie19",
styles: {
"border-color": "${e-chart-series-19-color}"
}
},
{
state: "[selected][legend=L2]",
stateKey: "selected+serie2",
styles: {
"border-color": "${e-chart-series-2-color}"
}
},
{
state: "[selected][legend=L20]",
stateKey: "selected+serie20",
styles: {
"border-color": "${e-chart-series-20-color}"
}
},
{
state: "[selected][legend=L21]",
stateKey: "selected+serie21",
styles: {
"border-color": "${e-chart-series-21-color}"
}
},
{
state: "[selected][legend=L22]",
stateKey: "selected+serie22",
styles: {
"border-color": "${e-chart-series-22-color}"
}
},
{
state: "[selected][legend=L23]",
stateKey: "selected+serie23",
styles: {
"border-color": "${e-chart-series-23-color}"
}
},
{
state: "[selected][legend=L24]",
stateKey: "selected+serie24",
styles: {
"border-color": "${e-chart-series-24-color}"
}
},
{
state: "[selected][legend=L3]",
stateKey: "selected+serie3",
styles: {
"border-color": "${e-chart-series-3-color}"
}
},
{
state: "[selected][legend=L4]",
stateKey: "selected+serie4",
styles: {
"border-color": "${e-chart-series-4-color}"
}
},
{
state: "[selected][legend=L5]",
stateKey: "selected+serie5",
styles: {
"border-color": "${e-chart-series-5-color}"
}
},
{
state: "[selected][legend=L6]",
stateKey: "selected+serie6",
styles: {
"border-color": "${e-chart-series-6-color}"
}
},
{
state: "[selected][legend=L7]",
stateKey: "selected+serie7",
styles: {
"border-color": "${e-chart-series-7-color}"
}
},
{
state: "[selected][legend=L8]",
stateKey: "selected+serie8",
styles: {
"border-color": "${e-chart-series-8-color}"
}
},
{
state: "[selected][legend=L9]",
stateKey: "selected+serie9",
styles: {
"border-color": "${e-chart-series-9-color}"
}
},
{
state: ":hover[selected]",
stateKey: "hover+selected",
styles: {
filter: "contrast(200%)",
opacity: "0.7",
background: "dd"
}
}
]
},
{
part: "group",
states: [
{
stateKey: "base",
styles: {
background: "${global-color-bg-secondary}"
}
}
]
},
{
part: "drag-rect",
states: [
{
stateKey: "base",
styles: {
background: "${global-color-bg-selected}",
opacity: ".5",
"z-index": "11"
}
}
]
},
{
part: "",
states: [
{
stateHost: ":focus",
stateKey: "focus",
styles: {
outline: "none",
"--ptcs-focus-overlay--padding": "3"
}
},
{
stateKey: "base",
styles: {
"box-sizing": "border-box"
}
}
]
}
]
}
],
"ptcs-chart-layout": [
{
variant: "",
parts: [
{
part: "title",
states: [
{
stateKey: "base",
styles: {
color: "${global-color-text-label}",
"font-family": "${global-text-label-fontfamily}",
"font-size": "${global-text-label-fontsize}",
"font-weight": "${global-text-label-fontweight}",
"font-style": "${global-text-label-fontstyle}"
}
},
{
stateHost: "[eff-title-pos=top]",
stateKey: "top-title",
styles: {
"margin-bottom": "${e-chart-grid-gap-title}"
}
},
{
stateHost: "[eff-title-pos=bottom]",
stateKey: "bottom-title",
styles: {
"margin-top": "${e-chart-grid-gap-title}"
}
}
]
},
{
part: "notes",
states: [
{
stateKey: "base",
styles: {
color: "${global-color-text-body}",
"font-family": "${global-text-body-fontfamily}",
"font-size": "${global-text-body-fontsize}",
"font-weight": "${global-text-body-fontweight}",
"font-style": "${global-text-body-fontstyle}"
}
},
{
stateHost: "[eff-notes-pos=top]",
stateKey: "top-notes",
styles: {
"margin-bottom": "${e-chart-grid-gap}"
}
},
{
stateHost: "[eff-notes-pos=bottom]",
stateKey: "bottom-notes",
styles: {
"margin-top": "${e-chart-grid-gap}"
}
},
{
stateHost: "[eff-notes-pos=left]",
stateKey: "left-notes",
styles: {
"margin-right": "${e-chart-grid-gap}"
}
},
{
stateHost: "[eff-notes-pos=right]",
stateKey: "right-notes",
styles: {
"margin-left": "${e-chart-grid-gap}"
}
}
]
},
{
part: "legend",
states: [
{
stateHost: "[eff-notes-pos=right]",
stateKey: "right-notes",
styles: {
"margin-left": "${e-chart-grid-gap}"
}
},
{
stateHost: "[eff-legend-pos=right]",
stateKey: "right-legend",
styles: {
"margin-left": "${e-chart-grid-gap}"
}
},
{
stateHost: "[eff-legend-pos=top]",
stateKey: "top-legend",
styles: {
"margin-bottom": "${e-chart-grid-gap}"
}
},
{
stateHost: "[eff-legend-pos=bottom]",
stateKey: "bottom-legend",
styles: {
"margin-top": "${e-chart-grid-gap}"
}
},
{
stateHost: "[eff-legend-pos=left]",
stateKey: "left-legend",
styles: {
"margin-right": "${e-chart-grid-gap}"
}
}
]
},
{
part: "",
states: [
{
stateKey: "base",
styles: {
padding: "32px"
}
}
]
},
{
part: "yzoom",
states: [
{
stateHost: ":not([flip-axes])",
stateKey: "vertical",
styles: {
"margin-right": "${e-chart-grid-gap}"
}
}
]
},
{
part: "xzoom",
states: [
{
stateHost: "[flip-axes]",
stateKey: "vertical",
styles: {
"margin-right": "${e-chart-grid-gap}"
}
}
]
}
]
}
],
"ptcs-chart-legend": [
{
variant: "",
parts: [
{
part: "marker",
states: [
{
statePath: "[part=item][legend=L1]",
stateKey: "serie1",
styles: {
background: "${e-chart-series-1-color}"
}
},
{
statePath: "[part=item][legend=L2]",
stateKey: "serie2",
styles: {
background: "${e-chart-series-2-color}"
}
},
{
statePath: "[part=item][legend=L3]",
stateKey: "serie3",
styles: {
background: "${e-chart-series-3-color}"
}
},
{
statePath: "[part=item][legend=L4]",
stateKey: "serie4",
styles: {
background: "${e-chart-series-4-color}"
}
},
{
statePath: "[part=item][legend=L5]",
stateKey: "serie5",
styles: {
background: "${e-chart-series-5-color}"
}
},
{
statePath: "[part=item][legend=L6]",
stateKey: "serie6",
styles: {
background: "${e-chart-series-6-color}"
}
},
{
statePath: "[part=item][legend=L7]",
stateKey: "serie7",
styles: {
background: "${e-chart-series-7-color}"
}
},
{
statePath: "[part=item][legend=L8]",
stateKey: "serie8",
styles: {
background: "${e-chart-series-8-color}"
}
},
{
statePath: "[part=item][legend=L9]",
stateKey: "serie9",
styles: {
background: "${e-chart-series-9-color}"
}
},
{
stateKey: "serie10",
statePath: "[part=item][legend=L10]",
styles: {
background: "${e-chart-series-10-color}"
}
},
{
stateKey: "serie11",
statePath: "[part=item][legend=L11]",
styles: {
background: "${e-chart-series-11-color}"
}
},
{
stateKey: "serie12",
statePath: "[part=item][legend=L12]",
styles: {
background: "${e-chart-series-12-color}"
}
},
{
stateKey: "serie13",
statePath: "[part=item][legend=L13]",
styles: {
background: "${e-chart-series-13-color}"
}
},
{
stateKey: "serie14",
statePath: "[part=item][legend=L14]",
styles: {
background: "${e-chart-series-14-color}"
}
},
{
stateKey: "serie15",
statePath: "[part=item][legend=L15]",
styles: {
background: "${e-chart-series-15-color}"
}
},
{
stateKey: "serie16",
statePath: "[part=item][legend=L16]",
styles: {
background: "${e-chart-series-16-color}"
}
},
{
stateKey: "serie17",
statePath: "[part=item][legend=L17]",
styles: {
background: "${e-chart-series-17-color}"
}
},
{
stateKey: "serie18",
statePath: "[part=item][legend=L18]",
styles: {
background: "${e-chart-series-18-color}"
}
},
{
stateKey: "serie19",
statePath: "[part=item][legend=L19]",
styles: {
background: "${e-chart-series-19-color}"
}
},
{
stateKey: "serie20",
statePath: "[part=item][legend=L20]",
styles: {
background: "${e-chart-series-20-color}"
}
},
{
stateKey: "serie21",
statePath: "[part=item][legend=L21]",
styles: {
background: "${e-chart-series-21-color}"
}
},
{
stateKey: "serie22",
statePath: "[part=item][legend=L22]",
styles: {
background: "${e-chart-series-22-color}"
}
},
{
stateKey: "serie23",
statePath: "[part=item][legend=L23]",
styles: {
background: "${e-chart-series-23-color}"
}
},
{
stateKey: "serie24",
statePath: "[part=item][legend=L24]",
styles: {
background: "${e-chart-series-24-color}"
}
},
{
stateKey: "base",
styles: {
width: "16px",
height: "16px",
background: "#f0f0f0",
"margin-right": "16px"
}
}
]
},
{
part: "legend",
states: [
{
stateKey: "base",
styles: {
color: "${global-color-text-label}",
"font-family": "${global-text-label-fontfamily}",
"font-size": "${global-text-label-fontsize}",
"font-weight": "${global-text-label-fontweight}",
"font-style": "${global-text-label-fontstyle}"
}
}
]
},
{
part: "grid",
states: [
{
stateKey: "base",
styles: {
"grid-column-gap": "${e-chart-legend-column-gap}",
"grid-row-gap": "${e-chart-legend-row-gap}"
}
}
]
},
{
part: "",
states: [
{
stateKey: "base",
styles: {
outline: "none"
}
}
]
},
{
part: "item",
states: [
{
stateKey: "base",
styles: {
"--ptcs-focus-overlay--padding": "3px",
outline: "none"
}
}
]
},
{
part: "checkbox",
states: [
{
stateKey: "base",
styles: {
"margin-right": "7px"
}
}
]
}
]
}
],
"ptcs-chart-line": [
{
variant: "",
parts: [
{
part: "",
states: [
{
stateKey: "base",
styles: {
"--ptcs-focus-overlay--padding": "0px"
}
}
]
}
]
}
],
"ptcs-chart-schedule": [
{
variant: "",
parts: [
{
part: "",
states: [
{
stateKey: "base",
styles: {
"--ptcs-focus-overlay--padding": "0px",
outline: "none"
}
}
]
},
{
part: "legend:legend",
states: [
{
stateKey: "base",
styles: {
outline: "none"
}
}
]
}
]
}
],
"ptcs-chart-zoom-interval": [
{
variant: "",
parts: [
{
part: "",
states: [
{
stateKey: "base",
styles: {
"box-sizing": "box-model",
outline: "none"
}
}
]
},
{
part: "pick-start",
states: [
{
stateKey: "base",
styles: {
"margin-right": "16px"
}
}
]
},
{
part: "interval",
states: [
{
stateKey: "base",
styles: {
flex: "0 0 auto",
width: "160px",
"margin-top": "${e-chart-grid-gap-title}"
}
}
]
},
{
part: "pick",
states: [
{
stateKey: "base",
styles: {
flex: "0 0 auto"
}
}
]
},
{
part: "reset",
states: [
{
stateKey: "base",
styles: {
"margin-left": "32px"
}
}
]
},
{
part: "pick-end",
states: [
{
stateKey: "base",
styles: {
"margin-right": "16px"
}
}
]
}
]
}
],
"ptcs-chart-zoom-range": [
{
variant: "",
parts: [
{
part: "",
states: [
{
stateKey: "base",
styles: {
"box-sizing": "box-model"
}
}
]
},
{
part: "reset",
states: [
{
stateKey: "base",
styles: {
"margin-bottom": "1.5px",
"margin-left": "${e-chart-grid-gap}",
"margin-top": "${e-chart-grid-gap-title}"
}
}
]
},
{
part: "pick",
states: [
{
stateKey: "base",
styles: {
flex: "0 0 auto",
"margin-top": "${e-chart-grid-gap-title}"
}
}
]
},
{
part: "pick-start",
states: [
{
stateKey: "base",
styles: {
"margin-right": "${e-chart-grid-gap-title}"
}
}
]
}
]
}
],
"ptcs-chart-zoom-slider": [
{
variant: "",
parts: [
{
part: "tick-line",
states: [
{
stateKey: "base",
styles: {
background: "${global-color-core-secondary1}"
}
}
]
},
{
part: "slider:track",
states: [
{
stateKey: "base",
styles: {
background: "rgba(200,200,200,0.5)"
}
}
]
},
{
part: "slider:slider-container",
states: [
{
stateKey: "base",
styles: {
background: "rgba(0,0,0,0)"
}
}
]
},
{
part: "slider:track-between",
states: [
{
stateKey: "base",
styles: {
background: "rgba(0,148,200,0.5) !important"
}
}
]
},
{
part: "",
states: [
{
stateKey: "base",
styles: {
"box-sizing": "box-model",
outline: "outline"
}
}
]
},
{
part: "reset",
states: [
{
stateKey: "base",
styles: {
"margin-left": "32px"
}
}
]
},
{
part: "zoom-slider",
states: [
{
stateKey: "base",
styles: {
outline: "none"
}
}
]
},
{
part: "slider",
states: [
{
stateKey: "base",
styles: {
outline: "none"
}
}
]
}
]
}
],
"ptcs-chart-zoom": [
{
variant: "",
parts: [
{
part: "",
states: [
{
stateHost: "[side=bottom]",
stateKey: "bottom",
styles: {
"margin-top": "${e-chart-grid-gap-title}"
}
},
{
stateKey: "base",
styles: {
outline: "none"
}
}
]
},
{
part: "slider",
states: [
{
stateHost: "[side=bottom]",
stateKey: "bottom",
styles: {
"margin-top": "${e-chart-grid-gap-title}"
}
},
{
stateKey: "base",
styles: {
outline: "none"
}
}
]
},
{
part: "interval-picker",
states: [
{
stateKey: "base",
styles: {
outline: "none"
}
}
]
},
{
part: "range-picker",
states: [
{
stateKey: "base",
styles: {
outline: "none"
}
}
]
}
]
}
],
"ptcs-checkbox": [
{
variant: "",
parts: [
{
part: "box",
states: [
{
stateKey: "unselected",
state: "",
stateHost: ":not([checked])",
styles: {
background: "${e-checkbox-backgroundcolor}",
"border-color": "${checkbox-bordercolor}",
"border-width": "${checkbox-borderthickness}",
"border-radius": "${checkbox-border-radius}",
"border-style": "${checkbox-border-style}",
padding: "0px"
}
},
{
stateKey: "hover",
state: "",
stateHost: ":not([disabled]):hover",
styles: {
background: "${global-color-core-primary-hover}",
"border-color": "${global-color-core-primary-hover}",
"border-width": "${checkbox-borderthickness}",
"border-radius": "${checkbox-border-radius}",
"border-style": "${checkbox-border-style}"
}
},
{
stateKey: "hover+selected",
state: "",
stateHost: ":not([disabled])[checked]:hover",
styles: {
background: "${global-color-core-primary-hover}",
"border-color": "${global-color-core-primary-hover}",
"border-width": "${checkbox-borderthickness-selected}",
"border-radius": "${checkbox-border-radius-selected}",
"border-style": "${checkbox-border-style-selected}"
}
},
{
stateKey: "pressed",
state: "",
stateHost: ":not([disabled]):hover:active",
styles: {
background: "${global-color-core-primary-pressed}",
"border-color": "${global-color-core-primary-pressed}",
"border-width": "${checkbox-borderthickness}",
"border-radius": "${checkbox-border-radius}",
"border-style": "${checkbox-border-style}",
fill: "${checkbox-mark-color-pressed}"
}
},
{
stateKey: "pressed+selected",
state: "",
stateHost: ":not([disabled])[checked]:hover:active",
styles: {
background: "${global-color-core-primary-pressed}",
"border-color": "${global-color-core-primary-pressed}",
"border-width": "${checkbox-borderthickness-selected}",
"border-radius": "${checkbox-border-radius-selected}",
"border-style": "${checkbox-border-style-selected}"
}
},
{
stateKey: "selected",
state: "",
stateHost: "[checked]",
styles: {
background: "${e-checkbox-backgroundcolor-selected}",
"border-color": "${e-checkbox-backgroundcolor-selected}",
"border-width": "${checkbox-borderthickness-selected}",
"border-radius": "${checkbox-border-radius-selected}",
"border-style": "${checkbox-border-style-selected}",
fill: "${checkbox-mark-color}"
}
},
{
stateKey: "disabled+unselected",
state: "",
stateHost: "[disabled]:not([checked])",
styles: {
background: "${global-color-bg-disabled}",
"border-color": "${checkbox-bordercolor}",
"border-width": "${checkbox-borderthickness}",
"border-radius": "${checkbox-border-radius}",
"border-style": "${checkbox-border-style}"
}
},
{
stateKey: "disabled+selected",
state: "",
stateHost: "[disabled][checked]",
styles: {
color: "${global-color-text-body-disabled}",
background: "${global-color-bg-disabled}",
"border-color": "${checkbox-bordercolor-selected}",
"border-width": "${checkbox-borderthickness-selected}",
"border-radius": "${checkbox-border-radius-selected}",
"border-style": "${checkbox-border-style-selected}",
fill: "currentColor"
}
}
]
},
{
part: "check-mark",
states: [
{
stateKey: "unselected",
state: "",
stateHost: ":not([checked])",
styles: {
fill: "inherit",
width: "11px",
height: "11px",
"--ptcs-use-icon": "none"
}
},
{
stateKey: "hover",
state: "",
stateHost: ":not([disabled]):hover",
styles: {
fill: "rgba(0,0,0,0)",
"--ptcs-use-icon": "none"
}
},
{
stateKey: "hover+selected",
state: "",
stateHost: ":not([disabled])[checked]:hover",
styles: {
fill: "inherit",
width: "11px",
height: "11px",
"--ptcs-use-icon": "${checkbox-icon-image-selected}"
}
},
{
stateKey: "pressed",
state: "",
stateHost: ":not([disabled]):hover:active",
styles: {
fill: "inherit",
"--ptcs-use-icon": "none"
}
},
{
stateKey: "pressed+selected",
state: "",
stateHost: ":not([disabled])[checked]:hover:active",
styles: {
fill: "inherit",
width: "11px",
height: "11px",
"--ptcs-use-icon": "${checkbox-icon-image-selected}"
}
},
{
stateKey: "selected",
state: "",
stateHost: "[checked]",
styles: {
fill: "inherit",
width: "11px",
height: "11px",
"--ptcs-use-icon": "${checkbox-icon-image-selected}"
}
},
{
stateKey: "disabled",
state: "",
stateHost: "[disabled]",
styles: {
fill: "rgba(0,0,0,0)",
"--ptcs-use-icon": "none"
}
},
{
stateKey: "disabled+selected",
state: "",
stateHost: "[disabled][checked]",
styles: {
fill: "inherit",
width: "11px",
height: "11px",
"--ptcs-use-icon": "${checkbox-icon-image-selected}"
}
}
]
},
{
part: "label",
states: [
{
stateKey: "unselected",
state: "",
stateHost: ":not([checked])",
styles: {
color: "${checkbox-text-label-color}",
"font-family": "${checkbox-text-label-fontfamily}",
"font-weight": "${checkbox-text-label-fontweight}",
"font-style": "${font-style-cond(checkbox-text-label-fontstyle)}",
"text-decoration": "${text-decoration-cond(checkbox-text-label-fontstyle)}",
"font-size": "${checkbox-text-label-fontsize}",
"line-height": "${checkbox-text-linespacing}",
"letter-spacing": "${checkbox-text-letterspacing}"
}
},
{
stateKey: "hover",
state: "",
stateHost: ":not([disabled]):hover",
styles: {
color: "${checkbox-text-label-color}",
"font-family": "${checkbox-text-label-fontfamily}",
"font-weight": "${checkbox-text-label-fontweight}",
"font-style": "${font-style-cond(checkbox-text-label-fontstyle-hover)}",
"text-decoration": "${text-decoration-cond(checkbox-text-label-fontstyle-hover)}",
"font-size": "${checkbox-text-label-fontsize}",
"line-height": "${checkbox-text-linespacing}",
"letter-spacing": "${checkbox-text-letterspacing}"
}
},
{
stateKey: "hover+selected",
state: "",
stateHost: ":not([disabled])[checked]:hover",
styles: {
color: "${checkbox-text-label-color-selected}",
"font-family": "${checkbox-text-label-fontfamily-selected}",
"font-weight": "${checkbox-text-label-fontweight-selected}",
"font-style": "${font-style-cond(checkbox-text-label-fontstyle-hoverselected)}",
"text-decoration": "${text-decoration-cond(checkbox-text-label-fontstyle-hoverselected)}",
"font-size": "${checkbox-text-label-fontsize-selected}",
"line-height": "${checkbox-text-linespacing-selected}",
"letter-spacing": "${checkbox-text-letterspacing-selected}"
}
},
{
stateKey: "pressed",
state: "",
stateHost: ":not([disabled]):hover:active",
styles: {
color: "${checkbox-text-label-color}",
"font-family": "${checkbox-text-label-fontfamily}",
"font-weight": "${checkbox-text-label-fontweight}",
"font-style": "${font-style-cond(checkbox-text-label-fontstyle-pressed)}",
"text-decoration": "${text-decoration-cond(checkbox-text-label-fontstyle-pressed)}",
"font-size": "${checkbox-text-label-fontsize}",
"line-height": "${checkbox-text-linespacing}",
"letter-spacing": "${checkbox-text-letterspacing}"
}
},
{
stateKey: "pressed+selected",
state: "",
stateHost: ":not([disabled])[checked]:hover:active",
styles: {
color: "${checkbox-text-label-color-selected}",
"font-family": "${checkbox-text-label-fontfamily-selected}",
"font-weight": "${checkbox-text-label-fontweight-selected}",
"font-style": "${font-style-cond(checkbox-text-label-fontstyle-pressedselected)}",
"text-decoration": "${text-decoration-cond(checkbox-text-label-fontstyle-pressedselected)}",
"font-size": "${checkbox-text-label-fontsize-selected}",
"line-height": "${checkbox-text-linespacing-selected}",
"letter-spacing": "${checkbox-text-letterspacing-selected}"
}
},
{
stateKey: "selected",
state: "",
stateHost: "[checked]",
styles: {
color: "${checkbox-text-label-color-selected}",
"font-family": "${checkbox-text-label-fontfamily-selected}",
"font-weight": "${checkbox-text-label-fontweight-selected}",
"font-style": "${font-style-cond(checkbox-text-label-fontstyle-selected)}",
"text-decoration": "${text-decoration-cond(checkbox-text-label-fontstyle-selected)}",
"font-size": "${checkbox-text-label-fontsize-selected}",
"line-height": "${checkbox-text-linespacing-selected}",
"letter-spacing": "${checkbox-text-letterspacing-selected}"
}
},
{
stateKey: "disabled+unselected",
state: "",
stateHost: "[disabled]:not([checked])",
styles: {
color: "${global-color-text-body-disabled}",
"font-family": "${checkbox-text-label-fontfamily}",
"font-weight": "${checkbox-text-label-fontweight}",
"font-style": "${font-style-cond(checkbox-text-label-fontstyle-disabled)}",
"text-decoration": "${text-decoration-cond(checkbox-text-label-fontstyle-disabled)}",
"font-size": "${checkbox-text-label-fontsize}",
"line-height": "${checkbox-text-linespacing}",
"letter-spacing": "${checkbox-text-letterspacing}"
}
},
{
stateKey: "disabled+selected",
state: "",
stateHost: "[disabled][checked]",
styles: {
color: "${global-color-text-body-disabled}",
"font-family": "${checkbox-text-label-fontfamily-selected}",
"font-weight": "${checkbox-text-label-fontweight-selected}",
"font-style": "${font-style-cond(checkbox-text-label-fontstyle-disabledselected)}",
"text-decoration": "${text-decoration-cond(checkbox-text-label-fontstyle-disabledselected)}",
"font-size": "${checkbox-text-label-fontsize-selected}",
"line-height": "${checkbox-text-linespacing-selected}",
"letter-spacing": "${checkbox-text-letterspacing-selected}"
}
}
]
},
{
part: "",
states: [
{
stateHost: ":focus",
stateKey: "focus",
styles: {
outline: "none",
"border-color": "var(--ptcs-focus-overlay-border-color, #0094c8)",
"border-width": "var(--ptcs-focus-overlay-border-width, 2px)",
"border-style": "var(--ptcs-focus-overlay-border-style, solid)"
}
},
{
stateKey: "base",
styles: {
"--ptcs-focus-overlay--padding": "0px",
padding: "9px 8px 9px 8px",
"min-width": "34px",
"min-height": "19px"
}
}
]
}
]
}
],
"ptcs-chip-data-filter-chip-child": [
{
variant: "",
parts: [
{
part: "oval-container",
states: [
{
stateKey: "base",
styles: {
background: "${chipbaseddatafilter-bg-color}",
"border-width": "${chipbaseddatafilter-chips-borderthickness}",
"border-style": "${chipbaseddatafilter-chips-borderstyle}",
"border-radius": "${chipbaseddatafilter-chips-borderradius}",
"border-color": "${chipbaseddatafilter-chips-color}",
color: "${chipbaseddatafilter-chips-color}",
"min-height": "${chipbaseddatafilter-chips-base-height}",
"margin-bottom": "16px"
}
}
]
},
{
part: "content",
states: [
{
stateKey: "base",
styles: {
"font-size": "${chipbaseddatafilter-label-fontsize}",
"font-weight": "${chipbaseddatafilter-label-fontweight}",
background: "none",
"font-family": "${chipbaseddatafilter-label-fontfamily}",
color: "${chipbaseddatafilter-chips-color}",
"min-width": "${chipbaseddatafilter-chips-minwidth}",
"max-width": "${chipbaseddatafilter-chips-maxwidth}",
"min-height": "${chipbaseddatafilter-chips-base-height}",
"padding-left": "15px"
}
}
]
},
{
part: "cross-button",
states: [
{
stateKey: "base",
styles: {
"border-radius": "${chipbaseddatafilter-chips-borderradius}",
background: "none",
"border-style": "none",
color: "${chipbaseddatafilter-chips-color}",
width: "18px",
height: "18px",
margin: "8px"
}
},
{
state: ":hover",
stateKey: "hover",
styles: {
color: "${chipbaseddatafilter-chips-crossbutton-color-hover}",
background: "${chipbaseddatafilter-chips-crossbutton-bg-color}"
}
}
]
},
{
part: "cross-button-container",
states: [
{
stateKey: "base",
styles: {
width: "33px",
height: "34px"
}
}
]
},
{
part: "",
states: [
{
stateKey: "base",
styles: {
"padding-right": "16px"
}
}
]
}
]
}
],
"ptcs-chip-data-filter-chip-container": [
{
variant: "",
parts: [
{
part: "less-more-button",
states: [
{
stateKey: "base",
styles: {
"font-family": "${chipbaseddatafilter-label-fontfamily}",
"font-size": "${chipbaseddatafilter-label-fontsize}",
"font-weight": "${chipbaseddatafilter-chipscontainer-showbutton-fontweight}",
color: "${chipbaseddatafilter-button-color}",
height: "${chipbaseddatafilter-chips-base-height}",
"line-height": "${chipbaseddatafilter-chips-lineheight}"
}
}
]
},
{
part: "container",
states: [
{
stateKey: "base",
styles: {
"padding-top": "1em"
}
}
]
}
]
}
],
"ptcs-chip-data-filter-selector-dropdown": [
{
variant: "",
parts: [
{
part: "",
states: [
{
stateKey: "base",
styles: {
"--ptcs-chip-data-filter-selector-dropdown-subcomponent-height": "34px",
"--ptcs-chip-data-filter-selector-dropdown-subcomponent-spacing": "12px",
"--ptcs-chip-data-filter-selector-dropdown-focus-overlay--padding": "0px",
"--ptcs-chip-data-filter-selector-dropdown-focus-overlay--border-style": "${chipbaseddatafilter-borderstyle}",
"--ptcs-chip-data-filter-selector-dropdown-focus-overlay--border-color": "${global-color-core-primary}",
"--ptcs-chip-data-filter-selector-dropdown-number-case-subcomponent-width": "128px",
"--ptcs-chip-data-filter-selector-dropdown-base-subcomponent-width": "${chipbaseddatafilter-base-subcomponents-width}"
}
}
]
}
]
}
],
"ptcs-confirmation": [
{
variant: "",
parts: [
{
part: "dialog",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
background: "${global-color-bg-primary}",
padding: "",
"box-shadow": "0 0 40px 0 ${confirmationdialogue-shadowcolor}"
}
}
]
}
]
}
],
"ptcs-datepicker-calendar": [
{
variant: "",
parts: [
{
part: "datepicker-container",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
background: "${global-color-bg-primary}",
padding: "",
"border-color": "${global-color-line-border}",
"border-width": "${global-line-border-thickness}",
"border-style": "solid",
"box-shadow": "0 2px 4px 0 ${datepicker-gridcontainer-shadowcolor}"
}
}
]
},
{
part: "day",
states: [
{
stateKey: "base",
state: "",
styles: {
"border-color": "${datepicker-bodycell-bordercolor}",
"border-width": "${datepicker-bodycell-borderthickness}",
"border-style": "${datepicker-bodycell-border-style}",
padding: "",
background: "${global-color-bg-primary}",
color: "${global-color-core-primary}",
"font-family": "${datepicker-bodycell-fontfamily}",
"font-size": "${datepicker-bodycell-fontsize}",
"font-style": "${font-style-cond(datepicker-bodycell-fontstyle)}",
"text-decoration": "${text-decoration-cond(datepicker-bodycell-fontstyle)}",
"font-weight": "${datepicker-bodycell-fontweight}",
"letter-spacing": "normal",
"line-height": "normal",
"text-align": "inherit"
}
},
{
stateKey: "hover",
state: ":not([disabled]):hover",
styles: {
"border-color": "${datepicker-bodycell-bordercolor}",
"border-width": "${datepicker-bodycell-borderthickness}",
"border-style": "${datepicker-bodycell-border-style}",
background: "${global-color-bg-hover}",
color: "${global-color-text-label}",
"font-family": "${datepicker-bodycell-fontfamily}",
"font-size": "${datepicker-bodycell-fontsize}",
"font-style": "${font-style-cond(datepicker-bodycell-fontstyle-hover)}",
"text-decoration": "${text-decoration-cond(datepicker-bodycell-fontstyle-hover)}",
"font-weight": "${datepicker-bodycell-fontweight}"
}
},
{
stateKey: "pressed",
state: ":not([disabled]):hover:active",
styles: {
"border-color": "${datepicker-bodycell-bordercolor}",
"border-width": "${datepicker-bodycell-borderthickness}",
"border-style": "${datepicker-bodycell-border-style}",
background: "${global-color-bg-selected}",
color: "${global-color-text-label}",
"font-family": "${datepicker-bodycell-fontfamily}",
"font-size": "${datepicker-bodycell-fontsize}",
"font-style": "${font-style-cond(datepicker-bodycell-fontstyle-pressed)}",
"text-decoration": "${text-decoration-cond(datepicker-bodycell-fontstyle-pressed)}",
"font-weight": "${datepicker-bodycell-fontweight}"
}
},
{
stateKey: "selected",
state: "[selected]",
styles: {
"border-color": "${datepicker-bodycell-bordercolor}",
"border-width": "${datepicker-bodycell-borderthickness}",
"border-style": "${datepicker-bodycell-border-style}",
background: "${global-color-bg-selected}",
color: "${global-color-text-label}",
"font-family": "${datepicker-bodycell-fontfamily}",
"font-size": "${datepicker-bodycell-fontsize}",
"font-style": "${font-style-cond(datepicker-bodycell-fontstyle-selected)}",
"text-decoration": "${text-decoration-cond(datepicker-bodycell-fontstyle-selected)}",
"font-weight": "${datepicker-bodycell-fontweight}"
}
},
{
stateKey: "disabled",
state: "[disabled]",
styles: {
"border-color": "${datepicker-bodycell-bordercolor}",
"border-width": "${datepicker-bodycell-borderthickness}",
"border-style": "${datepicker-bodycell-border-style}",
color: "${global-color-core-primary-disabled}",
"font-family": "${datepicker-bodycell-fontfamily}",
"font-size": "${datepicker-bodycell-fontsize}",
"font-style": "${font-style-cond(datepicker-bodycell-fontstyle-disabled)}",
"text-decoration": "${text-decoration-cond(datepicker-bodycell-fontstyle-disabled)}",
"font-weight": "${datepicker-bodycell-fontweight}"
}
}
]
},
{
part: "weekdays",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
"border-color": "${global-color-line-border}",
"border-width": "0px",
"border-style": "solid",
padding: "",
background: "${global-color-bg-primary}",
"font-family": "${datepicker-headercell-fontfamily}",
"font-size": "18px",
"font-style": "${font-style-cond(datepicker-headercell-fontstyle)}",
"text-decoration": "${text-decoration-cond(datepicker-headercell-fontstyle)}",
"font-weight": "${datepicker-headercell-fontweight}",
"letter-spacing": "normal",
"line-height": "normal",
"text-align": "inherit"
}
}
]
},
{
part: "",
states: [
{
stateHost: ":focus",
stateKey: "focus",
styles: {
outline: "none"
}
}
]
},
{
part: "days",
states: [
{
state: ":focus",
stateKey: "focus",
styles: {
outline: "none"
}
},
{
stateKey: "base",
styles: {
"--ptcs-focus-overlay--padding": "1"
}
}
]
},
{
part: "dot",
states: [
{
stateKey: "base",
styles: {
background: "${global-color-core-primary}",
"border-radius": "50%",
width: "${datepicker-bodycell-dot-size}",
height: "${datepicker-bodycell-dot-size}",
margin: "3px 7px"
}
}
]
},
{
part: "date-field-from:text-box",
states: [
{
stateHost: ":not([disabled])[being-active]",
stateKey: "being-active",
styles: {
"border-color": "${global-color-core-primary}",
"border-width": "${global-line-border-thickness}",
"border-style": "${datepicker-bodycell-border-style}"
}
}
]
},
{
part: "date-field-to:text-box",
states: [
{
stateHost: ":not([disabled])[being-active]",
stateKey: "being-active",
styles: {
"border-color": "${global-color-core-primary}",
"border-width": "${global-line-border-thickness}",
"border-style": "${datepicker-bodycell-border-style}"
}
}
]
},
{
part: "date-field-from",
states: [
{
stateKey: "base",
styles: {
width: "283px",
"padding-bottom": "10px"
}
}
]
},
{
part: "date-field-to",
states: [
{
stateKey: "base",
styles: {
width: "283px"
}
}
]
},
{
part: "range-inputs",
states: [
{
stateKey: "base",
styles: {
"padding-top": "8px",
"padding-bottom": "16px"
}
}
]
}
]
}
],
"ptcs-datepicker-input-labels": [
{
variant: "",
parts: [
{
part: "label",
states: [
{
stateKey: "base",
styles: {
"font-weight": "${datepicker-input-label-text-fontweight}",
"font-family": "${datepicker-input-label-text-fontfamily}",
"font-size": "${datepicker-input-label-text-fontsize}",
"padding-right": "8px"
}
}
]
},
{
part: "placeholder",
states: [
{
stateKey: "base",
styles: {
"font-weight": "${datepicker-input-label-text-fontweight}",
color: "${datepicker-input-label-placeholder-textcolor}",
"font-family": "${datepicker-input-label-text-fontfamily}",
"font-size": "${datepicker-input-label-text-fontsize}"
}
}
]
},
{
part: "",
states: [
{
stateKey: "base",
styles: {
"border-color": "${datepicker-input-label-bordercolor}",
"border-width": "${datepicker-input-label-borderthickness}",
"border-style": "${datepicker-input-label-borderstyle}",
"min-height": "${datepicker-input-label-minheight}",
padding: "0px 32px"
}
},
{
stateHost: "[disabled]",
stateKey: "disabled",
styles: {
"border-color": "${global-color-core-primary-disabled}",
"border-width": "${datepicker-input-label-borderthickness}",
"border-style": "${datepicker-input-label-borderstyle}",
background: "${global-color-bg-disabled}",
color: "${global-color-text-body-disabled}"
}
}
]
},
{
part: "input-labels-container",
states: [
{
stateKey: "base",
styles: {
"min-height": "${datepicker-input-label-minheight}"
}
}
]
},
{
part: "text-mask-cursor",
states: [
{
stateKey: "base",
styles: {
color: "${global-color-text-label}",
background: "none",
width: "32px"
}
}
]
},
{
part: "icon",
states: [
{
stateKey: "base",
styles: {
left: "0px"
}
}
]
},
{
part: "clear-button",
states: [
{
stateKey: "base",
styles: {
right: "8px"
}
}
]
}
]
}
],
"ptcs-datepicker": [
{
variant: "",
parts: [
{
part: "label",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
"font-size": "${global-text-label-fontsize}"
}
}
]
},
{
part: "",
states: [
{
stateHost: ":focus",
stateKey: "focus",
styles: {
outline: "none"
}
},
{
stateKey: "base",
styles: {
"--ptcs-focus-overlay--padding": "0px",
"min-width": "34px",
"min-height": "34px"
}
}
]
},
{
part: "date-field",
states: [
{
stateKey: "base",
styles: {
margin: "0px"
}
}
]
},
{
part: "date-field:text-box",
states: [
{
stateHost: ":not([disabled])[being-active]",
stateKey: "being-active",
styles: {
"border-color": "${global-color-core-primary}",
"border-width": "${global-line-border-thickness}",
"border-style": "${datepicker-bodycell-border-style}"
}
}
]
},
{
part: "date-field-label",
states: [
{
state: ":not([disabled])[being-active]",
stateKey: "being-active",
styles: {
"border-color": "${global-color-core-primary}",
"border-width": "${global-line-border-thickness}",
"border-style": "${datepicker-bodycell-border-style}"
}
}
]
}
]
}
],
"ptcs-divider": [
{
variant: "",
parts: [
{
part: "",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
padding: "0px 0px 0px 0px"
}
}
]
},
{
part: "line",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
background: "${divider-line-color}",
height: "${global-line-divider-thickness}",
width: "${global-line-divider-thickness}"
}
}
]
}
]
}
],
"ptcs-dropdown": [
{
variant: "",
parts: [
{
part: "label",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
color: "${e-list-text-label-color}",
"font-family": "${e-list-text-label-fontfamily}",
"font-weight": "${e-list-text-label-fontweight}",
"font-size": "${e-list-text-label-fontsize}",
"font-style": "${font-style-cond(dropdown-text-outlabel-fontstyle)}",
"text-decoration": "${text-decoration-cond(dropdown-text-outlabel-fontstyle)}"
}
}
]
},
{
part: "item-value",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
color: "${dropdown-text-label-color}",
"font-family": "${e-list-text-text-fontfamily}",
"font-weight": "${e-list-text-text-fontweight}",
"font-size": "${e-list-text-text-fontsize}",
"font-style": "${font-style-cond(dropdown-text-label-fontstyle)}",
"text-decoration": "${text-decoration-cond(dropdown-text-label-fontstyle)}",
"line-height": "normal",
"letter-spacing": "normal"
}
},
{
stateKey: "disabled",
state: "",
stateHost: "[disabled]",
styles: {
color: "${disabled(dropdown-text-label-color)}"
}
}
]
},
{
part: "filter",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
"border-color": "inherit"
}
},
{
stateKey: "pressed",
state: "",
stateHost: ":not([disabled]):hover:active",
styles: {
"border-color": "${global-color-core-primary}"
}
},
{
stateKey: "selected",
state: "",
stateHost: "[selected]",
styles: {
"border-color": "${global-color-core-primary}"
}
},
{
stateKey: "disabled",
state: "",
stateHost: "[disabled]",
styles: {
"border-color": "inherit"
}
}
]
},
{
part: "icon",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
width: "18px",
height: "18px",
"--ptcs-use-icon": "${dropdown-icon-image}",
padding: "0px",
margin: "0px",
color: "${global-color-field-icon}"
}
},
{
stateKey: "hover",
state: "",
stateHost: ":not([disabled]):hover",
styles: {
"--ptcs-use-icon": "${dropdown-icon-image}"
}
},
{
stateKey: "pressed",
state: "",
stateHost: ":not([disabled]):hover:active",
styles: {
"--ptcs-use-icon": "${dropdown-icon-image}"
}
},
{
stateKey: "selected",
state: "",
stateHost: "[selected]",
styles: {
"--ptcs-use-icon": "${dropdown-icon-image}"
}
},
{
stateKey: "disabled",
state: "",
stateHost: "[disabled]",
styles: {
"--ptcs-use-icon": "${dropdown-icon-image}"
}
}
]
},
{
part: "select-box",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
background: "${e-textfield-backgroundcolor}",
"border-color": "${textfield-field-bordercolor}",
"border-width": "${textfield-field-borderthickness}",
"border-style": "${textfield-field-border-style}",
"border-radius": "${textfield-field-border-radius}",
"min-height": "34px",
"padding-left": "8px",
"padding-right": "8px"
}
},
{
stateKey: "hover",
state: "",
stateHost: ":not([disabled]):hover",
styles: {
background: "${textfield-field-backgroundcolor-hover}",
"border-color": "${textfield-field-bordercolor-hover}",
"border-width": "${textfield-field-borderthickness-hover}"
}
},
{
stateKey: "pressed",
state: "",
stateHost: ":not([disabled]):hover:active",
styles: {
background: "${textfield-field-backgroundcolor-pressed}",
"border-color": "${textfield-field-bordercolor-pressed}",
"border-width": "${textfield-field-borderthickness-pressed}"
}
},
{
stateKey: "selected",
state: "",
stateHost: "[selected]",
styles: {
background: "${textfield-field-backgroundcolor-pressed}",
"border-color": "${textfield-field-bordercolor-pressed}",
"border-width": "${textfield-field-borderthickness-pressed}"
}
},
{
stateKey: "disabled",
state: "",
stateHost: "[disabled]",
styles: {
background: "${textfield-field-backgroundcolor-disabled}",
"border-color": "${textfield-field-bordercolor-disabled}",
"border-width": "${textfield-field-borderthickness-disabled}"
}
}
]
},
{
part: "",
states: [
{
stateHost: ":focus",
stateKey: "focus",
styles: {
outline: "none"
}
},
{
stateKey: "base",
styles: {
"--ptcs-focus-overlay--padding": "0px",
"min-height": "34px",
"min-width": "34px"
}
}
]
}
]
}
],
"ptcs-dynamic-panel": [
{
variant: "",
parts: [
{
part: "",
states: [
{
stateHost: "[disabled]",
stateKey: "disabled",
styles: {
opacity: "0.5"
}
},
{
stateKey: "base",
styles: {
"min-height": "50px",
"min-width": "50px",
"--ptcs-focus-overlay--padding": "0px"
}
},
{
stateHost: ":focus",
stateKey: "focus",
styles: {
outline: "none"
}
}
]
},
{
part: "container",
states: [
{
stateHost: "[trigger=panel]",
state: "",
stateKey: "is-trigger",
styles: {
cursor: "pointer"
}
},
{
stateKey: "base",
styles: {
"border-color": "${global-color-line-border}",
"border-width": "1px",
"border-style": "solid"
}
}
]
},
{
part: "separator",
states: [
{
stateKey: "base",
styles: {
background: "${global-color-core-primary}"
}
},
{
state: "[anchor=left]",
stateKey: "left-side",
styles: {
width: "4px",
"margin-right": "8px"
}
},
{
state: "[anchor=right]",
stateKey: "right-side",
styles: {
width: "4px",
"margin-left": "8px"
}
},
{
state: "[anchor=top]",
stateKey: "top-side",
styles: {
height: "4px",
"margin-bottom": "8px"
}
},
{
state: "[anchor=bottom]",
stateKey: "bottom-side",
styles: {
height: "4px",
"margin-top": "8px"
}
},
{
state: "[hover]",
stateKey: "hover",
styles: {
background: "${global-color-core-primary-hover}"
}
},
{
stateHost: "[disabled]",
stateKey: "disabled",
styles: {
background: "${global-color-bg-secondary}"
}
},
{
stateHost: "[hide-thumb]",
stateKey: "hide-thumb",
styles: {
background: "none",
width: "0px",
height: "0px"
}
},
{
stateHost: "[sizing]",
stateKey: "resizing",
styles: {
background: "${global-color-core-primary-hover}"
}
},
{
state: ":active",
stateKey: "pressed",
styles: {
background: "${pressed(global-color-core-primary)}"
}
}
]
},
{
part: "thumb",
states: [
{
stateKey: "base",
styles: {
width: "18px",
height: "18px",
background: "${global-color-core-primary}",
"border-radius": "2px",
color: "#FFFFFF"
}
},
{
state: "[hover]",
stateKey: "hover",
styles: {
background: "${global-color-core-primary-hover}"
}
},
{
stateHost: "[sizing]",
stateKey: "resizing",
styles: {
background: "${global-color-core-primary-pressed}"
}
},
{
state: "[anchor=top]",
stateKey: "top-side",
styles: {
transform: "rotate(90deg)",
left: "calc(50% - 9px)",
bottom: "9px"
}
},
{
state: "[anchor=bottom]",
stateKey: "bottom-side",
styles: {
transform: "rotate(-90deg)",
left: "calc(50% - 9px)",
top: "9px"
}
},
{
state: "[anchor=left]",
stateKey: "left-side",
styles: {
right: "9px",
top: "calc(50% - 9px)"
}
},
{
state: "[anchor=right]",
stateKey: "right-side",
styles: {
top: "calc(50% - 9px)",
left: "9px"
}
},
{
stateHost: "[disabled]",
stateKey: "disabled",
styles: {
background: "${global-color-bg-secondary}",
"border-color": "#aeb5bd",
"border-width": "1px",
"border-style": "solid"
}
}
]
},
{
part: "trigger",
states: [
{
stateKey: "base",
styles: {
width: "var(--ptcs-dp-toggle-button-hit-area, ${dynamicpanel-toggle-button-hit-area})",
height: "var(--ptcs-dp-toggle-button-hit-area, ${dynamicpanel-toggle-button-hit-area})"
}
}
]
},
{
part: "scrim",
states: [
{
stateHost: "[push-behavior=flyover]",
stateKey: "flyover",
styles: {
background: "rgba(35, 43, 45, 0.6)"
}
}
]
},
{
part: "panel",
states: [
{
stateKey: "base",
styles: {
background: "${global-color-bg-primary}",
"border-color": "${global-color-line-border}",
"border-width": "1px",
"border-style": "solid"
}
}
]
},
{
part: "trigger-button",
states: [
{
stateKey: "base",
styles: {
background: "${global-color-bg-primary}",
margin: "0px"
}
},
{
state: ":hover",
stateKey: "hover",
styles: {
background: "${global-color-core-primary-hover}",
color: "#FFFFFF"
}
},
{
state: ":active",
stateKey: "pressed",
styles: {
background: "${global-color-core-primary-pressed}",
color: "#FFFFFF"
}
}
]
},
{
part: "panel-wrapper",
states: [
{
stateKey: "base",
styles: {
top: "var(--ptcs-dp-padding, ${dynamicpanel-padding}) !important",
bottom: "var(--ptcs-dp-padding, ${dynamicpanel-padding}) !important",
left: "var(--ptcs-dp-padding, ${dynamicpanel-padding}) !important",
right: "var(--ptcs-dp-padding, ${dynamicpanel-padding}) !important"
}
}
]
}
]
}
],
"ptcs-icon": [
{
variant: "",
parts: [
{
part: "image",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
width: "",
height: "",
"border-width": "0px",
"border-color": "${global-color-line-border}",
"border-style": "none",
"border-radius": "0px",
opacity: "1"
}
}
]
},
{
part: "",
states: [
{
stateKey: "base",
styles: {
padding: "8px"
}
},
{
stateHost: "[size=small]",
stateKey: "small",
styles: {
width: "34px",
height: "34px"
}
},
{
stateHost: "[size=medium]",
stateKey: "medium",
styles: {
width: "38px",
height: "38px"
}
},
{
stateHost: "[size=large]",
stateKey: "large",
styles: {
width: "76px",
height: "76px"
}
},
{
stateHost: "[size=xlarge]",
stateKey: "xlarge",
styles: {
width: "96px",
height: "96px"
}
}
]
}
]
}
],
"ptcs-image": [
{
variant: "",
parts: [
{
part: "image",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
"border-width": "0px",
"border-color": "${global-color-line-border}",
"border-style": "none",
"border-radius": "0px",
opacity: "1",
background: "rgba(0,0,0,0)",
padding: "0px"
}
}
]
}
]
}
],
"ptcs-label": [
{
variant: "header",
parts: [
{
part: "",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
color: "${global-color-text-header}",
"font-family": "${global-text-header-fontfamily}",
"font-style": "${font-style-cond(label-header-fontstyle)}",
"text-decoration": "${text-decoration-cond(label-header-fontstyle)}",
"font-size": "${global-text-header-fontsize}",
"line-height": "normal",
"letter-spacing": "normal",
background: "inherit",
"text-align": "inherit",
"border-color": "${global-color-line-border}",
"border-width": "0px",
"border-style": "solid",
"font-weight": "${global-text-header-fontweight}"
}
}
]
},
{
part: "show-button",
states: [
{
stateKey: "base",
state: "",
styles: {
color: "${e-link-primary-color}",
"font-family": "${e-link-primary-fontfamily}",
"font-weight": "${e-link-primary-fontweight}",
"font-style": "${font-style-cond(label-header-show-fontstyle)}",
"font-size": "${e-link-primary-fontsize}",
"line-height": "normal",
"letter-spacing": "normal",
"text-align": "right",
background: "${label-show-backgroundcolor}",
"box-shadow": "${label-show-shadow}",
padding: "8px 0 0 0"
}
},
{
stateKey: "disabled",
state: "[disabled]",
styles: {
color: "${e-link-primary-color-disabled}",
"font-family": "${e-link-primary-fontfamily-disabled}",
"font-weight": "${e-link-primary-fontweight-disabled}",
"font-style": "${font-style-cond(label-header-show-fontstyle-disabled)}",
"font-size": "${e-link-primary-fontsize-disabled}",
"line-height": "${label-show-linespacing}",
"letter-spacing": "${label-show-letterspacing}",
"text-align": "${label-show-alignment}"
}
}
]
},
{
part: "text-link",
states: [
{
state: ":not([disabled]):hover",
stateKey: "hover",
styles: {
color: "${e-link-primary-color-hover}",
"font-family": "${e-link-primary-fontfamily-hover}",
"font-size": "${e-link-primary-fontsize-hover}",
"font-weight": "${e-link-primary-fontweight-hover}",
"font-style": "${font-style-cond(label-header-show-fontstyle-hover)}",
"text-decoration": "${text-decoration-cond(label-header-show-fontstyle-hover)}",
"line-height": "${label-show-linespacing}",
"letter-spacing": "${label-show-letterspacing}",
"text-align": "${label-show-alignment}",
cursor: "pointer"
}
},
{
state: ":not([disabled]):hover:active",
stateKey: "pressed",
styles: {
color: "${e-link-primary-color-pressed}",
"font-family": "${e-link-primary-fontfamily-pressed}",
"font-size": "${e-link-primary-fontsize-pressed}",
"font-weight": "${e-link-primary-fontweight-pressed}",
"font-style": "${font-style-cond(label-header-show-fontstyle-pressed)}",
"text-decoration": "${text-decoration-cond(label-header-show-fontstyle-hover)}",
"line-height": "${label-show-linespacing}",
"letter-spacing": "${label-show-letterspacing}",
"text-align": "${label-show-alignment}",
cursor: "pointer"
}
}
]
}
]
},
{
variant: "sub-header",
parts: [
{
part: "",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
color: "${global-color-text-subheader}",
"font-family": "${global-text-subheader-fontfamily}",
"font-style": "${font-style-cond(label-subheader-fontstyle)}",
"text-decoration": "${text-decoration-cond(label-subheader-fontstyle)}",
"font-size": "${global-text-subheader-fontsize}",
"line-height": "normal",
"letter-spacing": "normal",
background: "inherit",
"text-align": "inherit",
"border-color": "${global-color-line-border}",
"border-width": "0px",
"border-style": "solid",
"font-weight": "${global-text-subheader-fontweight}"
}
}
]
},
{
part: "show-button",
states: [
{
stateKey: "base",
state: "",
styles: {
color: "${e-link-primary-color}",
"font-family": "${e-link-primary-fontfamily}",
"font-weight": "${e-link-primary-fontweight}",
"font-style": "${font-style-cond(label-subheader-show-fontstyle)}",
"font-size": "${e-link-primary-fontsize}",
"line-height": "normal",
"letter-spacing": "normal",
"text-align": "right",
background: "${label-show-backgroundcolor}",
"box-shadow": "${label-show-shadow}",
padding: "8px 0 0 0"
}
},
{
stateKey: "disabled",
state: "[disabled]",
styles: {
color: "${e-link-primary-color-disabled}",
"font-family": "${e-link-primary-fontfamily-disabled}",
"font-weight": "${e-link-primary-fontweight-disabled}",
"font-style": "${font-style-cond(label-subheader-show-fontstyle-disabled)}",
"font-size": "${e-link-primary-fontsize-disabled}",
"line-height": "${label-show-linespacing}",
"letter-spacing": "${label-show-letterspacing}",
"text-align": "${label-show-alignment}"
}
}
]
},
{
part: "text-link",
states: [
{
state: ":not([disabled]):hover",
stateKey: "hover",
styles: {
color: "${e-link-primary-color-hover}",
"font-family": "${e-link-primary-fontfamily-hover}",
"font-size": "${e-link-primary-fontsize-hover}",
"font-weight": "${e-link-primary-fontweight-hover}",
"font-style": "${font-style-cond(label-subheader-show-fontstyle-hover)}",
"text-decoration": "${text-decoration-cond(label-subheader-show-fontstyle-hover)}",
"line-height": "${label-show-linespacing}",
"letter-spacing": "${label-show-letterspacing}",
"text-align": "${label-show-alignment}"
}
},
{
state: ":not([disabled]):hover:active",
stateKey: "pressed",
styles: {
color: "${e-link-primary-color-pressed}",
"font-family": "${e-link-primary-fontfamily-pressed}",
"font-size": "${e-link-primary-fontsize-pressed}",
"font-weight": "${e-link-primary-fontweight-pressed}",
"font-style": "${font-style-cond(label-subheader-show-fontstyle-pressed)}",
"text-decoration": "${text-decoration-cond(label-subheader-show-fontstyle-pressed)}",
"line-height": "${label-show-linespacing}",
"letter-spacing": "${label-show-letterspacing}",
"text-align": "${label-show-alignment}"
}
}
]
}
]
},
{
variant: "body",
parts: [
{
part: "",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
color: "${global-color-text-body}",
"font-family": "${global-text-body-fontfamily}",
"font-style": "${font-style-cond(label-body-fontstyle)}",
"text-decoration": "${text-decoration-cond(label-body-fontstyle)}",
"font-size": "${global-text-body-fontsize}",
"line-height": "normal",
"letter-spacing": "normal",
background: "inherit",
"text-align": "inherit",
"border-color": "${global-color-line-border}",
"border-width": "0px",
"border-style": "solid",
"font-weight": "${global-text-body-fontweight}",
outline: "none"
}
}
]
},
{
part: "show-button",
states: [
{
stateKey: "base",
state: "",
styles: {
color: "${e-link-primary-color}",
"font-family": "${e-link-primary-fontfamily}",
"font-weight": "${e-link-primary-fontweight}",
"font-style": "${font-style-cond(label-body-show-fontstyle)}",
"font-size": "${e-link-primary-fontsize}",
"line-height": "normal",
"letter-spacing": "normal",
"text-align": "right",
background: "${label-show-backgroundcolor}",
"box-shadow": "${label-show-shadow}",
padding: "8px 0 0 0"
}
},
{
stateKey: "disabled",
state: "[disabled]",
styles: {
color: "${e-link-primary-color-disabled}",
"font-family": "${e-link-primary-fontfamily-disabled}",
"font-weight": "${e-link-primary-fontweight-disabled}",
"font-style": "${font-style-cond(label-body-show-fontstyle-disabled)}",
"font-size": "${e-link-primary-fontsize-disabled}",
"line-height": "${label-show-linespacing}",
"letter-spacing": "${label-show-letterspacing}",
"text-align": "${label-show-alignment}"
}
}
]
},
{
part: "text-link",
states: [
{
state: ":not([disabled]):hover",
stateKey: "hover",
styles: {
color: "${e-link-primary-color-hover}",
"font-family": "${e-link-primary-fontfamily-hover}",
"font-size": "${e-link-primary-fontsize-hover}",
"font-weight": "${e-link-primary-fontweight-hover}",
"font-style": "${font-style-cond(label-body-show-fontstyle-hover)}",
"text-decoration": "${text-decoration-cond(label-body-show-fontstyle-hover)}",
"line-height": "${label-show-linespacing}",
"letter-spacing": "${label-show-letterspacing}",
"text-align": "${label-show-alignment}"
}
},
{
state: ":not([disabled]):hover:active",
stateKey: "pressed",
styles: {
color: "${e-link-primary-color-pressed}",
"font-family": "${e-link-primary-fontfamily-pressed}",
"font-size": "${e-link-primary-fontsize-pressed}",
"font-weight": "${e-link-primary-fontweight-pressed}",
"font-style": "${font-style-cond(label-body-show-fontstyle-pressed)}",
"text-decoration": "${text-decoration-cond(label-body-show-fontstyle-pressed)}",
"line-height": "${label-show-linespacing}",
"letter-spacing": "${label-show-letterspacing}",
"text-align": "${label-show-alignment}"
}
}
]
},
{
part: "label",
states: [
{
stateKey: "base",
styles: {
outline: "none"
}
}
]
}
]
},
{
variant: "label",
parts: [
{
part: "",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
color: "${global-color-text-label}",
"font-family": "${global-text-label-fontfamily}",
"font-style": "${font-style-cond(label-fontstyle)}",
"text-decoration": "${text-decoration-cond(label-fontstyle)}",
"font-size": "${global-text-label-fontsize}",
"line-height": "normal",
"letter-spacing": "normal",
background: "inherit",
"text-align": "inherit",
"border-color": "${global-color-line-border}",
"border-width": "0px",
"border-style": "solid",
"font-weight": "${global-text-label-fontweight}"
}
}
]
},
{
part: "show-button",
states: [
{
stateKey: "base",
state: "",
styles: {
color: "${e-link-primary-color}",
"font-family": "${e-link-primary-fontfamily}",
"font-weight": "${e-link-primary-fontweight}",
"font-style": "${font-style-cond(label-show-fontstyle)}",
"font-size": "${e-link-primary-fontsize}",
"line-height": "${label-show-linespacing}",
"letter-spacing": "${label-show-letterspacing}",
"text-align": "${label-show-alignment}",
background: "${label-show-backgroundcolor}",
"box-shadow": "${label-show-shadow}",
padding: "8px 0 0 0"
}
},
{
stateKey: "disabled",
state: "[disabled]",
styles: {
color: "${e-link-primary-color-disabled}",
"font-family": "${e-link-primary-fontfamily-disabled}",
"font-weight": "${e-link-primary-fontweight-disabled}",
"font-style": "${font-style-cond(label-show-fontstyle-disabled)}",
"font-size": "${e-link-primary-fontsize-disabled}",
"line-height": "${label-show-linespacing}",
"letter-spacing": "${label-show-letterspacing}",
"text-align": "${label-show-alignment}"
}
}
]
},
{
part: "text-link",
states: [
{
state: ":not([disabled]):hover",
stateKey: "hover",
styles: {
color: "${e-link-primary-color-hover}",
"font-family": "${e-link-primary-fontfamily-hover}",
"font-size": "${e-link-primary-fontsize-hover}",
"font-weight": "${e-link-primary-fontweight-hover}",
"font-style": "${font-style-cond(label-show-fontstyle-hover)}",
"text-decoration": "${text-decoration-cond(label-show-fontstyle-hover)}",
"line-height": "${label-show-linespacing}",
"letter-spacing": "${label-show-letterspacing}",
"text-align": "${label-show-alignment}"
}
},
{
state: ":not([disabled]):hover:active",
stateKey: "pressed",
styles: {
color: "${e-link-primary-color-pressed}",
"font-family": "${e-link-primary-fontfamily-pressed}",
"font-size": "${e-link-primary-fontsize-pressed}",
"font-weight": "${e-link-primary-fontweight-pressed}",
"font-style": "${font-style-cond(label-show-fontstyle-pressed)}",
"text-decoration": "${text-decoration-cond(label-show-fontstyle-pressed)}",
"line-height": "${label-show-linespacing}",
"letter-spacing": "${label-show-letterspacing}",
"text-align": "${label-show-alignment}"
}
}
]
}
]
},
{
variant: "title",
parts: [
{
part: "",
states: [
{
stateKey: "base",
styles: {
color: "${global-color-text-title}",
"font-family": "${global-text-title-fontfamily}",
"font-size": "${global-text-title-fontsize}",
"font-weight": "${global-text-title-fontweight}",
"font-style": "${global-text-title-fontstyle}",
"border-color": "${global-color-line-border}",
"border-width": "0px"
}
}
]
}
]
},
{
variant: "caption",
parts: [
{
part: "",
states: [
{
stateKey: "base",
styles: {
color: "${global-color-text-caption}",
"font-family": "${global-text-caption-fontfamily}",
"font-size": "${global-text-caption-fontsize}",
"font-weight": "${global-text-caption-fontweight}",
"font-style": "${global-text-caption-fontstyle}",
"border-color": "global-color-line",
"border-width": "0px"
}
}
]
}
]
}
],
"ptcs-link": [
{
variant: "primary",
parts: [
{
part: "link",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
color: "${e-link-primary-color}",
"font-family": "${e-link-primary-fontfamily}",
"font-weight": "${e-link-primary-fontweight}",
"font-style": "${font-style-cond(link-primary-fontstyle)}",
"text-decoration": "${text-decoration-cond(link-primary-fontstyle)}",
"font-size": "${e-link-primary-fontsize}",
"line-height": "${link-primary-linespacing}",
"letter-spacing": "${link-primary-letterspacing}",
"text-align": "${link-primary-alignment}"
}
},
{
stateKey: "hover",
state: "",
stateHost: ":not([disabled]):hover",
styles: {
color: "${e-link-primary-color-hover}",
"font-family": "${e-link-primary-fontfamily-hover}",
"font-weight": "${e-link-primary-fontweight-hover}",
"font-style": "${font-style-cond(link-primary-fontstyle-hover)}",
"text-decoration": "${text-decoration-cond(link-primary-fontstyle-hover)}",
"font-size": "${e-link-primary-fontsize-hover}",
"line-height": "${link-primary-linespacing}",
"letter-spacing": "${link-primary-letterspacing}",
"text-align": "${link-primary-alignment}"
}
},
{
stateKey: "pressed",
state: "",
stateHost: ":not([disabled]):hover:active",
styles: {
color: "${e-link-primary-color-pressed}",
"font-family": "${e-link-primary-fontfamily-pressed}",
"font-weight": "${e-link-primary-fontweight-pressed}",
"font-style": "${font-style-cond(link-primary-fontstyle-pressed)}",
"text-decoration": "${text-decoration-cond(link-primary-fontstyle-pressed)}",
"font-size": "${e-link-primary-fontsize-pressed}",
"line-height": "${link-primary-linespacing}",
"letter-spacing": "${link-primary-letterspacing}",
"text-align": "${link-primary-alignment}"
}
},
{
stateKey: "disabled",
state: "",
stateHost: "[disabled]",
styles: {
color: "${e-link-primary-color-disabled}",
"font-family": "${e-link-primary-fontfamily-disabled}",
"font-weight": "${e-link-primary-fontweight-disabled}",
"font-style": "${font-style-cond(link-primary-fontstyle-disabled)}",
"text-decoration": "${text-decoration-cond(link-primary-fontstyle-disabled)}",
"font-size": "${e-link-primary-fontsize-disabled}",
"line-height": "${link-primary-linespacing}",
"letter-spacing": "${link-primary-letterspacing}",
"text-align": "${link-primary-alignment}"
}
},
{
stateKey: "visited",
state: ":visited",
stateHost: ":not([disabled])",
styles: {
color: "${e-link-primary-color-visited}",
"line-height": "${link-primary-linespacing}",
"letter-spacing": "${link-primary-letterspacing}",
"text-align": "${link-primary-alignment}"
}
},
{
stateKey: "focus",
state: ":focus",
styles: {
outline: "none"
}
}
]
},
{
part: "",
states: [
{
stateHost: ":focus",
stateKey: "focus",
styles: {
outline: "none"
}
},
{
stateKey: "base",
styles: {
"--ptcs-focus-overlay--padding": "0px"
}
}
]
},
{
part: "label",
states: [
{
stateKey: "base",
styles: {
padding: "9px 10px 9px 10px"
}
}
]
}
]
},
{
variant: "secondary",
parts: [
{
part: "link",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
color: "${e-link-secondary-color}",
"font-family": "${e-link-secondary-fontfamily}",
"font-weight": "${e-link-secondary-fontweight}",
"font-style": "${font-style-cond(link-secondary-fontstyle)}",
"text-decoration": "${text-decoration-cond(link-secondary-fontstyle)}",
"font-size": "${e-link-secondary-fontsize}",
"line-height": "${link-secondary-linespacing}",
"letter-spacing": "${link-secondary-letterspacing}",
"text-align": "${link-secondary-alignment}"
}
},
{
stateKey: "hover",
state: "",
stateHost: ":not([disabled]):hover",
styles: {
color: "${e-link-secondary-color-hover}",
"font-family": "${e-link-secondary-fontfamily-hover}",
"font-weight": "${e-link-secondary-fontweight-hover}",
"font-style": "${font-style-cond(link-secondary-fontstyle-hover)}",
"text-decoration": "${text-decoration-cond(link-secondary-fontstyle-hover)}",
"font-size": "${e-link-secondary-fontsize-hover}",
"line-height": "${link-secondary-linespacing}",
"letter-spacing": "${link-secondary-letterspacing}",
"text-align": "${link-secondary-alignment}"
}
},
{
stateKey: "pressed",
state: "",
stateHost: ":not([disabled]):hover:active",
styles: {
color: "${e-link-secondary-color-pressed}",
"font-family": "${e-link-secondary-fontfamily-pressed}",
"font-weight": "${e-link-secondary-fontweight-pressed}",
"font-style": "${font-style-cond(link-secondary-fontstyle-pressed)}",
"text-decoration": "${text-decoration-cond(link-secondary-fontstyle-pressed)}",
"font-size": "${e-link-secondary-fontsize-pressed}",
"line-height": "${link-secondary-linespacing}",
"letter-spacing": "${link-secondary-letterspacing}",
"text-align": "${link-secondary-alignment}"
}
},
{
stateKey: "disabled",
state: "",
stateHost: "[disabled]",
styles: {
color: "${e-link-secondary-color-disabled}",
"font-family": "${e-link-secondary-fontfamily-disabled}",
"font-weight": "${e-link-secondary-fontweight-disabled}",
"font-style": "${font-style-cond(link-secondary-fontstyle-disabled)}",
"text-decoration": "${text-decoration-cond(link-secondary-fontstyle-disabled)}",
"font-size": "${e-link-secondary-fontsize-disabled}",
"line-height": "${link-secondary-linespacing}",
"letter-spacing": "${link-secondary-letterspacing}",
"text-align": "${link-secondary-alignment}"
}
},
{
stateKey: "visited",
state: ":visited",
stateHost: ":not([disabled])",
styles: {
color: "${e-link-secondary-color-visited}",
"line-height": "${link-secondary-linespacing}",
"letter-spacing": "${link-secondary-letterspacing}",
"text-align": "${link-secondary-alignment}"
}
},
{
stateKey: "focus",
state: ":focus",
styles: {
outline: "none"
}
}
]
},
{
part: "",
states: [
{
stateHost: ":focus",
stateKey: "focus",
styles: {
outline: "none"
}
},
{
stateKey: "base",
styles: {
"--ptcs-focus-overlay--padding": "0px"
}
}
]
},
{
part: "label",
states: [
{
stateKey: "base",
styles: {
padding: "9px 10px 9px 10px"
}
}
]
}
]
}
],
"ptcs-list-shuttle": [
{
variant: "",
parts: [
{
part: "",
states: [
{
stateKey: "base",
styles: {
background: "${listshuttle-container-backgroundcolor}",
"border-color": "${listshuttle-container-bordercolor}",
"border-width": "${listshuttle-container-borderthickness}",
"border-style": "${listshuttle-container-borderstyle}",
"min-height": "446px"
}
},
{
stateHost: "[vertical]",
stateKey: "vertical",
styles: {
"min-width": "273px",
"min-height": "738px"
}
}
]
},
{
part: "head",
states: [
{
stateKey: "base",
styles: {
background: "${listshuttle-header-backgroundcolor}",
"border-color": "${listshuttle-header-bordercolor}",
"border-width": "${listshuttle-header-borderthickness}",
"border-style": "${listshuttle-header-border-style}",
padding: "16px"
}
}
]
},
{
part: "remove-button",
states: [
{
stateKey: "base",
styles: {
"max-width": "100%",
"min-width": "110px",
"margin-bottom": "16px",
"margin-right": "16px",
"margin-left": "12px",
"margin-top": "0px"
}
},
{
stateHost: "[vertical]",
stateKey: "vertical",
styles: {
"margin-left": "0px"
}
}
]
},
{
part: "up-button",
states: [
{
stateKey: "base",
styles: {
"max-width": "100%",
"min-width": "110px",
margin: "0px"
}
}
]
},
{
part: "down-button",
states: [
{
stateKey: "base",
styles: {
"margin-top": "16px",
"min-width": "110px",
"max-width": "100%",
"margin-left": "0px",
"margin-right": "0px",
"margin-bottom": "0px"
}
}
]
},
{
part: "add-button",
states: [
{
stateKey: "base",
styles: {
"min-width": "110px",
"max-width": "100%",
margin: "0px"
}
}
]
},
{
part: "source-list:list-item",
states: [
{
stateKey: "base",
styles: {
"--ptcs-list-list-item-border-style": "none"
}
}
]
},
{
part: "target-list:list-item",
states: [
{
stateKey: "base",
styles: {
"--ptcs-list-list-item-border-style": "none"
}
}
]
},
{
part: "source-list-container",
states: [
{
stateKey: "base",
styles: {
"padding-top": "16px",
"padding-left": "16px",
"padding-right": "12px"
}
},
{
stateHost: "[vertical]",
stateKey: "vertical",
styles: {
"padding-right": "16px"
}
}
]
},
{
part: "target-list-container",
states: [
{
stateKey: "base",
styles: {
"padding-top": "16px",
"padding-left": "12px",
"padding-right": "16px"
}
},
{
stateHost: "[vertical]",
stateKey: "vertical",
styles: {
"padding-left": "16px"
}
}
]
},
{
part: "source-buttons",
states: [
{
stateKey: "base",
styles: {
"padding-top": "16px",
"padding-left": "16px",
"padding-bottom": "16px"
}
},
{
stateHost: "[vertical]",
stateKey: "vertical",
styles: {
"padding-bottom": "0px"
}
}
]
},
{
part: "target-buttons",
states: [
{
stateKey: "base",
styles: {
"padding-top": "16px",
"padding-bottom": "16px"
}
},
{
stateHost: "[vertical]",
stateKey: "vertical",
styles: {
"padding-left": "16px"
}
}
]
},
{
part: "source-list:filter-field:text-box",
states: [
{
stateKey: "base",
styles: {
"border-style": "none"
}
}
]
},
{
part: "source-list:list-container",
states: [
{
stateKey: "base",
styles: {
"box-shadow": "none"
}
}
]
},
{
part: "target-list:list-container",
states: [
{
stateKey: "base",
styles: {
"box-shadow": "none"
}
}
]
},
{
part: "move-buttons",
states: [
{
stateKey: "base",
styles: {
"max-width": "100%",
overflow: "hidden",
"margin-right": "16px"
}
},
{
stateHost: "[vertical]",
stateKey: "vertical",
styles: {
"margin-left": "0px"
}
},
{
stateHost: "[collapsed-btns]:not([vertical])",
stateKey: "collapsed-btns+horizontal",
styles: {
"margin-left": "12px"
}
}
]
},
{
part: "target-list:link",
states: [
{
stateKey: "base",
styles: {
padding: "0px 6px"
}
}
]
},
{
part: "source-list:link",
states: [
{
stateKey: "base",
styles: {
padding: "0px 6px"
}
}
]
},
{
part: "source-list:filter-field:icon",
states: [
{
stateKey: "base",
styles: {
width: "28px",
height: "28px",
"margin-left": "4px"
}
}
]
},
{
part: "source-list:filter",
states: [
{
stateKey: "base",
styles: {
"border-bottom": "${list-container-border-style} ${list-container-borderthickness} ${list-container-bordercolor}"
}
}
]
},
{
part: "source-list:filter-field",
states: [
{
stateKey: "base",
styles: {
margin: "0px"
}
}
]
}
]
}
],
"ptcs-list": [
{
variant: "",
parts: [
{
part: "list-item",
states: [
{
stateKey: "base",
state: "",
styles: {
background: "${e-list-row-backgroundcolor}",
"--background-color-alt": "${list-item-container-backgroundcolor-alt}",
padding: "0px 8px",
"--ptcs-list-list-item-border-color": "${list-item-container-bordercolor}",
"--ptcs-list-list-item-border-thickness": "${list-item-container-borderthickness}",
"--ptcs-list-list-item-border-style": "${list-item-container-border-style}"
}
},
{
stateKey: "enabled+hover",
state: ":not([disabled]):hover",
styles: {
background: "${e-list-row-backgroundcolor-hover}",
"--background-color-alt": "${e-list-row-backgroundcolor-hover}",
"--ptcs-list-list-item-border-thickness": "${list-item-container-borderthickness-hover}",
"--ptcs-list-list-item-border-style": "${list-item-container-border-style-hover}",
"--ptcs-list-list-item-border-color": "${list-item-container-bordercolor-hover}"
}
},
{
stateKey: "enabled+pressed",
state: ":not([disabled]):hover:active",
styles: {
background: "${list-item-container-backgroundcolor-selected}",
"--background-color-alt": "${list-item-container-backgroundcolor-alt-selected}",
"--ptcs-list-list-item-border-thickness": "${list-item-container-borderthickness-selected}",
"--ptcs-list-list-item-border-style": "${list-item-container-border-style-selected}",
"--ptcs-list-list-item-border-color": "${list-item-container-bordercolor-selected}"
}
},
{
stateKey: "enabled+selected",
state: ":not([disabled])[selected]",
styles: {
"--background-color-alt": "${list-item-container-backgroundcolor-alt-selected}",
background: "${list-item-container-backgroundcolor-selected}",
"--ptcs-list-list-item-border-thickness": "${list-item-container-borderthickness-selected}",
"--ptcs-list-list-item-border-style": "${list-item-container-border-style-selected}",
"--ptcs-list-list-item-border-color": "${list-item-container-bordercolor-selected}"
}
},
{
stateKey: "disabled+selected",
state: "[disabled][selected]",
styles: {
background: "${global-color-bg-disabled-selected}",
"--background-color-alt": "${global-color-bg-disabled-selected}",
"border-color": "${list-item-container-bordercolor-disabled}",
"border-width": "${list-item-container-borderthickness-disabled}",
"border-style": "${list-item-container-border-style-disabled}"
}
},
{
stateKey: "enabled+alternating",
state: ":not([disabled]):not([selected]):not(:hover):nth-child(even)",
styles: {
background: "${if(list-item-container-usealternating, list-item-container-backgroundcolor-alt)}"
}
},
{
state: "[disabled]",
stateKey: "disabled",
styles: {
background: "${list-item-container-backgroundcolor-disabled}",
"--ptcs-list-list-item-border-thickness": "${list-item-borderthickness-disabled}",
"--ptcs-list-list-item-border-style": "${list-item-border-style-disabled}",
"--ptcs-list-list-item-border-color": "${list-item-bordercolor-disabled}"
}
}
]
},
{
part: "item-value",
states: [
{
stateKey: "base",
state: "",
styles: {
color: "${e-list-text-text-fontcolor}",
"font-family": "${list-item-value-fontfamily}",
"font-weight": "${list-item-value-fontweight}",
"font-style": "${font-style-cond(list-item-value-fontstyle)}",
"text-decoration": "${text-decoration-cond(list-item-value-fontstyle)}",
"font-size": "${list-item-value-fontsize}",
"line-height": "normal",
"letter-spacing": "normal",
"text-align": "inherit"
}
},
{
stateKey: "enabled+hover",
state: ":not([disabled]):hover",
styles: {
color: "${e-list-text-text-fontcolor-hover}",
"font-family": "${e-list-text-text-fontfamily-hover}",
"font-weight": "${e-list-text-text-fontweight-hover}",
"font-style": "${font-style-cond(list-item-value-fontstyle-hover)}",
"text-decoration": "${text-decoration-cond(list-item-value-fontstyle-hover)}",
"font-size": "${e-list-text-text-fontsize-hover}"
}
},
{
stateKey: "enabled+pressed",
state: ":not([disabled]):hover:active",
styles: {
color: "${list-item-value-text-color-selected}",
"font-family": "${list-item-value-fontfamily-selected}",
"font-weight": "${list-item-value-fontweight-selected}",
"font-style": "${font-style-cond(list-item-value-fontstyle-selected)}",
"text-decoration": "${text-decoration-cond(list-item-value-fontstyle-selected)}",
"font-size": "${list-item-value-fontsize-selected}"
}
},
{
stateKey: "enabled+selected",
statePath: "[part~=list-item][selected]",
state: ":not([disabled])",
styles: {
color: "${list-item-value-text-color-selected}",
"font-family": "${list-item-value-fontfamily-selected}",
"font-style": "${font-style-cond(list-item-value-fontstyle-selected)}",
"text-decoration": "${text-decoration-cond(list-item-value-fontstyle-selected)}",
"font-size": "${list-item-value-fontsize-selected}",
"font-weight": "${list-item-value-fontweight-selected}"
}
},
{
stateKey: "disabled",
state: "[disabled]",
styles: {
color: "${list-item-value-text-color-disabled}",
"font-family": "${list-item-value-fontfamily-disabled}",
"font-weight": "${list-item-value-fontweight-disabled}",
"font-style": "${font-style-cond(list-item-value-fontstyle-disabled)}",
"text-decoration": "${text-decoration-cond(list-item-value-fontstyle-disabled)}",
"font-size": "${list-item-value-fontsize-disabled}"
}
},
{
stateKey: "disabled+selected",
statePath: "[part~=list-item][selected]",
state: "[disabled]",
styles: {
color: "${list-item-value-text-color-disabled}",
"font-family": "${list-item-value-fontfamily-disabled}",
"font-weight": "${list-item-value-fontweight-disabled}",
"font-style": "${font-style-cond(list-item-value-fontstyle-disabledselected)}",
"text-decoration": "${text-decoration-cond(list-item-value-fontstyle-disabledselected)}",
"font-size": "${list-item-value-fontsize-disabled}"
}
}
]
},
{
part: "item-meta",
states: [
{
stateKey: "base",
state: "",
styles: {
color: "${e-list-text-text-fontcolor}",
"font-family": "${list-item-metadata-fontfamily}",
"font-weight": "${list-item-metadata-fontweight}",
"font-style": "${font-style-cond(list-item-metadata-fontstyle)}",
"text-decoration": "${text-decoration-cond(list-item-metadata-fontstyle)}",
"font-size": "${list-item-metadata-fontsize}",
"line-height": "normal",
"letter-spacing": "normal",
"text-align": "inherit"
}
},
{
stateKey: "enabled+hover",
state: ":not([disabled]):hover",
styles: {
color: "${e-list-text-text-fontcolor-hover}",
"font-family": "${e-list-text-text-fontfamily-hover}",
"font-weight": "${e-list-text-text-fontweight-hover}",
"font-style": "${font-style-cond(list-item-metadata-fontstyle-hover)}",
"text-decoration": "${text-decoration-cond(list-item-metadata-fontstyle-hover)}",
"font-size": "${e-list-text-text-fontsize-hover}"
}
},
{
stateKey: "enabled+pressed",
state: ":not([disabled]):hover:active",
styles: {
color: "${list-item-metadata-text-color-selected}",
"font-family": "${list-item-metadata-fontfamily-selected}",
"font-weight": "${list-item-metadata-fontweight-selected}",
"font-style": "${font-style-cond(list-item-metadata-fontstyle-selected)}",
"text-decoration": "${text-decoration-cond(list-item-metadata-fontstyle-selected)}",
"font-size": "${list-item-metadata-fontsize-selected}"
}
},
{
stateKey: "enabled+selected",
statePath: "[part~=list-item][selected]",
state: ":not([disabled])",
styles: {
color: "${list-item-metadata-text-color-selected}",
"font-family": "${list-item-metadata-fontfamily-selected}",
"font-weight": "${list-item-metadata-fontweight-selected}",
"font-style": "${font-style-cond(list-item-metadata-fontstyle-selected)}",
"text-decoration": "${text-decoration-cond(list-item-metadata-fontstyle-selected)}",
"font-size": "${list-item-metadata-fontsize-selected}"
}
},
{
stateKey: "disabled",
state: "[disabled]",
styles: {
color: "${list-item-metadata-text-color-disabled}",
"font-family": "${list-item-metadata-fontfamily-disabled}",
"font-weight": "${list-item-metadata-fontweight-disabled}",
"font-style": "${font-style-cond(list-item-metadata-fontstyle-disabled)}",
"text-decoration": "${text-decoration-cond(list-item-metadata-fontstyle-disabled)}",
"font-size": "${list-item-metadata-fontsize-disabled}"
}
},
{
stateKey: "disabled+selected",
statePath: "[part~=list-item][selected]",
state: "[disabled]",
styles: {
color: "${list-item-metadata-text-color-disabled}",
"font-family": "${list-item-metadata-fontfamily-disabled}",
"font-weight": "${list-item-metadata-fontweight-disabled}",
"font-style": "${font-style-cond(list-item-metadata-fontstyle-disabledselected)}",
"text-decoration": "${text-decoration-cond(list-item-metadata-fontstyle-disabledselected)}",
"font-size": "${list-item-metadata-fontsize-disabled}"
}
}
]
},
{
part: "",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
width: "",
height: ""
}
},
{
stateHost: ":focus",
stateKey: "focus",
styles: {
outline: "none"
}
}
]
},
{
part: "list-container",
states: [
{
stateKey: "base",
state: "",
styles: {
background: "${e-list-row-backgroundcolor}",
"border-color": "${list-container-bordercolor}",
"border-width": "${list-container-borderthickness}",
"border-style": "${list-container-border-style}",
padding: "",
"box-shadow": "0 1px 4px 0 ${e-list-container-shadowcolor}",
"--ptcs-focus-overlay--padding": "1"
}
},
{
stateKey: "disabled",
state: "",
stateHost: "[disabled]",
styles: {
background: "${list-container-backgroundcolor-disabled}"
}
}
]
},
{
part: "multi-select",
states: [
{
stateKey: "base",
styles: {
"border-bottom": "${list-item-container-bordercolor} ${list-item-container-borderthickness} ${list-item-container-border-style}"
}
}
]
},
{
part: "link",
states: [
{
stateKey: "base",
styles: {
"min-height": "34px",
padding: "0 8px"
}
}
]
},
{
part: "list-items-container",
states: [
{
state: ":focus",
stateKey: "focus",
styles: {
outline: "none"
}
}
]
},
{
part: "filter-field",
states: [
{
stateKey: "base",
styles: {
margin: "0px"
}
}
]
},
{
part: "filter-field:icon",
states: [
{
stateKey: "base",
styles: {
width: "28px",
height: "28px"
}
}
]
}
]
}
],
"ptcs-modal-image-popup": [
{
variant: "",
parts: [
{
part: "disclosure-button",
states: [
{
stateKey: "base",
styles: {
margin: "8px"
}
}
]
}
]
}
],
"ptcs-modal-overlay": [
{
variant: "",
parts: [
{
part: "backdrop",
states: [
{
stateKey: "base",
styles: {
background: "${global-color-shadow}",
opacity: "0.6",
"z-index": "20000"
}
}
]
}
]
}
],
"ptcs-pagination-carousel": [
{
variant: "",
parts: [
{
part: "page-number-button",
states: [
{
stateKey: "base",
styles: {
height: "${pagination-components-height}",
"margin-right": "8px",
"min-width": "34px"
}
}
]
},
{
part: "left-arrow",
states: [
{
stateKey: "base",
styles: {
width: "${pagination-arrow-button-size}",
height: "${pagination-arrow-button-size}",
"margin-right": "8px"
}
}
]
},
{
part: "right-arrow",
states: [
{
stateKey: "base",
styles: {
width: "${pagination-arrow-button-size}",
height: "${pagination-arrow-button-size}",
"margin-right": "8px"
}
}
]
},
{
part: "three-dots",
states: [
{
stateKey: "base",
styles: {
width: "12",
"min-width": "12",
"margin-right": "8px"
}
}
]
},
{
part: "page-number-button:root",
states: [
{
stateHost: "[mode=label]",
stateKey: "label",
styles: {
padding: "0px"
}
}
]
},
{
part: "page-number-button:label",
states: [
{
stateKey: "base",
styles: {
"font-family": "${global-text-label-fontfamily}",
"font-size": "${global-text-label-fontsize}",
"font-weight": "${global-text-label-fontweight}"
}
}
]
}
]
}
],
"ptcs-pagination-input-number": [
{
variant: "",
parts: [
{
part: "error-text",
states: [
{
stateKey: "base",
styles: {
"line-height": "1em",
bottom: "-1.2em",
color: "${pagination-error-message-color}",
"font-family": "${global-text-body-fontfamily}",
"font-size": "${pagination-error-message-textsize}",
"font-weight": "${global-text-label-fontweight}",
right: "0px"
}
}
]
},
{
part: "pagination-input",
states: [
{
stateKey: "base",
styles: {
width: "58px",
height: "${pagination-components-height}"
}
}
]
}
]
}
],
"ptcs-pagination": [
{
variant: "",
parts: [
{
part: "",
states: [
{
stateKey: "base",
styles: {
padding: "16px 16px 0px 16px"
}
},
{
stateHost: ":not([disabled])[size='minimum']",
stateKey: "small-version",
styles: {
"min-width": "235px"
}
}
]
},
{
part: "input-number",
states: [
{
stateKey: "base",
styles: {
height: "${pagination-components-height}",
"margin-left": "10px"
}
}
]
},
{
part: "string-show-label",
states: [
{
stateKey: "base",
styles: {
"margin-right": "8px"
}
}
]
},
{
part: "page-break-and-total-results-container",
states: [
{
stateKey: "base",
styles: {
"margin-bottom": "16px"
}
},
{
stateHost: ":not([disabled])[size='maximum']",
stateKey: "maximum-version",
styles: {
"margin-right": "40px"
}
},
{
stateHost: ":not([disabled])[size='medium']",
stateKey: "medium-version",
styles: {
"margin-bottom": "16px"
}
},
{
stateHost: ":not([disabled])[size='minimum']",
stateKey: "small-version",
styles: {
"margin-bottom": "16px"
}
}
]
},
{
part: "carousel",
states: [
{
stateKey: "base",
styles: {
"margin-bottom": "16px",
padding: "0px 6px"
}
},
{
stateHost: ":not([disabled])[size='maximum']",
stateKey: "maximum-version",
styles: {
"min-width": "306px",
padding: "0px"
}
},
{
stateHost: ":not([disabled])[size='minimum']",
stateKey: "small-version",
styles: {
"margin-bottom": "16px",
padding: "0px"
}
},
{
stateHost: ":not([disabled])[size='medium']",
stateKey: "medium-version",
styles: {
padding: "0px"
}
}
]
},
{
part: "direct-link",
states: [
{
stateKey: "base",
styles: {
"margin-bottom": "16px"
}
},
{
stateHost: ":not([disabled])[size='maximum']",
stateKey: "maximum-version",
styles: {
"margin-left": "40px"
}
},
{
stateHost: ":not([disabled])[size='medium']",
stateKey: "medium-version",
styles: {
" margin-left": "48px"
}
}
]
},
{
part: "total-results",
states: [
{
stateKey: "base",
styles: {
"margin-left": "8px"
}
}
]
}
]
}
],
"ptcs-property-display": [
{
variant: "",
parts: [
{
part: "property-group",
states: [
{
stateKey: "base",
styles: {
background: "${propertydisplay-groupcontainer-backgroundcolor}",
"border-color": "${propertydisplay-groupcontainer-bordercolor}",
"border-width": "${propertydisplay-groupcontainer-borderthickness}",
"border-style": "${propertydisplay-groupcontainer-border-style}"
}
}
]
},
{
part: "",
states: [
{
stateKey: "base",
styles: {
outline: "none",
"--ptcs-focus-overlay--padding": "0px"
}
}
]
},
{
part: "property-display-label",
states: [
{
stateKey: "base",
styles: {
padding: "8px"
}
}
]
},
{
part: "property-group-label",
states: [
{
stateKey: "base",
styles: {
padding: "8px"
}
}
]
},
{
part: "value-display-item:value-display-label",
states: [
{
stateKey: "base",
styles: {
"font-size": "${global-text-label-fontsize}",
"font-weight": "${global-text-label-fontweight}",
"font-style": "${global-text-label-fontstyle}",
"font-family": "${global-text-label-fontfamily}",
color: "${global-color-text-label}"
}
}
]
}
]
}
],
"ptcs-radio": [
{
variant: "",
parts: [
{
part: "interior-button",
states: [
{
stateKey: "unselected",
state: "",
stateHost: ":not([checked])",
styles: {
fill: "rgba(0,0,0,0)"
}
},
{
stateKey: "hover",
state: "",
stateHost: ":not([disabled]):hover",
styles: {
fill: "rgba(0,0,0,0)"
}
},
{
stateKey: "hover+selected",
state: "",
stateHost: ":not([disabled])[checked]:hover",
styles: {
fill: "${pressed(radiobutton-bordercolor-selected)}"
}
},
{
stateKey: "pressed",
state: "",
stateHost: ":not([disabled]):hover:active",
styles: {
fill: "rgba(0,0,0,0)"
}
},
{
stateKey: "pressed+selected",
state: "",
stateHost: ":not([disabled])[checked]:hover:active",
styles: {
fill: "${radiobutton-fillcolor-pressedselected}"
}
},
{
stateKey: "selected",
state: "",
stateHost: "[checked]",
styles: {
fill: "${radiobutton-fillcolor-selected}"
}
},
{
stateKey: "disabled",
state: "",
stateHost: "[disabled]",
styles: {
fill: "rgba(0,0,0,0)"
}
},
{
stateKey: "disabled+selected",
state: "",
stateHost: "[disabled][checked]",
styles: {
fill: "${radiobutton-fillcolor-disabledselected}"
}
},
{
stateHost: ":not([disabled]):not([checked]):hover",
stateKey: "hover+unselected",
styles: {
fill: "${pressed(radiobutton-bordercolor-selected)}"
}
}
]
},
{
part: "exterior-ring",
states: [
{
stateKey: "unselected",
state: "",
stateHost: ":not([checked])",
styles: {
"border-radius": "0px",
fill: "${radiobutton-backgroundcolor}",
stroke: "${radiobutton-bordercolor}",
"stroke-width": "${stroke-width(radiobutton-borderthickness)}"
}
},
{
stateKey: "hover+unselected",
state: "",
stateHost: ":not([disabled]):not([checked]):hover",
styles: {
stroke: "${pressed(radiobutton-bordercolor-selected)}"
}
},
{
stateKey: "hover+selected",
state: "",
stateHost: ":not([disabled])[checked]:hover",
styles: {
stroke: "${pressed(radiobutton-bordercolor-selected)}"
}
},
{
stateKey: "pressed+unselected",
state: "",
stateHost: ":not([disabled]):not([checked]):hover:active",
styles: {
stroke: "${pressed(radiobutton-bordercolor-selected)}",
"stroke-width": "${stroke-width(radiobutton-borderthickness)}"
}
},
{
stateKey: "pressed+selected",
state: "",
stateHost: ":not([disabled])[checked]:hover:active",
styles: {
fill: "${if(e-radiobutton-fillcolorcompletely-selected,radiobutton-fillcolor-pressedselected,radiobutton-backgroundcolor-selected)}",
stroke: "${pressed(radiobutton-bordercolor-selected)}",
"stroke-width": "${stroke-width(radiobutton-borderthickness-selected)}"
}
},
{
stateKey: "selected",
state: "",
stateHost: "[checked]",
styles: {
fill: "${radiobutton-backgroundcolor-selected}",
stroke: "${radiobutton-bordercolor-selected}",
"stroke-width": "${stroke-width(radiobutton-borderthickness-selected)}"
}
},
{
stateKey: "disabled",
state: "",
stateHost: "[disabled]",
styles: {
fill: "${global-color-bg-disabled}",
stroke: "${disabled(radiobutton-bordercolor)}",
"stroke-width": "${stroke-width(radiobutton-borderthickness)}"
}
},
{
stateKey: "disabled+selected",
state: "",
stateHost: "[disabled][checked]",
styles: {
fill: "${if(e-radiobutton-fillcolorcompletely-selected,radiobutton-fillcolor-disabledselected,global-color-bg-disabled)}",
stroke: "${disabled(radiobutton-bordercolor-selected)}",
"stroke-width": "${stroke-width(radiobutton-borderthickness-selected)}"
}
}
]
},
{
part: "label",
states: [
{
stateKey: "unselected",
state: "",
stateHost: ":not([checked])",
styles: {
color: "${radiobutton-text-label-color}",
"font-family": "${radiobutton-text-label-fontfamily}",
"font-weight": "${radiobutton-text-label-fontweight}",
"font-style": "${font-style-cond(radiobutton-text-label-fontstyle)}",
"text-decoration": "${text-decoration-cond(radiobutton-text-label-fontstyle)}",
"font-size": "${radiobutton-text-label-fontsize}",
"line-height": "${radiobutton-label-linespacing}",
"letter-spacing": "${radiobutton-label-letterspacing}"
}
},
{
stateKey: "hover",
state: "",
stateHost: ":not([disabled]):hover",
styles: {
color: "${radiobutton-text-label-color}",
"font-family": "${radiobutton-text-label-fontfamily}",
"font-weight": "${radiobutton-text-label-fontweight}",
"font-style": "${font-style-cond(radiobutton-text-label-fontstyle-hover)}",
"text-decoration": "${text-decoration-cond(radiobutton-text-label-fontstyle-hover)}",
"font-size": "${radiobutton-text-label-fontsize}",
"line-height": "${radiobutton-label-linespacing}",
"letter-spacing": "${radiobutton-label-letterspacing}"
}
},
{
stateKey: "hover+selected",
state: "",
stateHost: ":not([disabled])[checked]:hover",
styles: {
color: "${radiobutton-text-label-color-selected}",
"font-family": "${radiobutton-text-label-fontfamily-selected}",
"font-weight": "${radiobutton-text-label-fontweight-selected}",
"font-style": "${font-style-cond(radiobutton-text-label-fontstyle-hoverselected)}",
"text-decoration": "${text-decoration-cond(radiobutton-text-label-fontstyle-hoverselected)}",
"font-size": "${radiobutton-text-label-fontsize-selected}",
"line-height": "${radiobutton-label-linespacing-selected}",
"letter-spacing": "${radiobutton-label-letterspacing-selected}"
}
},
{
stateKey: "pressed",
state: "",
stateHost: ":not([disabled]):hover:active",
styles: {
color: "${radiobutton-text-label-color}",
"font-family": "${radiobutton-text-label-fontfamily}",
"font-weight": "${radiobutton-text-label-fontweight}",
"font-style": "${font-style-cond(radiobutton-text-label-fontstyle-pressed)}",
"text-decoration": "${text-decoration-cond(radiobutton-text-label-fontstyle-pressed)}",
"font-size": "${radiobutton-text-label-fontsize}",
"line-height": "${radiobutton-label-linespacing}",
"letter-spacing": "${radiobutton-label-letterspacing}"
}
},
{
stateKey: "pressed+selected",
state: "",
stateHost: ":not([disabled])[checked]:hover:active",
styles: {
color: "${radiobutton-text-label-color-selected}",
"font-family": "${radiobutton-text-label-fontfamily-selected}",
"font-weight": "${radiobutton-text-label-fontweight-selected}",
"font-style": "${font-style-cond(radiobutton-text-label-fontstyle-pressedselected)}",
"text-decoration": "${text-decoration-cond(radiobutton-text-label-fontstyle-pressedselected)}",
"font-size": "${radiobutton-text-label-fontsize-selected}",
"line-height": "${radiobutton-label-linespacing-selected}",
"letter-spacing": "${radiobutton-label-letterspacing-selected}"
}
},
{
stateKey: "selected",
state: "",
stateHost: "[checked]",
styles: {
color: "${radiobutton-text-label-color-selected}",
"font-family": "${radiobutton-text-label-fontfamily-selected}",
"font-weight": "${radiobutton-text-label-fontweight-selected}",
"font-style": "${font-style-cond(radiobutton-text-label-fontstyle-selected)}",
"text-decoration": "${text-decoration-cond(radiobutton-text-label-fontstyle-selected)}",
"font-size": "${radiobutton-text-label-fontsize-selected}",
"line-height": "${radiobutton-label-linespacing-selected}",
"letter-spacing": "${radiobutton-label-letterspacing-selected}"
}
},
{
stateKey: "disabled+unselected",
state: "",
stateHost: "[disabled]:not([checked])",
styles: {
color: "${disabled(radiobutton-text-label-color)}",
"font-family": "${radiobutton-text-label-fontfamily}",
"font-weight": "${radiobutton-text-label-fontweight}",
"font-style": "${font-style-cond(radiobutton-text-label-fontstyle-disabled)}",
"text-decoration": "${text-decoration-cond(radiobutton-text-label-fontstyle-disabled)}",
"font-size": "${radiobutton-text-label-fontsize}",
"line-height": "${radiobutton-label-linespacing}",
"letter-spacing": "${radiobutton-label-letterspacing}"
}
},
{
stateKey: "disabled+selected",
state: "",
stateHost: "[disabled][checked]",
styles: {
color: "${disabled(radiobutton-text-label-color-selected)}",
"font-family": "${radiobutton-text-label-fontfamily-selected}",
"font-weight": "${radiobutton-text-label-fontweight-selected}",
"font-style": "${font-style-cond(radiobutton-text-label-fontstyle-disabledselected)}",
"text-decoration": "${text-decoration-cond(radiobutton-text-label-fontstyle-disabledselected)}",
"font-size": "${radiobutton-text-label-fontsize-selected}",
"line-height": "${radiobutton-label-linespacing-selected}",
"letter-spacing": "${radiobutton-label-letterspacing-selected}"
}
}
]
},
{
part: "",
states: [
{
stateHost: ":focus",
stateKey: "focus",
styles: {
outline: "none"
}
},
{
stateKey: "base",
styles: {
"padding-top": "9px",
"padding-bottom": "9px",
margin: "0px",
"padding-left": "8px",
"padding-right": "8px",
"--ptcs-focus-overlay--padding": "0px"
}
}
]
}
]
}
],
"ptcs-slider": [
{
variant: "",
parts: [
{
part: "",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
"border-width": "${global-line-border-thickness}",
"border-color": "${global-color-line-border}",
"border-radius": "0px",
"border-style": "none"
}
}
]
},
{
part: "value",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
"box-shadow": "0px 2px 4px 0px rgba(35, 43, 45, 0.3);",
"min-width": "34px",
"min-height": "34px",
"border-radius": "${slider-textbox-border-radius}",
background: "${slider-container-backgroundcolor}",
color: "${slider-value-color}",
"font-style": "${global-text-label-fontstyle}",
"font-weight": "${global-text-label-fontweight}",
"font-size": "${global-text-label-fontsize}",
padding: "${slider-value-padding}",
"box-sizing": "border-box",
margin: "2px 0.5px ${slider-value-distance} 0.5px",
"z-index": "100002",
"border-color": "${slider-container-bordercolor}",
"border-width": "${slider-textbox-borderthickness}",
"border-style": "solid",
"text-overflow": "ellipsis",
overflow: "hidden",
display: "inline-block",
"text-align": "center"
}
},
{
stateKey: "selected",
state: "[selected]",
stateHost: ":not([disabled])",
styles: {
"border-color": "${slider-container-border-style-clicked}"
}
},
{
state: "[editing]",
stateKey: "editing",
styles: {
background: "#ffffff",
padding: "0px",
"border-color": "${global-color-core-primary}",
"border-width": "1px",
"border-style": "solid"
}
},
{
stateHost: "[reverse-labels]",
stateKey: "reverse-labels",
styles: {
margin: "${slider-value-distance} 0.5px 0.5px 0.5px"
}
},
{
stateHost: "[vertical]",
stateKey: "vertical",
styles: {
margin: "2px ${slider-value-distance} 0.5px 0.5px"
}
},
{
stateHost: "[reverse-labels][vertical]",
stateKey: "reverse-labels+vertical",
styles: {
margin: "2px 0.5px 0.5px ${slider-value-distance}"
}
}
]
},
{
part: "thumb",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
fill: "${global-color-bg-primary}",
"border-radius": "50%",
"z-index": "9",
"--ptcs-focus-overlay--border-style": "none",
stroke: "${slider-range-bordercolor}"
}
},
{
stateKey: "hover",
state: ":hover",
stateHost: ":not([disabled])",
styles: {
"border-color": "${slider-container-border-style-clicked}",
stroke: "${slider-thumbs-bordercolor-clicked}"
}
},
{
stateKey: "selected",
state: "[selected]",
stateHost: ":not([disabled])",
styles: {
"border-width": "${slider-thumbs-borderthickness-clicked}"
}
},
{
stateKey: "circle+selected",
state: "[icon='ptcs-slider-icons:circle'][selected]",
stateHost: ":not([disabled])",
styles: {
"border-color": "${slider-thumbs-bordercolor-clicked}",
"box-shadow": "${slider-thumbhalos-shadow-clicked}"
}
},
{
stateKey: "disabled",
state: "",
stateHost: "[disabled]",
styles: {
stroke: "${disabled(global-color-core-primary)}",
fill: "${global-color-bg-disabled}"
}
},
{
state: ":not([disabled]):focus",
stateKey: "focus",
styles: {
"border-color": "${slider-thumbs-bordercolor-clicked}",
"border-width": "${slider-thumbs-borderthickness-clicked}",
outline: "none",
stroke: "#0094c8",
"stroke-width": "2px"
}
}
]
},
{
part: "thumb1",
states: [
{
stateKey: "pressed",
stateHost: "[dragging-thumb=thumb1]:not([disabled])",
styles: {
"border-width": "${slider-thumbs-borderthickness-clicked}",
"border-color": "${slider-thumbs-bordercolor-clicked}",
"z-index": "8",
stroke: "${slider-thumbs-bordercolor-clicked}"
}
},
{
stateKey: "circle+pressed",
state: "[icon='ptcs-slider-icons:circle']",
stateHost: "[dragging-thumb=thumb1]:not([disabled])",
styles: {
"box-shadow": "${slider-thumbhalos-shadow-clicked}",
background: "${slider-color-halo}"
}
}
]
},
{
part: "thumb2",
states: [
{
stateKey: "pressed",
stateHost: "[dragging-thumb=thumb2]:not([disabled])",
styles: {
"border-width": "${slider-thumbs-borderthickness-clicked}",
"border-color": "${slider-thumbs-bordercolor-clicked}",
"z-index": "8",
stroke: "${slider-thumbs-bordercolor-clicked}"
}
},
{
stateKey: "circle+pressed",
state: "[icon='ptcs-slider-icons:circle']",
stateHost: "[dragging-thumb=thumb2]:not([disabled])",
styles: {
"box-shadow": "${slider-thumbhalos-shadow-clicked}",
background: "${slider-color-halo}"
}
}
]
},
{
part: "track",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
"border-style": "none",
"border-width": "0px",
"border-color": "${global-color-line-border}",
background: "${global-color-line-divider}",
"box-shadow": "0px 0px 0px 0px #000000",
"border-radius": "${slider-track-radius}"
}
}
]
},
{
part: "slider-container",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
"border-style": "${slider-range-border-style}",
"border-width": "${slider-range-borderthickness}",
"border-color": "${slider-range-bordercolor}",
background: "${slider-range-backgroundcolor}",
"box-shadow": "0px 0px 0px 0px #000000"
}
},
{
stateHost: "[vertical]",
stateKey: "vertical",
styles: {
"margin-top": "0px"
}
}
]
},
{
part: "track-between",
states: [
{
stateHost: "[range]",
stateKey: "two-thumbs",
styles: {
background: "${slider-color-track-active}"
}
},
{
stateHost: "[disabled][range]",
stateKey: "disabled+two-thumbs",
styles: {
background: "${slider-color-track-disabled}"
}
}
]
},
{
part: "track-before",
states: [
{
stateHost: ":not([range])",
stateKey: "one-thumb",
styles: {
background: "${slider-color-track-active}"
}
},
{
stateHost: "[disabled]:not([range])",
stateKey: "disabled+one-thumb",
styles: {
background: "${slider-color-track-disabled}"
}
}
]
},
{
part: "min-max-label",
states: [
{
stateKey: "base",
styles: {
color: "#6e717c",
"font-size": "12px",
"font-weight": "600",
"font-style": "normal"
}
}
]
},
{
part: "value-arrow",
states: [
{
stateKey: "base",
styles: {
color: "${slider-container-bordercolor}"
}
},
{
state: "[editing]",
stateKey: "editing",
styles: {
color: "${global-color-core-primary}"
}
}
]
}
]
}
],
"ptcs-tab-set": [
{
variant: "",
parts: [
{
part: "tabs-tab-label",
states: [
{
stateKey: "base",
state: "",
styles: {
color: "${tabset-tab-label-color}",
"font-family": "${tabset-tab-label-fontfamily}",
"font-weight": "${tabset-tab-label-fontweight}",
"font-style": "${font-style-cond(tabset-tab-label-fontstyle)}",
"text-decoration": "${text-decoration-cond(tabset-tab-label-fontstyle)}",
"font-size": "${tabset-tab-label-fontsize}"
}
},
{
stateKey: "hover",
state: ":not([disabled]):hover",
styles: {
color: "${tabset-tab-label-color-hover}",
"font-family": "${tabset-tab-label-fontfamily}",
"font-weight": "${tabset-tab-label-fontweight}",
"font-style": "${font-style-cond(tabset-tab-label-fontstyle-hover)}",
"text-decoration": "${text-decoration-cond(tabset-tab-label-fontstyle-hover)}",
"font-size": "${tabset-tab-label-fontsize}"
}
},
{
stateKey: "pressed",
state: ":not([disabled]):hover:active",
styles: {
color: "${tabset-tab-label-color-pressed}",
"font-family": "${tabset-tab-label-fontfamily}",
"font-weight": "${tabset-tab-label-fontweight}",
"font-style": "${font-style-cond(tabset-tab-label-fontstyle-pressed)}",
"text-decoration": "${text-decoration-cond(tabset-tab-label-fontstyle-pressed)}",
"font-size": "${tabset-tab-label-fontsize}"
}
},
{
stateKey: "selected",
state: "[selected]:not([disabled])",
styles: {
color: "${tabset-tab-label-color-pressed}",
"font-family": "${tabset-tab-label-fontfamily}",
"font-weight": "${tabset-tab-label-fontweight}",
"font-style": "${font-style-cond(tabset-tab-label-fontstyle-selected)}",
"text-decoration": "${text-decoration-cond(tabset-tab-label-fontstyle-selected)}",
"font-size": "${tabset-tab-label-fontsize}"
}
},
{
stateKey: "disabled",
state: "[disabled]",
styles: {
color: "${tabset-tab-label-color-disabled}",
"font-family": "${tabset-tab-label-fontfamily}",
"font-weight": "${tabset-tab-label-fontweight}",
"font-style": "${font-style-cond(tabset-tab-label-fontstyle-disabled)}",
"text-decoration": "${text-decoration-cond(tabset-tab-label-fontstyle-disabled)}",
"font-size": "${tabset-tab-label-fontsize}"
}
}
]
},
{
part: "tabs-tab",
states: [
{
stateKey: "base",
state: "",
styles: {
width: "auto",
height: "34px",
background: "${tabset-tab-backgroundcolor}",
"border-radius": "${tabset-tab-radius}",
"border-bottom-color": "${tabset-tab-indicator-color}",
padding: "${tabset-tab-padding}"
}
},
{
stateKey: "hover",
state: ":not([disabled]):hover",
styles: {
background: "${tabset-tab-backgroundcolor}",
"border-radius": "${tabset-tab-radius}",
"border-bottom-color": "${tabset-tab-indicator-color}",
padding: "${tabset-tab-padding}"
}
},
{
stateKey: "pressed",
state: ":not([disabled]):hover:active",
styles: {
background: "${tabset-tab-backgroundcolor}",
"border-radius": "${tabset-tab-radius}",
"border-bottom-color": "${tabset-tab-indicator-color}",
padding: "${tabset-tab-padding}"
}
},
{
stateKey: "selected",
state: "[selected]:not([disabled])",
styles: {
background: "${tabset-tab-backgroundcolor}",
"border-radius": "${tabset-tab-radius}",
"border-bottom-color": "${global-color-core-primary}",
padding: "${tabset-tab-padding}"
}
},
{
stateKey: "disabled",
state: "[disabled]",
styles: {
background: "${tabset-tab-backgroundcolor}",
"border-radius": "${tabset-tab-radius}",
"border-bottom-color": "${tabset-tab-indicator-color}",
padding: "${tabset-tab-padding}"
}
}
]
},
{
part: "pages",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
width: "",
background: "${global-color-bg-primary}",
"border-style": "none",
"border-width": "0px",
"border-color": "${global-color-line-border}"
}
}
]
},
{
part: "divider",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
height: "${tabset-divider-line-height}",
padding: "0px 0px 0px 0px",
position: "relative",
top: "-${tabset-divider-line-height}",
background: "${divider-line-color}"
}
}
]
},
{
part: "",
states: [
{
stateHost: "[disabled]",
stateKey: "disabled",
styles: {
opacity: "0.5"
}
}
]
}
]
}
],
"ptcs-tabs": [
{
variant: "",
parts: [
{
part: "tabs",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
background: "${tabset-tab-backgroundcolor}"
}
}
]
},
{
part: "",
states: [
{
stateKey: "base",
styles: {
"--ptcs-focus-overlay--padding": "2px",
"--ptcs-focus-overlay--padding-top": "0px",
"--ptcs-focus-overlay--padding-left": "3px",
"--ptcs-focus-overlay--padding-right": "3px"
}
}
]
}
]
}
],
"ptcs-textarea": [
{
variant: "",
parts: [
{
part: "label",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
color: "${e-textfield-text-label-color}",
"font-family": "${e-textfield-text-label-fontfamily}",
"font-weight": "${e-textfield-text-label-fontweight}",
"font-size": "${e-textfield-text-label-fontsize}",
"font-style": "${font-style-cond(textarea-text-label-fontstyle)}",
"text-decoration": "${text-decoration-cond(textarea-text-label-fontstyle)}"
}
}
]
},
{
part: "hint-text",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
color: "${textarea-hinttext-color}",
"font-family": "${textarea-hinttext-fontfamily}",
"font-weight": "${textarea-hinttext-fontweight}",
"font-style": "${font-style-cond(textarea-hinttext-fontstyle)}",
"text-decoration": "${text-decoration-cond(textarea-hinttext-fontstyle)}",
"font-size": "${textarea-hinttext-fontsize}",
"line-height": "${textarea-hinttext-linespacing}",
"letter-spacing": "${textarea-hinttext-letterspacing}",
"min-height": "34px",
padding: "8px"
}
},
{
stateKey: "hover",
state: "",
stateHost: ":not([disabled]):hover",
styles: {
color: "${textarea-hinttext-color}",
"font-family": "${textarea-hinttext-fontfamily}",
"font-weight": "${textarea-hinttext-fontweight}",
"font-style": "${font-style-cond(textarea-hinttext-fontstyle-hover)}",
"text-decoration": "${text-decoration-cond(textarea-hinttext-fontstyle-hover)}",
"font-size": "${textarea-hinttext-fontsize}",
"line-height": "${textarea-hinttext-linespacing}",
"letter-spacing": "${textarea-hinttext-letterspacing}"
}
},
{
stateKey: "pressed",
state: "",
stateHost: ":not([disabled]):hover:active",
styles: {
color: "${textarea-hinttext-color}",
"font-family": "${textarea-hinttext-fontfamily}",
"font-weight": "${textarea-hinttext-fontweight}",
"font-style": "${font-style-cond(textarea-hinttext-fontstyle-pressed)}",
"text-decoration": "${text-decoration-cond(textarea-hinttext-fontstyle-pressed)}",
"font-size": "${textarea-hinttext-fontsize}",
"line-height": "${textarea-hinttext-linespacing}",
"letter-spacing": "${textarea-hinttext-letterspacing}"
}
},
{
stateKey: "disabled",
state: "",
stateHost: "[disabled]",
styles: {
color: "${textarea-hinttext-color}",
"font-family": "${textarea-hinttext-fontfamily}",
"font-weight": "${textarea-hinttext-fontweight}",
"font-style": "${font-style-cond(textarea-hinttext-fontstyle-disabled)}",
"text-decoration": "${text-decoration-cond(textarea-hinttext-fontstyle-disabled)}",
"font-size": "${textarea-hinttext-fontsize}",
"line-height": "${textarea-hinttext-linespacing}",
"letter-spacing": "${textarea-hinttext-letterspacing}"
}
}
]
},
{
part: "text-box",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
width: "",
height: "102px",
background: "${textarea-field-backgroundcolor}",
"border-color": "${textarea-field-bordercolor}",
"border-width": "${textarea-field-borderthickness}",
"border-style": "solid",
"border-radius": "${e-textfield-border-radius}",
padding: "",
"min-height": "34px",
"min-width": "34px"
}
},
{
stateKey: "hover",
state: "",
stateHost: ":not([disabled]):hover",
styles: {
background: "${textarea-field-backgroundcolor}",
"border-color": "${hover(textarea-field-bordercolor)}",
"border-width": "${textarea-field-borderthickness}"
}
},
{
stateKey: "pressed",
state: "",
stateHost: ":not([disabled]):hover:active",
styles: {
background: "${textarea-field-backgroundcolor}",
"border-color": "${pressed(textarea-field-bordercolor)}",
"border-width": "${textarea-field-borderthickness}"
}
},
{
stateKey: "disabled",
state: "",
stateHost: "[disabled]",
styles: {
background: "${global-color-bg-disabled}",
"border-color": "${textarea-field-bordercolor}",
"border-width": "${textarea-field-borderthickness}"
}
}
]
},
{
part: "counter",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
color: "${textarea-controltext-color}",
"font-family": "${textarea-controltext-fontfamily}",
"font-weight": "${textarea-controltext-fontweight}",
"font-style": "${font-style-cond(textarea-controltext-fontstyle)}",
"text-decoration": "${text-decoration-cond(textarea-controltext-fontstyle)}",
"font-size": "${textarea-controltext-fontsize}",
"line-height": "normal",
"letter-spacing": "normal"
}
},
{
stateKey: "hover",
state: "",
stateHost: ":not([disabled]):hover",
styles: {
color: "${textarea-controltext-color}",
"font-family": "${textarea-controltext-fontfamily}",
"font-weight": "${textarea-controltext-fontweight}",
"font-style": "${font-style-cond(textarea-controltext-fontstyle-hover)}",
"text-decoration": "${text-decoration-cond(textarea-controltext-fontstyle-hover)}",
"font-size": "${textarea-controltext-fontsize}"
}
},
{
stateKey: "pressed",
state: "",
stateHost: ":not([disabled]):hover:active",
styles: {
color: "${textarea-controltext-color}",
"font-family": "${textarea-controltext-fontfamily}",
"font-weight": "${textarea-controltext-fontweight}",
"font-style": "${font-style-cond(textarea-controltext-fontstyle-pressed)}",
"text-decoration": "${text-decoration-cond(textarea-controltext-fontstyle-pressed)}",
"font-size": "${textarea-controltext-fontsize}"
}
},
{
stateKey: "disabled",
state: "",
stateHost: "[disabled]",
styles: {
color: "${textarea-controltext-color}",
"font-family": "${textarea-controltext-fontfamily}",
"font-weight": "${textarea-controltext-fontweight}",
"font-style": "${font-style-cond(textarea-controltext-fontstyle-disabled)}",
"text-decoration": "${text-decoration-cond(textarea-controltext-fontstyle-disabled)}",
"font-size": "${textarea-controltext-fontsize}"
}
}
]
},
{
part: "text-value",
states: [
{
stateKey: "base",
styles: {
"font-family": "${textarea-field-fontfamily}",
"font-size": "${textarea-field-fontsize}",
"font-weight": "${textarea-field-fontweight}",
"font-style": "${font-style-cond(textarea-field-fontstyle)}",
color: "${textarea-field-text-color}",
"line-height": "normal",
"text-decoration": "${text-decoration-cond(textarea-field-fontstyle)}",
"letter-spacing": "normal",
"text-align": "inherit"
}
},
{
stateHost: "[disabled]",
stateKey: "disabled",
styles: {
color: "${global-color-text-body-disabled}",
"font-family": "${textarea-field-fontfamily}",
"font-size": "${textarea-field-fontsize}",
"font-weight": "${textarea-field-fontweight}",
"font-style": "${font-style-cond(textarea-field-fontstyle-disabled)}",
"text-decoration": "${text-decoration-cond(textarea-field-fontstyle-disabled)}"
}
},
{
stateHost: ":not([disabled]):hover",
stateKey: "hover",
styles: {
color: "${textarea-field-text-color}",
"font-family": "${textarea-field-fontfamily}",
"font-size": "${textarea-field-fontsize}",
"font-weight": "${textarea-field-fontweight}",
"font-style": "${font-style-cond(textarea-field-fontstyle-hover)}",
"text-decoration": "${text-decoration-cond(textarea-field-fontstyle-hover)}"
}
},
{
stateHost: ":not([disabled]):hover:active",
stateKey: "pressed",
styles: {
color: "${textarea-field-text-color}",
"font-family": "${textarea-field-fontfamily}",
"font-size": "${textarea-field-fontsize}",
"font-weight": "${textarea-field-fontweight}",
"font-style": "${font-style-cond(textarea-field-fontstyle-pressed)}",
"text-decoration": "${text-decoration-cond(textarea-field-fontstyle-pressed)}"
}
}
]
},
{
part: "",
states: [
{
stateKey: "base",
styles: {
"--ptcs-focus-overlay--padding": "1px",
"min-width": "34px",
"min-height": "34px"
}
}
]
}
]
}
],
"ptcs-textfield": [
{
variant: "",
parts: [
{
part: "label",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
color: "${e-textfield-text-label-color}",
"font-family": "${e-textfield-text-label-fontfamily}",
"font-weight": "${e-textfield-text-label-fontweight}",
"font-size": "${e-textfield-text-label-fontsize}",
"font-style": "${font-style-cond(textfield-text-label-fontstyle)}",
"text-decoration": "${text-decoration-cond(textfield-text-label-fontstyle)}"
}
},
{
stateKey: "focus",
stateHost: ":focus-within",
styles: {
outline: "none"
}
}
]
},
{
part: "hint-text",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
color: "${textfield-hinttext-color}",
"font-family": "${textfield-hinttext-fontfamily}",
"font-weight": "${textfield-hinttext-fontweight}",
"font-style": "${font-style-cond(textfield-hinttext-fontstyle)}",
"text-decoration": "${text-decoration-cond(textfield-hinttext-fontstyle)}",
"font-size": "${textfield-hinttext-fontsize}",
"line-height": "${textfield-hinttext-linespacing}",
"letter-spacing": "${textfield-hinttext-letterspacing}"
}
},
{
stateKey: "hover",
state: "",
stateHost: ":not([disabled]):hover",
styles: {
color: "${textfield-hinttext-color}",
"font-family": "${textfield-hinttext-fontfamily}",
"font-weight": "${textfield-hinttext-fontweight}",
"font-style": "${font-style-cond(textfield-hinttext-fontstyle-hover)}",
"text-decoration": "${text-decoration-cond(textfield-hinttext-fontstyle-hover)}",
"font-size": "${textfield-hinttext-fontsize}",
"line-height": "${textfield-hinttext-linespacing}",
"letter-spacing": "${textfield-hinttext-letterspacing}"
}
},
{
stateKey: "pressed",
state: "",
stateHost: ":not([disabled]):hover:active",
styles: {
color: "${textfield-hinttext-color}",
"font-family": "${textfield-hinttext-fontfamily}",
"font-weight": "${textfield-hinttext-fontweight}",
"font-style": "${font-style-cond(textfield-hinttext-fontstyle-pressed)}",
"text-decoration": "${text-decoration-cond(textfield-hinttext-fontstyle-pressed)}",
"font-size": "${textfield-hinttext-fontsize}",
"line-height": "${textfield-hinttext-linespacing}",
"letter-spacing": "${textfield-hinttext-letterspacing}"
}
},
{
stateKey: "disabled",
state: "",
stateHost: "[disabled]",
styles: {
color: "${disabled(textfield-hinttext-color)}",
"font-family": "${textfield-hinttext-fontfamily}",
"font-weight": "${textfield-hinttext-fontweight}",
"font-style": "${font-style-cond(textfield-hinttext-fontstyle-disabled)}",
"text-decoration": "${text-decoration-cond(textfield-hinttext-fontstyle-disabled)}",
"font-size": "${textfield-hinttext-fontsize}",
"line-height": "${textfield-hinttext-linespacing}",
"letter-spacing": "${textfield-hinttext-letterspacing}"
}
}
]
},
{
part: "text-box",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
width: "",
height: "",
background: "${textfield-field-backgroundcolor}",
"border-color": "${textfield-field-bordercolor}",
"border-width": "${textfield-field-borderthickness}",
"border-style": "${textfield-field-border-style}",
"border-radius": "${textfield-field-border-radius}",
padding: "0px"
}
},
{
stateKey: "hover",
state: "",
stateHost: ":not([disabled]):hover",
styles: {
background: "${textfield-field-backgroundcolor-hover}",
"border-color": "${textfield-field-bordercolor-hover}",
"border-width": "${textfield-field-borderthickness-hover}"
}
},
{
stateKey: "pressed",
state: "",
stateHost: ":not([disabled]):hover:active",
styles: {
background: "${textfield-field-backgroundcolor-pressed}",
"border-color": "${textfield-field-bordercolor-pressed}",
"border-width": "${textfield-field-borderthickness-pressed}"
}
},
{
stateKey: "disabled",
state: "",
stateHost: "[disabled]",
styles: {
background: "${textfield-field-backgroundcolor-disabled}",
"border-color": "${textfield-field-bordercolor-disabled}",
"border-width": "${textfield-field-borderthickness-disabled}"
}
},
{
stateHost: ":focus-within",
stateKey: "focus",
styles: {
"border-color": "${textfield-field-bordercolor-focus}",
background: "${textfield-field-backgroundcolor-focus}"
}
},
{
stateHost: "[disabled]:focus-within",
stateKey: "disabled+focus",
styles: {
"border-style": "var(--ptcs-focus-overlay-border-style, solid)",
"border-color": "var(--ptcs-focus-overlay-border-color, #0094c8)",
"border-width": "var(--ptcs-focus-overlay-border-width, 2px)"
}
}
]
},
{
part: "counter",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
color: "${textfield-controltext-color}",
"font-family": "${textfield-controltext-fontfamily}",
"font-weight": "${textfield-controltext-fontweight}",
"font-style": "${font-style-cond(textfield-controltext-fontstyle)}",
"text-decoration": "${text-decoration-cond(textfield-controltext-fontstyle)}",
"font-size": "${textfield-controltext-fontsize}",
"line-height": "normal",
"letter-spacing": "normal"
}
},
{
stateKey: "hover",
state: "",
stateHost: ":not([disabled]):hover",
styles: {
color: "${textfield-controltext-color}",
"font-family": "${textfield-controltext-fontfamily}",
"font-weight": "${textfield-controltext-fontweight}",
"font-style": "${font-style-cond(textfield-controltext-fontstyle-hover)}",
"text-decoration": "${text-decoration-cond(textfield-controltext-fontstyle-hover)}",
"font-size": "${textfield-controltext-fontsize}"
}
},
{
stateKey: "pressed",
state: "",
stateHost: ":not([disabled]):hover:active",
styles: {
color: "${textfield-controltext-color}",
"font-family": "${textfield-controltext-fontfamily}",
"font-weight": "${textfield-controltext-fontweight}",
"font-style": "${font-style-cond(textfield-controltext-fontstyle-pressed)}",
"text-decoration": "${text-decoration-cond(textfield-controltext-fontstyle-pressed)}",
"font-size": "${textfield-controltext-fontsize}"
}
},
{
stateKey: "disabled",
state: "",
stateHost: "[disabled]",
styles: {
color: "${textfield-controltext-color}",
"font-family": "${textfield-controltext-fontfamily}",
"font-weight": "${textfield-controltext-fontweight}",
"font-style": "${font-style-cond(textfield-controltext-fontstyle-disabled)}",
"text-decoration": "${text-decoration-cond(textfield-controltext-fontstyle-disabled)}",
"font-size": "${textfield-controltext-fontsize}"
}
}
]
},
{
part: "text-value",
states: [
{
stateKey: "base",
styles: {
"font-family": "${textfield-field-fontfamily}",
"font-size": "${textfield-field-fontsize}",
"font-weight": "${textfield-field-fontweight}",
"font-style": "${font-style-cond(textfield-field-fontstyle)}",
color: "${textfield-field-text-color}",
"text-decoration": "${text-decoration-cond(textfield-field-fontstyle)}",
"text-align": "inherit",
"letter-spacing": "normal"
}
},
{
stateHost: "[disabled]",
stateKey: "disabled",
styles: {
color: "${global-color-text-body-disabled}",
"font-family": "${textfield-field-fontfamily}",
"font-size": "${textfield-field-fontsize}",
"font-weight": "${textfield-field-fontweight}",
"font-style": "${font-style-cond(textfield-field-fontstyle-disabled)}",
"text-decoration": "${text-decoration-cond(textfield-field-fontstyle-disabled)}"
}
},
{
state: ":focus",
stateKey: "focus",
styles: {
color: "${textfield-field-text-color}"
}
},
{
stateHost: ":not([disabled]):hover",
stateKey: "hover",
styles: {
color: "${textfield-field-text-color}",
"font-family": "${textfield-field-fontfamily}",
"font-size": "${textfield-field-fontsize}",
"font-weight": "${textfield-field-fontweight}",
"font-style": "${font-style-cond(textfield-field-fontstyle-hover)}",
"text-decoration": "${text-decoration-cond(textfield-field-fontstyle-hover)}"
}
},
{
stateHost: ":not([disabled]):hover:active",
stateKey: "pressed",
styles: {
color: "${textfield-field-text-color}",
"font-family": "${textfield-field-fontfamily}",
"font-size": "${textfield-field-fontsize}",
"font-weight": "${textfield-field-fontweight}",
"font-style": "${font-style-cond(textfield-field-fontstyle-pressed)}",
"text-decoration": "${text-decoration-cond(textfield-field-fontstyle-pressed)}"
}
}
]
},
{
part: "icon",
states: [
{
stateKey: "base",
styles: {
color: "${global-color-field-icon}"
}
}
]
},
{
part: "",
states: [
{
stateKey: "base",
styles: {
"--ptcs-focus-overlay--padding": "0px",
"min-height": "34px",
"min-width": "34px"
}
},
{
stateHost: ":focus-within",
stateKey: "focus",
styles: {
outline: "none"
}
},
{
stateHost: "[disabled]:focus-within",
stateKey: "disabled+focus",
styles: {
outline: "none"
}
},
{
stateHost: "[disabled]",
stateKey: "disabled",
styles: {
color: "${global-color-text-body-disabled}"
}
}
]
}
]
}
],
"ptcs-toggle-button": [
{
variant: "",
parts: [
{
part: "rectangle",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
width: "29px",
height: "12px",
background: "${toggle-track-backgroundcolor}",
"border-color": "${toggle-track-bordercolor}",
"border-width": "${toggle-track-borderthickness}",
"border-style": "${toggle-track-borderstyle}",
"border-radius": "20px",
padding: "1px"
}
},
{
stateKey: "hover",
state: "",
stateHost: ":not([disabled]):hover",
styles: {
background: "${global-color-core-primary-hover}",
"border-color": "${global-color-core-primary-hover}",
"border-width": "${toggle-track-borderthickness}",
"border-style": "${toggle-track-borderstyle}"
}
},
{
stateKey: "pressed",
state: "",
stateHost: ":not([disabled]):hover:active",
styles: {
background: "${global-color-core-primary-pressed}",
"border-color": "${global-color-core-primary-pressed}",
"border-width": "${toggle-track-borderthickness}",
"border-style": "${toggle-track-borderstyle}"
}
},
{
stateKey: "selected",
stateHost: ":not([disabled])[checked]",
styles: {
background: "${toggle-track-backgroundcolor-selected}",
"border-color": "${toggle-track-bordercolor-selected}",
"border-width": "${toggle-track-borderthickness}",
"border-style": "${toggle-track-borderstyle}"
}
},
{
stateKey: "disabled",
state: "",
stateHost: "[disabled]",
styles: {
background: "${toggle-track-backgroundcolor-disabled}",
"border-color": "${toggle-track-bordercolor-disabled}",
"border-width": "${toggle-track-borderthickness}",
"border-style": "${toggle-track-borderstyle}"
}
}
]
},
{
part: "oval",
states: [
{
stateKey: "base",
state: "",
stateHost: "",
styles: {
width: "10px",
height: "10px",
background: "${toggle-handle-backgroundcolor}",
"border-color": "${toggle-handle-bordercolor}",
"border-width": "${toggle-handle-thickness}",
"border-style": "${toggle-handle-style}",
"border-radius": "20px"
}
},
{
stateKey: "hover",
state: "",
stateHost: ":not([disabled]):hover",
styles: {
background: "${toggle-handle-backgroundcolor}",
"border-color": "${toggle-handle-bordercolor}",
"border-width": "${toggle-handle-thickness}",
"border-style": "${toggle-handle-style}"
}
},
{
stateKey: "pressed",
state: "",
stateHost: ":not([disabled]):hover:active",
styles: {
background: "${toggle-handle-backgroundcolor}",
"border-color": "${toggle-handle-bordercolor}",
"border-width": "${toggle-handle-thickness}",
"border-style": "${toggle-handle-style}"
}
},
{
stateKey: "selected",
state: "",
stateHost: "[checked]",
styles: {
background: "${toggle-handle-backgroundcolor-selected}",
"border-color": "${toggle-handle-bordercolor-selected}",
"border-width": "${toggle-handle-thickness}",
"border-style": "${toggle-handle-style}"
}
},
{
stateKey: "disabled",
state: "",
stateHost: "[disabled]",
styles: {
background: "${toggle-handle-backgroundcolor-disabled}",
"border-color": "${toggle-handle-bordercolor-disabled}",
"border-width": "${toggle-handle-thickness}",
"border-style": "${toggle-handle-style}"
}
}
]
},
{
part: "",
states: [
{
stateHost: ":focus",
stateKey: "focus",
styles: {
outline: "none"
}
},
{
stateKey: "base",
styles: {
"--ptcs-focus-overlay--padding": "0px",
padding: "10px 8px 10px 8px",
"min-height": "34px",
"min-width": "34px"
}
}
]
}
]
}
],
"ptcs-tooltip-overlay": [
{
variant: "",
parts: [
{
part: "tooltip-text",
states: [
{
stateKey: "base",
styles: {
"font-family": "${tooltip-text-fontfamily}",
"font-weight": "${tooltip-text-fontweight}",
"line-height": "${tooltip-text-linespacing}",
"letter-spacing": "${tooltip-text-letterspacing}",
"font-stretch": "${tooltip-text-fontstretch}",
color: "${tooltip-text-color}",
"font-size": "${tooltip-text-fontsize}",
"font-style": "${font-style-cond(tooltip-text-fontstyle)}",
"text-decoration": "${text-decoration-cond(tooltip-text-fontstyle)}"
}
},
{
stateHost: "[_icon]",
stateKey: "icon",
styles: {
padding: "8px 8px 8px 0px"
}
},
{
stateHost: ":not([_icon])",
stateKey: "no-icon",
styles: {
padding: "8px"
}
}
]
},
{
part: "tooltip-icon",
states: [
{
stateKey: "base",
styles: {
fill: "${tooltip-text-color}"
}
}
]
},
{
part: "",
states: [
{
stateKey: "base",
styles: {
"max-width": "${tooltip-maxwidth}"
}
}
]
},
{
part: "pointer",
states: [
{
stateKey: "base",
styles: {
height: "8px",
width: "14px",
"--ptcs-tooltip-pointer-edge-offset": "8px",
"--ptcs-tooltip-pointer-shift": "-7px",
"stroke-width": "1",
stroke: "${tooltip-bordercolor}",
fill: "${tooltip-backgroundcolor}"
}
}
]
},
{
part: "tooltip",
states: [
{
stateKey: "base",
styles: {
background: "${tooltip-backgroundcolor}",
"border-color": "${tooltip-bordercolor}",
color: "${tooltip-text-color}",
"box-shadow": "${tooltip-box-shadow}",
"border-width": "${tooltip-borderwidth}",
"border-style": "${tooltip-borderstyle}",
"border-radius": "${tooltip-borderradius}"
}
}
]
},
{
part: "truncation-overflow",
states: [
{
stateKey: "base",
styles: {
"margin-bottom": "${tooltip-truncation-overflow-marginbottom}"
}
}
]
},
{
part: "title",
states: [
{
stateKey: "base",
styles: {
"font-size": "larger",
"padding-bottom": "0.3em",
"margin-bottom": "0.5em",
"border-bottom": "solid 1px ${global-color-core-secondary1}",
"font-weight": "bold"
}
}
]
}
]
}
],
"ptcs-value-display": [
{
variant: "",
parts: [
{
part: "",
states: [
{
stateKey: "base",
styles: {
background: "${global-color-bg-primary}",
"border-color": "${global-color-line-border}",
"border-width": "${global-line-border-thickness}",
"border-style": "none",
outline: "none",
"--ptcs-focus-overlay--padding": "0px",
"--valuedisplay-modal-shadowcolor": "${global-color-shadow}",
"--value-display-vdcontainer-background-color": "${global-color-bg-primary}"
}
}
]
},
{
part: "disclosure-button-overlay",
states: [
{
stateKey: "base",
styles: {
background: "${global-color-bg-primary}",
"box-shadow": "0px -8px 16px ${global-color-bg-primary}"
}
}
]
},
{
part: "show-button",
states: [
{
stateKey: "base",
styles: {
color: "${e-link-primary-color}",
background: "${global-color-bg-primary}",
"box-shadow": "0px -8px 16px  ${global-color-bg-primary}",
"font-family": "${e-link-primary-fontfamily}",
"font-weight": "${e-link-primary-fontweight}",
"font-style": "${font-style-cond(label-header-show-fontstyle)}",
"font-size": "${e-link-primary-fontsize}"
}
},
{
stateHost: "[disabled]",
stateKey: "disabled",
styles: {
color: "${e-link-primary-color-disabled}",
"text-decoration": "none"
}
}
]
},
{
part: "value-container",
states: [
{
stateKey: "base",
styles: {
padding: "0px"
}
}
]
},
{
part: "value-display-label",
states: [
{
stateKey: "base",
styles: {
padding: "0 8px 8px 0",
"min-height": "26px"
}
}
]
},
{
part: "disclosure-button",
states: [
{
stateKey: "base",
styles: {
margin: "8px 0 8px 0px"
}
}
]
},
{
part: "text-link",
states: [
{
stateKey: "base",
styles: {
padding: "8px 0 0 0",
"line-height": "${label-show-linespacing}",
"text-align": "${label-show-alignment}"
}
},
{
stateHost: ":not([disabled])",
state: ":hover",
stateKey: "hover",
styles: {
color: "${e-link-primary-color-hover}",
"font-family": "${e-link-primary-fontfamily-hover}",
"font-size": "${e-link-primary-fontsize-hover}",
"font-weight": "${e-link-primary-fontweight-hover}",
"font-style": "${font-style-cond(label-header-show-fontstyle-hover)}",
"text-decoration": "${text-decoration-cond(label-header-show-fontstyle-hover)}",
"line-height": "${label-show-linespacing}",
"letter-spacing": "${label-show-letterspacing}",
"text-align": "${label-show-alignment}",
cursor: "pointer"
}
},
{
stateHost: ":not([disabled])",
state: ":hover:active",
stateKey: "pressed",
styles: {
color: "${e-link-primary-color-pressed}",
background: "${e-link-primary-fontfamily-pressed}",
"font-family": "${e-link-primary-fontfamily-pressed}",
"font-size": "${e-link-primary-fontsize-pressed}",
"font-weight": "${e-link-primary-fontweight-pressed}",
"font-style": "${font-style-cond(label-header-show-fontstyle-pressed)}",
"text-decoration": "${text-decoration-cond(label-header-show-fontstyle-pressed)}",
"line-height": "${label-show-linespacing}",
"letter-spacing": "${label-show-letterspacing}",
"text-align": "${label-show-alignment}",
cursor: "pointer"
}
},
{
stateHost: ":not([_show-all])",
stateKey: "not-showall",
styles: {
padding: "8px 16px 8px 0"
}
}
]
},
{
part: "value-display-area",
states: [
{
stateKey: "base",
styles: {
padding: "0px"
}
}
]
},
{
part: "item-value",
states: [
{
stateKey: "base",
styles: {
color: "${global-color-text-body}",
"font-family": "${global-text-body-fontfamily}",
"font-size": "${global-text-body-fontsize}",
"font-weight": "${global-text-body-fontweight}",
"font-style": "${global-text-label-fontstyle}",
"font-stretch": "normal",
"letter-spacing": "normal",
"line-height": "normal"
}
}
]
},
{
part: "overflow-control",
states: [
{
stateKey: "base",
styles: {
padding: "8px"
}
}
]
}
]
}
]
};
var fontfallbackJson = {
"Apple Chancery": "cursive",
Arial: "sans-serif",
"Brush Script MT": "cursive",
"Brush Script Std": "cursive",
"Curlz MT": "fantasy",
"DejaVu Sans Mono": "monospace",
"Fira Mono": "monospace",
"Fira Sans": "sans-serif",
"Liberation Mono": "monospace",
"Liberation Sans": "sans-serif",
"Lucida Bright": "serif",
"Lucida Calligraphy": "cursive",
"Lucida Console": "monospace",
"Lucida Fax": "serif",
"Lucida Handwriting": "cursive",
"Lucida Sans": "sans-serif",
"Lucida Sans Unicode": "sans-serif",
"Nimbus Sans L": "sans-serif",
"Open Sans": "Arial",
"Palatino Linotype": "serif",
Palladio: "serif",
"Party LET": "fantasy",
"Trebuchet MS": "sans-serif",
"URW Palladio": "serif",
Consolas: "monospace",
Harrington: "fantasy",
Herculanum: "fantasy",
Menlo: "monospace",
Monaco: "monospace",
Palatino: "serif",
Papyrus: "fantasy"
};
var widgetmetaJson = {};
var themeDataJson = [
{
name: "Base Theme",
props: {}
},
{
name: "Alternative",
props: {
"global-color-core-primary": "#F0b4c8",
"global-color-core-secondary1": "#ada5ad",
"global-text-header-fontfamily": "Comic Sans MS",
"global-text-body-fontfamily": "Comic Sans MS",
"global-text-label-fontfamily": "Comic Sans MS",
"global-text-label-fontweight": "400",
"e-checkbox-backgroundcolor-selected": "#F0b4c8",
"e-button-primary-fontcolor": "${global-color-text-label}",
"global-color-core-danger": "#FA8072",
"e-button-primary-radius": "12px",
"e-button-secondary-radius": "12px",
"e-button-tertiary-radius": "12px",
"e-button-danger-radius": "12px",
"global-text-subheader-fontfamily": "Comic Sans MS",
"global-color-bg-selected": "#ffe0e0",
"slider-color-track-active": "#f094c8",
"global-color-bg-primary": "#ffefef",
"global-color-text-label": "#0F3464",
"global-color-text-body": "#FF3464",
"e-checkbox-border-radius": "4px",
"slider-color-track-disabled": "${disabled(slider-color-track-active)}",
"slider-range-backgroundcolor": "",
"e-button-danger-fontcolor": "#ffffff",
"checkbox-text-label-color-selected": "#aa3030",
"checkbox-text-label-color": "${e-checkbox-text-label-color}",
"e-chart-series-2-color": "#ddd",
"e-chart-series-1-color": "#eee",
"e-chart-series-3-color": "#ccc",
"e-chart-series-4-color": "#bbb",
"e-chart-series-5-color": "#aaa",
"e-chart-series-6-color": "#999",
"e-chart-series-7-color": "#888",
"e-chart-series-8-color": "#777",
"e-chart-series-9-color": "#666",
"e-chart-ruler-color": "#4040f7",
"e-chart-tick-label-color": "#4040f7"
}
},
{
name: "PTC Convergence Theme",
props: {
"e-button-secondary-backgroundcolor": "#6e717c",
"e-button-secondary-bordercolor": "#6e717c",
"e-button-secondary-fontcolor": "#ffffff",
"e-button-secondary-hover-backgroundcolor": "#236192",
"e-button-secondary-hover-bordercolor": "#236192",
"e-button-secondary-pressed-backgroundcolor": "#005787",
"e-button-secondary-pressed-bordercolor": "#005878",
"e-button-secondary-disabled-bordercolor": "#adb5bd",
"e-button-secondary-disabled-fontcolor": "#adb5bd",
"e-button-tertiary-bordercolor": "#6e717c",
"e-button-tertiary-fontcolor": "#6e717c",
"e-button-tertiary-hover-backgroundcolor": "#236192",
"e-button-tertiary-hover-bordercolor": "#236192",
"e-button-tertiary-hover-fontcolor": "#ffffff",
"e-button-tertiary-pressed-backgroundcolor": "#005878",
"e-button-tertiary-pressed-bordercolor": "#005878",
"e-button-tertiary-pressed-fontcolor": "#ffffff",
"e-button-tertiary-disabled-bordercolor": "#adb5bd",
"e-button-tertiary-disabled-fontcolor": "#adb5bd",
"e-button-danger-fontcolor": "#ffffff",
"e-button-danger-hover-backgroundcolor": "#ce3939",
"e-button-danger-hover-bordercolor": "#ce3939",
"e-button-danger-pressed-backgroundcolor": "#913231",
"e-button-danger-pressed-bordercolor": "#913231",
"e-button-danger-disabled-bordercolor": "#adb5bd",
"e-button-danger-disabled-fontcolor": "#adb5bd",
"e-button-transparent-fontcolor": "#6e717c",
"e-button-transparent-hover-backgroundcolor": "#236192",
"e-button-transparent-hover-bordercolor": "#236192",
"e-button-transparent-hover-fontcolor": "#ffffff",
"e-button-transparent-pressed-fontcolor": "#ffffff",
"e-button-transparent-pressed-backgroundcolor": "#005878",
"e-button-transparent-pressed-bordercolor": "#005878",
"e-button-transparent-disabled-fontcolor": "#adb5bd",
"global-color-core-secondary1": "#6e717c",
"global-color-bg-hover": "#f7f7f7",
"global-color-line-interior": "#d8dbde",
"e-list-text-label-fontsize": "14px",
"e-textfield-text-hinttext-color": "#6e717c",
"e-link-primary-color-hover": "#236192",
"e-link-primary-color-pressed": "#005878",
"e-link-primary-color-disabled": "#adb5bd",
"e-link-primary-color-visited": "#236192",
"e-link-secondary-color-disabled": "#adb5bd",
"e-link-secondary-color-hover": "#236192",
"e-link-secondary-color-pressed": "#005878",
"e-button-primary-fontcolor": "#ffffff",
"e-checkbox-text-label-fontweight": "400",
"e-radiobutton-text-label-fontweight": "400",
"e-radiobutton-bordercolor": "#6e717c",
"e-checkbox-bordercolor": "#6e717c",
"e-checkbox-backgroundcolor-selected": "#0094c8",
"e-checkbox-text-label-color-selected": "#232b2d",
"e-checkbox-borderthickness-selected": "1px",
"e-checkbox-bordercolor-selected": "#0094c8",
"global-text-label-fontfamily": "Open Sans",
"global-text-body-fontfamily": "Open Sans",
"global-text-link-fontfamily": "Open Sans",
"e-button-primary-fontfamily": "Open Sans",
"e-link-primary-fontstyle": "",
"e-link-primary-fontstyle-hover": "${global-text-link-fontstyle}",
"e-link-primary-fontstyle-pressed": "${global-text-link-fontstyle}",
"e-list-borderthickness": "1px",
"e-list-row-borderthickness": "0px",
"e-list-text-text-fontweight-selected": "700",
"e-list-text-text-fontweight-hover": "700",
"checkbox-mark-color": "#ffffff",
"textfield-field-bordercolor-hover": "#236192",
"textfield-field-bordercolor-pressed": "#005878",
"textfield-field-bordercolor-disabled": "#adb5bd",
"global-color-field-icon": "#6E717C",
"tooltip-backgroundcolor": "#3b4550",
"tooltip-bordercolor": "#3b4550",
"tooltip-text-color": "#ffffff",
"global-text-header-fontfamily": "Open Sans",
"global-text-subheader-fontfamily": "Open Sans",
"toggle-track-bordercolor": "#6e717c",
"toggle-track-bordercolor-disabled": "#ADB5BD",
"toggle-handle-backgroundcolor-disabled": "#ADB5BD",
"toggle-handle-bordercolor-disabled": "#ADB5BD",
"toggle-track-backgroundcolor": "#6e717c",
"global-text-title-fontfamily": "open sans",
"global-text-title-fontweight": "600",
"global-text-caption-fontfamily": "open sans"
}
}
];
var themeMgr = new ThemeEngine.ThemeMgr();
var styleMgr = new ThemeEngine.StyleMgr(themeMgr);
var headerCSS = `<style>
.ptcs-theme--header {
height: 64px;
padding: 0px 20px;
background-color: #F2F3F7;
color: #2D343C;
font-size: 24px;
display: flex;
justify-content: space-between;
align-items: center;
}
header.ptcs-theme--header {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
z-index: 10;
}
.ptcs-theme--select {
width: 160px;
}
</style>
`;
function mountCSS(css) {
document.getElementById('theming').innerHTML = headerCSS + css;
}
function mountStyle(themeData) {
themeMgr.load(themeData.name, themeData)
.then(theme => styleMgr.build(theme, {engine: new StyleAggrEngine()}))
.then(mountCSS);
}
console.log('ptcs-multi-theme: mount multi-theme styling');
const el = document.createElement('div');
el.setAttribute('id', 'theming');
el.innerHTML = headerCSS;
document.head.appendChild(el);
const m = /\/node_modules\/(ptc(s|1)-[a-z0-9-]+)/.exec(location.pathname);
const appName = m ? m[1] : location.pathname;
function mount() {
const body = document.body;
let head = body.querySelector('.ptcs-theme--header');
if (!head) {
head = document.createElement('header');
head.setAttribute('class', 'ptcs-theme--header');
body.insertBefore(head, body.firstChild, head);
const orgMargin = getComputedStyle(body).getPropertyValue('margin-top');
body.style.marginTop = `calc(72px + ${orgMargin})`;
}
head.innerHTML = `<div>&lt;${appName}&gt;</div><ptcs-dropdown hint-text="Select theme" items='${JSON.stringify(themeDataJson.map(item => item.name))}' class="ptcs-theme--select"></ptcs-dropdown>`;
const dropdown = head.querySelector('.ptcs-theme--select');
dropdown.addEventListener('selected-changed', ev => mountStyle(themeDataJson[ev.detail.value]));
dropdown.selected = 0;
}
// Mount the header element after DOM has loaded
if (document.readyState === 'complete' || document.readyState === 'loaded') {
mount();
} else {
window.addEventListener('DOMContentLoaded', mount, {once: true});
}
})();
