design tokens reorganized and setup with new values
This commit is contained in:
madrilene
parent
071e72909f
commit
a0f90cffbc
9 changed files with 118 additions and 109 deletions
26
src/_data/designTokens/colors.json
Normal file
26
src/_data/designTokens/colors.json
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
{
|
||||
"title": "Colors",
|
||||
"description": "Hex color codes that can be shared, cross-platform. They can be converted at point of usage, such as HSL for web or CMYK for print.",
|
||||
"items": [
|
||||
{
|
||||
"name": "Base Dark",
|
||||
"value": "#343434"
|
||||
},
|
||||
{
|
||||
"name": "Base Light",
|
||||
"value": "#FBFBFB"
|
||||
},
|
||||
{
|
||||
"name": "Primary Highlight",
|
||||
"value": "#dd4462"
|
||||
},
|
||||
{
|
||||
"name": "Secondary Highlight",
|
||||
"value": "#4467dd"
|
||||
},
|
||||
{
|
||||
"name": "Tertiary Highlight",
|
||||
"value": "#fbbe25"
|
||||
}
|
||||
]
|
||||
}
|
||||
37
src/_data/designTokens/fonts.json
Normal file
37
src/_data/designTokens/fonts.json
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
{
|
||||
"title": "Fonts",
|
||||
"description": "Each array of fonts creates a priority-based order. The first font in the array should be the ideal font, followed by sensible, web-safe fallbacks",
|
||||
"items": [
|
||||
{
|
||||
"name": "Display",
|
||||
"description": "Display font stack for headings and large text.",
|
||||
"value": ["Redhat", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif"]
|
||||
},
|
||||
{
|
||||
"name": "Base",
|
||||
"description": "Base font stack for body text.",
|
||||
"value": [
|
||||
"Figtree",
|
||||
"Optima",
|
||||
"Candara",
|
||||
"Noto Sans",
|
||||
"source-sans-pro",
|
||||
"sans-serif"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Mono",
|
||||
"description": "Monospace font for code and preformatted text.",
|
||||
"value": [
|
||||
"RobotoMono",
|
||||
"ui-monospace",
|
||||
"Cascadia Code",
|
||||
"Source Code Pro",
|
||||
"Menlo",
|
||||
"Consolas",
|
||||
"DejaVu Sans Mono",
|
||||
"monospace"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -2,48 +2,53 @@
|
|||
"title": "Text Sizes",
|
||||
"description": "A minimum and maximum text size size allows you to pick the right size from a ratio, depending on the context size. The min and max sizes are in pixels and should be converted to appropiate sizes, per context. For example, for web, the should be converted to REM units (pixelSize / baseSize)",
|
||||
"meta": {
|
||||
"scaleGenerator": "https://utopia.fyi/type/calculator/?c=320,16,1.2,1350,20,1.414,8,1,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l"
|
||||
"scaleGenerator": "https://utopia.fyi/type/calculator?c=320,19,1.2,1350,28,1.25,6,2,&s=0.75|0.5|0.25,2|3|5|8|13,s-l&g=s,l,xl,12"
|
||||
},
|
||||
"items": [
|
||||
{
|
||||
"name": "Step min 1",
|
||||
"name": "Step min 2",
|
||||
"min": 13,
|
||||
"max": 14
|
||||
"max": 16
|
||||
},
|
||||
{
|
||||
"name": "Step min 1",
|
||||
"min": 16,
|
||||
"max": 22
|
||||
},
|
||||
{
|
||||
"name": "Step 0",
|
||||
"min": 16,
|
||||
"max": 20
|
||||
},
|
||||
{
|
||||
"name": "Step 1",
|
||||
"min": 19,
|
||||
"max": 28
|
||||
},
|
||||
{
|
||||
"name": "Step 2",
|
||||
"name": "Step 1",
|
||||
"min": 23,
|
||||
"max": 40
|
||||
"max": 35
|
||||
},
|
||||
{
|
||||
"name": "Step 2",
|
||||
"min": 27,
|
||||
"max": 44
|
||||
},
|
||||
{
|
||||
"name": "Step 3",
|
||||
"min": 28,
|
||||
"max": 57
|
||||
"min": 33,
|
||||
"max": 55
|
||||
},
|
||||
{
|
||||
"name": "Step 4",
|
||||
"min": 33,
|
||||
"max": 80
|
||||
"min": 40,
|
||||
"max": 68
|
||||
},
|
||||
{
|
||||
"name": "Step 5",
|
||||
"min": 40,
|
||||
"max": 113
|
||||
"min": 47,
|
||||
"max": 86
|
||||
},
|
||||
{
|
||||
"name": "Step 6",
|
||||
"min": 48,
|
||||
"max": 160
|
||||
"min": 56,
|
||||
"max": 107
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -2,83 +2,79 @@
|
|||
"title": "Spacing",
|
||||
"description": "Consistent spacing sizes, based on a ratio, with min and max sizes. This allows you to set spacing based on the context size. For example, min for mobile and max for desktop browsers.",
|
||||
"meta": {
|
||||
"scaleGenerator": "https://utopia.fyi/space/calculator?c=320,16,1.2,1350,20,1.414,8,1,&s=0.75|0.5|0.25,2|3|5|8|13,s-l"
|
||||
"scaleGenerator": "https://utopia.fyi/space/calculator?c=320,19,1.2,1350,26,1.414,8,2,&s=0.75|0.5|0.25,2|3|5|8|13,s-l&g=s,l,xl,12",
|
||||
"note": "I'm shifing the the scale so spaces don't get too big. XS is euual to 3XS."
|
||||
},
|
||||
"items": [
|
||||
{
|
||||
"name": "2XS",
|
||||
"min": 8,
|
||||
"max": 10
|
||||
},
|
||||
{
|
||||
"name": "XS",
|
||||
"min": 12,
|
||||
"max": 15
|
||||
"min": 5,
|
||||
"max": 7
|
||||
},
|
||||
{
|
||||
"name": "S",
|
||||
"min": 16,
|
||||
"max": 20
|
||||
"min": 10,
|
||||
"max": 14
|
||||
},
|
||||
{
|
||||
"name": "M",
|
||||
"min": 32,
|
||||
"max": 40
|
||||
"min": 14,
|
||||
"max": 21
|
||||
},
|
||||
{
|
||||
"name": "L",
|
||||
"min": 48,
|
||||
"max": 60
|
||||
"min": 19,
|
||||
"max": 28
|
||||
},
|
||||
{
|
||||
"name": "XL",
|
||||
"min": 80,
|
||||
"max": 100
|
||||
"min": 38,
|
||||
"max": 56
|
||||
},
|
||||
{
|
||||
"name": "2XL",
|
||||
"min": 128,
|
||||
"max": 160
|
||||
"min": 57,
|
||||
"max": 84
|
||||
},
|
||||
{
|
||||
"name": "3XL",
|
||||
"min": 208,
|
||||
"max": 260
|
||||
"min": 95,
|
||||
"max": 140
|
||||
},
|
||||
{
|
||||
"name": "XS - S",
|
||||
"min": 12,
|
||||
"max": 20
|
||||
"min": 5,
|
||||
"max": 14
|
||||
},
|
||||
{
|
||||
"name": "S - M",
|
||||
"min": 16,
|
||||
"max": 30
|
||||
"min": 10,
|
||||
"max": 21
|
||||
},
|
||||
{
|
||||
"name": "M - L",
|
||||
"min": 24,
|
||||
"max": 40
|
||||
"min": 14,
|
||||
"max": 28
|
||||
},
|
||||
{
|
||||
"name": "L - XL",
|
||||
"min": 32,
|
||||
"max": 60
|
||||
"min": 19,
|
||||
"max": 56
|
||||
},
|
||||
{
|
||||
"name": "L - 2xl",
|
||||
"min": 32,
|
||||
"max": 80
|
||||
"min": 38,
|
||||
"max": 84
|
||||
},
|
||||
{
|
||||
"name": "XL - 2XL",
|
||||
"min": 48,
|
||||
"max": 80
|
||||
"min": 57,
|
||||
"max": 140
|
||||
},
|
||||
{
|
||||
"name": "2XL - 3XL",
|
||||
"min": 64,
|
||||
"max": 120
|
||||
"name": "2XL - 3xl",
|
||||
"min": 95,
|
||||
"max": 224
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
{
|
||||
"title": "Colors",
|
||||
"description": "Hex color codes that can be shared, cross-platform. They can be converted at point of usage, such as HSL for web or CMYK for print.",
|
||||
"items": [
|
||||
{
|
||||
"name": "Dark",
|
||||
"value": "#404040"
|
||||
},
|
||||
{
|
||||
"name": "Light",
|
||||
"value": "#F3F3F3"
|
||||
},
|
||||
{
|
||||
"name": "Light Glare",
|
||||
"value": "#FFFFFF"
|
||||
},
|
||||
{
|
||||
"name": "Primary",
|
||||
"value": "#dd4462"
|
||||
},
|
||||
{
|
||||
"name": "Primary Glare",
|
||||
"value": "#F4D0DF"
|
||||
},
|
||||
{
|
||||
"name": "Secondary",
|
||||
"value": "#0369A1"
|
||||
},
|
||||
{
|
||||
"name": "Secondary Glare",
|
||||
"value": "#D8E2F4"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
{
|
||||
"title": "Fonts",
|
||||
"description": "Each array of fonts creates a priority-based order. The first font in the array should be the ideal font, followed by sensible, web-safe fallbacks",
|
||||
"items": [
|
||||
{
|
||||
"name": "Display",
|
||||
"description": "System fonts for body copy and globally set text.",
|
||||
"value": ["Redhat", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif"]
|
||||
},
|
||||
{
|
||||
"name": "Base",
|
||||
"description": "System fonts for body copy and globally set text.",
|
||||
"value": ["Inter", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif"]
|
||||
},
|
||||
{
|
||||
"name": "Mono",
|
||||
"description": "Expressive sections, like quotes",
|
||||
"value": ["RobotoMono", "monospace"]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
/** © Andy Bell - https://buildexcellentwebsit.es/ */
|
||||
|
||||
const viewports = require('../design-tokens/viewports.json');
|
||||
const viewports = require('../_data/designTokens/viewports.json');
|
||||
|
||||
/**
|
||||
* Takes an array of tokens and sends back and array of name
|
||||
Loading…
Reference in a new issue