fix: dark-mode

frameless · Oct 21, 2024 · bc9e347 · bc9e347
1 parent e5f573e
commit bc9e347
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 8 deletions.
diff --git a/apps/frameless.io/package.json b/apps/frameless.io/package.json
@@ -18,7 +18,7 @@
     "dev": "pnpm run server:dev",
     "prod": "pnpm run lint && pnpm run build && pnpm run server:prod",
     "build": "vite build",
-    "purgecss": "purgecss --css 'dist/client/assets/static/*.css' --content dist/client/index.html 'dist/client/assets/**/*.js' --variables --output 'dist/client/assets/static'",
+    "purgecss": "purgecss --css 'dist/client/assets/static/*.css' --content dist/client/index.html 'dist/client/assets/**/*.js' --output 'dist/client/assets/static'",
     "postbuild": "pnpm run purgecss && precompress --exclude '**.woff2' --types br --verbose dist/client/",
     "server": "tsx ./server/index.ts",
     "server:dev": "pnpm run server",

diff --git a/apps/frameless.io/renderer/global.css b/apps/frameless.io/renderer/global.css
@@ -33,6 +33,13 @@
   unicode-range: U+000-5FF; /* Downloads only latin glyphs */
 }
 
+body {
+  margin-block-end: 0;
+  margin-block-start: 0;
+  margin-inline-end: 0;
+  margin-inline-start: 0;
+}
+
 .frameless-theme {
   --utrecht-space-around: 1;
   --frameless-illustration-color: #122529;
@@ -113,6 +120,18 @@ details[open] summary {
     --frameless-section-alternate-card-border-width: 1px;
     --frameless-section-alternate-card-border-color: var(--frameless-color-gray-60);
     --utrecht-unordered-list-marker-color: white;
+    --utrecht-button-primary-action-background-color: var(--frameless-color-petrol-70);
+    --utrecht-button-primary-action-color: var(--frameless-color-petrol-10);
+    --utrecht-button-primary-action-hover-background-color: var(--frameless-color-petrol-80);
+    --utrecht-button-primary-action-hover-color: var(--frameless-color-petrol-10);
+    --utrecht-button-secondary-action-background-color: transparent;
+    --utrecht-button-secondary-action-color: var(--frameless-color-petrol-70);
+    --utrecht-button-secondary-action-border-color: var(--frameless-color-petrol-70);
+    --utrecht-button-secondary-action-hover-background-color: transparent;
+    --utrecht-button-secondary-action-hover-color: var(--frameless-color-petrol-80);
+    --utrecht-button-secondary-action-hover-border-color: var(--frameless-color-petrol-80);
+    --utrecht-drawer-background-color: var(--frameless-color-petrol-10);
+
     summary {
       color: var(--utrecht-document-inverse-color);
     }

diff --git a/packages/components-react/src/MobileMenu/index.tsx b/packages/components-react/src/MobileMenu/index.tsx
@@ -18,11 +18,16 @@ export const MobileMenu = ({ className, menuItems = [], ...restProps }: MobileMe
 
   return (
     <div className={clsx(className, 'frameless-mobile-menu')} {...restProps}>
-      <Button onClick={() => setOpen(true)} aria-label="Open menu">
+      <Button onClick={() => setOpen(true)} aria-label="Open menu" appearance="secondary-action-button">
         <UtrechtIconHamburgerMenu />
       </Button>
       <Drawer open={open} align="inline-end">
-        <Button type="submit" aria-label="Sluit menu" onClick={() => setOpen(false)}>
+        <Button
+          appearance="secondary-action-button"
+          type="submit"
+          aria-label="Sluit menu"
+          onClick={() => setOpen(false)}
+        >
           <UtrechtIconClose />
         </Button>
         {menuItems.length && (

diff --git a/proprietary/design-tokens/figma/figma.tokens.json b/proprietary/design-tokens/figma/figma.tokens.json
@@ -791,12 +791,12 @@
       },
       "interaction": {
         "color": {
-          "value": "{frameless.color.maroon.30}",
+          "value": "{frameless.color.petrol.20}",
           "type": "color"
         },
         "active": {
           "color": {
-            "value": "{frameless.color.maroon.20}",
+            "value": "{frameless.color.petrol.30}",
             "type": "color"
           },
           "inverse": {
@@ -808,7 +808,7 @@
         },
         "hover": {
           "color": {
-            "value": "{frameless.color.maroon.10}",
+            "value": "{frameless.color.petrol.40}",
             "type": "color"
           },
           "inverse": {
@@ -820,7 +820,7 @@
         },
         "inverse": {
           "color": {
-            "value": "{utrecht.document.background-color}",
+            "value": "{frameless.color.white}",
             "type": "color"
           }
         }
@@ -1795,7 +1795,7 @@
           "hover": {
             "background-color": {
               "type": "color",
-              "value": "{frameless.color.gray.90}"
+              "value": "{utrecht.interaction.hover.inverse.color}"
             },
             "border-color": {
               "type": "color",