diff --git a/src/_data/designTokens/colors.json b/src/_data/designTokens/colors.json new file mode 100644 index 0000000..6381a91 --- /dev/null +++ b/src/_data/designTokens/colors.json @@ -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" + } + ] +} diff --git a/src/_data/designTokens/fonts.json b/src/_data/designTokens/fonts.json new file mode 100644 index 0000000..27f3e3f --- /dev/null +++ b/src/_data/designTokens/fonts.json @@ -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" + ] + } + ] +} diff --git a/src/assets/design-tokens/text-sizes.json b/src/_data/designTokens/sizes.json similarity index 69% rename from src/assets/design-tokens/text-sizes.json rename to src/_data/designTokens/sizes.json index 981ff87..25983e8 100644 --- a/src/assets/design-tokens/text-sizes.json +++ b/src/_data/designTokens/sizes.json @@ -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 } ] } diff --git a/src/assets/design-tokens/spacing.json b/src/_data/designTokens/spacing.json similarity index 54% rename from src/assets/design-tokens/spacing.json rename to src/_data/designTokens/spacing.json index e5a6f74..7d15fa3 100644 --- a/src/assets/design-tokens/spacing.json +++ b/src/_data/designTokens/spacing.json @@ -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 } ] } diff --git a/src/assets/design-tokens/viewports.json b/src/_data/designTokens/viewports.json similarity index 100% rename from src/assets/design-tokens/viewports.json rename to src/_data/designTokens/viewports.json diff --git a/src/assets/design-tokens/colors.json b/src/assets/design-tokens/colors.json deleted file mode 100644 index 8b16210..0000000 --- a/src/assets/design-tokens/colors.json +++ /dev/null @@ -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" - } - ] -} diff --git a/src/assets/design-tokens/fonts.json b/src/assets/design-tokens/fonts.json deleted file mode 100644 index 4d7fca0..0000000 --- a/src/assets/design-tokens/fonts.json +++ /dev/null @@ -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"] - } - ] -} diff --git a/src/assets/css-utils/clamp-generator.js b/src/utilities/clamp-generator.js similarity index 94% rename from src/assets/css-utils/clamp-generator.js rename to src/utilities/clamp-generator.js index a853536..2752f17 100644 --- a/src/assets/css-utils/clamp-generator.js +++ b/src/utilities/clamp-generator.js @@ -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 diff --git a/src/assets/css-utils/tokens-to-tailwind.js b/src/utilities/tokens-to-tailwind.js similarity index 100% rename from src/assets/css-utils/tokens-to-tailwind.js rename to src/utilities/tokens-to-tailwind.js