Skip to content

Commit

Permalink
Merge pull request #26 from wellcometrust/consistency-update
Browse files Browse the repository at this point in the history 
Consistency updates
  • Loading branch information
@skibinska
skibinska authored Aug 13, 2024
2 parents 35e7bdb + d7db13c commit 635cfbe
Show file tree
Hide file tree
Showing 6 changed files with 828 additions and 506 deletions.
63 changes: 46 additions & 17 deletions tokens-generated/css/core.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,17 +85,17 @@
--wds-color-yellow-80: #574f00;
--wds-color-yellow-90: #3d3800;
--wds-color-yellow-05: #fffef0;
--wds-font-family-mono: 'Courier New', Courier, monospace;
--wds-font-family-brand: Wellcome, sans-serif;
--wds-font-family-sans-serif: Inter, sans-serif;
--wds-font-weight-30: 300; /* Light */
--wds-font-weight-40: 400; /* Regular */
--wds-font-weight-50: 500; /* Medium */
--wds-font-weight-60: 600; /* Semi-bold */
--wds-font-weight-70: 700; /* Bold */
--wds-font-letter-spacing-15: -0.03125rem;
--wds-font-letter-spacing-20: 0.0125rem;
--wds-font-letter-spacing-25: 0.025rem;
--wds-font-family-mono: '“IBM Plex Mono”', '“Courier New”', Courier, monospace;
--wds-font-family-brand: Wellcome, “Wellcome-Bold”, sans-serif;
--wds-font-family-sans: Inter, sans-serif;
--wds-font-weight-light: 300;
--wds-font-weight-regular: 400;
--wds-font-weight-medium: 500;
--wds-font-weight-semibold: 600;
--wds-font-weight-bold: 700;
--wds-font-letter-spacing-tight: -0.03125rem;
--wds-font-letter-spacing-comfortable: 0.0125rem;
--wds-font-letter-spacing-spacious: 0.025rem;
--wds-font-size-10: 0.625rem;
--wds-font-size-12: 0.75rem;
--wds-font-size-14: 0.875rem;
Expand All @@ -108,18 +108,18 @@
--wds-font-size-32: 2rem;
--wds-font-size-34: 2.125rem;
--wds-font-size-40: 2.5rem;
--wds-font-line-height-10: 1;
--wds-font-line-height-15: 1.2;
--wds-font-line-height-20: 1.5;
--wds-font-line-height-25: 1.8;
--wds-font-line-height-sm: 1; /* Buttons, navigation, and other UI components. */
--wds-font-line-height-md: 1.3; /* Body text and captions. */
--wds-font-line-height-lg: 1.6; /* Display, heading and long form body text. */
--wds-font-line-height-xl: 1.8;
--wds-font-text-case-uppercase: uppercase;
--wds-font-text-case-sentence: none;
--wds-breakpoint-xs: 20rem; /* Web breakpoint - mobile */
--wds-breakpoint-sm: 48rem; /* Web breakpoint - tablet */
--wds-breakpoint-md: 64rem; /* Web breakpoint - tablet */
--wds-breakpoint-lg: 90rem; /* Web breakpoint - desktop */
--wds-breakpoint-xl: 120rem; /* Web breakpoint - large desktop */
--wds-space-50: 0.25rem;
--wds-space-0: 0;
--wds-space-100: 0.5rem;
--wds-space-150: 0.75rem;
--wds-space-200: 1rem;
Expand All @@ -129,5 +129,34 @@
--wds-space-800: 4rem;
--wds-space-900: 4.5rem;
--wds-space-1200: 6rem;
--wds-space-base: 0.5rem;
--wds-space-050: 0.25rem;
--wds-layer-1: 1;
--wds-layer-2: 2;
--wds-layer-3: 3;
--wds-layer-4: 4;
--wds-layer-5: 5;
--wds-layer-6: 6;
--wds-layer-7: 7;
--wds-layer-8: 8;
--wds-layer-9: 9;
--wds-layer-10: 10; /* Highest layer */
--wds-layer-10: -10; /* Negative layer */
--wds-dimension-base-8-25: 2px;
--wds-dimension-base-8-50: 4px;
--wds-dimension-base-8-100: 8px; /* Base */
--wds-dimension-base-8-150: 12px;
--wds-dimension-base-8-200: 16px;
--wds-dimension-base-8-300: 24px;
--wds-dimension-base-8-400: 32px;
--wds-dimension-base-8-500: 40px;
--wds-dimension-base-8-600: 48px;
--wds-dimension-base-8-700: 56px;
--wds-dimension-base-8-800: 64px;
--wds-dimension-base-8-900: 72px;
--wds-dimension-base-8-1000: 80px;
--wds-dimension-base-8-1100: 88px;
--wds-dimension-base-8-1200: 96px;
--wds-border-radius-circle: 3.125rem;
--wds-border-radius-xs: 0.125rem;
--wds-border-radius-sm: 0.25rem;
}
84 changes: 42 additions & 42 deletions tokens-generated/css/semantic.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,48 +16,48 @@
--wds-color-surface-bg-light: #ffffff;
--wds-color-surface-accent-amber: #fec200;
--wds-color-surface-accent-red: #e72343;
--wds-font-heading-brand-breakpoint-lg-xxl: 700 2.5rem/1.5 Wellcome, sans-serif; /* To be used for heroes */
--wds-font-heading-brand-breakpoint-lg-xl: 700 2rem/1.5 Wellcome, sans-serif;
--wds-font-heading-brand-breakpoint-lg-lg: 700 1.5rem/1.5 Wellcome, sans-serif;
--wds-font-heading-brand-breakpoint-lg-md: 700 1.25rem/1.5 Wellcome, sans-serif;
--wds-font-heading-brand-breakpoint-lg-sm: 700 1rem/1.5 Wellcome, sans-serif;
--wds-font-heading-brand-breakpoint-lg-xs: 700 0.875rem/1.5 Wellcome, sans-serif;
--wds-font-heading-brand-breakpoint-md-xxl: 700 2.125rem/1.5 Wellcome, sans-serif; /* To be used for heroes */
--wds-font-heading-brand-breakpoint-md-xl: 700 1.75rem/1.5 Wellcome, sans-serif;
--wds-font-heading-brand-breakpoint-md-lg: 700 1.375rem/1.5 Wellcome, sans-serif;
--wds-font-heading-brand-breakpoint-md-md: 700 1.125rem/1.5 Wellcome, sans-serif;
--wds-font-heading-brand-breakpoint-md-sm: 700 1rem/1.5 Wellcome, sans-serif;
--wds-font-heading-brand-breakpoint-md-xs: 700 0.875rem/1.5 Wellcome, sans-serif;
--wds-font-heading-brand-breakpoint-sm-xxl: 700 2rem/1.5 Wellcome, sans-serif; /* To be used for heroes */
--wds-font-heading-brand-breakpoint-sm-xl: 700 1.5rem/1.5 Wellcome, sans-serif;
--wds-font-heading-brand-breakpoint-sm-lg: 700 1.375rem/1.5 Wellcome, sans-serif;
--wds-font-heading-brand-breakpoint-sm-md: 700 1.125rem/1.5 Wellcome, sans-serif;
--wds-font-heading-brand-breakpoint-sm-sm: 700 1rem/1.5 Wellcome, sans-serif;
--wds-font-heading-brand-breakpoint-sm-xs: 700 0.875rem/1.5 Wellcome, sans-serif;
--wds-font-heading-breakpoint-lg-xl: 500 2rem/1.5 Inter, sans-serif;
--wds-font-heading-breakpoint-lg-lg: 500 1.5rem/1.5 Inter, sans-serif;
--wds-font-heading-breakpoint-lg-md: 500 1.25rem/1.5 Inter, sans-serif;
--wds-font-heading-breakpoint-lg-sm: 500 1rem/1.5 Inter, sans-serif;
--wds-font-heading-breakpoint-lg-xs: 500 0.875rem/1.5 Inter, sans-serif;
--wds-font-heading-breakpoint-md-xl: 500 1.75rem/1.5 Inter, sans-serif;
--wds-font-heading-breakpoint-md-lg: 500 1.375rem/1.5 Inter, sans-serif;
--wds-font-heading-breakpoint-md-md: 500 1.125rem/1.5 Inter, sans-serif;
--wds-font-heading-breakpoint-md-sm: 500 1rem/1.5 Inter, sans-serif;
--wds-font-heading-breakpoint-md-xs: 500 0.875rem/1.5 Inter, sans-serif;
--wds-font-heading-breakpoint-sm-xl: 500 1.5rem/1.5 Inter, sans-serif;
--wds-font-heading-breakpoint-sm-lg: 500 1.375rem/1.5 Inter, sans-serif;
--wds-font-heading-breakpoint-sm-md: 500 1.125rem/1.5 Inter, sans-serif;
--wds-font-heading-breakpoint-sm-sm: 500 1rem/1.5 Inter, sans-serif;
--wds-font-heading-breakpoint-sm-xs: 500 0.875rem/1.5 Inter, sans-serif;
--wds-font-body-xxl: 400 1.5rem/1.5 Inter, sans-serif;
--wds-font-body-xl: 400 1.25rem/1.5 Inter, sans-serif;
--wds-font-body-lg: 400 1.125rem/1.5 Inter, sans-serif;
--wds-font-body-md: 400 1rem/1.5 Inter, sans-serif;
--wds-font-body-sm: 400 0.875rem/1.5 Inter, sans-serif;
--wds-font-body-xs: 400 0.75rem/1.5 Inter, sans-serif;
--wds-font-label-md: 600 1rem/1.5 Inter, sans-serif; /* Input label use */
--wds-font-caption-sm: 700 0.75rem/1.5 'Courier New', Courier, monospace;
--wds-font-caption-md: 700 0.875rem/1.5 'Courier New', Courier, monospace;
--wds-font-heading-brand-breakpoint-lg-xxl: 700 2.5rem/1.6 Wellcome, “Wellcome-Bold”, sans-serif; /* To be used for heroes */
--wds-font-heading-brand-breakpoint-lg-xl: 700 2rem/1.6 Wellcome, “Wellcome-Bold”, sans-serif;
--wds-font-heading-brand-breakpoint-lg-lg: 700 1.5rem/1.6 Wellcome, “Wellcome-Bold”, sans-serif;
--wds-font-heading-brand-breakpoint-lg-md: 700 1.25rem/1.6 Wellcome, “Wellcome-Bold”, sans-serif;
--wds-font-heading-brand-breakpoint-lg-sm: 700 1rem/1.6 Wellcome, “Wellcome-Bold”, sans-serif;
--wds-font-heading-brand-breakpoint-lg-xs: 700 0.875rem/1.6 Wellcome, “Wellcome-Bold”, sans-serif;
--wds-font-heading-brand-breakpoint-md-xxl: 700 2.125rem/1.6 Wellcome, “Wellcome-Bold”, sans-serif; /* To be used for heroes */
--wds-font-heading-brand-breakpoint-md-xl: 700 1.75rem/1.6 Wellcome, “Wellcome-Bold”, sans-serif;
--wds-font-heading-brand-breakpoint-md-lg: 700 1.375rem/1.6 Wellcome, “Wellcome-Bold”, sans-serif;
--wds-font-heading-brand-breakpoint-md-md: 700 1.125rem/1.6 Wellcome, “Wellcome-Bold”, sans-serif;
--wds-font-heading-brand-breakpoint-md-sm: 700 1rem/1.6 Wellcome, “Wellcome-Bold”, sans-serif;
--wds-font-heading-brand-breakpoint-md-xs: 700 0.875rem/1.6 Wellcome, “Wellcome-Bold”, sans-serif;
--wds-font-heading-brand-breakpoint-sm-xxl: 700 2rem/1.6 Wellcome, “Wellcome-Bold”, sans-serif; /* To be used for heroes */
--wds-font-heading-brand-breakpoint-sm-xl: 700 1.5rem/1.6 Wellcome, “Wellcome-Bold”, sans-serif;
--wds-font-heading-brand-breakpoint-sm-lg: 700 1.375rem/1.6 Wellcome, “Wellcome-Bold”, sans-serif;
--wds-font-heading-brand-breakpoint-sm-md: 700 1.125rem/1.6 Wellcome, “Wellcome-Bold”, sans-serif;
--wds-font-heading-brand-breakpoint-sm-sm: 700 1rem/1.6 Wellcome, “Wellcome-Bold”, sans-serif;
--wds-font-heading-brand-breakpoint-sm-xs: 700 0.875rem/1.6 Wellcome, “Wellcome-Bold”, sans-serif;
--wds-font-heading-breakpoint-lg-xl: 500 2rem/1.6 Inter, sans-serif;
--wds-font-heading-breakpoint-lg-lg: 500 1.5rem/1.6 Inter, sans-serif;
--wds-font-heading-breakpoint-lg-md: 500 1.25rem/1.6 Inter, sans-serif;
--wds-font-heading-breakpoint-lg-sm: 500 1rem/1.6 Inter, sans-serif;
--wds-font-heading-breakpoint-lg-xs: 500 0.875rem/1.6 Inter, sans-serif;
--wds-font-heading-breakpoint-md-xl: 500 1.75rem/1.6 Inter, sans-serif;
--wds-font-heading-breakpoint-md-lg: 500 1.375rem/1.6 Inter, sans-serif;
--wds-font-heading-breakpoint-md-md: 500 1.125rem/1.6 Inter, sans-serif;
--wds-font-heading-breakpoint-md-sm: 500 1rem/1.6 Inter, sans-serif;
--wds-font-heading-breakpoint-md-xs: 500 0.875rem/1.6 Inter, sans-serif;
--wds-font-heading-breakpoint-sm-xl: 500 1.5rem/1.6 Inter, sans-serif;
--wds-font-heading-breakpoint-sm-lg: 500 1.375rem/1.6 Inter, sans-serif;
--wds-font-heading-breakpoint-sm-md: 500 1.125rem/1.6 Inter, sans-serif;
--wds-font-heading-breakpoint-sm-sm: 500 1rem/1.6 Inter, sans-serif;
--wds-font-heading-breakpoint-sm-xs: 500 0.875rem/1.6 Inter, sans-serif;
--wds-font-body-xxl: 400 1.5rem/1.6 Inter, sans-serif;
--wds-font-body-xl: 400 1.25rem/1.6 Inter, sans-serif;
--wds-font-body-lg: 400 1.125rem/1.6 Inter, sans-serif;
--wds-font-body-md: 400 1rem/1.6 Inter, sans-serif;
--wds-font-body-sm: 400 0.875rem/1.6 Inter, sans-serif;
--wds-font-body-xs: 400 0.75rem/1.6 Inter, sans-serif;
--wds-font-label-md: 600 1rem/1.6 Inter, sans-serif; /* Input label use */
--wds-font-caption-sm: 700 0.75rem/1.6 '“IBM Plex Mono”', '“Courier New”', Courier, monospace;
--wds-font-caption-md: 700 0.875rem/1.6 '“IBM Plex Mono”', '“Courier New”', Courier, monospace;
--wds-space-breakpoint-lg-xxl: 6rem;
--wds-space-breakpoint-lg-xl: 4rem;
--wds-space-breakpoint-lg-lg: 3rem;
Expand Down
Loading

0 comments on commit 635cfbe

Please sign in to comment.