@bcc-code/component-library-vue 0.8.11 → 0.8.12

package/dist/theme.css

@@ -590,78 +590,83 @@
 
 /* === ./styles/utilities.css === */
 @utility center {
-    @apply flex items-center justify-center;
-    
-    &.top {
-        @apply items-start;
-    }
+	@apply flex items-center justify-center;
 
-    &.bottom {
-        @apply items-end;
-    }
+	&.top {
+		@apply items-start;
+	}
 
-    &.left {
-        @apply justify-start;
-    }
+	&.bottom {
+		@apply items-end;
+	}
 
-    &.right {
-        @apply justify-end;
-    }
+	&.left {
+		@apply justify-start;
+	}
 
-    &.stretch {
-        @apply items-stretch;
-    }
+	&.right {
+		@apply justify-end;
+	}
+
+	&.stretch {
+		@apply items-stretch;
+	}
 }
 
 @utility col {
-    @apply flex flex-col items-center justify-center;
+	@apply flex flex-col items-center justify-center;
 
-    &.left {
-        @apply items-start;
-    }
+	&.left {
+		@apply items-start;
+	}
 
-    &.right {
-        @apply items-end;
-    }
+	&.right {
+		@apply items-end;
+	}
 
-    &.top {
-        @apply justify-start;
-    }
+	&.top {
+		@apply justify-start;
+	}
 
-    &.bottom {
-        @apply justify-end;
-    }
+	&.bottom {
+		@apply justify-end;
+	}
 }
 
 @utility between {
-    @apply justify-between;
+	@apply justify-between;
 }
 
 @utility hide-scrollbar {
-    -ms-overflow-style: none; /* for Internet Explorer, Edge */
-    scrollbar-width: none; /* for Firefox */
-    overflow-y: scroll;
+	-ms-overflow-style: none; /* for Internet Explorer, Edge */
+	scrollbar-width: none; /* for Firefox */
+	overflow-y: scroll;
 
-    &::-webkit-scrollbar {
-        display: none; /* for Chrome, Safari, and Opera */
-    }
+	&::-webkit-scrollbar {
+		display: none; /* for Chrome, Safari, and Opera */
+	}
 }
 
 /* Capitalize first letter */
 @utility capital {
-    @apply inline-block;
+	@apply inline-block;
 
-    &::first-letter {
-        text-transform: uppercase;
-    }
+	&::first-letter {
+		text-transform: uppercase;
+	}
+
+	&.bcc-badge {
+		@apply inline-flex;
+	}
 }
 
 /* Inset 0 */
 @utility inset-0 {
-	@apply left-0 right-0 top-0 bottom-0;
+	@apply top-0 right-0 bottom-0 left-0;
 }
 
 
+
 /* === ./styles/contexts.css === */
 /* Auto-generated from src/figma-modes. Do not edit by hand. */
 /* Run: pnpm run generate:context-css */
@@ -1723,88 +1728,102 @@
 
 
 /* === ./styles/context.css === */
-
 @theme {
-  --color-brand-100: var(--color-bcc-100);
-  --color-brand-200: var(--color-bcc-200);
-  --color-brand-300: var(--color-bcc-300);
-  --color-brand-400: var(--color-bcc-400);
-  --color-brand-500: var(--color-bcc-500);
-  --color-brand-600: var(--color-bcc-600);
-  --color-brand-700: var(--color-bcc-700);
-  --color-brand-800: var(--color-bcc-800);
-  --color-brand-900: var(--color-bcc-900);
-  --color-brand-1000: var(--color-bcc-1000);
+	--color-brand-100: var(--color-bcc-100);
+	--color-brand-200: var(--color-bcc-200);
+	--color-brand-300: var(--color-bcc-300);
+	--color-brand-400: var(--color-bcc-400);
+	--color-brand-500: var(--color-bcc-500);
+	--color-brand-600: var(--color-bcc-600);
+	--color-brand-700: var(--color-bcc-700);
+	--color-brand-800: var(--color-bcc-800);
+	--color-brand-900: var(--color-bcc-900);
+	--color-brand-1000: var(--color-bcc-1000);
 }
 
 /** DEFAULT CONTEXTS */
 @utility ctx-default {
-  @apply ctx-neutral-subtlest;
+	@apply ctx-neutral-subtlest;
+}
+@utility ctx-success {
+	@apply ctx-success-subtlest;
+}
+@utility ctx-danger {
+	@apply ctx-danger-subtlest;
+}
+@utility ctx-warning {
+	@apply ctx-warning-subtlest;
+}
+@utility ctx-info {
+	@apply ctx-info-subtlest;
 }
-@utility ctx-success { @apply ctx-success-subtlest; }
-@utility ctx-danger { @apply ctx-danger-subtlest; }
-@utility ctx-warning { @apply ctx-warning-subtlest; }
-@utility ctx-info { @apply ctx-info-subtlest; }
 
 @utility text-ctx {
-  color: var(--ctx-text);
+	color: var(--ctx-text);
 }
 
 @utility text-ctx-bold {
-  color: var(--ctx-text-bold);
+	color: var(--ctx-text-bold);
 }
 
 @utility bg-ctx {
-  background-color: var(--ctx-background);
+	background-color: var(--ctx-background);
 }
 
 @utility border-ctx {
-  border-color: var(--ctx-border);
+	border-color: var(--ctx-border);
 }
 
 @utility shadow-ctx {
-  --tw-shadow-color: var(--ctx-shadow);
+	--tw-shadow-color: var(--ctx-shadow);
 }
 
 @utility ctx {
-  background-color: var(--ctx-background);
-  color: var(--ctx-text);
-  border-color: var(--ctx-border);
+	background-color: var(--ctx-background);
+	color: var(--ctx-text);
+	border-color: var(--ctx-border);
 }
 
 @utility ctx-gradient {
-  background: linear-gradient(225deg, var(--ctx-background) 0%, var(--ctx-gradient) 100%);
+	background: linear-gradient(225deg, var(--ctx-background) 0%, var(--ctx-gradient) 100%);
+
+	@variant dark {
+		background: linear-gradient(225deg, var(--ctx-gradient) 0%, var(--ctx-background) 100%);
+	}
 }
 
 @utility ctx-raised {
-  box-shadow: 0 1px 1px 0 var(--ctx-shadow), 0 0 1px 0 var(--ctx-shadow);
+	box-shadow:
+		0 1px 1px 0 var(--ctx-shadow),
+		0 0 1px 0 var(--ctx-shadow);
 }
 
 @utility ctx-flat {
-  --ctx-background: transparent;
+	--ctx-background: transparent;
 
-  @variant hover {
-    --ctx-background: var(--ctx-background-hover);
-  }
+	@variant hover {
+		--ctx-background: var(--ctx-background-hover);
+	}
 }
 
 @utility clickable {
-  cursor: pointer;
+	cursor: pointer;
 }
 
 .clickable:hover {
-  --ctx-background: var(--ctx-background-hover);
-  --ctx-text: var(--ctx-text-hover);
-  --ctx-border: var(--ctx-border-hover);
+	--ctx-background: var(--ctx-background-hover);
+	--ctx-text: var(--ctx-text-hover);
+	--ctx-border: var(--ctx-border-hover);
 }
 
 .clickable:active {
-  --ctx-background: var(--ctx-background-pressed);
-  --ctx-text: var(--ctx-text-pressed);
-  --ctx-border: var(--ctx-border-pressed);
+	--ctx-background: var(--ctx-background-pressed);
+	--ctx-text: var(--ctx-text-pressed);
+	--ctx-border: var(--ctx-border-pressed);
 }
 
 
+
 /* === ./styles/fonts.css === */
 @utility heading-xs { font: var(--heading-xs); }
 @utility heading-sm { font: var(--heading-sm); }
@@ -1972,10 +1991,6 @@
 
 		@apply bg-ctx text-ctx;
 	}
-
-	.bcc-badge.capital {
-		@apply inline-flex;
-	}
 	.bcc-badge.gradient {
 		@apply ctx-gradient;
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bcc-code/component-library-vue",
-	"version": "0.8.11",
+	"version": "0.8.12",
 	"type": "module",
 	"description": "Extended Vue component library based on PrimeVue and BCC design tokens",
 	"repository": "https://github.com/bcc-code/bcc-design.git",