lapikit 0.7.1 → 0.7.2

package/dist/@types/props.d.ts

@@ -9,3 +9,8 @@ export interface ElevationState {
     active?: ElevationType;
 }
 export type ElevationProps = ElevationType | ElevationState;
+export interface ColorState {
+    base?: string;
+    active?: string;
+}
+export type ColorProps = string | ColorState;

package/dist/components/app/app.svelte

@@ -45,6 +45,7 @@
   --kit-shape-lg: 0.875rem;
   --kit-shape-xl: 1.125rem;
   --kit-shape-full: 9999px;
+  --kit-animation-component: 150ms;
 }
 
 :global html {

package/dist/labs/sheet/sheet.svelte

@@ -3,7 +3,6 @@
 	 * Sheet component
 	 * @description A simple sheet component for experimentation for developers Lapikit. Please don't use it in production.
 	 */
-
 	import { useComponentAttrs, useElevation } from '../../utils';
 
 	let {
@@ -14,14 +13,16 @@
 		's-style': sStyle,
 		elevation,
 		rounded,
+		variant = 'filled',
 		active,
+		color,
 		...rest
 	} = $props();
 
+	// states
 	let attrs = $derived(
-		useComponentAttrs('kit-sheet', { className, sClass, styleAttr, sStyle }, rest)
+		useComponentAttrs('kit-sheet', { className, sClass, styleAttr, sStyle, color, active }, rest)
 	);
-
 	let elevationState = $derived(useElevation(elevation));
 </script>
 
@@ -29,25 +30,86 @@
 	class={attrs.class}
 	style={attrs.style}
 	data-rounded={rounded}
+	data-variant={variant}
 	data-elevation={elevationState.base}
 	data-elevation-hover={elevationState.hover}
 	data-elevation-active={elevationState.active}
 	data-active={active}
 	{...attrs.rest}
 >
-	{@render children()}
+	{@render children?.()}
 </div>
 
 <style>.kit-sheet {
+  --kit-sheet-color: initial;
+  --kit-sheet-on-color: initial;
+  --kit-sheet-active-fg: initial;
+  --kit-sheet-active-shade: initial;
+  --kit-sheet-bg: var(--kit-sheet-color, var(--kit-color-surface-1));
+  --kit-sheet-fg: var(--kit-sheet-on-color, var(--kit-sheet-contrast, var(--kit-color-text)));
+  --kit-sheet-ink: var(--kit-sheet-color, var(--kit-color-text));
+  --kit-sheet-hover: color-mix(in oklab, var(--kit-sheet-bg), var(--kit-sheet-fg) 8%);
+  --kit-sheet-pressed: color-mix(in oklab, var(--kit-sheet-bg), var(--kit-sheet-fg) 14%);
+  --kit-sheet-soft: color-mix(in oklab, var(--kit-sheet-bg) 16%, transparent);
+  --kit-sheet-border: color-mix(in oklab, var(--kit-sheet-bg), var(--kit-sheet-fg) 20%);
+  --kit-sheet-active: color-mix(
+  	in oklab,
+  	var(--kit-sheet-color),
+  	var(--kit-sheet-fg) var(--kit-sheet-active-shade, 14%)
+  );
+}
+@supports (color: color(from red srgb-linear r g b)) {
+  .kit-sheet {
+    --kit-sheet-contrast: color(from var(--kit-sheet-color) srgb-linear clamp(0, (0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1) clamp(0, (0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1) clamp(0, (0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1)/1);
+  }
+}
+.kit-sheet {
   display: flex;
-  background-color: var(--kit-color-surface-1);
-  color: var(--kit-color-text);
+  background-color: var(--kit-sheet-bg);
+  color: var(--kit-sheet-fg);
   border-radius: var(--kit-sheet-radius);
+  transition-property: background-color, color, border-color, box-shadow;
+  transition-duration: var(--kit-animation-component);
+  transition-timing-function: ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .kit-sheet {
+    transition: none;
+  }
+}
+
+.kit-sheet[data-variant=tonal] {
+  --kit-sheet-bg: color-mix(in oklab, var(--kit-sheet-ink) 16%, transparent);
+  --kit-sheet-fg: var(--kit-sheet-ink);
+  --kit-sheet-border: transparent;
+  --kit-sheet-active: color-mix(in oklab, var(--kit-sheet-ink) 28%, transparent);
+  --kit-sheet-active-fg: var(--kit-sheet-ink);
+}
+
+.kit-sheet[data-variant=outline] {
+  --kit-sheet-bg: transparent;
+  --kit-sheet-fg: var(--kit-sheet-ink);
+  --kit-sheet-border: var(--kit-sheet-color, var(--kit-color-border));
+  --kit-sheet-active: color-mix(in oklab, var(--kit-sheet-ink) 14%, transparent);
+  --kit-sheet-active-fg: var(--kit-sheet-ink);
+  border: 1px solid var(--kit-sheet-border);
+}
+
+.kit-sheet[data-variant=surface] {
+  --kit-sheet-bg: color-mix(in oklab, var(--kit-sheet-ink) 8%, transparent);
+  --kit-sheet-fg: var(--kit-sheet-ink);
+  --kit-sheet-border: color-mix(in oklab, var(--kit-sheet-ink) 35%, transparent);
+  --kit-sheet-active: color-mix(in oklab, var(--kit-sheet-ink) 18%, transparent);
+  --kit-sheet-active-fg: var(--kit-sheet-ink);
+  border: 1px solid var(--kit-sheet-border);
 }
 
 .kit-sheet[data-active=true] {
-  background: var(--kit-color-accent);
-  color: var(--kit-on-accent);
+  --kit-sheet-bg: var(--kit-sheet-active, var(--kit-color-accent));
+  --kit-sheet-fg: var(
+  	--kit-sheet-active-fg,
+  	var(--kit-sheet-on-color, var(--kit-sheet-contrast, var(--kit-color-on-accent)))
+  );
 }
 
 /** 

package/dist/labs/sheet/sheet.svelte.d.ts

@@ -4,7 +4,9 @@ declare const Sheet: import("svelte").Component<{
     children: any;
     elevation: any;
     rounded: any;
+    variant?: string;
     active: any;
+    color: any;
 } & Record<string, any>, {}, "">;
 type Sheet = ReturnType<typeof Sheet>;
 export default Sheet;

package/dist/utils/color.d.ts

@@ -0,0 +1,4 @@
+import type { ColorProps } from '../@types';
+export declare function resolveColor(color: string | null | undefined): string | undefined;
+export declare function resolveOnColor(color: string | null | undefined): string | undefined;
+export declare function colorStyle(name: string, color: ColorProps | null | undefined, active?: boolean): string;

package/dist/utils/color.js

@@ -0,0 +1,40 @@
+import { DEV } from 'esm-env';
+const paletteName = /^[a-zA-Z][\w-]*$/;
+const unsafe = /[;{}]/;
+function clean(color) {
+    const value = color?.trim();
+    if (!value)
+        return undefined;
+    if (unsafe.test(value)) {
+        if (DEV)
+            console.warn(`[lapikit] color "${value}" is ignored: it cannot hold ; { or }`);
+        return undefined;
+    }
+    return value;
+}
+export function resolveColor(color) {
+    const value = clean(color);
+    if (!value)
+        return undefined;
+    return paletteName.test(value) ? `var(--kit-color-${value}, ${value})` : value;
+}
+export function resolveOnColor(color) {
+    const value = clean(color);
+    if (!value || !paletteName.test(value))
+        return undefined;
+    return `var(--kit-color-on-${value})`;
+}
+export function colorStyle(name, color, active = false) {
+    const exact = active && typeof color === 'object' && !!clean(color?.active);
+    const current = typeof color === 'object' ? (exact ? color?.active : color?.base) : color;
+    const value = resolveColor(current);
+    if (!name || !value)
+        return '';
+    const styles = [`--${name}-color: ${value}`];
+    const onColor = resolveOnColor(current);
+    if (onColor)
+        styles.push(`--${name}-on-color: ${onColor}`);
+    if (exact)
+        styles.push(`--${name}-active-shade: 0%`);
+    return styles.join('; ');
+}

package/dist/utils/components.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentAttrs, ElevationProps, ElevationState, PropValue, SStyleProp, useClassNameProps, useStylesProps } from '../@types';
+import type { ColorProps, ComponentAttrs, ElevationProps, ElevationState, PropValue, SStyleProp, useClassNameProps, useStylesProps } from '../@types';
 import type { ClassValue } from 'svelte/elements';
 /**
  * The classes of the s-class_xxx directives (class:xxx on a kit tag):
@@ -42,13 +42,19 @@ export declare function useElevation(elevation?: ElevationProps | null): Elevati
  * ({ active: isActive } -> active). The s-class_xxx directives (class:xxx on a kit tag) keep their
  * rule: class:gap={4} -> gap-4.
  *
- * @param baseClass - The class of the component ('kit-btn-v2'), '' for none.
- * @param props - The class, s-class, style and s-style props of the component.
+ * @param baseClass - The class of the component ('kit-btn'), '' for none.
+ * The color prop gives the --{baseClass}-color / --{baseClass}-on-color variables, read by the
+ * color mixin; they come before the style, so the style attribute still wins.
+ * With { base, active }, active picks the color of the active state.
+ *
+ * @param props - The class, s-class, style, s-style, color and active props of the component.
  * @param rest - The rest of the props: the s-class_xxx / s-style_xxx directives are taken out of it.
  */
-export declare function useComponentAttrs(baseClass: string, { className, sClass, styleAttr, sStyle }: {
+export declare function useComponentAttrs(baseClass: string, { className, sClass, styleAttr, sStyle, color, active }: {
     className?: ClassValue;
     sClass?: ClassValue;
     styleAttr?: string;
     sStyle?: SStyleProp;
+    color?: ColorProps | null;
+    active?: boolean;
 }, rest: Record<string, unknown>): ComponentAttrs;

package/dist/utils/components.js

@@ -1,5 +1,6 @@
 import { DEV } from 'esm-env';
 import { makeComponentProps } from '../html-mapped';
+import { colorStyle } from './color.js';
 const endsWithSeparator = /[^a-zA-Z0-9]$/;
 const startsWithSeparator = /^[^a-zA-Z0-9]/;
 const whitespace = /\s/;
@@ -224,15 +225,21 @@ export function useElevation(elevation) {
  * ({ active: isActive } -> active). The s-class_xxx directives (class:xxx on a kit tag) keep their
  * rule: class:gap={4} -> gap-4.
  *
- * @param baseClass - The class of the component ('kit-btn-v2'), '' for none.
- * @param props - The class, s-class, style and s-style props of the component.
+ * @param baseClass - The class of the component ('kit-btn'), '' for none.
+ * The color prop gives the --{baseClass}-color / --{baseClass}-on-color variables, read by the
+ * color mixin; they come before the style, so the style attribute still wins.
+ * With { base, active }, active picks the color of the active state.
+ *
+ * @param props - The class, s-class, style, s-style, color and active props of the component.
  * @param rest - The rest of the props: the s-class_xxx / s-style_xxx directives are taken out of it.
  */
-export function useComponentAttrs(baseClass, { className, sClass, styleAttr, sStyle }, rest) {
+export function useComponentAttrs(baseClass, { className, sClass, styleAttr, sStyle, color, active }, rest) {
     const { classProps, styleProps, restProps } = makeComponentProps(rest);
     return {
         class: [baseClass, sClass, directiveClasses(classProps), className],
-        style: useStyles({ styleAttr, sStyle, styleProps }),
+        style: [colorStyle(baseClass, color, active), useStyles({ styleAttr, sStyle, styleProps })]
+            .filter(Boolean)
+            .join('; '),
         rest: restProps
     };
 }

package/dist/utils/index.d.ts

@@ -1,2 +1,3 @@
 export * from './components.js';
 export * from './outside.js';
+export * from './color.js';

package/dist/utils/index.js

@@ -1,2 +1,3 @@
 export * from './components.js';
 export * from './outside.js';
+export * from './color.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lapikit",
-	"version": "0.7.1",
+	"version": "0.7.2",
 	"license": "MIT",
 	"publishConfig": {
 		"access": "public"