@vimeo/iris
Version:
Vimeo Design System
503 lines (498 loc) • 12.8 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var polished = require('polished');
exports.Colors = void 0;
(function (Colors) {
Colors["Red"] = "#E22B12";
Colors["Blue"] = "#00adef";
Colors["Green"] = "#28A878";
Colors["Yellow"] = "#ffb21e";
Colors["Slate"] = "#657987";
Colors["Grayscale"] = "#666666";
Colors["black"] = "#000000";
Colors["white"] = "#FFFFFF";
Colors["Fuschia"] = "#ED72C2";
Colors["Cerise"] = "#FF6678";
Colors["Vermilion"] = "#E75A32";
Colors["Peridot"] = "#9DB753";
Colors["Cerulean"] = "#008285";
Colors["Lapis"] = "#4B7AC2";
Colors["Amethyst"] = "#8697FB";
Colors["Taupe"] = "#BBA69C";
Colors["Violet"] = "#743ED9";
})(exports.Colors || (exports.Colors = {}));
var black = '#000000';
var white = '#FFFFFF';
var RedCache = {
'50': '#fee7e5',
'100': '#fdd1cb',
'200': '#faa599',
'300': '#f77866',
'350': '#f5624e',
'400': '#f34c35',
'500': '#E22B12',
'525': '#e21f05',
'600': '#c01902',
'700': '#911100',
'800': '#610c00',
'850': '#480800',
'900': '#300600',
'950': '#170300',
};
var red = function (grade) {
return RedCache[grade] || irisColor(exports.Colors.Red, grade);
};
var YellowCache = {
'50': '#fff7e8',
'100': '#ffefd2',
'200': '#ffe0a5',
'300': '#ffd078',
'350': '#ffc961',
'400': '#ffc14b',
'500': '#ffb21e',
'525': '#ffad0f',
'600': '#da920a',
'700': '#a56e06',
'800': '#6f4a03',
'850': '#533702',
'900': '#372500',
'950': '#1b1200',
};
var yellow = function (grade) {
return YellowCache[grade] || irisColor(exports.Colors.Yellow, grade);
};
var GreenCache = {
'50': '#e8f7f1',
'100': '#d3eee3',
'200': '#a7dec7',
'300': '#7cccab',
'350': '#66c49d',
'400': '#52ba90',
'500': '#28A878',
'525': '#269f6e',
'600': '#1e885c',
'700': '#166646',
'800': '#0e452f',
'850': '#0a3424',
'900': '#052316',
'950': '#02110b',
};
var green = function (grade) {
return GreenCache[grade] || irisColor(exports.Colors.Green, grade);
};
var BlueCache = {
'50': '#e5f5fd',
'100': '#c8edff',
'200': '#99d9f8',
'300': '#5cc9ff',
'350': '#4cbdf3',
'400': '#33b3f2',
'500': '#00adef',
'525': '#0099e3',
'600': '#0080bf',
'700': '#00608f',
'800': '#00405f',
'850': '#002f47',
'900': '#00202f',
'950': '#001017',
};
var blue = function (grade) {
return BlueCache[grade] || irisColor(exports.Colors.Blue, grade);
};
var SlateCache = {
'50': '#eef1f4',
'100': '#dee4e9',
'200': '#bdcad3',
'300': '#9caebd',
'350': '#8da1b1',
'400': '#7c93a6',
'500': '#657987',
'525': '#597286',
'600': '#496073',
'700': '#364857',
'800': '#23313b',
'850': '#1a252c',
'900': '#11191d',
'950': '#080d0f',
};
var slate = function (grade) {
return SlateCache[grade] || irisColor(exports.Colors.Slate, grade);
};
var GrayscaleCache = {
'50': '#efefef',
'100': '#e0e0e0',
'200': '#c1c1c1',
'300': '#a3a3a3',
'350': '#939393',
'400': '#848484',
'500': '#666666',
'525': '#606060',
'600': '#515151',
'700': '#3d3d3d',
'800': '#282828',
'850': '#1e1e1e',
'900': '#141414',
'950': '#0a0a0a',
};
var grayscale = function (grade) {
return GrayscaleCache[grade] || irisColor(exports.Colors.Grayscale, grade, true);
};
var FuschiaCache = {
'50': '#ffeef8',
'100': '#ffdef3',
'200': '#febfe8',
'300': '#ff9fdd',
'350': '#fe90d8',
'400': '#fd81d2',
'500': '#ED72C2',
'525': '#f35abd',
'600': '#d642a3',
'700': '#a72b7b',
'800': '#701b53',
'850': '#55143e',
'900': '#390c29',
'950': '#1c0615',
};
var fuschia = function (grade) {
return FuschiaCache[grade] || irisColor(exports.Colors.Fuschia, grade);
};
var CeriseCache = {
'50': '#ffeff1',
'100': '#ffe0e4',
'200': '#ffc1c9',
'300': '#ffa3ae',
'350': '#ff93a0',
'400': '#ff8493',
'500': '#FF6678',
'525': '#fb576b',
'600': '#da4456',
'700': '#a82e3d',
'800': '#711d28',
'850': '#55151d',
'900': '#380e12',
'950': '#1c0708',
};
var cerise = function (grade) {
return CeriseCache[grade] || irisColor(exports.Colors.Cerise, grade);
};
var VermilionCache = {
'50': '#ffefe7',
'100': '#ffe0d1',
'200': '#ffc2a3',
'300': '#ffa575',
'350': '#fe965f',
'400': '#fc894a',
'500': '#E75A32',
'525': '#dc512e',
'600': '#ba3826',
'700': '#8d1d1b',
'800': '#5f1117',
'850': '#480c14',
'900': '#30070e',
'950': '#180308',
};
var vermilion = function (grade) {
return VermilionCache[grade] || irisColor(exports.Colors.Vermilion, grade);
};
var PeridotCache = {
'50': '#fbf8e9',
'100': '#f7f4d5',
'200': '#edecaf',
'300': '#dde189',
'350': '#d1da78',
'400': '#c4d367',
'500': '#9DB753',
'525': '#91bb40',
'600': '#6da232',
'700': '#437d21',
'800': '#1f5713',
'850': '#14410d',
'900': '#092c08',
'950': '#041605',
};
var peridot = function (grade) {
return PeridotCache[grade] || irisColor(exports.Colors.Peridot, grade);
};
var CeruleanCache = {
'50': '#e1f6ec',
'100': '#c6ecdc',
'200': '#8ed9c2',
'300': '#5ac1aa',
'350': '#40b5a3',
'400': '#2ba597',
'500': '#008285',
'525': '#006d7e',
'600': '#00586a',
'700': '#003e4f',
'800': '#002735',
'850': '#001c27',
'900': '#00111a',
'950': '#00080d',
};
var cerulean = function (grade) {
return CeruleanCache[grade] || irisColor(exports.Colors.Cerulean, grade);
};
var LapisCache = {
'50': '#e9f0fc',
'100': '#d3e2fa',
'200': '#acc7f1',
'300': '#88afe5',
'350': '#77a1de',
'400': '#6895d5',
'500': '#4B7AC2',
'525': '#3672c9',
'600': '#2460b3',
'700': '#12478f',
'800': '#052e66',
'850': '#01234f',
'900': '#001934',
'950': '#000c1a',
};
var lapis = function (grade) {
return LapisCache[grade] || irisColor(exports.Colors.Lapis, grade);
};
var AmethystCache = {
'50': '#f5f1ff',
'100': '#ebe5ff',
'200': '#d3ccff',
'300': '#b7b3ff',
'350': '#a7a7ff',
'400': '#9b9ffe',
'500': '#8697FB',
'525': '#7e8bef',
'600': '#6468cf',
'700': '#4540a6',
'800': '#312574',
'850': '#271a59',
'900': '#190f3d',
'950': '#0e071f',
};
var amethyst = function (grade) {
return AmethystCache[grade] || irisColor(exports.Colors.Amethyst, grade);
};
var TaupeCache = {
'50': '#fbf8f2',
'100': '#f6f0e6',
'200': '#ebdfcf',
'300': '#deccbb',
'350': '#d6c3b2',
'400': '#cdb8aa',
'500': '#BBA69C',
'525': '#b09e95',
'600': '#918680',
'700': '#6a6663',
'800': '#444',
'850': '#333',
'900': '#222',
'950': '#101010',
};
var taupe = function (grade) {
return TaupeCache[grade] || irisColor(exports.Colors.Taupe, grade);
};
var VioletCache = {
'0': '#FFFFFF',
'50': '#FAFCFD',
'100': '#ded5f5',
'200': '#c1aded',
'300': '#a686eb',
'400': '#8a5ee8',
'500': '#743ed9',
'600': '#5e1ec9',
'700': '#49179d',
'800': '#341070',
'900': '#0a0e12',
'1000': '#000000',
};
var violet = function (grade) {
return VioletCache[grade] || irisColor(exports.Colors.Violet, grade);
};
var irisColor = function (color, grade, grayscale) {
if (grayscale === void 0) { grayscale = false; }
var newColor;
if (grade === 500)
newColor = color;
else if (grade > 500)
newColor = irisDarken({ color: color, grade: grade, grayscale: grayscale });
else if (grade < 500)
newColor = irisLighten({ color: color, grade: grade, grayscale: grayscale });
return newColor;
};
function irisDarken(_a) {
var color = _a.color, grade = _a.grade, _b = _a.grayscale, grayscale = _b === void 0 ? false : _b;
grade = grade / 100 - 5;
var saturateAmount = grayscale
? 0
: grade / 50 + baseSaturate(color, grade, 'darken');
var adjustHueAmount = grayscale
? 0
: baseHue(color, grade, 'darken');
var mixAmount = grade / 5;
return polish(color)
.shade(mixAmount)
.saturate(saturateAmount)
.adjustHue(adjustHueAmount)
.end();
}
function polish(color) {
return {
tint: function (amount) { return polish(polished.tint(amount, color)); },
shade: function (amount) { return polish(polished.shade(amount, color)); },
saturate: function (amount) { return polish(polished.saturate(amount, color)); },
adjustHue: function (amount) { return polish(polished.adjustHue(amount, color)); },
end: function () { return color; },
};
}
function irisLighten(_a) {
var color = _a.color, grade = _a.grade, _b = _a.grayscale, grayscale = _b === void 0 ? false : _b;
grade = (grade / 100) * -1 + 5;
var mixAmount = grade / 5;
var adjustHueAmount = grayscale
? 0
: baseHue(color, grade, 'lighten');
var saturateAmount = grayscale
? 0
: grade / 100 + baseSaturate(color, grade, 'lighten');
return polish(color)
.tint(mixAmount)
.saturate(saturateAmount)
.adjustHue(adjustHueAmount)
.end();
}
function baseHue(color, grade, effect) {
if (grade === void 0) { grade = 0; }
if (effect === void 0) { effect = 'darken'; }
switch (color) {
case blue(500):
return 3;
case green(500):
return -2;
case slate(500):
return 1;
case vermilion(500):
if (effect === 'lighten')
return 8 + grade * -0.25;
return grade * -6;
case peridot(500):
if (effect === 'lighten')
return -2 + grade * -5;
return 3 + grade * 10;
case cerulean(500):
if (effect === 'lighten')
return -2 + grade * -6;
return 6 + grade * 3;
case lapis(500):
if (effect === 'lighten')
return -2 + grade / 2;
return -1 + grade * -0.5;
case amethyst(500):
return grade * 6;
case taupe(500):
return grade * 5;
default:
return 0;
}
}
function baseSaturate(color, grade, effect) {
if (grade === void 0) { grade = 0; }
if (effect === void 0) { effect = 'darken'; }
switch (color) {
case grayscale(500):
case green(500):
return 0;
case slate(500):
return 0.05;
case green(500):
return 0;
case fuschia(500):
return 0.2;
case vermilion(500):
if (effect === 'lighten')
return 0.15 + grade / 40;
return 0;
case peridot(500):
return 0.1 + grade / 30;
case cerulean(500):
return 0.05 + grade / 50;
case lapis(500):
if (effect === 'lighten')
return grade / 15;
return 0.1 + grade / 10;
case amethyst(500):
return grade / 20;
case taupe(500):
if (effect === 'lighten')
return grade / 15;
return grade / -20;
default:
return 0.1;
}
}
// function buildCache(color) {
// const Cache = {};
// [
// '50',
// '100',
// '200',
// '300',
// '350',
// '400',
// '500',
// '525',
// '600',
// '700',
// '800',
// '850',
// '900',
// '950',
// ].map((key) => {
// const grade = parseInt(key);
// Cache[key] = color(grade);
// });
// return Cache;
// }
// function buildCaches() {
// const all = {};
// [
// red,
// blue,
// green,
// yellow,
// slate,
// grayscale,
// fuschia,
// cerise,
// vermilion,
// peridot,
// cerulean,
// lapis,
// amethyst,
// taupe,
// ].map((c) => {
// const title = capitalize(c.name) + 'Cache';
// all[title] = buildCache(c);
// });
// return all;
// }
// const capitalize = (s) => s.charAt(0).toUpperCase() + s.slice(1);
exports.amethyst = amethyst;
exports.baseHue = baseHue;
exports.baseSaturate = baseSaturate;
exports.black = black;
exports.blue = blue;
exports.cerise = cerise;
exports.cerulean = cerulean;
exports.fuschia = fuschia;
exports.grayscale = grayscale;
exports.green = green;
exports.irisColor = irisColor;
exports.irisDarken = irisDarken;
exports.irisLighten = irisLighten;
exports.lapis = lapis;
exports.peridot = peridot;
exports.red = red;
exports.slate = slate;
exports.taupe = taupe;
exports.vermilion = vermilion;
exports.violet = violet;
exports.white = white;
exports.yellow = yellow;