@indico-data/design-system 1.0.1

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

@@ -0,0 +1,76 @@
+import { createGlobalStyle } from 'styled-components';
+import { COLORS } from '@/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/tokens/animation.ts

@@ -0,0 +1,6 @@
+// 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/tokens/breakpoints.ts

@@ -0,0 +1,11 @@
+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/tokens/colors.ts

@@ -0,0 +1,279 @@
+export const allColors = {
+  akaroa: '#cbc98f',
+  amber: '#f4c401',
+  amethyst: '#8e57b3',
+  aqua: '#10e4fe',
+  astralBlue: '#2f7ca2',
+  ateneoBlue: '#0d466a',
+  avocado: '#81b12f',
+  azure: '#108cf7',
+  baliHai: '#8498b6',
+  black: '#000',
+  blueBayoux: '#4f5e74',
+  blueMagenta: '#542f9d',
+  blueRibbon: '#0b35ff',
+  blueYonder: '#586fd2',
+  bouqet: '#a35c9a',
+  brick: '#c62828',
+  brown: '#785349',
+  candyCorn: '#fcef4d',
+  carnation: '#ff8adf',
+  carrot: '#f29a2d',
+  cerise: '#d52a96',
+  cerulean: '#008b9e',
+  chantilly: '#f7b0eb',
+  charcoal: '#474b4b',
+  chartreuse: '#34ff01',
+  clay: '#283243',
+  cocoaBean: '#5c1200',
+  comet: '#5a6982',
+  cornflower: '#2060ff',
+  crimson: '#e53126',
+  curiousBlue: '#178ee0',
+  cyan: '#0cf',
+  darkFontColor: '#0d151d',
+  darkGray: '#333',
+  darkPurple: '#6f3eae',
+  darkRed: '#b30000',
+  defaultFontColor: '#bbbfc5',
+  dodgerBlue: '#1774ff',
+  eagleGreen: '#005557',
+  ebony: '#101a26',
+  eggplant: '#7a0074',
+  electricGreen: '#00ff0a',
+  emerald: '#09c199',
+  espresso: '#5a3627',
+  fieldPromptError: '#fd9693',
+  fieldPromptInfo: '#00bfff',
+  flamingo: '#f861b6',
+  flirt: '#910870',
+  forestGreen: '#1f7f1f',
+  geraldine: '#fe9486',
+  grannysmith: '#92e959',
+  green: '#4caf50',
+  harlequin: '#20cb00',
+  harvestGold: '#e6c079',
+  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',
+  salem: '#03832e',
+  sapGreen: '#5f7e20',
+  seaGreen: '#0b8a51',
+  seance: '#7f1f82',
+  shiraz: '#c61021',
+  sinopia: '#D14200',
+  tangerine: '#ff9900',
+  teal: '#008285',
+  toast: '#997862',
+  trueBlue: '#066CC6',
+  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/tokens/index.ts

@@ -0,0 +1,20 @@
+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/tokens/margin.ts

@@ -0,0 +1,5 @@
+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/tokens/numbers.js

@@ -0,0 +1,41 @@
+// 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/tokens/padding.ts

@@ -0,0 +1,5 @@
+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/tokens/spacings.ts

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

package/src/tokens/typography.ts

@@ -0,0 +1,37 @@
+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 ellipsis = css`
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
+
+export const typography = { fontFamily, fontSize, lineHeight, spacing, ellipsis };

package/src/types.ts

@@ -0,0 +1,6 @@
+export type PermafrostComponent = {
+  id?: string;
+  className?: string;
+  'data-cy'?: string;
+  'data-testid'?: string;
+};

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "es6",
+    "jsx": "react",
+    "allowSyntheticDefaultImports": true,
+    "moduleResolution": "node",
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["./src/**/*"]
+}

package/webpack.config.js

@@ -0,0 +1,35 @@
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+process.env.NODE_ENV = 'development';
+const host = process.env.HOST || 'localhost';
+
+module.exports = {
+  mode: 'development',
+  devtool: 'inline-source-map',
+  entry: './src/index.tsx',
+  output: {
+    filename: 'static/js/bundle.js',
+  },
+  devServer: {
+    compress: true,
+    hot: true,
+    host,
+    port: 3000,
+  },
+  plugins: [new HtmlWebpackPlugin()],
+  module: {
+    rules: [
+      {
+        test: /\.m?[jt]sx$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+        },
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.mjs', '.js', '.cjs', '.jsx', '.tsx', '.ts'],
+    modules: ['node_modules'],
+  },
+};