Skip to content

Commit

Permalink
Tailwind config for new Sparkle compatibility (#8010)
Browse files Browse the repository at this point in the history 
* Sparkle config for compatibility

* Sparkle config for compatibility

* bumping

* Chips update
  • Loading branch information
@Duncid
Duncid authored Oct 11, 2024
1 parent baaf747 commit e54faa8
Show file tree
Hide file tree
Showing 5 changed files with 75 additions and 22 deletions.
54 changes: 54 additions & 0 deletions front/tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,6 +150,60 @@ module.exports = {
fadeout: "fadeout 500ms ease-out",
},
colors: {
separator: {
DEFAULT: colors.slate[200],
dark: colors.slate[800],
},
border: {
DEFAULT: colors.slate[100],
dark: colors.slate[900],
},
"border-dark": {
DEFAULT: colors.slate[200],
dark: colors.slate[800],
},
background: {
DEFAULT: colors.white,
dark: colors.slate[950],
},
foreground: {
DEFAULT: colors.slate[950],
dark: colors.white,
},
muted: {
DEFAULT: colors.slate[50],
dark: colors.slate[900],
},
"muted-foreground": {
DEFAULT: colors.slate[500],
dark: colors.slate[500],
},
highlight: {
950: { DEFAULT: colors.blue[950], dark: colors.blue[50] },
900: { DEFAULT: colors.blue[900], dark: colors.blue[100] },
800: { DEFAULT: colors.blue[800], dark: colors.blue[200] },
700: { DEFAULT: colors.blue[700], dark: colors.blue[300] },
600: { DEFAULT: colors.blue[600], dark: colors.blue[400] },
500: { DEFAULT: colors.blue[500], dark: colors.blue[500] },
400: { DEFAULT: colors.blue[400], dark: colors.blue[600] },
300: { DEFAULT: colors.blue[300], dark: colors.blue[700] },
200: { DEFAULT: colors.blue[200], dark: colors.blue[800] },
100: { DEFAULT: colors.blue[100], dark: colors.blue[900] },
50: { DEFAULT: colors.blue[50], dark: colors.blue[950] },
},
primary: {
950: { DEFAULT: colors.blue[950], dark: colors.blue[50] },
900: { DEFAULT: colors.blue[900], dark: colors.blue[100] },
800: { DEFAULT: colors.blue[800], dark: colors.blue[200] },
700: { DEFAULT: colors.blue[700], dark: colors.blue[300] },
600: { DEFAULT: colors.blue[600], dark: colors.blue[400] },
500: { DEFAULT: colors.blue[500], dark: colors.blue[500] },
400: { DEFAULT: colors.blue[400], dark: colors.blue[600] },
300: { DEFAULT: colors.blue[300], dark: colors.blue[700] },
200: { DEFAULT: colors.blue[200], dark: colors.blue[800] },
100: { DEFAULT: colors.blue[100], dark: colors.blue[900] },
50: { DEFAULT: colors.blue[50], dark: colors.blue[950] },
},
brand: {
DEFAULT: colors.emerald[500],
dark: colors.emerald[500],
Expand Down
4 changes: 2 additions & 2 deletions sparkle/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion sparkle/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@dust-tt/sparkle",
"version": "0.2.265",
"version": "0.2.266",
"scripts": {
"build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
"tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",
Expand Down
7 changes: 3 additions & 4 deletions sparkle/src/components/Chip.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,11 @@ type ChipProps = {
};

const sizeClasses = {
xs: "s-h-7 s-text-xs s-font-medium s-px-3 s-gap-2",
sm: "s-h-9 s-text-sm s-font-semibold s-px-3 s-gap-2.5",
xs: "s-rounded-lg s-h-7 s-text-xs s-font-medium s-px-3 s-gap-2",
sm: "s-rounded-xl s-h-9 s-text-sm s-font-semibold s-px-3 s-gap-2.5",
};

const baseClasses =
"s-rounded-lg s-inline-flex s-box-border s-border s-items-center";
const baseClasses = "s-inline-flex s-box-border s-border s-items-center";

export function Chip({
size = "xs",
Expand Down
30 changes: 15 additions & 15 deletions sparkle/tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,7 @@ module.exports = {
colors: {
separator: {
DEFAULT: colors.slate[200],
dark: colors.slate[800]
dark: colors.slate[800],
},
border: {
DEFAULT: colors.slate[100],
Expand All @@ -179,15 +179,15 @@ module.exports = {
},
background: {
DEFAULT: colors.white,
dark: colors.slate[950]
dark: colors.slate[950],
},
foreground: {
DEFAULT: colors.slate[950],
dark: colors.white
dark: colors.white,
},
muted: {
DEFAULT: colors.slate[50],
dark: colors.slate[900]
dark: colors.slate[900],
},
"muted-foreground": {
DEFAULT: colors.slate[500],
Expand All @@ -211,17 +211,17 @@ module.exports = {
50: { DEFAULT: colors.blue[50], dark: colors.blue[950] },
},
primary: {
950: { DEFAULT: colors.slate[950], dark: colors.slate[50] },
900: { DEFAULT: colors.slate[900], dark: colors.slate[100] },
800: { DEFAULT: colors.slate[800], dark: colors.slate[200] },
700: { DEFAULT: colors.slate[700], dark: colors.slate[300] },
600: { DEFAULT: colors.slate[600], dark: colors.slate[400] },
500: { DEFAULT: colors.slate[500], dark: colors.slate[500] },
400: { DEFAULT: colors.slate[400], dark: colors.slate[600] },
300: { DEFAULT: colors.slate[300], dark: colors.slate[700] },
200: { DEFAULT: colors.slate[200], dark: colors.slate[800] },
100: { DEFAULT: colors.slate[100], dark: colors.slate[900] },
50: { DEFAULT: colors.slate[50], dark: colors.slate[950] },
950: { DEFAULT: colors.blue[950], dark: colors.blue[50] },
900: { DEFAULT: colors.blue[900], dark: colors.blue[100] },
800: { DEFAULT: colors.blue[800], dark: colors.blue[200] },
700: { DEFAULT: colors.blue[700], dark: colors.blue[300] },
600: { DEFAULT: colors.blue[600], dark: colors.blue[400] },
500: { DEFAULT: colors.blue[500], dark: colors.blue[500] },
400: { DEFAULT: colors.blue[400], dark: colors.blue[600] },
300: { DEFAULT: colors.blue[300], dark: colors.blue[700] },
200: { DEFAULT: colors.blue[200], dark: colors.blue[800] },
100: { DEFAULT: colors.blue[100], dark: colors.blue[900] },
50: { DEFAULT: colors.blue[50], dark: colors.blue[950] },
},
action: {
950: { DEFAULT: colors.blue[950], dark: colors.blue[50] },
Expand Down

0 comments on commit e54faa8

Please sign in to comment.