Fandom Developers Wiki
Advertisement

Esta página, o partes de ella, siguen sin traducir. Por favor traduzcala al lenguaje apropriado (español).

Esta es una biblioteca para manejar colores en el entorno de Fandom. Esta biblioteca tiene dos propósitos: Nota: Esta biblioteca está destinada a ser utilizada por desarrolladores de JavaScript. Si no está escribiendo un guión, esta biblioteca no le será de utilidad. Es posible que desee consultar w:Help:Color para obtener más información sobre los colores.

Colores[]

  • dev.colors.fandom.body#f6f6f6para el fondo del contenido$body
  • dev.colors.fandom.page#ffffffpara el fondo del artículo$page
  • dev.colors.fandom.menu#404a57para elementos de menú/botón$menu
  • dev.colors.fandom.header#404a57para el encabezado$header
  • dev.colors.fandom.link#009bbepara enlace de contenido$content link
  • dev.colors.fandom.split#bacdd8para fondos divididos$split
  • dev.colors.fandom.contrast#ffffffpara texto del menú/botón$contrast
  • dev.colors.fandom.text#3a3a3apara texto del artículo$text
  • dev.colors.fandom.border#ccccccpara color del borde/separador$border
  • dev.colors.fandom.gradient#6b7b91para interacción del menú/elemento$gradient


Aplicando los colores[]

La forma más sencilla de utilizar los colores anteriores es escribir CSS normal pero utilizar pseudocolores en lugar de los normales:

a { color: $link; }

Agregue todas estas reglas a una cadena y luego páselo a dev.colors.css(). dev.colors.css() reemplazará todos los pseudo-valores y agregará la hoja de estilo al encabezado del documento:

Ejemplo 1:

dev.colors.css('a { color: $link; }');

Puede utilizar un segundo parámetro opcional para agregar pseudovalores propios. Tenga en cuenta que debe anteponer el nombre de sus propios valores con un signo $:

Ejemplo 2:

dev.colors.css('a { color: $link; background: $myBackGround; }', {
    myBackGround: 'black'
});

Brillo y oscuridad[]

Una parte clave del diseño de los distintos esquemas de color en Fandom es determinar si el esquema es brillante u oscuro. dev.colors ofrece un método para eso, pero más importante aún: agregará dos clases a la etiqueta del cuerpo:

  1. .menu-dark o .menu-bright - dependiendo de si el fondo del menú y los botones es oscuro o brillante
  2. .page-dark o .page-bright - dependiendo de si el fondo del área del artículo es oscuro o brillante

Manipulación de colores[]

Para manipular el color, primero debe crear un objeto de color. dev.colors ofrece tres fábricas:

// parse allows you to create a color object from a string:
var red = dev.colors.parse('#FF0000');
var red = dev.colors.parse('#F00');
var red = dev.colors.parse('rgb(255, 0, 0)');
var red = dev.colors.parse('red');

// the values of dev.colors.fandom are strings too:
var body = dev.colors.parse(dev.colors.fandom.body);

// fromRgb allows you to set the RGB values numerically (values must be between 0 and 255):
var red = dev.colors.fromRgb(255, 0, 0);

// fromHsl allows you to use the HSL color model (values must be between 0 and 1):
var red = dev.colors.fromHsl(0, 1, 1);

Una vez que tenga un objeto de color, puede manipularlo:

// lighten red by 20 percent:
var lightRed = red.lighten(20);

// desaturate red by 20 percent:
var paleRed = red.saturate(-20);

// rotate the hue by 180 degrees to get the complementary color:
var cyan = red.rotate(180);

// mix two colors:
var orange = red.mix('yellow');

Negar colores[]

dev.colors tiene dos funciones para negar colores: complement() y invert(). Si bien ambos son matemáticamente simples, su efecto sobre los colores es un poco difícil de visualizar:

  • invert() niega el tono, la saturación y la claridad de un color porque actúa en el espacio de color RGB:
  • complement() niega solo el tono. La saturación y la luminosidad permanecen sin cambios: . La consecuencia más obvia es que complement() solo afecta a los colores. El blanco, el negro y cualquier tono gris intermedio permanecen (aparentemente) sin cambios.

Algunos ejemplos:

invert compl. invert compl. invert compl.
red
white
orchid
lime
black
pink
blue
gray
indigo
cyan
lightgray
khaki
yellow
darkgray
brown
magenta
beige
peru
springgr.

Conversión de objetos de color en cadenas[]

Cuando haya mezclado y combinado los colores que le gustan, querrá convertirlos nuevamente en cadenas para poder usarlos en CSS:

console.log("red: " + red.hex()); // "red: #FF000"
console.log("red: " + red.rgb()); // "red: rgb(255, 0, 0)"
console.log("red: " + red.hsl()); // "hsl: hsl(0, 100%, 100%)"

// hex format is the default:
console.log("red: " + red); // "red: #FF0000"

Condiciones de borde[]

El espacio de color HSL permite cambios que no tienen ningún efecto visual:

  • Si la saturación de un color es 0, un cambio de tono ya no tiene efecto visual. El color seguirá siendo un tono gris
  • Si la claridad de un color es 0, ni un cambio de tono ni un cambio de saturación tendrán un efecto visual. El color seguirá siendo negro.

Esta biblioteca no filtra y descarta valores que no tienen ningún efecto.

Los siguientes métodos utilizan el espacio de color HSL:

  • Color.rotate
  • Color.hue
  • Color.saturate
  • Color.saturation
  • Color.lighten
  • Color.lightness
  • Color.complement
  • Color.rotate
  • Color.hue
  • Color.saturate
  • Color.saturation
  • Color.lighten
  • Color.lightness
  • Color.complement

Referencia[]

Methods of dev.colors[]

dev.colors.parse(color)
Parses a color string into a Color object.
Parameters
  1. color: string
Returns
New Color object
Throws
Error if string cannot be parsed or values are out of bounds
Examples
var red   = dev.colors.parse('#FF0000'),
    green = dev.colors.parse('#0F0'),
    blue  = dev.colors.parse('rgb(0, 0, 255)'),
    white = dev.colors.parse('white'),
    page  = dev.colors.parse(dev.colors.fandom.page);
dev.colors.fromRgb(red, green, blue)
Creates a Color object from numeric RGB values.
Parameters
  1. red: Number between 0 and 255
  2. green: Number between 0 and 255
  3. blue: Number between 0 and 255
Returns
New Color object
Throws
Error if parameters aren't numbers or out of bounds
Examples
var red = dev.colors.fromRgb(255, 0, 0);
dev.colors.fromHsl(hue, saturation, lightness)
Creates a Color object from HSL values.
Parameters
  1. hue: Number between 0 and 1
  2. saturation: Number between 0 and 1
  3. lightness: Number between 0 and 1
Returns
New Color object
Throws
Error if parameters aren't numbers or out of bounds
Examples
var red = dev.colors.fromHsl(0, 1, 1);
dev.colors.css(styles)
Adds CSS-string to the document head after replacing pseudo-values.
Parameters
  1. styles: string that can be parsed into CSS
dev.colors.css(styles, custom)
Adds CSS-string to the document head after replacing pseudo-values.
Parameters
  1. styles: string that can be parsed into CSS
  2. custom: object with pseudo-values as keys and real values as values

Methods of Color Objects[]

Color.rotate(degree)
Rotates a color's hue by a degree.
Parameters
  1. degree: Number between -360 and 360
Returns
New Color object
Throws
Error if the argument is not a number or out of bounds
Examples
var magenta = dev.colors.parse('lime').rotate(180);
var blue = blue.rotate(360).rotate(-360);  // no change!
Color.saturate(percentage)
Saturates (positive values) or desaturates (negative values) a color.
Parameters
  1. percentage: Number between -100 and 100
Returns
New Color object
Throws
Error if the argument is not a number or out of bounds
Examples
var paleBlue = dev.colors.parse('blue').saturate(-10);
Color.lighten(percentage)
Lightens (positive values) or darkens (negative values) a color.
Parameters
  1. percentage: Number between -100 and 100
Returns
New Color object
Throws
Error if the argument is not a number or out of bounds
Examples
var darkBlue = dev.colors.parse('blue').lighten(-10);
Color.mix(otherColor)
Mixes two colors together (like the equivalent SASS function) in equal proportion (50-50).
Parameters
  1. otherColor: Color object or string that can be parsed into Color object
Returns
New Color object
Throws
Error if the first argument is not a Color object or cannot be parsed
Examples
var orange = yellow.mix('red');
Color.mix(otherColor, percentage)
Mixes a second color with the object's current color. The given weight value biases the proportion/dominance of the current color. Values below 50 bias against the current color, values above 50 are in favor of it.
Parameters
  1. otherColor: Color object or string that can be parsed into Color object
  2. percentage: Number between 0 and 100
Returns
New Color object
Throws
Error if the first argument is not a Color object or cannot be parsed
Examples
var sunYellow = yellow.mix('red', 80);
Color.invert()
Inverts a color (see section about negating colors above).
Returns
New Color object
Color.complement()
Complements a color (see section about negating colors above).
Returns
New Color object
Color.isBright()
Checks whether a color is bright or dark (luminance).
Returns
boolean
Examples
console.log(dev.colors.parse('lightgray').isBright());  // true
console.log(dev.colors.parse('darkgray').isBright());   // false
Color.isColor()
Checks whether this color is not a graytone. i.e. saturation and lightness are both greater than zero.
Returns
boolean
Examples
console.log(dev.colors.parse('white').isColor());  // false
console.log(dev.colors.parse('orange').isColor()); // true
Color.red()
Gets the amount of red spectrum mixed into the color.
Returns
Number between 0 and 255
Examples
alert(dev.colors.parse('red').red()); // 255
Color.red(value)
Sets the amount of red spectrum mixed into the color.
Parameters
  1. value: Number between 0 and 255
Returns
New Color object
Throws
Error if the argument is not a number or out of bounds
Examples
var white = cyan.red(255);
Color.green()
Gets the amount of green spectrum mixed into the color.
Returns
Number between 0 and 255
Examples
alert(dev.colors.parse('red').green()); // 0
Color.green(value)
Sets the amount of green spectrum mixed into the color.
Parameters
  1. value: Number between 0 and 255
Returns
New Color object
Throws
Error if the argument is not a number or out of bounds
Examples
var white = magenta.green(255);
Color.blue()
Gets the amount of blue spectrum mixed into the color.
Returns
Number between 0 and 255
Examples
alert(dev.colors.parse('red').blue()); // 0
Color.blue(value)
Sets the amount of blue spectrum mixed into the color.
Parameters
  1. value: Number between 0 and 255
Returns
New Color object
Throws
Error if the argument is not a number or out of bounds
Examples
var white = yellow.blue(255);
Color.hue()
Gets the hue of a color.
Returns
Number between 0 and 1
Examples
alert(dev.colors.parse('white').hue()); // 0
Color.hue(value)
Sets the hue of a color.
Parameters
  1. value: Number between 0 and 1
Returns
New Color object
Throws
Error if the argument is not a number or out of bounds
Examples
var red = cyan.hue(0);
Color.saturation()
Gets the saturation of a color.
Returns
Number between 0 and 1
Examples
alert(dev.colors.parse('white').saturation()); // 0
Color.saturation(value)
Sets the saturation of a color.
Parameters
  1. value: Number between 0 and 1
Returns
New Color object
Throws
Error if the argument is not a number or out of bounds
Examples
var white = red.saturation(0);
Color.lightness()
Gets the lightness (brightness) of a color.
Returns
Number between 0 and 1
Examples
alert(dev.colors.parse('white').lightness()); // 1
Color.lightness(value)
Sets the saturation of a color.
Parameters
  1. value: Number between 0 and 1
Returns
New Color object
Throws
Error if the argument is not a number or out of bounds
Examples
var black = red.lightness(0);
Color.rgb()
Converts the Color object to a string in RGB format.
Returns
string
Examples
alert('Blue is: ' + dev.colors.parse('blue').rgb()); // Blue is: rgb(0, 0, 255)
Color.hsl()
Converts the Color object to a string in HSL format.
Returns
string
Examples
alert('Blue is: ' + dev.colors.parse('blue').hsl());
// Blue is: hsl(240, 100%, 50%)
Color.hex()
Converts the Color object to a string in hex format. This method is more or less redundant since it doubles as the Color object's toString() method. Whenever you let JavaScript handle the converting you will implicitly call Color.hex.
Returns
string
Examples
alert('Blue is: ' + dev.colors.parse('blue').hex()); // Blue is: #0000FF
Color.toString()
toString() is a standard JavaScript function. This is an alias for Color.hex which will automatically convert your color object instances into hex form when concatenated.
Returns
string
Examples
alert('Blue is: ' + dev.colors.parse('blue')); // Blue is: #0000ff
Advertisement