Page Menu
Home
WickedGov Phorge
Search
Configure Global Search
Log In
Files
F4112616
tokens-citizen.less
No One
Temporary
Actions
View File
Edit File
Delete File
View Transforms
Subscribe
Flag For Later
Award Token
Size
6 KB
Referenced Files
None
Subscribers
None
tokens-citizen.less
View Options
/**
* Citizen tokens
* CSS variables that are used throughout the skin
*
* TODO: Remove HSL fallback when OKLCH is supported in all browsers
* TODO: Use CSS relative color syntax when supported in all browsers
*/
@
import
'tokens-theme-base.less'
;
:
root
{
.theme-base()
;
/* Border */
--border-radius-medium
:
calc
(
var
(
--border-radius-base
)
*
2
);
--border-radius-large
:
calc
(
var
(
--border-radius-base
)
*
3
);
/* Box shadow */
--box-shadow-border
:
var
(
--border-color-base
)
0
0
0
1
px
;
/* Filter */
--filter-invert-fixed
:
invert
(
1
)
hue-rotate
(
180
deg
);
/* Font */
--font-family-citizen-base
:
'Roboto'
,
'Roboto-fallback'
;
--font-family-citizen-serif
:
'Roboto Serif'
,
'Roboto Serif-fallback'
;
--font-family-citizen-monospace
:
'Roboto Mono'
,
'Roboto Mono-fallback'
;
--font-family-language-base
:
''
;
--font-family-language-serif
:
''
;
--font-family-language-monospace
:
''
;
/* Size */
/* TODO: Need to standardize the naming convention */
/* TODO: Perhaps move some of these into a scoped element? */
--size-icon
:
@
size-icon
;
//
Height
of
the
bottom
toolbar
used
by
page
tools
and
ToC
toggle
--toolbar-size
:
2.5
rem
;
//
Used
to
offset
sticky
elements
with
sticky
header
//
This
is
overriden
by
inline
styles
in
the
html
element
when
sticky
header
is
active
//
Need
the
unit
for
calc()
(#1058)
//
stylelint-disable-next-line
length-zero-no-unit
--height-sticky-header
:
0
px
;
//
Width
or
height
of
citizen-header,
depending
on
the
orientation
--header-size
:
@
header-size
;
//
Max-height
allowed
for
header
card,
20vh
is
left
for
closing
affordnance
--header-card-maxheight
:
80
vh
;
//
Width
of
the
gradient
in
citizen-overflow
--overflow-gradient-size
:
2
rem
;
//
Width
of
the
body
content
--width-layout
:
@
width
-
layout
;
//
Width
of
the
body
content
when
the
page
should
be
extended
(e.g.
special,
category
pages)
--width-layout--extended
:
calc
(
var
(
--width-layout
)
*
1.5
);
//
Width
of
the
table
of
contents
--width-toc
:
@
width
-
toc
;
///
Width
of
the
page
--width-page
:
@
width
-
layout
;
//
Side
padding
used
for
the
page
//
This
is
set
in
px
to
enforce
safe
area
on
a
page
--padding-page
:
@
padding
-
page
;
/* Spacing */
--space-unit
:
@
space
-
unit
;
--space-xxs
:
calc
(
0.25
*
var
(
--space-unit
)
);
--space-xs
:
calc
(
0.5
*
var
(
--space-unit
)
);
--space-sm
:
calc
(
0.75
*
var
(
--space-unit
)
);
--space-md
:
var
(
--space-unit
);
--space-lg
:
calc
(
1.25
*
var
(
--space-unit
)
);
--space-xl
:
calc
(
1.5
*
var
(
--space-unit
)
);
--space-xxl
:
calc
(
2
*
var
(
--space-unit
)
);
/* Transition */
--transition-delay-menu
:
100
ms
;
/* @see https://www.joshwcomeau.com/animation/css-transitions/#custom-curves-7 */
--transition-timing-function-ease
:
cubic-bezier
(
0.44
,
0.21
,
0
,
1
);
--transition-timing-function-ease-in
:
cubic-bezier
(
0.75
,
0
,
1
,
1
);
--transition-timing-function-ease-out
:
cubic-bezier
(
0.215
,
0.61
,
0.355
,
1
);
/* Transform */
/**
* Add affordance to thumbnails to replace magnify icon
* On hover, enlarge the image to inform the user that a full-size image will be shown (to MMV or file page)
*/
--transform-image-hover
:
scale
(
1.1
);
/**
* Codex Design Tokens but not included as CSS variables
*/
--border-base
:
var
(
--border-width-base
)
solid
var
(
--border-color-base
);
--border-subtle
:
var
(
--border-width-base
)
solid
var
(
--border-color-subtle
);
--border-width-base
:
1
px
;
--border-width-thick
:
2
px
;
--border-radius-base
:
4
px
;
--border-radius-sharp
:
0
;
--border-radius-pill
:
9999
px
;
--border-radius-circle
:
50
%
;
--box-shadow-small
:
0
0
0
1
px
var
(
--border-color-base
);
//
@see
https
:
//
www
.
joshwcomeau
.
com
/
shadow-palette
--
box-shadow
-
medium
:
0
0.5
px
0.6
px
var
(
--box-shadow-color-alpha-base
),
0
1.6
px
1.8
px
-0.8
px
var
(
--box-shadow-color-alpha-base
),
0
4
px
4.5
px
-1.7
px
var
(
--box-shadow-color-alpha-base
),
0
9.8
px
11
px
-2.5
px
var
(
--box-shadow-color-alpha-base
);
--box-shadow-large
:
0
0.5
px
0.6
px
var
(
--box-shadow-color-alpha-base
),
0
2.8
px
3.1
px
-0.4
px
var
(
--box-shadow-color-alpha-base
),
0
5.3
px
6
px
-0.7
px
var
(
--box-shadow-color-alpha-base
),
0
8.7
px
9.8
px
-1.1
px
var
(
--box-shadow-color-alpha-base
),
0
13.9
px
15.6
px
-1.4
px
var
(
--box-shadow-color-alpha-base
),
0
21.8
px
24.5
px
-1.8
px
var
(
--box-shadow-color-alpha-base
);
--font-family-base
:
@
font-family
-
base
;
--font-family-serif
:
@
font-family
-
serif
;
--font-family-monospace
:
@
font-family
-
monospace
;
--font-weight-normal
:
400
;
--font-weight-medium
:
calc
(
var
(
--font-weight-normal
)
+
100
);
--font-weight-semi-bold
:
calc
(
var
(
--font-weight-normal
)
+
200
);
--font-weight-bold
:
calc
(
var
(
--font-weight-normal
)
+
300
);
--font-family-overline
:
var
(
--font-family-base
);
--font-weight-overline
:
var
(
--font-weight-medium
);
--font-size-overline
:
var
(
--font-size-small
);
--line-height-overline
:
var
(
--line-height-small
);
--text-transform-overline
:
none
;
--letter-spacing-overline
:
normal
;
@media
(
min-width
:
@
min-width
-
breakpoint-tablet
)
{
--
padding
-
page
:
calc
(
@
padding
-page
*
1.5
);
}
@
media
(
min-width
:
@
min-width-breakpoint-desktop
)
{
--padding-page
:
calc
(
@
padding-page
*
2
)
;
--header-card-maxheight
:
calc
(
100vh
-
var
(
--space-sm
)
*
2
);
}
@
media
(
prefers-contrast
:
more
)
{
--font-weight-normal
:
500
;
}
@
media
(
prefers-contrast
:
less
)
{
--font-weight-normal
:
300
;
}
/**
* Deprecated tokens
*/
--color-primary__h
:
var
(
--color-progressive-hsl__h
)
;
--color-primary__s
:
var
(
--color-progressive-hsl__s
);
--color-primary__l
:
var
(
--color-progressive-hsl__l
);
--font-size-base
:
var
(
--font-size-medium
);
--line-height
:
1
.
6
;
--line-height-xxx-small
:
1
.
25
;
//
Deprecated
with
Codex
2
.
0
--line-height-xx-small
:
1
.
375
;
//
Deprecated
with
Codex
2
.
0
--box-shadow-drop-small
:
var
(
--box-shadow-small
);
--box-shadow-drop-medium
:
var
(
--box-shadow-medium
);
--box-shadow-drop-xx-large
:
var
(
--box-shadow-large
);
}
//
TODO
:
Update
with
implementation
on
T376559
when
it
is
finalized
.
citizen-animations-ready
{
/* Only apply transition when page is ready for it */
--transition-hover
:
@
transition
-
hover
;
--transition-menu
:
@
transition
-
menu
;
--transition-duration-base
:
100
ms
;
--transition-duration-medium
:
250
ms
;
}
File Metadata
Details
Attached
Mime Type
text/plain
Expires
Tue, Aug 18, 22:56 (18 h, 24 m ago)
Storage Engine
local-disk
Storage Format
Raw Data
Storage Handle
10/df/d2de067c475cf1dad21784b692a8
Default Alt Text
tokens-citizen.less (6 KB)
Attached To
Mode
rMWPROD MediaWiki Production
Attached
Detach File
Event Timeline
Log In to Comment