@diskette/palette 0.14.0 → 0.16.0

package/dist/colors/sky.d.ts

@@ -25,7 +25,6 @@ declare const _default: {
             skyA10: string;
             skyA11: string;
             skyA12: string;
-            surface: string;
         };
         dark: {
             sky1: string;
@@ -52,7 +51,6 @@ declare const _default: {
             skyA10: string;
             skyA11: string;
             skyA12: string;
-            surface: string;
         };
     };
     p3: {
@@ -81,7 +79,6 @@ declare const _default: {
             skyA10: string;
             skyA11: string;
             skyA12: string;
-            surface: string;
         };
         dark: {
             sky1: string;
@@ -108,7 +105,6 @@ declare const _default: {
             skyA10: string;
             skyA11: string;
             skyA12: string;
-            surface: string;
         };
     };
     contrast: string;
@@ -124,6 +120,6 @@ declare const _default: {
             dark: string;
         };
     };
-    name: string;
+    name: "sky";
 };
 export default _default;

package/dist/colors/sky.js

@@ -25,7 +25,6 @@ export default {
             skyA10: '#00bcf38b',
             skyA11: '#00749e',
             skyA12: '#002540e2',
-            surface: '#eef9fdcc',
         },
         dark: {
             sky1: '#0d141f',
@@ -52,7 +51,6 @@ export default {
             skyA10: '#a8eeff',
             skyA11: '#7cd3ffef',
             skyA12: '#c2f3ff',
-            surface: '#13233b80',
         },
     },
     p3: {
@@ -81,7 +79,6 @@ export default {
             skyA10: 'color(display-p3 0.004 0.647 0.914 / 0.444)',
             skyA11: 'color(display-p3 0.193 0.448 0.605)',
             skyA12: 'color(display-p3 0.145 0.241 0.329)',
-            surface: 'color(display-p3 0.9412 0.9765 0.9843 / 0.8)',
         },
         dark: {
             sky1: 'color(display-p3 0.056 0.078 0.116)',
@@ -108,7 +105,6 @@ export default {
             skyA10: 'color(display-p3 0.722 0.933 1 / 0.992)',
             skyA11: 'color(display-p3 0.536 0.772 0.924)',
             skyA12: 'color(display-p3 0.799 0.947 0.993)',
-            surface: 'color(display-p3 0.0863 0.1333 0.2196 / 0.5)',
         },
     },
     contrast: '#1c2024',

package/dist/colors/slate.d.ts

@@ -25,7 +25,6 @@ declare const _default: {
             slateA10: string;
             slateA11: string;
             slateA12: string;
-            surface: string;
         };
         dark: {
             slate1: string;
@@ -52,7 +51,6 @@ declare const _default: {
             slateA10: string;
             slateA11: string;
             slateA12: string;
-            surface: string;
         };
     };
     p3: {
@@ -81,7 +79,6 @@ declare const _default: {
             slateA10: string;
             slateA11: string;
             slateA12: string;
-            surface: string;
         };
         dark: {
             slate1: string;
@@ -108,7 +105,6 @@ declare const _default: {
             slateA10: string;
             slateA11: string;
             slateA12: string;
-            surface: string;
         };
     };
     contrast: string;
@@ -124,6 +120,6 @@ declare const _default: {
             dark: string;
         };
     };
-    name: string;
+    name: "slate";
 };
 export default _default;

package/dist/colors/slate.js

@@ -25,7 +25,6 @@ export default {
             slateA10: '#00071b7f',
             slateA11: '#0007149f',
             slateA12: '#000509e3',
-            surface: '#ffffffcc',
         },
         dark: {
             slate1: '#111113',
@@ -52,7 +51,6 @@ export default {
             slateA10: '#e5edfd7b',
             slateA11: '#f1f7feb5',
             slateA12: '#fcfdffef',
-            surface: '#1f212380',
         },
     },
     p3: {
@@ -81,7 +79,6 @@ export default {
             slateA10: 'color(display-p3 0.004 0.027 0.098 / 0.499)',
             slateA11: 'color(display-p3 0 0.02 0.063 / 0.62)',
             slateA12: 'color(display-p3 0 0.012 0.031 / 0.887)',
-            surface: 'color(display-p3 1 1 1 / 0.8)',
         },
         dark: {
             slate1: 'color(display-p3 0.067 0.067 0.074)',
@@ -108,7 +105,6 @@ export default {
             slateA10: 'color(display-p3 0.918 0.945 1 / 0.475)',
             slateA11: 'color(display-p3 0.949 0.969 0.996 / 0.708)',
             slateA12: 'color(display-p3 0.988 0.992 1 / 0.937)',
-            surface: 'color(display-p3 0.1176 0.1255 0.1333 / 0.5)',
         },
     },
     contrast: 'white',

package/dist/colors/teal.d.ts

@@ -25,7 +25,6 @@ declare const _default: {
             tealA10: string;
             tealA11: string;
             tealA12: string;
-            surface: string;
         };
         dark: {
             teal1: string;
@@ -52,7 +51,6 @@ declare const _default: {
             tealA10: string;
             tealA11: string;
             tealA12: string;
-            surface: string;
         };
     };
     p3: {
@@ -81,7 +79,6 @@ declare const _default: {
             tealA10: string;
             tealA11: string;
             tealA12: string;
-            surface: string;
         };
         dark: {
             teal1: string;
@@ -108,7 +105,6 @@ declare const _default: {
             tealA10: string;
             tealA11: string;
             tealA12: string;
-            surface: string;
         };
     };
     contrast: string;
@@ -124,6 +120,6 @@ declare const _default: {
             dark: string;
         };
     };
-    name: string;
+    name: "teal";
 };
 export default _default;

package/dist/colors/teal.js

@@ -25,7 +25,6 @@ export default {
             tealA10: '#009684f2',
             tealA11: '#008573',
             tealA12: '#00332df2',
-            surface: '#f0faf8cc',
         },
         dark: {
             teal1: '#0d1514',
@@ -52,7 +51,6 @@ export default {
             tealA10: '#0dffe0ae',
             tealA11: '#0afed5d6',
             tealA12: '#b8ffebef',
-            surface: '#13272580',
         },
     },
     p3: {
@@ -81,7 +79,6 @@ export default {
             tealA10: 'color(display-p3 0 0.451 0.369 / 0.726)',
             tealA11: 'color(display-p3 0.08 0.5 0.43)',
             tealA12: 'color(display-p3 0.11 0.235 0.219)',
-            surface: 'color(display-p3 0.9451 0.9804 0.9725 / 0.8)',
         },
         dark: {
             teal1: 'color(display-p3 0.059 0.083 0.079)',
@@ -108,7 +105,6 @@ export default {
             tealA10: 'color(display-p3 0.439 0.996 0.89 / 0.669)',
             tealA11: 'color(display-p3 0.388 0.835 0.719)',
             tealA12: 'color(display-p3 0.734 0.934 0.87)',
-            surface: 'color(display-p3 0.0863 0.149 0.1412 / 0.5)',
         },
     },
     contrast: 'white',

package/dist/colors/tomato.d.ts

@@ -25,7 +25,6 @@ declare const _default: {
             tomatoA10: string;
             tomatoA11: string;
             tomatoA12: string;
-            surface: string;
         };
         dark: {
             tomato1: string;
@@ -52,7 +51,6 @@ declare const _default: {
             tomatoA10: string;
             tomatoA11: string;
             tomatoA12: string;
-            surface: string;
         };
     };
     p3: {
@@ -81,7 +79,6 @@ declare const _default: {
             tomatoA10: string;
             tomatoA11: string;
             tomatoA12: string;
-            surface: string;
         };
         dark: {
             tomato1: string;
@@ -108,7 +105,6 @@ declare const _default: {
             tomatoA10: string;
             tomatoA11: string;
             tomatoA12: string;
-            surface: string;
         };
     };
     contrast: string;
@@ -124,6 +120,6 @@ declare const _default: {
             dark: string;
         };
     };
-    name: string;
+    name: "tomato";
 };
 export default _default;

package/dist/colors/tomato.js

@@ -25,7 +25,6 @@ export default {
             tomatoA10: '#d72400da',
             tomatoA11: '#cd2200ea',
             tomatoA12: '#460900e0',
-            surface: '#fff6f5cc',
         },
         dark: {
             tomato1: '#181111',
@@ -52,7 +51,6 @@ export default {
             tomatoA10: '#ff6847eb',
             tomatoA11: '#ff977d',
             tomatoA12: '#ffd6cefb',
-            surface: '#2d191580',
         },
     },
     p3: {
@@ -81,7 +79,6 @@ export default {
             tomatoA10: 'color(display-p3 0.757 0.141 0 / 0.8)',
             tomatoA11: 'color(display-p3 0.755 0.259 0.152)',
             tomatoA12: 'color(display-p3 0.335 0.165 0.132)',
-            surface: 'color(display-p3 0.9922 0.9647 0.9608 / 0.8)',
         },
         dark: {
             tomato1: 'color(display-p3 0.09 0.068 0.067)',
@@ -108,7 +105,6 @@ export default {
             tomatoA10: 'color(display-p3 1 0.478 0.341 / 0.853)',
             tomatoA11: 'color(display-p3 1 0.585 0.455)',
             tomatoA12: 'color(display-p3 0.959 0.833 0.802)',
-            surface: 'color(display-p3 0.1569 0.0941 0.0784 / 0.5)',
         },
     },
     contrast: 'white',

package/dist/colors/violet.d.ts

@@ -25,7 +25,6 @@ declare const _default: {
             violetA10: string;
             violetA11: string;
             violetA12: string;
-            surface: string;
         };
         dark: {
             violet1: string;
@@ -52,7 +51,6 @@ declare const _default: {
             violetA10: string;
             violetA11: string;
             violetA12: string;
-            surface: string;
         };
     };
     p3: {
@@ -81,7 +79,6 @@ declare const _default: {
             violetA10: string;
             violetA11: string;
             violetA12: string;
-            surface: string;
         };
         dark: {
             violet1: string;
@@ -108,7 +105,6 @@ declare const _default: {
             violetA10: string;
             violetA11: string;
             violetA12: string;
-            surface: string;
         };
     };
     contrast: string;
@@ -124,6 +120,6 @@ declare const _default: {
             dark: string;
         };
     };
-    name: string;
+    name: "violet";
 };
 export default _default;

package/dist/colors/violet.js

@@ -25,7 +25,6 @@ export default {
             violetA10: '#2300abb2',
             violetA11: '#1f0099af',
             violetA12: '#0b0043d9',
-            surface: '#f9f6ffcc',
         },
         dark: {
             violet1: '#14121f',
@@ -52,7 +51,6 @@ export default {
             violetA10: '#9176fed7',
             violetA11: '#baa7ff',
             violetA12: '#e3defffe',
-            surface: '#25193980',
         },
     },
     p3: {
@@ -81,7 +79,6 @@ export default {
             violetA10: 'color(display-p3 0.11 0 0.627 / 0.695)',
             violetA11: 'color(display-p3 0.383 0.317 0.702)',
             violetA12: 'color(display-p3 0.179 0.15 0.359)',
-            surface: 'color(display-p3 0.9725 0.9647 0.9961 / 0.8)',
         },
         dark: {
             violet1: 'color(display-p3 0.077 0.071 0.118)',
@@ -108,7 +105,6 @@ export default {
             violetA10: 'color(display-p3 0.576 0.482 1 / 0.811)',
             violetA11: 'color(display-p3 0.72 0.65 1)',
             violetA12: 'color(display-p3 0.883 0.867 0.986)',
-            surface: 'color(display-p3 0.1333 0.102 0.2118 / 0.5)',
         },
     },
     contrast: 'white',

package/dist/colors/yellow.d.ts

@@ -25,7 +25,6 @@ declare const _default: {
             yellowA10: string;
             yellowA11: string;
             yellowA12: string;
-            surface: string;
         };
         dark: {
             yellow1: string;
@@ -52,7 +51,6 @@ declare const _default: {
             yellowA10: string;
             yellowA11: string;
             yellowA12: string;
-            surface: string;
         };
     };
     p3: {
@@ -81,7 +79,6 @@ declare const _default: {
             yellowA10: string;
             yellowA11: string;
             yellowA12: string;
-            surface: string;
         };
         dark: {
             yellow1: string;
@@ -108,7 +105,6 @@ declare const _default: {
             yellowA10: string;
             yellowA11: string;
             yellowA12: string;
-            surface: string;
         };
     };
     contrast: string;
@@ -124,6 +120,6 @@ declare const _default: {
             dark: string;
         };
     };
-    name: string;
+    name: "yellow";
 };
 export default _default;

package/dist/colors/yellow.js

@@ -25,7 +25,6 @@ export default {
             yellowA10: '#ffdc00',
             yellowA11: '#9e6c00',
             yellowA12: '#2e2000e0',
-            surface: '#fefbe4cc',
         },
         dark: {
             yellow1: '#14120b',
@@ -52,7 +51,6 @@ export default {
             yellowA10: '#ffff57',
             yellowA11: '#fee949f5',
             yellowA12: '#fef6baf6',
-            surface: '#231f1380',
         },
     },
     p3: {
@@ -81,7 +79,6 @@ export default {
             yellowA10: 'color(display-p3 0.969 0.812 0 / 0.71)',
             yellowA11: 'color(display-p3 0.6 0.44 0)',
             yellowA12: 'color(display-p3 0.271 0.233 0.137)',
-            surface: 'color(display-p3 0.9961 0.9922 0.902 / 0.8)',
         },
         dark: {
             yellow1: 'color(display-p3 0.078 0.069 0.047)',
@@ -108,7 +105,6 @@ export default {
             yellowA10: 'color(display-p3 1 1 0.455)',
             yellowA11: 'color(display-p3 0.948 0.885 0.392)',
             yellowA12: 'color(display-p3 0.959 0.934 0.731)',
-            surface: 'color(display-p3 0.1333 0.1176 0.0706 / 0.5)',
         },
     },
     contrast: '#21201c',

package/dist/css.d.ts

@@ -1,4 +1,4 @@
-import type { AnyPalette } from './types.ts';
+import type { AnyColorScale } from './types.ts';
 type AlphaConfig = {
     srgb: Record<string, string>;
     p3: Record<string, string>;
@@ -9,7 +9,7 @@ type PaletteOptions = {
     /** Include alpha scale variables (e.g., --amber-a1). Defaults to false */
     alpha?: boolean;
 };
-declare function palette(name: string, config: AnyPalette, options?: PaletteOptions): string;
+declare function palette(name: string, config: AnyColorScale, options?: PaletteOptions): string;
 declare function alpha(config: AlphaConfig): string;
 declare function accents(colorNames: string[]): string;
 declare function grays(names: readonly string[], className: string): string;
@@ -24,7 +24,7 @@ export declare const css: {
      */
     alpha: typeof alpha;
     /**
-     * Generate CSS for accent color data attribute selectors
+     * Generate CSS for accent color datas attribute selectors
      */
     accents: typeof accents;
     /**

package/dist/css.js

@@ -119,6 +119,13 @@ function tailwind(colorNames) {
         }
         blocks.push(declarations.join(';\n  '));
     }
+    const focus = [];
+    const focusAlpha = [];
+    for (const n of steps) {
+        focus.push(`--color-focus-${n}: var(--accent-${n})`);
+        focusAlpha.push(`--color-focus-a${n}: var(--accent-a${n})`);
+    }
+    blocks.push(focus.join(';\n'), focusAlpha.join(';\n'));
     return `@theme inline {\n  ${blocks.join(';\n\n  ')};\n}\n`;
 }
 export const css = {
@@ -131,7 +138,7 @@ export const css = {
      */
     alpha,
     /**
-     * Generate CSS for accent color data attribute selectors
+     * Generate CSS for accent color datas attribute selectors
      */
     accents,
     /**