Skip to content

Commit 8dc9829

Browse files
tractorsstractorss
committed
chore: theme-export
1 parent 635e892 commit 8dc9829

File tree

8 files changed

+282
-231
lines changed

8 files changed

+282
-231
lines changed

‎README.md‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ npm install @kleros/ui-components-library
5858
1. Import the CSS at the top level of your application:
5959

6060
```javascript
61-
import "@kleros/ui-components-library/dist/esm/ui-components-library.css";
61+
import "@kleros/ui-components-library/style.css";
6262
```
6363

6464
2. Import and use components in your application:
@@ -77,6 +77,27 @@ function MyComponent() {
7777
}
7878
```
7979

80+
### Theme usage
81+
82+
If you wish the use the library's tailwind theme variables in your tailwind app. You can utilize it my importing the theme file in your `global.css` file.
83+
84+
```css
85+
@import tailwindcss @import
86+
"../../../node_modules/@kleros/ui-components-library/dist/theme/theme.css";
87+
```
88+
89+
You can find the available theme variables [here](src/styles/theme.css).
90+
If want to override or edit the defined theme variables, you can do so like this:
91+
92+
```css
93+
:root {
94+
--klerosUIComponentsWhiteBackground: #832323;
95+
}
96+
:root[class="dark"] {
97+
--klerosUIComponentsWhiteBackground: #832323;
98+
}
99+
```
100+
80101
### Peer Dependencies
81102

82103
This library requires the following peer dependencies:

‎package.json‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,28 @@
22
"name": "@kleros/ui-components-library",
33
"version": "3.0.1-rc1",
44
"description": "UI components library which implements the Kleros design system.",
5-
"source": "src/lib/index.ts",
6-
"main": "dist/esm/ui-components-library.js",
7-
"module": "dist/esm/ui-components-library.js",
8-
"types": "dist/ui-components-library.d.ts",
9-
"style": "dist/esm/ui-components-library.css",
5+
"source": "./src/lib/index.ts",
6+
"main": "./dist/esm/ui-components-library.js",
7+
"module": "./dist/esm/ui-components-library.js",
8+
"types": "./dist/ui-components-library.d.ts",
9+
"style": "./dist/esm/ui-components-library.css",
1010
"isLibrary": true,
1111
"type": "module",
1212
"browserslist": "> 0.5%, last 2 versions, not dead",
1313
"repository": "git@github.com:kleros/ui-components-library",
1414
"author": "Kleros",
1515
"license": "MIT",
16+
"exports": {
17+
".": {
18+
"import": "./dist/esm/ui-components-library.js",
19+
"types": "./dist/ui-components-library.d.ts"
20+
},
21+
"./style.css": "./dist/esm/ui-components-library.css",
22+
"./theme.css": "./dist/theme/theme.css"
23+
},
1624
"scripts": {
17-
"build": "vite build",
25+
"build:theme": "vite build --config vite.config.theme.js",
26+
"build": "vite build && yarn build:theme",
1827
"build-storybook": "storybook build",
1928
"check-style": "eslint 'src/**/*.{ts,tsx}'",
2029
"check-types": "tsc --noEmit",

‎src/lib/theme.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import "../styles/theme.css";

‎src/stories/KlerosUIComponentsLibrary.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ export const RightArrow = () => (
7070
<h4 className="sb-section-item-heading">Import CSS</h4>
7171
<p className="sb-section-item-paragraph">Import the library's CSS at the top level of your application:</p>
7272
<div className="sb-code-block">
73-
<code>import "@kleros/ui-components-library/dist/esm/ui-components-library.css";</code>
73+
<code>import "@kleros/ui-components-library/style.css";</code>
7474
</div>
7575
<a
7676
href="https://github.com/kleros/ui-components-library#setup"

‎src/styles/global.css‎

Lines changed: 2 additions & 222 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,9 @@
11
@import "tailwindcss";
22
@plugin "tailwindcss-react-aria-components";
33

4-
@layer base {
5-
:root {
6-
--klerosUIComponentsPrimaryPurple: #4d00b4;
7-
--klerosUIComponentsSecondaryPurple: #9013fe;
8-
--klerosUIComponentsMediumPurple: #f8f1ff;
9-
--klerosUIComponentsLightPurple: #fbf9fe;
10-
--klerosUIComponentsPrimaryBlue: #009aff;
11-
--klerosUIComponentsSecondaryBlue: #7bcbff;
12-
--klerosUIComponentsMediumBlue: #f0f9ff;
13-
--klerosUIComponentsLightBlue: #fcfeff;
14-
--klerosUIComponentsPrimaryText: #333333;
15-
--klerosUIComponentsSecondaryText: #999999;
16-
--klerosUIComponentsStroke: #e5e5e5;
17-
--klerosUIComponentsLightGrey: #fafafa;
18-
19-
--klerosUIComponentsWhiteBackground: #ffffff;
20-
--klerosUIComponentsLightBackground: #fafbfc;
21-
22-
--klerosUIComponentsDefaultShadow: #00000002;
23-
--klerosUIComponentsHoveredShadow: #00000002;
24-
25-
--klerosUIComponentsSuccess: #00c42b;
26-
--klerosUIComponentsSuccessLight: #f0fbf2;
27-
--klerosUIComponentsWarning: #ff9900;
28-
--klerosUIComponentsWarningLight: #fff9f0;
29-
--klerosUIComponentsError: #f60c36;
30-
--klerosUIComponentsErrorLight: #fef0f3;
31-
--klerosUIComponentsTint: #d14eff;
32-
--klerosUIComponentsTintMedium: #401d6c;
33-
--klerosUIComponentsTintPurple: #f4f0fa;
34-
35-
--klerosUIComponentsTransitionSpeed: 0.25s;
36-
37-
--klerosUIComponentsBaseRadius: 3px;
38-
}
39-
40-
:root[class="dark"] {
41-
--klerosUIComponentsName: dark;
42-
--klerosUIComponentsPrimaryPurple: #7e1bd4;
43-
--klerosUIComponentsSecondaryPurple: #b45fff;
44-
--klerosUIComponentsMediumPurple: #390f6c;
45-
--klerosUIComponentsLightPurple: #fcfbff;
46-
--klerosUIComponentsPrimaryBlue: #6cc5ff;
47-
--klerosUIComponentsSecondaryBlue: #a5dbff;
48-
--klerosUIComponentsMediumBlue: #2e206c;
49-
--klerosUIComponentsLightBlue: #2a1260;
50-
--klerosUIComponentsPrimaryText: #daf0ff;
51-
--klerosUIComponentsSecondaryText: #becce5;
52-
--klerosUIComponentsStroke: #392c74;
53-
--klerosUIComponentsLightGrey: #2d1865;
54-
55-
--klerosUIComponentsWhiteBackground: #220050;
56-
--klerosUIComponentsLightBackground: #1b003f;
57-
58-
--klerosUIComponentsDefaultShadow: #00000000;
59-
--klerosUIComponentsHoveredShadow: #42498f80;
60-
61-
--klerosUIComponentsSuccess: #65dc7f;
62-
--klerosUIComponentsSuccessLight: #32355b;
63-
--klerosUIComponentsWarning: #ffc46b;
64-
--klerosUIComponentsWarningLight: #451f54;
65-
--klerosUIComponentsError: #ff5a78;
66-
--klerosUIComponentsErrorLight: #360652;
67-
--klerosUIComponentsTint: #ddb6ff;
68-
--klerosUIComponentsTintMedium: #401d6c;
69-
--klerosUIComponentsTintPurple: #2f0960;
70-
71-
--klerosUIComponentsTransitionSpeed: 0.25s;
72-
}
4+
@import "./theme.css";
735

6+
@layer base {
747
/* Typography styles */
758
h1 {
769
color: var(--klerosUIComponentsPrimaryText);
@@ -137,156 +70,3 @@
13770
scrollbar-color: var(--color-klerosUIComponentsPrimaryBlue) transparent;
13871
}
13972
}
140-
141-
@theme {
142-
--breakpoint-lg: 56.25rem;
143-
--color-klerosUIComponentsPrimaryPurple: var(
144-
--klerosUIComponentsPrimaryPurple
145-
);
146-
--color-klerosUIComponentsSecondaryPurple: var(
147-
--klerosUIComponentsSecondaryPurple
148-
);
149-
--color-klerosUIComponentsMediumPurple: var(--klerosUIComponentsMediumPurple);
150-
--color-klerosUIComponentsLightPurple: var(--klerosUIComponentsLightPurple);
151-
--color-klerosUIComponentsPrimaryBlue: var(--klerosUIComponentsPrimaryBlue);
152-
--color-klerosUIComponentsSecondaryBlue: var(
153-
--klerosUIComponentsSecondaryBlue
154-
);
155-
--color-klerosUIComponentsMediumBlue: var(--klerosUIComponentsMediumBlue);
156-
--color-klerosUIComponentsLightBlue: var(--klerosUIComponentsLightBlue);
157-
--color-klerosUIComponentsPrimaryText: var(--klerosUIComponentsPrimaryText);
158-
--color-klerosUIComponentsSecondaryText: var(
159-
--klerosUIComponentsSecondaryText
160-
);
161-
--color-klerosUIComponentsStroke: var(--klerosUIComponentsStroke);
162-
--color-klerosUIComponentsLightGrey: var(--klerosUIComponentsLightGrey);
163-
164-
--color-klerosUIComponentsWhiteBackground: var(
165-
--klerosUIComponentsWhiteBackground
166-
);
167-
--color-klerosUIComponentsLightBackground: var(
168-
--klerosUIComponentsLightBackground
169-
);
170-
--color-klerosUIComponentsDefaultShadow: var(
171-
--klerosUIComponentsDefaultShadow
172-
);
173-
--color-klerosUIComponentsHoveredShadow: var(
174-
--klerosUIComponentsHoveredShadow
175-
);
176-
--color-klerosUIComponentsSuccess: var(--klerosUIComponentsSuccess);
177-
--color-klerosUIComponentsSuccessLight: var(--klerosUIComponentsSuccessLight);
178-
--color-klerosUIComponentsWarning: var(--klerosUIComponentsWarning);
179-
--color-klerosUIComponentsWarningLight: var(--klerosUIComponentsWarningLight);
180-
--color-klerosUIComponentsError: var(--klerosUIComponentsError);
181-
--color-klerosUIComponentsErrorLight: var(--klerosUIComponentsErrorLight);
182-
--color-klerosUIComponentsTint: var(--klerosUIComponentsTint);
183-
--color-klerosUIComponentsTintMedium: var(--klerosUIComponentsTintMedium);
184-
--color-klerosUIComponentsTintPurple: var(--klerosUIComponentsTintPurple);
185-
--color-klerosUIComponentsTransitionSpeed: var(
186-
--klerosUIComponentsTransitionSpeed
187-
);
188-
189-
--radius-base: var(--klerosUIComponentsBaseRadius);
190-
191-
--default-transition-duration: var(--klerosUIComponentsTransitionSpeed);
192-
193-
/* Animations */
194-
@keyframes fadeIn {
195-
0% {
196-
opacity: 0;
197-
}
198-
50% {
199-
opacity: 0.5;
200-
}
201-
100% {
202-
opacity: 1;
203-
}
204-
}
205-
--animate-fade-in: fadeIn 0.3s ease-in-out;
206-
207-
@keyframes fadeOut {
208-
0% {
209-
opacity: 1;
210-
}
211-
50% {
212-
opacity: 0.5;
213-
}
214-
100% {
215-
opacity: 0;
216-
}
217-
}
218-
--animate-fade-out: fadeOut 0.3s ease-in-out;
219-
220-
@keyframes bounceIn {
221-
0% {
222-
transform: translateY(100%);
223-
}
224-
50% {
225-
transform: translateY(-5px);
226-
}
227-
100% {
228-
transform: translateY(0);
229-
}
230-
}
231-
--animate-bounce-in: bounceIn 0.2s ease-out;
232-
233-
@keyframes scaleIn {
234-
0% {
235-
transform: scaleY(0);
236-
}
237-
238-
100% {
239-
transform: scaleY(1);
240-
}
241-
}
242-
--animate-scale-in: scaleIn var(--klerosUIComponentsTransitionSpeed) ease;
243-
244-
@keyframes scaleOut {
245-
0% {
246-
transform: scaleY(1);
247-
}
248-
249-
100% {
250-
transform: scaleY(0);
251-
}
252-
}
253-
--animate-scale-out: slideOut var(--klerosUIComponentsTransitionSpeed) ease;
254-
255-
@keyframes progressFill {
256-
0% {
257-
stroke-dasharray: 0 200%;
258-
}
259-
}
260-
--animate-progress-fill: progressFill 1s ease-out forwards;
261-
262-
@keyframes breathe {
263-
0% {
264-
transform: scale(1);
265-
}
266-
50% {
267-
transform: scale(1.3);
268-
}
269-
100% {
270-
transform: scale(1);
271-
}
272-
}
273-
--animate-breathing: breathe 2s ease-out infinite normal;
274-
275-
@keyframes loading {
276-
0% {
277-
opacity: 1;
278-
}
279-
50% {
280-
opacity: 0.5;
281-
}
282-
100% {
283-
opacity: 1;
284-
}
285-
}
286-
--animate-loading: loading 2s ease-in-out infinite normal;
287-
288-
--ease-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
289-
290-
--shadow-default: 0px 2px 3px var(--klerosUIComponentsDefaultShadow);
291-
--shadow-input: 0px 0px 6px var(--klerosUIComponentsPrimaryBlue);
292-
}

0 commit comments

Comments
 (0)