@namp88/compass-tokens 1.0.3

package/dist/scss/_semantic-high-contrast.scss

@@ -0,0 +1,644 @@
+// =============================================================================
+// Semantic - HighContrast
+// Generated from Figma design tokens
+// Generated at: 2026-02-04T14:40:26.428Z
+// =============================================================================
+
+
+// -----------------------------------------------------------------------------
+// surface
+// -----------------------------------------------------------------------------
+
+$surface-page: $black;
+$surface-raised: $black;
+$surface-page-alt: $black;
+$surface-overlay-blanket: $opacity-neutral-91;
+$surface-inverse: $white;
+$surface-overlay: $black;
+$surface-raised-hover: $black;
+$surface-raised-active: $black;
+
+// -----------------------------------------------------------------------------
+// icon
+// -----------------------------------------------------------------------------
+
+$icon: $white;
+$icon-inverse: $black;
+$icon-subtle: $white;
+$icon-subtler: $white;
+$icon-white: $white;
+$icon-disabled: $neutral-350;
+// brand
+$icon-brand: $brand;
+$icon-brand-hover: $black;
+$xxicon-brand-bold: $black;
+$icon-brand-active: $black;
+$xxicon-brand-hover-: $brand;
+$xxicon-brand-selected: $brand;
+$xxicon-brand-bolder-selected: $black;
+$xxicon-brand-boldest: $black;
+$icon-brand-selected-on-color: $black;
+$icon-brand-on-color: $black;
+
+$icon-subtle-hover: $black;
+$icon-disabled-on-color: $neutral-900;
+$icon-on-white: $black;
+// neutral
+$icon-neutral-active: $black;
+$icon-neutral-on-color: $black;
+$icon-neutral-selected: $black;
+$icon-neutral-hover: $black;
+$icon-neutral: $white;
+$icon-neutral-subtler: $white;
+
+// upsell
+$icon-upsell-active: $black;
+$icon-upsell-hover: $black;
+$icon-upsell: $purple;
+$icon-upsell-on-color: $black;
+$xxicon-upsell-subtle: $purple;
+$xxicon-upsell-hover: $purple;
+$xxicon-upsell-bolder: $black;
+$xxicon-upsell-bolder-hover: $black;
+$xxicon-upsell-bolder-active: $black;
+$icon-upsell-bold: $black;
+
+// discovery
+$icon-discovery: $pink;
+$icon-discovery-hover: $black;
+$icon-discovery-active: $black;
+$icon-discovery-on-color: $black;
+$xxicon-discovery-subtle: $pink;
+$xxicon-discovery-bolder: $black;
+$xxicon-discovery-bolder-hover: $black;
+$xxicon-discovery-bolder-active: $black;
+$xxicon-discovery-boldest: $black;
+
+// danger
+$icon-danger: $red;
+$icon-danger-hover: $black;
+$icon-danger-active: $black;
+$icon-danger-on-color: $black;
+$icon-danger-bold: $black;
+$icon-danger-subtle: $red;
+
+// accent
+$icon-accent-orange-on-color: $black;
+$icon-accent-orange: $orange;
+$icon-accent-orange-bold: $black;
+$icon-accent-orange-subtle: $orange;
+$icon-accent-teal-on-color: $black;
+$icon-accent-teal: $teal;
+$icon-accent-teal-bold: $black;
+$icon-accent-teal-subtle: $teal;
+$xxicon-accent-purple-hover: $black;
+$icon-accent-purple-bold: $black;
+$icon-accent-purple-subtle: $purple;
+$icon-accent-purple-on-color: $black;
+$icon-accent-purple: $purple;
+$icon-accent-yellow: $yellow;
+$icon-accent-yellow-on-color: $black;
+$icon-accent-yellow-bold: $black;
+$icon-accent-green: $green;
+$icon-accent-green-on-color: $black;
+$icon-accent-green-bold: $black;
+$icon-accent-green-subtle: $green;
+$icon-accent-blue-subtle: $brand;
+$icon-accent-blue-on-color: $black;
+$icon-accent-blue-bold: $black;
+$icon-accent-blue: $brand;
+$icon-accent-red: $red;
+$icon-accent-red-on-color: $black;
+$icon-accent-red-bold: $black;
+$icon-accent-red-subtle: $red;
+$icon-accent-pink-bold: $black;
+$icon-accent-pink-subtle: $pink;
+$icon-accent-pink-on-color: $black;
+$icon-accent-pink: $pink;
+$icon-accent-turquoise-on-color: $black;
+$icon-accent-turquoise-bold: $black;
+$icon-accent-turquoise-subtle: $brand;
+$icon-accent-turquoise: $brand;
+
+// warning
+$icon-warning-on-color: $black;
+$icon-warning: $yellow;
+
+// success
+$icon-success-on-color: $black;
+$icon-success: $green;
+
+$icon-subtle-active: $black;
+$icon-disabled-subtle: $neutral-400;
+// information
+$icon-information: $brand;
+$icon-information-on-color: $black;
+
+$icon-subtler-hover: $black;
+$icon-subtler-active: $black;
+
+// -----------------------------------------------------------------------------
+// border
+// -----------------------------------------------------------------------------
+
+$border-subtle: $white;
+// neutral
+$border-neutral-subtle: $white;
+$border-neutral: $white;
+$border-neutral-bold-selected: $white;
+$border-neutral-subtle-hover: $black;
+$border-neutral-subtle-active: $black;
+$border-neutral-subtle-selected: $black;
+
+$border-disabled: $neutral-700;
+$border-disabled-subtle: $neutral-500;
+// brand
+$border-brand-subtle: $brand;
+$border-brand-subtle-hover: $white;
+$border-brand-subtle-active: $brand;
+$xxborder-brand-bold-selected: $brand;
+$border-brand-bold-selected: $white;
+$border-brand-selected: $brand;
+$border-brand-hover: $brand;
+$border-brand-active: $brand;
+$border-brand: $brand;
+$xxborder-brand-hover: $brand;
+
+$border-subtle-hover: $white;
+$border-subtle-active: $white;
+// discovery
+$border-discovery-subtle: $pink;
+$-border-discovery-hover: $white;
+$-border-discovery-active: $pink;
+$xxfeedback-border-pink: $pink;
+$xxfeedback-border-pink-subtle: $pink;
+$xxborder-discovery-bold: $pink;
+$xxborder-discovery: $pink;
+$xxborder-discovery-hover: $pink;
+$xxborder-discovery-active: $pink;
+
+// warning
+$border-warning-subtle: $yellow;
+$border-warning: $yellow;
+
+// success
+$border-success-subtle: $green;
+$border-success: $green;
+
+// accent
+$xxborder-accent-purple-hover: $purple;
+$border-accent-purple: $purple;
+$border-accent-pink: $pink;
+$border-accent-orange: $orange;
+$border-accent-orange-subtle: $orange;
+$border-accent-teal: $teal;
+$border-accent-teal-subtle: $teal;
+$border-accent-red: $red;
+$border-accent-red-subtle: $red;
+$border-accent-yellow: $yellow;
+$border-accent-yellow-subtle: $yellow;
+$border-accent-green: $green;
+$border-accent-green-subtle: $green;
+$border-accent-blue-subtler: $brand;
+$xxborder-accent-blue-hover: $brand;
+$xxborder-accent-blue-active: $brand;
+$xxborder-accent-blue-selected: $brand;
+$border-accent-blue: $brand;
+$xxborder-accent-blue-bold-hover: $brand;
+$border-accent-turquoise: $brand;
+$border-accent-turquoise-subtle: $brand;
+
+$border-subtler: $white;
+$border-inverse: $black;
+// upsell
+$border-upsell-subtle: $purple;
+$border-upsell-hover: $white;
+$border-upsell-active: $purple;
+$border-upsell: $purple;
+$xxfeedback-border-purple: $purple;
+$xxborder-upsell-bold: $purple;
+$xxborder-upsell-bold-hover: $purple;
+
+// information
+$border-information: $brand;
+$border-information-subtle: $brand;
+
+$border-disabled-bold: $neutral-900;
+$border-transparent: $black;
+// danger
+$border-danger-subtle: $red;
+$border-danger-subtle-hover: $white;
+$border-danger-subtle-active: $red;
+$border-danger: $red;
+
+$border-bold: $white;
+// white
+$border-white: $white;
+$border-white-hover: $opacity-white-85;
+$border-white-active: $opacity-white-92;
+
+$border-bold-hover: $white;
+$border-bold-active: $white;
+
+// -----------------------------------------------------------------------------
+// background
+// -----------------------------------------------------------------------------
+
+$background: $black;
+// brand
+$background-brand: $brand;
+$background-brand-hover: $white;
+$background-brand-active: $white;
+$background-brand-subtler: $brand;
+$background-brand-subtler-hover: $white;
+$background-brand-subtler-active: $white;
+$background-brand-selected: $brand;
+$background-brand-subtler-selected: $brand;
+
+$background-hover: $white;
+$background-disabled: $neutral-400;
+// neutral
+$background-neutral-bold: $white;
+$background-neutral-bold-hover: $neutral-100;
+$background-neutral-bold-active: $white;
+$background-neutral-subtler-active: $white;
+$background-neutral-subtler-hover: $white;
+$background-neutral-subtler: $white;
+$background-neutral-bold-selected: $white;
+$background-neutral-subtler-selected: $white;
+$background-neutral-subtler-on-color: $black;
+$background-neutral-subtle-hover: $white;
+$background-neutral-subtle-active: $white;
+$background-neutral-subtle: $white;
+
+// white
+$background-white-hover: $opacity-white-85;
+$background-white-active: $opacity-white-92;
+$background-white: $white;
+
+// upsell
+$background-upsell-subtler-active: $purple;
+$background-upsell-subtler-hover: $white;
+$background-upsell-subtler: $purple;
+$background-upsell-subtlest: $black;
+$background-upsell-subtle: $purple;
+$background-upsell: $purple;
+$background-upsell-hover: $white;
+$background-upsell-active: $purple;
+
+// discovery
+$background-discovery-subtler-active: $pink;
+$background-discovery-subtler-hover: $white;
+$background-discovery-subtler: $pink;
+$background-discovery-subtlest: $black;
+$background-discovery-subtle: $pink;
+$background-discovery: $pink;
+$background-discovery-hover: $white;
+$background-discovery-active: $pink;
+
+// accent
+$background-accent-orange-subtler: $orange;
+$background-accent-orange: $pink;
+$background-accent-orange-subtle: $orange;
+$xxbackground-accent-orange-subtler-hover: $orange;
+$xxbackground-accent-orange-subtle-hover: $orange;
+$background-accent-orange-hover: $white;
+$xxbackground-accent-orange-subtle-active: $orange;
+$xxbackground-accent-orange-subtler-active: $orange;
+$background-accent-orange-active: $white;
+$xxbackground-accent-orange-subtlest: $orange;
+$background-accent-teal-subtler: $teal;
+$background-accent-teal: $teal;
+$background-accent-teal-subtle: $teal;
+$background-accent-red-subtler: $red;
+$xxbackground-accent-red-subtler-hover: $red;
+$xxbackground-accent-red-subtler-active: $red;
+$background-accent-red: $red;
+$xxbackground-accent-red-bolder-hover: $white;
+$xxbackground-accent-red-bolder-active: $red;
+$background-accent-red-subtle: $red;
+$background-accent-yellow: $yellow;
+$background-accent-yellow-subtler: $yellow;
+$background-accent-yellow-subtle: $yellow;
+$background-accent-green: $green;
+$background-accent-green-subtler: $green;
+$background-accent-green-subtle: $green;
+$background-accent-blue-subtler: $brand;
+$background-accent-blue-bolder: $brand;
+$xxbackground-accent-blue-subtlest: $brand;
+$background-accent-blue-subtle: $brand;
+$background-accent-purple-subtler: $purple;
+$background-accent-purple-subtle: $purple;
+$background-accent-pink-subtler: $pink;
+$background-accent-pink-subtle: $pink;
+$background-accent-turquoise: $brand;
+$background-accent-turquoise-subtler: $brand;
+$background-accent-turquoise-subtle: $brand;
+
+// warning
+$background-warning-subtlest: $black;
+$background-warning: $yellow;
+$background-warning-subtler: $yellow;
+
+// danger
+$backgrond-danger-subtlest: $black;
+$background-danger: $red;
+$background-danger-hover: $white;
+$background-danger-active: $red;
+$background-danger-subtler-hover: $white;
+$background-danger-subtler-active: $red;
+$backgrond-danger-subtler: $red;
+
+// success
+$background-success-subtlest: $black;
+$background-success: $green;
+$background-success-subtler: $green;
+
+$background-active: $white;
+$background-read-only: $neutral-700;
+$background-raised: $black;
+$background-drag: $black;
+$background-skeleton: $neutral-600;
+// information
+$background-information-subtlest: $black;
+$background-information-subtler: $brand;
+$background-information: $brand;
+
+$background-overlay-hover: $white;
+$background-overlay-active: $white;
+$background-raised-hover: $black;
+$background-raised-active: $black;
+
+// -----------------------------------------------------------------------------
+// feedback
+// -----------------------------------------------------------------------------
+
+// foreground
+$xxfeedback-fg-on-subtle: $white;
+$xxfeedback-fg: $black;
+
+// border
+$xxfeedback-border: $white;
+$xxfeedback-border-subtle: $white;
+
+
+// -----------------------------------------------------------------------------
+// text
+// -----------------------------------------------------------------------------
+
+$text: $white;
+$text-inverse: $black;
+$text-subtle: $white;
+$text-subtle-hover: $black;
+$text-subtle-active: $black;
+$text-sutbler: $white;
+// brand
+$text-brand-selected: $brand;
+$text-brand: $brand;
+$xxtext-brand-hover: $brand;
+$text-brand-on-color: $black;
+$text-brand-hover: $black;
+$text-brand-active: $black;
+$xxtext-brand-bolder-selected: $black;
+$xxtext-brand-selected-hover: $brand;
+$text-brand-selected-on-color: $black;
+$xxtext-brand-selected-bold-hover: $brand;
+
+$text-white: $white;
+$text-disabled: $neutral-350;
+$text-disabled-bold: $neutral-900;
+$text-placeholder: $white;
+$text-placeholder-subtle: $white;
+$text-on-white: $black;
+$text-subtle-on-color: $black;
+// neutral
+$text-neutral-hover: $black;
+$text-neutral-active: $black;
+$text-neutral-selected: $black;
+$text-neutral: $white;
+$text-neutral-on-color: $black;
+
+// upsell
+$text-upsell: $purple;
+$text-upsell-on-color: $black;
+$text-upsell-hover: $black;
+$text-upsell-active: $black;
+$xxtext-upsell: $purple;
+$xxtext-upsell-hover: $purple;
+$xxtext-upsell-bolder: $black;
+$xxtext-upsell-bolder-hover: $black;
+$xxtext-upsell-bolder-active: $black;
+$text-upsell-bold: $black;
+
+// discovery
+$text-discovery-hover: $black;
+$text-discovery-active: $black;
+$text-discovery: $pink;
+$text-discovery-on-color: $black;
+$xxtext-discovery: $pink;
+$xxtext-discovery-bolder: $black;
+$xxtext-discovery-bolder-hover: $black;
+$xxtext-discovery-bolder-active: $black;
+$xxtext-discovery-boldest: $black;
+
+// danger
+$text-danger: $red;
+$text-danger-on-color: $black;
+$text-danger-hover: $black;
+$text-danger-active: $black;
+$text-danger-bold: $black;
+
+// accent
+$text-accent-orange: $orange;
+$text-accent-orange-on-color: $black;
+$text-accent-orange-bold: $black;
+$text-accent-teal: $teal;
+$text-accent-teal-on-color: $black;
+$text-accent-teal-bold: $black;
+$text-accent-red: $red;
+$text-accent-red-on-color: $black;
+$xxtext-accent-red-bolder-hover: $black;
+$xxtext-accent-red-bolder-active: $black;
+$text-accent-red-bold: $black;
+$text-accent-yellow: $yellow;
+$text-accent-yellow-on-color: $black;
+$text-accent-yellow-bold: $black;
+$text-accent-green: $green;
+$text-accent-green-on-color: $black;
+$text-accent-green-bold: $black;
+$text-accent-blue: $brand;
+$text-accent-blue-on-color: $black;
+$text-accent-blue-bold: $black;
+$text-accent-purple-hover: $purple;
+$text-accent-purple-bold: $black;
+$text-accent-purple-on-color: $black;
+$text-accent-purple: $purple;
+$text-accent-pink-bold: $black;
+$text-accent-pink: $pink;
+$text-accent-pink-on-color: $black;
+$text-accent-turquoise: $brand;
+$text-accent-turquoise-on-color: $black;
+$text-accent-turquoise-bold: $black;
+
+// success
+$text-success: $green;
+$text-success-on-color: $black;
+
+// warning
+$text-warning: $yellow;
+$text-warning-on-color: $black;
+
+// information
+$text-information: $brand;
+$text-information-on-color: $black;
+
+
+// -----------------------------------------------------------------------------
+// Utility
+// -----------------------------------------------------------------------------
+
+// Neutral
+$utility-neutral-550: $neutral-600;
+$utility-neutral-500: $neutral-700;
+$utility-neutral-350: $neutral-800;
+$utility-neutral-400: $neutral-800;
+$utility-neutral-200: $black;
+$utility-neutral-600: $white;
+$utility-neutral-900: $white;
+$utility-neutral-100: $black;
+$utility-neutral-450: $neutral-700;
+$utility-neutral-800: $white;
+$utility-neutral-300: $neutral-900;
+$utility-neutral-50: $black;
+$utility-neutral-700: $white;
+$utility-neutral-250: $black;
+
+// Brand
+$utility-brand-800: $brand;
+$utility-brand-600: $brand;
+$utility-brand-500: $brand;
+$utility-brand-450: $brand;
+$utility-brand-400: $brand;
+$utility-brand-50: $brand;
+$utility-brand-300: $brand;
+$utility-brand-200: $brand;
+$utility-brand-700: $brand;
+$utility-brand-900: $brand;
+$utility-brand-100: $brand;
+
+// Danger
+$utility-danger-700: $red;
+$utility-danger-600: $red;
+$utility-danger-500: $red;
+$utility-danger-300: $red;
+$utility-danger-200: $red;
+$utility-danger-450: $red;
+$utility-danger-100: $red;
+$utility-danger-400: $red;
+$utility-danger-50: $red;
+
+// Success
+$utility-success-600: $green;
+$utility-success-450: $green;
+$utility-success-500: $green;
+$utility-success-400: $green;
+$utility-success-300: $green;
+$utility-success-700: $green;
+$utility-success-100: $green;
+$utility-success-200: $green;
+$utility-success-50: $green;
+
+// Warning
+$utility-warning-700: $yellow;
+$utility-warning-600: $yellow;
+$utility-warning-500: $yellow;
+$utility-warning-400: $yellow;
+$utility-warning-450: $yellow;
+$utility-warning-50: $yellow;
+$utility-warning-200: $yellow;
+$utility-warning-100: $yellow;
+$utility-warning-300: $yellow;
+
+// Accent
+$utility-purple-700: $purple;
+$utility-purple-600: $purple;
+$utility-purple-500: $purple;
+$utility-purple-400: $purple;
+$utility-purple-300: $purple;
+$utility-purple-450: $purple;
+$utility-purple-100: $purple;
+$utility-purple-200: $purple;
+$utility-purple-50: $purple;
+$utility-pink-700: $pink;
+$utility-pink-500: $pink;
+$utility-pink-300: $pink;
+$utility-pink-600: $pink;
+$utility-pink-50: $pink;
+$utility-pink-400: $pink;
+$utility-pink-100: $pink;
+$utility-pink-450: $pink;
+$utility-pink-200: $pink;
+$utility-orange-700: $orange;
+$utility-orange-600: $orange;
+$utility-orange-450: $orange;
+$utility-orange-50: $orange;
+$utility-orange-300: $orange;
+$utility-orange-400: $orange;
+$utility-orange-500: $orange;
+$utility-orange-200: $orange;
+$utility-orange-100: $orange;
+$utility-teal-600: $teal;
+$utility-teal-500: $teal;
+$utility-teal-700: $teal;
+$utility-teal-300: $teal;
+$utility-teal-400: $teal;
+$utility-teal-200: $teal;
+$utility-teal-450: $teal;
+$utility-teal-100: $teal;
+$utility-teal-50: $teal;
+$utility-teal-50: $teal;
+$utility-teal-100: $teal;
+$utility-teal-200: $teal;
+$utility-teal-300: $teal;
+$utility-teal-400: $teal;
+$utility-teal-450: $teal;
+$utility-teal-500: $teal;
+$utility-teal-600: $teal;
+$utility-teal-700: $teal;
+
+
+// -----------------------------------------------------------------------------
+// focus-ring
+// -----------------------------------------------------------------------------
+
+$focus-ring: $yellow;
+$focus-ring-offset-inside: $border-width-lg;
+$focus-ring-offset-outside: $border-width-xl;
+$focus-ring-error: $red;
+
+// -----------------------------------------------------------------------------
+// link
+// -----------------------------------------------------------------------------
+
+$link: $brand;
+$link-hover: $brand;
+$link-upsell: $purple;
+$link-upsell-hover: $purple;
+
+// -----------------------------------------------------------------------------
+// Opacity
+// -----------------------------------------------------------------------------
+
+$opacity-900: $opacity-neutral-91;
+$opacity-800: $opacity-neutral-82;
+$opacity-700: $opacity-neutral-74;
+$opacity-25: $opacity-neutral-03;
+$opacity-500: $opacity-neutral-44;
+$opacity-300: $opacity-neutral-22;
+$opacity-150: $opacity-neutral-14;
+$opacity-400: $opacity-neutral-44;
+$opacity-100: $opacity-neutral-09;
+$opacity-50: $opacity-neutral-05;
+$opacity-600: $opacity-neutral-56;
+$opacity-200: $opacity-neutral-22;
+$opacity-transparent: $opacity-neutral-transparent;