@indico-data/design-system 2.43.0 → 2.44.0

package/src/legacy/tokens/colors.ts

@@ -1,293 +0,0 @@
-export const allColors = {
-  akaroa: '#cbc98f',
-  alizarin: '#E72326',
-  amber: '#f4c401',
-  amethyst: '#8e57b3',
-  aqua: '#10e4fe',
-  astralBlue: '#2f7ca2',
-  ateneoBlue: '#0d466a',
-  avocado: '#81b12f',
-  azure: '#108cf7',
-  baliHai: '#8498b6',
-  black: '#000',
-  blueBayoux: '#4f5e74',
-  blueDarknut: '#0070f5',
-  blueMagenta: '#542f9d',
-  blueRibbon: '#0b35ff',
-  blueYonder: '#586fd2',
-  bouqet: '#a35c9a',
-  brick: '#c62828',
-  brightDusk: '#efebf7',
-  britishShorthair: '#4b94eb',
-  brown: '#785349',
-  candyCorn: '#fcef4d',
-  carnation: '#ff8adf',
-  carrot: '#f29a2d',
-  cerise: '#d52a96',
-  cerulean: '#008b9e',
-  chantilly: '#f7b0eb',
-  charcoal: '#474b4b',
-  chartreuse: '#34ff01',
-  clay: '#283243',
-  clementine: '#F16E00',
-  cocoaBean: '#5c1200',
-  comet: '#5a6982',
-  cornflower: '#2060ff',
-  crimson: '#e53126',
-  curiousBlue: '#178ee0',
-  cyan: '#0cf',
-  daisyBush: '#431B92',
-  darkFontColor: '#0d151d',
-  darkGray: '#333',
-  darkPurple: '#6f3eae',
-  darkRed: '#b30000',
-  defaultFontColor: '#bbbfc5',
-  dodgerBlue: '#1774ff',
-  dusty: '#999999',
-  eagleGreen: '#005557',
-  ebony: '#101a26',
-  eggplant: '#7a0074',
-  electricGreen: '#00ff0a',
-  emerald: '#09c199',
-  endeavor: '#0055B9',
-  espresso: '#5a3627',
-  fieldPromptError: '#fd9693',
-  fieldPromptInfo: '#00bfff',
-  flamingo: '#f861b6',
-  flirt: '#910870',
-  forestGreen: '#1f7f1f',
-  frostedOver: '#DCEAFD',
-  geraldine: '#fe9486',
-  grannysmith: '#92e959',
-  green: '#4caf50',
-  harlequin: '#20cb00',
-  harvestGold: '#e6c079',
-  hawkes: '#DCEAFD',
-  hemlock: '#626740',
-  imperial: '#4b0134',
-  iron: '#d9dee0',
-  japaneseIndigo: '#264359',
-  juniper: '#6d9292',
-  khaki: '#bba44b',
-  koamaru: '#2f346a',
-  korma: '#90370e',
-  lavender: '#B086E3',
-  lavenderRose: '#fb9fda',
-  lightGray: '#eee',
-  lightPurple: '#b43be4',
-  lilac: '#a195d4',
-  lincolnGreen: '#254600',
-  magenta: '#ff15e0',
-  malibu: '#68C2FB',
-  mantis: '#4fa83d',
-  maroon: '#ad3349',
-  mauve: '#e06cfb',
-  mediumGray: '#999',
-  midFontColor: '#8593b3',
-  mint: '#3ac999',
-  mirage: '#182432',
-  mulberry: '#5c0536',
-  olive: '#807300',
-  orange: '#ff7200',
-  orchid: '#ab00ff',
-  oxfordBlue: '#384558',
-  pacific: '#00b5b6',
-  palm: '#1aa511',
-  persian: '#1717cf',
-  persianLight: '#0327ce',
-  pine: '#017074',
-  pink: '#f74f8a',
-  pistachio: '#aac609',
-  raspberry: '#990030',
-  red: '#f95359',
-  robinsEggBlue: '#00bcd4',
-  romanSilver: '#7d888d',
-  sagatPurple: '#6833d0',
-  salem: '#03832e',
-  sapGreen: '#5f7e20',
-  seaGreen: '#0b8a51',
-  seance: '#7f1f82',
-  shiraz: '#c61021',
-  silverChalice: '#aaaaaa',
-  sinopia: '#D14200',
-  slaaneshGrey: '#dbd5e6',
-  tangerine: '#ff9900',
-  teal: '#008285',
-  toast: '#997862',
-  trueBlue: '#066CC6',
-  tundora: '#444444',
-  turquoise: '#00b5b6',
-  vermilion: '#b95555',
-  viking: '#59cfe0',
-  violet: '#3e4eb8',
-  violetBlue: '#8060d2',
-  walnut: '#783f00',
-  white: '#fff',
-  windsorTan: '#b35c00',
-  yellow: '#ffca28',
-  zucchini: '#016422',
-  get hiliteFontColor() {
-    return this.white;
-  },
-  get lightFontColor() {
-    return this.lightGray;
-  },
-  get borderColor() {
-    return this.lightGray;
-  },
-  get actionColor() {
-    return this.midFontColor;
-  },
-  get backgroundColor() {
-    return this.mirage;
-  },
-} as const;
-
-export type ColorName = keyof typeof allColors;
-
-/**
- * Given an array of valid color names, return an array containing their hex values as strings.
- */
-function returnColorPalette(colorNames: ColorName[]): string[] {
-  return colorNames.map((name) => allColors[name]);
-}
-
-// Base Colors
-export const baseColors = returnColorPalette([
-  'curiousBlue',
-  'robinsEggBlue',
-  'green',
-  'yellow',
-  'red',
-  'white',
-  'black',
-]);
-
-// Layout Colors
-export const layoutColors = returnColorPalette([
-  'ebony',
-  'mirage',
-  'clay',
-  'oxfordBlue',
-  'blueBayoux',
-  'comet',
-  'baliHai',
-]);
-
-// Grays
-export const grayColors = returnColorPalette(['darkGray', 'mediumGray', 'lightGray', 'iron']);
-
-// Font Colors
-export const fontColors = returnColorPalette([
-  'darkFontColor',
-  'hiliteFontColor',
-  'lightFontColor',
-  'defaultFontColor',
-  'midFontColor',
-]);
-
-// Button Palette
-export const buttonColors = returnColorPalette([
-  'turquoise',
-  'violet',
-  'emerald',
-  'seaGreen',
-  'avocado',
-  'brick',
-  'pink',
-  'lightPurple',
-  'charcoal',
-]);
-
-// New Button Palette
-export const newButtonColors = returnColorPalette([
-  'azure',
-  'orchid',
-  'tangerine',
-  'palm',
-  'magenta',
-  'blueRibbon',
-  'orange',
-  'darkRed',
-  'amber',
-  'lilac',
-  'pacific',
-  'carnation',
-  'brown',
-  'khaki',
-  'zucchini',
-  'eggplant',
-  //'crimson',
-  'cerulean',
-  'harlequin',
-  'akaroa',
-  'persianLight',
-  'viking',
-  'mauve',
-  'espresso',
-  'toast',
-  'salem',
-  'darkPurple',
-  'cornflower',
-  'grannysmith',
-  'lavender',
-]);
-
-// Visualization Palette
-export const vizColors = returnColorPalette([
-  'aqua',
-  'carrot',
-  'flamingo',
-  'dodgerBlue',
-  'chantilly',
-  'crimson',
-  'candyCorn',
-  'amethyst',
-]);
-
-export const vizColorsArray = returnColorPalette([
-  'aqua',
-  'carrot',
-  'flamingo',
-  'green',
-  'dodgerBlue',
-  'chantilly',
-  'crimson',
-  'candyCorn',
-  'amethyst',
-  'baliHai',
-]);
-
-// ODL Label Palette
-export const fieldColors = returnColorPalette([
-  'trueBlue',
-  'eggplant',
-  'sinopia',
-  'forestGreen',
-  'cerise',
-  'persian',
-  'teal',
-  'violetBlue',
-  'olive',
-  'raspberry',
-  'eagleGreen',
-  'maroon',
-  'brown',
-  'windsorTan',
-  'koamaru',
-  'seance',
-  'cocoaBean',
-  'ateneoBlue',
-  'sapGreen',
-  'vermilion',
-  'blueYonder',
-  'korma',
-  'hemlock',
-  'imperial',
-  'astralBlue',
-  'shiraz',
-  'blueMagenta',
-  'flirt',
-  'lincolnGreen',
-  'bouqet',
-]);

package/src/legacy/tokens/index.ts

@@ -1,20 +0,0 @@
-export { animation as ANIMATION } from './animation';
-export { breakpoints as BREAKPOINT, mediaQueries as MEDIA_QUERIES } from './breakpoints';
-export { typography as TYPOGRAPHY, fontSize as FONT_SIZE } from './typography';
-export { padding as PADDINGS } from './padding';
-export { spacings as SPACING } from './spacings';
-export { margin as MARGINS } from './margin';
-export { MATH } from './numbers';
-
-export {
-  allColors as COLORS,
-  baseColors as BASE_COLORS,
-  fieldColors as FIELD_COLORS,
-  layoutColors as LAYOUT_COLORS,
-  grayColors as GRAY_COLORS,
-  fontColors as FONT_COLORS,
-  buttonColors as BUTTON_COLORS,
-  newButtonColors as NEW_BUTTON_COLORS,
-  vizColors as VIZ_COLORS,
-  vizColorsArray as VIZ_COLORS_ARRAY,
-} from './colors';

package/src/legacy/tokens/margin.ts

@@ -1,5 +0,0 @@
-export const margin = {
-  // todo -- get with mike L for other padding values as they become needed. Ideally we should create a formula.
-  sm: '15px',
-  md: '20px',
-} as const;

package/src/legacy/tokens/numbers.js

@@ -1,41 +0,0 @@
-// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor
-
-export const decimalAdjust = (type, value, exp) => {
-  // If the exp is undefined or zero...
-  if (typeof exp === 'undefined' || +exp === 0) {
-    return Math[type](value);
-  }
-  value = +value;
-  exp = +exp;
-  // If the value is not a number or the exp is not an integer...
-  if (isNaN(value) || !(typeof exp === 'number' && exp % 1 === 0)) {
-    return NaN;
-  }
-  // Shift
-  value = value.toString().split('e');
-  value = Math[type](+(value[0] + 'e' + (value[1] ? +value[1] - exp : -exp)));
-  // Shift back
-  value = value.toString().split('e');
-  return +(value[0] + 'e' + (value[1] ? +value[1] + exp : exp));
-};
-
-export const round10 = (value, exp) => {
-  return decimalAdjust('round', value, exp);
-};
-
-export const clamp = (value, min, max) => {
-  value = value < min ? min : value;
-  value = value > max ? max : value;
-  return value;
-};
-
-export const numberWithCommas = (x) => {
-  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-};
-
-export const MATH = {
-  decimalAdjust,
-  round10,
-  clamp,
-  numberWithCommas,
-};

package/src/legacy/tokens/padding.ts

@@ -1,5 +0,0 @@
-export const padding = {
-  // todo -- get with mike L for other padding values as they become needed. Ideally we should create a formula.
-  sm: '15px',
-  md: '20px',
-} as const;

package/src/legacy/tokens/spacings.ts

@@ -1,5 +0,0 @@
-export const spacings = {
-  xs: '8px',
-  sm: '12px',
-  md: '24px',
-} as const;

package/src/legacy/tokens/typography.ts

@@ -1,43 +0,0 @@
-import { css } from 'styled-components';
-
-export const fontStack = ['Noto Sans', 'Avenir Next', 'Avenir', 'Noto', 'sans-serif'] as const;
-
-export const fontFamily = {
-  base: fontStack.join(','),
-  heading: fontStack.join(','),
-};
-
-export const fontSize = {
-  caption: '12px',
-  base: '14px',
-  subheadSmall: '16px',
-  subheadLarge: '18px',
-  subheadXl: '22px',
-  display: '30px',
-} as const;
-
-export const lineHeight = {
-  base: 1.25,
-  heading: 1.2,
-} as const;
-
-export const spacing = {
-  base: `${lineHeight.base}em`,
-  half: `${lineHeight.base / 2}em`,
-  quarter: `${lineHeight.base / 4}em`,
-  third: `${lineHeight.base / 3}em`,
-};
-
-export const weight = {
-  light: 300,
-  regular: 400,
-  semibold: 500,
-  bold: 600,
-};
-export const ellipsis = css`
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-`;
-
-export const typography = { fontFamily, fontSize, lineHeight, spacing, ellipsis, weight };

package/src/legacy/utils/color.ts

@@ -1,139 +0,0 @@
-export const mix = function (color_1: string, color_2: string, weight: number): string {
-  function d2h(d: number) {
-    return d.toString(16);
-  } // convert a decimal value to hex
-  function h2d(h: string) {
-    return parseInt(h, 16);
-  } // convert a hex value to decimal
-  function s2l(hex: string) {
-    return `${hex}${hex}`;
-  }
-
-  weight = typeof weight !== 'undefined' ? weight : 50; // set the weight to 50%, if that argument is omitted
-  color_1 = color_1.replace(/#/g, '');
-  color_2 = color_2.replace(/#/g, '');
-
-  // check if colors are shorthand or longhand - covert to longhand
-  color_1 = color_1.length === 3 ? s2l(color_1) : color_1;
-  color_2 = color_2.length === 3 ? s2l(color_2) : color_2;
-
-  let color = '#';
-
-  for (let i = 0; i <= 5; i += 2) {
-    // loop through each of the 3 hex pairs—red, green, and blue
-    const v1 = h2d(color_1.substr(i, 2)); // extract the current pairs
-    const v2 = h2d(color_2.substr(i, 2));
-    // combine the current pairs from each source color, according to the specified weight
-    let val = d2h(Math.floor(v2 + (v1 - v2) * (weight / 100.0)));
-
-    while (val.length < 2) {
-      val = '0' + val;
-    } // prepend a '0' if val results in a single digit
-
-    color += val; // concatenate val to our new color string
-  }
-
-  return color; // PROFIT!
-};
-
-export const shade = (color: string, percentage: number): string => {
-  return mix('#000000', color, percentage);
-};
-
-export const tint = (color: string, percentage: number): string => {
-  return mix('#ffffff', color, percentage);
-};
-
-/**
- * Converts hex color values to rgb or rgba values if a opacity is supplied
- * @param hex
- * @returns {*}
- */
-export const hexToRgb = (hex: string, opacity?: number): string | undefined => {
-  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
-  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
-  hex = hex.replace(shorthandRegex, function (m, r, g, b) {
-    return r + r + g + g + b + b;
-  });
-
-  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-  if (result && opacity) {
-    return `rgba(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(
-      result[3],
-      16,
-    )}, ${opacity})`;
-  } else if (result) {
-    return `rgb(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(
-      result[3],
-      16,
-    )})`;
-  }
-  return undefined;
-};
-
-/**
- * Takes a 3- or 6-character hex color value, and returns an object containing
- * its equivalent HSL values.
- *
- * @see {@link https://css-tricks.com/converting-color-spaces-in-javascript/}
- * @see {@link https://gist.github.com/mjackson/5311256}
- */
-export function hexToHsl(hexColor: string): { hue: number; saturation: number; lightness: number } {
-  // convert to 6-character hex string, if necessary
-  const fullHexColor = (() => {
-    if (hexColor.length === 4) {
-      return (
-        '#' +
-        hexColor
-          .replace('#', '')
-          .split('')
-          .reduce((acc, char) => (acc += char + char), '')
-      );
-    }
-
-    return hexColor;
-  })();
-
-  const rgbValues = {
-    red: parseInt(fullHexColor.slice(1, 3), 16) / 255,
-    green: parseInt(fullHexColor.slice(3, 5), 16) / 255,
-    blue: parseInt(fullHexColor.slice(-2), 16) / 255,
-  };
-
-  const allValues = Object.values(rgbValues);
-
-  const channelMax = Math.max(...allValues);
-  const channelMin = Math.min(...allValues);
-  const channelDelta = channelMax - channelMin;
-
-  const hslValues = {
-    hue: 0,
-    saturation: 0,
-    lightness: (channelMax + channelMin) / 2,
-  };
-
-  if (channelDelta !== 0) {
-    // calculate hue
-    if (channelMax === rgbValues.red) {
-      hslValues.hue = ((rgbValues.green - rgbValues.blue) / channelDelta) % 6;
-    } else if (channelMax === rgbValues.green) {
-      hslValues.hue = (rgbValues.blue - rgbValues.red) / channelDelta + 2;
-    } else {
-      hslValues.hue = (rgbValues.red - rgbValues.green) / channelDelta + 4;
-    }
-
-    // calculate saturation
-    hslValues.saturation = channelDelta / (1 - Math.abs(2 * hslValues.lightness - 1));
-  }
-
-  hslValues.hue = Math.round(hslValues.hue * 60);
-  hslValues.saturation = +(hslValues.saturation * 100).toFixed(0);
-  hslValues.lightness = +(hslValues.lightness * 100).toFixed(0);
-
-  // make negative hues positive
-  if (hslValues.hue < 0) {
-    hslValues.hue += 360;
-  }
-
-  return hslValues;
-}

package/src/legacy/utils/index.ts

@@ -1,5 +0,0 @@
-import * as colorUtils from './color';
-import * as stringUtils from './string';
-import * as numberUtils from './number';
-
-export { colorUtils, stringUtils, numberUtils };

package/src/legacy/utils/number.ts

@@ -1,29 +0,0 @@
-/**
- * Takes a number and formats it nicely.
- *
- * @example numberWithCommas(12345)
- * // returns 12,345
- */
-export function numberWithCommas(value: number): string {
-  return new Intl.NumberFormat(navigator.language || 'en-US').format(value);
-}
-
-/**
- * Takes a number and returns it, rounded up to the maximum decimal places specified.
- *
- * @example maxDecimalPlaces(0.1694915254237288, 2)
- * // returns 0.17
- *
- * @example maxDecimalPlaces(0.1694915254237288, 3)
- * // returns 0.169
- *
- * @example maxDecimalPlaces(12.902, 2)
- * // returns 12.9
- */
-export function maxDecimalPlaces(value: number, decimalPlaces: number): number {
-  return +value.toFixed(decimalPlaces);
-}
-
-export function formatConfidence(confidence: number): number {
-  return Math.min(Math.floor(confidence * 100), 99);
-}

package/src/legacy/utils/string.ts

@@ -1,87 +0,0 @@
-export const camelCaseToUpperUnderscore = (string: string) => {
-  return string
-    .replace(/([A-Z])/g, function ($1) {
-      return '_' + $1;
-    })
-    .toUpperCase();
-};
-
-export const camelCaseToSpaceUpper = (string: string) => {
-  return (
-    string
-      // insert a space before all caps
-      .replace(/([A-Z])/g, ' $1')
-      // uppercase the first character
-      .replace(/^./, function (str) {
-        return str.toUpperCase();
-      })
-  );
-};
-
-export const underscoreToCapitalize = (string: string) => {
-  return (
-    string
-      // replace all _ with spaces
-      .replace(/_/g, ' ')
-      // uppercase the first character
-      .replace(/^./, function (str) {
-        return str.toUpperCase();
-      })
-  );
-};
-
-export const snakeCaseToCamelCase = (string: string) => {
-  const parts = string.split('_').map((part, i) => {
-    if (i > 0) {
-      return part.replace(/^./, function (str) {
-        return str.toUpperCase();
-      });
-    } else {
-      return part;
-    }
-  });
-
-  return parts.join().replace(/,/g, '');
-};
-
-export function capitalize(string: string): string {
-  if (typeof string !== 'string') return '';
-
-  return string.slice(0, 1).toUpperCase() + string.slice(1).toLowerCase();
-}
-
-export function capitalizeFirstOnly(string: string): string {
-  if (typeof string !== 'string') return '';
-
-  return string.slice(0, 1).toUpperCase() + string.slice(1);
-}
-
-/**
- * Generates a random string of English alphabet characters. Defaults to a length of 8.
- */
-export function createRandomString(length?: number): string {
-  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
-  let result = '';
-
-  for (let i = 0; i < (length || 8); i++) {
-    result += chars.charAt(Math.floor(Math.random() * chars.length));
-  }
-
-  return result;
-}
-
-export const maxLengthWithEllipse = (string: string, maxLength: number) => {
-  if (string.length <= maxLength) {
-    return string;
-  } else {
-    return string.slice(0, maxLength - 2).concat('...');
-  }
-};
-
-export const maxLengthWithMiddleEllipsis = (string: string, maxLength: number): string => {
-  const frontSegment = string.slice(0, Math.floor(maxLength / 2) - 2);
-  const endSegmentLength = string.length - (Math.floor(maxLength / 2) - 1);
-  const endSegment = string.slice(endSegmentLength, string.length);
-
-  return string.length <= maxLength ? string : `${frontSegment}...${endSegment}`;
-};