@awenovations/aura 0.0.5 → 0.0.7
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/button/button.stories.svelte +6 -0
- package/dist/button/button.svelte +5 -0
- package/dist/button/button.svelte.d.ts +1 -0
- package/dist/divider/divider.stories.svelte +40 -0
- package/dist/divider/divider.stories.svelte.d.ts +28 -0
- package/dist/divider/divider.svelte +49 -0
- package/dist/divider/divider.svelte.d.ts +21 -0
- package/dist/divider/props.d.ts +2 -0
- package/dist/divider/props.js +1 -0
- package/dist/icons/google-color-large.svg +13 -0
- package/dist/icons/google-color-medium.svg +13 -0
- package/dist/icons/google-color-small.svg +18 -0
- package/dist/icons/meta.json +1 -1
- package/dist/link/link.stories.svelte +20 -0
- package/dist/link/link.stories.svelte.d.ts +27 -0
- package/dist/link/link.svelte +18 -0
- package/dist/link/link.svelte.d.ts +20 -0
- package/dist/text-field/text-field.svelte.d.ts +1 -1
- package/dist/tokens/_variables.css +34 -20
- package/package.json +4 -1
|
@@ -94,6 +94,12 @@ export const meta = {
|
|
|
94
94
|
</div>
|
|
95
95
|
</Story>
|
|
96
96
|
|
|
97
|
+
<Story name="Left Align">
|
|
98
|
+
<div style="display: flex; flex-direction: column; gap: 10px; width: 300px;">
|
|
99
|
+
<Button fullWidth left />
|
|
100
|
+
</div>
|
|
101
|
+
</Story>
|
|
102
|
+
|
|
97
103
|
<Story
|
|
98
104
|
name="Pimary Filled"
|
|
99
105
|
args={{
|
|
@@ -5,6 +5,7 @@ export let variant = "primary";
|
|
|
5
5
|
export let size = "default";
|
|
6
6
|
export let fullWidth = false;
|
|
7
7
|
export let loading = false;
|
|
8
|
+
export let left = false;
|
|
8
9
|
const dispatch = createEventDispatcher();
|
|
9
10
|
function onClick(event) {
|
|
10
11
|
dispatch("click", event);
|
|
@@ -22,6 +23,7 @@ function onClick(event) {
|
|
|
22
23
|
class:isDefaultSize={size === 'default'}
|
|
23
24
|
class:isSmall={size === 'small'}
|
|
24
25
|
class:fullWidth
|
|
26
|
+
class:left
|
|
25
27
|
on:click={onClick}
|
|
26
28
|
class={`aura-button ${$$restProps.class}`}
|
|
27
29
|
>
|
|
@@ -125,6 +127,9 @@ function onClick(event) {
|
|
|
125
127
|
.aura-button.fullWidth .content {
|
|
126
128
|
justify-content: center;
|
|
127
129
|
}
|
|
130
|
+
.aura-button.fullWidth.left .content {
|
|
131
|
+
justify-content: left;
|
|
132
|
+
}
|
|
128
133
|
.aura-button .content {
|
|
129
134
|
display: flex;
|
|
130
135
|
gap: var(--gap);
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
<script context="module">import "../../app.scss";
|
|
2
|
+
import Divider from "./divider.svelte";
|
|
3
|
+
import { dividerDirection } from "./props.ts";
|
|
4
|
+
export const meta = {
|
|
5
|
+
title: "AURA/Divider",
|
|
6
|
+
component: Divider,
|
|
7
|
+
tags: ["autodocs"],
|
|
8
|
+
argTypes: {
|
|
9
|
+
direction: { control: "select", options: dividerDirection }
|
|
10
|
+
}
|
|
11
|
+
};
|
|
12
|
+
</script>
|
|
13
|
+
|
|
14
|
+
<script>import { Story, Template } from "@storybook/addon-svelte-csf";
|
|
15
|
+
</script>
|
|
16
|
+
|
|
17
|
+
<Template let:args>
|
|
18
|
+
<div style='height: 7rem; display: flex;'>
|
|
19
|
+
<Divider {...args} />
|
|
20
|
+
</div>
|
|
21
|
+
</Template>
|
|
22
|
+
|
|
23
|
+
<Story name="Default Divider / Horizontal Divider" />
|
|
24
|
+
|
|
25
|
+
<Story
|
|
26
|
+
name="Vertical Divider"
|
|
27
|
+
args={{
|
|
28
|
+
direction: 'vertical'
|
|
29
|
+
}}
|
|
30
|
+
/>
|
|
31
|
+
|
|
32
|
+
<Story name="Horizontal Text Divider">
|
|
33
|
+
<Divider>Divider With Text</Divider>
|
|
34
|
+
</Story>
|
|
35
|
+
|
|
36
|
+
<Story name="Vertical Text Divider">
|
|
37
|
+
<div style='height: 7rem; display: flex;'>
|
|
38
|
+
<Divider direction="vertical">Divider With Text</Divider>
|
|
39
|
+
</div>
|
|
40
|
+
</Story>
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
2
|
+
import '../../app.scss';
|
|
3
|
+
export declare const meta: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: typeof Divider;
|
|
6
|
+
tags: string[];
|
|
7
|
+
argTypes: {
|
|
8
|
+
direction: {
|
|
9
|
+
control: string;
|
|
10
|
+
options: readonly ["vertical", "horizontal"];
|
|
11
|
+
};
|
|
12
|
+
};
|
|
13
|
+
};
|
|
14
|
+
declare const __propDef: {
|
|
15
|
+
props: Record<string, never>;
|
|
16
|
+
events: {
|
|
17
|
+
[evt: string]: CustomEvent<any>;
|
|
18
|
+
};
|
|
19
|
+
slots: {};
|
|
20
|
+
exports?: {} | undefined;
|
|
21
|
+
bindings?: string | undefined;
|
|
22
|
+
};
|
|
23
|
+
export type DividerProps = typeof __propDef.props;
|
|
24
|
+
export type DividerEvents = typeof __propDef.events;
|
|
25
|
+
export type DividerSlots = typeof __propDef.slots;
|
|
26
|
+
export default class Divider extends SvelteComponent<DividerProps, DividerEvents, DividerSlots> {
|
|
27
|
+
}
|
|
28
|
+
export {};
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
<script>export let direction = "horizontal";
|
|
2
|
+
const vertical = direction === "vertical";
|
|
3
|
+
const horizontal = direction === "horizontal";
|
|
4
|
+
</script>
|
|
5
|
+
|
|
6
|
+
<div class:vertical class:horizontal class="aura-divider">
|
|
7
|
+
{#if $$slots.default}
|
|
8
|
+
<div class="text">
|
|
9
|
+
<slot />
|
|
10
|
+
</div>
|
|
11
|
+
{/if}
|
|
12
|
+
</div>
|
|
13
|
+
|
|
14
|
+
<style>.aura-divider {
|
|
15
|
+
--fill: var(--aura-divider-fill);
|
|
16
|
+
--border: 1px solid var(--fill);
|
|
17
|
+
display: flex;
|
|
18
|
+
height: 100%;
|
|
19
|
+
flex: 1;
|
|
20
|
+
}
|
|
21
|
+
.aura-divider .text {
|
|
22
|
+
color: var(--fill);
|
|
23
|
+
}
|
|
24
|
+
.aura-divider:before, .aura-divider:after {
|
|
25
|
+
content: "";
|
|
26
|
+
flex: 1 1;
|
|
27
|
+
margin: auto;
|
|
28
|
+
}
|
|
29
|
+
.aura-divider.horizontal {
|
|
30
|
+
flex-direction: row;
|
|
31
|
+
}
|
|
32
|
+
.aura-divider.horizontal .text {
|
|
33
|
+
margin: 0 0.625rem;
|
|
34
|
+
}
|
|
35
|
+
.aura-divider.horizontal:before, .aura-divider.horizontal:after {
|
|
36
|
+
border-bottom: var(--border);
|
|
37
|
+
transform: translateY(-0.5px);
|
|
38
|
+
}
|
|
39
|
+
.aura-divider.vertical {
|
|
40
|
+
flex-direction: column;
|
|
41
|
+
}
|
|
42
|
+
.aura-divider.vertical .text {
|
|
43
|
+
margin: 0.625rem 0;
|
|
44
|
+
text-align: center;
|
|
45
|
+
}
|
|
46
|
+
.aura-divider.vertical:before, .aura-divider.vertical:after {
|
|
47
|
+
border-right: var(--border);
|
|
48
|
+
transform: translateX(-0.5px);
|
|
49
|
+
}</style>
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
2
|
+
import type * as Props from './props';
|
|
3
|
+
declare const __propDef: {
|
|
4
|
+
props: {
|
|
5
|
+
direction?: Props.DividerDirection;
|
|
6
|
+
};
|
|
7
|
+
events: {
|
|
8
|
+
[evt: string]: CustomEvent<any>;
|
|
9
|
+
};
|
|
10
|
+
slots: {
|
|
11
|
+
default: {};
|
|
12
|
+
};
|
|
13
|
+
exports?: {} | undefined;
|
|
14
|
+
bindings?: string | undefined;
|
|
15
|
+
};
|
|
16
|
+
export type DividerProps = typeof __propDef.props;
|
|
17
|
+
export type DividerEvents = typeof __propDef.events;
|
|
18
|
+
export type DividerSlots = typeof __propDef.slots;
|
|
19
|
+
export default class Divider extends SvelteComponent<DividerProps, DividerEvents, DividerSlots> {
|
|
20
|
+
}
|
|
21
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export const dividerDirection = ['vertical', 'horizontal'];
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<g clip-path="url(#clip0_4433_297)">
|
|
3
|
+
<path d="M22.56 12.25C22.56 11.47 22.49 10.72 22.36 10H12V14.26H17.92C17.66 15.63 16.88 16.79 15.71 17.57V20.34H19.28C21.36 18.42 22.56 15.6 22.56 12.25Z" fill="#4285F4"/>
|
|
4
|
+
<path d="M11.9999 23.0001C14.9699 23.0001 17.4599 22.0201 19.2799 20.3401L15.7099 17.5701C14.7299 18.2301 13.4799 18.6301 11.9999 18.6301C9.13993 18.6301 6.70993 16.7001 5.83993 14.1001H2.17993V16.9401C3.98993 20.5301 7.69993 23.0001 11.9999 23.0001Z" fill="#34A853"/>
|
|
5
|
+
<path d="M5.84 14.0901C5.62 13.4301 5.49 12.7301 5.49 12.0001C5.49 11.2701 5.62 10.5701 5.84 9.91007V7.07007H2.18C1.43 8.55007 1 10.2201 1 12.0001C1 13.7801 1.43 15.4501 2.18 16.9301L5.03 14.7101L5.84 14.0901Z" fill="#FBBC05"/>
|
|
6
|
+
<path d="M11.9999 5.38C13.6199 5.38 15.0599 5.94 16.2099 7.02L19.3599 3.87C17.4499 2.09 14.9699 1 11.9999 1C7.69993 1 3.98993 3.47 2.17993 7.07L5.83993 9.91C6.70993 7.31 9.13993 5.38 11.9999 5.38Z" fill="#EA4335"/>
|
|
7
|
+
</g>
|
|
8
|
+
<defs>
|
|
9
|
+
<clipPath id="clip0_4433_297">
|
|
10
|
+
<rect width="24" height="24" fill="white"/>
|
|
11
|
+
</clipPath>
|
|
12
|
+
</defs>
|
|
13
|
+
</svg>
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<g clip-path="url(#clip0_4433_302)">
|
|
3
|
+
<path d="M16.92 9.1875C16.92 8.6025 16.8675 8.04 16.77 7.5H9V10.695H13.44C13.245 11.7225 12.66 12.5925 11.7825 13.1775V15.255H14.46C16.02 13.815 16.92 11.7 16.92 9.1875Z" fill="#4285F4"/>
|
|
4
|
+
<path d="M9.00001 17.25C11.2275 17.25 13.095 16.515 14.46 15.255L11.7825 13.1775C11.0475 13.6725 10.11 13.9725 9.00001 13.9725C6.85501 13.9725 5.03251 12.525 4.38001 10.575H1.63501V12.705C2.99251 15.3975 5.77501 17.25 9.00001 17.25Z" fill="#34A853"/>
|
|
5
|
+
<path d="M4.38 10.5675C4.215 10.0725 4.1175 9.54749 4.1175 8.99999C4.1175 8.45249 4.215 7.92749 4.38 7.43249V5.30249H1.635C1.0725 6.41249 0.75 7.66499 0.75 8.99999C0.75 10.335 1.0725 11.5875 1.635 12.6975L3.7725 11.0325L4.38 10.5675Z" fill="#FBBC05"/>
|
|
6
|
+
<path d="M9.00001 4.035C10.215 4.035 11.295 4.455 12.1575 5.265L14.52 2.9025C13.0875 1.5675 11.2275 0.75 9.00001 0.75C5.77501 0.75 2.99251 2.6025 1.63501 5.3025L4.38001 7.4325C5.03251 5.4825 6.85501 4.035 9.00001 4.035Z" fill="#EA4335"/>
|
|
7
|
+
</g>
|
|
8
|
+
<defs>
|
|
9
|
+
<clipPath id="clip0_4433_302">
|
|
10
|
+
<rect width="18" height="18" fill="white"/>
|
|
11
|
+
</clipPath>
|
|
12
|
+
</defs>
|
|
13
|
+
</svg>
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<g clip-path="url(#clip0_4439_15)">
|
|
3
|
+
<g clip-path="url(#clip1_4439_15)">
|
|
4
|
+
<path d="M13.16 7.14575C13.16 6.69075 13.1192 6.25325 13.0433 5.83325H7V8.31825H10.4533C10.3017 9.11742 9.84667 9.79408 9.16417 10.2491V11.8649H11.2467C12.46 10.7449 13.16 9.09992 13.16 7.14575Z" fill="#4285F4"/>
|
|
5
|
+
<path d="M7.00006 13.4168C8.73256 13.4168 10.1851 12.8451 11.2467 11.8651L9.16423 10.2493C8.59256 10.6343 7.86339 10.8676 7.00006 10.8676C5.33173 10.8676 3.91423 9.74176 3.40673 8.2251H1.27173V9.88176C2.32756 11.9759 4.49173 13.4168 7.00006 13.4168Z" fill="#34A853"/>
|
|
6
|
+
<path d="M3.40659 8.21927C3.27825 7.83427 3.20242 7.42593 3.20242 7.0001C3.20242 6.57427 3.27825 6.16593 3.40659 5.78093V4.12427H1.27159C0.834085 4.9876 0.583252 5.96177 0.583252 7.0001C0.583252 8.03843 0.834085 9.0126 1.27159 9.87593L2.93409 8.58093L3.40659 8.21927Z" fill="#FBBC05"/>
|
|
7
|
+
<path d="M7.00006 3.13825C7.94506 3.13825 8.78506 3.46492 9.45589 4.09492L11.2934 2.25742C10.1792 1.21909 8.73256 0.583252 7.00006 0.583252C4.49173 0.583252 2.32756 2.02409 1.27173 4.12409L3.40673 5.78075C3.91423 4.26409 5.33173 3.13825 7.00006 3.13825Z" fill="#EA4335"/>
|
|
8
|
+
</g>
|
|
9
|
+
</g>
|
|
10
|
+
<defs>
|
|
11
|
+
<clipPath id="clip0_4439_15">
|
|
12
|
+
<rect width="14" height="14" fill="white"/>
|
|
13
|
+
</clipPath>
|
|
14
|
+
<clipPath id="clip1_4439_15">
|
|
15
|
+
<rect width="14" height="14" fill="white"/>
|
|
16
|
+
</clipPath>
|
|
17
|
+
</defs>
|
|
18
|
+
</svg>
|
package/dist/icons/meta.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"lastGenerated":
|
|
1
|
+
{"lastGenerated":1721512302780,"icons":[{"name":"arrow-circle-left","size":"large"},{"name":"arrow-circle-left","size":"medium"},{"name":"arrow-circle-left","size":"small"},{"name":"bug","size":"large"},{"name":"bug","size":"medium"},{"name":"bug","size":"small"},{"name":"caret-down","size":"large"},{"name":"caret-down","size":"medium"},{"name":"caret-down","size":"small"},{"name":"circle-plus","size":"large"},{"name":"circle-plus","size":"medium"},{"name":"circle-plus","size":"small"},{"name":"google-color","size":"large"},{"name":"google-color","size":"medium"},{"name":"google-color","size":"small"},{"name":"microsoft-color","size":"large"},{"name":"microsoft-color","size":"medium"},{"name":"microsoft-color","size":"small"},{"name":"plan","size":"large"},{"name":"plan","size":"medium"},{"name":"plan","size":"small"},{"name":"user-story","size":"large"},{"name":"user-story","size":"medium"},{"name":"user-story","size":"small"}]}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<script context="module">import "../../app.scss";
|
|
2
|
+
import Link from "./link.svelte";
|
|
3
|
+
export const meta = {
|
|
4
|
+
title: "AURA/Link",
|
|
5
|
+
component: Link,
|
|
6
|
+
tags: ["autodocs"],
|
|
7
|
+
argTypes: {
|
|
8
|
+
href: { control: "input:string" }
|
|
9
|
+
}
|
|
10
|
+
};
|
|
11
|
+
</script>
|
|
12
|
+
|
|
13
|
+
<script>import { Story, Template } from "@storybook/addon-svelte-csf";
|
|
14
|
+
</script>
|
|
15
|
+
|
|
16
|
+
<Template let:args>
|
|
17
|
+
<Link href="#">Example Link</Link>
|
|
18
|
+
</Template>
|
|
19
|
+
|
|
20
|
+
<Story name="Default Link" />
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
2
|
+
import '../../app.scss';
|
|
3
|
+
export declare const meta: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: typeof Link;
|
|
6
|
+
tags: string[];
|
|
7
|
+
argTypes: {
|
|
8
|
+
href: {
|
|
9
|
+
control: string;
|
|
10
|
+
};
|
|
11
|
+
};
|
|
12
|
+
};
|
|
13
|
+
declare const __propDef: {
|
|
14
|
+
props: Record<string, never>;
|
|
15
|
+
events: {
|
|
16
|
+
[evt: string]: CustomEvent<any>;
|
|
17
|
+
};
|
|
18
|
+
slots: {};
|
|
19
|
+
exports?: {} | undefined;
|
|
20
|
+
bindings?: string | undefined;
|
|
21
|
+
};
|
|
22
|
+
export type LinkProps = typeof __propDef.props;
|
|
23
|
+
export type LinkEvents = typeof __propDef.events;
|
|
24
|
+
export type LinkSlots = typeof __propDef.slots;
|
|
25
|
+
export default class Link extends SvelteComponent<LinkProps, LinkEvents, LinkSlots> {
|
|
26
|
+
}
|
|
27
|
+
export {};
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
<script>import classNames from "classnames";
|
|
2
|
+
export let href;
|
|
3
|
+
</script>
|
|
4
|
+
|
|
5
|
+
<a {href} {...$$props} class={classNames($$props.class, 'aura-link')}>
|
|
6
|
+
<slot />
|
|
7
|
+
</a>
|
|
8
|
+
|
|
9
|
+
<style>.aura-link {
|
|
10
|
+
color: var(--aura-link-color);
|
|
11
|
+
text-decoration: none;
|
|
12
|
+
}
|
|
13
|
+
.aura-link:hover, .aura-link:active {
|
|
14
|
+
text-decoration: underline;
|
|
15
|
+
}
|
|
16
|
+
.aura-link:active {
|
|
17
|
+
font: var(--aura-default-semibold);
|
|
18
|
+
}</style>
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: Omit<Partial<import("svelte/elements").HTMLAnchorAttributes>, "href"> & {
|
|
4
|
+
href: string;
|
|
5
|
+
};
|
|
6
|
+
events: {
|
|
7
|
+
[evt: string]: CustomEvent<any>;
|
|
8
|
+
};
|
|
9
|
+
slots: {
|
|
10
|
+
default: {};
|
|
11
|
+
};
|
|
12
|
+
exports?: {} | undefined;
|
|
13
|
+
bindings?: string | undefined;
|
|
14
|
+
};
|
|
15
|
+
export type LinkProps = typeof __propDef.props;
|
|
16
|
+
export type LinkEvents = typeof __propDef.events;
|
|
17
|
+
export type LinkSlots = typeof __propDef.slots;
|
|
18
|
+
export default class Link extends SvelteComponent<LinkProps, LinkEvents, LinkSlots> {
|
|
19
|
+
}
|
|
20
|
+
export {};
|
|
@@ -2,7 +2,7 @@ import { SvelteComponent } from "svelte";
|
|
|
2
2
|
import { type Mode } from '../form-item/form-item.svelte';
|
|
3
3
|
declare const __propDef: {
|
|
4
4
|
props: Omit<import("svelte/elements").HTMLInputAttributes, "size" | "class" | "value" | `on:${string}` | "type"> & {
|
|
5
|
-
type?: "number" | "
|
|
5
|
+
type?: "number" | "text" | "search" | "time" | "color" | "date" | "datetime-local" | "email" | "file" | "hidden" | "month" | "password" | "range" | "tel" | "url" | "week";
|
|
6
6
|
value?: string | number | boolean;
|
|
7
7
|
size?: any;
|
|
8
8
|
showErrors?: boolean;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Sat Jul 20 2024 21:55:38 GMT+0000 (Coordinated Universal Time)
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
:root {
|
|
@@ -62,7 +62,21 @@
|
|
|
62
62
|
--aura-alert-border-radius: 5px;
|
|
63
63
|
--aura-alert-padding-horizontal: 16px;
|
|
64
64
|
--aura-alert-padding-vertical: 12px;
|
|
65
|
-
--aura-alert-drop-shadow: 0px 6px 6px 0px rgba(0, 0, 0, 0.20);
|
|
65
|
+
--aura-alert-drop-shadow: 0px 6px 6px 0px rgba(0, 0, 0, 0.20);
|
|
66
|
+
--aura-link-color: #005da8ff;
|
|
67
|
+
--aura-link-color: #00a5f0ff;
|
|
68
|
+
--aura-link-focused-decoration: underline;
|
|
69
|
+
--aura-link-hovered-decoration: underline;
|
|
70
|
+
--aura-tooltip-background: #ffffffff;
|
|
71
|
+
--aura-tooltip-drop-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.10);
|
|
72
|
+
--aura-tooltip-border: #c1c2c4ff;
|
|
73
|
+
--aura-font-color: #1f1f1fff;
|
|
74
|
+
--aura-tooltip-background: #a3a4a7ff;
|
|
75
|
+
--aura-tooltip-drop-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.50);
|
|
76
|
+
--aura-tooltip-border: #c1c2c4ff;
|
|
77
|
+
--aura-font-color: #292c33ff;
|
|
78
|
+
--aura-divider-fill: #c1c2c4ff;
|
|
79
|
+
--aura-divider-fill: #a3a4a7ff; --aura-light-primary-10: #f5e1e1ff;
|
|
66
80
|
--aura-light-primary-20: #eecacaff;
|
|
67
81
|
--aura-light-primary-30: #e6b3b3ff;
|
|
68
82
|
--aura-light-primary-40: #cd6868ff;
|
|
@@ -132,10 +146,10 @@
|
|
|
132
146
|
--aura-dark-secondary-30: #4f6ba0ff;
|
|
133
147
|
--aura-dark-secondary-20: #244789ff;
|
|
134
148
|
--aura-dark-secondary-10: #0a317bff;
|
|
135
|
-
--aura-dark-tertiary-70: #
|
|
136
|
-
--aura-dark-tertiary-60: #
|
|
137
|
-
--aura-dark-tertiary-50: #
|
|
138
|
-
--aura-dark-tertiary-40: #
|
|
149
|
+
--aura-dark-tertiary-70: #dfe0e1ff;
|
|
150
|
+
--aura-dark-tertiary-60: #c1c2c4ff;
|
|
151
|
+
--aura-dark-tertiary-50: #a3a4a7ff;
|
|
152
|
+
--aura-dark-tertiary-40: #84868aff;
|
|
139
153
|
--aura-dark-tertiary-30: #66686dff;
|
|
140
154
|
--aura-dark-tertiary-20: #474a50ff;
|
|
141
155
|
--aura-dark-tertiary-10: #292c33ff;
|
|
@@ -172,9 +186,9 @@
|
|
|
172
186
|
--aura-dark-warning-10: #835200ff;
|
|
173
187
|
--aura-dark-background: #1f1f1fff;
|
|
174
188
|
--aura-dark-container-drop-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.50);
|
|
175
|
-
--aura-dark-container-background: #
|
|
189
|
+
--aura-dark-container-background: #a3a4a7ff;
|
|
176
190
|
--aura-dark-container-border-color: #c1c2c4ff;
|
|
177
|
-
--aura-dark-label-text-color: #
|
|
191
|
+
--aura-dark-label-text-color: #dfe0e1ff;
|
|
178
192
|
}
|
|
179
193
|
|
|
180
194
|
@media (prefers-color-scheme: light) {
|
|
@@ -255,10 +269,10 @@
|
|
|
255
269
|
--aura-secondary-30: #4f6ba0ff;
|
|
256
270
|
--aura-secondary-20: #244789ff;
|
|
257
271
|
--aura-secondary-10: #0a317bff;
|
|
258
|
-
--aura-tertiary-70: #
|
|
259
|
-
--aura-tertiary-60: #
|
|
260
|
-
--aura-tertiary-50: #
|
|
261
|
-
--aura-tertiary-40: #
|
|
272
|
+
--aura-tertiary-70: #dfe0e1ff;
|
|
273
|
+
--aura-tertiary-60: #c1c2c4ff;
|
|
274
|
+
--aura-tertiary-50: #a3a4a7ff;
|
|
275
|
+
--aura-tertiary-40: #84868aff;
|
|
262
276
|
--aura-tertiary-30: #66686dff;
|
|
263
277
|
--aura-tertiary-20: #474a50ff;
|
|
264
278
|
--aura-tertiary-10: #292c33ff;
|
|
@@ -295,9 +309,9 @@
|
|
|
295
309
|
--aura-warning-10: #835200ff;
|
|
296
310
|
--aura-background: #1f1f1fff;
|
|
297
311
|
--aura-container-drop-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.50);
|
|
298
|
-
--aura-container-background: #
|
|
312
|
+
--aura-container-background: #a3a4a7ff;
|
|
299
313
|
--aura-container-border-color: #c1c2c4ff;
|
|
300
|
-
--aura-label-text-color: #
|
|
314
|
+
--aura-label-text-color: #dfe0e1ff;
|
|
301
315
|
}
|
|
302
316
|
}
|
|
303
317
|
|
|
@@ -376,10 +390,10 @@
|
|
|
376
390
|
--aura-secondary-30: #4f6ba0ff;
|
|
377
391
|
--aura-secondary-20: #244789ff;
|
|
378
392
|
--aura-secondary-10: #0a317bff;
|
|
379
|
-
--aura-tertiary-70: #
|
|
380
|
-
--aura-tertiary-60: #
|
|
381
|
-
--aura-tertiary-50: #
|
|
382
|
-
--aura-tertiary-40: #
|
|
393
|
+
--aura-tertiary-70: #dfe0e1ff;
|
|
394
|
+
--aura-tertiary-60: #c1c2c4ff;
|
|
395
|
+
--aura-tertiary-50: #a3a4a7ff;
|
|
396
|
+
--aura-tertiary-40: #84868aff;
|
|
383
397
|
--aura-tertiary-30: #66686dff;
|
|
384
398
|
--aura-tertiary-20: #474a50ff;
|
|
385
399
|
--aura-tertiary-10: #292c33ff;
|
|
@@ -416,9 +430,9 @@
|
|
|
416
430
|
--aura-warning-10: #835200ff;
|
|
417
431
|
--aura-background: #1f1f1fff;
|
|
418
432
|
--aura-container-drop-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.50);
|
|
419
|
-
--aura-container-background: #
|
|
433
|
+
--aura-container-background: #a3a4a7ff;
|
|
420
434
|
--aura-container-border-color: #c1c2c4ff;
|
|
421
|
-
--aura-label-text-color: #
|
|
435
|
+
--aura-label-text-color: #dfe0e1ff;
|
|
422
436
|
}
|
|
423
437
|
|
|
424
438
|
/* http://meyerweb.com/eric/tools/css/reset/
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@awenovations/aura",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.7",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"dev": "vite dev",
|
|
6
6
|
"build": "npm run transform-tokens && vite build && npm run package",
|
|
@@ -40,6 +40,8 @@
|
|
|
40
40
|
"./progress-ring.svelte": "./dist/progress/progress-ring.svelte",
|
|
41
41
|
"./skeleton.svelte": "./dist/skeleton/skeleton.svelte",
|
|
42
42
|
"./alert.svelte": "./dist/alert/alert.svelte",
|
|
43
|
+
"./link.svelte": "./dist/link/link.svelte",
|
|
44
|
+
"./divider.svelte": "./dist/divider/divider.svelte",
|
|
43
45
|
"./dist/tokens/_variables.css": {
|
|
44
46
|
"import": "./dist/tokens/_variables.css",
|
|
45
47
|
"require": "./dist/tokens/_variables.css"
|
|
@@ -94,6 +96,7 @@
|
|
|
94
96
|
"@floating-ui/dom": "^1.6.6",
|
|
95
97
|
"@storybook/addon-svelte-csf": "^4.1.3",
|
|
96
98
|
"@storybook/addon-themes": "^8.1.11",
|
|
99
|
+
"classnames": "^2.5.1",
|
|
97
100
|
"replace-in-file": "^8.0.1",
|
|
98
101
|
"reset-css": "^5.0.2"
|
|
99
102
|
}
|