@julseb-lib/react 0.1.15 → 0.1.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/index.css +145 -0
  2. package/dist/index.d.ts +1 -1
  3. package/dist/lib/index.css +145 -0
  4. package/package.json +3 -4
package/dist/index.css CHANGED
@@ -6,6 +6,151 @@
6
6
  --font-lato: "Lato", sans-serif;
7
7
  --font-sans: var(--font-lato);
8
8
  --font-mono: monospace;
9
+
10
+ --color-primary-50: var(--color-blue-50);
11
+ --color-primary-100: var(--color-blue-100);
12
+ --color-primary-200: var(--color-blue-200);
13
+ --color-primary-300: var(--color-blue-300);
14
+ --color-primary-400: var(--color-blue-400);
15
+ --color-primary-500: var(--color-blue-500);
16
+ --color-primary-600: var(--color-blue-600);
17
+ --color-primary-700: var(--color-blue-700);
18
+ --color-primary-800: var(--color-blue-800);
19
+ --color-primary-900: var(--color-blue-900);
20
+ --color-primary-950: var(--color-blue-950);
21
+ --color-secondary-50: var(--color-cyan-50);
22
+ --color-secondary-100: var(--color-cyan-100);
23
+ --color-secondary-200: var(--color-cyan-200);
24
+ --color-secondary-300: var(--color-cyan-300);
25
+ --color-secondary-400: var(--color-cyan-400);
26
+ --color-secondary-500: var(--color-cyan-500);
27
+ --color-secondary-600: var(--color-cyan-600);
28
+ --color-secondary-700: var(--color-cyan-700);
29
+ --color-secondary-800: var(--color-cyan-800);
30
+ --color-secondary-900: var(--color-cyan-900);
31
+ --color-secondary-950: var(--color-cyan-950);
32
+ --color-success-50: var(--color-green-50);
33
+ --color-success-100: var(--color-green-100);
34
+ --color-success-200: var(--color-green-200);
35
+ --color-success-300: var(--color-green-300);
36
+ --color-success-400: var(--color-green-400);
37
+ --color-success-500: var(--color-green-500);
38
+ --color-success-600: var(--color-green-600);
39
+ --color-success-700: var(--color-green-700);
40
+ --color-success-800: var(--color-green-800);
41
+ --color-success-900: var(--color-green-900);
42
+ --color-success-950: var(--color-green-950);
43
+ --color-danger-50: var(--color-red-50);
44
+ --color-danger-100: var(--color-red-100);
45
+ --color-danger-200: var(--color-red-200);
46
+ --color-danger-300: var(--color-red-300);
47
+ --color-danger-400: var(--color-red-400);
48
+ --color-danger-500: var(--color-red-500);
49
+ --color-danger-600: var(--color-red-600);
50
+ --color-danger-700: var(--color-red-700);
51
+ --color-danger-800: var(--color-red-800);
52
+ --color-danger-900: var(--color-red-900);
53
+ --color-danger-950: var(--color-red-950);
54
+ --color-warning-50: var(--color-amber-50);
55
+ --color-warning-100: var(--color-amber-100);
56
+ --color-warning-200: var(--color-amber-200);
57
+ --color-warning-300: var(--color-amber-300);
58
+ --color-warning-400: var(--color-amber-400);
59
+ --color-warning-500: var(--color-amber-500);
60
+ --color-warning-600: var(--color-amber-600);
61
+ --color-warning-700: var(--color-amber-700);
62
+ --color-warning-800: var(--color-amber-800);
63
+ --color-warning-900: var(--color-amber-900);
64
+ --color-warning-950: var(--color-amber-950);
65
+ --color-gray-50: var(--color-neutral-50);
66
+ --color-gray-100: var(--color-neutral-100);
67
+ --color-gray-200: var(--color-neutral-200);
68
+ --color-gray-300: var(--color-neutral-300);
69
+ --color-gray-400: var(--color-neutral-400);
70
+ --color-gray-500: var(--color-neutral-500);
71
+ --color-gray-600: var(--color-neutral-600);
72
+ --color-gray-700: var(--color-neutral-700);
73
+ --color-gray-800: var(--color-neutral-800);
74
+ --color-gray-900: var(--color-neutral-900);
75
+ --color-gray-950: var(--color-neutral-950);
76
+
77
+ --color-background: var(--color-white);
78
+ --color-font: var(--color-black);
79
+
80
+ --font-weight-thin: 100;
81
+ --font-weight-light: 300;
82
+ --font-weight-normal: 400;
83
+ --font-weight-bold: 700;
84
+ --font-weight-black: 900;
85
+
86
+ --color-overlay-black-50: rgba(0, 0, 0, 0.5);
87
+ --color-overlay-black-80: rgba(0, 0, 0, 0.8);
88
+ --color-overlay-white-50: rgba(255, 255, 255, 0.5);
89
+ --color-overlay-white-80: rgba(255, 255, 255, 0.8);
90
+ --color-overlay-gradient-black: linear-gradient(
91
+ 180deg,
92
+ rgba(255, 255, 255, 0) 0%,
93
+ rgba(0, 0, 0, 0.56) 100%
94
+ );
95
+ --color-overlay-gradient-white: linear-gradient(
96
+ 180deg,
97
+ rgba(0, 0, 0, 0) 0%,
98
+ rgba(255, 255, 255, 0.35) 100%
99
+ );
100
+
101
+ --font-sans: var(--font-lato);
102
+ --font-mono: monospace;
103
+
104
+ --spacer-2xs: 4px;
105
+ --spacer-xs: 8px;
106
+ --spacer-sm: 12px;
107
+ --spacer-md: 16px;
108
+ --spacer-lg: 24px;
109
+ --spacer-xl: 32px;
110
+ --spacer-2xl: 48px;
111
+
112
+ --main-default: 600px;
113
+ --main-large: 800px;
114
+ --main-form: 400px;
115
+ --main-full: 100%;
116
+ --aside-default: 250px;
117
+ --aside-small: 200px;
118
+
119
+ --shadow-2xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
120
+ --shadow-xs:
121
+ 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
122
+ --shadow-sm:
123
+ 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
124
+ --shadow-md:
125
+ 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3);
126
+ --shadow-lg:
127
+ 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3);
128
+ --shadow-xl:
129
+ 0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px rgba(0, 0, 0, 0.3);
130
+ --shadow-2xl:
131
+ 0px 10px 14px 8px rgba(0, 0, 0, 0.2), 0px 4px 4px rgba(0, 0, 0, 0.3);
132
+ --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.06);
133
+ --shadow-none: none;
134
+
135
+ --animate-cubic-bezier: cubic-bezier(0.5, 0, 0.5, 1);
136
+
137
+ --transition-short: all 200ms ease;
138
+ --transition-long: all 500ms ease;
139
+ --transition-bezier: all 500ms cubic-bezier(0.25, 0.75, 0, 0.66);
140
+
141
+ --text-display-h1: 5rem;
142
+ --text-display-h2: 4rem;
143
+ --text-display-h3: 3.5rem;
144
+ --text-display-h4: 3rem;
145
+ --text-display-h5: 2.5rem;
146
+ --text-h1: 2.5rem;
147
+ --text-h2: 2rem;
148
+ --text-h3: 1.8rem;
149
+ --text-h4: 1.5rem;
150
+ --text-h5: 1.3rem;
151
+ --text-h6: 1.1rem;
152
+ --text-body: 1rem;
153
+ --text-small: 0.875rem;
9
154
  }
10
155
 
11
156
  @theme {
package/dist/index.d.ts CHANGED
@@ -1 +1 @@
1
- export * from "./lib/index.ts"
1
+ export {}
package/dist/lib/index.css CHANGED
@@ -6,6 +6,151 @@
6
6
  --font-lato: "Lato", sans-serif;
7
7
  --font-sans: var(--font-lato);
8
8
  --font-mono: monospace;
9
+
10
+ --color-primary-50: var(--color-blue-50);
11
+ --color-primary-100: var(--color-blue-100);
12
+ --color-primary-200: var(--color-blue-200);
13
+ --color-primary-300: var(--color-blue-300);
14
+ --color-primary-400: var(--color-blue-400);
15
+ --color-primary-500: var(--color-blue-500);
16
+ --color-primary-600: var(--color-blue-600);
17
+ --color-primary-700: var(--color-blue-700);
18
+ --color-primary-800: var(--color-blue-800);
19
+ --color-primary-900: var(--color-blue-900);
20
+ --color-primary-950: var(--color-blue-950);
21
+ --color-secondary-50: var(--color-cyan-50);
22
+ --color-secondary-100: var(--color-cyan-100);
23
+ --color-secondary-200: var(--color-cyan-200);
24
+ --color-secondary-300: var(--color-cyan-300);
25
+ --color-secondary-400: var(--color-cyan-400);
26
+ --color-secondary-500: var(--color-cyan-500);
27
+ --color-secondary-600: var(--color-cyan-600);
28
+ --color-secondary-700: var(--color-cyan-700);
29
+ --color-secondary-800: var(--color-cyan-800);
30
+ --color-secondary-900: var(--color-cyan-900);
31
+ --color-secondary-950: var(--color-cyan-950);
32
+ --color-success-50: var(--color-green-50);
33
+ --color-success-100: var(--color-green-100);
34
+ --color-success-200: var(--color-green-200);
35
+ --color-success-300: var(--color-green-300);
36
+ --color-success-400: var(--color-green-400);
37
+ --color-success-500: var(--color-green-500);
38
+ --color-success-600: var(--color-green-600);
39
+ --color-success-700: var(--color-green-700);
40
+ --color-success-800: var(--color-green-800);
41
+ --color-success-900: var(--color-green-900);
42
+ --color-success-950: var(--color-green-950);
43
+ --color-danger-50: var(--color-red-50);
44
+ --color-danger-100: var(--color-red-100);
45
+ --color-danger-200: var(--color-red-200);
46
+ --color-danger-300: var(--color-red-300);
47
+ --color-danger-400: var(--color-red-400);
48
+ --color-danger-500: var(--color-red-500);
49
+ --color-danger-600: var(--color-red-600);
50
+ --color-danger-700: var(--color-red-700);
51
+ --color-danger-800: var(--color-red-800);
52
+ --color-danger-900: var(--color-red-900);
53
+ --color-danger-950: var(--color-red-950);
54
+ --color-warning-50: var(--color-amber-50);
55
+ --color-warning-100: var(--color-amber-100);
56
+ --color-warning-200: var(--color-amber-200);
57
+ --color-warning-300: var(--color-amber-300);
58
+ --color-warning-400: var(--color-amber-400);
59
+ --color-warning-500: var(--color-amber-500);
60
+ --color-warning-600: var(--color-amber-600);
61
+ --color-warning-700: var(--color-amber-700);
62
+ --color-warning-800: var(--color-amber-800);
63
+ --color-warning-900: var(--color-amber-900);
64
+ --color-warning-950: var(--color-amber-950);
65
+ --color-gray-50: var(--color-neutral-50);
66
+ --color-gray-100: var(--color-neutral-100);
67
+ --color-gray-200: var(--color-neutral-200);
68
+ --color-gray-300: var(--color-neutral-300);
69
+ --color-gray-400: var(--color-neutral-400);
70
+ --color-gray-500: var(--color-neutral-500);
71
+ --color-gray-600: var(--color-neutral-600);
72
+ --color-gray-700: var(--color-neutral-700);
73
+ --color-gray-800: var(--color-neutral-800);
74
+ --color-gray-900: var(--color-neutral-900);
75
+ --color-gray-950: var(--color-neutral-950);
76
+
77
+ --color-background: var(--color-white);
78
+ --color-font: var(--color-black);
79
+
80
+ --font-weight-thin: 100;
81
+ --font-weight-light: 300;
82
+ --font-weight-normal: 400;
83
+ --font-weight-bold: 700;
84
+ --font-weight-black: 900;
85
+
86
+ --color-overlay-black-50: rgba(0, 0, 0, 0.5);
87
+ --color-overlay-black-80: rgba(0, 0, 0, 0.8);
88
+ --color-overlay-white-50: rgba(255, 255, 255, 0.5);
89
+ --color-overlay-white-80: rgba(255, 255, 255, 0.8);
90
+ --color-overlay-gradient-black: linear-gradient(
91
+ 180deg,
92
+ rgba(255, 255, 255, 0) 0%,
93
+ rgba(0, 0, 0, 0.56) 100%
94
+ );
95
+ --color-overlay-gradient-white: linear-gradient(
96
+ 180deg,
97
+ rgba(0, 0, 0, 0) 0%,
98
+ rgba(255, 255, 255, 0.35) 100%
99
+ );
100
+
101
+ --font-sans: var(--font-lato);
102
+ --font-mono: monospace;
103
+
104
+ --spacer-2xs: 4px;
105
+ --spacer-xs: 8px;
106
+ --spacer-sm: 12px;
107
+ --spacer-md: 16px;
108
+ --spacer-lg: 24px;
109
+ --spacer-xl: 32px;
110
+ --spacer-2xl: 48px;
111
+
112
+ --main-default: 600px;
113
+ --main-large: 800px;
114
+ --main-form: 400px;
115
+ --main-full: 100%;
116
+ --aside-default: 250px;
117
+ --aside-small: 200px;
118
+
119
+ --shadow-2xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
120
+ --shadow-xs:
121
+ 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
122
+ --shadow-sm:
123
+ 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
124
+ --shadow-md:
125
+ 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3);
126
+ --shadow-lg:
127
+ 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3);
128
+ --shadow-xl:
129
+ 0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px rgba(0, 0, 0, 0.3);
130
+ --shadow-2xl:
131
+ 0px 10px 14px 8px rgba(0, 0, 0, 0.2), 0px 4px 4px rgba(0, 0, 0, 0.3);
132
+ --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.06);
133
+ --shadow-none: none;
134
+
135
+ --animate-cubic-bezier: cubic-bezier(0.5, 0, 0.5, 1);
136
+
137
+ --transition-short: all 200ms ease;
138
+ --transition-long: all 500ms ease;
139
+ --transition-bezier: all 500ms cubic-bezier(0.25, 0.75, 0, 0.66);
140
+
141
+ --text-display-h1: 5rem;
142
+ --text-display-h2: 4rem;
143
+ --text-display-h3: 3.5rem;
144
+ --text-display-h4: 3rem;
145
+ --text-display-h5: 2.5rem;
146
+ --text-h1: 2.5rem;
147
+ --text-h2: 2rem;
148
+ --text-h3: 1.8rem;
149
+ --text-h4: 1.5rem;
150
+ --text-h5: 1.3rem;
151
+ --text-h6: 1.1rem;
152
+ --text-body: 1rem;
153
+ --text-small: 0.875rem;
9
154
  }
10
155
 
11
156
  @theme {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@julseb-lib/react",
3
3
  "private": false,
4
- "version": "0.1.15",
4
+ "version": "0.1.16",
5
5
  "type": "module",
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -11,8 +11,7 @@
11
11
  "copy": "cp ./src/lib/index.css ./dist",
12
12
  "copy-lib": "cp -a ./src/lib ./dist && rm -rf ./dist/lib/components/*/__preview__",
13
13
  "clean": "rm -rf ./dist/icons ./dist/images ./dist/vite.svg ./dist/favicon.svg ./dist/icons-alt",
14
- "add-index": "rm -rf ./dist/index.d.ts && touch ./dist/index.d.ts && echo 'export * from \"./lib/index.ts\"' > ./dist/index.d.ts",
15
- "build": "vite build && yarn copy && yarn copy-lib && yarn clean && yarn add-index",
14
+ "build": "vite build && yarn copy && yarn copy-lib && yarn clean",
16
15
  "plop": "cross-env NODE_OPTIONS='--import tsx' plop --plopfile=./plop/plopfile.ts",
17
16
  "plop:c": "yarn plop component",
18
17
  "plop:p": "yarn plop preview",
@@ -84,7 +83,7 @@
84
83
  "exports": {
85
84
  ".": {
86
85
  "import": "./dist/julseb-lib-react.es.js",
87
- "types": "./dist/index.d.ts",
86
+ "types": "./dist/lib/index.ts",
88
87
  "require": "./dist/julseb-lib-react.umd.js",
89
88
  "default": "./dist/julseb-lib-react.cjs.js"
90
89
  },