From 3773b4f44ada03e25ce0683a53e88c1616cf3d47 Mon Sep 17 00:00:00 2001 From: Thomas Karagianes Date: Wed, 25 Jan 2023 11:50:22 -0800 Subject: [PATCH 1/9] Integrate Inkline component library as baseline We plan to integrate the Inkline Vue component library as a starting point to speed component creation. We will wrap Inkline components in an Eterna components and use the Eterna components in our pages. This gives us an escape hatch should we need to replace the Inkline library in the future, and lets us define Eterna-specific details for each component. --- packages/design-system/tokens/package.json | 3 + packages/design-system/vue/package.json | 9 ++- .../vue/src/assets/inklineOverrides.css | 73 +++++++++++++++++++ .../design-system/vue/src/assets/style.css | 9 ++- packages/frontend/web/src/assets/style.css | 9 +-- 5 files changed, 89 insertions(+), 14 deletions(-) create mode 100644 packages/design-system/vue/src/assets/inklineOverrides.css diff --git a/packages/design-system/tokens/package.json b/packages/design-system/tokens/package.json index 6a70974..cea4ccd 100644 --- a/packages/design-system/tokens/package.json +++ b/packages/design-system/tokens/package.json @@ -12,5 +12,8 @@ "implicitDependencies": [ "design-system-token-transformer" ] + }, + "exports": { + "./tokens.css": "./dist/tokens.css" } } \ No newline at end of file diff --git a/packages/design-system/vue/package.json b/packages/design-system/vue/package.json index 029caac..b3ab0e1 100644 --- a/packages/design-system/vue/package.json +++ b/packages/design-system/vue/package.json @@ -15,10 +15,15 @@ "type": "module", "main": "./dist/index.js", "exports": { - "import": "./dist/index.js", - "require": "./dist/index.cjs" + ".": { + "import": "./dist/index.js", + "require": "./dist/index.cjs" + }, + "./style.css": "./src/assets/style.css" }, "dependencies": { + "@inkline/inkline": "^3.2.0", + "sass": "^1.57.1", "vue": "^3.2.45" } } diff --git a/packages/design-system/vue/src/assets/inklineOverrides.css b/packages/design-system/vue/src/assets/inklineOverrides.css new file mode 100644 index 0000000..558ad5f --- /dev/null +++ b/packages/design-system/vue/src/assets/inklineOverrides.css @@ -0,0 +1,73 @@ +:root { + /** Animation **/ + --transition-duration: 300ms; + --transition-easing: ease; + + /** Border **/ + + /** Box Shadow **/ + + /** Breakpoints **/ + + /** Colors **/ + --color--primary: var(--blue-40); + --color--secondary: var(--aqua-40); + --color--info: var(--support-info); + --color--warning: var(--support-warning); + --color--danger: var(--support-error); + --color--success: var(--support-success); + --color--red: var(--red-50); + --color--orange: var(--orange-40); + --color--yellow: var(--yellow-20); + --color--green: var(--green-50); + --color--teal: var(--aqua-50); + --color--blue: var(--blue-60); + --color--purple: var(--purple-60); + --color--pink: var(--pink-50); + --color--white: var(--neutrals-white); + --color--black: var(--neutrals-black); + --color--gray: var(--gray-60); + --color--light: var(--gray-10); + --color--dark: var(--gray-90); + + /** Core **/ + --body--background--light: var(--gray-05); + --body--color--light: var(--gray-80); + --body--background--dark: var(--gray-90); + --body--color--dark: var(--gray-10); + --body--background: var(--body--background--light); + --body--color: var(--body--color--light); + + /** Grid **/ + + /** Gutter **/ + --gutter: var(--space-md); + /* --gutter-xs: var(--space-xs); */ + /* --gutter-sm: var(--space-sm); */ + /* --gutter-md: var(--space-md); */ + /* --gutter-lg: var(--space-lg); */ + /* --gutter-xl: var(--space-xl); */ + /* --gutter-xxl: var(); */ + + /** Images **/ + + /** Print **/ + + /** Ratios **/ + --scale-ratio: var(--scale-ratio--major-third); + --scale-ratio-secondary: var(--scale-ratio--augmented-fourth); + + /** Sizes **/ + + /** Spacing **/ + + /** Typography **/ + --font-family-primary--base: var(--fontFamily); + --font-size--xs: var(--text-xs); + --font-size--sm: var(--text-sm); + --font-size--md: var(--text-md); + --font-size--lg: var(--text-lg); + --font-size--xl: var(--text-xl); + + /** Z-Index **/ +} \ No newline at end of file diff --git a/packages/design-system/vue/src/assets/style.css b/packages/design-system/vue/src/assets/style.css index d4e3bfc..5ad0f6f 100644 --- a/packages/design-system/vue/src/assets/style.css +++ b/packages/design-system/vue/src/assets/style.css @@ -1,8 +1,9 @@ +@import url('@eternagame/design-system-tokens/tokens.css'); +@import url('@inkline/inkline/inkline.css'); +@import url('./inklineOverrides.css'); + body { - font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - text-align: center; - color: #2c3e50; - margin-top: 60px; + margin: 0; } diff --git a/packages/frontend/web/src/assets/style.css b/packages/frontend/web/src/assets/style.css index d4e3bfc..dd4c5fe 100644 --- a/packages/frontend/web/src/assets/style.css +++ b/packages/frontend/web/src/assets/style.css @@ -1,8 +1 @@ -body { - font-family: Avenir, Helvetica, Arial, sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-align: center; - color: #2c3e50; - margin-top: 60px; -} +@import url('@eternagame/design-system-vue/style.css'); From 5d610604bddb3383e1691cade3a4b9079d1e51d3 Mon Sep 17 00:00:00 2001 From: Thomas Karagianes Date: Wed, 25 Jan 2023 12:39:52 -0800 Subject: [PATCH 2/9] Update package-lock.json --- package-lock.json | 62 +++++++++++++++++++++++++++++++++++------------ 1 file changed, 47 insertions(+), 15 deletions(-) diff --git a/package-lock.json b/package-lock.json index bc87286..cd511fb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1563,6 +1563,21 @@ "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==", "dev": true }, + "node_modules/@inkline/inkline": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/@inkline/inkline/-/inkline-3.2.0.tgz", + "integrity": "sha512-h14lFCtcD0A80LtpAA+NF27CCC+wfmdxK9Q/No05Cqx6a4tnQFAVjYVtH6OktC/ZEAAn1gjjl7S0RQdXJz03YQ==", + "dependencies": { + "@popperjs/core": "2.11.6" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/alexgrozav" + }, + "peerDependencies": { + "vue": ">=3.0.0" + } + }, "node_modules/@jridgewell/gen-mapping": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz", @@ -2114,6 +2129,15 @@ "typescript": "^3 || ^4" } }, + "node_modules/@popperjs/core": { + "version": "2.11.6", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz", + "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@rollup/pluginutils": { "version": "4.2.1", "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz", @@ -2928,7 +2952,6 @@ "version": "3.1.3", "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", - "dev": true, "dependencies": { "normalize-path": "^3.0.0", "picomatch": "^2.0.4" @@ -3205,7 +3228,6 @@ "version": "2.2.0", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", - "dev": true, "engines": { "node": ">=8" } @@ -3317,7 +3339,6 @@ "version": "3.0.2", "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", - "dev": true, "dependencies": { "fill-range": "^7.0.1" }, @@ -3523,7 +3544,6 @@ "version": "3.5.3", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", - "dev": true, "funding": [ { "type": "individual", @@ -5894,7 +5914,6 @@ "version": "7.0.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", - "dev": true, "dependencies": { "to-regex-range": "^5.0.1" }, @@ -6124,7 +6143,6 @@ "version": "2.3.2", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", - "dev": true, "hasInstallScript": true, "optional": true, "os": [ @@ -6285,7 +6303,6 @@ "version": "5.1.2", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", - "dev": true, "dependencies": { "is-glob": "^4.0.1" }, @@ -6562,6 +6579,11 @@ "node": ">= 4" } }, + "node_modules/immutable": { + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.2.2.tgz", + "integrity": "sha512-fTMKDwtbvO5tldky9QZ2fMX7slR0mYpY5nbnFWYp0fOzDhHqhgIw9KoYgxLWsoNTS9ZHGauHj18DTyEw6BK3Og==" + }, "node_modules/import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -6672,7 +6694,6 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", - "dev": true, "dependencies": { "binary-extensions": "^2.0.0" }, @@ -6766,7 +6787,6 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -6787,7 +6807,6 @@ "version": "4.0.3", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", - "dev": true, "dependencies": { "is-extglob": "^2.1.1" }, @@ -6827,7 +6846,6 @@ "version": "7.0.0", "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", - "dev": true, "engines": { "node": ">=0.12.0" } @@ -8269,7 +8287,6 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -8836,7 +8853,6 @@ "version": "2.3.1", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", - "dev": true, "engines": { "node": ">=8.6" }, @@ -9688,7 +9704,6 @@ "version": "3.6.0", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", - "dev": true, "dependencies": { "picomatch": "^2.2.1" }, @@ -9939,6 +9954,22 @@ "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" }, + "node_modules/sass": { + "version": "1.57.1", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.57.1.tgz", + "integrity": "sha512-O2+LwLS79op7GI0xZ8fqzF7X2m/m8WFfI02dHOdsK5R2ECeS5F62zrwg/relM1rjSLy7Vd/DiMNIvPrQGsA0jw==", + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=12.0.0" + } + }, "node_modules/semver": { "version": "6.3.0", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", @@ -10467,7 +10498,6 @@ "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", - "dev": true, "dependencies": { "is-number": "^7.0.0" }, @@ -11327,6 +11357,8 @@ "version": "1.0.0-dev", "license": "SEE LICENSE IN LICENSE", "dependencies": { + "@inkline/inkline": "^3.2.0", + "sass": "^1.57.1", "vue": "^3.2.45" } }, From 87cc2f09e0ff09d651e2543e55db4c7eb6910618 Mon Sep 17 00:00:00 2001 From: Thomas Karagianes Date: Thu, 26 Jan 2023 08:32:33 -0800 Subject: [PATCH 3/9] Add design-system-tokens dependency to design-system-vue --- package-lock.json | 1 + packages/design-system/vue/package.json | 1 + 2 files changed, 2 insertions(+) diff --git a/package-lock.json b/package-lock.json index cd511fb..f57b118 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11357,6 +11357,7 @@ "version": "1.0.0-dev", "license": "SEE LICENSE IN LICENSE", "dependencies": { + "@eternagame/design-system-tokens": "^1.0.0-dev", "@inkline/inkline": "^3.2.0", "sass": "^1.57.1", "vue": "^3.2.45" diff --git a/packages/design-system/vue/package.json b/packages/design-system/vue/package.json index b3ab0e1..029c791 100644 --- a/packages/design-system/vue/package.json +++ b/packages/design-system/vue/package.json @@ -22,6 +22,7 @@ "./style.css": "./src/assets/style.css" }, "dependencies": { + "@eternagame/design-system-tokens": "^1.0.0-dev", "@inkline/inkline": "^3.2.0", "sass": "^1.57.1", "vue": "^3.2.45" From bf45070e6f96b8b97c4e1362df757fb0e067f7f3 Mon Sep 17 00:00:00 2001 From: Thomas Karagianes Date: Thu, 26 Jan 2023 08:33:45 -0800 Subject: [PATCH 4/9] Update Inkline overrides --- .../vue/src/assets/inklineOverrides.css | 138 +++++++++++++++++- 1 file changed, 137 insertions(+), 1 deletion(-) diff --git a/packages/design-system/vue/src/assets/inklineOverrides.css b/packages/design-system/vue/src/assets/inklineOverrides.css index 558ad5f..365d33d 100644 --- a/packages/design-system/vue/src/assets/inklineOverrides.css +++ b/packages/design-system/vue/src/assets/inklineOverrides.css @@ -4,10 +4,38 @@ --transition-easing: ease; /** Border **/ + --border-style: solid; + --border-top-width: 1px; + --border-right-width: 1px; + --border-bottom-width: 1px; + --border-left-width: 1px; + --border-width: var(--border-top-width) var(--border-right-width) var(--border-bottom-width) var(--border-left-width); + --border-color-light: var(--gray-20); + --border-color-dark: var(--gray-70); + --border-color: var(--border-color--light); + --border-top-left-radius: var(--size-xs); + --border-top-right-radius: var(--size-xs); + --border-bottom-left-radius: var(--size-xs); + --border-bottom-right-radius: var(--size-xs); + --border-radius: var(--border-top-left-radius) var(--border-top-right-radius) var(--border-bottom-right-radius) var(--border-bottom-left-radius); /** Box Shadow **/ + --box-shadow-offset-x: 0; + --box-shadow-offset-y: 0.5rem; + --box-shadow-blur-radius: 1rem; + --box-shadow-spread-radius: -0.75rem; + --box-shadow-color: var(--shade-20), rgba(0, 0, 0, 0.15); + --box-shadow: var(--box-shadow-offset-x) var(--box-shadow-offset-y) var(--box-shadow-blur-radius) var(--box-shadow-spread-radius) var(--box-shadow-color); /** Breakpoints **/ + /* Inkline uses Sass mixins + Sass variables for their media queries + We use CSS variables alone + */ + --breakpoints-xs: 0; + --breakpoints-sm: 600px; + --breakpoints-md: 900px; + --breakpoints-lg: 1200px; + --breakpoints-xl: 1800px; /** Colors **/ --color--primary: var(--blue-40); @@ -29,6 +57,8 @@ --color--gray: var(--gray-60); --color--light: var(--gray-10); --color--dark: var(--gray-90); + --contrast-color-for-light-background: var(--gray-90); + --contrast-color-for-dark-background: var(--neutrals-white); /** Core **/ --body--background--light: var(--gray-05); @@ -39,6 +69,9 @@ --body--color: var(--body--color--light); /** Grid **/ + /* Inkline uses a Sass mixin defined grid system + We use Flexbox and CSS Grid + */ /** Gutter **/ --gutter: var(--space-md); @@ -50,24 +83,127 @@ /* --gutter-xxl: var(); */ /** Images **/ - + --thumbnail--padding: calc(var(--spacing) / 2); + --thumbnail--background: var(--gray-30); + --thumbnail--border-width: var(--border-width); + --thumbnail--border-color: var(--gray-40); + --thumbnail--border-radius: var(--border-radius); + --thumbnail--box-shadow: 0 1px 2px rgba(var(--color--black), 0.075); + --thumbnail--transition: all 0.2s ease-in-out; + --polaroid--padding: calc(var(--spacing) * 3); + --figure--caption--font-size: 90%; + --figure--caption--font-color: var(--gray-60); + --figure--image--font-size: calc(var(--spacing) / 2); + /** Print **/ + /* Inkline uses a Sass mixin to define print-specific styles */ /** Ratios **/ --scale-ratio: var(--scale-ratio--major-third); --scale-ratio-secondary: var(--scale-ratio--augmented-fourth); /** Sizes **/ + --size-percentage--0: 0%; + --size-percentage--25: 25%; + --size-percentage--50: 50%; + --size-percentage--75: 75%; + --size-percentage--100: 100%; + --size-multiplier: 1; + --size-multiplier--xs: var(--size-xs); + --size-multiplier--sm: var(--size-sm); + --size-multiplier--md: var(--size-md); + --size-multiplier--lg: var(--size-lg); + --size-multiplier--xl: var(--size-xl); /** Spacing **/ + --spacing: 1rem; + --margin: var(--inset-md); + --padding: var(--inset-md); /** Typography **/ --font-family-primary--base: var(--fontFamily); + --font-family-primary--monospace: 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; + --font-family-primary--print: 'Georgia', 'Times New Roman', 'Times', serif; + --font-family-secondary--base: var(--font-family-primary--base); + --font-family-secondary--monospace: var(--font-family-primary--monospace); + --font-family-secondary--print: var(--font-family-primary--print); + --letter-spacing: 0; + --font-size: var(--fontSizeBase); --font-size--xs: var(--text-xs); --font-size--sm: var(--text-sm); --font-size--md: var(--text-md); --font-size--lg: var(--text-lg); --font-size--xl: var(--text-xl); + --line-height: 1.5; + --text-muted: var(--gray-60); + --font-weight--extralight: 200; + --font-weight--light: 300; + --font-weight--normal: normal; + --font-weight--semibold: 600; + --font-weight--bold: bold; + --font-weight--black: 900; + --font-weight--lighter: lighter; + --font-weight--bolder: bolder; + --h1--font-size: var(--text-xxl); + --h2--font-size: var(--text-xl); + --h3--font-size: var(--text-lg); + --h4--font-size: var(--text-md); + --h5--font-size: var(--text-sm); + --h6--font-size: var(--text-xs); + --heading--margin-top: calc(var(--spacing) * 2.5); + --heading--margin-bottom: var(-spacing); + --heading--font-family: var(--font-family-secondary--base); + --heading--font-weight: var(--font-weight--semibold); + --heading--line-height: 1.1; + --heading--color: inherit; + --display--font-weight: var(--font-weight--semibold); + --display--line-height: 1.1; + --link--color: var(); + --link--color--hover: var(); + --link--decoration: none; + --link--decoration--hover: underline; + --lead--font-size: var(--text-lg); + --lead--font-weight: var(--font-weight--light); + --list--item--padding--inline: var(--inline-md); + --list--item--margin-bottom: var(--stack-md); + --dt--font-weight: var(--font-weight--bold); + --small--font-size: var(--text-sm); + --small--font-weight: var(--font-weight--normal); + --blockquote--footer--color: var(--gray-60); + --blockquote--font-size: var(--text-lg); + --blockquote--border: var(--border-width) var(--border-style) var(--border-color); + --blockquote--margin: var(--inset-md); + --blockquote--padding--bordered: var(--inset-md); + --hr--border-color: var(--shade-10), rgba(0,0,0,0.1); + --hr--border-width: var(--border-top-width); + --hr--border-style: var(--border-style); + --hr--margin: var(--stack-md); + --mark--padding: var(--stretch-xs); + --mark--color: var(--gray-90); + --mark--background-color: var(--yellow-10); + --code--font-size: var(--text-md); + --code--padding: var(--stretch-sm); + --code--color: var(--gray-80); + --code--background: var(--gray-10); + --code--color--dark: var(--gray-10); + --code--background--dark: var(--gray-80); + --kbd--font-size: var(--text-md); + --kbd--box-shadow: inset 0 -0.1rem 0 rgba(0, 0, 0, 0.25); + --kbd--nested-font-weight: var(--font-weight--bold); + --kbd--padding: var(--code--padding); + --kbd--color: var(--neutrals-black); + --kbd--background: var(--gray-05); + --pre--font-size: var(--text-md); + --pre--color: var(--gray-90); + --pre--background: var(--neutrals-white); + --pre--scrollable-max-height: 340px; /** Z-Index **/ + --z-index--dropdown: 1000; + --z-index--sticky: 1020; + --z-index--fixed: 1030; + --z-index--modal-backdrop: 1040; + --z-index--modal: 1050; + --z-index--popover: 1060; + --z-index--tooltip: 1070; } \ No newline at end of file From 3c148f2a8c6f601ad48f62a9dc1d9cf7f8f09ac7 Mon Sep 17 00:00:00 2001 From: Thomas Karagianes Date: Mon, 13 Feb 2023 13:01:26 -0800 Subject: [PATCH 5/9] Update build:watch script to transform on initial run Build:watch on the token-transformer now runs the tranform script on initial call, and then watches tokens.json and retriggers the transform script on changes. --- packages/design-system/tokens/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/design-system/tokens/package.json b/packages/design-system/tokens/package.json index cea4ccd..b242aa0 100644 --- a/packages/design-system/tokens/package.json +++ b/packages/design-system/tokens/package.json @@ -6,7 +6,7 @@ "license": "SEE LICENSE IN LICENSE", "scripts": { "build": "node ../token-transformer tokens.json ./dist/tokens.css", - "build:watch": "chokidar \"tokens.json\" -c \"nx run build\"" + "build:watch": "chokidar \"tokens.json\" -c \"npm run build\" --initial" }, "nx": { "implicitDependencies": [ From c5ef68e565fe9c72bbdaa324425351d6441ea7d3 Mon Sep 17 00:00:00 2001 From: Thomas Karagianes Date: Sat, 18 Feb 2023 13:15:26 -0800 Subject: [PATCH 6/9] Update token transformer to accomodate multi-property tokens Token transformer now splits multi-property values into separate css variables. This commit also removes the font-family hack now that Figma supports comma separated values. --- .../token-transformer/src/lib.ts | 24 ++++++++++--------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/packages/design-system/token-transformer/src/lib.ts b/packages/design-system/token-transformer/src/lib.ts index 342df59..07cac52 100644 --- a/packages/design-system/token-transformer/src/lib.ts +++ b/packages/design-system/token-transformer/src/lib.ts @@ -22,8 +22,19 @@ function parseTokensFromJSON(object: Record, parent = '', tokens: R if (object[key].value) { const tokenName = (parent !== '') ? `--${parent}-${key}` : `--${key}`; const tokenValue = object[key].value; - // eslint-disable-next-line no-param-reassign - tokens[tokenName] = tokenValue; + + // If the value is an object (like type or shadow), the token + // applies multiple properties and needs to be split up into + // separate rules for CSS. + if (typeof tokenValue === 'object') { + for (const property of Object.keys(tokenValue)) { + // eslint-disable-next-line no-param-reassign + tokens[`${tokenName}-${property}`] = tokenValue[key]; + } + } else { + // eslint-disable-next-line no-param-reassign + tokens[tokenName] = tokenValue; + } } else { // If the object doesn't have a value property, it's a token group, // so parse that object for token definitions @@ -81,15 +92,6 @@ export default function convertFile(inputPath: path.ParsedPath, outputPath: path cssFormattedOutput += `:root${theme ? `.${theme}` : ''} {\n`; Object.keys(tokens).forEach((tokenName) => { - // Hack to handle CSS font-family with fallback - // console.log(tokens[tokenName]) - // FIXME: determine if Tokens Studio supports custom fields to avoid description parsing - if (tokenName === '--fontFamily') { - const cssRule = tokenSet.tokens['fontFamily'].description.split('font-family: ')[1]; - // eslint-disable-next-line @typescript-eslint/restrict-template-expressions - cssFormattedOutput += convertTokenToCSSVariable(`\t${tokenName}: ${cssRule};\n`); - return; - } // eslint-disable-next-line @typescript-eslint/restrict-template-expressions cssFormattedOutput += convertTokenToCSSVariable(`\t${tokenName}: ${tokens[tokenName]};\n`); }); From 97c2483257f6c728d11c9f14a65a2e13ecf0e602 Mon Sep 17 00:00:00 2001 From: Thomas Karagianes Date: Sat, 18 Feb 2023 15:10:28 -0800 Subject: [PATCH 7/9] Update tokens with color themes: default, dark, light --- packages/design-system/tokens/tokens.json | 894 +++++++++++++++++++++- 1 file changed, 854 insertions(+), 40 deletions(-) diff --git a/packages/design-system/tokens/tokens.json b/packages/design-system/tokens/tokens.json index c15c71d..4a9b1af 100644 --- a/packages/design-system/tokens/tokens.json +++ b/packages/design-system/tokens/tokens.json @@ -480,6 +480,42 @@ "description": "#31121E" } }, + "tint": { + "20": { + "value": "rgba(255,255,255,0.20)", + "type": "color" + }, + "40": { + "value": "rgba(255,255,255,0.40)", + "type": "color" + }, + "60": { + "value": "rgba(255,255,255,0.60)", + "type": "color" + }, + "80": { + "value": "rgba(255,255,255,0.80)", + "type": "color" + } + }, + "shade": { + "20": { + "value": "rgba(0,0,0,0.20)", + "type": "color" + }, + "40": { + "value": "rgba(0,0,0,0.40)", + "type": "color" + }, + "60": { + "value": "rgba(0,0,0,0.60)", + "type": "color" + }, + "80": { + "value": "rgba(0,0,0,0.80)", + "type": "color" + } + }, "space": { "xxs": { "value": "2px", @@ -663,61 +699,632 @@ "type": "fontSizes" }, "fontFamily": { - "value": "Open Sans", - "type": "fontFamilies", - "description": "Open Sans, with fallbacks to system fonts and sans-serif. CSS = font-family: \"Open Sans\",-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif;" + "primary": { + "value": "\"Open Sans\",\"-apple-system\",\"BlinkMacSystemFont\",\"Segoe UI\",\"Roboto\",\"Oxygen-Sans\",\"Ubuntu\",\"Cantarell\",\"Helvetica Neue\",sans-serif;", + "type": "fontFamilies", + "description": "Open Sans, with fallbacks to system fonts and sans-serif. CSS = font-family: \"Open Sans\",-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif;" + }, + "monospace": { + "value": "monospace", + "type": "fontFamilies" + } }, - "text-xxs": { - "value": "{text-xs} / {fontScale}", - "type": "fontSizes" + "text": { + "xxs": { + "value": "{text.xs} / {fontScale}", + "type": "fontSizes" + }, + "xs": { + "value": "{text.sm} / {fontScale}", + "type": "fontSizes" + }, + "sm": { + "value": "{text.md} / {fontScale}", + "type": "fontSizes" + }, + "md": { + "value": "{fontSizeBase} * 1", + "type": "fontSizes" + }, + "lg": { + "value": "{text.md} * {fontScale}", + "type": "fontSizes" + }, + "xl": { + "value": "{text.lg} * {fontScale}", + "type": "fontSizes" + }, + "2xl": { + "value": "{text.xl} * {fontScale}", + "type": "fontSizes" + }, + "3xl": { + "value": "{text.2xl} * {fontScale}", + "type": "fontSizes" + }, + "4xl": { + "value": "{text.3xl} * {fontScale}", + "type": "fontSizes" + } }, - "text-xs": { - "value": "{text-sm} / {fontScale}", - "type": "fontSizes" + "fontWeight": { + "extralight": { + "value": "200", + "type": "fontWeights" + }, + "light": { + "value": "300", + "type": "fontWeights" + }, + "default": { + "value": "400", + "type": "fontWeights" + }, + "semibold": { + "value": "600", + "type": "fontWeights" + }, + "bold": { + "value": "700", + "type": "fontWeights" + }, + "black": { + "value": "800", + "type": "fontWeights" + } }, - "text-sm": { - "value": "{text-md} / {fontScale}", - "type": "fontSizes" + "lineHeight": { + "default": { + "value": "1.5", + "type": "lineHeights" + }, + "display": { + "value": "1.2", + "type": "lineHeights" + } }, - "text-md": { - "value": "{fontSizeBase} * 1", - "type": "fontSizes" + "type": { + "body": { + "value": { + "fontFamily": "{fontFamily.primary}", + "fontWeight": "{fontWeight.default}", + "lineHeight": "{lineHeight.default}" + }, + "type": "typography", + "description": "Type for default body text" + }, + "light": { + "value": { + "fontFamily": "{fontFamily.primary}", + "fontWeight": "{fontWeight.light}", + "lineHeight": "{lineHeight.default}" + }, + "type": "typography" + }, + "bold": { + "value": { + "fontFamily": "{fontFamily.primary}", + "fontWeight": "{fontWeight.bold}", + "lineHeight": "{lineHeight.default}" + }, + "type": "typography" + }, + "black": { + "value": { + "fontFamily": "{fontFamily.primary}", + "fontWeight": "{fontWeight.black}", + "lineHeight": "{lineHeight.default}" + }, + "type": "typography" + }, + "code": { + "value": { + "fontFamily": "{fontFamily.monospace}", + "fontWeight": "{fontWeight.default}", + "lineHeight": "{lineHeight.default}" + }, + "type": "typography" + } }, - "text-lg": { - "value": "{text-md} * {fontScale}", - "type": "fontSizes" + "border": { + "width": { + "value": "0.125rem", + "type": "borderWidth" + }, + "radius": { + "value": "0.25rem", + "type": "borderRadius" + }, + "default": { + "value": { + "color": "{gray.80}", + "width": "{border.width}", + "style": "solid" + }, + "type": "border" + } }, - "text-xl": { - "value": "{text-lg} * {fontScale}", - "type": "fontSizes" + "shadow": { + "default": { + "value": { + "x": "0", + "y": "2", + "blur": "4", + "spread": "0", + "color": "rgba(0,0,0,0.1)", + "type": "dropShadow" + }, + "type": "boxShadow" + }, + "elevated": { + "value": { + "x": "0", + "y": "12", + "blur": "24", + "spread": "-6", + "color": "rgba(0,0,0,0.25)", + "type": "dropShadow" + }, + "type": "boxShadow" + }, + "inner": { + "value": { + "x": "0", + "y": "0", + "blur": "2", + "spread": "1", + "color": "rgba(0,0,0,0.1)", + "type": "innerShadow" + }, + "type": "boxShadow" + } + } + }, + "default": { + "background": { + "value": "{blue.90}", + "type": "color", + "description": "Default page background" }, - "text-2xl": { - "value": "{text-xl} * {fontScale}", - "type": "fontSizes" + "layer-01": { + "value": "{blue.80}", + "type": "color", + "description": "Container color on $background" }, - "text-3xl": { - "value": "{text-2xl} * {fontScale}", - "type": "fontSizes" + "layer-02": { + "value": "{blue.70}", + "type": "color", + "description": "Container color on $layer-01" }, - "text-4xl": { - "value": "{text-3xl} * {fontScale}", - "type": "fontSizes" + "layer-03": { + "value": "{blue.60}", + "type": "color", + "description": "Container color on $layer-02" + }, + "focus": { + "value": "{blue.30}", + "type": "color", + "description": "Focus border; Focus underline" + }, + "overlay": { + "value": "{shade.20}", + "type": "color", + "description": "Background overlay" + }, + "highlight": { + "value": "{blue.10}", + "type": "color", + "description": "Highlight color" + }, + "text": { + "primaryColor": { + "value": "{neutrals.white}", + "type": "color", + "description": "Primary text; Body copy; Headers" + }, + "secondaryColor": { + "value": "{gray.05}", + "type": "color", + "description": "Secondary text; Input labels" + }, + "placeholder": { + "value": "{gray.40}", + "type": "color", + "description": "Placeholder text" + }, + "disabled": { + "value": "{tint.20}", + "type": "color", + "description": "Disabled text" + }, + "onColor": { + "value": "{neutrals.white}", + "type": "color", + "description": "Text on button colors" + }, + "error": { + "value": "{red.60}", + "type": "color", + "description": "Error message text" + } + }, + "border": { + "default": { + "value": { + "color": "{gray.20}", + "width": "{border.width}", + "style": "solid" + }, + "type": "border" + } + }, + "link": { + "primary": { + "value": "{yellow.20}", + "type": "color", + "description": "Primary link" + }, + "primary-hover": { + "value": "{yellow.10}", + "type": "color", + "description": "Hover color for $link-primary" + }, + "visited": { + "value": "{orange.40}", + "type": "color", + "description": "Color for visited links" + } + }, + "button": { + "primary": { + "value": "{blue.40}", + "type": "color", + "description": "Primary button color" + }, + "primary-hover": { + "value": "{blue.30}", + "type": "color", + "description": "Hover color for $primary-button" + }, + "primary-active": { + "value": "{blue.50}", + "type": "color", + "description": "Hover color for $primary-button" + }, + "secondary": { + "value": "{green.40}", + "type": "color", + "description": "Secondary button color" + }, + "secondary-hover": { + "value": "{green.30}", + "type": "color", + "description": "Hover color for $button-secondary" + }, + "secondary-active": { + "value": "{green.50}", + "type": "color", + "description": "Active color for $button-secondary" + }, + "danger": { + "value": "{red.70}", + "type": "color", + "description": "Primary danger button" + }, + "danger-hover": { + "value": "{red.60}", + "type": "color", + "description": "Hover color for $button-danger" + }, + "danger-active": { + "value": "{red.80}", + "type": "color", + "description": "Active color for $button-danger" + }, + "disabled": { + "value": "{gray.40}", + "type": "color", + "description": "Disabled button" + } + }, + "field": { + "01": { + "value": "{blue.80}", + "type": "color", + "description": "Default input fields; Fields on $background" + }, + "01-hover": { + "value": "{blue.80}", + "type": "color", + "description": "Hover color for $field-01" + }, + "02": { + "value": "{blue.70}", + "type": "color", + "description": "Secondary input fields; Fields on $layer-01" + }, + "02-hover": { + "value": "{blue.70}", + "type": "color", + "description": "Hover color for $field-02 " + }, + "03": { + "value": "{blue.60}", + "type": "color", + "description": "Tertiary input fields; Fields on $layer-02" + }, + "03-hover": { + "value": "{blue.60}", + "type": "color", + "description": "Hover color for $field-03" + } + }, + "support": { + "error": { + "value": "{red.60}", + "type": "color", + "description": "Error; Invalid state" + }, + "info": { + "value": "{aqua.40}", + "type": "color", + "description": "Informational" + }, + "success": { + "value": "{green.50}", + "type": "color", + "description": "Success" + }, + "warning": { + "value": "{yellow.30}", + "type": "color", + "description": "Warning; Caution" + } + }, + "base": { + "A": { + "value": "#FAC244", + "type": "color", + "description": "Default color for Adenine" + }, + "C": { + "value": "#48BB48", + "type": "color", + "description": "Default color for Cytosine" + }, + "G": { + "value": "#D53732", + "type": "color", + "description": "Default color for Guanine" + }, + "U": { + "value": "#3397DB", + "type": "color", + "description": "Default color for Uracil" + } } }, "dark": { "background": { - "value": "{blue.90}", + "value": "{gray.90}", "type": "color", "description": "Default page background" }, - "layer-1": { - "value": "{blue.70}", - "type": "color" + "layer-01": { + "value": "{gray.80}", + "type": "color", + "description": "Container color on $background" + }, + "layer-02": { + "value": "{gray.70}", + "type": "color", + "description": "Container color on $layer-01" + }, + "layer-03": { + "value": "{gray.60}", + "type": "color", + "description": "Container color on $layer-02" + }, + "focus": { + "value": "{blue.30}", + "type": "color", + "description": "Focus border; Focus underline" + }, + "overlay": { + "value": "{shade.20}", + "type": "color", + "description": "Background overlay" + }, + "highlight": { + "value": "{blue.10}", + "type": "color", + "description": "Highlight color" }, "text": { - "default": { + "primaryColor": { "value": "{neutrals.white}", - "type": "color" + "type": "color", + "description": "Primary text; Body copy; Headers" + }, + "secondaryColor": { + "value": "{gray.05}", + "type": "color", + "description": "Secondary text; Input labels" + }, + "placeholder": { + "value": "{gray.40}", + "type": "color", + "description": "Placeholder text" + }, + "disabled": { + "value": "{tint.20}", + "type": "color", + "description": "Disabled text" + }, + "onColor": { + "value": "{neutrals.white}", + "type": "color", + "description": "Text on button colors" + }, + "error": { + "value": "{red.60}", + "type": "color", + "description": "Error message text" + } + }, + "border": { + "default": { + "value": { + "color": "{gray.20}", + "width": "{border.width}", + "style": "solid" + }, + "type": "border" + } + }, + "link": { + "primary": { + "value": "{yellow.20}", + "type": "color", + "description": "Primary link" + }, + "primary-hover": { + "value": "{yellow.10}", + "type": "color", + "description": "Hover color for $link-primary" + }, + "visited": { + "value": "{orange.40}", + "type": "color", + "description": "Color for visited links" + } + }, + "button": { + "primary": { + "value": "{blue.40}", + "type": "color", + "description": "Primary button color" + }, + "primary-hover": { + "value": "{blue.30}", + "type": "color", + "description": "Hover color for $primary-button" + }, + "primary-active": { + "value": "{blue.50}", + "type": "color", + "description": "Hover color for $primary-button" + }, + "secondary": { + "value": "{green.40}", + "type": "color", + "description": "Secondary button color" + }, + "secondary-hover": { + "value": "{green.30}", + "type": "color", + "description": "Hover color for $button-secondary" + }, + "secondary-active": { + "value": "{green.50}", + "type": "color", + "description": "Active color for $button-secondary" + }, + "danger": { + "value": "{red.70}", + "type": "color", + "description": "Primary danger button" + }, + "danger-hover": { + "value": "{red.60}", + "type": "color", + "description": "Hover color for $button-danger" + }, + "danger-active": { + "value": "{red.80}", + "type": "color", + "description": "Active color for $button-danger" + }, + "disabled": { + "value": "{gray.40}", + "type": "color", + "description": "Disabled button" + } + }, + "field": { + "01": { + "value": "{blue.80}", + "type": "color", + "description": "Default input fields; Fields on $background" + }, + "01-hover": { + "value": "{blue.80}", + "type": "color", + "description": "Hover color for $field-01" + }, + "02": { + "value": "{blue.70}", + "type": "color", + "description": "Secondary input fields; Fields on $layer-01" + }, + "02-hover": { + "value": "{blue.70}", + "type": "color", + "description": "Hover color for $field-02 " + }, + "03": { + "value": "{blue.60}", + "type": "color", + "description": "Tertiary input fields; Fields on $layer-02" + }, + "03-hover": { + "value": "{blue.60}", + "type": "color", + "description": "Hover color for $field-03" + } + }, + "support": { + "error": { + "value": "{red.60}", + "type": "color", + "description": "Error; Invalid state" + }, + "info": { + "value": "{aqua.40}", + "type": "color", + "description": "Informational" + }, + "success": { + "value": "{green.50}", + "type": "color", + "description": "Success" + }, + "warning": { + "value": "{yellow.30}", + "type": "color", + "description": "Warning; Caution" + } + }, + "base": { + "A": { + "value": "#FAC244", + "type": "color", + "description": "Default color for Adenine" + }, + "C": { + "value": "#48BB48", + "type": "color", + "description": "Default color for Cytosine" + }, + "G": { + "value": "#D53732", + "type": "color", + "description": "Default color for Guanine" + }, + "U": { + "value": "#3397DB", + "type": "color", + "description": "Default color for Uracil" } } }, @@ -727,14 +1334,221 @@ "type": "color", "description": "Default page background" }, - "layer-1": { + "layer-01": { + "value": "{neutrals.white}", + "type": "color", + "description": "Container color on $background" + }, + "layer-02": { + "value": "{gray.05}", + "type": "color", + "description": "Container color on $layer-01" + }, + "layer-03": { "value": "{neutrals.white}", - "type": "color" + "type": "color", + "description": "Container color on $layer-02" + }, + "focus": { + "value": "{blue.50}", + "type": "color", + "description": "Focus border; Focus underline" + }, + "overlay": { + "value": "{shade.20}", + "type": "color", + "description": "Background overlay" + }, + "highlight": { + "value": "{blue.10}", + "type": "color", + "description": "Highlight color" }, "text": { - "default": { + "primaryColor": { "value": "{neutrals.black}", - "type": "color" + "type": "color", + "description": "Primary text; Body copy; Headers" + }, + "secondaryColor": { + "value": "{gray.80}", + "type": "color", + "description": "Secondary text; Input labels" + }, + "placeholder": { + "value": "{gray.40}", + "type": "color", + "description": "Placeholder text" + }, + "disabled": { + "value": "{shade.20}", + "type": "color", + "description": "Disabled text" + }, + "onColor": { + "value": "{neutrals.white}", + "type": "color", + "description": "Text on button colors" + }, + "error": { + "value": "{red.60}", + "type": "color", + "description": "Error message text" + } + }, + "border": { + "default": { + "value": { + "color": "{gray.20}", + "width": "{border.width}", + "style": "solid" + }, + "type": "border" + } + }, + "link": { + "primary": { + "value": "{blue.60}", + "type": "color", + "description": "Primary link" + }, + "primary-hover": { + "value": "{blue.70}", + "type": "color", + "description": "Hover color for $link-primary" + }, + "visited": { + "value": "{purple.60}", + "type": "color", + "description": "Color for visited links" + } + }, + "button": { + "primary": { + "value": "{blue.70}", + "type": "color", + "description": "Primary button color" + }, + "primary-hover": { + "value": "{blue.60}", + "type": "color", + "description": "Hover color for $primary-button" + }, + "primary-active": { + "value": "{blue.80}", + "type": "color", + "description": "Hover color for $primary-button" + }, + "secondary": { + "value": "{gray.70}", + "type": "color", + "description": "Secondary button color" + }, + "secondary-hover": { + "value": "{gray.60}", + "type": "color", + "description": "Hover color for $button-secondary" + }, + "secondary-active": { + "value": "{gray.80}", + "type": "color", + "description": "Active color for $button-secondary" + }, + "danger": { + "value": "{red.50}", + "type": "color", + "description": "Primary danger button" + }, + "danger-hover": { + "value": "{red.40}", + "type": "color", + "description": "Hover color for $button-danger" + }, + "danger-active": { + "value": "{red.60}", + "type": "color", + "description": "Active color for $button-danger" + }, + "disabled": { + "value": "{gray.40}", + "type": "color", + "description": "Disabled button" + } + }, + "field": { + "01": { + "value": "{neutrals.white}", + "type": "color", + "description": "Default input fields; Fields on $background" + }, + "01-hover": { + "value": "{gray.05}", + "type": "color", + "description": "Hover color for $field-01" + }, + "02": { + "value": "{gray.05}", + "type": "color", + "description": "Secondary input fields; Fields on $layer-01" + }, + "02-hover": { + "value": "{gray.10}", + "type": "color", + "description": "Hover color for $field-02 " + }, + "03": { + "value": "{neutrals.white}", + "type": "color", + "description": "Tertiary input fields; Fields on $layer-02" + }, + "03-hover": { + "value": "{gray.05}", + "type": "color", + "description": "Hover color for $field-03" + } + }, + "support": { + "error": { + "value": "{red.40}", + "type": "color", + "description": "Error; Invalid state" + }, + "info": { + "value": "{aqua.30}", + "type": "color", + "description": "Informational" + }, + "success": { + "value": "{green.40}", + "type": "color", + "description": "Success" + }, + "warning": { + "value": "{yellow.20}", + "type": "color", + "description": "Warning; Caution" + } + }, + "base": { + "A": { + "value": "#FAC244", + "type": "color", + "description": "Default color for Adenine" + }, + "C": { + "value": "#48BB48", + "type": "color", + "description": "Default color for Cytosine" + }, + "G": { + "value": "#D53732", + "type": "color", + "description": "Default color for Guanine" + }, + "U": { + "value": "#3397DB", + "type": "color", + "description": "Default color for Uracil" } } }, From c898b823d97885a72bf074652842c1cf65298057 Mon Sep 17 00:00:00 2001 From: Thomas Karagianes Date: Sat, 18 Feb 2023 15:21:29 -0800 Subject: [PATCH 8/9] Fix token transformer multi-property conversion Our TS rules don't allow variable shadowing. In correcting the issue, I missed one `key` that should be `property`. --- packages/design-system/token-transformer/src/lib.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/design-system/token-transformer/src/lib.ts b/packages/design-system/token-transformer/src/lib.ts index 07cac52..038980f 100644 --- a/packages/design-system/token-transformer/src/lib.ts +++ b/packages/design-system/token-transformer/src/lib.ts @@ -29,7 +29,7 @@ function parseTokensFromJSON(object: Record, parent = '', tokens: R if (typeof tokenValue === 'object') { for (const property of Object.keys(tokenValue)) { // eslint-disable-next-line no-param-reassign - tokens[`${tokenName}-${property}`] = tokenValue[key]; + tokens[`${tokenName}-${property}`] = tokenValue[property]; } } else { // eslint-disable-next-line no-param-reassign From d774b4126e17957cf067f14a4b88e7fe4fee5b3f Mon Sep 17 00:00:00 2001 From: Thomas Karagianes Date: Sun, 19 Feb 2023 09:45:29 -0800 Subject: [PATCH 9/9] Update inkline overrides --- .../vue/src/assets/inklineOverrides.css | 54 ++++++++----------- .../design-system/vue/src/assets/style.css | 2 +- 2 files changed, 24 insertions(+), 32 deletions(-) diff --git a/packages/design-system/vue/src/assets/inklineOverrides.css b/packages/design-system/vue/src/assets/inklineOverrides.css index 365d33d..ba74cc8 100644 --- a/packages/design-system/vue/src/assets/inklineOverrides.css +++ b/packages/design-system/vue/src/assets/inklineOverrides.css @@ -4,27 +4,19 @@ --transition-easing: ease; /** Border **/ + /* --border-radius and --border-width are overwritten by our tokens + */ --border-style: solid; - --border-top-width: 1px; - --border-right-width: 1px; - --border-bottom-width: 1px; - --border-left-width: 1px; - --border-width: var(--border-top-width) var(--border-right-width) var(--border-bottom-width) var(--border-left-width); --border-color-light: var(--gray-20); --border-color-dark: var(--gray-70); --border-color: var(--border-color--light); - --border-top-left-radius: var(--size-xs); - --border-top-right-radius: var(--size-xs); - --border-bottom-left-radius: var(--size-xs); - --border-bottom-right-radius: var(--size-xs); - --border-radius: var(--border-top-left-radius) var(--border-top-right-radius) var(--border-bottom-right-radius) var(--border-bottom-left-radius); /** Box Shadow **/ - --box-shadow-offset-x: 0; - --box-shadow-offset-y: 0.5rem; - --box-shadow-blur-radius: 1rem; - --box-shadow-spread-radius: -0.75rem; - --box-shadow-color: var(--shade-20), rgba(0, 0, 0, 0.15); + --box-shadow-offset-x: var(--shadow-default-x); + --box-shadow-offset-y: var(--shadow-default-y); + --box-shadow-blur-radius: var(--shadow-default-blur); + --box-shadow-spread-radius: var(--shadow-default-spread); + --box-shadow-color: var(--shadow-default-color); --box-shadow: var(--box-shadow-offset-x) var(--box-shadow-offset-y) var(--box-shadow-blur-radius) var(--box-shadow-spread-radius) var(--box-shadow-color); /** Breakpoints **/ @@ -88,8 +80,8 @@ --thumbnail--border-width: var(--border-width); --thumbnail--border-color: var(--gray-40); --thumbnail--border-radius: var(--border-radius); - --thumbnail--box-shadow: 0 1px 2px rgba(var(--color--black), 0.075); - --thumbnail--transition: all 0.2s ease-in-out; + --thumbnail--box-shadow: var(--box-shadow); + --thumbnail--transition: all 0.3s ease-in-out; --polaroid--padding: calc(var(--spacing) * 3); --figure--caption--font-size: 90%; --figure--caption--font-color: var(--gray-60); @@ -116,7 +108,7 @@ --size-multiplier--xl: var(--size-xl); /** Spacing **/ - --spacing: 1rem; + --spacing: var(--space-md); --margin: var(--inset-md); --padding: var(--inset-md); @@ -134,14 +126,14 @@ --font-size--md: var(--text-md); --font-size--lg: var(--text-lg); --font-size--xl: var(--text-xl); - --line-height: 1.5; + --line-height: var(--lineHeight-default); --text-muted: var(--gray-60); - --font-weight--extralight: 200; - --font-weight--light: 300; - --font-weight--normal: normal; + --font-weight--extralight: var(--fontWeight-extralight); + --font-weight--light: var(--fontWeight-light); + --font-weight--normal: var(--fontWeight-default); --font-weight--semibold: 600; - --font-weight--bold: bold; - --font-weight--black: 900; + --font-weight--bold: var(--fontWeight-bold); + --font-weight--black: var(--fontWeight-black); --font-weight--lighter: lighter; --font-weight--bolder: bolder; --h1--font-size: var(--text-xxl); @@ -154,12 +146,12 @@ --heading--margin-bottom: var(-spacing); --heading--font-family: var(--font-family-secondary--base); --heading--font-weight: var(--font-weight--semibold); - --heading--line-height: 1.1; + --heading--line-height: var(--lineHeight-display); --heading--color: inherit; --display--font-weight: var(--font-weight--semibold); - --display--line-height: 1.1; - --link--color: var(); - --link--color--hover: var(); + --display--line-height: var(--lineHeight-display); + --link--color: var(--link-primary); + --link--color--hover: var(--link-primary-hover); --link--decoration: none; --link--decoration--hover: underline; --lead--font-size: var(--text-lg); @@ -174,8 +166,8 @@ --blockquote--border: var(--border-width) var(--border-style) var(--border-color); --blockquote--margin: var(--inset-md); --blockquote--padding--bordered: var(--inset-md); - --hr--border-color: var(--shade-10), rgba(0,0,0,0.1); - --hr--border-width: var(--border-top-width); + --hr--border-color: var(--shade-20), rgba(0,0,0,0.1); + --hr--border-width: var(--border-width); --hr--border-style: var(--border-style); --hr--margin: var(--stack-md); --mark--padding: var(--stretch-xs); @@ -188,7 +180,7 @@ --code--color--dark: var(--gray-10); --code--background--dark: var(--gray-80); --kbd--font-size: var(--text-md); - --kbd--box-shadow: inset 0 -0.1rem 0 rgba(0, 0, 0, 0.25); + --kbd--box-shadow: inset var(--shadow-inner-x) var(--shadow-inner-y) var(--shadow-inner-blur) var(--shade-20); --kbd--nested-font-weight: var(--font-weight--bold); --kbd--padding: var(--code--padding); --kbd--color: var(--neutrals-black); diff --git a/packages/design-system/vue/src/assets/style.css b/packages/design-system/vue/src/assets/style.css index 5ad0f6f..d2b935a 100644 --- a/packages/design-system/vue/src/assets/style.css +++ b/packages/design-system/vue/src/assets/style.css @@ -1,5 +1,5 @@ -@import url('@eternagame/design-system-tokens/tokens.css'); @import url('@inkline/inkline/inkline.css'); +@import url('@eternagame/design-system-tokens/tokens.css'); @import url('./inklineOverrides.css'); body {