Move in oklch() from % to float since relative colors have problems w…

…ith %
hplush · Jul 20, 2024 · e755514 · e755514
1 parent fb2f02e
commit e755514
Show file tree

Hide file tree

Showing 8 changed files with 255 additions and 254 deletions.
diff --git a/package.json b/package.json
@@ -42,7 +42,7 @@
     "@types/ws": "8.5.11",
     "better-node-test": "0.5.1",
     "eslint": "9.7.0",
-    "eslint-plugin-svelte": "^2.42.0",
+    "eslint-plugin-svelte": "^2.43.0",
     "husky": "^9.1.1",
     "nano-staged": "0.8.0",
     "postcss-html": "1.7.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/web/main/colors.css b/web/main/colors.css
@@ -2,18 +2,18 @@
 
 :root {
   --focus-color: var(--blue-500);
-  --shadow-color: oklch(15% 0.1 265);
-  --fire1-color: oklch(70% 0.15 65);
-  --fire2-color: oklch(58% 0.2 29);
+  --shadow-color: oklch(0.15 0.1 265);
+  --fire1-color: oklch(0.7 0.15 65);
+  --fire2-color: oklch(0.58 0.2 29);
   --error-color: var(--red-600);
-  --accent-color: oklch(71.97% 0.152 239.92);
+  --accent-color: oklch(0.7197 0.152 239.92);
 
   @media (prefers-color-scheme: light) {
     --land-color: color-mix(in oklab, var(--neutral-100), var(--neutral-200));
     --text-color: var(--neutral-950);
     --secondary-text-color: var(--neutral-700);
     --hotkey-color: var(--neutral-400);
-    --border-color: oklch(0% 0 0 / 15%);
+    --border-color: oklch(0 0 0 / 15%);
     --hover-color: color-mix(in oklch, var(--neutral-50), var(--sand-50));
     --card-color: var(--neutral-50);
     --card-shadow:
@@ -32,25 +32,25 @@
     --dangerous-card-hover-color: color-mix(in oklab, var(--red-100), var(--sand-100));
     --dangerous-text-color: var(--red-700);
     --button-shadow:
-      0 0 0 1px oklch(0% 0 0 / 15%),
+      0 0 0 1px oklch(0 0 0 / 15%),
       inset 0 -5px 5px oklch(from var(--shadow-color) l c h / 8%);
     --button-active-shadow:
       inset 0 1px 2px oklch(from var(--shadow-color) l c h / 15%),
       inset 0 2px 5px oklch(from var(--shadow-color) l c h / 15%),
-      0 -1px oklch(0% 0 0 / 20%),
-      0 1px oklch(100% 0 0),
+      0 -1px oklch(0 0 0 / 20%),
+      0 1px oklch(1 0 0),
       inset 0 -5px 5px oklch(from var(--shadow-color) l c h / 8%);
     --button-pressed-shadow:
       inset 0 1px 1px oklch(from var(--shadow-color) l c h / 10%),
       inset 0 1px 3px oklch(from var(--shadow-color) l c h / 10%),
-      0 -1px oklch(0% 0 0 / 20%),
-      0 1px oklch(100% 0 0),
+      0 -1px oklch(0 0 0 / 20%),
+      0 1px oklch(1 0 0),
       inset 0 -5px 5px oklch(from var(--shadow-color) l c h / 8%);
     --flat-hover-color: oklch(from var(--hover-color) l c h / 40%);
     --flat-active-shadow:
       inset 0 1px 2px oklch(from var(--shadow-color) l c h / 15%),
-      0 -1px oklch(0% 0 0 / 20%);
-    --field-color: oklch(100% 0 0);
+      0 -1px oklch(0 0 0 / 20%);
+    --field-color: oklch(1 0 0);
     --field-shadow: inset 0 1px 2px oklch(from var(--shadow-color) l c h / 8%);
     --link-color: var(--blue-700);
     --link-color-visited: var(--fuchsia-700);
@@ -62,43 +62,43 @@
     --text-color: var(--neutral-50);
     --secondary-text-color: var(--neutral-600);
     --hotkey-color: var(--neutral-700);
-    --border-color: oklch(100% 0 0 / 15%);
+    --border-color: oklch(1 0 0 / 15%);
     --hover-color: color-mix(in oklch, var(--neutral-900), var(--neutral-800));
     --card-color: var(--neutral-900);
-    --card-shadow: 0 1px 2px oklch(0% 0 0), inset 0 1px oklch(100% 0 0 / 10%);
-    --card-item-above-shadow: inset 0 1px 2px oklch(0% 0 0);
+    --card-shadow: 0 1px 2px oklch(0 0 0), inset 0 1px oklch(1 0 0 / 10%);
+    --card-item-above-shadow: inset 0 1px 2px oklch(0 0 0);
     --card-item-pressed-shadow:
       inset -2px 0 0 var(--land-color),
       inset 2px 0 0 var(--land-color),
       5px 0 0 var(--land-color),
       -5px 0 0 var(--land-color),
-      inset 0 1px 2px oklch(0% 0 0);
+      inset 0 1px 2px oklch(0 0 0);
     --float-shadow:
-      0 -1px 0 oklch(0% 0 0),
-      0 0 5px oklch(0% 0 0 / 60%);
+      0 -1px 0 oklch(0 0 0),
+      0 0 5px oklch(0 0 0 / 60%);
     --dangerous-card-color: var(--red-900);
     --dangerous-card-hover-color: color-mix(in oklab, var(--red-900), var(--red-800));
     --dangerous-text-color: var(--red-200);
     --button-shadow:
-      inset 0 0 0 1px oklch(100% 0 0 / 8%),
-      inset 0 -5px 5px oklch(0% 0 0 / 20%),
-      0 1px 1px oklch(0% 0 0);
+      inset 0 0 0 1px oklch(1 0 0 / 8%),
+      inset 0 -5px 5px oklch(0 0 0 / 20%),
+      0 1px 1px oklch(0 0 0);
     --button-active-shadow:
-      inset 0 0 1px oklch(100% 0 0 / 30%),
-      inset 0 1px 2px oklch(0% 0 0 / 60%),
-      inset 0 2px 5px oklch(0% 0 0 / 60%),
-      0 1px oklch(100% 0 0 / 20%),
-      inset 0 -5px 5px oklch(0% 0 0 / 10%);
+      inset 0 0 1px oklch(1 0 0 / 30%),
+      inset 0 1px 2px oklch(0 0 0 / 60%),
+      inset 0 2px 5px oklch(0 0 0 / 60%),
+      0 1px oklch(1 0 0 / 20%),
+      inset 0 -5px 5px oklch(0 0 0 / 10%);
     --button-pressed-shadow:
-      inset 0 0 1px oklch(100% 0 0 / 30%),
-      inset 0 1px 1px oklch(0% 0 0 / 50%),
-      inset 0 1px 4px oklch(0% 0 0 / 50%),
-      0 1px oklch(100% 0 0 / 20%),
-      inset 0 -5px 5px oklch(0% 0 0 / 20%);
+      inset 0 0 1px oklch(1 0 0 / 30%),
+      inset 0 1px 1px oklch(0 0 0 / 50%),
+      inset 0 1px 4px oklch(0 0 0 / 50%),
+      0 1px oklch(1 0 0 / 20%),
+      inset 0 -5px 5px oklch(0 0 0 / 20%);
     --flat-hover-color: oklch(from var(--hover-color) l c h / 30%);
-    --flat-active-shadow: inset 0 1px 2px oklch(0% 0 0 / 80%);
+    --flat-active-shadow: inset 0 1px 2px oklch(0 0 0 / 80%);
     --field-color: color-mix(in oklch, var(--neutral-900), var(--neutral-800));
-    --field-shadow: inset 0 1px 2px oklch(0% 0 0 / 60%);
+    --field-shadow: inset 0 1px 2px oklch(0 0 0 / 60%);
     --link-color: var(--blue-400);
     --link-color-visited: var(--fuchsia-400);
     --inline-code-color: oklch(from var(--zinc-800) l c h / 60%);

diff --git a/web/main/index.css b/web/main/index.css
@@ -21,7 +21,7 @@
 body {
   color: var(--text-color);
   background: var(--land-color);
-  -webkit-tap-highlight-color: oklch(0% 0 0 / 0%);
+  -webkit-tap-highlight-color: oklch(0 0 0 / 0%);
 }
 
 body,

diff --git a/web/package.json b/web/package.json
@@ -39,29 +39,29 @@
     "nanoid": "5.0.7",
     "nanostores": "0.10.3",
     "postcss": "8.4.39",
-    "rollup": "4.18.1",
+    "rollup": "4.19.0",
     "svelte": "4.2.18",
     "svelte-preprocess": "6.0.2",
     "tsx": "4.16.2",
     "vite": "5.3.4"
   },
   "devDependencies": {
-    "@logux/stylelint-config": "0.19.0",
+    "@logux/stylelint-config": "0.20.0",
     "@size-limit/file": "11.1.4",
     "@storybook/addon-svelte-csf": "4.1.4",
-    "@storybook/addon-themes": "8.2.4",
-    "@storybook/addon-viewport": "8.2.4",
-    "@storybook/svelte": "8.2.4",
-    "@storybook/svelte-vite": "8.2.4",
-    "@storybook/types": "^8.2.4",
+    "@storybook/addon-themes": "8.2.5",
+    "@storybook/addon-viewport": "8.2.5",
+    "@storybook/svelte": "8.2.5",
+    "@storybook/svelte-vite": "8.2.5",
+    "@storybook/types": "^8.2.5",
     "@stylistic/stylelint-config": "1.0.1",
     "better-node-test": "0.5.1",
     "browserslist": "4.23.2",
     "postcss-html": "1.7.0",
     "postcss-nesting": "12.1.5",
     "postcss-selector-parser": "6.1.1",
     "size-limit": "11.1.4",
-    "storybook": "8.2.4",
+    "storybook": "8.2.5",
     "stylelint": "16.7.0",
     "stylelint-use-logical": "2.1.2"
   }

diff --git a/web/pages/feeds/import.svelte b/web/pages/feeds/import.svelte
@@ -155,13 +155,13 @@
 
   .feeds-import_unloaded,
   .feeds-import_loading {
-    padding-left: var(--padding-xl);
+    padding-inline-start: var(--padding-xl);
     margin-bottom: var(--padding-xl);
   }
 
   .feeds-import_loading {
+    padding-inline-start: 0;
     list-style: none;
-    padding-left: 0;
   }
 
   .feeds-import_loading li {
@@ -175,20 +175,21 @@
   }
 
   .feeds-import_item-loader {
+    box-sizing: border-box;
+    display: inline-block;
     width: 12px;
     height: 12px;
-    border: 1px solid #000;
-    border-bottom-color: transparent;
+    border: 1px solid oklch(0 0 0);
+    border-block-end-color: transparent;
     border-radius: 50%;
-    display: inline-block;
-    box-sizing: border-box;
-    animation: rotation 1s linear infinite;
+    animation: --import-rotation 1s linear infinite;
   }
 
-  @keyframes rotation {
+  @keyframes --import-rotation {
     0% {
       transform: rotate(0deg);
     }
+
     100% {
       transform: rotate(360deg);
     }

diff --git a/web/pages/feeds/list.svelte b/web/pages/feeds/list.svelte
@@ -86,7 +86,7 @@
 
   .feeds-list_label span {
     max-width: 100%;
-    margin-left: var(--padding-s);
+    margin-inline-start: var(--padding-s);
     overflow: hidden;
     text-overflow: ellipsis;
   }

diff --git a/web/ui/navbar/fireplace.svelte b/web/ui/navbar/fireplace.svelte
@@ -25,8 +25,8 @@
     --icon-move: -8px -5px;
 
     position: absolute;
+    inset-inline-start: 5px;
     top: 8px;
-    left: 5px;
     width: 6px;
     height: 6px;
     overflow: hidden;
@@ -50,8 +50,8 @@
   :global(a:hover) .navbar-fireplace::after,
   :global(a:focus-visible) .navbar-fireplace::after {
     position: absolute;
+    inset-inline-start: 5px;
     top: 8.5px;
-    left: 5px;
     width: 6px;
     height: 5.5px;
     content: '';