@indico-data/design-system 2.43.1 → 2.45.0

package/src/legacy/styles/globals/margin-padding.ts

@@ -1,33 +0,0 @@
-import { createGlobalStyle } from 'styled-components';
-import { MARGINS, PADDINGS } from '@/legacy/tokens';
-
-export const MarginPadding = createGlobalStyle`  
-  .pt-md {
-    padding-top: ${PADDINGS.md};
-  }
-  .pt-sm {
-    padding-top: ${PADDINGS.sm};
-  }
-  .pb-md {
-    padding-bottom: ${PADDINGS.md};
-  }
-  .pb-sm {
-    padding-bottom: ${PADDINGS.sm};
-  }
-  .mt-md {
-    margin-top: ${MARGINS.md};
-  }
-  .mt-sm {
-    margin-top: ${MARGINS.sm};
-  }
-  .mb-md {
-    margin-bottom: ${MARGINS.md};
-  }
-  .mb-sm {
-    margin-bottom: ${MARGINS.sm};
-  }
-  .my-md {
-    margin-top: ${MARGINS.md};
-    margin-bottom: ${MARGINS.md};
-  }
-`;

package/src/legacy/styles/globals/media.ts

@@ -1,13 +0,0 @@
-import { createGlobalStyle } from 'styled-components';
-
-export const Media = createGlobalStyle`  
-  figure {
-    margin: 0;
-  }
-
-  img,
-  picture {
-    margin: 0;
-    max-width: 100%;
-  }
-`;

package/src/legacy/styles/globals/tables.ts

@@ -1,30 +0,0 @@
-import { createGlobalStyle } from 'styled-components';
-
-import { TYPOGRAPHY } from '@/legacy/tokens';
-
-export const Tables = createGlobalStyle`
-  table {
-    border-collapse: collapse;
-    margin: ${TYPOGRAPHY.spacing.half} 0;
-    table-layout: fixed;
-    width: 100%;
-  }
-
-  th {
-    font-size: ${TYPOGRAPHY.fontSize.subheadSmall};
-    padding: 20px 15px 5px;
-    font-weight: 400;
-    text-align: left;
-  }
-
-  td {
-    padding: 20px 15px;
-    font-size: ${TYPOGRAPHY.fontSize.base};
-  }
-
-  tr,
-  td,
-  th {
-    vertical-align: middle;
-  }
-`;

package/src/legacy/styles/globals/typography.ts

@@ -1,82 +0,0 @@
-import { createGlobalStyle } from 'styled-components';
-
-import { COLORS, TYPOGRAPHY, ANIMATION } from '@/legacy/tokens';
-
-export const Typography = createGlobalStyle`
-  html {
-    color: ${COLORS.defaultFontColor};
-    font-family: ${TYPOGRAPHY.fontFamily.base};
-    font-size: 100%;
-    line-height: ${TYPOGRAPHY.lineHeight.base};
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    font-weight: 400;
-    font-style: normal;
-  }
-
-
-
-  h3 {
-    font-size: ${TYPOGRAPHY.fontSize.subheadLarge};
-  }
-
-  h4 {
-    font-size: ${TYPOGRAPHY.fontSize.base};
-    color: ${COLORS.defaultFontColor};
-  }
-
-  h5 {
-    font-size: ${TYPOGRAPHY.fontSize.caption};
-    color: ${COLORS.defaultFontColor};
-  }
-
-  p {
-    margin: 0 0;
-    font-size: ${TYPOGRAPHY.fontSize.base};
-  }
-
-  .t-caption { font-size: ${TYPOGRAPHY.fontSize.caption}; }
-  .t-base { font-size: ${TYPOGRAPHY.fontSize.base}; }
-  .t-subhead-small { font-size: ${TYPOGRAPHY.fontSize.subheadSmall}; }
-  .t-subhead-large { font-size: ${TYPOGRAPHY.fontSize.subheadLarge}; }
-  .t-display { font-size: ${TYPOGRAPHY.fontSize.display}; }
-
-  .t-bold { font-weight: bold; }
-  .t-italic { font-style: italic; }
-
-  .error {
-    color: ${COLORS.red};
-  }
-
-  .prompt {
-    color: ${COLORS.curiousBlue};
-  }
-
-  .warning {
-    color: ${COLORS.yellow};
-  }
-
-  .success {
-    color: ${COLORS.green};
-  }
-
-  a {
-    color: ${COLORS.actionColor};
-    transition: color ${ANIMATION.duration} ${ANIMATION.timing};
-
-    &:active,
-    &:focus,
-    &:hover {
-      color: ${COLORS.defaultFontColor};
-      text-decoration: none;
-    }
-  }
-
-  hr {
-    border-bottom: 1px solid ${COLORS.borderColor};
-    border-left: 0;
-    border-right: 0;
-    border-top: 0;
-    margin: ${TYPOGRAPHY.spacing.base} 0;
-  }
-`;

package/src/legacy/styles/globals/utility-classes.ts

@@ -1,76 +0,0 @@
-import { createGlobalStyle } from 'styled-components';
-import { COLORS } from '@/legacy/tokens';
-
-export const UtilityClasses = createGlobalStyle`
-  .link-style {
-    text-decoration: underline;
-
-    &:hover {
-      text-decoration: none;
-    }
-  }
-
-  .spin {
-    animation: spin 2s infinite linear;
-  }
-
-  @keyframes spin {
-    0% {
-      transform: rotate(0deg);
-    }
-
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-  
-  .card-body {
-    background-color: ${COLORS.clay};
-    border-radius: 4px;
-    border: 1px solid ${COLORS.oxfordBlue};
-    padding: 20px;
-    
-    hr {
-    margin: 1.25em 0;
-      border: 1px solid transparent;
-      border-bottom-color: ${COLORS.ebony};
-    }
-  }
-  
-  .scrollable-vertical {
-    overflow: hidden auto;
-  
-    scrollbar-color: ${COLORS.darkGray} transparent;
-    scrollbar-gutter: stable;
-    scrollbar-width: thin;
-  
-    &::-webkit-scrollbar {
-      width: 5px;
-    }
-  
-    &::-webkit-scrollbar-track {
-      box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-    }
-  
-    &::-webkit-scrollbar-thumb {
-      background-color: darkgrey;
-      outline: 1px solid slategrey;
-      border-radius: 20px;
-    }
-  }
-
-  .page-bottom {
-    padding-bottom: 20px;
-  }
-
-  .aria-invisible {
-    border: 0; 
-    clip: rect(0 0 0 0); 
-    height: 1px;  
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-  }
-`;

package/src/legacy/styles/index.ts

@@ -1 +0,0 @@
-export { GlobalStyles } from './globals';

package/src/legacy/tokens/animation.ts

@@ -1,6 +0,0 @@
-// This is used for "micro animations" - general purpose values to give the app a general feel
-// By no means is this the rule for building out custom animations for various parts of the application
-export const animation = {
-  duration: '200ms',
-  timing: 'ease',
-} as const;

package/src/legacy/tokens/breakpoints.ts

@@ -1,11 +0,0 @@
-export const breakpoints = {
-  mediumScreen: '600px',
-  largeScreen: '900px',
-  maxScreen: '1300px',
-} as const;
-
-export const mediaQueries = {
-  mediumScreen: `only screen and (min-width: ${breakpoints.mediumScreen})`,
-  largeScreen: `only screen and (min-width: ${breakpoints.largeScreen})`,
-  maxScreen: `only screen and (min-width: ${breakpoints.maxScreen})`,
-};

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 };