Merge pull request #235 from kloudlite/devdoc/ui

Devdoc/UI
kloudlite · Jun 28, 2024 · a634e36 · a634e36
2 parents c86537b + 4232d88
commit a634e36
Show file tree

Hide file tree

Showing 11 changed files with 39 additions and 16 deletions.
diff --git a/.eslintrc.yml b/.eslintrc.yml
@@ -4,3 +4,4 @@ extends:
 rules:
   no-case-declarations: 0
   no-restricted-syntax: 0
+  react/no-unescaped-entities: 0
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}
diff --git a/src/design-system/.eslintrc.yml b/src/design-system/.eslintrc.yml
@@ -54,6 +54,7 @@ rules:
   # pritter rules
 
   # ts rules
+  react/no-unescaped-entities: 0
   react/jsx-filename-extension: 0
   react/require-default-props : 0
   "@typescript-eslint/no-unused-vars":

diff --git a/src/design-system/components/atoms/badge.tsx b/src/design-system/components/atoms/badge.tsx
@@ -21,7 +21,8 @@ export const Badge = ({
       className={cn(
         'flex gap-md items-center py-md px-2xl w-fit rounded-full bodySm border select-none pulsable',
         {
-          'border-border-default bg-surface-basic-default': type === 'neutral',
+          'border-border-dark bg-surface-basic-subdued text-text-default':
+            type === 'neutral',
           'border-border-primary bg-surface-primary-subdued text-text-primary':
             type === 'info',
           'border-border-success bg-surface-success-subdued text-text-success ':

diff --git a/src/design-system/components/atoms/radio.tsx b/src/design-system/components/atoms/radio.tsx
@@ -47,6 +47,7 @@ export const Item = ({
           },
           className
         )}
+        aria-label={value}
       >
         <RadioGroupPrimitive.Item
           className={cn(
@@ -60,6 +61,7 @@ export const Item = ({
           value={value}
           id={id}
           disabled={disabled}
+          aria-label={value}
         >
           <RadioGroupPrimitive.Indicator
             className={cn('block w-lg h-lg rounded-full', {

diff --git a/src/design-system/components/branding/brand-logo.tsx b/src/design-system/components/branding/brand-logo.tsx
@@ -15,11 +15,11 @@ const Logo = ({ size = 24, darkBg = false, color }: BaseLogoProps) => {
         <svg height={size} viewBox="0 0 90 90" fill="none">
           <path
             d="M36.5546 45.7965C36.0525 45.2945 36.0525 44.4805 36.5546 43.9785L62.3723 18.1608C62.8743 17.6587 63.6883 17.6587 64.1904 18.1608L90.0082 43.9786C90.5103 44.4807 90.5103 45.2946 90.0082 45.7967L64.1905 71.6144C63.6885 72.1164 62.8745 72.1164 62.3724 71.6144L36.5546 45.7965Z"
-            fill="#2563EB"
+            className="fill-icon-logo"
           />
           <path
             d="M46.5887 0.376535C46.0867 -0.125511 45.2727 -0.125512 44.7707 0.376534L1.05622 44.091C0.554176 44.593 0.554176 45.407 1.05622 45.909L44.7707 89.6235C45.2727 90.1255 46.0867 90.1255 46.5887 89.6235L53.7942 82.418C54.2962 81.9159 54.2962 81.102 53.7942 80.5999L18.9358 45.7415C18.4337 45.2395 18.4337 44.4255 18.9358 43.9234L53.6267 9.23255C54.1287 8.7305 54.1287 7.91652 53.6267 7.41448L46.5887 0.376535Z"
-            fill="#2563EB"
+            className="fill-icon-logo"
           />
         </svg>
       )}
@@ -58,17 +58,17 @@ const DetailedLogo = ({ size, darkBg, color }: BaseLogoProps) => {
         <svg height={size} viewBox="0 0 463 90" fill="none">
           <path
             d="M36.5546 45.7965C36.0525 45.2945 36.0525 44.4805 36.5546 43.9785L62.3723 18.1608C62.8743 17.6587 63.6883 17.6587 64.1904 18.1608L90.0082 43.9786C90.5103 44.4807 90.5103 45.2946 90.0082 45.7967L64.1905 71.6144C63.6885 72.1164 62.8745 72.1164 62.3724 71.6144L36.5546 45.7965Z"
-            fill="#2563EB"
+            className="fill-icon-logo"
           />
           <path
             d="M46.5887 0.376535C46.0867 -0.125511 45.2727 -0.125512 44.7707 0.376534L1.05622 44.091C0.554176 44.593 0.554176 45.407 1.05622 45.909L44.7707 89.6235C45.2727 90.1255 46.0867 90.1255 46.5887 89.6235L53.7942 82.418C54.2962 81.9159 54.2962 81.102 53.7942 80.5999L18.9358 45.7415C18.4337 45.2395 18.4337 44.4255 18.9358 43.9234L53.6267 9.23255C54.1287 8.7305 54.1287 7.91652 53.6267 7.41448L46.5887 0.376535Z"
-            fill="#2563EB"
+            className="fill-icon-logo"
           />
           <path
             fillRule="evenodd"
             clipRule="evenodd"
             d="M114.385 7V83H127.618V59.3079L144.587 83H159.528L139.678 55.2524L159.101 29.1424H144.16L127.618 51.5172V7H114.385ZM377.199 29.0521H363.403V83H377.199V29.0521ZM363.403 7.01953V21.0213H377.199V7.01953H363.403ZM163.325 7.02761L163.642 83H177.437L177.121 7.02761H163.325ZM207.021 29.0521C198.51 29.0521 192.435 31.4201 188.798 36.1559C185.16 40.8232 183.341 47.4123 183.341 55.9231C183.341 73.9744 191.234 83 207.021 83C222.807 83 230.7 73.9744 230.7 55.9231C230.7 47.4123 228.881 40.8232 225.243 36.1559C221.606 31.4201 215.531 29.0521 207.021 29.0521ZM207.021 71.2633C203.383 71.2633 200.843 70.0278 199.402 67.5569C198.029 65.086 197.343 61.2081 197.343 55.9231C197.343 50.6381 198.029 46.7945 199.402 44.3923C200.843 41.99 203.383 40.7889 207.021 40.7889C210.658 40.7889 213.164 41.99 214.536 44.3923C215.978 46.7945 216.698 50.6381 216.698 55.9231C216.698 61.2081 215.978 65.086 214.536 67.5569C213.164 70.0278 210.658 71.2633 207.021 71.2633ZM267.559 29.0521H281.354V83H267.661V78.8819C262.72 81.6273 258.43 83 254.792 83C247.654 83 242.85 81.0439 240.379 77.1317C237.908 73.1508 236.672 66.5274 236.672 57.2615V29.0521H250.468V57.4674C250.468 62.5465 250.88 66.0126 251.704 67.8658C252.527 69.719 254.518 70.6455 257.675 70.6455C260.695 70.6455 263.543 70.1651 266.22 69.2042L267.559 68.7924V29.0521ZM333.41 83L333.409 7.02761H319.614L319.614 30.4935L317.658 30.0817C313.746 29.3953 310.691 29.0521 308.495 29.0521C301.357 29.0521 296.003 31.2141 292.434 35.5382C288.934 39.7937 287.183 46.6229 287.183 56.0261C287.183 65.3606 288.659 72.1898 291.61 76.5139C294.562 80.838 299.778 83 307.259 83C310.76 83 314.912 81.8675 319.717 79.6026V83H333.41ZM319.614 69.1012L318.173 69.4101C315.015 70.2337 311.995 70.6455 309.113 70.6455C306.299 70.6455 304.274 69.5131 303.038 67.2481C301.803 64.9831 301.185 61.1738 301.185 55.8202C301.185 45.9366 303.965 40.9948 309.524 40.9948C312.476 40.9948 315.839 41.338 319.614 42.0243V69.1012ZM341.524 83L341.524 7.02761H355.319L355.32 83H341.524ZM413.212 42.0243H400.549V63.1299C400.549 65.189 400.583 66.6647 400.652 67.5569C400.789 68.3806 401.167 69.1012 401.784 69.719C402.471 70.3367 403.5 70.6455 404.873 70.6455L412.698 70.4396L413.315 81.4557C408.717 82.4853 405.216 83 402.814 83C396.637 83 392.416 81.6273 390.151 78.8819C387.886 76.0678 386.753 70.9201 386.753 63.4388V42.0243V29.0521V7.01953H400.549V29.0521H413.212V42.0243ZM433.992 68.7924C432.414 67.351 431.59 65.0517 431.521 61.8944H461.79L462.819 52.3197C462.819 36.808 455.338 29.0521 440.375 29.0521C425.207 29.0521 417.623 38.2837 417.623 56.7468C417.623 66.0126 419.373 72.7046 422.873 76.8228C426.374 80.941 432.002 83 439.758 83C446.141 83 453.279 82.0391 461.172 80.1173L460.966 69.9249L458.083 70.2337C453.073 70.6455 447.376 70.8515 440.993 70.8515C437.973 70.8515 435.639 70.1651 433.992 68.7924ZM447.273 42.848C448.577 44.4266 449.229 47.275 449.229 51.3931H431.418C431.487 47.4123 432.173 44.5982 433.477 42.9509C434.85 41.235 437.149 40.3771 440.375 40.3771C443.67 40.3771 445.969 41.2007 447.273 42.848Z"
-            fill="#2563EB"
+            className="fill-icon-logo"
           />
         </svg>
       )}

diff --git a/src/design-system/components/css/index.scss b/src/design-system/components/css/index.scss
@@ -174,6 +174,7 @@
   --icon-critical: var(--red-600);
   --icon-warning: var(--amber-600);
   --icon-success: var(--green-600);
+  --icon-logo: var(--blue-600);
   /* Border */
   --border-default: var(--zinc-200);
   --border-dark: var(--zinc-300);
@@ -198,10 +199,10 @@
   --surface-basic-active: var(--zinc-800);
   --surface-basic-overlay-bg: var(--zinc-900);
   /* Primary */
-  --surface-primary-default: var(--blue-700);
+  --surface-primary-default: var(--blue-800);
   --surface-primary-subdued: var(--blue-1100);
   --surface-primary-hovered: var(--blue-600);
-  --surface-primary-pressed: var(--blue-800);
+  --surface-primary-pressed: var(--blue-900);
   --surface-primary-selected: var(--blue-1100);
   /* Secondary */
   --surface-secondary-default: var(--amber-700);
@@ -251,6 +252,7 @@
   --icon-critical: var(--red-500);
   --icon-warning: var(--amber-500);
   --icon-success: var(--green-500);
+  --icon-logo: var(--zinc-100);
   /* Border */
   --border-default: var(--zinc-800);
   --border-dark: var(--zinc-700);
@@ -1793,6 +1795,10 @@ video {
   border-color: var(--border-critical);
 }
 
+.border-border-dark {
+  border-color: var(--border-dark);
+}
+
 .border-border-default {
   border-color: var(--border-default);
 }
@@ -1894,7 +1900,8 @@ video {
 }
 
 .bg-surface-basic-subdued {
-  background-color: var(--surface-basic-subdued);
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--surface-basic-subdued) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
 .bg-surface-critical-default {
@@ -1986,8 +1993,8 @@ video {
 }
 
 .from-surface-basic-subdued {
-  --tw-gradient-from: var(--surface-basic-subdued) var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-from: color-mix(in srgb, var(--surface-basic-subdued) calc(100% * 1), transparent) var(--tw-gradient-from-position);
+  --tw-gradient-to: color-mix(in srgb, var(--surface-basic-subdued) calc(100% * 0), transparent) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
@@ -2003,6 +2010,10 @@ video {
   fill: var(--icon-disabled);
 }
 
+.fill-icon-logo {
+  fill: var(--icon-logo);
+}
+
 .fill-icon-primary {
   fill: var(--icon-primary);
 }

diff --git a/src/design-system/components/molecule/profile.tsx b/src/design-system/components/molecule/profile.tsx
@@ -1,9 +1,9 @@
-import { ReactNode, forwardRef } from 'react';
+import { ComponentProps, ReactNode, forwardRef } from 'react';
 import { AvatarBase, IAvatar } from '../atoms/avatar';
 import { BounceIt } from '../bounce-it';
 import { cn } from '../utils';
 
-interface IProfile extends IAvatar {
+interface IProfile extends IAvatar, Omit<ComponentProps<'button'>,'color'|'name'> {
   name?: ReactNode;
   subtitle?: ReactNode;
   responsive?: boolean;

diff --git a/src/design-system/css/dark.css b/src/design-system/css/dark.css
@@ -9,10 +9,10 @@
   --surface-basic-overlay-bg: var(--zinc-900);
 
   /* Primary */
-  --surface-primary-default: var(--blue-700);
+  --surface-primary-default: var(--blue-800);
   --surface-primary-subdued: var(--blue-1100);
   --surface-primary-hovered: var(--blue-600);
-  --surface-primary-pressed: var(--blue-800);
+  --surface-primary-pressed: var(--blue-900);
   --surface-primary-selected: var(--blue-1100);
 
   /* Secondary */
@@ -71,6 +71,7 @@
 --icon-critical: var(--red-500);
 --icon-warning: var(--amber-500);
 --icon-success: var(--green-500);
+--icon-logo: var(--zinc-100);
 
 /* Border */
 --border-default: var(--zinc-800);

diff --git a/src/design-system/css/default.css b/src/design-system/css/default.css
@@ -75,6 +75,7 @@
 --icon-critical: var(--red-600);
 --icon-warning: var(--amber-600);
 --icon-success: var(--green-600);
+--icon-logo: var(--blue-600);
 
 /* Border */
 --border-default: var(--zinc-200);

diff --git a/src/design-system/tailwind-base.js b/src/design-system/tailwind-base.js
@@ -214,7 +214,8 @@ const config = {
       surface: {
         basic: {
           default: 'var(--surface-basic-default)',
-          subdued: 'var(--surface-basic-subdued)',
+          subdued:
+            'color-mix(in srgb, var(--surface-basic-subdued) calc(100% * <alpha-value>), transparent)',
           hovered: 'var(--surface-basic-hovered)',
           pressed: 'var(--surface-basic-pressed)',
           input: 'var(--surface-basic-input)',
@@ -290,6 +291,7 @@ const config = {
         critical: 'var(--icon-critical)',
         warning: 'var(--icon-warning)',
         success: 'var(--icon-success)',
+        logo: 'var(--icon-logo)',
       },
       border: {
         default: 'var(--border-default)',