Page Menu
Home
WickedGov Phorge
Search
Configure Global Search
Log In
Files
F5977151
tokens-theme-base.less
No One
Temporary
Actions
View File
Edit File
Delete File
View Transforms
Subscribe
Flag For Later
Award Token
Size
7 KB
Referenced Files
None
Subscribers
None
tokens-theme-base.less
View Options
/**
* Citizen tokens
* CSS variables for the base theme
*
* TODO: Remove HSL fallback when OKLCH is supported in all browsers
* TODO: Use CSS relative color syntax when supported in all browsers
*/
.
theme-base
()
{
//
Hover
and
active
states
are
calculated
by
a
modifier
of
the
lightness
value
(e.g.
hover
:
+2
%
,
active
:
-2
%
)
--
delta-lightness-state-base
:
4
%
;
--delta-lightness-hover-state
:
calc
(
var
(
--delta-lightness-state-base
)
*
1
);
--delta-lightness-active-state
:
calc
(
var
(
--delta-lightness-state-base
)
*
-1
);
--delta-lightness-surface-base
:
-2
%
;
/* Progressive color */
--color-progressive-oklch__l
:
53.25
%
;
--color-progressive-oklch__c
:
0.1679
;
--color-progressive-oklch__h
:
262.29
;
/* Surface color */
--color-surface-0-oklch__l
:
96
%
;
--color-surface-0-oklch__c
:
0.01
;
--color-surface-1-oklch__l
:
calc
(
var
(
--color-surface-0-oklch__l
)
+
var
(
--delta-lightness-surface-base
)
);
--color-surface-1-oklch__c
:
0.015
;
--color-surface-2-oklch__l
:
calc
(
var
(
--color-surface-0-oklch__l
)
+
(
var
(
--delta-lightness-surface-base
)
*
2
)
);
--color-surface-2-oklch__c
:
0.02
;
--color-surface-3-oklch__l
:
calc
(
var
(
--color-surface-0-oklch__l
)
+
(
var
(
--delta-lightness-surface-base
)
*
3
)
);
--color-surface-3-oklch__c
:
0.03
;
--color-surface-4-oklch__l
:
calc
(
var
(
--color-surface-0-oklch__l
)
+
(
var
(
--delta-lightness-surface-base
)
*
4
)
);
--color-surface-4-oklch__c
:
0.04
;
--color-surface-0
:
~
'oklch( var( --color-surface-0-oklch__l ) var( --color-surface-0-oklch__c ) var( --color-progressive-oklch__h ) )'
;
--color-surface-1
:
~
'oklch( var( --color-surface-1-oklch__l ) var( --color-surface-1-oklch__c ) var( --color-progressive-oklch__h ) )'
;
--color-surface-1--hover
:
~
'oklch( calc( var( --color-surface-1-oklch__l ) + var( --delta-lightness-hover-state ) ) var( --color-surface-1-oklch__c ) var( --color-progressive-oklch__h ) )'
;
--color-surface-1--active
:
~
'oklch( calc( var( --color-surface-1-oklch__l ) + var( --delta-lightness-active-state ) ) var( --color-surface-1-oklch__c ) var( --color-progressive-oklch__h ) )'
;
--color-surface-2
:
~
'oklch( var( --color-surface-2-oklch__l ) var( --color-surface-2-oklch__c ) var( --color-progressive-oklch__h ) )'
;
--color-surface-2--hover
:
~
'oklch( calc( var( --color-surface-2-oklch__l ) + var( --delta-lightness-hover-state ) ) var( --color-surface-2-oklch__c ) var( --color-progressive-oklch__h ) )'
;
--color-surface-2--active
:
~
'oklch( calc( var( --color-surface-2-oklch__l ) + var( --delta-lightness-active-state ) ) var( --color-surface-2-oklch__c ) var( --color-progressive-oklch__h ) )'
;
--color-surface-3
:
~
'oklch( var( --color-surface-3-oklch__l ) var( --color-surface-3-oklch__c ) var( --color-progressive-oklch__h ) )'
;
--color-surface-4
:
~
'oklch( var( --color-surface-4-oklch__l ) var( --color-surface-4-oklch__c ) var( --color-progressive-oklch__h ) )'
;
/* Text color */
--color-emphasized-oklch__l
:
5
%
;
--color-emphasized-oklch__c
:
0.07
;
--color-base-oklch__l
:
20
%
;
--color-base-oklch__c
:
0.09
;
--color-subtle-oklch__l
:
35
%
;
--color-subtle-oklch__c
:
0.11
;
--color-placeholder-oklch__l
:
40
%
;
--color-placeholder-oklch__c
:
0.07
;
--color-disabled-oklch__l
:
60
%
;
--color-disabled-oklch__c
:
0.05
;
/* State color */
--color-inverted-primary
:
#fff
;
--color-destructive__h
:
340
;
--color-destructive__l
:
40
%
;
--color-success__h
:
170
;
--color-success__l
:
17
%
;
--color-warning__h
:
48
;
--color-warning__l
:
40
%
;
--background-color-subtle__s
:
95
%
;
--background-color-subtle__l
:
95
%
;
/* Icon color */
--background-color-icon
:
~
'rgba( 0, 0, 0, var( --opacity-icon-base ) )'
;
--background-color-icon--hover
:
~
'rgba( 0, 0, 0, var( --opacity-icon-base--hover ) )'
;
--background-color-icon--active
:
~
'rgba( 0, 0, 0, var( --opacity-icon-base--active ) )'
;
/* Link color */
--color-link
:
var
(
--color-progressive
);
--color-link--hover
:
var
(
--color-progressive--hover
);
--color-link--active
:
var
(
--color-progressive--active
);
/* Syntax highlight color */
--color-syntax-red
:
@
color
-
syntax-red
;
--color-syntax-orange
:
@
color
-
syntax-orange
;
--color-syntax-yellow
:
@
color
-
syntax-yellow
;
--color-syntax-green
:
@
color
-
syntax-green
;
--color-syntax-cyan
:
@
color
-
syntax-cyan
;
--color-syntax-blue
:
@
color
-
syntax-blue
;
--color-syntax-paleblue
:
@
color
-
syntax-paleblue
;
--color-syntax-purple
:
@
color
-
syntax-purple
;
--color-syntax-brown
:
@
color
-
syntax-brown
;
--color-syntax-pink
:
@
color
-
syntax-pink
;
--color-syntax-violet
:
@
color
-
syntax-violet
;
--color-syntax-grey
:
@
color
-
syntax-grey
;
/* Backdrop */
--backdrop-filter-frosted-glass
:
~
'blur( 16px ) saturate( 140% )'
;
--backdrop-opacity
:
0.65
;
/* Filter */
--filter-invert
:
none
;
--filter-invert-primary
:
invert
(
1
)
hue-rotate
(
180
deg
);
--opacity-glass
:
0.9
;
/* Font */
--font-grade
:
25
;
/* Shadow */
--shadow-color-oklch__l
:
12
%
;
--shadow-color-oklch__c
:
0.01
;
--shadow-color-hsl__s
:
10
%
;
--shadow-color-hsl__l
:
20
%
;
--shadow-opacity
:
0.03
;
color-scheme
:
light
;
/**
* Fallback for browsers that do not support OKLCH
* TODO: Remove this once OKLCH is supported in all browsers
*/
--color-progressive-hsl__h
:
220
;
--color-progressive-hsl__s
:
60
%
;
--color-progressive-hsl__l
:
50
%
;
--color-surface-0-hsl__s
:
30
%
;
--color-surface-0-hsl__l
:
96
%
;
--color-surface-1-hsl__s
:
40
%
;
--color-surface-1-hsl__l
:
calc
(
var
(
--color-surface-0-hsl__l
)
+
var
(
--delta-lightness-surface-base
)
);
--color-surface-2-hsl__s
:
40
%
;
--color-surface-2-hsl__l
:
calc
(
var
(
--color-surface-0-hsl__l
)
+
(
var
(
--delta-lightness-surface-base
)
*
2
)
);
--color-surface-3-hsl__s
:
43
%
;
--color-surface-3-hsl__l
:
calc
(
var
(
--color-surface-0-hsl__l
)
+
(
var
(
--delta-lightness-surface-base
)
*
3
)
);
--color-surface-4-hsl__s
:
46
%
;
--color-surface-4-hsl__l
:
calc
(
var
(
--color-surface-0-hsl__l
)
+
(
var
(
--delta-lightness-surface-base
)
*
4
)
);
--color-emphasized-hsl__s
:
85
%
;
--color-emphasized-hsl__l
:
5
%
;
--color-base-hsl__s
:
30
%
;
--color-base-hsl__l
:
20
%
;
--color-subtle-hsl__s
:
40
%
;
--color-subtle-hsl__l
:
35
%
;
--color-placeholder-hsl__s
:
85
%
;
--color-placeholder-hsl__l
:
40
%
;
--color-disabled-hsl__s
:
85
%
;
--color-disabled-hsl__l
:
60
%
;
@supports
not
(
color
:
oklch
(
100
%
0
0
)
)
{
--
color
-
surface-0
:
~
'hsl( var( --color-progressive-hsl__h ), var( --color-surface-0-hsl__s ), var( --color-surface-0-hsl__l ) )'
;
--color-surface-1
:
~
'hsl( var( --color-progressive-hsl__h ), var( --color-surface-1-hsl__s ), var( --color-surface-1-hsl__l ) )'
;
--color-surface-1--hover
:
~
'hsl( var( --color-progressive-hsl__h ), var( --color-surface-1-hsl__s ), calc( var( --color-surface-1-hsl__l ) + var( --delta-lightness-hover-state ) ) )'
;
--color-surface-1--active
:
~
'hsl( var( --color-progressive-hsl__h ), var( --color-surface-1-hsl__s ), calc( var( --color-surface-1-hsl__l ) + var( --delta-lightness-active-state ) ) )'
;
--color-surface-2
:
~
'hsl( var( --color-progressive-hsl__h ), var( --color-surface-2-hsl__s ), var( --color-surface-2-hsl__l ) )'
;
--color-surface-2--hover
:
~
'hsl( var( --color-progressive-hsl__h ), var( --color-surface-2-hsl__s ), calc( var( --color-surface-2-hsl__l ) + var( --delta-lightness-hover-state ) ) )'
;
--color-surface-2--active
:
~
'hsl( var( --color-progressive-hsl__h ), var( --color-surface-2-hsl__s ), calc( var( --color-surface-2-hsl__l ) + var( --delta-lightness-active-state ) ) )'
;
--color-surface-3
:
~
'hsl( var( --color-progressive-hsl__h ), var( --color-surface-3-hsl__s ), var( --color-surface-3-hsl__l ) )'
;
--color-surface-4
:
~
'hsl( var( --color-progressive-hsl__h ), var( --color-surface-4-hsl__s ), var( --color-surface-4-hsl__l ) )'
;
}
}
File Metadata
Details
Attached
Mime Type
text/plain
Expires
Sat, Oct 3, 19:42 (2 d, 19 h ago)
Storage Engine
local-disk
Storage Format
Raw Data
Storage Handle
1d/6f/53d44493bf3946ccf014c3b2568e
Default Alt Text
tokens-theme-base.less (7 KB)
Attached To
Mode
rMWPROD MediaWiki Production
Attached
Detach File
Event Timeline
Log In to Comment