Page Menu
Home
WickedGov Phorge
Search
Configure Global Search
Log In
Files
F4107165
tokens-citizen.less
No One
Temporary
Actions
View File
Edit File
Delete File
View Transforms
Subscribe
Flag For Later
Award Token
Size
8 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
;
}
//
Header
position
tokens
//
Unit
is
required
for
calc
()
functions
//
stylelint-disable
length-zero-no-unit
--header-direction
:
row
;
--header-size-inline-start
:
0px
;
--header-size-inline-end
:
0px
;
--header-size-block-start
:
0px
;
--header-size-block-end
:
0px
;
--header-inset-block-start
:
0px
;
--header-inset-block-end
:
0px
;
--header-inset-inline-start
:
0px
;
--header-inset-inline-end
:
0px
;
--header-border-block-start-width
:
0px
;
--header-border-block-end-width
:
0px
;
--header-border-inline-start-width
:
0px
;
--header-border-inline-end-width
:
0px
;
//
Always
default
to
bottom
in
mobile
for
now
@
media
(
max-width
:
@
max-width-breakpoint-tablet
)
{
--header-direction
:
row
;
--header-inset-inline-start
:
0px
;
--header-inset-inline-end
:
0px
;
--header-size-block-end
:
var
(
--header-size
);
--header-inset-block-start
:
auto
;
--header-inset-block-end
:
0
;
--header-border-block-start-width
:
var
(
--border-width-base
);
}
&
.
citizen-header-position
{
@
media
(
min-width
:
@
min-width-breakpoint-desktop
)
{
&
-left
,
&
-right
{
--header-direction
:
column
;
--header-inset-block-start
:
0
px
;
--header-inset-block-end
:
0
px
;
}
&
-top
,
&
-bottom
{
--header-direction
:
row
;
--header-inset-inline-start
:
0
px
;
--header-inset-inline-end
:
0
px
;
}
&
-left
{
--header-size-inline-start
:
var
(
--header-size
);
--header-inset-inline-start
:
0
px
;
--header-inset-inline-end
:
auto
;
--header-border-inline-end-width
:
var
(
--border-width-base
);
}
&
-right
{
--header-size-inline-end
:
var
(
--header-size
);
--header-inset-inline-start
:
auto
;
--header-inset-inline-end
:
0
px
;
--header-border-inline-start-width
:
var
(
--border-width-base
);
}
&
-top
{
--header-size-block-start
:
var
(
--header-size
);
--header-inset-block-start
:
0
px
;
--header-inset-block-end
:
auto
;
--header-border-block-end-width
:
var
(
--border-width-base
);
}
&
-bottom
{
--header-size-block-end
:
var
(
--header-size
);
--header-inset-block-start
:
auto
;
--header-inset-block-end
:
0
px
;
--header-border-block-start-width
:
var
(
--border-width-base
);
}
}
}
//
stylelint-enable
length-zero-no-unit
//
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
;
}
//
These
values
requires
input
from
the
body
element
body
{
//
Only
block-start
is
needed
because
sticky
header
is
always
on
top
--header-offset-block-start
:
calc
(
var
(
--header-size-block-start
)
+
var
(
--height-sticky-header
)
);
--header-offset-block-end
:
var
(
--header-size-block-end
);
}
File Metadata
Details
Attached
Mime Type
text/plain
Expires
Tue, Aug 18, 19:55 (2 w, 4 d ago)
Storage Engine
local-disk
Storage Format
Raw Data
Storage Handle
f2/1e/756b0bbf07471f3213688427bfd4
Default Alt Text
tokens-citizen.less (8 KB)
Attached To
Mode
rMWPROD MediaWiki Production
Attached
Detach File
Event Timeline
Log In to Comment