End to end working now

mcnuttandrew · Mar 12, 2024 · d473b0d · d473b0d
1 parent 4d3a7ec
commit d473b0d
Show file tree

Hide file tree

Showing 28 changed files with 598 additions and 199 deletions.
diff --git a/netlify/functions/suggest-lint.ts b/netlify/functions/suggest-lint.ts
@@ -26,8 +26,8 @@ Conjunctions:
 {not: EXPR}
 
 Quantifiers
-{all: {varbs: Variable[], predicate: EXPR, where?: EXPR, in: "colors"}}
-{exist: {varbs: Variable[], predicate: EXPR, where?: EXPR, in: "colors"}}
+{all: {varbs: Variable, predicate: EXPR, where?: EXPR, in: Variable | Map}}
+{exist: {varbs: Variable, predicate: EXPR, where?: EXPR, in: Variable | Map}}
 Notes:
 
 - varbs each listed variable into the scope, as well as variables like index(a) for a variable a
@@ -68,13 +68,14 @@ Aggregates
 {extent: Variable | Number[]}
 
 Color Manipulations:
-{toColor: Variable, space: 'lab' | 'hsl' | etc, channel: 'a' | 'b' | 'l' | etc}
+{toSpace: Variable, space: 'lab' | 'hsl' | etc, channel: 'a' | 'b' | 'l' | etc}
 {cvdSim: Variable, type: 'protanomaly' | 'deuteranomaly' | 'tritanopia' | 'grayscale'}
 {name: Variable}
 {inGamut: Variable | Color}
+{isTag: Variable | Color, value: string}
 Notes
 
-- toColor has a shorthand like {"rgb.b": Variable}
+- toSpace has a shorthand like {"rgb.b": Variable}
 - When comparing colors, it can be helpful to switch color spaces. For instance, to check if a value is blue you might switch it to HSL and check if the hue is in a certain range.
 
 Maps:

diff --git a/public/lang-docs.md b/public/lang-docs.md
@@ -28,7 +28,7 @@ Quantifiers
 Notes:
 
 - varbs each listed variable into the scope, as well as variables like index(a) for a variable a
-- To slice you might do something like {...where: {"<" : {left: "index(a), right: 3}}}. This is important! There is no other way to subset or filter for quantifiers. THE IN CLAUSE MUST ONLY HAVE A VARIABLE AND THING ELSE.
+- To slice you might do something like {...where: {"<" : {"left": "index(a)", "right": 3}}}. This is important! There is no other way to subset or filter for quantifiers. THE IN CLAUSE MUST ONLY HAVE A VARIABLE AND THING ELSE.
 
 Comparisons:
 {"==": {left: Value, right: Value}}
@@ -65,13 +65,14 @@ Aggregates
 {extent: Variable | Number[]}
 
 Color Manipulations:
-{toColor: Variable, space: 'lab' | 'hsl' | etc, channel: 'a' | 'b' | 'l' | etc}
+{toSpace: Variable, space: 'lab' | 'hsl' | etc, channel: 'a' | 'b' | 'l' | etc}
 {cvdSim: Variable, type: 'protanomaly' | 'deuteranomaly' | 'tritanopia' | 'grayscale'}
 {name: Variable}
 {inGamut: Variable | Color}
+{isTag: Variable | Color, value: string}
 Notes
 
-- toColor has a shorthand like {"rgb.b": Variable}
+- toSpace has a shorthand like {"rgb.b": Variable}
 - When comparing colors, it can be helpful to switch color spaces. For instance, to check if a value is blue you might switch it to HSL and check if the hue is in a certain range.
 
 Maps:
@@ -278,7 +279,7 @@ Program:
 
 
 
-### Colorblind Friendly for deuteranopia
+### CVD: deuteranopia Friendly
 
 Description: All colors in a palette should be differentiable by people with deuteranopia (ie can't see green). This is because if they are not, then they will not be differentiable from each other in some contexts.
 
@@ -322,7 +323,7 @@ Program:
 
 
 
-### Colorblind Friendly for protanopia
+### CVD: protanopia Friendly
 
 Description: All colors in a palette should be differentiable by people with protanopia (ie can't see red). This is because if they are not, then they will not be differentiable from each other in some contexts.
 
@@ -366,7 +367,7 @@ Program:
 
 
 
-### Colorblind Friendly for tritanopia
+### CVD: tritanopia Friendly
 
 Description: All colors in a palette should be differentiable by people with tritanopia (ie can't see blue). This is because if they are not, then they will not be differentiable from each other in some contexts.
 
@@ -454,6 +455,87 @@ Program:
 
 
 
+### Axes should have low contrast with background
+
+Description: Axes should have low contrast with the background. Having it too high can make the axes too distracting. See "Whisper, Don't Scream: Grids and Transparency" for more.
+
+Natural Language: ALL a in colors WHERE isTag(a, axis), contrast(a, background, Lstar) < 20
+
+Palettes that will fail this test:
+
+- #000 (axis) with a #fff background
+
+
+
+Palettes that will pass this test:
+
+- #eee (axis) with a #fff background
+
+
+Program:
+
+```json
+{
+    "$schema": "http://localhost:3000/lint-schema.json", 
+    "all": {
+        "in": "colors", 
+        "varb": "a", 
+        "where": {"isTag": "a", "value": "axis"}, 
+        "predicate": {
+            "<": {
+                "left": { "contrast": {"left": "a", "right": "background"}, "algorithm": "Lstar" }, 
+                "right": 20
+            }
+        }
+    }
+}
+
+```
+
+
+
+
+
+### Blue should be high probability for the basic color term blue
+
+Description: Blue should be high probability for the basic color term blue. If it's not, it can be confusing to users.
+
+Natural Language: ALL a in colors WHERE isTag(a, blue), name(a) == blue
+
+Palettes that will fail this test:
+
+- #f00 (blue), #ffa500 with a #fff background
+
+
+
+Palettes that will pass this test:
+
+- #00f (blue), #f00, #ffa500 with a #fff background
+
+- #00f, #f00, #ffa500 with a #fff background
+
+
+Program:
+
+```json
+{
+    "$schema": "http://localhost:3000/lint-schema.json", 
+    "all": {
+        "in": "colors", 
+        "varb": "a", 
+        "where": {"isTag": "a", "value": "blue"}, 
+        "predicate": {
+            "==": { "left": {"name": "a"}, "right": "blue" }
+        }
+    }
+}
+
+```
+
+
+
+
+
 ### Fair
 
 Description: Do the colors stand out equally? A color palette is described as fair if both chroma and luminance ranges are below a certain threshold and unfair if one of them is above a certain threshold.

diff --git a/public/lint-schema.json b/public/lint-schema.json
@@ -186,13 +186,14 @@
                     "properties": {
                         "channel": {"$ref": "#/definitions/ColorChannel"}, 
                         "space": {"$ref": "#/definitions/ColorSpace"}, 
-                        "toColor": {
+                        "toSpace": {
                             "anyOf": [ {"$ref": "#/definitions/LintVariable"}, {"$ref": "#/definitions/LintColor"} ]
                         }
                     }, 
-                    "required": ["toColor", "space", "channel"], 
+                    "required": ["toSpace", "space", "channel"], 
                     "type": "object"
                 }, 
+                {"$ref": "#/definitions/LintColorTagCheck"}, 
                 {
                     "additionalProperties": {
                         "anyOf": [ {"$ref": "#/definitions/LintVariable"}, {"type": "string"} ]
@@ -213,6 +214,17 @@
             "required": ["cvdSim", "type"], 
             "type": "object"
         }, 
+        "LintColorTagCheck": {
+            "additionalProperties": false, 
+            "properties": {
+                "isTag": {
+                    "anyOf": [ {"$ref": "#/definitions/LintVariable"}, {"$ref": "#/definitions/LintColor"} ]
+                }, 
+                "value": {"type": "string"}
+            }, 
+            "required": ["isTag", "value"], 
+            "type": "object"
+        }, 
         "LintComparison": {
             "anyOf": [
                 {
@@ -363,10 +375,11 @@
         }, 
         "LintExpression": {
             "anyOf": [
-                {"$ref": "#/definitions/LintConjunction"}, 
-                {"$ref": "#/definitions/LintQuantifier" }, 
-                {"$ref": "#/definitions/LintComparison" }, 
-                {"$ref": "#/definitions/LintBoolean"    }  
+                {"$ref": "#/definitions/LintConjunction"  }, 
+                {"$ref": "#/definitions/LintQuantifier"   }, 
+                {"$ref": "#/definitions/LintComparison"   }, 
+                {"$ref": "#/definitions/LintBoolean"      }, 
+                {"$ref": "#/definitions/LintColorTagCheck"}  
             ], 
             "description": "A LintExpression is a JSON object that represents a logical expression. It is used to express a condition that is evaluated to a boolean value. It can be a conjunction, a quantifier, a comparison or a boolean value."
         }, 
@@ -375,7 +388,7 @@
                 {
                     "additionalProperties": false, 
                     "properties": {
-                        "filter": {"$ref": "#/definitions/alias-1448761563-3904-3965-1448761563-0-6322"}, 
+                        "filter": {"$ref": "#/definitions/alias-1448761563-3892-3953-1448761563-0-6459"}, 
                         "func"  : {"$ref": "#/definitions/LintExpression"}                              , 
                         "varb"  : {"type": "string"}                                                      
                     }, 
@@ -386,7 +399,7 @@
                     "additionalProperties": false, 
                     "properties": {
                         "func": {"$ref": "#/definitions/LintValue"}                                   , 
-                        "map" : {"$ref": "#/definitions/alias-1448761563-3904-3965-1448761563-0-6322"}, 
+                        "map" : {"$ref": "#/definitions/alias-1448761563-3892-3953-1448761563-0-6459"}, 
                         "varb": {"type": "string"}                                                      
                     }, 
                     "required": ["map", "func", "varb"], 
@@ -395,7 +408,7 @@
                 {
                     "additionalProperties": false, 
                     "properties": {
-                        "reverse": {"$ref": "#/definitions/alias-1448761563-3904-3965-1448761563-0-6322"}
+                        "reverse": {"$ref": "#/definitions/alias-1448761563-3892-3953-1448761563-0-6459"}
                     }, 
                     "required": ["reverse"], 
                     "type": "object"
@@ -404,15 +417,15 @@
                     "additionalProperties": false, 
                     "properties": {
                         "func": {"$ref": "#/definitions/LintValue"}                                   , 
-                        "sort": {"$ref": "#/definitions/alias-1448761563-3904-3965-1448761563-0-6322"}, 
+                        "sort": {"$ref": "#/definitions/alias-1448761563-3892-3953-1448761563-0-6459"}, 
                         "varb": {"type": "string"}                                                      
                     }, 
                     "required": ["sort", "func", "varb"], 
                     "type": "object"
                 }, 
                 {
                     "additionalProperties": false, 
-                    "properties": { "speed": {"$ref": "#/definitions/alias-1448761563-3904-3965-1448761563-0-6322"} }, 
+                    "properties": { "speed": {"$ref": "#/definitions/alias-1448761563-3892-3953-1448761563-0-6459"} }, 
                     "required": ["speed"], 
                     "type": "object"
                 }
@@ -727,7 +740,7 @@
             "description": "A LintValue is a JSON object that represents a value. It can be a string, a number, a boolean, a LintColor, a LintVariable, a LintMathOps, a LintPairOps, a LintAggregate, a LintColorFunction or a LintExpression"
         }, 
         "LintVariable": {"type": "string"}, 
-        "alias-1448761563-3904-3965-1448761563-0-6322": {
+        "alias-1448761563-3892-3953-1448761563-0-6459": {
             "anyOf": [
                 {"$ref": "#/definitions/LintVariable"}                           , 
                 { "items": {"$ref": "#/definitions/LintValue"}, "type": "array" }, 

diff --git a/src/components/PalPreview.svelte b/src/components/PalPreview.svelte
@@ -9,6 +9,8 @@
   import { dealWithFocusEvent } from "../lib/utils";
 
   $: focusSet = new Set($focusStore.focusedColors);
+  $: bgLum = pal.background.luminance();
+  $: textColor = bgLum > 0.4 ? "#00000066" : "#ffffffaa";
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -19,7 +21,7 @@
   on:click={() => focusStore.clearColors()}
 >
   {#each pal.colors as color, idx}
-    <div class="flex flex-col text-center">
+    <div class="flex flex-col text-center relative items-center">
       {#if allowModification}
         <button
           on:click|stopPropagation|preventDefault={(e) =>
@@ -29,7 +31,6 @@
           class={"w-6 h-6 mx-2 rounded-full transition-all"}
           class:w-8={highlightSelected && focusSet.has(idx)}
           class:h-8={highlightSelected && focusSet.has(idx)}
-          class:mb-3={highlightSelected && !focusSet.has(idx)}
           style="background-color: {color.color.toDisplay()}"
         ></button>
       {:else}
@@ -41,8 +42,11 @@
         ></div>
       {/if}
       {#if showTags}
-        <div class="flex flex-col text-center">
-          {#each color.tags as tag, idx}
+        <div
+          class="flex flex-col text-center pointer-events-none"
+          style={`color: ${textColor}`}
+        >
+          {#each color.tags as tag}
             <div class="text-xs">{tag}</div>
           {/each}
         </div>

diff --git a/src/content-modules/MainColumn.svelte b/src/content-modules/MainColumn.svelte
@@ -14,7 +14,7 @@
   import Nav from "../components/Nav.svelte";
   import PalPreview from "../components/PalPreview.svelte";
   import SetColorSpace from "../controls/SetColorSpace.svelte";
-  import simulate_cvd from "../lib/blindness";
+  import simulate_cvd from "../lib/cvd-sim";
 
   import ContentEditable from "../components/ContentEditable.svelte";