Skip to content

Commit

Permalink
build: update design tokens
Browse files Browse the repository at this point in the history
  • Loading branch information
mariannuar committed Jan 20, 2023
1 parent ff0306a commit 10e37b2
Show file tree
Hide file tree
Showing 3 changed files with 1,298 additions and 0 deletions.
251 changes: 251 additions & 0 deletions build/css/tokens.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,251 @@
/**
* Do not edit directly
* Generated on Fri, 20 Jan 2023 02:01:01 GMT
*/

:root {
--radius-20: 1.25rem;
--radius-10: 0.625rem;
--radius-4: 0.25rem;
--radius-0: 0rem;
--drop-shadow-level-4: 0px 0.9975153207778931px 1.9285296201705933px 0px #00000012,0px 3.3504464626312256px 6.477529525756836px 0px #00000012,0px 15px 28px 0px #00000059;
--drop-shadow-level-3: 0px 0.33000001311302185px 1.7290265560150146px 0px #0000001a,0px 2.4700000286102295px 2.809999942779541px 0px #0000001f,0px 16px 23px 0px #00000038;
--drop-shadow-level-2: 0px 0.5985091924667358px 0.7980122566223145px 0px #00000014,0px 2.010267734527588px 2.680356979370117px 0px #0000001c,0px 9px 12px 0px #00000030;
--drop-shadow-level-1-bottom-shadow-only: 0px 8px 6px -6px hsl(0deg 0% 0% / 16%);
--drop-shadow-level-1: 0px 1px 2px 0px #00000029,0px 4px 4px 0px #00000017,0px 6px 8px 0px #00000021;
--font-size-62: 3.875rem;
--font-size-58: 3.625rem;
--font-size-55: 3.4375rem;
--font-size-52: 3.25rem;
--font-size-49: 3.0625rem;
--font-size-46: 2.875rem;
--font-size-43: 2.6875rem;
--font-size-41: 2.5625rem;
--font-size-38: 2.375rem;
--font-size-36: 2.25rem;
--font-size-33: 2.0625rem;
--font-size-30: 1.875rem;
--font-size-29: 1.8125rem;
--font-size-27: 1.6875rem;
--font-size-26: 1.625rem;
--font-size-25: 1.5625rem;
--font-size-24: 1.5rem;
--font-size-23: 1.4375rem;
--font-size-21: 1.3125rem;
--font-size-20: 1.25rem;
--font-size-19: 1.1875rem;
--font-size-18: 1.125rem;
--font-size-17: 1.0625rem;
--font-size-16: 1rem;
--font-size-15: 0.9375rem;
--font-size-14: 0.875rem;
--font-size-13: 0.8125rem;
--font-families-yalenew: YaleNew, serif;
--font-families-mallory: Mallory, sans-serif;
--font-families-mallory-compact: 'Mallory Compact', sans-serif;
--site-header-layout-right-flex-direction: row;
--site-header-layout-center-flex-direction: column;
--site-header-layout-left-flex-direction: column;
--font-spacing-paragraph: 1em;
--font-text-transform-h6-mallory-compact-book: uppercase;
--font-text-transform-h6-mallory-compact-medium: uppercase;
--font-text-transform-h6-yale-new: uppercase;
--font-letter-spacing-yalenew-bold: 0.01em;
--font-letter-spacing-h6-mallory-compact-book: 0.02em;
--font-letter-spacing-h2-mallory-compact-book: -0.01em;
--font-letter-spacing-h1-mallory-compact-book: -0.01em;
--font-letter-spacing-h6-mallory-compact-medium: 0.02em;
--font-letter-spacing-h2-mallory-compact-medium: -0.01em;
--font-letter-spacing-h1-mallory-compact-medium: -0.01em;
--font-letter-spacing-h6-yale-new: 0.03em;
--font-weights-yalenew-bold: 700;
--font-weights-yalenew-roman: 400;
--font-weights-mallory-medium: 500;
--font-weights-mallory-book: 400;
--size-thickness-hairline: 0.031rem;
--size-thickness-8: 0.5rem;
--size-thickness-6: 0.375rem;
--size-thickness-4: 0.25rem;
--size-thickness-2: 0.125rem;
--size-thickness-1: 0.063rem;
--size-thickness-0: 0rem;
--size-spacing-13: 10rem;
--size-spacing-12: 6rem;
--size-spacing-11: 5rem;
--size-spacing-10: 4rem;
--size-spacing-9: 3rem;
--size-spacing-8: 2.5rem;
--size-spacing-7: 2rem;
--size-spacing-6: 1.5rem;
--size-spacing-5: 1rem;
--size-spacing-4: 0.75rem;
--size-spacing-3: 0.5rem;
--size-spacing-2: 0.25rem;
--size-spacing-1: 0.125rem;
--size-spacing-0: 0rem;
--size-click-target-minimum: 2.75rem;
--size-component-layout-width-content: 49.375rem;
--size-component-layout-width-highlight: 65rem;
--size-component-layout-width-feature: 84rem;
--size-component-layout-width-max: 100rem;
--layout-flex-position-space-between: space-between;
--layout-flex-position-baseline: baseline;
--layout-flex-position-right: flex-end;
--layout-flex-position-center: center;
--layout-flex-position-left: flex-start;
--layout-width-100: 100%;
--layout-width-75: 75%;
--layout-width-50: 50%;
--layout-width-25: 25%;
--animation-speed-slow: 800ms;
--animation-speed-default: 200ms;
--break-max-width: 2400px;
--break-2xl: 1400px;
--break-xl: 1200px;
--break-l: 992px;
--break-m: 768px;
--break-s: 576px;
--color-gray-800: hsl(0, 0%, 13%);
--color-gray-700: hsl(0, 0%, 25%);
--color-gray-600: hsl(0, 0%, 37%);
--color-gray-500: hsl(0, 0%, 46%);
--color-gray-400: hsl(0, 0%, 61%);
--color-gray-300: hsl(0, 0%, 73%);
--color-gray-200: hsl(0, 0%, 85%);
--color-gray-100: hsl(0, 0%, 97%);
--color-basic-brown-gray: hsl(28, 7%, 44%);
--color-basic-black: hsl(0, 0%, 0%);
--color-basic-white: hsl(0, 0%, 100%);
--color-blue-light: hsl(213, 100%, 69%);
--color-blue-medium: hsl(213, 66%, 45%);
--color-blue-yale: hsl(210, 100%, 21%);
--color-alert-marketing-background-color: hsl(198, 100%, 85%);
--color-alert-announcement-background-color: hsl(50, 99%, 61%);
--color-alert-emergency-text: hsl(0, 0%, 100%);
--color-alert-emergency-background-color: hsl(0, 74%, 48%);
--color-cta-theme-blue-yale: hsl(0, 0%, 0%);
--color-cta-theme-gray-700: hsl(0, 0%, 0%);
--color-cta-theme-gray-800: hsl(0, 0%, 0%);
--site-header-layout-right-align: var(--layout-flex-position-baseline);
--site-header-layout-right-justify: var(--layout-flex-position-space-between);
--site-header-layout-center-align: var(--layout-flex-position-center);
--site-header-layout-center-justify: var(--layout-flex-position-center);
--site-header-layout-left-align: var(--layout-flex-position-left);
--site-header-layout-left-justify: var(--layout-flex-position-left);
--site-header-themes-blue-yale-divider-color: var(--color-gray-500);
--site-header-themes-blue-yale-border-color: var(--color-blue-light);
--site-header-themes-blue-yale-site-branding: var(--color-basic-white);
--site-header-themes-blue-yale-yale-branding: var(--color-blue-light);
--site-header-themes-blue-yale-background: var(--color-blue-yale);
--site-header-themes-white-divider-color: var(--color-gray-300);
--site-header-themes-white-border-color: var(--color-blue-yale);
--site-header-themes-white-site-branding: var(--color-blue-yale);
--site-header-themes-white-yale-branding: var(--color-blue-yale);
--site-header-themes-white-background: var(--color-basic-white);
--site-header-themes-gray-100-divider-color: var(--color-gray-300);
--site-header-themes-gray-100-border-color: var(--color-blue-yale);
--site-header-themes-gray-100-site-branding: var(--color-blue-yale);
--site-header-themes-gray-100-yale-branding: var(--color-blue-yale);
--site-header-themes-gray-100-background: var(--color-gray-100);
--site-footer-themes-white-border-color: var(--color-blue-yale);
--site-footer-themes-gray-100-border-color: var(--color-blue-yale);
--site-footer-themes-gray-700-border-color: var(--color-blue-light);
--site-footer-themes-gray-800-border-color: var(--color-blue-light);
--site-footer-themes-blue-yale-border-color: var(--color-blue-light);
--font-scale-13-14: clamp(var(--font-size-13), calc(0.12vw + 0.7688rem), var(--font-size-14));
--font-scale-15-16: clamp(var(--font-size-15), calc(0.12vw + 0.8938rem), var(--font-size-16));
--font-scale-15-18: clamp(var(--font-size-15), calc(0.36vw + 0.8064rem), var(--font-size-18));
--font-scale-16-19: clamp(var(--font-size-16), calc(0.36vw + 0.8689rem), var(--font-size-19));
--font-scale-17-20: clamp(var(--font-size-17), calc(0.36vw + 0.9314rem), var(--font-size-20));
--font-scale-20-24: clamp(var(--font-size-20), calc(0.49vw + 1.0752rem), var(--font-size-24));
--font-scale-20-26: clamp(var(--font-size-20), calc(0.73vw + 0.9879rem), var(--font-size-26));
--font-scale-21-25: clamp(var(--font-size-21), calc(0.49vw + 1.1377rem), var(--font-size-25));
--font-scale-23-29: clamp(var(--font-size-23), calc(0.73vw + 1.1754rem), var(--font-size-29));
--font-scale-24-30: clamp(var(--font-size-24), calc(0.73vw + 1.2379rem), var(--font-size-30));
--font-scale-27-36: clamp(var(--font-size-27), calc(1.09vw + 1.2943rem), var(--font-size-36));
--font-scale-29-41: clamp(var(--font-size-29), calc(1.46vw + 1.2882rem), var(--font-size-41));
--font-scale-33-46: clamp(var(--font-size-33), calc(1.58vw + 1.4945rem), var(--font-size-46));
--font-scale-36-52: clamp(var(--font-size-36), calc(1.94vw + 1.5510rem), var(--font-size-52));
--font-scale-38-55: clamp(var(--font-size-38), calc(2.06vw + 1.6323rem), var(--font-size-55));
--font-scale-41-58: clamp(var(--font-size-41), calc(2.06vw + 1.8198rem), var(--font-size-58));
--font-scale-43-62: clamp(var(--font-size-43), calc(2.32vw + 1.8574rem), var(--font-size-62));
--font-style-branding-site: 400 clamp(2.25rem, calc(1.58vw + 1.6820rem), 3.0625rem)/1 YaleNew, serif;
--font-style-branding-yale: 400 clamp(1.0625rem, calc(0.36vw + 0.9314rem), 1.25rem)/1.05 YaleNew, serif;
--font-style-body-xs: 400 clamp(0.8125rem, calc(0.12vw + 0.7688rem), 0.875rem)/1.4 'Mallory Compact', sans-serif;
--font-style-body-s-condensed: 400 clamp(0.9375rem, calc(0.12vw + 0.8938rem), 1rem)/1.4 'Mallory Compact', sans-serif;
--font-style-body-s: 400 clamp(0.9375rem, calc(0.12vw + 0.8938rem), 1rem)/1.7 'Mallory Compact', sans-serif;
--font-style-body-default-condensed: 400 clamp(1.0625rem, calc(0.36vw + 0.9314rem), 1.25rem)/1.4 'Mallory Compact', sans-serif;
--font-style-body-default: 400 clamp(1.0625rem, calc(0.36vw + 0.9314rem), 1.25rem)/1.7 'Mallory Compact', sans-serif;
--font-style-body-l: 400 clamp(1.25rem, calc(0.73vw + 0.9879rem), 1.625rem)/1.7 'Mallory Compact', sans-serif;
--font-style-body-xl: 400 clamp(1.4375rem, calc(0.73vw + 1.1754rem), 1.8125rem)/1.7 'Mallory Compact', sans-serif;
--font-style-heading-h6-mallory-compact-book: 400 clamp(0.9375rem, calc(0.36vw + 0.8064rem), 1.125rem)/1.05 'Mallory Compact', sans-serif;
--font-style-heading-h5-mallory-compact-book: 400 clamp(1.25rem, calc(0.49vw + 1.0752rem), 1.5rem)/1.15 'Mallory Compact', sans-serif;
--font-style-heading-h4-mallory-compact-book: 400 clamp(1.4375rem, calc(0.73vw + 1.1754rem), 1.8125rem)/1.10 'Mallory Compact', sans-serif;
--font-style-heading-h3-mallory-compact-book: 400 clamp(1.6875rem, calc(1.09vw + 1.2943rem), 2.25rem)/1.05 'Mallory Compact', sans-serif;
--font-style-heading-h2-mallory-compact-book: 400 clamp(2.0625rem, calc(1.58vw + 1.4945rem), 2.875rem)/1 'Mallory Compact', sans-serif;
--font-style-heading-h1-mallory-compact-book: 400 clamp(2.5625rem, calc(2.06vw + 1.8198rem), 3.625rem)/1 'Mallory Compact', sans-serif;
--font-style-heading-h6-mallory-compact-medium: 500 clamp(0.9375rem, calc(0.36vw + 0.8064rem), 1.125rem)/1.05 'Mallory Compact', sans-serif;
--font-style-heading-h5-mallory-compact-medium: 500 clamp(1.25rem, calc(0.49vw + 1.0752rem), 1.5rem)/1.15 'Mallory Compact', sans-serif;
--font-style-heading-h4-mallory-compact-medium: 500 clamp(1.4375rem, calc(0.73vw + 1.1754rem), 1.8125rem)/1.10 'Mallory Compact', sans-serif;
--font-style-heading-h3-mallory-compact-medium: 500 clamp(1.6875rem, calc(1.09vw + 1.2943rem), 2.25rem)/1.05 'Mallory Compact', sans-serif;
--font-style-heading-h2-mallory-compact-medium: 500 clamp(2.0625rem, calc(1.58vw + 1.4945rem), 2.875rem)/1 'Mallory Compact', sans-serif;
--font-style-heading-h1-mallory-compact-medium: 500 clamp(2.5625rem, calc(2.06vw + 1.8198rem), 3.625rem)/1 'Mallory Compact', sans-serif;
--font-style-heading-h6-yale-new: 400 clamp(1rem, calc(0.36vw + 0.8689rem), 1.1875rem)/1.05 YaleNew, serif;
--font-style-heading-h5-yale-new: 400 clamp(1.3125rem, calc(0.49vw + 1.1377rem), 1.5625rem)/1.14 YaleNew, serif;
--font-style-heading-h4-yale-new: 400 clamp(1.5rem, calc(0.73vw + 1.2379rem), 1.875rem)/1.14 YaleNew, serif;
--font-style-heading-h3-yale-new: 400 clamp(1.8125rem, calc(1.46vw + 1.2882rem), 2.5625rem)/1.14 YaleNew, serif;
--font-style-heading-h2-yale-new: 400 clamp(2.25rem, calc(1.94vw + 1.5510rem), 3.25rem)/1.1 YaleNew, serif;
--font-style-heading-h1-yale-new: 400 clamp(2.6875rem, calc(2.32vw + 1.8574rem), 3.875rem)/1.1 YaleNew, serif;
--font-style-nav-primary-2: var(--font-weights-mallory-book) var(--font-size-17)/1.18 var(--font-families-mallory-compact);
--font-style-nav-primary-1: var(--font-weights-mallory-book) var(--font-size-19)/1.65 var(--font-families-mallory-compact);
--font-style-nav-primary-0: var(--font-weights-mallory-book) var(--font-size-20)/1.65 var(--font-families-mallory-compact);
--callout-themes-gray-700-background-color: var(--color-gray-700);
--callout-themes-blue-yale-background-color: var(--color-blue-yale);
--border-thickness-hairline: var(--size-thickness-hairline);
--border-thickness-8: var(--size-thickness-8);
--border-thickness-6: var(--size-thickness-6);
--border-thickness-4: var(--size-thickness-4);
--border-thickness-2: var(--size-thickness-2);
--border-thickness-1: var(--size-thickness-1);
--border-thickness-0: var(--size-thickness-0);
--component-themes-blue-yale-heading: var(--color-basic-white);
--component-themes-blue-yale-text: var(--color-basic-white);
--component-themes-blue-yale-background: var(--color-blue-yale);
--component-themes-white-heading: var(--color-gray-800);
--component-themes-white-text: var(--color-gray-700);
--component-themes-white-background: var(--color-basic-white);
--component-themes-gray-100-heading: var(--color-gray-800);
--component-themes-gray-100-text: var(--color-gray-700);
--component-themes-gray-100-background: var(--color-gray-100);
--component-themes-gray-200-heading: var(--color-gray-800);
--component-themes-gray-200-text: var(--color-gray-700);
--component-themes-gray-200-background: var(--color-gray-200);
--component-themes-gray-700-heading: var(--color-basic-white);
--component-themes-gray-700-text: var(--color-basic-white);
--component-themes-gray-700-background: var(--color-gray-700);
--component-themes-gray-800-heading: var(--color-basic-white);
--component-themes-gray-800-text: var(--color-basic-white);
--component-themes-gray-800-background: var(--color-gray-800);
--break-mobile-max: var(--break-l) - 0.05;
--break-mobile: var(--break-l);
--link-underline-size-thick: var(--size-thickness-8);
--link-underline-size-default: var(--size-thickness-2);
--color-alert-marketing-border-color: var(--color-gray-500);
--color-alert-announcement-border-color: var(--color-gray-500);
--color-alert-emergency-border-color: var(--color-basic-white);
--color-heading: var(--color-gray-800);
--color-text: var(--color-gray-700);
--color-background: var(--color-basic-white);
--color-link-theme-gray-200-hover: var(--color-gray-700);
--color-link-theme-gray-200-base: var(--color-blue-yale);
--color-link-theme-gray-700-hover: var(--color-gray-300);
--color-link-theme-gray-700-base: var(--color-basic-white);
--color-link-theme-blue-yale-hover: var(--color-blue-light);
--color-link-theme-blue-yale-base: var(--color-basic-white);
--color-link-theme-gray-800-hover: var(--color-blue-light);
--color-link-theme-gray-800-base: var(--color-basic-white);
--color-link-hover: var(--color-gray-700);
--color-link-base: var(--color-blue-medium);
--color-cta-primary: var(--color-blue-yale);
--color-cta-secondary: var(--color-background);
}
Loading

0 comments on commit 10e37b2

Please sign in to comment.