Как получить штатные цвета стандартных элементов системы

[Bagir]

Занялся работой над шаблонами классов. Хочется делать элементы, схожие по стилю оформления со штатными элементами системы. Можно ли как то сослаться на штатные классы, отвечающие за оформление? Ну или хотя бы получить значения цветов. Рамки, фон, цвета заливки выключателей, цвет текста, и т.п.

[Divan]

Вы можете посмотреть мои темы здесь и здесь. Я сделал их настраиваемыми. Можете скачать, открыть сцену и посмотреть код, а именно стили. Как поймете, как это делать, то сможете сделать для себя так, как вам нужно.

[Bagir]

Очень красиво, просто полностью новые стили, классно. У меня конечно были мысли по скромнее. Я просто хотел использовать стандартный стиль элементов и родные цвета, чтобы мои элементы наоборот не выделялись среди штатных. Пока что увы нет времени делать нечто подобное. Ещё очень много своих "хотелок" нужно реализовать. Поэтому я использую стандартные элементы управления.
После изучения увеличенного скриншота штатных элементов, я попытался повторить нечто подобное в шаблонах классов. Как выяснилось, там совсем не просто наложены слои с размытым фоном и четкими рамками. Обратите внимание на выключатели и одно поле с температурой. Вот что получилось:

[Divan]

Это в боковом меню так? - хорошо получилось. Если не поленитесь, то прошу выкладывать подобные решения, а еще завести тему в рубрике "Дизайн", чтобы все интересные идеи были в одном месте и не бродить по всему форуму и собирать по крупицам.

[Bagir]

Это шаблон класса. Можно использовать не только в боковом меню, а где угодно. Достаточно просто указать объект при выборе типа элемента. Это очень удобно. Наработки обязательно выложу, сейчас ещё решаю вопрос с кодом.
Я изучил штатные элементы под увеличением.
Суть такая:
Рисуем рамку; размываем её; сдвигаем на пиксель вниз. Опять рисуем рамку без размытия. Обрезаем по краям. Вот пример кода:

Код: Выделить всё

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" version="1.1">

 <defs>
  <filter id="fg152620">
   <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
  </filter>
  <clipPath id="cut152620" >
    <rect x="0" y="0" rx="4" ry="4" width="60" height="35" />
  </clipPath>
  </defs>
 
 <g transform="translate(20,15)">
   <rect x="0" y="1" rx="4" ry="4" width="60" height="35"fill="none" stroke="#999999"  stroke-width="1" filter="url(#fg152620)" clip-path="url(#cut152620)"/>
   <rect x="0" y="0" rx="4" ry="4" width="60" height="35" fill="none" stroke="#dddddd" stroke-width="1"
 </g>

</svg>

Ситуация следующая. Если все элементы имеют одинаковый width и height, то можно оставить так, но если нет, то придется делать несколько clipPath т.к. там прописаны размеры для обрезки width="60" height="35", а это трудозатратно. Должен быть способ проще.

В итоге проблема вот в чем: Как размыть рамку (rect) с закругленными краями (rx="4" ry="4") только во внутрь? Когда я для рамки использую feGaussianBlur, то фильтр добавляет размытие и во внутрь и наружу. А нужно только во внутрь. Этого можно избежать, указав размеры 0 0 0 0. По умолчанию <filter x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox">. Но на закругленных краях размытие всё равно выйдет наружу, т.к. запрещая фильтру работать за пределами размера, мы всё равно задаем ему прямоугольник. Поэтому и приходится обрезать при помощи clipPath, и тут снова требуется область с размерами.
Хочется этого избежать чтобы облегчить и упростить html код.

[Bagir]

Предполагаю, что искать мне надо где то в направлении clip-path geometry-box stroke-box, но не могу найти примера