@drivy/cobalt 1.4.6 → 2.0.0-beta.1

package/src/tokens/theme.js

@@ -1,332 +1,129 @@
-const background = {
-	primary: "white/black.500",
-	secondary: "white/black.400",
-	accent: "purple.500/purple.400",
-	accentAlt: "purple.200/purple.1000",
-	info: "yellow.100/yellow.1000",
-	error: "red.500/red.500",
-	errorAlt: "red.100/red.1500",
-	success: "green.700/green.700",
-	successAlt: "green.300/green.1200",
-	connect: "newPurple.500/newPurple.200",
-	connectAlt: "turquoise.50/turquoise.900",
-	driver: "yellow.500/yellow.500",
-	owner: "navy.700/navy.700",
-	disabled: "navy.50/black.500",
-	neutral: "navy.100/black.50",
-	neutralAlt: "navy.50/black.100",
-	seasonLow: "season.100/season.300",
-	seasonMedium: "season.300/season.600",
-	seasonHigh: "season.700/season.900",
-	seasonVeryHigh: "season.1100/season.1200",
-	rental: "blue.500/blue.700",
-	rentalAlt: "blue.300/blue.500",
-	blocker: "grey.100/black.200",
-	rideshare: "black.1000/black.1000",
-	keyExchange: "newViolet.500/newViolet.200",
-	picked: "green.700/green.500",
-	base: "navy.900/navy.50",
-	secondaryInteractive: {
-		DEFAULT: "white/black.400",
-		hover: "navy.50/black.300"
-	},
-	accentInteractive: {
-		DEFAULT: "purple.500/purple.400",
-		hover: "purple.600/purple.700"
-	},
-	accentAltInteractive: {
-		DEFAULT: "purple.200/purple.1000",
-		hover: "purple.200/purple.900"
-	},
-	connectInteractive: {
-		DEFAULT: "newPurple.500/newPurple.200",
-		hover: "turquoise.700/turquoise.700"
-	},
-	errorInteractive: {
-		DEFAULT: "red.500/red.500",
-		hover: "red.700/red.500"
-	}
-};
-const text = {
-	base: "navy.700/grey.100",
-	subdued: "navy.300/grey.300",
-	accent: "purple.500/purple.400",
-	accentAlt: "purple.700/purple.200",
-	info: "yellow.900/yellow.400",
-	error: "red.500/red.400",
-	errorAlt: "red.500/red.200",
-	success: "green.700/green.400",
-	successAlt: "green.900/green.300",
-	connect: "newPurple.500/newPurple.200",
-	connectAlt: "turquoise.900/white",
-	driver: "navy.700/navy.700",
-	owner: "white/grey.100",
-	warning: "orange.500/orange.300",
-	infoAlt: "yellow.700/yellow.700",
-	disabled: "navy.120/black.50",
-	onAccent: "white/black.1000",
-	onRideshare: "white/white",
-	onError: "white/white",
-	onSuccess: "white/white",
-	onConnect: "white/black.1000",
-	onKeyExchange: "white/black.1000",
-	onPicked: "white/black.1000",
-	keyExchange: "newViolet.500/newViolet.200",
-	picked: "green.700/green.500",
-	rideshare: "black.1000/white",
-	onBase: "white/navy.900",
-	onSeasonLow: "black.800/black.800",
-	onSeasonMedium: "black.800/white",
-	onSeasonHigh: "white/white",
-	onSeasonVeryHigh: "white/white",
-	onRental: "white/white",
-	onRentalAlt: "black.300/black.1000",
-	inversed: "white/white",
-	baseInteractive: {
-		DEFAULT: "navy.700/grey.100",
-		hover: "navy.900/grey.300"
-	},
-	subduedInteractive: {
-		DEFAULT: "navy.300/grey.300",
-		hover: "navy.500/grey.400"
-	},
-	accentInteractive: {
-		DEFAULT: "purple.500/purple.400",
-		hover: "purple.700/purple.500"
-	},
-	accentAltInteractive: {
-		DEFAULT: "purple.700/purple.200",
-		hover: "purple.700/purple.400"
-	}
-};
-const icon = {
-	base: "navy.700/grey.100",
-	subdued: "navy.300/grey.300",
-	accent: "purple.500/purple.400",
-	accentAlt: "purple.700/purple.200",
-	info: "yellow.900/yellow.400",
-	error: "red.500/red.400",
-	errorAlt: "red.500/red.200",
-	success: "green.700/green.400",
-	successAlt: "green.900/green.300",
-	connect: "newPurple.500/newPurple.200",
-	connectAlt: "turquoise.900/turquoise.50",
-	driver: "navy.700/navy.700",
-	owner: "white/grey.100",
-	warning: "orange.500/orange.300",
-	infoAlt: "yellow.500/yellow.700",
-	disabled: "navy.200/black.75",
-	onAccent: "white/black.1000",
-	onRideshare: "white/white",
-	onError: "white/white",
-	onSuccess: "white/white",
-	onConnect: "white/black.1000",
-	onKeyExchange: "white/black.1000",
-	onPicked: "white/black.1000",
-	keyExchange: "newViolet.500/newViolet.200",
-	picked: "green.700/green.500",
-	rideshare: "black.1000/white",
-	onBase: "white/navy.900",
-	disabledAlt: "navy.120/black.50",
-	onRental: "white/white",
-	inversed: "white/white",
-	baseInteractive: {
-		DEFAULT: "navy.700/grey.100",
-		hover: "navy.900/grey.200"
-	},
-	subduedInteractive: {
-		DEFAULT: "navy.300/grey.300",
-		hover: "navy.500/grey.400"
-	},
-	accentInteractive: {
-		DEFAULT: "purple.500/purple.400",
-		hover: "purple.700/purple.500"
-	},
-	accentAltInteractive: {
-		DEFAULT: "purple.700/purple.200",
-		hover: "purple.700/purple.400"
-	}
-};
-const stroke = {
-	base: "navy.100/black.100",
-	subdued: "navy.50/black.100",
-	accent: "purple.500/purple.400",
-	accentAlt: "purple.600/purple.400",
-	success: "green.500/green.700",
-	successAlt: "green.500/green.700",
-	error: "red.500/red.400",
-	errorAlt: "red.500/red.200",
-	strong: "grey.300/grey.700",
-	onAccent: "white/grey.100",
-	rental: "blue.700/blue.500",
-	blocker: "grey.300/grey.500",
-	onError: "white/white",
-	onSuccess: "white/white",
-	connect: "newPurple.500/newPurple.200",
-	keyExchange: "newViolet.500/newViolet.200",
-	picked: "green.700/green.500",
-	onConnect: "white/black.75",
-	onKeyExchange: "white/black.75",
-	onPicked: "white/black.75",
-	onRideshare: "white/black.1000",
-	rideshare: "black.1000/white",
-	onBase: "white/black.600",
-	baseInteractive: {
-		DEFAULT: "navy.100/black.100",
-		hover: "navy.300/black.300",
-		press: "navy.500/black.500"
-	},
-	accentInteractive: {
-		DEFAULT: "purple.500/purple.400",
-		hover: "purple.700/purple.600",
-		press: "purple.900/purple.800"
-	},
-	strongInteractive: {
-		DEFAULT: "grey.300/grey.700",
-		hover: "grey.400/black.50",
-		press: "grey.500/black.100"
-	}
-};
-const buttonIcon = {
-	selected: "purple.500/grey.100",
-	primary: "white/black.1000",
-	secondary: "purple.500/purple.400",
-	tertiary: "purple.500/white",
-	destructive: "red.500/red.200",
-	success: "white/green.100",
-	successAlt: "green.900/green.100",
-	disabled: "navy.300/grey.300",
-	accentAlt: "purple.500/grey.100",
-	primaryInteractive: {
-		DEFAULT: "white/black.1000",
-		hover: "white/black.1000",
-		press: "white/black.1000"
-	},
-	secondaryInteractive: {
-		DEFAULT: "purple.500/purple.400",
-		hover: "purple.500/purple.300",
-		press: "purple.900/purple.900"
-	},
-	tertiaryInteractive: {
-		DEFAULT: "purple.500/white",
-		hover: "purple.500/white",
-		press: "purple.900/purple.1000"
-	},
-	destructiveInteractive: {
-		DEFAULT: "red.500/red.200",
-		hover: "red.500/red.200",
-		press: "red.500/red.200"
-	},
-	successAltInteractive: {
-		DEFAULT: "green.900/green.100",
-		hover: "green.900/green.100",
-		press: "green.900/green.100"
-	}
-};
-const buttonLabel = {
-	selected: "purple.500/grey.100",
-	primary: "white/black.1000",
-	secondary: "purple.500/purple.400",
-	tertiary: "purple.500/white",
-	disabled: "navy.300/grey.300",
-	accentAlt: "purple.500/grey.100",
-	destructive: "red.500/red.200",
-	success: "white/green.100",
-	successAlt: "green.900/green.100",
-	primaryInteractive: {
-		DEFAULT: "white/black.1000",
-		hover: "white/black.1000",
-		press: "white/black.1000"
-	},
-	secondaryInteractive: {
-		DEFAULT: "purple.500/purple.400",
-		hover: "purple.700/purple.300",
-		press: "purple.900/purple.900"
-	},
-	tertiaryInteractive: {
-		DEFAULT: "purple.500/white",
-		hover: "purple.700/white",
-		press: "purple.900/purple.1000"
-	},
-	destructiveInteractive: {
-		DEFAULT: "red.500/red.200",
-		hover: "red.500/red.200",
-		press: "red.500/red.200"
-	},
-	successAltInteractive: {
-		DEFAULT: "green.900/green.100",
-		hover: "green.900/green.100",
-		press: "green.900/green.100"
-	}
-};
-const buttonBackground = {
-	selected: "purple.100/purpleDeep.900",
-	primary: "purple.500/purple.400",
-	secondary: "white/black.100",
-	tertiary: "white/white",
-	accentAlt: "purple.100/purple.900",
-	destructive: "red.100/red.900",
-	success: "green.700/green.900",
-	successAlt: "green.100/green.1000",
-	disabled: "navy.100/black.50",
-	primaryInteractive: {
-		DEFAULT: "purple.500/purple.400",
-		hover: "purple.700/purple.800",
-		press: "purple.900/purple.1000"
-	},
-	secondaryInteractive: {
-		DEFAULT: "white/black.100",
-		hover: "white/black.500",
-		press: "white/black.500"
-	},
-	tertiaryInteractive: {
-		DEFAULT: "white/white",
-		hover: "white/black.500",
-		press: "white/black.500"
-	},
-	destructiveInteractive: {
-		DEFAULT: "red.100/red.900",
-		hover: "red.120/red.800",
-		press: "red.150/red.900"
-	},
-	successAltInteractive: {
-		DEFAULT: "green.100/green.1000",
-		hover: "green.300/green.900",
-		press: "green.400/green.1000"
-	}
-};
-const fill = {
-	base: "navy.500/navy.50",
-	accent: "purple.500/purple.400",
-	secondary: "yellow.500/yellow.400",
-	subdued: "navy.100/black.50",
-	neutral: "navy.50/black.100",
-	negative: "red.150/red.800",
-	accentAlt: "purple.100/purple.900",
-	disabled: "navy.300/grey.300",
-	error: "red.500/red.500",
-	success: "green.500/green.700",
-	rental: "blue.300/blue.700",
-	blocker: "grey.100/black.200",
-	primary: "white/black.1000"
-};
-const illustrations = {
-	primary: "navy.500/white",
-	secondary: "white/white",
-	accent1: "purple.500/white",
-	accent2: "blue.500/white"
-};
+const surface = "white/black.1600";
+const surfaceBright = "white/black.1400";
+const surfaceContainer = "white/black.1100";
+const surfaceContainerVariant = "navy.100/black.800";
+const outline = "navy.200/black.1000";
+const outlineVariant = "navy.300/black.400";
+const onSurface = "navy.1100/grey.300";
+const onSurfaceVariant = "navy.600/grey.700";
+const onSurfaceContainerVariant = "grey.500/grey.1300";
+const disabled = "navy_alpha.5/grey_alpha.8";
+const onSurfaceDisabled = "navy_alpha.30/grey_alpha.15";
+const primary = "purple.1100/purple.600";
+const onPrimary = "white/black.1600";
+const primaryContainer = "purple.200/purple.1600";
+const onPrimaryContainer = "purple.1100/purple.200";
+const secondary = "violet.900/violet.1100";
+const onSecondary = "violet.100/violet.100";
+const secondaryContainer = "violet.100/violet.1400";
+const onSecondaryContainer = "violet.1500/violet.100";
+const onSecondaryContainerVariant = "violet.800/violet.100";
+const tertiary = "blue.900/blue.1100";
+const onTertiary = "white/blue.100";
+const outlineTertiary = "blue.1000/blue.800";
+const tertiaryContainer = "blue.200/blue.1300";
+const onTertiaryContainer = "violet.1600/blue.100";
+const onTertiaryContainerVariant = "blue.1000/blue.300";
+const success = "green.1000/green.600";
+const onSuccess = "green.100/black.1200";
+const successContainer = "green.200/green.1200";
+const onSuccessContainer = "green.1300/green.200";
+const error = "red.800/red.500";
+const onError = "white/black.1600";
+const errorContainer = "red.100/red.1400";
+const onErrorContainer = "red.1100/red.200";
+const warning = "yellow.800/yellow.600";
+const onWarning = "yellow.1500/black.1600";
+const warningContainer = "yellow.200/yellow.1600";
+const onWarningContainer = "yellow.1400/yellow.500";
+const connect = "purple.800/purple.500";
+const onConnect = "white/black.1600";
+const keyExchange = "violet.700/violet.500";
+const onKeyExchange = "white/black.1600";
+const seasonLowest = "green.200/green.300";
+const onSeasonLowest = "black.1600/black.1600";
+const seasonMedium = "green.600/green.700";
+const onSeasonMedium = "black.1600/black.1600";
+const seasonHigh = "green.1000/green.1100";
+const onSeasonHigh = "white/white";
+const seasonHighest = "green.1300/green.1400";
+const onSeasonHighest = "white/white";
+const business = "violet.1500/violet.1600";
+const businessVariant = "violet.1100/violet.800";
+const onBusiness = "white/white";
+const onBusinessVariant = "lime.500/lime.300";
+const businessContainer = "lime.300/lime.200";
+const onBusinessContainer = "violet.1600/violet.1300";
+const hover = "black_alpha.4/white_alpha.15";
+const focus = "black_alpha.8/white_alpha.20";
+const press = "black_alpha.8/white_alpha.20";
+const drag = "black_alpha.16/white_alpha.20";
+const scrim = "black_alpha.26/black_alpha.26";
+const surfaceFixed = "white/white";
 var require$$0 = {
-	background: background,
-	text: text,
-	icon: icon,
-	stroke: stroke,
-	buttonIcon: buttonIcon,
-	buttonLabel: buttonLabel,
-	buttonBackground: buttonBackground,
-	fill: fill,
-	illustrations: illustrations
+	surface: surface,
+	surfaceBright: surfaceBright,
+	surfaceContainer: surfaceContainer,
+	surfaceContainerVariant: surfaceContainerVariant,
+	outline: outline,
+	outlineVariant: outlineVariant,
+	onSurface: onSurface,
+	onSurfaceVariant: onSurfaceVariant,
+	onSurfaceContainerVariant: onSurfaceContainerVariant,
+	disabled: disabled,
+	onSurfaceDisabled: onSurfaceDisabled,
+	primary: primary,
+	onPrimary: onPrimary,
+	primaryContainer: primaryContainer,
+	onPrimaryContainer: onPrimaryContainer,
+	secondary: secondary,
+	onSecondary: onSecondary,
+	secondaryContainer: secondaryContainer,
+	onSecondaryContainer: onSecondaryContainer,
+	onSecondaryContainerVariant: onSecondaryContainerVariant,
+	tertiary: tertiary,
+	onTertiary: onTertiary,
+	outlineTertiary: outlineTertiary,
+	tertiaryContainer: tertiaryContainer,
+	onTertiaryContainer: onTertiaryContainer,
+	onTertiaryContainerVariant: onTertiaryContainerVariant,
+	success: success,
+	onSuccess: onSuccess,
+	successContainer: successContainer,
+	onSuccessContainer: onSuccessContainer,
+	error: error,
+	onError: onError,
+	errorContainer: errorContainer,
+	onErrorContainer: onErrorContainer,
+	warning: warning,
+	onWarning: onWarning,
+	warningContainer: warningContainer,
+	onWarningContainer: onWarningContainer,
+	connect: connect,
+	onConnect: onConnect,
+	keyExchange: keyExchange,
+	onKeyExchange: onKeyExchange,
+	seasonLowest: seasonLowest,
+	onSeasonLowest: onSeasonLowest,
+	seasonMedium: seasonMedium,
+	onSeasonMedium: onSeasonMedium,
+	seasonHigh: seasonHigh,
+	onSeasonHigh: onSeasonHigh,
+	seasonHighest: seasonHighest,
+	onSeasonHighest: onSeasonHighest,
+	business: business,
+	businessVariant: businessVariant,
+	onBusiness: onBusiness,
+	onBusinessVariant: onBusinessVariant,
+	businessContainer: businessContainer,
+	onBusinessContainer: onBusinessContainer,
+	hover: hover,
+	focus: focus,
+	press: press,
+	drag: drag,
+	scrim: scrim,
+	surfaceFixed: surfaceFixed
 };
 
-export { background, buttonBackground, buttonIcon, buttonLabel, require$$0 as default, fill, icon, illustrations, stroke, text };
+export { business, businessContainer, businessVariant, connect, require$$0 as default, disabled, drag, error, errorContainer, focus, hover, keyExchange, onBusiness, onBusinessContainer, onBusinessVariant, onConnect, onError, onErrorContainer, onKeyExchange, onPrimary, onPrimaryContainer, onSeasonHigh, onSeasonHighest, onSeasonLowest, onSeasonMedium, onSecondary, onSecondaryContainer, onSecondaryContainerVariant, onSuccess, onSuccessContainer, onSurface, onSurfaceContainerVariant, onSurfaceDisabled, onSurfaceVariant, onTertiary, onTertiaryContainer, onTertiaryContainerVariant, onWarning, onWarningContainer, outline, outlineTertiary, outlineVariant, press, primary, primaryContainer, scrim, seasonHigh, seasonHighest, seasonLowest, seasonMedium, secondary, secondaryContainer, success, successContainer, surface, surfaceBright, surfaceContainer, surfaceContainerVariant, surfaceFixed, tertiary, tertiaryContainer, warning, warningContainer };
 //# sourceMappingURL=theme.js.map

package/src/tokens/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"theme.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/src/tokens/zIndexes.js

@@ -7,7 +7,7 @@ const header = 30;
 const sidepanel = 80;
 const modal = 90;
 const alert = 100;
-var require$$3 = {
+var require$$2 = {
 	below: below,
 	base: base,
 	above: above,
@@ -32,5 +32,5 @@ var require$$3 = {
 	"autocomplete-popover": 2147483647
 };
 
-export { above, alert, base, below, require$$3 as default, dropdown, header, modal, nav, sidepanel };
+export { above, alert, base, below, require$$2 as default, dropdown, header, modal, nav, sidepanel };
 //# sourceMappingURL=zIndexes.js.map

package/styles/components/Accordion/index.scss

@@ -1,6 +1,6 @@
 .cobalt- {
   &accordions-list__item {
-    @apply c-text-base;
+    @apply c-text-onSurface;
     overflow: hidden;
 
     &[data-disabled] {
@@ -10,7 +10,7 @@
   }
 
   &accordion__header {
-    @apply c-text-title-xs c-p-sm c-bg-secondary c-cursor-pointer c-state-interactive c-transition-interactive c-gap-sm;
+    @apply c-text-title-xs c-p-sm c-bg-surfaceBright c-text-onSurface c-cursor-pointer c-state-interactive c-transition-interactive c-gap-sm;
 
     width: 100%;
     display: flex;
@@ -56,7 +56,7 @@
         position: absolute;
 
         // This element is actually an icon but animated, so we can use icon/text colors here
-        background-color: theme("semanticTextColor.subdued");
+        background-color: theme("colors.onSurfaceVariant");
         content: "";
 
         transition: transform 0.25s ease-out;
@@ -91,7 +91,7 @@
   }
 
   &accordion__panel {
-    @apply c-border-t c-border-t-base;
+    @apply c-border-t c-border-t-outline;
   }
 }
 

package/styles/components/Alerter/index.scss

@@ -34,15 +34,15 @@
     }
 
     &[data-type="info"] {
-      @apply c-bg-info c-text-info;
+      @apply c-bg-tertiaryContainer c-text-onTertiaryContainer;
     }
 
     &[data-type="success"] {
-      @apply c-bg-successAlt c-text-success;
+      @apply c-bg-successContainer c-text-onSuccessContainer;
     }
 
     &[data-type="error"] {
-      @apply c-bg-errorAlt c-text-error;
+      @apply c-bg-errorContainer c-text-onErrorContainer;
     }
 
     &__wrapper {

package/styles/components/BasicCell/index.scss

@@ -1,6 +1,6 @@
 .cobalt- {
   &BasicCell {
-    @apply c-text-base;
+    @apply c-text-onSurface;
 
     display: flex;
     align-items: center;
@@ -14,7 +14,7 @@
   }
 
   &BasicCell__Title {
-    @apply c-text-title-sm c-text-base;
+    @apply c-text-title-sm c-text-onSurface;
     margin-bottom: 0;
   }
 
@@ -23,7 +23,7 @@
   }
 
   &BasicCell__Thumb {
-    @apply c-bg-neutralAlt;
+    @apply c-bg-surfaceContainerVariant;
 
     display: flex;
     flex-direction: column;

package/styles/components/BulletList/index.scss

@@ -26,7 +26,7 @@
     svg,
     use,
     g {
-      fill: theme("semanticFillColor.subdued");
+      fill: theme("colors.onSurfaceVariant");
     }
   }
 }

package/styles/components/Buttons/DefaultButton/index.scss

@@ -1,36 +1,27 @@
 .cob-Button__default {
-  @include semantic-color(buttonBackground, secondary, background-color);
-  @include semantic-color(stroke, strong, border-color);
-  @include semantic-color(buttonLabel, secondary, color);
+  @apply c-bg-surfaceContainer c-text-primary c-border-outlineVariant;
 
   &--primary {
-    @include semantic-color(buttonBackground, primary, background-color);
-    @include semantic-color(buttonLabel, primary, color);
-
-    border-color: transparent;
+    @apply c-bg-primary c-text-onPrimary c-border-transparent;
 
     &:hover,
     &:focus,
     &:active {
-      border-color: transparent;
+      @apply c-border-transparent;
     }
 
     &.cob-Button__default--destructive {
-      @include semantic-color(buttonBackground, destructive, background-color);
-      @include semantic-color(buttonLabel, destructive, color);
-
-      border-color: transparent;
+      @apply c-bg-errorContainer c-text-onErrorContainer c-border-transparent;
     }
   }
 
   &--destructive {
-    @include semantic-color(text, error, color);
+    @apply c-text-error;
 
     &:hover,
     &:focus,
     &:active {
-      @include semantic-color(text, error, color);
-      @include semantic-color(stroke, error, border-color);
+      @apply c-text-error c-border-error;
     }
   }
 
@@ -38,8 +29,6 @@
   &--selected:focus,
   &--selected:active,
   &--selected {
-    @apply c-border-accent;
-    @include semantic-color(buttonBackground, selected, background-color);
-    @include semantic-color(buttonLabel, selected, color);
+    @apply c-bg-primaryContainer c-text-onPrimaryContainer c-border-onPrimaryContainer;
   }
 }

package/styles/components/Buttons/GhostButton/index.scss

@@ -1,7 +1,5 @@
 .cob-Button__ghost {
-  @include semantic-color(buttonLabel, tertiary, color);
-  @include semantic-color(buttonBackground, tertiary, background-color);
-  border-color: transparent;
+  @apply c-text-primary c-bg-surfaceContainer c-border-transparent;
 
   box-shadow: none;
 
@@ -14,7 +12,7 @@
   }
 
   &.cob-Button__ghost--destructive {
-    @include semantic-color(text, error, color);
+    @apply c-text-error;
   }
 
   &.cob-Button__ghost--standalone {
@@ -28,15 +26,12 @@
   &[disabled],
   &[data-disabled]:not([data-disabled="false"]),
   &.cob-Button--disabled {
-    @include semantic-color(buttonBackground, tertiary, background-color);
-    border-color: transparent;
+    @apply c-bg-surfaceContainer c-border-transparent;
 
     &:hover,
     &:focus,
     &:active {
-      border-color: transparent;
-
-      background-color: transparent;
+      @apply c-border-transparent c-bg-transparent;
     }
   }
 }