do-ui-design-system 0.1.3 → 0.1.5

package/dist/atoms/Button/Button.svelte

@@ -32,6 +32,6 @@
 	on:click
 >
 	<slot />
-	{label}
-	<i class="icon-loading do-loader" style="{loading ? 'display:inline;' : 'display:none;'}"></i>
+	<span>{label}</span>
+	<i class="icon-loading do-loader" style="{loading ? 'display:inline-block;' : 'display:none;'}"></i>
 </button>

package/dist/atoms/Icons/Icon.svelte

@@ -12,8 +12,8 @@
       <Icon name={icon} color?={color} size?={size}/>
     ```
     - `name`: one of the .icon classes suggested by the component.
-    - `color?`: Any tailwind color class.
-    - `size?`: Any tailwind size class.
+    - `color?`: Any color style (ex. #000).
+    - `size?`: Any size style (ex. 1rem).
   -->
 
   <i    

package/dist/atoms/Icons/Icon.svelte.d.ts

@@ -17,8 +17,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
  *   <Icon name={icon} color?={color} size?={size}/>
  * ```
  * - `name`: one of the .icon classes suggested by the component.
- * - `color?`: Any tailwind color class.
- * - `size?`: Any tailwind size class.
+ * - `color?`: Any color style (ex. #000).
+ * - `size?`: Any size style (ex. 1rem).
  */
 declare const Icon: $$__sveltets_2_IsomorphicComponent<{
     [x: string]: any;

package/dist/do-theme/button.css

@@ -29,25 +29,25 @@
 
 .do-btn-primary {
 	background-color: var(--do-color-primary);
-	border-color: var(--do-color-border-primary);
+	border-color: var(--do-color-primary-border);
 	color: var(--do-text-contrast);
 }
 
 .do-btn-primary:hover {
 	background-color: var(--do-color-primary-hover);
-	border-color: var(--do-color-border-primary-hover);
-	color: var(--color-primary);
+	border-color: var(--do-color-primary-border-hover);
+	color: var(--do-color-primary);
 }
 
 .do-btn-primary:disabled {
 	background-color: var(--do-color-primary-disabled);
 	border-color: var(--do-transparent);
-	color: var(--color-primary-content);
+	color: var(--do-color-primary-content);
 }
 
 .do-btn-secondary {
 	background-color: var(--do-color-secondary);
-	border-color: var(--do-color-border-secondary);
+	border-color: var(--do-color-secondary-border);
 	color: var(--do-text-base);
 }
 
@@ -62,35 +62,30 @@
 	background-color: var(--do-transparent);
 }
 
-.do-btn-neutral {
+.do-btn-link {
 	border-color: var(--do-transparent);
 	background-color: var(--do-transparent);
+}
+
+.do-btn-link span {
 	text-decoration: underline;
 }
 
-.do-btn-neutral:hover {
-	color: var(--color-primary-content);
+.do-btn-link:hover, .do-btn-link:focus {
+	color: var(--do-color-primary-content);
 	border-color: var(--do-transparent);
 	background-color: var(--color-primary);
 }
 
-.do-btn-neutral:is(:disabled, [disabled], .do-btn-disabled):is(:disabled, [disabled], .do-btn-disabled) {
+.do-btn-link:is(:disabled, [disabled], .do-btn-disabled):is(:disabled, [disabled], .do-btn-disabled) {
 	border-color: var(--do-transparent);
 	background-color: var(--do-transparent);
 	/* text-decoration: underline; */
 }
 
-.do-btn-neutral:not(i){
-	text-decoration: underline;
-}
-/* .do-btn-neutral i{
-	text-decoration: none;
-	display: inline-block;
-} */
-
 .do-btn-accent {
 	background-color: var(--do-color-accent);
-	border-color: var(--do-color-border-accent);
+	border-color: var(--do-color-accent-border);
 	color: var(--do-text-contrast);
 }
 .do-btn-accent:is(:disabled, [disabled], .do-btn-disabled):is(:disabled, [disabled], .do-btn-disabled) {
@@ -98,13 +93,23 @@
 	border: 1px solid var(--do-transparent);
 	background-color: var(--do-color-accent-disabled);
 }
-
-.do-btn-accent:hover {
-	color: var(--color-accent);
+.do-btn-accent:hover, .do-btn-accent:focus {
+	color: var(--do-color-accent);
 	border: 1px solid #dbeafe;
 	background-color: var(--color-accent-content);
 }
 
+.do-btn-tertiary {
+	background-color: var(--do-color-tertiary);
+	border-color: var(--do-color-tertiary-border);
+	color: var(--do-color-tertiary-content);
+}
+.do-btn-tertiary:hover, .do-btn-tertiary:focus {
+	background-color: var(--do-color-tertiary-content);
+	border-color: var(--do-color-tertiary-content);
+	color: var(--do-text-contrast);
+}
+
 .do-loader {
 	animation: rotation 1s linear infinite;
 }

package/dist/do-theme/var-light.css

@@ -1,12 +1,29 @@
 :root {
     --do-color-primary: #27272A;
     --do-color-primary-content: #FAFAFA;
+    --do-color-primary-content-hover: #f5f5f5;
+    --do-color-primary-border: #52525B;
+    --do-color-primary-border-hover: #E4E4E7;
+    --do-color-primary-disabled: #a4a4a6;
+
     --do-color-secondary: #FAFAFA;
     --do-color-secondary-content: #27272A;
-    --do-color-neutral: #FAFAFA;
-    --do-color-neutral-content: none;
+    --do-color-secondary-content-hover: #3e3e45;
+    --do-color-secondary-border: #F4F4F5;
+    --do-color-secondary-border-hover: #71717A;
+
+    --do-color-tertiary: #EFF6FF;
+    --do-color-tertiary-content: #1D4ED8;
+    --do-color-tertiary-border: #DBEAFE;
+
+    --do-color-link: #FAFAFA;
+    --do-color-link-content: none;
+
     --do-color-accent: #1D4ED8;
     --do-color-accent-content: #EFF6FF;
+    --do-color-accent-border: #2563EB;
+    --do-color-accent-border-hover: #3B82F6;
+    --do-color-accent-disabled: #a4b6ed;
 
     
     /* base sizes */
@@ -17,22 +34,9 @@
     --radius-selector: 0.25rem;
     --radius-field: 0.25rem;
     --radius-box: 0.25rem;
-    
-    /*hover color*/
-    --do-color-primary-hover: #f5f5f5;
-    --do-color-secondary-hover: #3e3e45;
-    /*disabled color*/
-    --do-color-primary-disabled: #a4a4a6;
-    --do-color-accent-disabled: #a4b6ed;
-    /*border color*/
-    --do-color-border-primary: #52525B;
-    --do-color-border-primary-hover: #E4E4E7;
-    --do-color-border-secondary: #F4F4F5;
-    --do-color-border-secondary-hover: #71717A;
-    --do-color-border-accent: #2563EB;
-    --do-color-border-accent-hover: #3B82F6;
+
     /*styles*/
-    --do-transparent: transparent;
     --do-text-base: #27272A;
     --do-text-contrast: #fff;
+    --do-transparent: transparent;
 }

package/dist/molecules/IconButton/IconButton.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Button, Icon } from '../../atoms';
+	import { Button, Icon } from '../../atoms/index.js';
 	import type { iProps } from './iProps.ts';
 
 	export let variant: iProps['variant'] = 'do-btn-primary';
@@ -18,7 +18,7 @@
 		```Svelte
 		<IconButton label?={'text'} variant?={'variant'} size?={'size'} on:click={()=>{}} disabled?={disabled} loading?={loading} iconName?={'iconName'} iconSize?={'iconSize'} />
 		```
-		- `variant?`: 'btn-primary' | 'btn-secondary' | 'do-btn-tertiary' | 'btn-accent' | 'btn-neutral'
+		- `variant?`: 'do-btn-primary' | 'do-btn-secondary' | 'do-btn-tertiary' | 'do-btn-accent' | 'do-btn-neutral'
 		- `size?`: rem units
 		- `label?`: string
 		- `disabled?`: boolean

package/dist/molecules/IconButton/IconButton.svelte.d.ts

@@ -16,7 +16,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
  * ```Svelte
  * <IconButton label?={'text'} variant?={'variant'} size?={'size'} on:click={()=>{}} disabled?={disabled} loading?={loading} iconName?={'iconName'} iconSize?={'iconSize'} />
  * ```
- * - `variant?`: 'btn-primary' | 'btn-secondary' | 'do-btn-tertiary' | 'btn-accent' | 'btn-neutral'
+ * - `variant?`: 'do-btn-primary' | 'do-btn-secondary' | 'do-btn-tertiary' | 'do-btn-accent' | 'do-btn-neutral'
  * - `size?`: rem units
  * - `label?`: string
  * - `disabled?`: boolean
@@ -30,8 +30,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
  */
 declare const IconButton: $$__sveltets_2_IsomorphicComponent<{
     [x: string]: any;
-    variant?: string | undefined;
-    size?: string | undefined;
+    variant?: "do-btn-primary" | "do-btn-secondary" | "do-btn-tertiary" | "do-btn-link" | "do-btn-accent" | undefined;
+    size?: "do-btn-sm" | "do-btn-md" | "do-btn-lg" | undefined;
     label?: string | undefined;
     disabled?: boolean | undefined;
     loading?: boolean | undefined;

package/dist/molecules/IconButton/iProps.d.ts

@@ -1,8 +1,8 @@
 import type { IconNames } from '../../do-theme/icomoon/iconList.ts';
 import type { HTMLButtonAttributes } from 'svelte/elements';
 export interface iProps extends HTMLButtonAttributes {
-    variant?: 'do-btn-primary' | 'do-btn-secondary' | 'do-btn-tertiary' | 'do-btn-link' | 'do-btn-accent' | string;
-    size?: 'do-btn-sm' | 'do-btn-md' | 'do-btn-lg' | string;
+    variant?: 'do-btn-primary' | 'do-btn-secondary' | 'do-btn-tertiary' | 'do-btn-link' | 'do-btn-accent';
+    size?: 'do-btn-sm' | 'do-btn-md' | 'do-btn-lg';
     label?: string;
     disabled?: boolean;
     loading?: boolean;

package/dist/molecules/IconButton/iProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"iProps.d.ts","sourceRoot":"","sources":["../../../src/lib/molecules/IconButton/iProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AACnE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAE5D,MAAM,WAAW,MAAO,SAAQ,oBAAoB;IACnD,OAAO,CAAC,EAAE,gBAAgB,GAAG,kBAAkB,GAAG,iBAAiB,GAAG,aAAa,GAAG,eAAe,GAAG,MAAM,CAAC;IAC/G,IAAI,CAAC,EAAE,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,MAAM,CAAC;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB"}
+{"version":3,"file":"iProps.d.ts","sourceRoot":"","sources":["../../../src/lib/molecules/IconButton/iProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AACnE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAE5D,MAAM,WAAW,MAAO,SAAQ,oBAAoB;IACnD,OAAO,CAAC,EAAE,gBAAgB,GAAG,kBAAkB,GAAG,iBAAiB,GAAG,aAAa,GAAG,eAAe,CAAC;IACtG,IAAI,CAAC,EAAE,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "do-ui-design-system",
-	"version": "0.1.3",
+	"version": "0.1.5",
 	"description": "Design system en Svelte + CSS + Storybook",
 	"author": "Data Observatory",
 	"license": "MIT",
@@ -37,7 +37,8 @@
 	"exports": {
 		".": {
 			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js"
+			"svelte": "./dist/index.js",
+			"style": "./dist/do-theme/index.css"
 		},
 		"./atoms": {
 			"svelte": "./dist/atoms/index.js"
@@ -45,9 +46,7 @@
 		"./molecules": {
 			"svelte": "./dist/molecules/index.js"
 		},
-		"./do-theme": {
-			"styles": "./dist/do-theme/index.css"
-		}
+		"./do-theme": "./dist/do-theme/index.css"
 	},
 	"type": "module",
 	"peerDependencies": {