aboutsummaryrefslogtreecommitdiff
path: root/packages/memory-graph/src/styles
diff options
context:
space:
mode:
Diffstat (limited to 'packages/memory-graph/src/styles')
-rw-r--r--packages/memory-graph/src/styles/animations.css.ts26
-rw-r--r--packages/memory-graph/src/styles/effects.css.ts16
-rw-r--r--packages/memory-graph/src/styles/global.css.ts26
-rw-r--r--packages/memory-graph/src/styles/index.ts18
-rw-r--r--packages/memory-graph/src/styles/sprinkles.css.ts16
-rw-r--r--packages/memory-graph/src/styles/theme.css.ts6
6 files changed, 57 insertions, 51 deletions
diff --git a/packages/memory-graph/src/styles/animations.css.ts b/packages/memory-graph/src/styles/animations.css.ts
index d9430ec4..53444052 100644
--- a/packages/memory-graph/src/styles/animations.css.ts
+++ b/packages/memory-graph/src/styles/animations.css.ts
@@ -1,4 +1,4 @@
-import { keyframes } from "@vanilla-extract/css";
+import { keyframes } from "@vanilla-extract/css"
/**
* Animation keyframes
@@ -8,12 +8,12 @@ import { keyframes } from "@vanilla-extract/css";
export const fadeIn = keyframes({
from: { opacity: 0 },
to: { opacity: 1 },
-});
+})
export const fadeOut = keyframes({
from: { opacity: 1 },
to: { opacity: 0 },
-});
+})
export const slideInFromRight = keyframes({
from: {
@@ -24,7 +24,7 @@ export const slideInFromRight = keyframes({
transform: "translateX(0)",
opacity: 1,
},
-});
+})
export const slideInFromLeft = keyframes({
from: {
@@ -35,7 +35,7 @@ export const slideInFromLeft = keyframes({
transform: "translateX(0)",
opacity: 1,
},
-});
+})
export const slideInFromTop = keyframes({
from: {
@@ -46,7 +46,7 @@ export const slideInFromTop = keyframes({
transform: "translateY(0)",
opacity: 1,
},
-});
+})
export const slideInFromBottom = keyframes({
from: {
@@ -57,12 +57,12 @@ export const slideInFromBottom = keyframes({
transform: "translateY(0)",
opacity: 1,
},
-});
+})
export const spin = keyframes({
from: { transform: "rotate(0deg)" },
to: { transform: "rotate(360deg)" },
-});
+})
export const pulse = keyframes({
"0%, 100%": {
@@ -71,7 +71,7 @@ export const pulse = keyframes({
"50%": {
opacity: 0.5,
},
-});
+})
export const bounce = keyframes({
"0%, 100%": {
@@ -82,7 +82,7 @@ export const bounce = keyframes({
transform: "translateY(0)",
animationTimingFunction: "cubic-bezier(0, 0, 0.2, 1)",
},
-});
+})
export const scaleIn = keyframes({
from: {
@@ -93,7 +93,7 @@ export const scaleIn = keyframes({
transform: "scale(1)",
opacity: 1,
},
-});
+})
export const scaleOut = keyframes({
from: {
@@ -104,7 +104,7 @@ export const scaleOut = keyframes({
transform: "scale(0.95)",
opacity: 0,
},
-});
+})
export const shimmer = keyframes({
"0%": {
@@ -113,4 +113,4 @@ export const shimmer = keyframes({
"100%": {
backgroundPosition: "1000px 0",
},
-});
+})
diff --git a/packages/memory-graph/src/styles/effects.css.ts b/packages/memory-graph/src/styles/effects.css.ts
index 2a290d32..306f912c 100644
--- a/packages/memory-graph/src/styles/effects.css.ts
+++ b/packages/memory-graph/src/styles/effects.css.ts
@@ -1,5 +1,5 @@
-import { style, styleVariants } from "@vanilla-extract/css";
-import { themeContract } from "./theme.css";
+import { style, styleVariants } from "@vanilla-extract/css"
+import { themeContract } from "./theme.css"
/**
* Base glass-morphism effect
@@ -10,7 +10,7 @@ const glassBase = style({
WebkitBackdropFilter: "blur(12px)",
border: `1px solid ${themeContract.colors.document.border}`,
borderRadius: themeContract.radii.lg,
-});
+})
/**
* Glass effect variants
@@ -47,7 +47,7 @@ export const glass = styleVariants({
WebkitBackdropFilter: "blur(20px)",
},
],
-});
+})
/**
* Glass panel styles for larger containers
@@ -67,7 +67,7 @@ export const glassPanel = styleVariants({
border: `2px solid ${themeContract.colors.document.border}`,
borderRadius: themeContract.radii.xl,
},
-});
+})
/**
* Focus ring styles for accessibility
@@ -80,7 +80,7 @@ export const focusRing = style({
outlineOffset: "2px",
},
},
-});
+})
/**
* Transition presets
@@ -104,7 +104,7 @@ export const transition = styleVariants({
transform: {
transition: `transform ${themeContract.transitions.normal}`,
},
-});
+})
/**
* Hover glow effect
@@ -117,4 +117,4 @@ export const hoverGlow = style({
boxShadow: `0 0 20px ${themeContract.colors.document.glow}`,
},
},
-});
+})
diff --git a/packages/memory-graph/src/styles/global.css.ts b/packages/memory-graph/src/styles/global.css.ts
index cbe37913..ec08d959 100644
--- a/packages/memory-graph/src/styles/global.css.ts
+++ b/packages/memory-graph/src/styles/global.css.ts
@@ -1,4 +1,4 @@
-import { globalStyle } from "@vanilla-extract/css";
+import { globalStyle } from "@vanilla-extract/css"
/**
* Global CSS reset and base styles
@@ -7,39 +7,39 @@ import { globalStyle } from "@vanilla-extract/css";
// Box sizing reset
globalStyle("*, *::before, *::after", {
boxSizing: "border-box",
-});
+})
// Remove default margins
globalStyle("body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd", {
margin: 0,
-});
+})
// Remove list styles
globalStyle("ul[role='list'], ol[role='list']", {
listStyle: "none",
-});
+})
// Core body defaults
globalStyle("html, body", {
height: "100%",
-});
+})
globalStyle("body", {
lineHeight: 1.5,
WebkitFontSmoothing: "antialiased",
MozOsxFontSmoothing: "grayscale",
-});
+})
// Typography defaults
globalStyle("h1, h2, h3, h4, h5, h6", {
fontWeight: 500,
lineHeight: 1.25,
-});
+})
// Inherit fonts for inputs and buttons
globalStyle("input, button, textarea, select", {
font: "inherit",
-});
+})
// Remove default button styles
globalStyle("button", {
@@ -47,25 +47,25 @@ globalStyle("button", {
border: "none",
padding: 0,
cursor: "pointer",
-});
+})
// Improve media defaults
globalStyle("img, picture, video, canvas, svg", {
display: "block",
maxWidth: "100%",
-});
+})
// Remove built-in form typography styles
globalStyle("input, button, textarea, select", {
font: "inherit",
-});
+})
// Avoid text overflows
globalStyle("p, h1, h2, h3, h4, h5, h6", {
overflowWrap: "break-word",
-});
+})
// Improve text rendering
globalStyle("#root, #__next", {
isolation: "isolate",
-});
+})
diff --git a/packages/memory-graph/src/styles/index.ts b/packages/memory-graph/src/styles/index.ts
index f619c689..15dbd1e9 100644
--- a/packages/memory-graph/src/styles/index.ts
+++ b/packages/memory-graph/src/styles/index.ts
@@ -4,17 +4,23 @@
*/
// Import global styles (side effect)
-import "./global.css";
+import "./global.css"
// Theme
-export { themeContract, defaultTheme } from "./theme.css";
+export { themeContract, defaultTheme } from "./theme.css"
// Sprinkles utilities
-export { sprinkles } from "./sprinkles.css";
-export type { Sprinkles } from "./sprinkles.css";
+export { sprinkles } from "./sprinkles.css"
+export type { Sprinkles } from "./sprinkles.css"
// Animations
-export * as animations from "./animations.css";
+export * as animations from "./animations.css"
// Glass-morphism effects
-export { glass, glassPanel, focusRing, transition, hoverGlow } from "./effects.css";
+export {
+ glass,
+ glassPanel,
+ focusRing,
+ transition,
+ hoverGlow,
+} from "./effects.css"
diff --git a/packages/memory-graph/src/styles/sprinkles.css.ts b/packages/memory-graph/src/styles/sprinkles.css.ts
index ecd7a024..6cb06261 100644
--- a/packages/memory-graph/src/styles/sprinkles.css.ts
+++ b/packages/memory-graph/src/styles/sprinkles.css.ts
@@ -1,5 +1,5 @@
-import { defineProperties, createSprinkles } from "@vanilla-extract/sprinkles";
-import { themeContract } from "./theme.css";
+import { defineProperties, createSprinkles } from "@vanilla-extract/sprinkles"
+import { themeContract } from "./theme.css"
/**
* Responsive conditions for mobile-first design
@@ -122,7 +122,7 @@ const responsiveProperties = defineProperties({
// User select
userSelect: ["auto", "none", "text", "all"],
},
-});
+})
/**
* Color properties (non-responsive)
@@ -152,7 +152,7 @@ const colorProperties = defineProperties({
memoryBorder: themeContract.colors.memory.border,
},
},
-});
+})
/**
* Border properties
@@ -167,7 +167,7 @@ const borderProperties = defineProperties({
},
borderStyle: ["none", "solid", "dashed", "dotted"],
},
-});
+})
/**
* Opacity properties
@@ -188,7 +188,7 @@ const opacityProperties = defineProperties({
100: "1",
},
},
-});
+})
/**
* Combined sprinkles system
@@ -199,6 +199,6 @@ export const sprinkles = createSprinkles(
colorProperties,
borderProperties,
opacityProperties,
-);
+)
-export type Sprinkles = Parameters<typeof sprinkles>[0];
+export type Sprinkles = Parameters<typeof sprinkles>[0]
diff --git a/packages/memory-graph/src/styles/theme.css.ts b/packages/memory-graph/src/styles/theme.css.ts
index bf08e3eb..0f3f5fea 100644
--- a/packages/memory-graph/src/styles/theme.css.ts
+++ b/packages/memory-graph/src/styles/theme.css.ts
@@ -1,4 +1,4 @@
-import { createTheme, createThemeContract } from "@vanilla-extract/css";
+import { createTheme, createThemeContract } from "@vanilla-extract/css"
/**
* Theme contract defines the structure of the design system.
@@ -124,7 +124,7 @@ export const themeContract = createThemeContract({
modal: null,
tooltip: null,
},
-});
+})
/**
* Default theme implementation based on the original constants.ts colors
@@ -242,4 +242,4 @@ export const defaultTheme = createTheme(themeContract, {
modal: "30",
tooltip: "40",
},
-});
+})