plasttic
Version:
Plasttic Web Workflow: A methodology based Front-End development environment.
227 lines (187 loc) • 5.62 kB
CSS
/* --- COMPONENTS --- */
@import "20_components";
/**
* 30_tokens.css
*
* INDEX
* -----
*
* LOAD FONTS................Self hosted fonts
*
* TOKENS (:root)
* Colors
* Font
* Text
* Box Model
*
* Breakpoints
*
* TYPOGRAPHY TOKENS...........Extends Font and Text
*
*/
/* ==========================================================================
Load Fonts
========================================================================== */
@font-face {
font-family: "Roboto";
font-style: normal;
font-weight: 300;
src: url("/assets/fonts/roboto-latin-300-normal.woff2") format("woff2");
font-display: swap;
}
@font-face {
font-family: "Roboto";
font-style: normal;
font-weight: 400;
src: url("/assets/fonts/roboto-latin-400-normal.woff2") format("woff2");
font-display: swap;
}
@font-face {
font-family: "Roboto";
font-style: normal;
font-weight: 500;
src: url("/assets/fonts/roboto-latin-500-normal.woff2") format("woff2");
font-display: swap;
}
/* ==========================================================================
Tokens
========================================================================== */
:root {
/**
* COLORS
* Shade number classification light to dark
* 500 is the main color; shades from 100-900
* Optional: create middle values like 650
* Primary and Secondary usually are the brand colors
* Theme colors can be changed on page specific styles
*/
/* Neutral */
--ptt-clr-neutral-100: hsl(0 0% 100%); /* white */
--ptt-clr-neutral-200: hsl(0 0% 87.5%);
--ptt-clr-neutral-300: hsl(0 0% 75%);
--ptt-clr-neutral-400: hsl(0 0% 62.5%);
--ptt-clr-neutral-500: hsl(0 0% 50%);
--ptt-clr-neutral-600: hsl(0 0% 37.5%);
--ptt-clr-neutral-700: hsl(0 0% 25%);
--ptt-clr-neutral-800: hsl(0 0% 12.5%);
--ptt-clr-neutral-900: hsl(0 0% 0%); /* black */
/* Primary (Brand) */
--ptt-clr-primary-100: hsl(191 50% 87%);
--ptt-clr-primary-300: hsl(190 50% 59%);
--ptt-clr-primary-400: hsl(190 50% 35%);
--ptt-clr-primary-800: hsl(192 41% 20%);
/* Secondary */
--ptt-clr-secondary-400: var(---ptt-clr-neutral-800);
/* Complementary */
--ptt-clr-complement-red-400: hsl(348 68% 42%);
/* Utility */
--ptt-clr-util-error-400: hsl(0 86% 38%);
--ptt-clr-util-success-400: hsl(121 83% 33%);
/* Backgrounds */
--ptt-clr-bkg-body: var(--ptt-clr-neutral-100);
--ptt-clr-bkg-nav: var(--ptt-clr-neutral-100);
--ptt-clr-bkg-main: var(--ptt-clr-neutral-100); /* by section name */
--ptt-clr-bkg-footer: var(--ptt-clr-neutral-100);
/* Theme */
/**
* FONT
* Family, Weights, Sizes
*/
/* Font Families */
--ptt-fnt-family-primary: "Roboto", sans-serif;
/* Font- Weights */
--ptt-fnt-weight-light: 300;
--ptt-fnt-weight-regular: 400;
--ptt-fnt-weight-bold: 500;
/* Font- Sizes: 200: 14px, 400: 16px, 500: 20px,
700nt-: 28px, 900: 36px */
--ptt-fnt-size-100: 0.85rem;
--ptt-fnt-size-200: 0.875rem;
--ptt-fnt-size-400: 1rem;
--ptt-fnt-size-500: 1.25rem;
--ptt-fnt-size-700: 1.75rem;
--ptt-fnt-size-900: 2.25rem;
/**
* TEXT
* Line height, ...
*/
/* Line Heights */
--ptt-txt-line-height-100: 0.85;
--ptt-txt-line-height-200: 1;
--ptt-txt-line-height-300: 1.2;
--ptt-txt-line-height-400: 1.45; /* default: reset.css */
/**
* BOX
* Padding, margin
*/
/* Padding */
--ptt-padding-200: 0.75em;
--ptt-padding-300: 0.9em;
--ptt-padding-400: 1em;
--ptt-padding-500: 1.1em;
--ptt-padding-700: 1.5em;
--ptt-padding-900: 2em;
/* Margin */
--ptt-margin-400: 1rem;
--ptt-margin-600: 1.5rem;
/* Border */
--ptt-border-400: 1px solid;
/* Border radius */
--ptt-border-radius-400: 1rem;
/**
* GRID / FLEXBOX
* Gap,
*/
/* Gap */
--ptt-gap-400: 1rem;
--ptt-gap-700: 2rem;
}
/**
* BREAKPOINTS
* Mobile, Tablet, Laptop, Desktop
*/
/* 30rem: 480px, 48rem: 768px, 62rem: 992px, 64rem: 1024px, 75rem: 1200px */
@custom-media --ptt-bkp-xs (width >= 30rem);
@custom-media --ptt-bkp-sm (width >= 48rem);
@custom-media --ptt-bkp-md (width >= 62rem);
@custom-media --ptt-bkp-lg (width >= 64rem);
@custom-media --ptt-bkp-xl (width >= 75rem);
/* ==========================================================================
Typography Tokens
========================================================================== */
:root {
/**
* TYPOGRAPHY
* Body, Headers, Navigation, Footer
*/
/* Body */
--ptt-fnt-family-body: var(--ptt-fnt-family-primary);
--ptt-fnt-weight-body: var(--ptt-fnt-weight-light);
--ptt-fnt-size-body: var(--ptt-fnt-size-400);
/* Headers */
--ptt-fnt-weight-header: var(--ptt-fnt-weight-bold);
--ptt-fnt-size-header-h1: var(--ptt-fnt-size-700);
--ptt-fnt-size-header-h2: var(--ptt-fnt-size-500);
--ptt-txt-line-height-header: var(--ptt-txt-line-height-200);
/* Navigation */
--ptt-fnt-weight-primary-nav: var(--ptt-fnt-weight-regular);
--ptt-fnt-size-primary-nav: var(--ptt-fnt-size-200);
/* Footer */
--ptt-fnt-weight-footer: var(--ptt-fnt-weight-regular);
--ptt-fnt-size-footer: var(--ptt-fnt-size-200);
}
/**
* RESPONSIVE TYPOGRAPHY
* Redefine Typography token values by Breakpoint
* whenever needed
*/
/* Increase font sizes for desktop */
@media (--ptt-bkp-md) {
:root {
--ptt-fnt-size-body: var(--ptt-fnt-size-500);
--ptt-fnt-size-header-h1: var(--ptt-fnt-size-900);
--ptt-fnt-size-header-h2: var(--ptt-fnt-size-700);
--ptt-fnt-size-primary-nav: var(--ptt-fnt-size-200);
--ptt-fnt-size-footer: var(--ptt-fnt-size-200);
}
}