common_component_library_vue 0.1.2 → 0.1.3
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.
- package/dist-lib/common-component-library-vue.css +1 -1
- package/dist-lib/common-component-library-vue.mjs +705 -254
- package/dist-lib/common-component-library-vue.umd.js +2 -1
- package/dist-lib/types/components/Chart/CcBarChart.vue.d.ts +32 -0
- package/dist-lib/types/components/Chart/CcLineChart.vue.d.ts +35 -0
- package/dist-lib/types/components/Chart/CcPieChart.vue.d.ts +30 -0
- package/dist-lib/types/components/Chart/common.d.ts +32 -0
- package/dist-lib/types/components/Chart/useECharts.d.ts +18 -0
- package/dist-lib/types/components/ThemeProvider/CcThemeProvider.vue.d.ts +27 -0
- package/dist-lib/types/index.d.ts +148 -3
- package/dist-lib/types/theme.d.ts +32 -0
- package/package.json +10 -4
- package/src/styles/themes/linear.css +47 -0
- package/src/styles/themes/notion.css +47 -0
- package/src/styles/themes/raycast.css +47 -0
- package/src/styles/themes/vercel.css +47 -0
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
/* ==========================================================================
|
|
2
|
+
THEME · Linear — deep-dark, lavender accent
|
|
3
|
+
Source: awesome-design-md/linear.app/DESIGN.md
|
|
4
|
+
Apply by setting <html data-cc-theme="linear"> (or CcThemeProvider / setTheme).
|
|
5
|
+
========================================================================== */
|
|
6
|
+
|
|
7
|
+
[data-cc-theme='linear'] {
|
|
8
|
+
/* Brand & Accent */
|
|
9
|
+
--cc-primary: #5e6ad2;
|
|
10
|
+
--cc-primary-deep: #4f5ab8;
|
|
11
|
+
--cc-primary-press: #3d4798;
|
|
12
|
+
--cc-primary-soft: #828fff;
|
|
13
|
+
--cc-primary-subdued: #2a2e4a;
|
|
14
|
+
--cc-brand-dark-900: #0b0b0c;
|
|
15
|
+
--cc-ruby: #f25e5e;
|
|
16
|
+
--cc-magenta: #f5a3c7;
|
|
17
|
+
--cc-lemon: #d8b4fe;
|
|
18
|
+
|
|
19
|
+
/* Surface */
|
|
20
|
+
--cc-canvas: #010102;
|
|
21
|
+
--cc-canvas-soft: #0f1011;
|
|
22
|
+
--cc-canvas-cream: #141516;
|
|
23
|
+
--cc-hairline: #2a2d33;
|
|
24
|
+
--cc-hairline-input: #3a3e45;
|
|
25
|
+
|
|
26
|
+
/* Text */
|
|
27
|
+
--cc-ink: #f7f8f8;
|
|
28
|
+
--cc-ink-secondary: #d0d6e0;
|
|
29
|
+
--cc-ink-mute: #8a8f98;
|
|
30
|
+
--cc-ink-mute-2: #62666d;
|
|
31
|
+
--cc-on-primary: #ffffff;
|
|
32
|
+
|
|
33
|
+
/* Semantic */
|
|
34
|
+
--cc-success: #3ddc97;
|
|
35
|
+
--cc-success-soft: #14322a;
|
|
36
|
+
--cc-warning: #d8b4fe;
|
|
37
|
+
--cc-warning-soft: #2c2440;
|
|
38
|
+
--cc-error: #f25e5e;
|
|
39
|
+
--cc-error-soft: #3a1d1d;
|
|
40
|
+
--cc-info: #5e6ad2;
|
|
41
|
+
|
|
42
|
+
/* Shadows */
|
|
43
|
+
--cc-shadow-blue: #000000;
|
|
44
|
+
--cc-shadow-level-1: rgba(0, 0, 0, 0.5) 0 1px 3px;
|
|
45
|
+
--cc-shadow-level-2: rgba(0, 0, 0, 0.5) 0 8px 24px, rgba(0, 0, 0, 0.3) 0 2px 6px;
|
|
46
|
+
--cc-focus-ring: 0 0 0 3px rgba(94, 106, 210, 0.35);
|
|
47
|
+
}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
/* ==========================================================================
|
|
2
|
+
THEME · Notion — paper light, indigo CTA
|
|
3
|
+
Source: awesome-design-md/notion/DESIGN.md
|
|
4
|
+
Apply by setting <html data-cc-theme="notion"> (or CcThemeProvider / setTheme).
|
|
5
|
+
========================================================================== */
|
|
6
|
+
|
|
7
|
+
[data-cc-theme='notion'] {
|
|
8
|
+
/* Brand & Accent */
|
|
9
|
+
--cc-primary: #5645d4;
|
|
10
|
+
--cc-primary-deep: #4534b3;
|
|
11
|
+
--cc-primary-press: #3a2a99;
|
|
12
|
+
--cc-primary-soft: #6f5fe8;
|
|
13
|
+
--cc-primary-subdued: #e9e7fb;
|
|
14
|
+
--cc-brand-dark-900: #0a1530;
|
|
15
|
+
--cc-ruby: #eb5757;
|
|
16
|
+
--cc-magenta: #eb5757;
|
|
17
|
+
--cc-lemon: #b76e00;
|
|
18
|
+
|
|
19
|
+
/* Surface */
|
|
20
|
+
--cc-canvas: #ffffff;
|
|
21
|
+
--cc-canvas-soft: #f7f7f5;
|
|
22
|
+
--cc-canvas-cream: #f1f1ef;
|
|
23
|
+
--cc-hairline: #e3e3e0;
|
|
24
|
+
--cc-hairline-input: #d0d0cc;
|
|
25
|
+
|
|
26
|
+
/* Text */
|
|
27
|
+
--cc-ink: #37352f;
|
|
28
|
+
--cc-ink-secondary: #4f4d47;
|
|
29
|
+
--cc-ink-mute: #9b9a97;
|
|
30
|
+
--cc-ink-mute-2: #787774;
|
|
31
|
+
--cc-on-primary: #ffffff;
|
|
32
|
+
|
|
33
|
+
/* Semantic */
|
|
34
|
+
--cc-success: #0a9f6e;
|
|
35
|
+
--cc-success-soft: #e4f5ee;
|
|
36
|
+
--cc-warning: #b76e00;
|
|
37
|
+
--cc-warning-soft: #faf1e2;
|
|
38
|
+
--cc-error: #eb5757;
|
|
39
|
+
--cc-error-soft: #fdeaea;
|
|
40
|
+
--cc-info: #0075de;
|
|
41
|
+
|
|
42
|
+
/* Shadows */
|
|
43
|
+
--cc-shadow-blue: #0a1530;
|
|
44
|
+
--cc-shadow-level-1: rgba(10, 21, 48, 0.08) 0 1px 3px;
|
|
45
|
+
--cc-shadow-level-2: rgba(10, 21, 48, 0.08) 0 8px 24px, rgba(10, 21, 48, 0.04) 0 2px 6px;
|
|
46
|
+
--cc-focus-ring: 0 0 0 3px rgba(86, 69, 212, 0.22);
|
|
47
|
+
}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
/* ==========================================================================
|
|
2
|
+
THEME · Raycast — dark shell, white CTA
|
|
3
|
+
Source: awesome-design-md/raycast/DESIGN.md
|
|
4
|
+
Apply by setting <html data-cc-theme="raycast"> (or CcThemeProvider / setTheme).
|
|
5
|
+
========================================================================== */
|
|
6
|
+
|
|
7
|
+
[data-cc-theme='raycast'] {
|
|
8
|
+
/* Brand & Accent */
|
|
9
|
+
--cc-primary: #ffffff;
|
|
10
|
+
--cc-primary-deep: #e8e8e8;
|
|
11
|
+
--cc-primary-press: #d6d6d6;
|
|
12
|
+
--cc-primary-soft: #ffffff;
|
|
13
|
+
--cc-primary-subdued: #3a3a3c;
|
|
14
|
+
--cc-brand-dark-900: #111113;
|
|
15
|
+
--cc-ruby: #ff6363;
|
|
16
|
+
--cc-magenta: #ff8d70;
|
|
17
|
+
--cc-lemon: #f5c451;
|
|
18
|
+
|
|
19
|
+
/* Surface */
|
|
20
|
+
--cc-canvas: #151516;
|
|
21
|
+
--cc-canvas-soft: #1c1c1e;
|
|
22
|
+
--cc-canvas-cream: #222224;
|
|
23
|
+
--cc-hairline: #303033;
|
|
24
|
+
--cc-hairline-input: #3f3f42;
|
|
25
|
+
|
|
26
|
+
/* Text */
|
|
27
|
+
--cc-ink: #f4f4f6;
|
|
28
|
+
--cc-ink-secondary: #cdcdcd;
|
|
29
|
+
--cc-ink-mute: #9c9c9d;
|
|
30
|
+
--cc-ink-mute-2: #6a6b6c;
|
|
31
|
+
--cc-on-primary: #000000;
|
|
32
|
+
|
|
33
|
+
/* Semantic */
|
|
34
|
+
--cc-success: #3ddc97;
|
|
35
|
+
--cc-success-soft: #17352b;
|
|
36
|
+
--cc-warning: #f5c451;
|
|
37
|
+
--cc-warning-soft: #3a3118;
|
|
38
|
+
--cc-error: #ff6363;
|
|
39
|
+
--cc-error-soft: #3c1d1d;
|
|
40
|
+
--cc-info: #ffffff;
|
|
41
|
+
|
|
42
|
+
/* Shadows */
|
|
43
|
+
--cc-shadow-blue: #000000;
|
|
44
|
+
--cc-shadow-level-1: rgba(0, 0, 0, 0.6) 0 1px 3px;
|
|
45
|
+
--cc-shadow-level-2: rgba(0, 0, 0, 0.6) 0 8px 24px, rgba(0, 0, 0, 0.4) 0 2px 6px;
|
|
46
|
+
--cc-focus-ring: 0 0 0 3px rgba(255, 99, 99, 0.35);
|
|
47
|
+
}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
/* ==========================================================================
|
|
2
|
+
THEME · Vercel — monochrome minimal, near-black CTA
|
|
3
|
+
Source: awesome-design-md/vercel/DESIGN.md
|
|
4
|
+
Apply by setting <html data-cc-theme="vercel"> (or CcThemeProvider / setTheme).
|
|
5
|
+
========================================================================== */
|
|
6
|
+
|
|
7
|
+
[data-cc-theme='vercel'] {
|
|
8
|
+
/* Brand & Accent */
|
|
9
|
+
--cc-primary: #171717;
|
|
10
|
+
--cc-primary-deep: #000000;
|
|
11
|
+
--cc-primary-press: #000000;
|
|
12
|
+
--cc-primary-soft: #444444;
|
|
13
|
+
--cc-primary-subdued: #eaeaea;
|
|
14
|
+
--cc-brand-dark-900: #0a0a0a;
|
|
15
|
+
--cc-ruby: #ee0000;
|
|
16
|
+
--cc-magenta: #f81ce5;
|
|
17
|
+
--cc-lemon: #f5a623;
|
|
18
|
+
|
|
19
|
+
/* Surface */
|
|
20
|
+
--cc-canvas: #ffffff;
|
|
21
|
+
--cc-canvas-soft: #fafafa;
|
|
22
|
+
--cc-canvas-cream: #f5f5f5;
|
|
23
|
+
--cc-hairline: #eaeaea;
|
|
24
|
+
--cc-hairline-input: #d4d4d4;
|
|
25
|
+
|
|
26
|
+
/* Text */
|
|
27
|
+
--cc-ink: #171717;
|
|
28
|
+
--cc-ink-secondary: #4d4d4d;
|
|
29
|
+
--cc-ink-mute: #888888;
|
|
30
|
+
--cc-ink-mute-2: #666666;
|
|
31
|
+
--cc-on-primary: #ffffff;
|
|
32
|
+
|
|
33
|
+
/* Semantic */
|
|
34
|
+
--cc-success: #0070f3;
|
|
35
|
+
--cc-success-soft: #e8f3ff;
|
|
36
|
+
--cc-warning: #f5a623;
|
|
37
|
+
--cc-warning-soft: #fdf3e3;
|
|
38
|
+
--cc-error: #ee0000;
|
|
39
|
+
--cc-error-soft: #fbeaea;
|
|
40
|
+
--cc-info: #0070f3;
|
|
41
|
+
|
|
42
|
+
/* Shadows */
|
|
43
|
+
--cc-shadow-blue: #000000;
|
|
44
|
+
--cc-shadow-level-1: rgba(0, 0, 0, 0.06) 0 1px 3px;
|
|
45
|
+
--cc-shadow-level-2: rgba(0, 0, 0, 0.06) 0 8px 24px, rgba(0, 0, 0, 0.03) 0 2px 6px;
|
|
46
|
+
--cc-focus-ring: 0 0 0 3px rgba(0, 112, 243, 0.25);
|
|
47
|
+
}
|