Design Token Palooza

designTokens.css

:root {
  --spacing-xl: 64px;
  --spacing-large: 48px;
  --spacing-base: 24px;
  --spacing-small: 16px;
  --spacing-tiny: 8px;
  --spacing-micro: 4px;
  --spacing-none: 0;

  --break-xl: 1199x;
  --break-large: 1025px;
  --break-medium: 768px;
  --break-small: 575px;

  --fontSize-7xl: 4.5rem;
  --fontSize-6xl: 3.5rem;
  --fontSize-5xl: 3rem;
  --fontSize-4xl: 2.5rem;
  --fontSize-3xl: 2rem;
  --fontSize-2xl: 1.5rem;
  --fontSize-xl: 1.25rem;
  --fontSize-large: 1.125rem;
  --fontSize-base: 1rem;
  --fontSize-small: 0.875rem;
  --fontSize-tiny: 0.75rem;

  --fontWeight-extra-bold: 800;
  --fontWeight-semi-bold: 600;
  --fontWeight-regular: 400;
  --fontWeight-light: 300;

  --lineHeight-tight: 1.25;
  --lineHeight-normal: 1.5;
  --lineHeight-loose: 1.75;

  --letterSpacing-tight: -0.025em;
  --letterSpacing-normal: 0;
  --letterSpacing-loose: 0.025em;

  --radius-base: 4px;
  --transitionTime-base: 0.2s;
  --borderWidth-base: 1px;

  --fontFamily-display: "Inter, sans-serif";
  --fontFamily-base:  "Inter, sans-serif";
  --fontFamily-monospace: "Courier New";

  --color-brand-envato-green: #80B341;
  --color-brand-envato-charcoal: #262626;
  --color-brand-google-blue: #4285F4;
  --color-brand-facebook-blue: #1877F2;

  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-transparent: transparent;

  --color-grey-1000: #191919;
  --color-grey-700: #404040;
  --color-grey-500: #707070;
  --color-grey-400: #949494;
  --color-grey-100: #CCCCCC;
  --color-grey-50: #ECECEE;
  --color-grey-25: #F9F9FB;

  --color-green-800: #254B00;
  --color-green-700: #2E7400;
  --color-green-500: #41A600;
  --color-green-300: #7AC14C;
  --color-green-100: #B3D399;
  --color-green-50: #CFE9BF;
  --color-green-25: #ECF6E5;

  --color-teal-800: #005B5C;
  --color-teal-700: #007475;
  --color-teal-600: #0A8385;
  --color-teal-300: #4CC0C1;
  --color-teal-100: #99DBDC;
  --color-teal-50: #BEF8E9;
  --color-teal-25: #E5F6E6;

  --color-pink-800: #AC273E;
  --color-pink-700: #C62E46;
  --color-pink-500: #E40046;
  --color-pink-300: #F97481;
  --color-pink-100: #FCACB3;
  --color-pink-50: #FCBFC5;
  --color-pink-25: #FFF2EF;

  --color-violet-600: #4635C5;
  --color-violet-500: #523EE8;
  --color-violet-300: #6E5CFF;
  --color-violet-100: #9588FF;
  --color-violet-50: #D4CFF9;
  --color-violet-25: #EEECFD;

  /* I'm not sure how to consistently capture these role colours */
  --color-role-highlight: var(--color-teal-700);
  --color-role-error: var(--color-pink-500);

  /* Should this be a role color? */
  --shadow-color: rgba(0,0,0,0.6);
  --shadow-level1: 1px 1px 3px 0px var(--shadow-color);
  --shadow-level2: 1px 1px 4px 1px var(--shadow-color);
  --shadow-level3: 1px 1px 5px 2px var(--shadow-color);

  --border-color-base: var(--color-grey-100);
  --border-color-focus: var(--color-teal-300);
  --border-color-error: var(--color-role-error);
  --border-color-hover: var(--color-grey-300);
}

:root {
  --text-color-title: var(--color-grey-1000);
  --text-color-body-primary: var(--color-grey-700);
  --text-color-body-secondary: var(--color-grey-500);

  --text-title1-fontFamily: var(--fontFamily-display);
  --text-title1-fontWeight: var(--fontWeight-extra-bold);
  --text-title1-lineHeight: var(--lineHeight-loose);
  --text-title1-letterSpacing: var(--letterSpacing-tight);
  --text-title1-fontSize-large: var(--fontSize-6xl);
  --text-title1-fontSize-medium: var(--fontSize-5xl);
  --text-title1-fontSize-small: var(--fontSize-4xl);
  --text-title1-color: var(--text-color-title);

  --text-title2-fontFamily: var(--fontFamily-display);
  --text-title2-fontWeight: var(--fontWeight-extra-bold);
  --text-title2-lineHeight: var(--lineHeight-loose);
  --text-title2-letterSpacing: var(--letterSpacing-tight);
  --text-title2-fontSize-large: var(--fontSize-5xl);
  --text-title2-fontSize-medium: var(--fontSize-4xl);
  --text-title2-fontSize-small: var(--fontSize-3xl);
  --text-title2-color: var(--text-color-title);

  --text-title3-fontFamily: var(--fontFamily-display);
  --text-title3-fontWeight: var(--fontWeight-semi-bold);
  --text-title3-lineHeight: var(--lineHeight-loose);
  --text-title3-letterSpacing: var(--letterSpacing-tight);
  --text-title3-fontSize-large: var(--fontSize-3xl);
  --text-title3-fontSize-medium: var(--fontSize-3xl);
  --text-title3-fontSize-small: var(--fontSize-2xl);
  --text-title3-color: var(--text-color-title);

  --text-title4-fontFamily: var(--fontFamily-display);
  --text-title4-fontWeight: var(--fontWeight-semi-bold);
  --text-title4-lineHeight: var(--lineHeight-loose);
  --text-title4-letterSpacing: var(--letterSpacing-tight);
  --text-title4-fontSize-large: var(--fontSize-2xl);
  --text-title4-fontSize-medium: var(--fontSize-2xl);
  --text-title4-fontSize-small: var(--fontSize-xl);
  --text-title4-color: var(--text-color-title);

  --text-body1-fontFamily: var(--fontFamily-base);
  --text-body1-fontWeight: var(--fontWeight-regular);
  --text-body1-lineHeight: var(--lineHeight-normal);
  --text-body1-letterSpacing: var(--letterSpacing-normal);
  --text-body1-fontSize-large: var(--fontSize-large);
  --text-body1-fontSize-medium: var(--fontSize-large);
  --text-body1-fontSize-small: var(--fontSize-large);
  --text-body1-color: var(--text-color-body-primary);

  --text-body2-fontFamily: var(--fontFamily-base);
  --text-body2-fontWeight: var(--fontWeight-regular);
  --text-body2-lineHeight: var(--lineHeight-normal);
  --text-body2-letterSpacing: var(--letterSpacing-normal);
  --text-body2-fontSize-large: var(--fontSize-base);
  --text-body2-fontSize-medium: var(--fontSize-base);
  --text-body2-fontSize-small: var(--fontSize-base);
  --text-body2-color: var(--text-color-body-primary);

  --text-body3-fontFamily: var(--fontFamily-base);
  --text-body3-fontWeight: var(--fontWeight-regular);
  --text-body3-lineHeight: var(--lineHeight-normal);
  --text-body3-letterSpacing: var(--letterSpacing-normal);
  --text-body3-fontSize-large: var(--fontSize-small);
  --text-body3-fontSize-medium: var(--fontSize-small);
  --text-body3-fontSize-small: var(--fontSize-small);
  --text-body3-color: var(--text-color-body-primary);

  --text-body4-fontFamily: var(--fontFamily-base);
  --text-body4-fontWeight: var(--fontWeight-regular);
  --text-body4-lineHeight: var(--lineHeight-normal);
  --text-body4-letterSpacing: var(--letterSpacing-normal);
  --text-body4-fontSize-large: var(--fontSize-tiny);
  --text-body4-fontSize-medium: var(--fontSize-tiny);
  --text-body4-fontSize-small: var(--fontSize-tiny);
  --text-body4-color: var(--text-color-body-primary);
}

:root {
  --label-fontFamily: var(--fontFamily-base);
  --label-fontSize: var(--fontSize-base);
  --label-color: var(--text-color-body-primary);
  --label-fontWeight: var(--fontWeight-semi-bold);
  --label-lineHeight: var(--lineHeight-normal);

  --input-height: 48px;
  --input-text-fontFamily: var(--fontFamily-base);
  --input-text-fontSize: var(--fontSize-base);
  --input-text-fontWeight: var(--fontWeight-light);
  --input-text-color: var(--color-grey-1000);
  --input-text-color-disabled: var(--color-grey-400);
  --input-placeholder-color: var(--color-grey-400);
  --input-background: var(--color-white);
  --input-background-focus: var(--color-white);
  --input-background-disabled: var(--color-grey-50);
  --input-border: var(--input-border-base);
  --input-border-focus: var(--border-color-focus);
  --input-border-error: var(--border-color-error);
  --input-border-hover: var(--border-color-hover);

  --hint-fontFamily: var(--fontFamily-base);
  --hint-fontSize: var(--fontSize-base);
  --hint-color: var(--text-color-body-primary);
  --hint-fontWeight: var(--fontWeight-semi-bold);
  --hint-lineHeight: var(--lineHeight-normal);

  --checkbox-height: 24px;
  --checkbox-borderWidth: var(--borderWidth-base);
  --checkbox-border: var(--color-transparent);
  --checkbox-background: var(--color-white);

  --radio-height: 24px;
  --radio-background: var(--color-white);
  --radio-border: var(--input-border);
  --radio-border-focus: var(--input-border-focus);
  --radio-border-error: var(--input-border-error);
  --radio-border-hover: var(--input-border-hover);
  --radio-check-height: 12px;
  --radio-check-background: var(--color-transparent);
  --radio-check-background-checked: var(--color-teal-700);
}

:root {
  --button-height-large: 48px;
  --button-height-medium: 40px;
  --button-height-small: 32px;
  --button-borderWidth: var(--borderWidth-base);
  --button-borderWidth-focus: var(--borderWidth-base);
  --button-offset-active: 2px;

  --button-primary-background: var(--color-teal-700);
  --button-primary-text: var(--color-white);
  --button-primary-background-hover: var(--color-teal-800);
  --button-primary-text-hover: var(--color-white);
  --button-primary-background-disabled: var(--color-grey-100);
  --button-primary-text-disabled: var(--color-grey-50);
  --button-primary-border-disabled: var(--color-transparent);
  --button-primary-background-focus: var(--color-teal-700);
  --button-primary-text-focus: var(--color-white);

  --button-default-background: var(--color-white);
  --button-default-text: var(--color-grey-700);
  --button-default-border: var(--color-grey-700);
  --button-default-background-hover: var(--color-grey-50);
  --button-default-text-hover: var(--color-grey-1000);
  --button-default-border-hover: var(--color-grey-1000);
  --button-default-background-disabled: var(--color-transparent);
  --button-default-text-disabled: var(--color-grey-100);
  --button-default-border-disabled: var(--color-grey-100);

  /* Does this live here, or with the notification component itself? */
  --button-notification-background: var(--color-transparent);
  --button-notification-text: var(--text-color-body-primary);
  --button-notification-border: var(--color-grey-400);
}

:root {
  --table-border: var(--color-grey-100);
  --table-head-background: var(--color-grey-100);
  --table-row-background: var(--color-white);
  --table-row-background-secondary: var(--color-grey-25);
  --table-row-background-hover: var(--color-grey-50);
}