This repository has been archived by the owner on Mar 8, 2023. It is now read-only.
forked from nana-4/materia-theme
-
Notifications
You must be signed in to change notification settings - Fork 18
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
17 changed files
with
6,851 additions
and
5,800 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,72 @@ | ||
| /* | ||
| Equilux Palette (version 0.2) | ||
| Author: Domizio Demichelis ([email protected]) | ||
| _____________________________ | ||
| Equilux Color Sets | ||
| ================== | ||
| The Equilux sets are useful to create highlighting syntax themes and user | ||
| interface that reduce eye strain and look smooth and balanced. | ||
| A set of Equilux colors is a group of color with different hue but equal | ||
| _perceived_ brightness and saturation. That means that if you desaturate all the | ||
| colors in an Equilux set you produce the same shade of gray for all. | ||
| Equilux Palette | ||
| =============== | ||
| A ready to use small subset of 30 Equilux sets is captured in the Equilux | ||
| Palette. | ||
| The palette is composed of 5 tables of different saturation. Each table contains | ||
| 6 sets of different brightness, each set contains 7 hues (a neutral gray plus | ||
| the classic 6 hues: red, yellow, green, cyan, blue, magenta). | ||
| The palette contains also 256 shades of neutral gray named according to the same | ||
| convention, useful to use for other UI elements. | ||
| Chose a set for brightness and saturation, considering the brightness level of | ||
| the neutral background to generate more or less contrast. Use the different | ||
| colors in the same set for different items of the same kind. | ||
| Color Naming | ||
| ============ | ||
| The colors are named as follow: | ||
| <prefix><brightness-level>[<hue><relative-saturation>] | ||
| - prefix: literal "e" brightness-level: integer representing the | ||
| - brightness-level. "0-255" for neutrals and one of "65", "90", "115", "140", | ||
| "165", "190" for non-neutral hues | ||
| - hue: one of "r", "y", "g", "c", "b", "m" | ||
| - relative-saturation: percentage of saturation considering "100" the maximum | ||
| achievable saturation for a complete Equilux set. Available for "100", "90", | ||
| "80", "70", "60" saturation percent. | ||
| Examples: | ||
| - e35: neutral gray with brightness level of 35 (#232323) | ||
| - e190: neutral gray with brightness level of 190 (#bebebe) | ||
| - e115r80: red hue with brightness level of 115 and relative saturation of 80 | ||
| (#996262) | ||
| - e140c100: cyan hue with brightness level of 140 and maximum possible | ||
| saturation (#4ba8a8) | ||
| */ | ||
| ::-webkit-scrollbar, | ||
| ::-webkit-scrollbar-corner { | ||
| width: 17px; | ||
| height: 17px; | ||
| border: 0 solid rgba(0, 0, 0, 0.26); | ||
| background-color: rgba(48, 48, 48, 0.9); | ||
| border: 0 solid rgba(0, 0, 0, 0.2); | ||
| background-color: rgba(60, 60, 60, 0.9); | ||
| background-clip: border-box; | ||
| } | ||
|
|
||
|
|
@@ -22,7 +85,7 @@ | |
| height: 32px; | ||
| border: 4px solid transparent; | ||
| border-radius: 8px; | ||
| background-color: rgba(255, 255, 255, 0.5); | ||
| background-color: rgba(190, 190, 190, 0.5); | ||
| background-clip: padding-box; | ||
| } | ||
|
|
||
|
|
@@ -39,13 +102,13 @@ | |
| } | ||
|
|
||
| ::-webkit-scrollbar-thumb:hover { | ||
| background-color: rgba(255, 255, 255, 0.7); | ||
| background-color: rgba(190, 190, 190, 0.7); | ||
| } | ||
|
|
||
| ::-webkit-scrollbar-thumb:active { | ||
| background-color: #FFFFFF; | ||
| background-color: #bebebe; | ||
| } | ||
|
|
||
| ::-webkit-scrollbar-thumb:disabled { | ||
| background-color: rgba(255, 255, 255, 0.3); | ||
| background-color: rgba(190, 190, 190, 0.3); | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,72 @@ | ||
| /* | ||
| Equilux Palette (version 0.2) | ||
| Author: Domizio Demichelis ([email protected]) | ||
| _____________________________ | ||
| Equilux Color Sets | ||
| ================== | ||
| The Equilux sets are useful to create highlighting syntax themes and user | ||
| interface that reduce eye strain and look smooth and balanced. | ||
| A set of Equilux colors is a group of color with different hue but equal | ||
| _perceived_ brightness and saturation. That means that if you desaturate all the | ||
| colors in an Equilux set you produce the same shade of gray for all. | ||
| Equilux Palette | ||
| =============== | ||
| A ready to use small subset of 30 Equilux sets is captured in the Equilux | ||
| Palette. | ||
| The palette is composed of 5 tables of different saturation. Each table contains | ||
| 6 sets of different brightness, each set contains 7 hues (a neutral gray plus | ||
| the classic 6 hues: red, yellow, green, cyan, blue, magenta). | ||
| The palette contains also 256 shades of neutral gray named according to the same | ||
| convention, useful to use for other UI elements. | ||
| Chose a set for brightness and saturation, considering the brightness level of | ||
| the neutral background to generate more or less contrast. Use the different | ||
| colors in the same set for different items of the same kind. | ||
| Color Naming | ||
| ============ | ||
| The colors are named as follow: | ||
| <prefix><brightness-level>[<hue><relative-saturation>] | ||
| - prefix: literal "e" brightness-level: integer representing the | ||
| - brightness-level. "0-255" for neutrals and one of "65", "90", "115", "140", | ||
| "165", "190" for non-neutral hues | ||
| - hue: one of "r", "y", "g", "c", "b", "m" | ||
| - relative-saturation: percentage of saturation considering "100" the maximum | ||
| achievable saturation for a complete Equilux set. Available for "100", "90", | ||
| "80", "70", "60" saturation percent. | ||
| Examples: | ||
| - e35: neutral gray with brightness level of 35 (#232323) | ||
| - e190: neutral gray with brightness level of 190 (#bebebe) | ||
| - e115r80: red hue with brightness level of 115 and relative saturation of 80 | ||
| (#996262) | ||
| - e140c100: cyan hue with brightness level of 140 and maximum possible | ||
| saturation (#4ba8a8) | ||
| */ | ||
| ::-webkit-scrollbar, | ||
| ::-webkit-scrollbar-corner { | ||
| width: 17px; | ||
| height: 17px; | ||
| border: 0 solid rgba(0, 0, 0, 0.12); | ||
| background-color: rgba(255, 255, 255, 0.9); | ||
| border: 0 solid rgba(0, 0, 0, 0.2); | ||
| background-color: rgba(60, 60, 60, 0.9); | ||
| background-clip: padding-box; | ||
| } | ||
|
|
||
|
|
@@ -22,7 +85,7 @@ | |
| height: 32px; | ||
| border: 4px solid transparent; | ||
| border-radius: 8px; | ||
| background-color: rgba(0, 0, 0, 0.38); | ||
| background-color: rgba(190, 190, 190, 0.5); | ||
| background-clip: padding-box; | ||
| } | ||
|
|
||
|
|
@@ -39,13 +102,13 @@ | |
| } | ||
|
|
||
| ::-webkit-scrollbar-thumb:hover { | ||
| background-color: rgba(0, 0, 0, 0.54); | ||
| background-color: rgba(190, 190, 190, 0.7); | ||
| } | ||
|
|
||
| ::-webkit-scrollbar-thumb:active { | ||
| background-color: rgba(0, 0, 0, 0.87); | ||
| background-color: #bebebe; | ||
| } | ||
|
|
||
| ::-webkit-scrollbar-thumb:disabled { | ||
| background-color: rgba(0, 0, 0, 0.26); | ||
| background-color: rgba(190, 190, 190, 0.3); | ||
| } | ||
Oops, something went wrong.