Wikipedia

Modulo:Materialize colors examples

Info Istruzioni per l'uso
Questo è un modulo scritto in Lua. Le istruzioni che seguono sono contenute nella sottopagina Modulo:Materialize colors examples/man (modifica · cronologia)
Sandbox: Modulo:Materialize colors examples/sandbox (modifica · cronologia) · Sottopagine: lista · Test: Modulo:Materialize colors examples/test (modifica · cronologia · Esegui)

Questo modulo ad uso interno serve semplicemente a generare la tavolozza di colori di esempio presente in questo template:

Funzioni

allPalettesHTML

Questo metodo permette di generare tutte le palette dei colori. Utilizzo di esempio nel wikitesto.

Utilizzo base: 

{{Materialize colors}}
{{#invoke:Materialize colors examples|allPalettesHTML}}

Utilizzo avanzato: 

{{Materialize colors}}
{{#invoke:Materialize colors examples|allPalettesHTML
|colorExtraClass = classe CSS aggiuntiva da mostrare per ogni colore
|colorPre        = wikitesto prima di ogni singolo colore
|colorPost       = wikitesto dopo ogni singolo colore
|containerPre    = wikitesto prima di ogni gruppo di colori
|containerPost   = wikitesto dopo ogni gruppo di colori
|isText          = normalmente è a 0 cioè la tavolozza è per contenuti, impostare ad 1 per colorare il testo
}}

Esempio di tavolozza per colorare un contenitore

Segue un esempio per generare una tavolozza dei nomi per colorare un contenitore, dividendo il risultato in qualche colonna (usando altri template di appoggio): 

{{Materialize colors}}
{{Bootstrap}}
<div class="row">
{{#invoke:Materialize colors examples
|allPalettesHTML
|containerPre  = <div class="col-md-3 materialize-colors-palette">
|containerPost = </div>
}}
</div>

Ecco il risultato che si otterrebbe utilizzando quest'ultimo wikitesto:

Apri per visualizzare l'esempio
red lighten-5
red lighten-4
red lighten-3
red lighten-2
red
red darken-1
red darken-2
red darken-3
red darken-4
red accent-1
red accent-2
red accent-3
red accent-4
pink lighten-5
pink lighten-4
pink lighten-3
pink lighten-2
pink
pink darken-1
pink darken-2
pink darken-3
pink darken-4
pink accent-1
pink accent-2
pink accent-3
pink accent-4
purple lighten-5
purple lighten-4
purple lighten-3
purple lighten-2
purple
purple darken-1
purple darken-2
purple darken-3
purple darken-4
purple accent-1
purple accent-2
purple accent-3
purple accent-4
deep-purple lighten-5
deep-purple lighten-4
deep-purple lighten-3
deep-purple lighten-2
deep-purple
deep-purple darken-1
deep-purple darken-2
deep-purple darken-3
deep-purple darken-4
deep-purple accent-1
deep-purple accent-2
deep-purple accent-3
deep-purple accent-4
indigo lighten-5
indigo lighten-4
indigo lighten-3
indigo lighten-2
indigo
indigo darken-1
indigo darken-2
indigo darken-3
indigo darken-4
indigo accent-1
indigo accent-2
indigo accent-3
indigo accent-4
blue lighten-5
blue lighten-4
blue lighten-3
blue lighten-2
blue
blue darken-1
blue darken-2
blue darken-3
blue darken-4
blue accent-1
blue accent-2
blue accent-3
blue accent-4
light-blue lighten-5
light-blue lighten-4
light-blue lighten-3
light-blue lighten-2
light-blue
light-blue darken-1
light-blue darken-2
light-blue darken-3
light-blue darken-4
light-blue accent-1
light-blue accent-2
light-blue accent-3
light-blue accent-4
cyan lighten-5
cyan lighten-4
cyan lighten-3
cyan lighten-2
cyan
cyan darken-1
cyan darken-2
cyan darken-3
cyan darken-4
cyan accent-1
cyan accent-2
cyan accent-3
cyan accent-4
teal lighten-5
teal lighten-4
teal lighten-3
teal lighten-2
teal
teal darken-1
teal darken-2
teal darken-3
teal darken-4
teal accent-1
teal accent-2
teal accent-3
teal accent-4
green lighten-5
green lighten-4
green lighten-3
green lighten-2
green
green darken-1
green darken-2
green darken-3
green darken-4
green accent-1
green accent-2
green accent-3
green accent-4
light-green lighten-5
light-green lighten-4
light-green lighten-3
light-green lighten-2
light-green
light-green darken-1
light-green darken-2
light-green darken-3
light-green darken-4
light-green accent-1
light-green accent-2
light-green accent-3
light-green accent-4
lime lighten-5
lime lighten-4
lime lighten-3
lime lighten-2
lime
lime darken-1
lime darken-2
lime darken-3
lime darken-4
lime accent-1
lime accent-2
lime accent-3
lime accent-4
yellow lighten-5
yellow lighten-4
yellow lighten-3
yellow lighten-2
yellow
yellow darken-1
yellow darken-2
yellow darken-3
yellow darken-4
yellow accent-1
yellow accent-2
yellow accent-3
yellow accent-4
amber lighten-5
amber lighten-4
amber lighten-3
amber lighten-2
amber
amber darken-1
amber darken-2
amber darken-3
amber darken-4
amber accent-1
amber accent-2
amber accent-3
amber accent-4
orange lighten-5
orange lighten-4
orange lighten-3
orange lighten-2
orange
orange darken-1
orange darken-2
orange darken-3
orange darken-4
orange accent-1
orange accent-2
orange accent-3
orange accent-4
deep-orange lighten-5
deep-orange lighten-4
deep-orange lighten-3
deep-orange lighten-2
deep-orange
deep-orange darken-1
deep-orange darken-2
deep-orange darken-3
deep-orange darken-4
deep-orange accent-1
deep-orange accent-2
deep-orange accent-3
deep-orange accent-4
brown lighten-5
brown lighten-4
brown lighten-3
brown lighten-2
brown
brown darken-1
brown darken-2
brown darken-3
brown darken-4
grey lighten-5
grey lighten-4
grey lighten-3
grey lighten-2
grey
grey darken-1
grey darken-2
grey darken-3
grey darken-4
blue-grey lighten-5
blue-grey lighten-4
blue-grey lighten-3
blue-grey lighten-2
blue-grey
blue-grey darken-1
blue-grey darken-2
blue-grey darken-3
blue-grey darken-4
white
black

Esempio di tavolozza per colorare un testo

Segue un esempio per generare una tavolozza dei nomi per colorare un testo, dividendo il risultato in qualche colonna (usando altri template di appoggio): 

{{Materialize colors}}
{{Bootstrap}}
<div class="row">
{{#invoke:Materialize colors examples
|allPalettesHTML
|isText        = 1
|containerPre  = <div class="col-md-4">
|containerPost = </div>
}}
</div>

Ecco il risultato che si otterrebbe utilizzando quest'ultimo wikitesto:

Apri per visualizzare l'esempio
red-text text-lighten-5
red-text text-lighten-4
red-text text-lighten-3
red-text text-lighten-2
red-text
red-text text-darken-1
red-text text-darken-2
red-text text-darken-3
red-text text-darken-4
red-text text-accent-1
red-text text-accent-2
red-text text-accent-3
red-text text-accent-4
pink-text text-lighten-5
pink-text text-lighten-4
pink-text text-lighten-3
pink-text text-lighten-2
pink-text
pink-text text-darken-1
pink-text text-darken-2
pink-text text-darken-3
pink-text text-darken-4
pink-text text-accent-1
pink-text text-accent-2
pink-text text-accent-3
pink-text text-accent-4
purple-text text-lighten-5
purple-text text-lighten-4
purple-text text-lighten-3
purple-text text-lighten-2
purple-text
purple-text text-darken-1
purple-text text-darken-2
purple-text text-darken-3
purple-text text-darken-4
purple-text text-accent-1
purple-text text-accent-2
purple-text text-accent-3
purple-text text-accent-4
deep-purple-text text-lighten-5
deep-purple-text text-lighten-4
deep-purple-text text-lighten-3
deep-purple-text text-lighten-2
deep-purple-text
deep-purple-text text-darken-1
deep-purple-text text-darken-2
deep-purple-text text-darken-3
deep-purple-text text-darken-4
deep-purple-text text-accent-1
deep-purple-text text-accent-2
deep-purple-text text-accent-3
deep-purple-text text-accent-4
indigo-text text-lighten-5
indigo-text text-lighten-4
indigo-text text-lighten-3
indigo-text text-lighten-2
indigo-text
indigo-text text-darken-1
indigo-text text-darken-2
indigo-text text-darken-3
indigo-text text-darken-4
indigo-text text-accent-1
indigo-text text-accent-2
indigo-text text-accent-3
indigo-text text-accent-4
blue-text text-lighten-5
blue-text text-lighten-4
blue-text text-lighten-3
blue-text text-lighten-2
blue-text
blue-text text-darken-1
blue-text text-darken-2
blue-text text-darken-3
blue-text text-darken-4
blue-text text-accent-1
blue-text text-accent-2
blue-text text-accent-3
blue-text text-accent-4
light-blue-text text-lighten-5
light-blue-text text-lighten-4
light-blue-text text-lighten-3
light-blue-text text-lighten-2
light-blue-text
light-blue-text text-darken-1
light-blue-text text-darken-2
light-blue-text text-darken-3
light-blue-text text-darken-4
light-blue-text text-accent-1
light-blue-text text-accent-2
light-blue-text text-accent-3
light-blue-text text-accent-4
cyan-text text-lighten-5
cyan-text text-lighten-4
cyan-text text-lighten-3
cyan-text text-lighten-2
cyan-text
cyan-text text-darken-1
cyan-text text-darken-2
cyan-text text-darken-3
cyan-text text-darken-4
cyan-text text-accent-1
cyan-text text-accent-2
cyan-text text-accent-3
cyan-text text-accent-4
teal-text text-lighten-5
teal-text text-lighten-4
teal-text text-lighten-3
teal-text text-lighten-2
teal-text
teal-text text-darken-1
teal-text text-darken-2
teal-text text-darken-3
teal-text text-darken-4
teal-text text-accent-1
teal-text text-accent-2
teal-text text-accent-3
teal-text text-accent-4
green-text text-lighten-5
green-text text-lighten-4
green-text text-lighten-3
green-text text-lighten-2
green-text
green-text text-darken-1
green-text text-darken-2
green-text text-darken-3
green-text text-darken-4
green-text text-accent-1
green-text text-accent-2
green-text text-accent-3
green-text text-accent-4
light-green-text text-lighten-5
light-green-text text-lighten-4
light-green-text text-lighten-3
light-green-text text-lighten-2
light-green-text
light-green-text text-darken-1
light-green-text text-darken-2
light-green-text text-darken-3
light-green-text text-darken-4
light-green-text text-accent-1
light-green-text text-accent-2
light-green-text text-accent-3
light-green-text text-accent-4
lime-text text-lighten-5
lime-text text-lighten-4
lime-text text-lighten-3
lime-text text-lighten-2
lime-text
lime-text text-darken-1
lime-text text-darken-2
lime-text text-darken-3
lime-text text-darken-4
lime-text text-accent-1
lime-text text-accent-2
lime-text text-accent-3
lime-text text-accent-4
yellow-text text-lighten-5
yellow-text text-lighten-4
yellow-text text-lighten-3
yellow-text text-lighten-2
yellow-text
yellow-text text-darken-1
yellow-text text-darken-2
yellow-text text-darken-3
yellow-text text-darken-4
yellow-text text-accent-1
yellow-text text-accent-2
yellow-text text-accent-3
yellow-text text-accent-4
amber-text text-lighten-5
amber-text text-lighten-4
amber-text text-lighten-3
amber-text text-lighten-2
amber-text
amber-text text-darken-1
amber-text text-darken-2
amber-text text-darken-3
amber-text text-darken-4
amber-text text-accent-1
amber-text text-accent-2
amber-text text-accent-3
amber-text text-accent-4
orange-text text-lighten-5
orange-text text-lighten-4
orange-text text-lighten-3
orange-text text-lighten-2
orange-text
orange-text text-darken-1
orange-text text-darken-2
orange-text text-darken-3
orange-text text-darken-4
orange-text text-accent-1
orange-text text-accent-2
orange-text text-accent-3
orange-text text-accent-4
deep-orange-text text-lighten-5
deep-orange-text text-lighten-4
deep-orange-text text-lighten-3
deep-orange-text text-lighten-2
deep-orange-text
deep-orange-text text-darken-1
deep-orange-text text-darken-2
deep-orange-text text-darken-3
deep-orange-text text-darken-4
deep-orange-text text-accent-1
deep-orange-text text-accent-2
deep-orange-text text-accent-3
deep-orange-text text-accent-4
brown-text text-lighten-5
brown-text text-lighten-4
brown-text text-lighten-3
brown-text text-lighten-2
brown-text
brown-text text-darken-1
brown-text text-darken-2
brown-text text-darken-3
brown-text text-darken-4
grey-text text-lighten-5
grey-text text-lighten-4
grey-text text-lighten-3
grey-text text-lighten-2
grey-text
grey-text text-darken-1
grey-text text-darken-2
grey-text text-darken-3
grey-text text-darken-4
blue-grey-text text-lighten-5
blue-grey-text text-lighten-4
blue-grey-text text-lighten-3
blue-grey-text text-lighten-2
blue-grey-text
blue-grey-text text-darken-1
blue-grey-text text-darken-2
blue-grey-text text-darken-3
blue-grey-text text-darken-4
white-text
black-text
-- This module was created to generate the examples in this page:
--   [[Template:Materialize colors]]
--   https://it.wiki.x.io/wiki/Template:Materialize_colors
--
-- CODE STYLE:
--   We are trying to make the module easy to be shared in other wikis so without external dependencies.
--   To be updated, import the version from:
--        [[w:it:Modulo:Materialize_colors_examples]]
--        https://it.wiki.x.io/wiki/Modulo:Materialize_colors_examples

---
--- LOCAL FUNCTIONS
---

---
-- Remove empty elements from a table
--
-- @param  args table
-- @return table
local function cleanWikitextArguments( args )
	local result = {}
	for k, v in pairs( args ) do

		-- eventually trim
		if type( v ) == 'string' then

			v = mw.text.trim( v )

			-- promote to nil
			if v == '' then
				v = nil	
			end
		end
		if v then
			result[ k ] = v
		end
	end
	return result
end

---
-- Array replace
--
-- This somehow emulates the PHP array_replace()
--
-- @param table..
-- @return table
--
local function arrayReplace( ... )

	-- final table
	local complete = {}

	-- table with all the arguments
	local args = { ... }

	-- for each table
	for _, arg in pairs( args ) do

		-- merge all the consecutive tables in the complete one
		for k, v in pairs( arg ) do

			-- the most left value takes precedence
			complete[ k ] = v
		end
	end

	return complete
end


---
-- Merge some frame arguments
--
-- @return table
local function frameArguments( frame )
	local argsParent = cleanWikitextArguments( frame:getParent().args or {} )
	local args       = cleanWikitextArguments( frame.args )
	return arrayReplace( args, argsParent )
end


--- Add a space in front of a CSS class
-- @param a
-- @param b string or nil
-- @return string
local function addStartingSpace( a )
	local s = a or ""
	if s ~= "" then
		s = " " .. s
	end
	return s
end

--- Concat two CSS classes with a space
-- @param a string or nil
-- @param b string or nil
-- @return string
local function concatClasses( a, b )
	local s = a or ""
	return s .. addStartingSpace( b )
end

--
-- CLASSES
--

---
-- Simple class describing a MaterialFlavor (e.g. "darken-2")
---
local MaterialFlavor = {}
MaterialFlavor.__index = MaterialFlavor

---
-- Simple class describing a MaterialColorFlavor (e.g. "red darken-2")
---
local MaterialColorFlavor = {}
MaterialColorFlavor.__index = MaterialColorFlavor

---
-- Simple class describing a MaterialColor (e.g. "red")
---
local MaterialColor = {}
MaterialColor.__index = MaterialColor

---
--- METHODS
---

---
-- Constructor for a MaterialFlavor
-- @param name base of the color flavor (e.g. "darken" for "darken-2")
-- @param i numeric index of the color flavor (e.g. 2 for "darken-2")
-- @param isDark whenever it's a dark flavor (e.g. true if it needs white text)
-- @return MaterialFlavor
function MaterialFlavor:new( base, i, isDark )
	local name = base
	if i then
		name = name .. "-" .. i
	end
	local materialFlavor = {
		base   = base,
		i      = i,
		name   = name,
		isDark = isDark or false,
	}
	setmetatable( materialFlavor, MaterialFlavor )
	return materialFlavor
end

---
-- Constructor for a MaterialColorFlavor
-- @param color name of the color e.g. 'red'
-- @param flavor reference to a MaterialFlavor
-- @return MaterialColorFlavor
function MaterialColorFlavor:new( color, flavor )
	local materialColorFlavor = {
		color  = color,
		flavor = flavor,
	}
	setmetatable( materialColorFlavor, MaterialColorFlavor )
	return materialColorFlavor
end

---
-- Get the CSS class name for the text
-- @return string
function MaterialColorFlavor:getTextCSSClass( isText )
	return self.flavor.isDark and not isText and 'white-text' or nil
end

---
-- Constructor for a MaterialColorFlavor
-- @param isText Whenever this should not be "red darken-1" but "red-text text-darken-1"
-- @return string
function MaterialColorFlavor:getContainerCSSClass( isText )
	local textPrefix = isText and 'text-' or ''
	local textSuffix = isText and '-text' or ''
	local cssClass = self.color .. textSuffix
	if self.flavor.name then
		cssClass = cssClass .. " " .. textPrefix .. self.flavor.name
	end
	return cssClass
end

---
-- Get the container's CSS class, plus the text class (if any)
-- @param isText Whenever this should not be "red darken-1" but "red-text text-darken-1"
-- @return string
function MaterialColorFlavor:getContainerCSSClassAndTextClass( isText )
	return concatClasses(
		self:getContainerCSSClass( isText ),
		self:getTextCSSClass( isText )
	)
end

--- Constructor for a MaterialColor
-- @param color name of the color e.g. 'red'
-- @param skip Table of flavor names to be skipped (e.g. { darken = true } to skip darken )
function MaterialColor:new( color, skip )

	-- no color no party
	if color == nil then
		error( "missing color name (e.g. red)" )
	end

	local materialColor = {
		color  = color,
		skip   = skip or {},
	}
	setmetatable( materialColor, MaterialColor )
	return materialColor
end

--- Do something for each color flavor
-- @param doSomething Your custom function - the first argument will be a MaterialColorFlavor
function MaterialColor:eachColorFlavor( flavors, doSomething )
	for i, flavor in pairs( flavors ) do
		if not self.skip[ flavor.base ] then
			doSomething( MaterialColorFlavor:new( self.color, flavor ) )
		end
	end
end

--- Create an HTML palette (a stack of colorized divs)
function MaterialColor:createPaletteHTML( flavors, args )
	local s = ""
	local APIX = "\""

	local colorPre  = args.colorPre  or ''
	local colorPost = args.colorPost or '\n'
	local colorExtraClass = addStartingSpace( args.colorExtraClass )
	local isText = tostring( args.isText ) == '1'

	-- for each color flavor, create some HTML
	self:eachColorFlavor( flavors, function( flavor )
		s = s .. colorPre
			.. "<div class=" .. APIX
			   -- start HTML class name:
			.. flavor:getContainerCSSClassAndTextClass( isText )
			.. colorExtraClass
			.. APIX .. ">"
			   -- displayed text:
			.. flavor:getContainerCSSClass( isText )
			.. "</div>"
			.. colorPost
	end )

	return s
end

-- create a new package
local p = {}

-- Internal function to save a new color by name
function p._newColor( color, skip )
	-- index by name
	p._KNOWN_COLORS_BY_NAME[ color ] = MaterialColor:new( color, skip )

	-- index by desired order
	p._KNOWN_COLORS_BY_ORDER[ #p._KNOWN_COLORS_BY_ORDER + 1 ] = p._KNOWN_COLORS_BY_NAME[ color ]
end

---
--- CONSTANTS
---

local SKIP_ACCENTS = {
	accent  = true, -- skip flavor accent
}

local NOT_REALLY_A_COLOR = {
	accent  = true, -- skip flavor accent
	lighten = true, -- skip flavor lighten
	darken  = true, -- skip flavor darken
}

---
--- INITIALIZATION
---
-- special flavors useful for black and white
p._SPECIAL_FLAVOR_NEUTRAL = MaterialFlavor:new( nil, nil        ) -- just color, no flavor
p._SPECIAL_FLAVOR_DARK    = MaterialFlavor:new( nil, nil, true  ) -- just color, no flavor, is dark

--- a complete palette of generic color flavors
p._KNOWN_FLAVORS = {
	MaterialFlavor:new( "lighten", 5       ),
	MaterialFlavor:new( "lighten", 4       ),
	MaterialFlavor:new( "lighten", 3       ),
	MaterialFlavor:new( "lighten", 2       ),
	p._SPECIAL_FLAVOR_NEUTRAL,                -- yup, the default color without flavor
	MaterialFlavor:new( "darken" , 1, true ), -- dark version with white text
	MaterialFlavor:new( "darken" , 2, true ), -- dark version with white text
	MaterialFlavor:new( "darken" , 3, true ), -- dark version with white text
	MaterialFlavor:new( "darken" , 4, true ), -- dark version with white text
	MaterialFlavor:new( "accent" , 1       ),
	MaterialFlavor:new( "accent" , 2       ),
	MaterialFlavor:new( "accent" , 3       ),
	MaterialFlavor:new( "accent" , 4       ),
}

--- a complete array of known colors indexed by name
p._KNOWN_COLORS_BY_ORDER = {}
p._KNOWN_COLORS_BY_NAME = {}
p._newColor( "red"         )
p._newColor( "pink"        )
p._newColor( "purple"      )
p._newColor( "deep-purple" )
p._newColor( "indigo"      )
p._newColor( "blue"        )
p._newColor( "light-blue"  )
p._newColor( "cyan"        )
p._newColor( "teal"        )
p._newColor( "green"       )
p._newColor( "light-green" )
p._newColor( "lime"        )
p._newColor( "yellow"      )
p._newColor( "amber"       )
p._newColor( "orange"      )
p._newColor( "deep-orange" )
p._newColor( "brown"      , SKIP_ACCENTS )
p._newColor( "grey"       , SKIP_ACCENTS )
p._newColor( "blue-grey"  , SKIP_ACCENTS )

-- add other special colors
p._WHITE = MaterialColor:new( "white", NOT_REALLY_A_COLOR )
p._BLACK = MaterialColor:new( "black", NOT_REALLY_A_COLOR )

---
--- CORE FUNCTIONS
---

-- get a color by its name
function p._getColor( name )
	return p._KNOWN_COLORS_BY_NAME[ name ] or error( "unknown color: " .. tostring( name ) )	
end

--- Generate an HTML color palette
-- This function should be called from Lua
function p._paletteHTML( args )
	args = args or {}

	-- find the color and generate the HTML palette
	return p._getColor( args.color )
		:createPaletteHTML( p._KNOWN_FLAVORS, args )
end

--- Generate an HTML color palette
-- This function should be called from wikitext
function p.paletteHTML( frame )
	local args = frameArguments( frame )
	return p._paletteHTML( args )
end

--- Generate an HTML color palette
-- This function should be called from Lua
function p._paletteHTML( args )

	-- arguments
	args = args or {}

	-- find the color and generate the HTML palette
	return p._getColor( args.color )
		:createPaletteHTML( p._KNOWN_FLAVORS, args )
end

--- Generate an HTML color palette
-- This function should be called from wikitext
function p.paletteHTML( frame )
	local args = frameArguments( frame )
	return p._paletteHTML( args )
end

--- Generate an HTML color palette
-- This function should be called from Lua
function p._allPalettesHTML( args )

	local s = ""

	-- arguments
	args = args or {}
	local containerPre   = args.containerPre  or ''
	local containerPost  = args.containerPost or ''

	-- generate all palettes (but not white and black)
	for i, color in pairs( p._KNOWN_COLORS_BY_ORDER ) do
		s = s .. containerPre
		s = s .. color:createPaletteHTML( p._KNOWN_FLAVORS, args )
		s = s .. containerPost
	end

	-- generate also a nice palette for white and black
	s = s .. containerPre
	s = s .. p._WHITE:createPaletteHTML( { p._SPECIAL_FLAVOR_NEUTRAL }, args )
	s = s .. p._BLACK:createPaletteHTML( { p._SPECIAL_FLAVOR_DARK    }, args )
	s = s .. containerPost

	-- find the color and generate the HTML palette
	return s
end

--- Generate an HTML color palette
-- This function should be called from wikitext
function p.allPalettesHTML( frame )
	local args = frameArguments( frame )
	return p._allPalettesHTML( args )
end

-- return the package
return p
Estratto da "https://it.wiki.x.io/w/index.php?title=Modulo:Materialize_colors_examples&oldid=126634832"