Fandom Developers Wiki
Advertisement

Ця сторінка повністю або частково не перекладена. Прохання перекласти її відповідною мовою (українська).

Ця бібліотека призначена для перехоплення кольорів серед Фандому. Бібліотека виконує такі функції:

  1. Надає список найважливіших кольорів на даній сторінці, які ви можете використати в своєму скрипті для адаптації якихось його елементів до колірної схеми вікі;
  2. Дає можливість маніпулювати кольорами за допомогою певних методів, тому ви зможете створити свою колірну схему на базі існуючої.

Примітка: ця бібліотека призначена для JavaScript-розробників. Якщо ви не пишете скрипт, вона буде даремна для вас. Відвідайте w:Help:Color, щоб отримати про кольори більше інформації.

Кольори[]

  • dev.colors.fandom.body#f6f6f6для фону сторінки$body
  • dev.colors.fandom.page#ffffffдля фону статті$page
  • dev.colors.fandom.menu#404a57для елементів меню та клавіш$menu
  • dev.colors.fandom.header#404a57для капелюхи сторінок$header
  • dev.colors.fandom.link#009bbeдля посилань$content link
  • dev.colors.fandom.split#bacdd8для розділень фонів$split
  • dev.colors.fandom.contrast#ffffffдля тексту на клавішах і у меню$contrast
  • dev.colors.fandom.text#3a3a3aдля тексту статті$text
  • dev.colors.fandom.border#ccccccдля меж і роздільників$border
  • dev.colors.fandom.gradient#6b7b91для взаємодій з меню і елементами$gradient


Застосування кольорів[]

Найпростіший спосіб використовувати кольори вище — використовувати CSS, але замість звичайних кольорів застосовувати псевдокольори:

a { color: $link; }

Напишіть ці стильні правила в рядок, а потім вставте її в метод dev.colors.css(). Він замінить все псевдовеличини на справжні і з'явиться в «голові» сторінки.

Приклад 1:

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

Ви можете використати необов'язковий другий параметр, щоб додати свої власні псевдокольори. Але зауважте, що для застосування їх потрібно писати ім'я кольору зі значка $.

Приклад 2:

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

Освітленість і затемненність[]

Ключовий момент дизайну колірних схем по всьому Фандому — визначення того, яка це тема: темна чи світла. dev.colors пропонує для цих цілей спеціальний метод, а, що більш важливо, в код сторінки будуть додані два класи:

  1. .menu-dark і .menu-bright позначають клавіші і меню в темній і світлій темах відповідно;
  2. .page-dark і .page-bright залежить від фону статті, темного чи світлого.

Управління кольорами[]

Щоб управляти кольорами, вам потрібен об'єкт з кольором. dev.colors надає три методи, що створюють цей об'єкт:

// parse() дозволяє створити колір з рядка:
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');

// і з назв кольорів по dev.colors.wikia:
var body = dev.colors.parse(dev.colors.fandom.body);

// fromRgb() дає виставити кольори за допомогою цифр значення повинні бути в проміжку від 0 до 255:
var red = dev.colors.fromRgb(255, 0, 0);

// fromHsl() жіє схоже, але використовує кольорову модель HSL значення повинні бути в проміжку від 0 до 1:
var red = dev.colors.fromHsl(0, 1, 1);

І тепер, коли об'єкт у нас є, їм можна управляти:

// освітлити червоний на 20%:
var lightRed = red.lighten(20);

// зменшити насиченість червоного на 20%:
var paleRed = red.saturate(-20);

// провернути відтінок на 180 градусів для отримання відповідного вихідному кольору:
var cyan = red.rotate(180);

// змішати два кольори:
var orange = red.mix('yellow');

Негативні кольори[]

У dev.colors є дві функції для звернення кольорів в негативні: complement() і invert(). Вони обидва вкрай прості, а їх дія на кольори трохи різниться:

  • invert() робить протилежними відтінок, насиченість і яскравість кольору, оскільки він діє в схемі RGB:
  • complement() звертає в негативний тільки відтінок. Насиченість і яскравість не змінюються: . Найочевиднішим зміною після застосування методу є зміна кольору. Відтінки чорного, білого і сірого не змінюються.

Деякі приклади

інверт. компл. інверт. компл. інверт. компл.
red
white
orchid
lime
black
pink
blue
gray
indigo
cyan
lightgray
khaki
yellow
darkgray
brown
magenta
beige
peru
springgr.

Конвертація об'єктів Color у строках[]

Коли ви зробили кольори, які вам до душі, може з'явитися потреба конвертувати їх назад в рядки для подальшого використання їх в такому вигляді в 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%)"

// за замовчуванням стоїть шістнадцятковий формат:
console.log("red: " + red); // "red: #FF0000"

Умови роботи[]

Колірний простір HSL дозволяє зробити зміни кольорів, ніяк на себе не проявляють:

  • Якщо насиченість дорівнює 0, зміна відтінку ні до чого не приведе. Колір так і залишиться сірим.
  • Якщо яскравість дорівнює 0, ні відтінок, ні насиченість нічого не дають. Колір так і буде чорним.

Ця бібліотека не відфільтровує і не вилучят значення, що не володіють ефектом.

Такі методи використовують кольоровий простір HSL:

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

Виноска[]

Методи dev.colors[]

dev.colors.parse(color)
Звертає рядок в об'єкт Color
Parameters
  1. color: рядок
Returns
новий об'єкт Color
Throws
помилку, якщо звернути не можна або якщо значення невірні
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)
Створює об'єкт Color зі значень RGB
Parameters
  1. red: число від 0 до 255
  2. green: число від 0 до 255
  3. blue: число від 0 до 255
Returns
новий об'єкт Color
Throws
помилку, якщо параметри не є числами або якщо вони не входять у встановлений проміжок
Examples
var red = dev.colors.fromRgb(255, 0, 0);
dev.colors.fromHsl(hue, saturation, lightness)
створює об'єкт Color зі значень HSL
Parameters
  1. hue: число від 0 до 1
  2. saturation: число від 0 до 1
  3. lightness: число від 0 до 1
Returns
новий об'єкт Color
Throws
помилку, якщо параметри не є числами або якщо вони не входять у встановлений проміжок
Examples
var red = dev.colors.fromHsl(0, 1, 1);
dev.colors.css(styles)
додає CSS-код в «голову» документа після заміни псевдокольорів
Parameters
  1. styles: рядок, аналізується за правилами CSS
dev.colors.css(styles, custom)
додає CSS-код в «голову» документа після заміни псевдокольорів
Parameters
  1. styles: рядок, аналізується за правилами CSS
  2. custom: об'єкт з псведовеличинами в якості ключів і дійсними величинами як значення

Методи об'єкта Color[]

Color.rotate(degree)
обертає відтінок кольору на заданий кут
Parameters
  1. degree: Number between -360 and 360
Returns
новий об'єкт Color
Throws
помилку, якщо параметри не є числами або якщо вони не входять у встановлений проміжок
Examples
var magenta = dev.colors.parse('lime').rotate(180);
var blue = blue.rotate(360).rotate(-360);  // no change!
Color.saturate(percentage)
збільшує (позитивні значення) і зменшує (негативні) насиченість кольору
Parameters
  1. percentage: -100 до 100
Returns
новий об'єкт Color
Throws
помилку, якщо параметри не є числами або якщо вони не входять у встановлений проміжок
Examples
var paleBlue = dev.colors.parse('blue').saturate(-10);
Color.lighten(percentage)
освітлює (позитивні значення) і затемнює (негативні) колір
Parameters
  1. percentage: -100 до 100
Returns
новий об'єкт Color
Throws
помилку, якщо параметри не є числами або якщо вони не входять у встановлений проміжок
Examples
var darkBlue = dev.colors.parse('blue').lighten(-10);
Color.mix(otherColor)
змішує два кольори (еквівалент функції в SASS)
Parameters
  1. otherColor: об'єкт Color або рядок, яку можна перетворити в об'єкт
Returns
новий об'єкт Color
Throws
помилку, якщо параметри не є об'єктами Color або якщо їх не можна проаналізувати
Examples
var orange = yellow.mix('red');
Color.mix(otherColor, percentage)
Змішує даний колір з поточним. Дане в функції значення визначає кількість поточного кольору. Значення менше 50 діють проти нього, більше 50 — на користь нього.
Parameters
  1. otherColor: об'єкт Color або рядок, яку можна перетворити в об'єкт
  2. percentage: число від 0 до 100
Returns
новий об'єкт Color
Throws
помилку, якщо параметри не є об'єктами Color або якщо їх не можна проаналізувати
Examples
var sunYellow = yellow.mix('red', 80);
Color.invert()
інвертує колір (див. розділ Негативні кольори)
Returns
новий об'єкт Color
Color.complement()
підбирає відповідний колір (див. розділ Негативні кольори)
Returns
новий об'єкт Color
Color.isBright()
перевірять, світлий чи колір або темний (яскравість)
Returns
boolean
Examples
console.log(dev.colors.parse('lightgray').isBright());  // true
console.log(dev.colors.parse('darkgray').isBright());   // false
Color.isColor()
перевіряє, чи є колір відтінком сірого, тобто більше чи нуля насиченість і яскравість
Returns
boolean
Examples
console.log(dev.colors.parse('white').isColor());  // false
console.log(dev.colors.parse('orange').isColor()); // true
Color.red()
отримує або задає кількість червоного відтінку у кольорі
Returns
число від 0 до 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: число від 0 до 255
Returns
новий об'єкт Color
Throws
помилку, якщо параметри не є числами або якщо вони не входять у встановлений проміжок
Examples
var white = cyan.red(255);
Color.green()
отримує або задає кількість зеленого відтінку у кольорі
Returns
число від 0 до 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: число від 0 до 255
Returns
новий об'єкт Color
Throws
помилку, якщо параметри не є числами або якщо вони не входять у встановлений проміжок
Examples
var white = magenta.green(255);
Color.blue()
отримує або задає кількість синього відтінку у кольорі
Returns
число від 0 до 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: число від 0 до 255
Returns
новий об'єкт Color
Throws
помилку, якщо параметри не є числами або якщо вони не входять у встановлений проміжок
Examples
var white = yellow.blue(255);
Color.hue()
отримає або задає відтінок кольору
Returns
число від 0 до 1
Examples
alert(dev.colors.parse('white').hue()); // 0
Color.hue(value)
Sets the hue of a color.
Parameters
  1. value: число від 0 до 1
Returns
новий об'єкт Color
Throws
помилку, якщо параметри не є числами або якщо вони не входять у встановлений проміжок
Examples
var red = cyan.hue(0);
Color.saturation()
отримає або задає насиченість кольору
Returns
число від 0 до 1
Examples
alert(dev.colors.parse('white').saturation()); // 0
Color.saturation(value)
Sets the saturation of a color.
Parameters
  1. value: число від 0 до 1
Returns
новий об'єкт Color
Throws
помилку, якщо параметри не є числами або якщо вони не входять у встановлений проміжок
Examples
var white = red.saturation(0);
Color.lightness()
отримає або задає яскравість кольору
Returns
число від 0 до 1
Examples
alert(dev.colors.parse('white').lightness()); // 1
Color.lightness(value)
Sets the saturation of a color.
Parameters
  1. value: число від 0 до 1
Returns
новий об'єкт Color
Throws
помилку, якщо параметри не є числами або якщо вони не входять у встановлений проміжок
Examples
var black = red.lightness(0);
Color.rgb()
конвертує об'єкт Color в рядок у форматі RGB
Returns
рядок
Examples
alert('Blue is: ' + dev.colors.parse('blue').rgb()); // Blue is: rgb(0, 0, 255)
Color.hsl()
конвертує об'єкт Color в рядок у форматі HSL
Returns
рядок
Examples
alert('Blue is: ' + dev.colors.parse('blue').hsl());
// Blue is: hsl(240, 100%, 50%)
Color.hex()
конвертує об'єкт Color в рядок у форматі HEX
Returns
рядок
Examples
alert('Blue is: ' + dev.colors.parse('blue').hex()); // Blue is: #0000FF
Color.toString()
toString() — стандартна функція JavaScript. Тут має подібну функцію — Color.hex. Конвертує об'єкт Color в рядок у форматі HEX
Returns
рядок
Examples
alert('Blue is: ' + dev.colors.parse('blue')); // Blue is: #0000ff
Advertisement