From 13f82ec6d93bd6a230bc4be88e36167956d52e6c Mon Sep 17 00:00:00 2001 From: Puria Nafisi Azizi Date: Fri, 26 Jan 2024 09:17:39 +0100 Subject: [PATCH] feat: New colors and typographic family (#27) * style: Add new font * feat: Add fonts and minor changes to services * feat: colors typography details * test(avatar): update tests with the new icon --- .prettierrc.json | 3 +- package.json | 2 + pnpm-lock.yaml | 64 +++++++++++++++++++ src/components/avatar/avatar.css | 6 +- src/components/avatar/avatar.tsx | 9 ++- src/components/avatar/test/avatar.spec.tsx | 18 +++--- .../credential-card/d-credential-card.css | 19 +++--- .../credential-services.stories.ts | 2 +- .../d-credential-service.css | 12 ++-- .../d-credential-service.tsx | 11 +++- .../test/d-credential-service.spec.tsx | 6 +- src/components/tokens/Colors.mdx | 17 ++--- src/global/global.css | 58 +++++++++++------ src/index.html | 2 + tailwind.config.ts | 22 +++---- 15 files changed, 175 insertions(+), 76 deletions(-) diff --git a/.prettierrc.json b/.prettierrc.json index 7ca3a28..b4d1390 100644 --- a/.prettierrc.json +++ b/.prettierrc.json @@ -9,5 +9,6 @@ "singleQuote": true, "tabWidth": 2, "trailingComma": "all", - "useTabs": false + "useTabs": false, + "plugins": ["prettier-plugin-tailwindcss"] } diff --git a/package.json b/package.json index f646c5a..e0a0d83 100644 --- a/package.json +++ b/package.json @@ -55,6 +55,8 @@ "jest-cli": "^29.7.0", "npm-run-all": "^4.1.5", "postcss-import": "^16.0.0", + "prettier": "^3.2.4", + "prettier-plugin-tailwindcss": "^0.5.11", "puppeteer": "21.7.0", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index af0fa80..f5b2b48 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -76,6 +76,12 @@ devDependencies: postcss-import: specifier: ^16.0.0 version: 16.0.0(postcss@8.4.33) + prettier: + specifier: ^3.2.4 + version: 3.2.4 + prettier-plugin-tailwindcss: + specifier: ^0.5.11 + version: 0.5.11(prettier@3.2.4) puppeteer: specifier: 21.7.0 version: 21.7.0(typescript@5.3.3) @@ -8130,12 +8136,70 @@ packages: source-map-js: 1.0.2 dev: true + /prettier-plugin-tailwindcss@0.5.11(prettier@3.2.4): + resolution: {integrity: sha512-AvI/DNyMctyyxGOjyePgi/gqj5hJYClZ1avtQvLlqMT3uDZkRbi4HhGUpok3DRzv9z7Lti85Kdj3s3/1CeNI0w==} + engines: {node: '>=14.21.3'} + peerDependencies: + '@ianvs/prettier-plugin-sort-imports': '*' + '@prettier/plugin-pug': '*' + '@shopify/prettier-plugin-liquid': '*' + '@trivago/prettier-plugin-sort-imports': '*' + prettier: ^3.0 + prettier-plugin-astro: '*' + prettier-plugin-css-order: '*' + prettier-plugin-import-sort: '*' + prettier-plugin-jsdoc: '*' + prettier-plugin-marko: '*' + prettier-plugin-organize-attributes: '*' + prettier-plugin-organize-imports: '*' + prettier-plugin-style-order: '*' + prettier-plugin-svelte: '*' + prettier-plugin-twig-melody: '*' + peerDependenciesMeta: + '@ianvs/prettier-plugin-sort-imports': + optional: true + '@prettier/plugin-pug': + optional: true + '@shopify/prettier-plugin-liquid': + optional: true + '@trivago/prettier-plugin-sort-imports': + optional: true + prettier-plugin-astro: + optional: true + prettier-plugin-css-order: + optional: true + prettier-plugin-import-sort: + optional: true + prettier-plugin-jsdoc: + optional: true + prettier-plugin-marko: + optional: true + prettier-plugin-organize-attributes: + optional: true + prettier-plugin-organize-imports: + optional: true + prettier-plugin-style-order: + optional: true + prettier-plugin-svelte: + optional: true + prettier-plugin-twig-melody: + optional: true + dependencies: + prettier: 3.2.4 + dev: true + /prettier@2.8.8: resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==} engines: {node: '>=10.13.0'} hasBin: true dev: false + /prettier@3.2.4: + resolution: {integrity: sha512-FWu1oLHKCrtpO1ypU6J0SbK2d9Ckwysq6bHj/uaCP26DxrPpppCLQRGVuqAxSTvhF00AcvDRyYrLNW7ocBhFFQ==} + engines: {node: '>=14'} + hasBin: true + dev: true + /pretty-format@27.5.1: resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==} engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0} diff --git a/src/components/avatar/avatar.css b/src/components/avatar/avatar.css index 793dbb5..516a068 100644 --- a/src/components/avatar/avatar.css +++ b/src/components/avatar/avatar.css @@ -1,5 +1,9 @@ :host { - @apply inline-flex items-center justify-center relative overflow-hidden h-10 w-10 bg-accent rounded-full text-on-accent; + @apply inline-flex items-center justify-center relative overflow-hidden h-10 w-10 bg-accent rounded-full; +} + +:host span { + @apply text-on-accent } :host([size="xs"]) svg, diff --git a/src/components/avatar/avatar.tsx b/src/components/avatar/avatar.tsx index b56842e..24f7ca4 100644 --- a/src/components/avatar/avatar.tsx +++ b/src/components/avatar/avatar.tsx @@ -33,8 +33,13 @@ export class Avatar { {initials ? ( {initials} ) : ( - - + + )} diff --git a/src/components/avatar/test/avatar.spec.tsx b/src/components/avatar/test/avatar.spec.tsx index 805cc67..c28ec04 100644 --- a/src/components/avatar/test/avatar.spec.tsx +++ b/src/components/avatar/test/avatar.spec.tsx @@ -9,10 +9,10 @@ describe('d-avatar', () => { }); expect(page.root).toEqualHtml(` - - - - + + + + `); @@ -41,11 +41,11 @@ describe('d-avatar', () => { }); expect(root).toEqualHtml(` - - - - - + + + + + `); }); diff --git a/src/components/credential-card/d-credential-card.css b/src/components/credential-card/d-credential-card.css index 6397e39..e8bb003 100644 --- a/src/components/credential-card/d-credential-card.css +++ b/src/components/credential-card/d-credential-card.css @@ -1,8 +1,5 @@ :host { - @apply w-full inline-flex flex-col items-start gap-2.5 px-5 py-5 rounded-lg bg-gradient-to-b from-tab to-slate-300; - /* background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWgAAADFCAYAAAB5EGhRAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAiESURBVHgB7d3tUttIFoDhNoRASNhMpub+L3Frd2uHkPDh6SPcIIwNtpGllvQ8VQqkEmZ+TNU7p45ackoA1G+5XJ4lAOoizgB1OWl9L9AAtcnT80W+ThMA1SgT9KfFYnGfAKjGyWpyvksAVCUm6Ng93yYAqhKBPrHeAKhPBHqZAKhOBPohAVAdgQaoVATa/hkAAAAAAAAAAAA2Wy6XJwmA6pSXJQFQmQi0F/UDVMgEDVCpJtD20AD1KWE+TwBUpQT6SwKgKiXQ8dmEdtEAFWnvnq8SANVoBzqmaKsOgEqsn964zJF2LhqgAuuBXuTrWwJgcJvOP8e5aJEGGNi2B1Qu7KMBhvXWE4Rfc6Q9wAIwkPce8b4SaYBh7PIODpEGGMCuL0mKSF8mAHqzz1vsLp3uAOjPvq8ZjdMdf3qYBeD4DnkPdPzM9xzpiwTA0Rz6ov74uW850lemaYDj+OgnqcTpDtM0wBF08VFXZZr+YZoG6E6Xn0UYcf5h7QHQjU+pe7H2iBcu3eSvvxaLxX0CYG/HCHSIyTwebLkQaoDDHCvQhVADHGiRw/lX6tevfF0LNcDbjj1BbxI76vP8P4YI9U0O9W0C4JUhAl2UUD/kr9f5ujVVAzwbMtBFc446vjFVAzyrIdBt7anaTUVg1oa4SbivmKZjsrYCAWaltgl6k7PVFSsQsQZmYwyBbhNrYDbGFui2dqwj0LGzjljfJYAJGHOg2+LlTF/jm9UNxpiuf6fHYD8kgBGaSqDb4tje+eoqq5ASa9M1MBpTDPS69iqkTNfNZXcN1GwOgW5bn64j0DFVx4R9J9hATeYW6HWnq0uwgerMPdDrtgU7ViJ3dthAnwT6bevBXqbnHXbE+t4pEeBYBHo/i3x9Xl2N1ZRdon1vyga6ItAfV6bsi/jNasoua5FmRWKXDRxCoLsXU/bT0b6wOt53l1rhthoB3iPQ/YjjfeurkQh0WY+YtIFXBHo4J6urPWmX9chTuO20Yb4Eui7t9UjZaceX+/QcbadHYCYEehzKjcj2imR92m5WJsIN0yHQ4/Vq2g6rY3/lAZvme2sSGCeBnp5N03Z8EW4YGYGej7fC3T5RYlUClRBoSrjXVyXtHXeZvJembuiPQLPNqwduwpZ1iakbjkCgOcSrdUnYMHWXcJu64QACTZfem7rLrtvKBHYg0PSlvet+su2ESb4erEyYO4GmBttWJpumbrtuZkOgqdm2qXvTCRPhZnIEmjHatusuE3d5Q6AblIyaQDMlryZuL5tizASaOdj0FGX7QxRM21RJoJmrTR+i4H3cVEWg4dmm93GLNoMRaHjbW9Fuf5q7nTadE2jY36YPBn5xIzIH+zbBBwk0dOPFjcjV6ZFy3K+ZtE3Z7Eug4XjWVyPloZoyZdtl8yaBhv6UKfs8ftM66lcmbMHmBYGG4bw46te6+fg72WOTBBpq8uLm41qwTdgzJNBQr03Bjqm6TNiCPXECDeMRwW6vRMqLocqE7ZTIxAg0jFfssM/T803Hcqzvl/31NAg0TMfTsb61dUhM1/eJ0RFomKb1dUgzWafHWJuuR0KgYR7i/PVlfNPeXedY/0pUa5H/Y/2VgDn7naxCqmSCBtqrkJisyypErAcm0EBb+9y1WA9MoIFtxHpgAg3sQqwHINDAvjbF+rcnGbsn0MBHlFjHszFxEuTGOevuCDTQhXgwpnnsvHXO+toK5GMEGuja0ztCrEA+RqCBY1pfgfz0mtTdCTTQh/YKJNYeP5Op+l0CDfQt3gvyLT1P1XbVWwg0MJT2VN3sqnOobxJPBBqoQbOrzqGON+5dJw/BNAQaqEmcAIn1x8Nqqp71+kOggRq1j+rFMb1Zhlqggdq199TXc3pS0Qv7gbGJQN/M4dNgTNDA2JQbil/T40Q92ZMfJmhg7OJhl0mG+iQBjFtz8iMPm9/zdZYmRKCBqYg4R6Sv8nWaJsAOGpiayRzPE2hgqkqo48nEmzG+mMmKA5i6eHz8jxzqizQyAg3MQbmR+OeY9tMCDcxJNO/HWG4kCjQwR7Gf/l772kOggbkqa49qp2mBBuYupum4ifglVUagAR4/3eXr6mnEaqZpgQZ4Vp5GrGI3LdAAL1WzmxZogM3KSY/BnrgWaIDtopF/rD7MdpB/OQBvu1ytPHptpkAD7KYcx+ttLy3QALsrK4/z1AOBBthPnJm+6mMvLdAAh7k8dqQFGuBwEel/HevmoUADfMzn9HheuvOeCjTAx8XJjs5PeAg0QDeip52+bEmgAbrTaaQFGqBbnUVaoAG6F2398OkOgQY4jpigr9IHCDTA8ZzlKfpbOpBAAxzXxaFPHAo0wPFdHvKCJYEG6Me3fU92CDRAP+IteHud7BBogP7EBL3zPlqgAfoVNw3PdvmLAg3Qv50+31CgAfoX7b3c5S8B0L93Vx0CDTCcN58yFGiA4ZzmKfrLtj8UaIBhXW67YSjQCWBQ8QDLxaY/EGiA4X3ZNEULNMDwNk7RAg1Qh1c3CwUaoA6L9XPRAg1QjxdPFwo0QD3O2jcLBRqgLk83CwUaoC5Pe2iBBqjL05pDoAHq8zl+EWiA+nyKXwQaoD4maIBKncQeWqAB6nQm0AB1MkEDVOpUoAHqZIIGqFQzQS8TALVZCDRAnZpA3yUAatME+jYBUB0TNEClThaLRUzQ9tAAlSnH7H4mAGryINAAlWoCndccseIQaYB63LefJLxOdtEAtXj+eO/VFH2dAKjB3Yt3ceRIx5rDqgNgePevXpaUI/138vAKwNDut73N7n/JAywAg8nD8t3Jlj9Y5us/yboDYAjNFuPN90Gv1h3/z9dDAqAv9/HLuy/sz5G+yV/+m69fCYA+NBP0Yp+fWC6Xp/nLZb7O0g5xB+Ag/87D8cNegW7LsY5Ix/UpPcY64n3wPw+Axm2Oc2wt0j/8I2xWYA28ugAAAABJRU5ErkJggg=='); */ - /* background-size: cover; - background-repeat: no-repeat; */ + @apply w-full inline-flex flex-col items-start gap-2.5 px-5 py-5 rounded-lg bg-primary; } .between { @@ -10,23 +7,23 @@ } .heading { - @apply flex text-on-primary text-xl not-italic font-semibold items-center gap-2; + @apply flex text-xl not-italic font-semibold items-center gap-2; +} + +.name { + @apply text-3xl not-italic font-semibold leading-[20.5px] tracking-[-0.5px]; } .info { @apply inline-flex flex-col items-start gap-2 min-h-32; } -.name { - @apply text-on-primary text-xl not-italic font-semibold leading-[20.5px] tracking-[-0.5px]; -} .description { - @apply text-on-primary text-base not-italic font-medium leading-[20.5px] tracking-[-0.5px]; + @apply text-xl not-italic font-medium leading-[20.5px] tracking-[-0.5px]; } .labeled-text { - @apply flex flex-col gap-0.5 text-on-primary whitespace-nowrap text-xs not-italic leading-[130%] tracking-[-0.5px]; - text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.25); + @apply flex flex-col gap-0.5 whitespace-nowrap text-lg not-italic leading-[130%] tracking-[-0.5px]; } .label { diff --git a/src/components/credential-service/credential-services.stories.ts b/src/components/credential-service/credential-services.stories.ts index 7e9a452..145e336 100644 --- a/src/components/credential-service/credential-services.stories.ts +++ b/src/components/credential-service/credential-services.stories.ts @@ -12,7 +12,7 @@ type Story = StoryObj; export const Default: Story = { args: { name: 'Over 18', - description: 'This credential proves that you are over 18 years old', + description: 'Age Validation', issuer: 'Italian Government', }, parameters: { diff --git a/src/components/credential-service/d-credential-service.css b/src/components/credential-service/d-credential-service.css index 19c0670..c9bfa68 100644 --- a/src/components/credential-service/d-credential-service.css +++ b/src/components/credential-service/d-credential-service.css @@ -1,16 +1,20 @@ :host > div, :host > a > div { - @apply w-full rounded-lg p-5 flex gap-5 bg-primary no-underline; + @apply w-full rounded-lg p-5 flex gap-5 bg-primary no-underline items-center; } .name { - @apply block overflow-hidden text-on-primary text-ellipsis whitespace-nowrap text-base not-italic font-bold leading-[20.5px] tracking-[-0.5px]; + @apply block overflow-hidden text-ellipsis whitespace-nowrap not-italic font-bold leading-[20.5px] tracking-[-0.5px] pb-2 text-lg; } .issuer { - @apply block overflow-hidden text-on-primary-2 text-ellipsis text-xs not-italic font-normal leading-[normal] tracking-[-0.5px]; + @apply block overflow-hidden text-on-alt text-ellipsis not-italic font-normal leading-[normal] tracking-[-0.5px]; } .description { - @apply block overflow-hidden text-on-primary-2 text-ellipsis text-xs not-italic font-medium leading-[normal] tracking-[-0.5px]; + @apply block overflow-hidden text-on-alt text-ellipsis not-italic font-medium leading-[normal] tracking-[-0.5px]; +} + +svg { + @apply w-6 h-6 fill-current stroke-on; } diff --git a/src/components/credential-service/d-credential-service.tsx b/src/components/credential-service/d-credential-service.tsx index 04d6ed4..0df67f5 100644 --- a/src/components/credential-service/d-credential-service.tsx +++ b/src/components/credential-service/d-credential-service.tsx @@ -15,12 +15,17 @@ export class DCredentialService { render() { const content = (
- -
+ +
{this.name} - {this.issuer} {this.description} + {this.issuer}
+ {this.href && ( + + + + )}
); diff --git a/src/components/credential-service/test/d-credential-service.spec.tsx b/src/components/credential-service/test/d-credential-service.spec.tsx index 507c3ad..08484f2 100644 --- a/src/components/credential-service/test/d-credential-service.spec.tsx +++ b/src/components/credential-service/test/d-credential-service.spec.tsx @@ -11,11 +11,11 @@ describe('d-credential-service', () => {
- -
+ +
- +
diff --git a/src/components/tokens/Colors.mdx b/src/components/tokens/Colors.mdx index 1d0a3ce..c4919a9 100644 --- a/src/components/tokens/Colors.mdx +++ b/src/components/tokens/Colors.mdx @@ -3,12 +3,13 @@ import { Meta, ColorPalette, ColorItem } from '@storybook/blocks'; - - - - - - - - + + + + + + + + + diff --git a/src/global/global.css b/src/global/global.css index dea2e82..5c80299 100644 --- a/src/global/global.css +++ b/src/global/global.css @@ -1,38 +1,56 @@ +/* gantari-latin-wght-normal */ +@font-face { + font-family: 'Gantari Variable'; + font-style: normal; + font-display: swap; + font-weight: 100 900; + src: url(https://cdn.jsdelivr.net/fontsource/fonts/gantari:vf@latest/latin-wght-normal.woff2) format('woff2-variations'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, + U+FEFF, U+FFFD; +} + @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { - --tab: #bdc2cf; --surface: #e9ebef; - --primary: #bdc2cf; - --on-primary: #2d2d2d; - --on-primary-2: #68686f; + --primary: #d2d7e5; --accent: #223360; - --on-accent: #dbd7cb; - --status-bar: #000000; + --on-accent: #dfddd7; + --on: #2d2d2d; + --on-alt: #5d5d65; + --success: #279b48; + --warning: #e58600; + --error: #ee342b; } .dark { - --tab: #223360; - --surface: #4e5c80; - --primary: #223360; - --on-primary: #f7faff; - --on-primary-2: #b0b0b9; - --accent: #dbd7cb; + --surface: #1f2433; + --primary: #253151; + --accent: #dfddd7; --on-accent: #223360; - --status-bar: #ffffff; + --on: #f7faff; + --on-alt: #c0c0ca; + --success: #4ecb71; + --warning: #ff9601; + --error: #ff443b; } @media (prefers-color-scheme: dark) { - --tab: #223360; - --surface: #4e5c80; - --primary: #223360; - --on-primary: #f7faff; - --on-primary-2: #b0b0b9; - --accent: #dbd7cb; + --surface: #1f2433; + --primary: #253151; + --accent: #dfddd7; --on-accent: #223360; - --status-bar: #ffffff; + --on: #f7faff; + --on-alt: #c0c0ca; + --success: #4ecb71; + --warning: #ff9601; + --error: #ff443b; } } + +* { + @apply text-on; +} diff --git a/src/index.html b/src/index.html index f2f8cba..3c465c8 100644 --- a/src/index.html +++ b/src/index.html @@ -24,6 +24,8 @@

Test page

+ + diff --git a/tailwind.config.ts b/tailwind.config.ts index 047857c..fd2a524 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -4,24 +4,20 @@ export default { content: ['./src/**/*.{ts,tsx,html}'], theme: { extend: { + fontFamily: { + sans: ['"Gantari Variable"', 'sans-serif'], + }, colors: { - 'tab': 'var(--tab)', 'surface': 'var(--surface)', 'primary': 'var(--primary)', - 'on-primary': 'var(--on-primary)', - 'on-primary-2': 'var(--on-primary-2)', + 'on': 'var(--on)', + 'on-alt': 'var(--on-alt)', 'accent': 'var(--accent)', 'on-accent': 'var(--on-accent)', - 'status-bar': 'var(--status-bar)', - 'inverted-tab': 'var(--inverted-tab)', - 'inverted-surface': 'var(--inverted-surface)', - 'inverted-primary': 'var(--inverted-primary)', - 'inverted-on-primary': 'var(--inverted-on-primary)', - 'inverted-on-primary-2': 'var(--inverted-on-primary-2)', - 'inverted-accent': 'var(--inverted-accent)', - 'inverted-on-accent': 'var(--inverted-on-accent)', - 'inverted-status-bar': 'var(--inverted-status-bar)', + 'success': 'var(--success)', + 'warning': 'var(--warning)', + 'error': 'var(--error)', }, }, }, -} satisfies Config; \ No newline at end of file +} satisfies Config;