@namp88/compass-tokens 1.0.3

package/dist/scss/_semantic-light.scss

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