From 0bb77b00db17360d0d11a5092c88a27284c51ce8 Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Tue, 30 Jun 2026 17:45:11 +0200 Subject: [PATCH 01/12] [theme] add new variables --- tools/theme/src/theme.ts | 312 +++++++++++- .../style/design-tokens/design-tokens.json | 462 ++++++++++++++++++ 2 files changed, 773 insertions(+), 1 deletion(-) diff --git a/tools/theme/src/theme.ts b/tools/theme/src/theme.ts index 4594df68d9..a2f1016ac3 100644 --- a/tools/theme/src/theme.ts +++ b/tools/theme/src/theme.ts @@ -1497,6 +1497,314 @@ export const theme: Theme = { value: highlight.at(L_ICON_SECONDARY_HOVER), description: 'Icon color for the SliderRating component in its hovered and active states.', }, + checkbox_rounded: { + value: '{semanticTokens.radii.control}', + description: 'Use for rounding Checkbox.', + }, + pills_rounded: { + value: '{semanticTokens.radii.control}', + description: 'Use for rounding Pills.', + }, + switch_bg: { + value: '{baseTokens.colors.gray.300}', + description: 'Subtle background of the Switch control.', + }, + switch_bg_info_active: { + value: '{semanticTokens.colors.control_primary_info_DEFAULT}', + description: 'Active background of the Switch control.', + }, + switch_bg_success_active: { + value: '{semanticTokens.colors.control_primary_success_DEFAULT}', + description: 'Active background of the Switch control.', + }, + switch_handle: { + value: '{baseTokens.colors.gray.white}', + description: 'Handle color of the Switch control.', + }, + dot_notification_bg: { + value: '{semanticTokens.colors.icon_primary_warning_DEFAULT}', + description: 'Background color of the notification Dot.', + }, + dot_notification_text: { + value: '{semanticTokens.colors.text_primary_invert}', + description: 'Text color of the notification Dot.', + }, + tooltip_text: { + value: '{semanticTokens.colors.text_primary_DEFAULT}', + description: 'Text color of the default Tooltip.', + }, + tooltip_text_invert: { + value: '{semanticTokens.colors.text_primary_invert}', + description: 'Text color of the inverted Tooltip.', + }, + tab_line_border: { + value: '{semanticTokens.colors.border_primary_DEFAULT}', + description: 'Border color of the TabLine in its normal state.', + }, + tab_line_border_hover: { + value: '{semanticTokens.colors.border_primary_DEFAULT}', + description: 'Border color of the TabLine in its hover state.', + }, + tab_line_border_active: { + value: '{semanticTokens.colors.border_info_active}', + description: 'Border color of the TabLine in its active state.', + }, + slider_bar: { + value: '{semanticTokens.colors.progress_bar_bg_DEFAULT}', + description: 'Track background of the Slider.', + }, + slider_bar_hover: { + value: '{semanticTokens.colors.progress_bar_bg_hover}', + description: 'Hover state of the Slider track background.', + }, + slider_knob: { + value: '{baseTokens.colors.gray.white}', + description: 'Knob fill color of the Slider.', + }, + slider_knob_border: { + value: '{semanticTokens.colors.control_primary_info_DEFAULT}', + description: 'Knob border color of the Slider in its normal state.', + }, + slider_knob_border_hover: { + value: '{semanticTokens.colors.control_primary_info_hover}', + description: 'Knob border color of the Slider in its hover state.', + }, + pills_bg: { + value: '{semanticTokens.colors.bg_primary_neutral_DEFAULT}', + description: 'Background of the Pills in its normal state.', + }, + pills_border: { + value: '{semanticTokens.colors.border_primary_DEFAULT}', + description: 'Border color of the Pills in its normal state.', + }, + pills_bg_hover: { + value: '{semanticTokens.colors.bg_secondary_neutral_DEFAULT}', + description: 'Hover state of the Pills background.', + }, + pills_bg_selected: { + value: '{semanticTokens.colors.bg_secondary_info_DEFAULT}', + description: 'Background of the selected Pill.', + }, + pills_border_selected: { + value: '{semanticTokens.colors.border_info_active}', + description: 'Border color of the selected Pill.', + }, + control_text_primary: { + value: '{semanticTokens.colors.text_primary_DEFAULT}', + description: 'Primary text color for form controls.', + }, + control_text_secondary: { + value: '{semanticTokens.colors.text_secondary_DEFAULT}', + description: 'Secondary text color for form controls.', + }, + control_text_invert: { + value: '{semanticTokens.colors.text_primary_invert}', + description: 'Inverted primary text color for form controls.', + }, + control_select_trigger_normal: { + value: '{semanticTokens.colors.bg_primary_neutral_DEFAULT}', + description: 'Background of the Select trigger in its normal state.', + }, + control_select_trigger_hover: { + value: '{semanticTokens.colors.bg_primary_neutral_hover}', + description: 'Background of the Select trigger in its hover state.', + }, + control_select_trigger_active: { + value: '{semanticTokens.colors.bg_primary_neutral_DEFAULT}', + description: 'Background of the Select trigger in its active state.', + }, + spin_bg: { + value: '{semanticTokens.colors.border_primary_DEFAULT}', + description: 'Track color of the Spin loader.', + }, + spin_bg_invert: { + value: '{semanticTokens.colors.border_primary_invert}', + description: 'Inverted track color of the Spin loader.', + }, + illustration_gray: { + value: '{baseTokens.colors.gray.100}', + description: 'Gray fill color for illustrations.', + }, + illustration_border: { + value: '{baseTokens.colors.gray.500}', + description: 'Border color for illustrations.', + }, + chart_data_success: { + value: '{baseTokens.colors.green.300}', + description: 'Success data color for charts.', + }, + chart_data_warning: { + value: '{baseTokens.colors.orange.300}', + description: 'Warning data color for charts.', + }, + chart_data_critical: { + value: '{baseTokens.colors.red.400}', + description: 'Critical data color for charts.', + }, + wizard_bg: { + value: '{semanticTokens.colors.bg_primary_neutral_DEFAULT}', + description: 'Main background of the Wizard.', + }, + wizard_sidebar_bg: { + value: '{semanticTokens.colors.control_primary_advertising_DEFAULT}', + description: 'Background of the Wizard sidebar.', + }, + wizard_sidebar_control: { + value: '{semanticTokens.colors.control_primary_advertising_DEFAULT}', + description: 'Background of the control in the Wizard sidebar in its normal state.', + }, + wizard_sidebar_control_hover: { + value: '{semanticTokens.colors.control_primary_advertising_hover}', + description: 'Hover state of the control in the Wizard sidebar.', + }, + wizard_sidebar_control_active: { + value: '{semanticTokens.colors.control_primary_advertising_active}', + description: 'Active state of the control in the Wizard sidebar.', + }, + wizard_sidebar_text_primary: { + value: '{semanticTokens.colors.text_primary_invert}', + description: 'Primary text color in the Wizard sidebar.', + }, + wizard_sidebar_text_secondary: { + value: '{semanticTokens.colors.text_secondary_invert}', + description: 'Secondary text color in the Wizard sidebar.', + }, + dropdown_menu_item_selected_border: { + value: '{semanticTokens.colors.control_primary_info_DEFAULT}', + description: 'Border color of the selected item in the DropdownMenu.', + }, + notice_bubble_bg: { + value: '{semanticTokens.colors.bg_primary_invert_DEFAULT}', + description: 'Background of the NoticeBubble.', + }, + notice_bubble_bg_critical: { + value: '{semanticTokens.colors.bg_primary_critical}', + description: 'Critical background of the NoticeBubble.', + }, + tag_primary_bg_normal: { + value: '{semanticTokens.colors.bg_primary_neutral_DEFAULT}', + description: 'Background of the primary Tag in its normal state.', + }, + tag_primary_bg_hover: { + value: '{semanticTokens.colors.bg_primary_neutral_hover}', + description: 'Hover state of the primary Tag background.', + }, + tag_primary_border: { + value: '{semanticTokens.colors.bg_primary_neutral_DEFAULT}', + description: 'Border color of the primary Tag.', + }, + tag_secondary_border: { + value: '{semanticTokens.colors.border_primary_DEFAULT}', + description: 'Border color of the secondary Tag.', + }, + tag_secondary_border_invert: { + value: '{semanticTokens.colors.border_secondary_invert}', + description: 'Inverted border color of the secondary Tag.', + }, + tag_additional_normal: { + value: '{semanticTokens.colors.bg_primary_neutral_DEFAULT}', + description: 'Background of the additional Tag in its normal state.', + }, + tag_additional_hover_active: { + value: '{semanticTokens.colors.bg_primary_neutral_hover}', + description: 'Hover and active states of the additional Tag background.', + }, + tag_additional_border: { + value: '{semanticTokens.colors.border_primary_DEFAULT}', + description: 'Border color of the additional Tag.', + }, + checkbox_border: { + value: '{semanticTokens.colors.border_primary_DEFAULT}', + description: 'Border color of the Checkbox.', + }, + checkbox_button_border: { + value: '{semanticTokens.colors.border_primary_DEFAULT}', + description: 'Border color of the Checkbox button in its normal state.', + }, + checkbox_button_border_active: { + value: '{semanticTokens.colors.border_info_active}', + description: 'Border color of the Checkbox button in its active state.', + }, + checkbox_button_normal: { + value: '{semanticTokens.colors.bg_primary_neutral_DEFAULT}', + description: 'Background of the Checkbox button in its normal state.', + }, + checkbox_button_hover: { + value: '{semanticTokens.colors.control_secondary_info_DEFAULT}', + description: 'Hover state of the Checkbox button background.', + }, + checkbox_button_active: { + value: '{semanticTokens.colors.control_secondary_info_active}', + description: 'Active state of the Checkbox button background.', + }, + radio_border: { + value: '{semanticTokens.colors.border_primary_DEFAULT}', + description: 'Border color of the Radio.', + }, + opacity_fader_primary: { + value: '0.32', + description: 'Primary opacity for content fader overlays.', + }, + opacity_fader_secondary: { + value: '0.26', + description: 'Secondary opacity for content fader overlays.', + }, + opacity_limit_fader_primary: { + value: '0.85', + description: 'Primary opacity for limitation fader overlays.', + }, + opacity_limit_fader_secondary: { + value: '0.851', + description: 'Secondary opacity for limitation fader overlays.', + }, + badge_admin_bg: { + value: '{baseTokens.colors.blue.400}', + description: 'Background color of the admin Badge.', + }, + badge_alpha_bg: { + value: '{baseTokens.colors.red.400}', + description: 'Background color of the alpha Badge.', + }, + badge_beta_bg: { + value: '{baseTokens.colors.orange.400}', + description: 'Background color of the beta Badge.', + }, + badge_new_bg: { + value: '{baseTokens.colors.green.400}', + description: 'Background color of the new Badge.', + }, + badge_soon_bg: { + value: '{baseTokens.colors.gray.400}', + description: 'Background color of the soon Badge.', + }, + badge_unavailable_bg: { + value: '{baseTokens.colors.gray.100}', + description: 'Background color of the unavailable Badge.', + }, + badge_text_primary: { + value: '{semanticTokens.colors.text_primary_DEFAULT}', + description: 'Primary text color for Badge.', + }, + badge_text_secondary: { + value: '{semanticTokens.colors.text_secondary_DEFAULT}', + description: 'Secondary text color for Badge.', + }, + badge_text_primary_invert: { + value: '{semanticTokens.colors.text_primary_invert}', + description: 'Inverted primary text color for Badge.', + }, + feature_popover_text: { + value: '{semanticTokens.colors.text_primary_DEFAULT}', + description: 'Text color of the FeaturePopover.', + }, + feature_popover_dot: { + value: '{semanticTokens.colors.bg_primary_highlight}', + description: 'Color of the outer border of the FeaturePopover.Spot.', + }, + feature_popover_text_neutral: { + value: '{semanticTokens.colors.text_primary_invert}', + description: 'Neutral text color of the FeaturePopover.', + }, }, opacity: { disabled: { @@ -1767,8 +2075,10 @@ type FlattenPaths = T extends object }[keyof T] : ''; +export type RebrandingColorTokens = Record<'checkbox_rounded' | 'pills_rounded' | 'switch_bg' | 'switch_bg_info_active' | 'switch_bg_success_active' | 'switch_handle' | 'dot_notification_bg' | 'dot_notification_text' | 'tooltip_text' | 'tooltip_text_invert' | 'tab_line_border' | 'tab_line_border_hover' | 'tab_line_border_active' | 'slider_bar' | 'slider_bar_hover' | 'slider_knob' | 'slider_knob_border' | 'slider_knob_border_hover' | 'pills_bg' | 'pills_border' | 'pills_bg_hover' | 'pills_bg_selected' | 'pills_border_selected' | 'control_text_primary' | 'control_text_secondary' | 'control_text_invert' | 'control_select_trigger_normal' | 'control_select_trigger_hover' | 'control_select_trigger_active' | 'spin_bg' | 'spin_bg_invert' | 'illustration_gray' | 'illustration_border' | 'chart_data_success' | 'chart_data_warning' | 'chart_data_critical' | 'wizard_bg' | 'wizard_sidebar_bg' | 'wizard_sidebar_control' | 'wizard_sidebar_control_hover' | 'wizard_sidebar_control_active' | 'wizard_sidebar_text_primary' | 'wizard_sidebar_text_secondary' | 'dropdown_menu_item_selected_border' | 'notice_bubble_bg' | 'notice_bubble_bg_critical' | 'tag_primary_bg_normal' | 'tag_primary_bg_hover' | 'tag_primary_border' | 'tag_secondary_border' | 'tag_secondary_border_invert' | 'tag_additional_normal' | 'tag_additional_hover_active' | 'tag_additional_border' | 'checkbox_border' | 'checkbox_button_border' | 'checkbox_button_border_active' | 'checkbox_button_normal' | 'checkbox_button_hover' | 'checkbox_button_active' | 'radio_border' | 'opacity_fader_primary' | 'opacity_fader_secondary' | 'opacity_limit_fader_primary' | 'opacity_limit_fader_secondary' | 'badge_admin_bg' | 'badge_alpha_bg' | 'badge_beta_bg' | 'badge_new_bg' | 'badge_soon_bg' | 'badge_unavailable_bg' | 'badge_text_primary' | 'badge_text_secondary' | 'badge_text_primary_invert' | 'feature_popover_text' | 'feature_popover_dot' | 'feature_popover_text_neutral', Value>; + export type SemanticTokens = { - colors: Record, Value>; + colors: Record, Value> & RebrandingColorTokens; opacity: { disabled: Value; }; diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json index ec20b71495..e21738bf10 100644 --- a/website/docs/style/design-tokens/design-tokens.json +++ b/website/docs/style/design-tokens/design-tokens.json @@ -2437,6 +2437,468 @@ "feedback-form" ] }, + { + "name": "--intergalactic-checkbox-rounded", + "value": "6px", + "description": "Use for rounding Checkbox.", + "components": [] + }, + { + "name": "--intergalactic-pills-rounded", + "value": "6px", + "description": "Use for rounding Pills.", + "components": [] + }, + { + "name": "--intergalactic-switch-bg", + "value": "oklch(0.74 0.003 165.2)", + "description": "Subtle background of the Switch control.", + "components": [] + }, + { + "name": "--intergalactic-switch-bg-info-active", + "value": "oklch(0.23 0.01 140)", + "description": "Active background of the Switch control.", + "components": [] + }, + { + "name": "--intergalactic-switch-bg-success-active", + "value": "oklch(0.64 0.161 170)", + "description": "Active background of the Switch control.", + "components": [] + }, + { + "name": "--intergalactic-switch-handle", + "value": "#ffffff", + "description": "Handle color of the Switch control.", + "components": [] + }, + { + "name": "--intergalactic-dot-notification-bg", + "value": "oklch(0.728 0.188 51.8)", + "description": "Background color of the notification Dot.", + "components": [] + }, + { + "name": "--intergalactic-dot-notification-text", + "value": "oklch(0.999 0.001 180 / 0.949)", + "description": "Text color of the notification Dot.", + "components": [] + }, + { + "name": "--intergalactic-tooltip-text", + "value": "oklch(0.1 0.03 137 / 0.899)", + "description": "Text color of the default Tooltip.", + "components": [] + }, + { + "name": "--intergalactic-tooltip-text-invert", + "value": "oklch(0.999 0.001 180 / 0.949)", + "description": "Text color of the inverted Tooltip.", + "components": [] + }, + { + "name": "--intergalactic-tab-line-border", + "value": "oklch(0.137 0.026 175.7 / 0.161)", + "description": "Border color of the TabLine in its normal state.", + "components": [] + }, + { + "name": "--intergalactic-tab-line-border-hover", + "value": "oklch(0.137 0.026 175.7 / 0.161)", + "description": "Border color of the TabLine in its hover state.", + "components": [] + }, + { + "name": "--intergalactic-tab-line-border-active", + "value": "oklch(0.7 0.131 275.2)", + "description": "Border color of the TabLine in its active state.", + "components": [] + }, + { + "name": "--intergalactic-slider-bar", + "value": "oklch(0.96 0.001 180)", + "description": "Track background of the Slider.", + "components": [] + }, + { + "name": "--intergalactic-slider-bar-hover", + "value": "oklch(0.88 0.002 175.6)", + "description": "Hover state of the Slider track background.", + "components": [] + }, + { + "name": "--intergalactic-slider-knob", + "value": "#ffffff", + "description": "Knob fill color of the Slider.", + "components": [] + }, + { + "name": "--intergalactic-slider-knob-border", + "value": "oklch(0.23 0.01 140)", + "description": "Knob border color of the Slider in its normal state.", + "components": [] + }, + { + "name": "--intergalactic-slider-knob-border-hover", + "value": "oklch(0.32 0.007 140)", + "description": "Knob border color of the Slider in its hover state.", + "components": [] + }, + { + "name": "--intergalactic-pills-bg", + "value": "oklch(1 0 0)", + "description": "Background of the Pills in its normal state.", + "components": [] + }, + { + "name": "--intergalactic-pills-border", + "value": "oklch(0.137 0.026 175.7 / 0.161)", + "description": "Border color of the Pills in its normal state.", + "components": [] + }, + { + "name": "--intergalactic-pills-bg-hover", + "value": "oklch(0.98 0.001 180)", + "description": "Hover state of the Pills background.", + "components": [] + }, + { + "name": "--intergalactic-pills-bg-selected", + "value": "oklch(0.959 0.021 267.8)", + "description": "Background of the selected Pill.", + "components": [] + }, + { + "name": "--intergalactic-pills-border-selected", + "value": "oklch(0.7 0.131 275.2)", + "description": "Border color of the selected Pill.", + "components": [] + }, + { + "name": "--intergalactic-control-text-primary", + "value": "oklch(0.1 0.03 137 / 0.899)", + "description": "Primary text color for form controls.", + "components": [] + }, + { + "name": "--intergalactic-control-text-secondary", + "value": "oklch(0.088 0.026 147.7 / 0.583)", + "description": "Secondary text color for form controls.", + "components": [] + }, + { + "name": "--intergalactic-control-text-invert", + "value": "oklch(0.999 0.001 180 / 0.949)", + "description": "Inverted primary text color for form controls.", + "components": [] + }, + { + "name": "--intergalactic-control-select-trigger-normal", + "value": "oklch(1 0 0)", + "description": "Background of the Select trigger in its normal state.", + "components": [] + }, + { + "name": "--intergalactic-control-select-trigger-hover", + "value": "oklch(0.98 0.001 180)", + "description": "Background of the Select trigger in its hover state.", + "components": [] + }, + { + "name": "--intergalactic-control-select-trigger-active", + "value": "oklch(1 0 0)", + "description": "Background of the Select trigger in its active state.", + "components": [] + }, + { + "name": "--intergalactic-spin-bg", + "value": "oklch(0.137 0.026 175.7 / 0.161)", + "description": "Track color of the Spin loader.", + "components": [] + }, + { + "name": "--intergalactic-spin-bg-invert", + "value": "oklch(0.995 0.008 147.4 / 0.391)", + "description": "Inverted track color of the Spin loader.", + "components": [] + }, + { + "name": "--intergalactic-illustration-gray", + "value": "oklch(0.9 0.002 177)", + "description": "Gray fill color for illustrations.", + "components": [] + }, + { + "name": "--intergalactic-illustration-border", + "value": "oklch(0.53 0.004 149.6)", + "description": "Border color for illustrations.", + "components": [] + }, + { + "name": "--intergalactic-chart-data-success", + "value": "oklch(0.74 0.17 170)", + "description": "Success data color for charts.", + "components": [] + }, + { + "name": "--intergalactic-chart-data-warning", + "value": "oklch(0.74 0.19 53)", + "description": "Warning data color for charts.", + "components": [] + }, + { + "name": "--intergalactic-chart-data-critical", + "value": "oklch(0.64 0.226 24.5)", + "description": "Critical data color for charts.", + "components": [] + }, + { + "name": "--intergalactic-wizard-bg", + "value": "oklch(1 0 0)", + "description": "Main background of the Wizard.", + "components": [] + }, + { + "name": "--intergalactic-wizard-sidebar-bg", + "value": "oklch(0.64 0.223 299.3)", + "description": "Background of the Wizard sidebar.", + "components": [] + }, + { + "name": "--intergalactic-wizard-sidebar-control", + "value": "oklch(0.64 0.223 299.3)", + "description": "Background of the control in the Wizard sidebar in its normal state.", + "components": [] + }, + { + "name": "--intergalactic-wizard-sidebar-control-hover", + "value": "oklch(0.6 0.244 297.8)", + "description": "Hover state of the control in the Wizard sidebar.", + "components": [] + }, + { + "name": "--intergalactic-wizard-sidebar-control-active", + "value": "oklch(0.58 0.254 297.1)", + "description": "Active state of the control in the Wizard sidebar.", + "components": [] + }, + { + "name": "--intergalactic-wizard-sidebar-text-primary", + "value": "oklch(0.999 0.001 180 / 0.949)", + "description": "Primary text color in the Wizard sidebar.", + "components": [] + }, + { + "name": "--intergalactic-wizard-sidebar-text-secondary", + "value": "oklch(0.997 0.004 165.9 / 0.684)", + "description": "Secondary text color in the Wizard sidebar.", + "components": [] + }, + { + "name": "--intergalactic-dropdown-menu-item-selected-border", + "value": "oklch(0.23 0.01 140)", + "description": "Border color of the selected item in the DropdownMenu.", + "components": [] + }, + { + "name": "--intergalactic-notice-bubble-bg", + "value": "oklch(0.23 0.01 140)", + "description": "Background of the NoticeBubble.", + "components": [] + }, + { + "name": "--intergalactic-notice-bubble-bg-critical", + "value": "oklch(0.64 0.226 24.5)", + "description": "Critical background of the NoticeBubble.", + "components": [] + }, + { + "name": "--intergalactic-tag-primary-bg-normal", + "value": "oklch(1 0 0)", + "description": "Background of the primary Tag in its normal state.", + "components": [] + }, + { + "name": "--intergalactic-tag-primary-bg-hover", + "value": "oklch(0.98 0.001 180)", + "description": "Hover state of the primary Tag background.", + "components": [] + }, + { + "name": "--intergalactic-tag-primary-border", + "value": "oklch(1 0 0)", + "description": "Border color of the primary Tag.", + "components": [] + }, + { + "name": "--intergalactic-tag-secondary-border", + "value": "oklch(0.137 0.026 175.7 / 0.161)", + "description": "Border color of the secondary Tag.", + "components": [] + }, + { + "name": "--intergalactic-tag-secondary-border-invert", + "value": "oklch(0.995 0.008 145.9 / 0.369)", + "description": "Inverted border color of the secondary Tag.", + "components": [] + }, + { + "name": "--intergalactic-tag-additional-normal", + "value": "oklch(1 0 0)", + "description": "Background of the additional Tag in its normal state.", + "components": [] + }, + { + "name": "--intergalactic-tag-additional-hover-active", + "value": "oklch(0.98 0.001 180)", + "description": "Hover and active states of the additional Tag background.", + "components": [] + }, + { + "name": "--intergalactic-tag-additional-border", + "value": "oklch(0.137 0.026 175.7 / 0.161)", + "description": "Border color of the additional Tag.", + "components": [] + }, + { + "name": "--intergalactic-checkbox-border", + "value": "oklch(0.137 0.026 175.7 / 0.161)", + "description": "Border color of the Checkbox.", + "components": [] + }, + { + "name": "--intergalactic-checkbox-button-border", + "value": "oklch(0.137 0.026 175.7 / 0.161)", + "description": "Border color of the Checkbox button in its normal state.", + "components": [] + }, + { + "name": "--intergalactic-checkbox-button-border-active", + "value": "oklch(0.7 0.131 275.2)", + "description": "Border color of the Checkbox button in its active state.", + "components": [] + }, + { + "name": "--intergalactic-checkbox-button-normal", + "value": "oklch(1 0 0)", + "description": "Background of the Checkbox button in its normal state.", + "components": [] + }, + { + "name": "--intergalactic-checkbox-button-hover", + "value": "oklch(0.527 0.264 262.9 / 0.039)", + "description": "Hover state of the Checkbox button background.", + "components": [] + }, + { + "name": "--intergalactic-checkbox-button-active", + "value": "oklch(0.524 0.266 263.1 / 0.116)", + "description": "Active state of the Checkbox button background.", + "components": [] + }, + { + "name": "--intergalactic-radio-border", + "value": "oklch(0.137 0.026 175.7 / 0.161)", + "description": "Border color of the Radio.", + "components": [] + }, + { + "name": "--intergalactic-opacity-fader-primary", + "value": "0.32", + "description": "Primary opacity for content fader overlays.", + "components": [] + }, + { + "name": "--intergalactic-opacity-fader-secondary", + "value": "0.26", + "description": "Secondary opacity for content fader overlays.", + "components": [] + }, + { + "name": "--intergalactic-opacity-limit-fader-primary", + "value": "0.85", + "description": "Primary opacity for limitation fader overlays.", + "components": [] + }, + { + "name": "--intergalactic-opacity-limit-fader-secondary", + "value": "0.851", + "description": "Secondary opacity for limitation fader overlays.", + "components": [] + }, + { + "name": "--intergalactic-badge-admin-bg", + "value": "oklch(0.58 0.168 278.2)", + "description": "Background color of the admin Badge.", + "components": [] + }, + { + "name": "--intergalactic-badge-alpha-bg", + "value": "oklch(0.64 0.226 24.5)", + "description": "Background color of the alpha Badge.", + "components": [] + }, + { + "name": "--intergalactic-badge-beta-bg", + "value": "oklch(0.64 0.196 47.3)", + "description": "Background color of the beta Badge.", + "components": [] + }, + { + "name": "--intergalactic-badge-new-bg", + "value": "oklch(0.64 0.161 170)", + "description": "Background color of the new Badge.", + "components": [] + }, + { + "name": "--intergalactic-badge-soon-bg", + "value": "oklch(0.64 0.003 157.8)", + "description": "Background color of the soon Badge.", + "components": [] + }, + { + "name": "--intergalactic-badge-unavailable-bg", + "value": "oklch(0.9 0.002 177)", + "description": "Background color of the unavailable Badge.", + "components": [] + }, + { + "name": "--intergalactic-badge-text-primary", + "value": "oklch(0.1 0.03 137 / 0.899)", + "description": "Primary text color for Badge.", + "components": [] + }, + { + "name": "--intergalactic-badge-text-secondary", + "value": "oklch(0.088 0.026 147.7 / 0.583)", + "description": "Secondary text color for Badge.", + "components": [] + }, + { + "name": "--intergalactic-badge-text-primary-invert", + "value": "oklch(0.999 0.001 180 / 0.949)", + "description": "Inverted primary text color for Badge.", + "components": [] + }, + { + "name": "--intergalactic-feature-popover-text", + "value": "oklch(0.1 0.03 137 / 0.899)", + "description": "Text color of the FeaturePopover.", + "components": [] + }, + { + "name": "--intergalactic-feature-popover-dot", + "value": "oklch(0.88 0.078 303)", + "description": "Color of the outer border of the FeaturePopover.Spot.", + "components": [] + }, + { + "name": "--intergalactic-feature-popover-text-neutral", + "value": "oklch(0.999 0.001 180 / 0.949)", + "description": "Neutral text color of the FeaturePopover.", + "components": [] + }, { "name": "--intergalactic-disabled-opacity", "value": "0.4", From 86f37f0ba549588bec3b772b36d6707fe725fad0 Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Wed, 1 Jul 2026 20:31:52 +0200 Subject: [PATCH 02/12] [theme] update theme and add comments to a bunch of components styles --- semcore/badge/src/Badge.tsx | 16 +- semcore/badge/src/style/badge.shadow.css | 4 +- .../src/style/base-trigger.shadow.css | 6 +- .../src/component/Button/button.shadow.css | 70 ++-- .../checkbox/src/style/checkbox.shadow.css | 28 +- semcore/dot/src/style/dot.shadow.css | 4 +- .../dropdown/src/style/dropdown.shadow.css | 2 +- .../src/components/button/button.shadow.css | 6 +- .../components/checkbox/checkbox.shadow.css | 16 +- .../src/components/pills/pills.shadow.css | 14 +- .../src/components/radio/radio.shadow.css | 4 +- .../src/components/switch/switch.shadow.css | 2 +- .../components/tab-line/tabLine.shadow.css | 4 +- .../src/style/feature-popover.shadow.css | 6 +- .../src/style/checkbox-button.shadow.css | 9 +- .../src/style/notice-bubble.shadow.css | 4 +- semcore/pills/src/style/pills.shadow.css | 14 +- semcore/radio/src/style/radio.shadow.css | 18 +- semcore/select/src/style/select.shadow.css | 10 +- semcore/slider/src/style/slider.shadow.css | 12 +- semcore/spin/src/style/spin.shadow.css | 4 +- semcore/switch/src/style/switch.shadow.css | 12 +- .../tab-line/src/style/tab-line.shadow.css | 8 +- semcore/tag/src/style/tag.shadow.css | 7 +- semcore/tooltip/src/style/tooltip.shadow.css | 4 +- semcore/wizard/src/style/wizard.shadow.css | 12 +- tools/theme/src/theme.ts | 306 +++++++++++++++--- .../style/design-tokens/design-tokens.json | 128 +++++--- 28 files changed, 489 insertions(+), 241 deletions(-) diff --git a/semcore/badge/src/Badge.tsx b/semcore/badge/src/Badge.tsx index 9e21dae152..fc139b2a49 100644 --- a/semcore/badge/src/Badge.tsx +++ b/semcore/badge/src/Badge.tsx @@ -91,7 +91,7 @@ class RootBadge extends Component { if (type === 'unavailable' && !inverted) { return resolveColor('--intergalactic-text-secondary'); - } + } // change to --intergalactic-badge-text-secondary return undefined; } @@ -102,27 +102,27 @@ class RootBadge extends Component { if (inverted) { return resolveColor('--gray-white'); - } + } // change to --intergalactic-badge-bg-invert switch (type) { case 'admin': { return resolveColor('--blue-400'); - } + } // change to --intergalactic-badge-bg-admin case 'alpha': { return resolveColor('--red-400'); - } + } // change to --intergalactic-badge-bg-alpha case 'beta': { return resolveColor('--orange-400'); - } + } // change to --intergalactic-badge-bg-beta case 'new': { return resolveColor('--green-400'); - } + } // change to --intergalactic-badge-bg-new case 'soon': { return resolveColor('--gray-400'); - } + } // change to --intergalactic-badge-bg-soon case 'unavailable': { return resolveColor('--gray-100'); - } + } // change to --intergalactic-badge-bg-unavailable default: { const t: never = type; throw new Error(`Type can't be "${t}"`); diff --git a/semcore/badge/src/style/badge.shadow.css b/semcore/badge/src/style/badge.shadow.css index 1bb5f69c18..67decfc5f3 100644 --- a/semcore/badge/src/style/badge.shadow.css +++ b/semcore/badge/src/style/badge.shadow.css @@ -11,7 +11,7 @@ SBadge { letter-spacing: 0.3px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-badge-text-primary-invert */ } SBadge[bg] { @@ -20,7 +20,7 @@ SBadge[bg] { SBadge[inverted] { color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); -} +} /* change to --intergalactic-badge-text-primary */ SBadge[color] { color: var(--color); diff --git a/semcore/base-trigger/src/style/base-trigger.shadow.css b/semcore/base-trigger/src/style/base-trigger.shadow.css index 93335b2862..18583bc253 100644 --- a/semcore/base-trigger/src/style/base-trigger.shadow.css +++ b/semcore/base-trigger/src/style/base-trigger.shadow.css @@ -19,7 +19,7 @@ SBaseTrigger { font-family: inherit; cursor: pointer; - background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); + background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* change to --intergalactic-control-select-trigger-normal */ font-weight: var(--intergalactic-regular, 400); border: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); @@ -40,13 +40,13 @@ SBaseTrigger { } &:hover { - background-color: var(--intergalactic-bg-primary-neutral-hover, oklch(0.98 0.001 180)); + background-color: var(--intergalactic-bg-primary-neutral-hover, oklch(0.98 0.001 180)); /* change to --intergalactic-control-select-trigger-hover */ } &:active, &[active] { border-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2)); - background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); + background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* change to --intergalactic-control-select-trigger-active */ } } diff --git a/semcore/button/src/component/Button/button.shadow.css b/semcore/button/src/component/Button/button.shadow.css index cc7d5f67d5..a5b37a7bc8 100644 --- a/semcore/button/src/component/Button/button.shadow.css +++ b/semcore/button/src/component/Button/button.shadow.css @@ -20,7 +20,7 @@ SButton { touch-action: manipulation; -webkit-tap-highlight-color: transparent; font-weight: var(--intergalactic-medium, 500); - color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583)); + color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583)); /* change to --intergalactic-control-text-secondary */ min-width: fit-content; &::-moz-focus-inner { @@ -61,120 +61,121 @@ SButton[size='l'] { } SButton[theme='primary-info'] { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-control-text-primary-invert */ background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); &:hover { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-control-text-primary-invert */ background-color: var(--intergalactic-control-primary-info-hover, oklch(0.32 0.007 140)); } &:active, &[active] { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-control-text-primary-invert */ background-color: var(--intergalactic-control-primary-info-active, oklch(0 0 140)); } } SButton[theme='primary-success'] { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-control-text-primary-invert */ background-color: var(--intergalactic-control-primary-success, oklch(0.64 0.161 170)); &:hover { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-control-text-primary-invert */ background-color: var(--intergalactic-control-primary-success-hover, oklch(0.6 0.155 170)); } &:active, &[active] { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-control-text-primary-invert */ background-color: var(--intergalactic-control-primary-success-active, oklch(0.58 0.151 170)); } } SButton[theme='primary-brand'] { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); - background-color: var(--intergalactic-control-primary-brand, oklch(0.64 0.223 299.3)); + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-control-text-primary */ + background-color: var(--intergalactic-control-primary-brand, oklch(0.64 0.223 299.3)); /* change to: update the value to a lighter lavander color */ &:hover { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-control-text-primary */ background-color: var(--intergalactic-control-primary-brand-hover, oklch(0.6 0.244 297.8)); } &:active, &[active] { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-control-text-primary */ background-color: var(--intergalactic-control-primary-brand-active, oklch(0.58 0.254 297.1)); } } SButton[theme='primary-warning'] { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-control-text-primary-invert */ background-color: var(--intergalactic-control-primary-brand, oklch(0.64 0.223 299.3)); &:hover { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-control-text-primary-invert */ background-color: var(--intergalactic-control-primary-brand-hover, oklch(0.6 0.244 297.8)); } &:active, &[active] { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-control-text-primary-invert */ background-color: var(--intergalactic-control-primary-brand-active, oklch(0.58 0.254 297.1)); } } SButton[theme='primary-danger'] { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-control-text-primary-invert */ background-color: var(--intergalactic-control-primary-critical, oklch(0.64 0.226 24.5)); &:hover { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-control-text-primary-invert */ background-color: var(--intergalactic-control-primary-critical-hover, oklch(0.6 0.219 25.5)); } &:active, &[active] { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-control-text-primary-invert */ background-color: var(--intergalactic-control-primary-critical-active, oklch(0.58 0.215 26)); } } SButton[theme='primary-invert'] { - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); /* change to --intergalactic-control-text-primary */ background-color: var(--intergalactic-control-primary-invert, oklch(1 0 0)); &:hover { - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); /* change to --intergalactic-control-text-primary */ background-color: var(--intergalactic-control-primary-invert-hover, oklch(0.96 0.001 180)); } &:active, &[active] { - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); /* change to --intergalactic-control-text-primary */ background-color: var(--intergalactic-control-primary-invert-active, oklch(0.94 0.002 180)); } } SButton[theme='secondary-muted'] { - color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583)); + color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583)); /* change to --intergalactic-control-text-secondary */ border-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); background-color: var(--intergalactic-control-secondary-neutral, oklch(0.177 0.033 175.6 / 0.028)); &:hover { background-color: var(--intergalactic-control-secondary-neutral-hover, oklch(0.176 0.033 175.6 / 0.056)); - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); /* change to --intergalactic-control-text-primary */ } &:active, &[active] { background-color: var(--intergalactic-control-secondary-neutral-active, oklch(0.176 0.033 175.7 / 0.084)); - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); /* change to --intergalactic-control-text-primary */ } } +/* Remove this theme */ SButton[theme='secondary-info'] { background-color: var(--intergalactic-control-secondary-info, oklch(0.527 0.264 262.9 / 0.039)); color: var(--intergalactic-text-link, oklch(0.53 0.21 263)); @@ -193,23 +194,24 @@ SButton[theme='secondary-info'] { } SButton[theme='secondary-invert'] { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-control-text-primary-invert */ border-color: var(--intergalactic-border-primary-invert, oklch(0.995 0.008 147.4 / 0.391)); background-color: var(--intergalactic-control-secondary-invert, oklch(0.969 0.057 140 / 0.118)); &:hover { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-control-text-primary-invert */ background-color: var(--intergalactic-control-secondary-invert-hover, oklch(0.976 0.043 140 / 0.145)); } &:active, &[active] { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-control-text-primary-invert */ background-color: var(--intergalactic-control-secondary-invert-active, oklch(0.983 0.03 140 / 0.183)); } } +/* Remove this theme */ SButton[theme='tertiary-info'] { color: var(--intergalactic-text-link, oklch(0.53 0.21 263)); background-color: var(--intergalactic-control-tertiary-info, transparent); @@ -227,34 +229,34 @@ SButton[theme='tertiary-info'] { } SButton[theme='tertiary-muted'] { - color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583)); + color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583)); /* change to --intergalactic-control-text-tertiary */ background-color: var(--intergalactic-control-tertiary-neutral, transparent); &:hover { background-color: var(--intergalactic-control-tertiary-neutral-hover, oklch(0.176 0.033 175.6 / 0.056)); - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); /* change to --intergalactic-control-text-primary */ } &:active, &[active] { background-color: var(--intergalactic-control-tertiary-neutral-active, oklch(0.176 0.033 175.7 / 0.084)); - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); /* change to --intergalactic-control-text-primary */ } } SButton[theme='tertiary-invert'] { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-control-text-primary-invert */ background-color: var(--intergalactic-control-tertiary-invert, transparent); &:hover { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-control-text-primary-invert */ background-color: var(--intergalactic-control-tertiary-invert-hover, oklch(0.976 0.043 140 / 0.145)); } &:active, &[active] { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-control-text-primary-invert */ background-color: var(--intergalactic-control-tertiary-invert-active, oklch(0.983 0.03 140 / 0.183)); } } @@ -283,11 +285,11 @@ SButton[neighborLocation='left'] { &:after { background-color: var(--intergalactic-border-primary-invert, oklch(0.995 0.008 147.4 / 0.391)); - } + } /* change to ? */ &[theme='secondary-muted'] { &:after { - background-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); + background-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); /* change to ? */ } } } diff --git a/semcore/checkbox/src/style/checkbox.shadow.css b/semcore/checkbox/src/style/checkbox.shadow.css index 2cc6c1746f..2afb9e314a 100644 --- a/semcore/checkbox/src/style/checkbox.shadow.css +++ b/semcore/checkbox/src/style/checkbox.shadow.css @@ -44,9 +44,9 @@ SCheckbox { left: 0; right: 0; bottom: 0; - background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); + background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* change to --intergalactic-checkbox-bg */ border: 1px solid; - border-radius: var(--intergalactic-addon-rounded, 4px); + border-radius: var(--intergalactic-addon-rounded, 4px); /* change to --intergalactic-checkbox-rounded */ transition: calc(var(--intergalactic-duration-control, 200) * 1ms) all ease-in-out; outline-color: transparent; } @@ -64,11 +64,11 @@ SCheckbox { } &[state='normal']:before { - border-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); + border-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); /* change to --intergalactic-checkbox-border */ } &[state='normal']:focus-visible:before { - border-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2)); + border-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2)); /* change to ...? do we need this? checkbox get focus outline from Box and these color is rewritten */ } } @@ -106,19 +106,19 @@ SText[size='m'] { SControl[checked]~SCheckbox[state='normal']:before, SControl[checked]~SCheckbox[state='invalid']:before { - background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); - border-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); + background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* change to --intergalactic-checkbox-bg-selected */ + border-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* change to --intergalactic-checkbox-bg-selected */ } SControl[indeterminate]~SCheckbox[state='normal']:before { - background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); - border-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); + background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* change to --intergalactic-checkbox-bg-selected */ + border-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* change to --intergalactic-checkbox-bg-selected */ } SCheckbox[state='invalid'], SControl[checked]~SCheckbox[state='invalid'] { &:before { - border-color: var(--intergalactic-border-critical-active, oklch(0.7 0.21 23)); + border-color: var(--intergalactic-border-critical-active, oklch(0.7 0.21 23)); /* change to ...? not sure if we need to add special vars for invalid checkbox */ } } @@ -139,13 +139,13 @@ SControl[disabled] ~ SCheckbox[state='invalid'] > SInvalidPattern { SControl[checked]~SCheckbox { &[state='invalid']:before { - background-color: var(--intergalactic-control-primary-critical, oklch(0.64 0.226 24.5)); - border-color: var(--intergalactic-control-primary-critical, oklch(0.64 0.226 24.5)); + background-color: var(--intergalactic-control-primary-critical, oklch(0.64 0.226 24.5)); /* change to ...? not sure if we need to add separate vars for invalid checkbox and radio inputs*/ + border-color: var(--intergalactic-control-primary-critical, oklch(0.64 0.226 24.5)); /* change to ...? not sure if we need to add separate vars for invalid checkbox and radio inputs*/ } } SControl[indeterminate]~SCheckbox:after { - background-color: #ffffff; + background-color: #ffffff; /* change to --gray-white? */ margin: auto; /* disable-tokens-validator */ border-radius: 1px; @@ -162,8 +162,8 @@ SControl[indeterminate]~SCheckbox[size='m']:after { } SControl[indeterminate]~SCheckbox[state='invalid']:before { - background-color: var(--intergalactic-control-primary-critical, oklch(0.64 0.226 24.5)); - border-color: var(--intergalactic-control-primary-critical, oklch(0.64 0.226 24.5)); + background-color: var(--intergalactic-control-primary-critical, oklch(0.64 0.226 24.5)); /* change to ...? not sure if we need to add separate vars for invalid checkbox and radio inputs*/ + border-color: var(--intergalactic-control-primary-critical, oklch(0.64 0.226 24.5)); /* change to ...? not sure if we need to add separate vars for invalid checkbox and radio inputs*/ } SCheckbox[checked][theme][state='normal']:before { diff --git a/semcore/dot/src/style/dot.shadow.css b/semcore/dot/src/style/dot.shadow.css index ec36b6a3f6..184a6aa59f 100644 --- a/semcore/dot/src/style/dot.shadow.css +++ b/semcore/dot/src/style/dot.shadow.css @@ -4,8 +4,8 @@ SDot { justify-content: center; font-size: var(--intergalactic-fs-50, 10px); line-height: normal; - background-color: var(--intergalactic-icon-primary-warning, oklch(0.728 0.188 51.8)); - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); + background-color: var(--intergalactic-icon-primary-warning, oklch(0.728 0.188 51.8)); /* change to --intergalactic-dot-notification-bg */ + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-dot-notification-text */ box-sizing: border-box; z-index: 1; border-radius: 100%; diff --git a/semcore/dropdown/src/style/dropdown.shadow.css b/semcore/dropdown/src/style/dropdown.shadow.css index c39f012ddb..ccc9e509d4 100644 --- a/semcore/dropdown/src/style/dropdown.shadow.css +++ b/semcore/dropdown/src/style/dropdown.shadow.css @@ -57,7 +57,7 @@ SDropdownPopper { SDropdownItem[selected]:not(SDropdownItem[isMenuItemCheckbox]) { background-color: var(--intergalactic-dropdown-menu-item-selected, oklch(0.525 0.265 263 / 0.077)); - box-shadow: 2px 0px 0px 0px var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)) inset; + box-shadow: 2px 0px 0px 0px var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)) inset; /* change to --intergalactic-dropdown-menu-item-selected-border */ &:hover { background-color: var(--intergalactic-dropdown-menu-item-selected-hover, oklch(0.52 0.268 263.2 / 0.191)); diff --git a/semcore/feature-highlight/src/components/button/button.shadow.css b/semcore/feature-highlight/src/components/button/button.shadow.css index 0b1d8bf3df..b90a4f9007 100644 --- a/semcore/feature-highlight/src/components/button/button.shadow.css +++ b/semcore/feature-highlight/src/components/button/button.shadow.css @@ -1,5 +1,5 @@ SHighlightedButton[theme='primary-highlighted'] { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-control-text-primary-invert */ background-image: linear-gradient(90deg, var(--intergalactic-violet-500, oklch(0.53 0.26 296)), var(--intergalactic-blue-500, oklch(0.53 0.157 279.2)), @@ -10,13 +10,13 @@ SHighlightedButton[theme='primary-highlighted'] { transition: background-position-x 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); &:hover { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-control-text-primary-invert */ background-position-x: 1%; } &:active, &[active] { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-control-text-primary-invert */ background-image: var(--intergalactic-control-primary-feature-highlight-active, linear-gradient(90deg in oklch, oklch(0.64 0.223 299.3), oklch(0.58 0.168 278.2))); background-size: 100%; } diff --git a/semcore/feature-highlight/src/components/checkbox/checkbox.shadow.css b/semcore/feature-highlight/src/components/checkbox/checkbox.shadow.css index b8c65da677..21e565d45c 100644 --- a/semcore/feature-highlight/src/components/checkbox/checkbox.shadow.css +++ b/semcore/feature-highlight/src/components/checkbox/checkbox.shadow.css @@ -4,17 +4,17 @@ SHighlightedCheckbox:not([state="invalid"]) { transform: translate(0); border: 1px solid transparent; - border-radius: var(--intergalactic-addon-rounded, 4px); - background: linear-gradient(white, white) padding-box, - var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, oklch(0.82 0.118 303), oklch(0.82 0.088 272.1))) border-box; + border-radius: var(--intergalactic-addon-rounded, 4px); /* change to --intergalactic-checkbox-rounded */ + background: linear-gradient(white, white) padding-box, /* change to --intergalactic-checkbox-bg */ + var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, oklch(0.82 0.118 303), oklch(0.82 0.088 272.1))) border-box; /* change to --intergalactic-checkbox-border */ background-origin: border-box; background-clip: padding-box, border-box; } input[data-ui-name="CheckboxFH.Value"]:checked + [data-ui-name="Value.CheckMark"] { border-color: transparent; - background: var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.74 0.117 274.1))) padding-box, - var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.74 0.117 274.1))) border-box; + background: var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.74 0.117 274.1))) padding-box, /* change to --intergalactic-checkbox-bg-selected */ + var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.74 0.117 274.1))) border-box; /* change to --intergalactic-checkbox-bg-selected */ } [data-ui-name="Value.CheckMark"]::before { @@ -25,10 +25,10 @@ SHighlightedCheckbox:not([state="invalid"]) { margin: -5px; padding: 1px; border-width: 2px; - border-radius: calc(var(--intergalactic-addon-rounded, 4px) + 3px); + border-radius: calc(var(--intergalactic-addon-rounded, 4px) + 3px); /* change to --intergalactic-checkbox-rounded */ border-color: transparent; pointer-events: none; - background: linear-gradient(white, white) padding-box, var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, oklch(0.82 0.118 303), oklch(0.82 0.088 272.1))) border-box; + background: linear-gradient(white, white) padding-box, var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, oklch(0.82 0.118 303), oklch(0.82 0.088 272.1))) border-box; /* change to --intergalactic-checkbox-border */ mask: linear-gradient(0deg, #fff, #fff) content-box, linear-gradient(0deg, #fff, #fff); mask-composite: exclude; @@ -52,6 +52,6 @@ SHighlightedCheckbox:not([state="invalid"]) { input[data-ui-name="CheckboxFH.Value"]:checked:focus-visible+[data-ui-name="Value.CheckMark"]::before { border-color: transparent; - background: linear-gradient(white, white) padding-box, var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.74 0.117 274.1))) border-box; + background: linear-gradient(white, white) padding-box, var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.74 0.117 274.1))) border-box; /* change to --intergalactic-checkbox-bg-selected */ } } diff --git a/semcore/feature-highlight/src/components/pills/pills.shadow.css b/semcore/feature-highlight/src/components/pills/pills.shadow.css index 83fb070568..20f263305e 100644 --- a/semcore/feature-highlight/src/components/pills/pills.shadow.css +++ b/semcore/feature-highlight/src/components/pills/pills.shadow.css @@ -1,8 +1,8 @@ SHighlightedPill { border: 1px solid transparent; background: - linear-gradient(white, white) padding-box, - var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, oklch(0.82 0.118 303), oklch(0.82 0.088 272.1))) border-box; + linear-gradient(white, white) padding-box, /* change to --intergalactic-pills-bg-normal */ + var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, oklch(0.82 0.118 303), oklch(0.82 0.088 272.1))) border-box; /* change to --intergalactic-pills-border */ background-origin: border-box; background-clip: padding-box, border-box; z-index: 1; @@ -15,7 +15,7 @@ SHighlightedPill { inset: 0; margin: -5px; padding: 2px; - border-radius: calc(var(--intergalactic-control-rounded, 6px) + 3px); + border-radius: calc(var(--intergalactic-control-rounded, 6px) + 3px); /* change to --intergalactic-pills-rounded */ background-image: var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.58 0.168 278.2))); mask: linear-gradient(0deg, #fff, #fff) content-box, linear-gradient(0deg, #fff, #fff); @@ -46,14 +46,14 @@ SHighlightedPill { } &:hover { - background: var(--intergalactic-bg-primary-feature-highlight-hover-active, linear-gradient(90deg in oklch, oklch(0.97 0.019 303.4), oklch(0.929 0.037 268))) padding-box, - var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, oklch(0.82 0.118 303), oklch(0.82 0.088 272.1))) border-box; + background: var(--intergalactic-bg-primary-feature-highlight-hover-active, linear-gradient(90deg in oklch, oklch(0.97 0.019 303.4), oklch(0.929 0.037 268))) padding-box, /* change to --intergalactic-pills-bg-hover */ + var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, oklch(0.82 0.118 303), oklch(0.82 0.088 272.1))) border-box; /* change to --intergalactic-pills-border */ } &[selected] { background: - var(--intergalactic-bg-primary-feature-highlight-hover-active, linear-gradient(90deg in oklch, oklch(0.97 0.019 303.4), oklch(0.929 0.037 268))) padding-box, - var(--intergalactic-control-primary-feature-highlight-hover, linear-gradient(90deg in oklch, oklch(0.64 0.223 299.3), oklch(0.74 0.117 274.1))) border-box; + var(--intergalactic-bg-primary-feature-highlight-hover-active, linear-gradient(90deg in oklch, oklch(0.97 0.019 303.4), oklch(0.929 0.037 268))) padding-box, /* change to --intergalactic-pills-bg-selected */ + var(--intergalactic-control-primary-feature-highlight-hover, linear-gradient(90deg in oklch, oklch(0.64 0.223 299.3), oklch(0.74 0.117 274.1))) border-box; /* change to --intergalactic-pills-border-selected */ background-origin: border-box; background-clip: padding-box, border-box; border-color: transparent; diff --git a/semcore/feature-highlight/src/components/radio/radio.shadow.css b/semcore/feature-highlight/src/components/radio/radio.shadow.css index 5386c68d3f..367801126a 100644 --- a/semcore/feature-highlight/src/components/radio/radio.shadow.css +++ b/semcore/feature-highlight/src/components/radio/radio.shadow.css @@ -5,7 +5,7 @@ SHighlightedRadio { SHighlightedRadio:not([state="invalid"]) { [data-ui-name="Value.RadioMark"] { border-radius: 50%; - background: var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, oklch(0.82 0.118 303), oklch(0.82 0.088 272.1))); + background: var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, oklch(0.82 0.118 303), oklch(0.82 0.088 272.1))); /* change to --intergalactic-radio-border */ } [data-ui-name="Value.RadioMark"]::before { @@ -38,7 +38,7 @@ SHighlightedRadio:not([state="invalid"]) { right: 0; bottom: 0; border-radius: 50%; - background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); + background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* change to --intergalactic-radio-bg-normal */ top: 50%; left: 50%; width: calc(100% - 2px); diff --git a/semcore/feature-highlight/src/components/switch/switch.shadow.css b/semcore/feature-highlight/src/components/switch/switch.shadow.css index 4db8d1c773..e5e566bb17 100644 --- a/semcore/feature-highlight/src/components/switch/switch.shadow.css +++ b/semcore/feature-highlight/src/components/switch/switch.shadow.css @@ -26,7 +26,7 @@ SToggle { } SToggle[checked] { - color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); + color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* change to --intergalactic-control-switch-bg-info-active */ background-image: var(--intergalactic-control-primary-feature-highlight, linear-gradient(90deg in oklch, oklch(0.64 0.223 299.3), oklch(0.74 0.117 274.1))); } diff --git a/semcore/feature-highlight/src/components/tab-line/tabLine.shadow.css b/semcore/feature-highlight/src/components/tab-line/tabLine.shadow.css index f54465b645..db760a7f60 100644 --- a/semcore/feature-highlight/src/components/tab-line/tabLine.shadow.css +++ b/semcore/feature-highlight/src/components/tab-line/tabLine.shadow.css @@ -14,7 +14,7 @@ SHighlightedItem { } &[selected]::after, &:hover:not(:focus-visible)::after { opacity: 1; - background: var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.74 0.117 274.1))); + background: var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.74 0.117 274.1))); /* change to --intergalactic-tab-line-border-hover, --intergalactic-tab-line-border-active */ } &::before { @@ -42,5 +42,5 @@ SHighlightedItem { } SHighlightedCaret { - background: var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.74 0.117 274.1))); + background: var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.74 0.117 274.1))); /* change to --intergalactic-tab-line-border-active */ } diff --git a/semcore/feature-popover/src/style/feature-popover.shadow.css b/semcore/feature-popover/src/style/feature-popover.shadow.css index e4bd72c3d3..6055b95cc1 100644 --- a/semcore/feature-popover/src/style/feature-popover.shadow.css +++ b/semcore/feature-popover/src/style/feature-popover.shadow.css @@ -10,11 +10,11 @@ SFeaturePopover { &[theme='accent'] { background-color: var(--intergalactic-feature-popover-bg, oklch(0.88 0.078 303)); - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); /* change to --intergalactic-feature-popover-text */ } &[theme='neutral'] { background-color: var(--intergalactic-feature-popover-bg-neutral, oklch(0.23 0.01 140)); - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-feature-popover-text-invert */ } } @@ -94,7 +94,7 @@ SSpot { &[theme='accent'] { &::before { - background-color: var(--intergalactic-feature-popover-dot-outer-border, oklch(0.88 0.078 303)); + background-color: var(--intergalactic-feature-popover-dot-outer-border, oklch(0.88 0.078 303)); /* change to --intergalactic-feature-popover-dot */ } &::after { background-color: var(--intergalactic-feature-popover-bg, oklch(0.88 0.078 303)); diff --git a/semcore/feedback-form/src/style/checkbox-button.shadow.css b/semcore/feedback-form/src/style/checkbox-button.shadow.css index ee72f4f557..14c10d1259 100644 --- a/semcore/feedback-form/src/style/checkbox-button.shadow.css +++ b/semcore/feedback-form/src/style/checkbox-button.shadow.css @@ -1,6 +1,7 @@ SCheckboxButton { margin-top: var(--intergalactic-spacing-2x, 8px); - border: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); + /* add background-color: var(--intergalactic-checkbox-button-bg-normal); */ + border: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); /* change to --intergalactic-checkbox-button-border */ border-radius: var(--intergalactic-rounded-medium, 6px); label { @@ -12,10 +13,10 @@ SCheckboxButton { SCheckboxButton:hover, SCheckboxButton[checked] { cursor: pointer; - border-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2)); - background-color: rgba(0, 143, 248, 0.10); + border-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2)); /* change to --intergalactic-checkbox-button-border-selected */ + background-color: rgba(0, 143, 248, 0.10); /* change to --intergalactic-checkbox-button-bg-hover on :hover:not([checked]), --intergalactic-checkbox-button-bg-selected on [checked] */ } SCheckboxButton[checked]:hover { - background-color: rgba(0, 143, 248, 0.20); + background-color: rgba(0, 143, 248, 0.20); /* change to --intergalactic-checkbox-button-bg-selected-hover */ } diff --git a/semcore/notice-bubble/src/style/notice-bubble.shadow.css b/semcore/notice-bubble/src/style/notice-bubble.shadow.css index 5eb240bc4c..351683a228 100644 --- a/semcore/notice-bubble/src/style/notice-bubble.shadow.css +++ b/semcore/notice-bubble/src/style/notice-bubble.shadow.css @@ -12,11 +12,11 @@ SView { gap: var(--intergalactic-spacing-2x, 8px); &[type='info'] { - background: var(--intergalactic-bg-primary-invert, oklch(0.23 0.01 140)); + background: var(--intergalactic-bg-primary-invert, oklch(0.23 0.01 140)); /* change to --intergalactic-notice-bubble-bg */ } &[type='warning'] { - background: var(--intergalactic-bg-primary-critical, oklch(0.64 0.226 24.5)); + background: var(--intergalactic-bg-primary-critical, oklch(0.64 0.226 24.5)); /* change to --intergalactic-notice-bubble-bg-critical */ } } diff --git a/semcore/pills/src/style/pills.shadow.css b/semcore/pills/src/style/pills.shadow.css index e0c73a046b..e923a35382 100644 --- a/semcore/pills/src/style/pills.shadow.css +++ b/semcore/pills/src/style/pills.shadow.css @@ -3,11 +3,11 @@ SPills { align-items: center; justify-content: center; isolation: isolate; - border-radius: var(--intergalactic-control-rounded, 6px); + border-radius: var(--intergalactic-control-rounded, 6px); /* change to --intergalactic-pills-rounded */ SPill[selected] { - background: var(--intergalactic-control-secondary-info, oklch(0.527 0.264 262.9 / 0.039)); - border-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2)); + background: var(--intergalactic-control-secondary-info, oklch(0.527 0.264 262.9 / 0.039)); /* change to --intergalactic-pills-bg-selected */ + border-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2)); /* change to --intergalactic-pills-border-selected */ z-index: 3; } SPill:focus-visible, SPill[selected] { @@ -39,9 +39,9 @@ SPill { vertical-align: middle; font-family: inherit; cursor: pointer; - background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); - border: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); - border-radius: var(--intergalactic-control-rounded, 6px); + background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* change to --intergalactic-pills-bg-normal */ + border: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); /* change to --intergalactic-pills-border */ + border-radius: var(--intergalactic-control-rounded, 6px); /* change to --intergalactic-pills-rounded */ &::-moz-focus-inner { border: none; @@ -54,7 +54,7 @@ SPill { } &:hover { - background: var(--intergalactic-bg-primary-neutral-hover, oklch(0.98 0.001 180)); + background: var(--intergalactic-bg-primary-neutral-hover, oklch(0.98 0.001 180)); /* change to --intergalactic-pills-bg-hover */ } } diff --git a/semcore/radio/src/style/radio.shadow.css b/semcore/radio/src/style/radio.shadow.css index 9147ccb8bf..8bc04685d1 100644 --- a/semcore/radio/src/style/radio.shadow.css +++ b/semcore/radio/src/style/radio.shadow.css @@ -33,7 +33,7 @@ SValue { left: 0; right: 0; bottom: 0; - background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); + background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* change to --intergalactic-radio-bg-normal */ border: 1px solid; border-radius: 50%; transition: calc(var(--intergalactic-duration-control, 200) * 1ms) all ease-in-out; @@ -51,7 +51,7 @@ SValue { width: 0; height: 0; border-radius: 50%; - background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); + background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* change to --intergalactic-radio-bg-normal */ } } @@ -83,11 +83,11 @@ SValue[size='l'] { } SValue[state='normal']::before { - border-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); + border-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); /* change to --intergalactic-radio-border */ } SValue[state='invalid']::before { - border-color: var(--intergalactic-border-critical-active, oklch(0.7 0.21 23)); + border-color: var(--intergalactic-border-critical-active, oklch(0.7 0.21 23)); /* change to ...? not sure if we need to add special vars for invalid radio */ } SControl { @@ -106,18 +106,18 @@ SControl:checked~SValue[size='l']::after { } SControl:focus-visible+SValue[state='normal']::before { - border-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2)); + border-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2)); /* change to ...? do we need this? radio get focus outline from Box and these color is rewritten */ @mixin focus-outline-mixin; } SControl:checked~SValue::before, SControl:checked:focus-visible~SValue::before { - border-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); - background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); + border-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* change to --intergalactic-radio-bg-selected */ + background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* change to --intergalactic-radio-bg-selected */ } SControl:focus-visible+SValue[state='invalid']::before { - border-color: var(--intergalactic-border-critical-active, oklch(0.7 0.21 23)); + border-color: var(--intergalactic-border-critical-active, oklch(0.7 0.21 23)); /* change to ...? not sure if we need to add special vars for invalid radio */ @mixin focus-outline-mixin; outline-color: var(--intergalactic-keyboard-focus-invalid-outline, oklch(0.628 0.257 28.9 / 0.652)); } @@ -143,6 +143,6 @@ SInvalidPattern { border-radius: 50%; background-image: var(--intergalactic-border-critical-pattern, repeating-linear-gradient(315deg, oklch(0.7 0.21 23) 0, oklch(0.7 0.21 23) 1px, transparent 0, transparent 50%)); background-size: 6px 6px; - background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); + background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* change to --intergalactic-radio-bg-normal */ } } diff --git a/semcore/select/src/style/select.shadow.css b/semcore/select/src/style/select.shadow.css index acc81137c6..441aedd57e 100644 --- a/semcore/select/src/style/select.shadow.css +++ b/semcore/select/src/style/select.shadow.css @@ -48,13 +48,13 @@ SOptionCheckbox[size='l'][selected]::after { } SOptionCheckbox[selected]:before { - background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); - border-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); + background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* change to --intergalactic-checkbox-bg-selected */ + border-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* change to --intergalactic-checkbox-bg-selected */ } SOptionCheckbox[indeterminate]:before { - background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); - border-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); + background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* change to --intergalactic-checkbox-bg-selected */ + border-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* change to --intergalactic-checkbox-bg-selected */ } SOptionCheckbox[theme]:before { @@ -76,7 +76,7 @@ SOptionCheckbox[selected] { } SOptionCheckbox[indeterminate]:after { - background-color: #ffffff; + background-color: #ffffff; /* change to --gray-white */ background-image: none; margin: auto; /* disable-tokens-validator */ diff --git a/semcore/slider/src/style/slider.shadow.css b/semcore/slider/src/style/slider.shadow.css index b63325e5a7..d70af0c1b2 100644 --- a/semcore/slider/src/style/slider.shadow.css +++ b/semcore/slider/src/style/slider.shadow.css @@ -15,11 +15,11 @@ SSlider { height: 4px; width: 100%; border-radius: var(--intergalactic-progress-bar-rounded, 6px); - background-color: var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07)); + background-color: var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07)); /* change to --intergalactic-slider-bar */ } &:hover:before { - background-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); + background-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); /* change to --intergalactic-slider-bar-hover */ } &:active SKnob, @@ -50,7 +50,7 @@ SBar { border-radius: var(--intergalactic-progress-bar-rounded, 6px); box-sizing: border-box; background-size: 12px; - background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); + background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* change to --intergalactic-slider-bar-value */ cursor: pointer; transition: calc(var(--intergalactic-duration-control, 200) * 1ms) width ease-in-out; } @@ -62,14 +62,14 @@ SKnob { width: 20px; border-radius: 50%; box-sizing: border-box; - background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); - border: 5px solid var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); + background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* change to --intergalactic-slider-knob */ + border: 5px solid var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* change to --intergalactic-slider-knob-border */ cursor: pointer; transform: translate(-50%, -50%); transition: calc(var(--intergalactic-duration-control, 200) * 1ms) left ease-in-out; &:hover { - border-color: var(--intergalactic-control-primary-info-hover, oklch(0.32 0.007 140)); + border-color: var(--intergalactic-control-primary-info-hover, oklch(0.32 0.007 140)); /* change to --intergalactic-slider-knob-border-hover */ } } diff --git a/semcore/spin/src/style/spin.shadow.css b/semcore/spin/src/style/spin.shadow.css index 76c28f4640..f7ba23d597 100644 --- a/semcore/spin/src/style/spin.shadow.css +++ b/semcore/spin/src/style/spin.shadow.css @@ -19,11 +19,11 @@ SSpin { } SSpin[theme='dark'] { - fill: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); + fill: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); /* change to --intergalactic-spin-bg */ } SSpin[theme='invert'] { - fill: var(--intergalactic-border-primary-invert, oklch(0.995 0.008 147.4 / 0.391)); + fill: var(--intergalactic-border-primary-invert, oklch(0.995 0.008 147.4 / 0.391)); /* change to --intergalactic-spin-bg-invert */ } SSpin[centered] { diff --git a/semcore/switch/src/style/switch.shadow.css b/semcore/switch/src/style/switch.shadow.css index 87649cdf08..953bdac273 100644 --- a/semcore/switch/src/style/switch.shadow.css +++ b/semcore/switch/src/style/switch.shadow.css @@ -76,7 +76,7 @@ SSwitch[disabled] { } SToggle { - background: var(--intergalactic-control-switch-bg, oklch(0.88 0.002 175.6)); + background: var(--intergalactic-control-switch-bg, oklch(0.74 0.003 165.2)); /* change to --intergalactic-control-switch-bg */ position: relative; color: var(--intergalactic-icon-secondary-neutral, oklch(0.104 0.023 162.3 / 0.385)); cursor: pointer; @@ -86,13 +86,13 @@ SToggle { } SToggle[checked][theme='info'] { - color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); - background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); + color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* change to --intergalactic-control-switch-bg-info-active */ + background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* change to --intergalactic-control-switch-bg-info-active */ } SToggle[checked][theme='success'] { - color: var(--intergalactic-control-primary-success, oklch(0.64 0.161 170)); - background-color: var(--intergalactic-control-primary-success, oklch(0.64 0.161 170)); + color: var(--intergalactic-control-primary-success, oklch(0.64 0.161 170)); /* change to --intergalactic-control-switch-bg-success-active */ + background-color: var(--intergalactic-control-primary-success, oklch(0.64 0.161 170)); /* change to --intergalactic-control-switch-bg-success-active */ } SToggle[checked][theme='custom'] { @@ -119,7 +119,7 @@ SToggle[neighborLocation='right'] { SSlider { /* margin: 0 var(--intergalactic-spacing-05x, 2px); */ - background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); + background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* change to --intergalactic-control-switch-handle */ transform: translateX(-50%) scaleX(1); transition: transform calc(var(--intergalactic-duration-switch, 100) * 1ms) ease-in-out; display: flex; diff --git a/semcore/tab-line/src/style/tab-line.shadow.css b/semcore/tab-line/src/style/tab-line.shadow.css index a32fbe69e6..af4f99c24f 100644 --- a/semcore/tab-line/src/style/tab-line.shadow.css +++ b/semcore/tab-line/src/style/tab-line.shadow.css @@ -6,7 +6,7 @@ STabLine { } STabLine[underlined] { - border-bottom: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); + border-bottom: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); /* change to --intergalactic-tab-line-border */ } STabLineItem { @@ -61,12 +61,12 @@ STabLineItem { } &:hover::before { - background-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); + background-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); /* change to --intergalactic-tab-line-border-hover */ } &[selected]::after { transition-delay: calc(var(--intergalactic-duration-control, 200) * 1ms); - background-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2)); + background-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2)); /* change to --intergalactic-tab-line-border-active */ } & SText:not(:last-child) { @@ -82,7 +82,7 @@ SCaret { position: absolute; bottom: -1px; height: 3px; - background: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2)); + background: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2)); /* change to --intergalactic-tab-line-border-active */ transition: calc(var(--intergalactic-duration-control, 200) * 1ms) all ease-in-out; } diff --git a/semcore/tag/src/style/tag.shadow.css b/semcore/tag/src/style/tag.shadow.css index 396d05d0de..24e12b6aac 100644 --- a/semcore/tag/src/style/tag.shadow.css +++ b/semcore/tag/src/style/tag.shadow.css @@ -45,9 +45,9 @@ STagContainerClose { align-items: center; justify-content: center; vertical-align: middle; - border: 1px solid var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); + border: 1px solid var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* change to --intergalactic-tag-primary-border */ box-sizing: border-box; - background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); + background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* change to --intergalactic-tag-primary-bg-normal */ border-radius: var(--intergalactic-tag-rounded, 24px); padding-left: var(--intergalactic-spacing-1x, 4px); padding-right: var(--intergalactic-spacing-1x, 4px); @@ -170,6 +170,7 @@ STag[theme="secondary"], STagContainerClose[theme="secondary"], STag[theme="additional"], STagContainerClose[theme="additional"] { + /* chenge to ...? secondary: change to --intergalactic-tag-secondary-border; additional: change to --intergalactic-tag-additional-normal */ &::before { opacity: 0.01; } @@ -209,7 +210,7 @@ STag[theme="secondary-invert"], STagContainerClose[theme="secondary-invert"], STag[theme="additional-invert"], STagContainerClose[theme="additional-invert"] { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to--intergalactic-tag-secondary-white-text */ } STag[theme="additional"] { diff --git a/semcore/tooltip/src/style/tooltip.shadow.css b/semcore/tooltip/src/style/tooltip.shadow.css index 83e233902a..809ae1ccdf 100644 --- a/semcore/tooltip/src/style/tooltip.shadow.css +++ b/semcore/tooltip/src/style/tooltip.shadow.css @@ -3,7 +3,7 @@ STooltip { padding: var(--intergalactic-spacing-3x, 12px); border-radius: var(--intergalactic-popper-rounded, 6px); box-sizing: border-box; - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); /* change to --intergalactic-tooltip-text */ font-size: var(--intergalactic-fs-200, 14px); line-height: var(--intergalactic-lh-200, 142%); word-wrap: break-word; @@ -20,7 +20,7 @@ STooltip { } STooltip[theme='invert'] { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-tooltip-text-invert */ background-color: var(--intergalactic-tooltip-invert, oklch(0.23 0.01 140)); border: 1px solid var(--intergalactic-border-tooltip-invert, oklch(0.995 0.008 145.9 / 0.369)); } diff --git a/semcore/wizard/src/style/wizard.shadow.css b/semcore/wizard/src/style/wizard.shadow.css index af4766df84..4b1c9d17cb 100644 --- a/semcore/wizard/src/style/wizard.shadow.css +++ b/semcore/wizard/src/style/wizard.shadow.css @@ -7,8 +7,8 @@ SWizard { } SSidebar { - background: var(--intergalactic-control-primary-advertising, oklch(0.64 0.223 299.3)); - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); + background: var(--intergalactic-control-primary-advertising, oklch(0.64 0.223 299.3)); /* change to --intergalactic-wizard-sidebar-bg */ + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-wizard-sidebar-text-primary */ font-weight: var(--intergalactic-bold, 700); font-size: var(--intergalactic-fs-300, 16px); line-height: var(--intergalactic-lh-300, 150%); @@ -38,11 +38,11 @@ SSidebar { } &:hover { - background: var(--intergalactic-control-primary-advertising-hover, oklch(0.6 0.244 297.8)); + background: var(--intergalactic-control-primary-advertising-hover, oklch(0.6 0.244 297.8)); /* change to --intergalactic-wizard-sidebar-control-hover */ z-index: 2; } &[active] { - background: var(--intergalactic-control-primary-advertising-active, oklch(0.58 0.254 297.1)); + background: var(--intergalactic-control-primary-advertising-active, oklch(0.58 0.254 297.1)); /* change to --intergalactic-wizard-sidebar-control-active */ } &:disabled, &[disabled] { @@ -63,7 +63,7 @@ SSidebar { overflow: auto; } &[active]:hover SStepDescription { - background: var(--intergalactic-control-primary-advertising-active, oklch(0.58 0.254 297.1)); + background: var(--intergalactic-control-primary-advertising-active, oklch(0.58 0.254 297.1)); /* change to --intergalactic-wizard-sidebar-control-active */ } } } @@ -101,7 +101,7 @@ SContent { flex: 1; border-radius: 0 var(--intergalactic-modal-rounded, 14px) var(--intergalactic-modal-rounded, 14px) 0; - background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); + background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* change to --intergalactic-wizard-bg */ SWizardStepTitle { display: block; diff --git a/tools/theme/src/theme.ts b/tools/theme/src/theme.ts index a2f1016ac3..a5c64cd33d 100644 --- a/tools/theme/src/theme.ts +++ b/tools/theme/src/theme.ts @@ -571,10 +571,6 @@ export const theme: Theme = { value: highlight.at(L_BORDER_ACTIVE), description: 'Border color of the second period for the comparison mode in the DatePicker.', }, - control_switch_bg: { - value: neutral.at(L_BG_MEDIUM), - description: 'Subtle background of the Switch control.', - }, control_primary_info_DEFAULT: { value: neutral.at(L_BG_BUTTON_STRONG), description: 'Background of the regular primary control.', @@ -1497,27 +1493,19 @@ export const theme: Theme = { value: highlight.at(L_ICON_SECONDARY_HOVER), description: 'Icon color for the SliderRating component in its hovered and active states.', }, - checkbox_rounded: { - value: '{semanticTokens.radii.control}', - description: 'Use for rounding Checkbox.', - }, - pills_rounded: { - value: '{semanticTokens.radii.control}', - description: 'Use for rounding Pills.', - }, - switch_bg: { + control_switch_bg_DEFAULT: { value: '{baseTokens.colors.gray.300}', description: 'Subtle background of the Switch control.', }, - switch_bg_info_active: { + control_switch_bg_info_active: { value: '{semanticTokens.colors.control_primary_info_DEFAULT}', description: 'Active background of the Switch control.', }, - switch_bg_success_active: { + control_switch_bg_success_active: { value: '{semanticTokens.colors.control_primary_success_DEFAULT}', description: 'Active background of the Switch control.', }, - switch_handle: { + control_switch_handle: { value: '{baseTokens.colors.gray.white}', description: 'Handle color of the Switch control.', }, @@ -1537,7 +1525,7 @@ export const theme: Theme = { value: '{semanticTokens.colors.text_primary_invert}', description: 'Text color of the inverted Tooltip.', }, - tab_line_border: { + tab_line_border_DEFAULT: { value: '{semanticTokens.colors.border_primary_DEFAULT}', description: 'Border color of the TabLine in its normal state.', }, @@ -1549,19 +1537,23 @@ export const theme: Theme = { value: '{semanticTokens.colors.border_info_active}', description: 'Border color of the TabLine in its active state.', }, - slider_bar: { + slider_bar_DEFAULT: { value: '{semanticTokens.colors.progress_bar_bg_DEFAULT}', - description: 'Track background of the Slider.', + description: 'Background of the Slider bar.', + }, + slider_bar_value: { + value: '{semanticTokens.colors.control_primary_info_DEFAULT}', + description: 'Filled part of the Slider bar.', }, slider_bar_hover: { value: '{semanticTokens.colors.progress_bar_bg_hover}', - description: 'Hover state of the Slider track background.', + description: 'Hover state of the Slider bar.', }, - slider_knob: { + slider_knob_DEFAULT: { value: '{baseTokens.colors.gray.white}', description: 'Knob fill color of the Slider.', }, - slider_knob_border: { + slider_knob_border_DEFAULT: { value: '{semanticTokens.colors.control_primary_info_DEFAULT}', description: 'Knob border color of the Slider in its normal state.', }, @@ -1569,11 +1561,11 @@ export const theme: Theme = { value: '{semanticTokens.colors.control_primary_info_hover}', description: 'Knob border color of the Slider in its hover state.', }, - pills_bg: { + pills_bg_normal: { value: '{semanticTokens.colors.bg_primary_neutral_DEFAULT}', description: 'Background of the Pills in its normal state.', }, - pills_border: { + pills_border_DEFAULT: { value: '{semanticTokens.colors.border_primary_DEFAULT}', description: 'Border color of the Pills in its normal state.', }, @@ -1589,7 +1581,7 @@ export const theme: Theme = { value: '{semanticTokens.colors.border_info_active}', description: 'Border color of the selected Pill.', }, - control_text_primary: { + control_text_primary_DEFAULT: { value: '{semanticTokens.colors.text_primary_DEFAULT}', description: 'Primary text color for form controls.', }, @@ -1597,7 +1589,11 @@ export const theme: Theme = { value: '{semanticTokens.colors.text_secondary_DEFAULT}', description: 'Secondary text color for form controls.', }, - control_text_invert: { + control_text_tertiary: { + value: '{semanticTokens.colors.text_secondary_DEFAULT}', + description: 'Tertiary text color for form controls.', + }, + control_text_primary_invert: { value: '{semanticTokens.colors.text_primary_invert}', description: 'Inverted primary text color for form controls.', }, @@ -1613,7 +1609,7 @@ export const theme: Theme = { value: '{semanticTokens.colors.bg_primary_neutral_DEFAULT}', description: 'Background of the Select trigger in its active state.', }, - spin_bg: { + spin_bg_DEFAULT: { value: '{semanticTokens.colors.border_primary_DEFAULT}', description: 'Track color of the Spin loader.', }, @@ -1649,7 +1645,7 @@ export const theme: Theme = { value: '{semanticTokens.colors.control_primary_advertising_DEFAULT}', description: 'Background of the Wizard sidebar.', }, - wizard_sidebar_control: { + wizard_sidebar_control_DEFAULT: { value: '{semanticTokens.colors.control_primary_advertising_DEFAULT}', description: 'Background of the control in the Wizard sidebar in its normal state.', }, @@ -1673,7 +1669,7 @@ export const theme: Theme = { value: '{semanticTokens.colors.control_primary_info_DEFAULT}', description: 'Border color of the selected item in the DropdownMenu.', }, - notice_bubble_bg: { + notice_bubble_bg_DEFAULT: { value: '{semanticTokens.colors.bg_primary_invert_DEFAULT}', description: 'Background of the NoticeBubble.', }, @@ -1693,7 +1689,7 @@ export const theme: Theme = { value: '{semanticTokens.colors.bg_primary_neutral_DEFAULT}', description: 'Border color of the primary Tag.', }, - tag_secondary_border: { + tag_secondary_border_DEFAULT: { value: '{semanticTokens.colors.border_primary_DEFAULT}', description: 'Border color of the secondary Tag.', }, @@ -1717,30 +1713,50 @@ export const theme: Theme = { value: '{semanticTokens.colors.border_primary_DEFAULT}', description: 'Border color of the Checkbox.', }, - checkbox_button_border: { + checkbox_bg_normal: { + value: '{semanticTokens.colors.bg_primary_neutral_DEFAULT}', + description: 'Background color of the Checkbox.', + }, + checkbox_bg_selected: { + value: '{semanticTokens.colors.control_primary_info_DEFAULT}', + description: 'Background color of the checked Checkbox.', + }, + checkbox_button_border_DEFAULT: { value: '{semanticTokens.colors.border_primary_DEFAULT}', description: 'Border color of the Checkbox button in its normal state.', }, - checkbox_button_border_active: { + checkbox_button_border_selected: { value: '{semanticTokens.colors.border_info_active}', description: 'Border color of the Checkbox button in its active state.', }, - checkbox_button_normal: { + checkbox_button_bg_normal: { value: '{semanticTokens.colors.bg_primary_neutral_DEFAULT}', - description: 'Background of the Checkbox button in its normal state.', + description: 'Normal state of the Checkbox button background.', }, - checkbox_button_hover: { + checkbox_button_bg_hover: { value: '{semanticTokens.colors.control_secondary_info_DEFAULT}', description: 'Hover state of the Checkbox button background.', }, - checkbox_button_active: { + checkbox_button_bg_selected_DEFAULT: { value: '{semanticTokens.colors.control_secondary_info_active}', - description: 'Active state of the Checkbox button background.', + description: 'Selected state of the Checkbox button background.', + }, + checkbox_button_bg_selected_hover: { + value: '{semanticTokens.colors.control_secondary_info_active}', + description: 'Hover for a selected state of the Checkbox button background.', }, radio_border: { value: '{semanticTokens.colors.border_primary_DEFAULT}', description: 'Border color of the Radio.', }, + radio_bg_normal: { + value: '{semanticTokens.colors.bg_primary_neutral_DEFAULT}', + description: 'Background color of the Radio.', + }, + radio_bg_selected: { + value: '{semanticTokens.colors.control_primary_info}', + description: 'Selected state of the Radio background.', + }, opacity_fader_primary: { value: '0.32', description: 'Primary opacity for content fader overlays.', @@ -1757,31 +1773,35 @@ export const theme: Theme = { value: '0.851', description: 'Secondary opacity for limitation fader overlays.', }, - badge_admin_bg: { + badge_bg_admin: { value: '{baseTokens.colors.blue.400}', description: 'Background color of the admin Badge.', }, - badge_alpha_bg: { + badge_bg_alpha: { value: '{baseTokens.colors.red.400}', description: 'Background color of the alpha Badge.', }, - badge_beta_bg: { + badge_bg_beta: { value: '{baseTokens.colors.orange.400}', description: 'Background color of the beta Badge.', }, - badge_new_bg: { + badge_bg_new: { value: '{baseTokens.colors.green.400}', description: 'Background color of the new Badge.', }, - badge_soon_bg: { + badge_bg_soon: { value: '{baseTokens.colors.gray.400}', description: 'Background color of the soon Badge.', }, - badge_unavailable_bg: { + badge_bg_unavailable: { value: '{baseTokens.colors.gray.100}', description: 'Background color of the unavailable Badge.', }, - badge_text_primary: { + badge_bg_invert: { + value: '{baseTokens.colors.gray.white}', + description: 'Background color of the inverted Badge.', + }, + badge_text_primary_DEFAULT: { value: '{semanticTokens.colors.text_primary_DEFAULT}', description: 'Primary text color for Badge.', }, @@ -1793,17 +1813,17 @@ export const theme: Theme = { value: '{semanticTokens.colors.text_primary_invert}', description: 'Inverted primary text color for Badge.', }, - feature_popover_text: { + feature_popover_text_DEFAULT: { value: '{semanticTokens.colors.text_primary_DEFAULT}', description: 'Text color of the FeaturePopover.', }, - feature_popover_dot: { + feature_popover_dot_DEFAULT: { value: '{semanticTokens.colors.bg_primary_highlight}', description: 'Color of the outer border of the FeaturePopover.Spot.', }, - feature_popover_text_neutral: { + feature_popover_text_invert: { value: '{semanticTokens.colors.text_primary_invert}', - description: 'Neutral text color of the FeaturePopover.', + description: 'Inverted text color of the FeaturePopover.', }, }, opacity: { @@ -1883,6 +1903,10 @@ export const theme: Theme = { value: `${RADII['extra-small']}px`, description: 'Use for rounding big and small charts like bar, histogram and others.', }, + 'checkbox': { + value: `${RADII.medium}px`, + description: 'Use for rounding Checkbox.', + }, 'counter': { value: `${RADII.large}px`, description: 'Rounding for counter/numeric capsules used as small indicators.', @@ -1915,6 +1939,10 @@ export const theme: Theme = { value: `${RADII.large + 2}px`, description: 'Use for rounding all kinds of big modal dialogs (e.g., Modal, Wizard).', }, + 'pills': { + value: `${RADII.medium}px`, + description: 'Use for rounding Pills.', + }, }, durations: { switch: { @@ -2075,10 +2103,8 @@ type FlattenPaths = T extends object }[keyof T] : ''; -export type RebrandingColorTokens = Record<'checkbox_rounded' | 'pills_rounded' | 'switch_bg' | 'switch_bg_info_active' | 'switch_bg_success_active' | 'switch_handle' | 'dot_notification_bg' | 'dot_notification_text' | 'tooltip_text' | 'tooltip_text_invert' | 'tab_line_border' | 'tab_line_border_hover' | 'tab_line_border_active' | 'slider_bar' | 'slider_bar_hover' | 'slider_knob' | 'slider_knob_border' | 'slider_knob_border_hover' | 'pills_bg' | 'pills_border' | 'pills_bg_hover' | 'pills_bg_selected' | 'pills_border_selected' | 'control_text_primary' | 'control_text_secondary' | 'control_text_invert' | 'control_select_trigger_normal' | 'control_select_trigger_hover' | 'control_select_trigger_active' | 'spin_bg' | 'spin_bg_invert' | 'illustration_gray' | 'illustration_border' | 'chart_data_success' | 'chart_data_warning' | 'chart_data_critical' | 'wizard_bg' | 'wizard_sidebar_bg' | 'wizard_sidebar_control' | 'wizard_sidebar_control_hover' | 'wizard_sidebar_control_active' | 'wizard_sidebar_text_primary' | 'wizard_sidebar_text_secondary' | 'dropdown_menu_item_selected_border' | 'notice_bubble_bg' | 'notice_bubble_bg_critical' | 'tag_primary_bg_normal' | 'tag_primary_bg_hover' | 'tag_primary_border' | 'tag_secondary_border' | 'tag_secondary_border_invert' | 'tag_additional_normal' | 'tag_additional_hover_active' | 'tag_additional_border' | 'checkbox_border' | 'checkbox_button_border' | 'checkbox_button_border_active' | 'checkbox_button_normal' | 'checkbox_button_hover' | 'checkbox_button_active' | 'radio_border' | 'opacity_fader_primary' | 'opacity_fader_secondary' | 'opacity_limit_fader_primary' | 'opacity_limit_fader_secondary' | 'badge_admin_bg' | 'badge_alpha_bg' | 'badge_beta_bg' | 'badge_new_bg' | 'badge_soon_bg' | 'badge_unavailable_bg' | 'badge_text_primary' | 'badge_text_secondary' | 'badge_text_primary_invert' | 'feature_popover_text' | 'feature_popover_dot' | 'feature_popover_text_neutral', Value>; - export type SemanticTokens = { - colors: Record, Value> & RebrandingColorTokens; + colors: Record, Value>; opacity: { disabled: Value; }; @@ -2088,6 +2114,7 @@ export type SemanticTokens = { 'addon': Value; 'badge': Value; 'chart': Value; + 'checkbox': Value; 'counter': Value; 'tag': Value; 'switch': Value; @@ -2096,6 +2123,7 @@ export type SemanticTokens = { 'surface': Value; 'popper': Value; 'modal': Value; + 'pills': Value; }; durations: { switch: Value; @@ -2288,7 +2316,16 @@ type SemanticColors = { }; control: { switch: { - bg: Value; + bg: { + DEFAULT: Value; + info: { + active: Value; + }; + success: { + active: Value; + }; + }; + handle: Value; }; primary: { info: { @@ -2356,6 +2393,21 @@ type SemanticColors = { active: Value; }; }; + text: { + primary: { + DEFAULT: Value; + invert: Value; + }; + secondary: Value; + tertiary: Value; + }; + select: { + trigger: { + normal: Value; + hover: Value; + active: Value; + }; + }; }; icon: { primary: { @@ -2441,6 +2493,8 @@ type SemanticColors = { blue: Value; violet: Value; pink: Value; + gray: Value; + border: Value; }; date: { picker: { @@ -2476,6 +2530,7 @@ type SemanticColors = { selected: { DEFAULT: Value; hover: Value; + border: Value; }; }; }; @@ -2487,6 +2542,7 @@ type SemanticColors = { neutral: Value; }; dot: { + DEFAULT: Value; outer: { border: Value; }; @@ -2497,6 +2553,10 @@ type SemanticColors = { }; }; }; + text: { + DEFAULT: Value; + invert: Value; + }; }; }; progress: { @@ -2612,6 +2672,8 @@ type SemanticColors = { default: Value; warning: Value; invert: Value; + text: Value; + text_invert: Value; }; neighbor: { location: { @@ -2642,6 +2704,11 @@ type SemanticColors = { }; tag: { primary: { + bg: { + normal: Value; + hover: Value; + }; + border: Value; gray: { normal: Value; hover: { @@ -2700,6 +2767,10 @@ type SemanticColors = { }; }; secondary: { + border: { + DEFAULT: Value; + invert: Value; + }; normal: Value; hover: { active: Value; @@ -2715,8 +2786,20 @@ type SemanticColors = { text: Value; }; }; + additional: { + normal: Value; + hover: { + active: Value; + }; + border: Value; + }; }; chart: { + data: { + success: Value; + warning: Value; + critical: Value; + }; palette: { order: { 1: Value; @@ -2827,6 +2910,113 @@ type SemanticColors = { }; }; }; + badge: { + bg: { + admin: Value; + alpha: Value; + beta: Value; + new: Value; + soon: Value; + unavailable: Value; + invert: Value; + }; + text: { + primary: { + DEFAULT: Value; + invert: Value; + }; + secondary: Value; + }; + }; + checkbox: { + border: Value; + bg: { + normal: Value; + selected: Value; + }; + button: { + border: { + DEFAULT: Value; + selected: Value; + }; + bg: { + normal: Value; + hover: Value; + selected: { + DEFAULT: Value; + hover: Value; + }; + }; + }; + }; + dot: { + notification: { + bg: Value; + text: Value; + }; + }; + notice_bubble: { + bg: { + DEFAULT: Value; + critical: Value; + }; + }; + opacity: { + fader: { + primary: Value; + secondary: Value; + }; + limit_fader: { + primary: Value; + secondary: Value; + }; + }; + pills: { + bg: { + normal: Value; + hover: Value; + selected: Value; + }; + border: { + DEFAULT: Value; + selected: Value; + }; + }; + radio: { + border: Value; + bg: { + normal: Value; + selected: Value; + }; + }; + spin: { + bg: { + DEFAULT: Value; + invert: Value; + }; + }; + tab_line: { + border: { + DEFAULT: Value; + hover: Value; + active: Value; + }; + }; + wizard: { + bg: Value; + sidebar: { + bg: Value; + control: { + DEFAULT: Value; + hover: Value; + active: Value; + }; + text: { + primary: Value; + secondary: Value; + }; + }; + }; slider: { rating: { normal: Value; @@ -2834,6 +3024,18 @@ type SemanticColors = { active: Value; }; }; + bar: { + DEFAULT: Value; + value: Value; + hover: Value; + }; + knob: { + DEFAULT: Value; + border: { + DEFAULT: Value; + hover: Value; + }; + }; }; }; diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json index e21738bf10..1f9b04b3ed 100644 --- a/website/docs/style/design-tokens/design-tokens.json +++ b/website/docs/style/design-tokens/design-tokens.json @@ -717,14 +717,6 @@ "description": "Border color of the second period for the comparison mode in the DatePicker.", "components": [] }, - { - "name": "--intergalactic-control-switch-bg", - "value": "oklch(0.88 0.002 175.6)", - "description": "Subtle background of the Switch control.", - "components": [ - "switch" - ] - }, { "name": "--intergalactic-control-primary-info", "value": "oklch(0.23 0.01 140)", @@ -2438,37 +2430,27 @@ ] }, { - "name": "--intergalactic-checkbox-rounded", - "value": "6px", - "description": "Use for rounding Checkbox.", - "components": [] - }, - { - "name": "--intergalactic-pills-rounded", - "value": "6px", - "description": "Use for rounding Pills.", - "components": [] - }, - { - "name": "--intergalactic-switch-bg", + "name": "--intergalactic-control-switch-bg", "value": "oklch(0.74 0.003 165.2)", "description": "Subtle background of the Switch control.", - "components": [] + "components": [ + "switch" + ] }, { - "name": "--intergalactic-switch-bg-info-active", + "name": "--intergalactic-control-switch-bg-info-active", "value": "oklch(0.23 0.01 140)", "description": "Active background of the Switch control.", "components": [] }, { - "name": "--intergalactic-switch-bg-success-active", + "name": "--intergalactic-control-switch-bg-success-active", "value": "oklch(0.64 0.161 170)", "description": "Active background of the Switch control.", "components": [] }, { - "name": "--intergalactic-switch-handle", + "name": "--intergalactic-control-switch-handle", "value": "#ffffff", "description": "Handle color of the Switch control.", "components": [] @@ -2518,13 +2500,19 @@ { "name": "--intergalactic-slider-bar", "value": "oklch(0.96 0.001 180)", - "description": "Track background of the Slider.", + "description": "Background of the Slider bar.", + "components": [] + }, + { + "name": "--intergalactic-slider-bar-value", + "value": "oklch(0.23 0.01 140)", + "description": "Filled part of the Slider bar.", "components": [] }, { "name": "--intergalactic-slider-bar-hover", "value": "oklch(0.88 0.002 175.6)", - "description": "Hover state of the Slider track background.", + "description": "Hover state of the Slider bar.", "components": [] }, { @@ -2546,7 +2534,7 @@ "components": [] }, { - "name": "--intergalactic-pills-bg", + "name": "--intergalactic-pills-bg-normal", "value": "oklch(1 0 0)", "description": "Background of the Pills in its normal state.", "components": [] @@ -2588,7 +2576,13 @@ "components": [] }, { - "name": "--intergalactic-control-text-invert", + "name": "--intergalactic-control-text-tertiary", + "value": "oklch(0.088 0.026 147.7 / 0.583)", + "description": "Tertiary text color for form controls.", + "components": [] + }, + { + "name": "--intergalactic-control-text-primary-invert", "value": "oklch(0.999 0.001 180 / 0.949)", "description": "Inverted primary text color for form controls.", "components": [] @@ -2767,6 +2761,18 @@ "description": "Border color of the Checkbox.", "components": [] }, + { + "name": "--intergalactic-checkbox-bg-normal", + "value": "oklch(1 0 0)", + "description": "Background color of the Checkbox.", + "components": [] + }, + { + "name": "--intergalactic-checkbox-bg-selected", + "value": "oklch(0.23 0.01 140)", + "description": "Background color of the checked Checkbox.", + "components": [] + }, { "name": "--intergalactic-checkbox-button-border", "value": "oklch(0.137 0.026 175.7 / 0.161)", @@ -2774,27 +2780,33 @@ "components": [] }, { - "name": "--intergalactic-checkbox-button-border-active", + "name": "--intergalactic-checkbox-button-border-selected", "value": "oklch(0.7 0.131 275.2)", "description": "Border color of the Checkbox button in its active state.", "components": [] }, { - "name": "--intergalactic-checkbox-button-normal", + "name": "--intergalactic-checkbox-button-bg-normal", "value": "oklch(1 0 0)", - "description": "Background of the Checkbox button in its normal state.", + "description": "Normal state of the Checkbox button background.", "components": [] }, { - "name": "--intergalactic-checkbox-button-hover", + "name": "--intergalactic-checkbox-button-bg-hover", "value": "oklch(0.527 0.264 262.9 / 0.039)", "description": "Hover state of the Checkbox button background.", "components": [] }, { - "name": "--intergalactic-checkbox-button-active", + "name": "--intergalactic-checkbox-button-bg-selected", "value": "oklch(0.524 0.266 263.1 / 0.116)", - "description": "Active state of the Checkbox button background.", + "description": "Selected state of the Checkbox button background.", + "components": [] + }, + { + "name": "--intergalactic-checkbox-button-bg-selected-hover", + "value": "oklch(0.524 0.266 263.1 / 0.116)", + "description": "Hover for a selected state of the Checkbox button background.", "components": [] }, { @@ -2803,6 +2815,18 @@ "description": "Border color of the Radio.", "components": [] }, + { + "name": "--intergalactic-radio-bg-normal", + "value": "oklch(1 0 0)", + "description": "Background color of the Radio.", + "components": [] + }, + { + "name": "--intergalactic-radio-bg-selected", + "value": "oklch(0.23 0.01 140)", + "description": "Selected state of the Radio background.", + "components": [] + }, { "name": "--intergalactic-opacity-fader-primary", "value": "0.32", @@ -2828,41 +2852,47 @@ "components": [] }, { - "name": "--intergalactic-badge-admin-bg", + "name": "--intergalactic-badge-bg-admin", "value": "oklch(0.58 0.168 278.2)", "description": "Background color of the admin Badge.", "components": [] }, { - "name": "--intergalactic-badge-alpha-bg", + "name": "--intergalactic-badge-bg-alpha", "value": "oklch(0.64 0.226 24.5)", "description": "Background color of the alpha Badge.", "components": [] }, { - "name": "--intergalactic-badge-beta-bg", + "name": "--intergalactic-badge-bg-beta", "value": "oklch(0.64 0.196 47.3)", "description": "Background color of the beta Badge.", "components": [] }, { - "name": "--intergalactic-badge-new-bg", + "name": "--intergalactic-badge-bg-new", "value": "oklch(0.64 0.161 170)", "description": "Background color of the new Badge.", "components": [] }, { - "name": "--intergalactic-badge-soon-bg", + "name": "--intergalactic-badge-bg-soon", "value": "oklch(0.64 0.003 157.8)", "description": "Background color of the soon Badge.", "components": [] }, { - "name": "--intergalactic-badge-unavailable-bg", + "name": "--intergalactic-badge-bg-unavailable", "value": "oklch(0.9 0.002 177)", "description": "Background color of the unavailable Badge.", "components": [] }, + { + "name": "--intergalactic-badge-bg-invert", + "value": "#ffffff", + "description": "Background color of the inverted Badge.", + "components": [] + }, { "name": "--intergalactic-badge-text-primary", "value": "oklch(0.1 0.03 137 / 0.899)", @@ -2894,9 +2924,9 @@ "components": [] }, { - "name": "--intergalactic-feature-popover-text-neutral", + "name": "--intergalactic-feature-popover-text-invert", "value": "oklch(0.999 0.001 180 / 0.949)", - "description": "Neutral text color of the FeaturePopover.", + "description": "Inverted text color of the FeaturePopover.", "components": [] }, { @@ -3070,6 +3100,12 @@ "mini-chart" ] }, + { + "name": "--intergalactic-checkbox-rounded", + "value": "6px", + "description": "Use for rounding Checkbox.", + "components": [] + }, { "name": "--intergalactic-counter-rounded", "value": "12px", @@ -3161,6 +3197,12 @@ "wizard" ] }, + { + "name": "--intergalactic-pills-rounded", + "value": "6px", + "description": "Use for rounding Pills.", + "components": [] + }, { "name": "--intergalactic-duration-switch", "value": "100", From 940a74eb996ef911d66ce5fcef7a4b372179a028 Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Thu, 2 Jul 2026 17:56:23 +0200 Subject: [PATCH 03/12] [theme] update groups for some variables --- semcore/badge/src/style/badge.shadow.css | 4 +- .../src/components/hint/style/hint.shadow.css | 4 +- .../src/style/base-trigger.shadow.css | 6 +- .../src/component/Button/button.shadow.css | 68 +- .../checkbox/src/style/checkbox.shadow.css | 28 +- .../src/components/Body/style.shadow.css | 2 +- .../src/components/Head/style.shadow.css | 2 +- semcore/dot/src/style/dot.shadow.css | 4 +- .../dropdown/src/style/dropdown.shadow.css | 2 +- .../src/components/button/button.shadow.css | 6 +- .../components/checkbox/checkbox.shadow.css | 16 +- .../src/components/pills/pills.shadow.css | 14 +- .../src/components/radio/radio.shadow.css | 4 +- .../src/components/switch/switch.shadow.css | 2 +- .../components/tab-line/tabLine.shadow.css | 4 +- .../src/style/feature-popover.shadow.css | 14 +- .../src/style/checkbox-button.shadow.css | 10 +- .../src/style/slider-rating.shadow.css | 4 +- .../src/style/notice-bubble.shadow.css | 4 +- semcore/pills/src/style/pills.shadow.css | 14 +- semcore/radio/src/style/radio.shadow.css | 18 +- semcore/select/src/style/select.shadow.css | 10 +- semcore/slider/src/style/slider.shadow.css | 12 +- semcore/spin/src/style/spin.shadow.css | 4 +- semcore/switch/src/style/switch.shadow.css | 12 +- .../tab-line/src/style/tab-line.shadow.css | 8 +- semcore/tag/src/style/tag.shadow.css | 6 +- semcore/tooltip/src/style/tooltip.shadow.css | 20 +- semcore/wizard/src/style/wizard.shadow.css | 12 +- .../tooltip/docs/examples/custom_bg_color.tsx | 4 +- tools/theme/src/theme.ts | 2466 ++++++----- website/docs/.vitepress/theme/Tooltip.vue | 8 +- .../style/design-tokens/design-tokens.json | 3632 ++++++++--------- 33 files changed, 3190 insertions(+), 3234 deletions(-) diff --git a/semcore/badge/src/style/badge.shadow.css b/semcore/badge/src/style/badge.shadow.css index 67decfc5f3..10e3a520ef 100644 --- a/semcore/badge/src/style/badge.shadow.css +++ b/semcore/badge/src/style/badge.shadow.css @@ -11,7 +11,7 @@ SBadge { letter-spacing: 0.3px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-badge-text-primary-invert */ + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-badge-text-primary-invert */ } SBadge[bg] { @@ -20,7 +20,7 @@ SBadge[bg] { SBadge[inverted] { color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); -} /* change to --intergalactic-badge-text-primary */ +} /* TODO: --intergalactic-badge-text-primary */ SBadge[color] { color: var(--color); diff --git a/semcore/base-components/src/components/hint/style/hint.shadow.css b/semcore/base-components/src/components/hint/style/hint.shadow.css index 3e66b92d97..fdf1d69857 100644 --- a/semcore/base-components/src/components/hint/style/hint.shadow.css +++ b/semcore/base-components/src/components/hint/style/hint.shadow.css @@ -8,8 +8,8 @@ SHintPopper { opacity: 0; pointer-events: none; - background: var(--intergalactic-tooltip-invert, oklch(0.23 0.01 140)); - border: 1px solid var(--intergalactic-border-tooltip-invert, oklch(0.995 0.008 145.9 / 0.369)); + background: var(--intergalactic-tooltip-bg-invert, oklch(0.23 0.01 140)); + border: 1px solid var(--intergalactic-tooltip-border-invert, oklch(0.995 0.008 145.9 / 0.369)); color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); padding: var(--intergalactic-spacing-1x, 4px) var(--intergalactic-spacing-2x, 8px); border-radius: var(--intergalactic-rounded-small, 4px); diff --git a/semcore/base-trigger/src/style/base-trigger.shadow.css b/semcore/base-trigger/src/style/base-trigger.shadow.css index 18583bc253..34904de782 100644 --- a/semcore/base-trigger/src/style/base-trigger.shadow.css +++ b/semcore/base-trigger/src/style/base-trigger.shadow.css @@ -19,7 +19,7 @@ SBaseTrigger { font-family: inherit; cursor: pointer; - background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* change to --intergalactic-control-select-trigger-normal */ + background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* TODO: --intergalactic-control-select-trigger-normal */ font-weight: var(--intergalactic-regular, 400); border: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); @@ -40,13 +40,13 @@ SBaseTrigger { } &:hover { - background-color: var(--intergalactic-bg-primary-neutral-hover, oklch(0.98 0.001 180)); /* change to --intergalactic-control-select-trigger-hover */ + background-color: var(--intergalactic-bg-primary-neutral-hover, oklch(0.98 0.001 180)); /* TODO: --intergalactic-control-select-trigger-hover */ } &:active, &[active] { border-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2)); - background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* change to --intergalactic-control-select-trigger-active */ + background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* TODO: --intergalactic-control-select-trigger-active */ } } diff --git a/semcore/button/src/component/Button/button.shadow.css b/semcore/button/src/component/Button/button.shadow.css index a5b37a7bc8..8ad22c0ffa 100644 --- a/semcore/button/src/component/Button/button.shadow.css +++ b/semcore/button/src/component/Button/button.shadow.css @@ -20,7 +20,7 @@ SButton { touch-action: manipulation; -webkit-tap-highlight-color: transparent; font-weight: var(--intergalactic-medium, 500); - color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583)); /* change to --intergalactic-control-text-secondary */ + color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583)); /* TODO: --intergalactic-control-text-secondary */ min-width: fit-content; &::-moz-focus-inner { @@ -61,117 +61,117 @@ SButton[size='l'] { } SButton[theme='primary-info'] { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-control-text-primary-invert */ + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */ background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); &:hover { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-control-text-primary-invert */ + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */ background-color: var(--intergalactic-control-primary-info-hover, oklch(0.32 0.007 140)); } &:active, &[active] { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-control-text-primary-invert */ + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */ background-color: var(--intergalactic-control-primary-info-active, oklch(0 0 140)); } } SButton[theme='primary-success'] { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-control-text-primary-invert */ + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */ background-color: var(--intergalactic-control-primary-success, oklch(0.64 0.161 170)); &:hover { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-control-text-primary-invert */ + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */ background-color: var(--intergalactic-control-primary-success-hover, oklch(0.6 0.155 170)); } &:active, &[active] { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-control-text-primary-invert */ + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */ background-color: var(--intergalactic-control-primary-success-active, oklch(0.58 0.151 170)); } } SButton[theme='primary-brand'] { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-control-text-primary */ - background-color: var(--intergalactic-control-primary-brand, oklch(0.64 0.223 299.3)); /* change to: update the value to a lighter lavander color */ + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary */ + background-color: var(--intergalactic-control-primary-brand, oklch(0.64 0.223 299.3)); /* TODO:: update the value to a lighter lavander color */ &:hover { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-control-text-primary */ + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary */ background-color: var(--intergalactic-control-primary-brand-hover, oklch(0.6 0.244 297.8)); } &:active, &[active] { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-control-text-primary */ + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary */ background-color: var(--intergalactic-control-primary-brand-active, oklch(0.58 0.254 297.1)); } } SButton[theme='primary-warning'] { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-control-text-primary-invert */ + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */ background-color: var(--intergalactic-control-primary-brand, oklch(0.64 0.223 299.3)); &:hover { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-control-text-primary-invert */ + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */ background-color: var(--intergalactic-control-primary-brand-hover, oklch(0.6 0.244 297.8)); } &:active, &[active] { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-control-text-primary-invert */ + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */ background-color: var(--intergalactic-control-primary-brand-active, oklch(0.58 0.254 297.1)); } } SButton[theme='primary-danger'] { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-control-text-primary-invert */ + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */ background-color: var(--intergalactic-control-primary-critical, oklch(0.64 0.226 24.5)); &:hover { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-control-text-primary-invert */ + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */ background-color: var(--intergalactic-control-primary-critical-hover, oklch(0.6 0.219 25.5)); } &:active, &[active] { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-control-text-primary-invert */ + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */ background-color: var(--intergalactic-control-primary-critical-active, oklch(0.58 0.215 26)); } } SButton[theme='primary-invert'] { - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); /* change to --intergalactic-control-text-primary */ + color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); /* TODO: --intergalactic-control-text-primary */ background-color: var(--intergalactic-control-primary-invert, oklch(1 0 0)); &:hover { - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); /* change to --intergalactic-control-text-primary */ + color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); /* TODO: --intergalactic-control-text-primary */ background-color: var(--intergalactic-control-primary-invert-hover, oklch(0.96 0.001 180)); } &:active, &[active] { - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); /* change to --intergalactic-control-text-primary */ + color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); /* TODO: --intergalactic-control-text-primary */ background-color: var(--intergalactic-control-primary-invert-active, oklch(0.94 0.002 180)); } } SButton[theme='secondary-muted'] { - color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583)); /* change to --intergalactic-control-text-secondary */ + color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583)); /* TODO: --intergalactic-control-text-secondary */ border-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); background-color: var(--intergalactic-control-secondary-neutral, oklch(0.177 0.033 175.6 / 0.028)); &:hover { background-color: var(--intergalactic-control-secondary-neutral-hover, oklch(0.176 0.033 175.6 / 0.056)); - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); /* change to --intergalactic-control-text-primary */ + color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); /* TODO: --intergalactic-control-text-primary */ } &:active, &[active] { background-color: var(--intergalactic-control-secondary-neutral-active, oklch(0.176 0.033 175.7 / 0.084)); - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); /* change to --intergalactic-control-text-primary */ + color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); /* TODO: --intergalactic-control-text-primary */ } } @@ -194,18 +194,18 @@ SButton[theme='secondary-info'] { } SButton[theme='secondary-invert'] { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-control-text-primary-invert */ + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */ border-color: var(--intergalactic-border-primary-invert, oklch(0.995 0.008 147.4 / 0.391)); background-color: var(--intergalactic-control-secondary-invert, oklch(0.969 0.057 140 / 0.118)); &:hover { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-control-text-primary-invert */ + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */ background-color: var(--intergalactic-control-secondary-invert-hover, oklch(0.976 0.043 140 / 0.145)); } &:active, &[active] { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-control-text-primary-invert */ + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */ background-color: var(--intergalactic-control-secondary-invert-active, oklch(0.983 0.03 140 / 0.183)); } @@ -229,34 +229,34 @@ SButton[theme='tertiary-info'] { } SButton[theme='tertiary-muted'] { - color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583)); /* change to --intergalactic-control-text-tertiary */ + color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583)); /* TODO: --intergalactic-control-text-tertiary */ background-color: var(--intergalactic-control-tertiary-neutral, transparent); &:hover { background-color: var(--intergalactic-control-tertiary-neutral-hover, oklch(0.176 0.033 175.6 / 0.056)); - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); /* change to --intergalactic-control-text-primary */ + color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); /* TODO: --intergalactic-control-text-primary */ } &:active, &[active] { background-color: var(--intergalactic-control-tertiary-neutral-active, oklch(0.176 0.033 175.7 / 0.084)); - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); /* change to --intergalactic-control-text-primary */ + color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); /* TODO: --intergalactic-control-text-primary */ } } SButton[theme='tertiary-invert'] { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-control-text-primary-invert */ + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */ background-color: var(--intergalactic-control-tertiary-invert, transparent); &:hover { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-control-text-primary-invert */ + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */ background-color: var(--intergalactic-control-tertiary-invert-hover, oklch(0.976 0.043 140 / 0.145)); } &:active, &[active] { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-control-text-primary-invert */ + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */ background-color: var(--intergalactic-control-tertiary-invert-active, oklch(0.983 0.03 140 / 0.183)); } } @@ -285,11 +285,11 @@ SButton[neighborLocation='left'] { &:after { background-color: var(--intergalactic-border-primary-invert, oklch(0.995 0.008 147.4 / 0.391)); - } /* change to ? */ + } /* TODO: ? */ &[theme='secondary-muted'] { &:after { - background-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); /* change to ? */ + background-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); /* TODO: ? */ } } } diff --git a/semcore/checkbox/src/style/checkbox.shadow.css b/semcore/checkbox/src/style/checkbox.shadow.css index 2afb9e314a..57ac8e2a4e 100644 --- a/semcore/checkbox/src/style/checkbox.shadow.css +++ b/semcore/checkbox/src/style/checkbox.shadow.css @@ -44,9 +44,9 @@ SCheckbox { left: 0; right: 0; bottom: 0; - background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* change to --intergalactic-checkbox-bg */ + background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* TODO: --intergalactic-control-checkbox-bg */ border: 1px solid; - border-radius: var(--intergalactic-addon-rounded, 4px); /* change to --intergalactic-checkbox-rounded */ + border-radius: var(--intergalactic-addon-rounded, 4px); /* TODO: --intergalactic-checkbox-rounded */ transition: calc(var(--intergalactic-duration-control, 200) * 1ms) all ease-in-out; outline-color: transparent; } @@ -64,11 +64,11 @@ SCheckbox { } &[state='normal']:before { - border-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); /* change to --intergalactic-checkbox-border */ + border-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); /* TODO: --intergalactic-control-checkbox-border */ } &[state='normal']:focus-visible:before { - border-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2)); /* change to ...? do we need this? checkbox get focus outline from Box and these color is rewritten */ + border-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2)); /* TODO: ...? do we need this? checkbox get focus outline from Box and these color is rewritten */ } } @@ -106,19 +106,19 @@ SText[size='m'] { SControl[checked]~SCheckbox[state='normal']:before, SControl[checked]~SCheckbox[state='invalid']:before { - background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* change to --intergalactic-checkbox-bg-selected */ - border-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* change to --intergalactic-checkbox-bg-selected */ + background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* TODO: --intergalactic-control-checkbox-bg-selected */ + border-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* TODO: --intergalactic-control-checkbox-bg-selected */ } SControl[indeterminate]~SCheckbox[state='normal']:before { - background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* change to --intergalactic-checkbox-bg-selected */ - border-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* change to --intergalactic-checkbox-bg-selected */ + background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* TODO: --intergalactic-control-checkbox-bg-selected */ + border-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* TODO: --intergalactic-control-checkbox-bg-selected */ } SCheckbox[state='invalid'], SControl[checked]~SCheckbox[state='invalid'] { &:before { - border-color: var(--intergalactic-border-critical-active, oklch(0.7 0.21 23)); /* change to ...? not sure if we need to add special vars for invalid checkbox */ + border-color: var(--intergalactic-border-critical-active, oklch(0.7 0.21 23)); /* TODO: ...? not sure if we need to add special vars for invalid checkbox */ } } @@ -139,13 +139,13 @@ SControl[disabled] ~ SCheckbox[state='invalid'] > SInvalidPattern { SControl[checked]~SCheckbox { &[state='invalid']:before { - background-color: var(--intergalactic-control-primary-critical, oklch(0.64 0.226 24.5)); /* change to ...? not sure if we need to add separate vars for invalid checkbox and radio inputs*/ - border-color: var(--intergalactic-control-primary-critical, oklch(0.64 0.226 24.5)); /* change to ...? not sure if we need to add separate vars for invalid checkbox and radio inputs*/ + background-color: var(--intergalactic-control-primary-critical, oklch(0.64 0.226 24.5)); /* TODO: ...? not sure if we need to add separate vars for invalid checkbox and radio inputs*/ + border-color: var(--intergalactic-control-primary-critical, oklch(0.64 0.226 24.5)); /* TODO: ...? not sure if we need to add separate vars for invalid checkbox and radio inputs*/ } } SControl[indeterminate]~SCheckbox:after { - background-color: #ffffff; /* change to --gray-white? */ + background-color: #ffffff; /* TODO: --gray-white? */ margin: auto; /* disable-tokens-validator */ border-radius: 1px; @@ -162,8 +162,8 @@ SControl[indeterminate]~SCheckbox[size='m']:after { } SControl[indeterminate]~SCheckbox[state='invalid']:before { - background-color: var(--intergalactic-control-primary-critical, oklch(0.64 0.226 24.5)); /* change to ...? not sure if we need to add separate vars for invalid checkbox and radio inputs*/ - border-color: var(--intergalactic-control-primary-critical, oklch(0.64 0.226 24.5)); /* change to ...? not sure if we need to add separate vars for invalid checkbox and radio inputs*/ + background-color: var(--intergalactic-control-primary-critical, oklch(0.64 0.226 24.5)); /* TODO: ...? not sure if we need to add separate vars for invalid checkbox and radio inputs*/ + border-color: var(--intergalactic-control-primary-critical, oklch(0.64 0.226 24.5)); /* TODO: ...? not sure if we need to add separate vars for invalid checkbox and radio inputs*/ } SCheckbox[checked][theme][state='normal']:before { diff --git a/semcore/data-table/src/components/Body/style.shadow.css b/semcore/data-table/src/components/Body/style.shadow.css index 2ab50dd985..4b021eecc5 100644 --- a/semcore/data-table/src/components/Body/style.shadow.css +++ b/semcore/data-table/src/components/Body/style.shadow.css @@ -59,7 +59,7 @@ SCollapseRow[gridArea] > SCellWrapper, SRow[isAccordionRow] > SCellWrapper { SCollapseRow[gridArea] > SCellWrapper > SCell:not([withoutBorder]), SAccordionRows > SRow[isAccordionRow]:last-child > SCellWrapper > SCell:not([withoutBorder]) { - border-bottom: 1px solid var(--intergalactic-border-table-accent, oklch(0.137 0.026 175.7 / 0.161)); + border-bottom: 1px solid var(--intergalactic-table-border-accent, oklch(0.137 0.026 175.7 / 0.161)); } SCollapseRow > SCellWrapper > SCell { diff --git a/semcore/data-table/src/components/Head/style.shadow.css b/semcore/data-table/src/components/Head/style.shadow.css index c5340d3492..9bda6155e3 100644 --- a/semcore/data-table/src/components/Head/style.shadow.css +++ b/semcore/data-table/src/components/Head/style.shadow.css @@ -130,7 +130,7 @@ SColumn[use='primary'] { SColumn[use='secondary'] { padding: var(--intergalactic-spacing-2x, 8px); - border-bottom: 1px solid var(--intergalactic-border-table-accent, oklch(0.137 0.026 175.7 / 0.161)); + border-bottom: 1px solid var(--intergalactic-table-border-accent, oklch(0.137 0.026 175.7 / 0.161)); background-color: var(--intergalactic-table-th-secondary-cell, oklch(1 0 0)); SSortWrapper::before { diff --git a/semcore/dot/src/style/dot.shadow.css b/semcore/dot/src/style/dot.shadow.css index 184a6aa59f..9f5272e91a 100644 --- a/semcore/dot/src/style/dot.shadow.css +++ b/semcore/dot/src/style/dot.shadow.css @@ -4,8 +4,8 @@ SDot { justify-content: center; font-size: var(--intergalactic-fs-50, 10px); line-height: normal; - background-color: var(--intergalactic-icon-primary-warning, oklch(0.728 0.188 51.8)); /* change to --intergalactic-dot-notification-bg */ - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-dot-notification-text */ + background-color: var(--intergalactic-icon-primary-warning, oklch(0.728 0.188 51.8)); /* TODO: --intergalactic-dot-notification-bg */ + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-dot-notification-text */ box-sizing: border-box; z-index: 1; border-radius: 100%; diff --git a/semcore/dropdown/src/style/dropdown.shadow.css b/semcore/dropdown/src/style/dropdown.shadow.css index ccc9e509d4..eef34c1d96 100644 --- a/semcore/dropdown/src/style/dropdown.shadow.css +++ b/semcore/dropdown/src/style/dropdown.shadow.css @@ -57,7 +57,7 @@ SDropdownPopper { SDropdownItem[selected]:not(SDropdownItem[isMenuItemCheckbox]) { background-color: var(--intergalactic-dropdown-menu-item-selected, oklch(0.525 0.265 263 / 0.077)); - box-shadow: 2px 0px 0px 0px var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)) inset; /* change to --intergalactic-dropdown-menu-item-selected-border */ + box-shadow: 2px 0px 0px 0px var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)) inset; /* TODO: --intergalactic-dropdown-menu-item-selected-border */ &:hover { background-color: var(--intergalactic-dropdown-menu-item-selected-hover, oklch(0.52 0.268 263.2 / 0.191)); diff --git a/semcore/feature-highlight/src/components/button/button.shadow.css b/semcore/feature-highlight/src/components/button/button.shadow.css index b90a4f9007..9292b19ff7 100644 --- a/semcore/feature-highlight/src/components/button/button.shadow.css +++ b/semcore/feature-highlight/src/components/button/button.shadow.css @@ -1,5 +1,5 @@ SHighlightedButton[theme='primary-highlighted'] { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-control-text-primary-invert */ + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */ background-image: linear-gradient(90deg, var(--intergalactic-violet-500, oklch(0.53 0.26 296)), var(--intergalactic-blue-500, oklch(0.53 0.157 279.2)), @@ -10,13 +10,13 @@ SHighlightedButton[theme='primary-highlighted'] { transition: background-position-x 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); &:hover { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-control-text-primary-invert */ + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */ background-position-x: 1%; } &:active, &[active] { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-control-text-primary-invert */ + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */ background-image: var(--intergalactic-control-primary-feature-highlight-active, linear-gradient(90deg in oklch, oklch(0.64 0.223 299.3), oklch(0.58 0.168 278.2))); background-size: 100%; } diff --git a/semcore/feature-highlight/src/components/checkbox/checkbox.shadow.css b/semcore/feature-highlight/src/components/checkbox/checkbox.shadow.css index 21e565d45c..f5e0b8b74b 100644 --- a/semcore/feature-highlight/src/components/checkbox/checkbox.shadow.css +++ b/semcore/feature-highlight/src/components/checkbox/checkbox.shadow.css @@ -4,17 +4,17 @@ SHighlightedCheckbox:not([state="invalid"]) { transform: translate(0); border: 1px solid transparent; - border-radius: var(--intergalactic-addon-rounded, 4px); /* change to --intergalactic-checkbox-rounded */ - background: linear-gradient(white, white) padding-box, /* change to --intergalactic-checkbox-bg */ - var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, oklch(0.82 0.118 303), oklch(0.82 0.088 272.1))) border-box; /* change to --intergalactic-checkbox-border */ + border-radius: var(--intergalactic-addon-rounded, 4px); /* TODO: --intergalactic-checkbox-rounded */ + background: linear-gradient(white, white) padding-box, /* TODO: --intergalactic-control-checkbox-bg */ + var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, oklch(0.82 0.118 303), oklch(0.82 0.088 272.1))) border-box; /* TODO: --intergalactic-control-checkbox-border */ background-origin: border-box; background-clip: padding-box, border-box; } input[data-ui-name="CheckboxFH.Value"]:checked + [data-ui-name="Value.CheckMark"] { border-color: transparent; - background: var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.74 0.117 274.1))) padding-box, /* change to --intergalactic-checkbox-bg-selected */ - var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.74 0.117 274.1))) border-box; /* change to --intergalactic-checkbox-bg-selected */ + background: var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.74 0.117 274.1))) padding-box, /* TODO: --intergalactic-control-checkbox-bg-selected */ + var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.74 0.117 274.1))) border-box; /* TODO: --intergalactic-control-checkbox-bg-selected */ } [data-ui-name="Value.CheckMark"]::before { @@ -25,10 +25,10 @@ SHighlightedCheckbox:not([state="invalid"]) { margin: -5px; padding: 1px; border-width: 2px; - border-radius: calc(var(--intergalactic-addon-rounded, 4px) + 3px); /* change to --intergalactic-checkbox-rounded */ + border-radius: calc(var(--intergalactic-addon-rounded, 4px) + 3px); /* TODO: --intergalactic-checkbox-rounded */ border-color: transparent; pointer-events: none; - background: linear-gradient(white, white) padding-box, var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, oklch(0.82 0.118 303), oklch(0.82 0.088 272.1))) border-box; /* change to --intergalactic-checkbox-border */ + background: linear-gradient(white, white) padding-box, var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, oklch(0.82 0.118 303), oklch(0.82 0.088 272.1))) border-box; /* TODO: --intergalactic-control-checkbox-border */ mask: linear-gradient(0deg, #fff, #fff) content-box, linear-gradient(0deg, #fff, #fff); mask-composite: exclude; @@ -52,6 +52,6 @@ SHighlightedCheckbox:not([state="invalid"]) { input[data-ui-name="CheckboxFH.Value"]:checked:focus-visible+[data-ui-name="Value.CheckMark"]::before { border-color: transparent; - background: linear-gradient(white, white) padding-box, var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.74 0.117 274.1))) border-box; /* change to --intergalactic-checkbox-bg-selected */ + background: linear-gradient(white, white) padding-box, var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.74 0.117 274.1))) border-box; /* TODO: --intergalactic-control-checkbox-bg-selected */ } } diff --git a/semcore/feature-highlight/src/components/pills/pills.shadow.css b/semcore/feature-highlight/src/components/pills/pills.shadow.css index 20f263305e..0bd7569bb0 100644 --- a/semcore/feature-highlight/src/components/pills/pills.shadow.css +++ b/semcore/feature-highlight/src/components/pills/pills.shadow.css @@ -1,8 +1,8 @@ SHighlightedPill { border: 1px solid transparent; background: - linear-gradient(white, white) padding-box, /* change to --intergalactic-pills-bg-normal */ - var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, oklch(0.82 0.118 303), oklch(0.82 0.088 272.1))) border-box; /* change to --intergalactic-pills-border */ + linear-gradient(white, white) padding-box, /* TODO: --intergalactic-pills-bg-normal */ + var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, oklch(0.82 0.118 303), oklch(0.82 0.088 272.1))) border-box; /* TODO: --intergalactic-pills-border */ background-origin: border-box; background-clip: padding-box, border-box; z-index: 1; @@ -15,7 +15,7 @@ SHighlightedPill { inset: 0; margin: -5px; padding: 2px; - border-radius: calc(var(--intergalactic-control-rounded, 6px) + 3px); /* change to --intergalactic-pills-rounded */ + border-radius: calc(var(--intergalactic-control-rounded, 6px) + 3px); /* TODO: --intergalactic-pills-rounded */ background-image: var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.58 0.168 278.2))); mask: linear-gradient(0deg, #fff, #fff) content-box, linear-gradient(0deg, #fff, #fff); @@ -46,14 +46,14 @@ SHighlightedPill { } &:hover { - background: var(--intergalactic-bg-primary-feature-highlight-hover-active, linear-gradient(90deg in oklch, oklch(0.97 0.019 303.4), oklch(0.929 0.037 268))) padding-box, /* change to --intergalactic-pills-bg-hover */ - var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, oklch(0.82 0.118 303), oklch(0.82 0.088 272.1))) border-box; /* change to --intergalactic-pills-border */ + background: var(--intergalactic-bg-primary-feature-highlight-hover-active, linear-gradient(90deg in oklch, oklch(0.97 0.019 303.4), oklch(0.929 0.037 268))) padding-box, /* TODO: --intergalactic-pills-bg-hover */ + var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, oklch(0.82 0.118 303), oklch(0.82 0.088 272.1))) border-box; /* TODO: --intergalactic-pills-border */ } &[selected] { background: - var(--intergalactic-bg-primary-feature-highlight-hover-active, linear-gradient(90deg in oklch, oklch(0.97 0.019 303.4), oklch(0.929 0.037 268))) padding-box, /* change to --intergalactic-pills-bg-selected */ - var(--intergalactic-control-primary-feature-highlight-hover, linear-gradient(90deg in oklch, oklch(0.64 0.223 299.3), oklch(0.74 0.117 274.1))) border-box; /* change to --intergalactic-pills-border-selected */ + var(--intergalactic-bg-primary-feature-highlight-hover-active, linear-gradient(90deg in oklch, oklch(0.97 0.019 303.4), oklch(0.929 0.037 268))) padding-box, /* TODO: --intergalactic-pills-bg-selected */ + var(--intergalactic-control-primary-feature-highlight-hover, linear-gradient(90deg in oklch, oklch(0.64 0.223 299.3), oklch(0.74 0.117 274.1))) border-box; /* TODO: --intergalactic-pills-border-selected */ background-origin: border-box; background-clip: padding-box, border-box; border-color: transparent; diff --git a/semcore/feature-highlight/src/components/radio/radio.shadow.css b/semcore/feature-highlight/src/components/radio/radio.shadow.css index 367801126a..ec1eae96b2 100644 --- a/semcore/feature-highlight/src/components/radio/radio.shadow.css +++ b/semcore/feature-highlight/src/components/radio/radio.shadow.css @@ -5,7 +5,7 @@ SHighlightedRadio { SHighlightedRadio:not([state="invalid"]) { [data-ui-name="Value.RadioMark"] { border-radius: 50%; - background: var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, oklch(0.82 0.118 303), oklch(0.82 0.088 272.1))); /* change to --intergalactic-radio-border */ + background: var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, oklch(0.82 0.118 303), oklch(0.82 0.088 272.1))); /* TODO: --intergalactic-radio-border */ } [data-ui-name="Value.RadioMark"]::before { @@ -38,7 +38,7 @@ SHighlightedRadio:not([state="invalid"]) { right: 0; bottom: 0; border-radius: 50%; - background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* change to --intergalactic-radio-bg-normal */ + background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* TODO: --intergalactic-radio-bg-normal */ top: 50%; left: 50%; width: calc(100% - 2px); diff --git a/semcore/feature-highlight/src/components/switch/switch.shadow.css b/semcore/feature-highlight/src/components/switch/switch.shadow.css index e5e566bb17..b96830aed3 100644 --- a/semcore/feature-highlight/src/components/switch/switch.shadow.css +++ b/semcore/feature-highlight/src/components/switch/switch.shadow.css @@ -26,7 +26,7 @@ SToggle { } SToggle[checked] { - color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* change to --intergalactic-control-switch-bg-info-active */ + color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* TODO: --intergalactic-control-switch-bg-info-active */ background-image: var(--intergalactic-control-primary-feature-highlight, linear-gradient(90deg in oklch, oklch(0.64 0.223 299.3), oklch(0.74 0.117 274.1))); } diff --git a/semcore/feature-highlight/src/components/tab-line/tabLine.shadow.css b/semcore/feature-highlight/src/components/tab-line/tabLine.shadow.css index db760a7f60..bc74bbdf5d 100644 --- a/semcore/feature-highlight/src/components/tab-line/tabLine.shadow.css +++ b/semcore/feature-highlight/src/components/tab-line/tabLine.shadow.css @@ -14,7 +14,7 @@ SHighlightedItem { } &[selected]::after, &:hover:not(:focus-visible)::after { opacity: 1; - background: var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.74 0.117 274.1))); /* change to --intergalactic-tab-line-border-hover, --intergalactic-tab-line-border-active */ + background: var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.74 0.117 274.1))); /* TODO: --intergalactic-tab-line-border-hover, --intergalactic-tab-line-border-active */ } &::before { @@ -42,5 +42,5 @@ SHighlightedItem { } SHighlightedCaret { - background: var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.74 0.117 274.1))); /* change to --intergalactic-tab-line-border-active */ + background: var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.74 0.117 274.1))); /* TODO: --intergalactic-tab-line-border-active */ } diff --git a/semcore/feature-popover/src/style/feature-popover.shadow.css b/semcore/feature-popover/src/style/feature-popover.shadow.css index 6055b95cc1..2592b0487a 100644 --- a/semcore/feature-popover/src/style/feature-popover.shadow.css +++ b/semcore/feature-popover/src/style/feature-popover.shadow.css @@ -9,12 +9,12 @@ SFeaturePopover { position: relative; &[theme='accent'] { - background-color: var(--intergalactic-feature-popover-bg, oklch(0.88 0.078 303)); - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); /* change to --intergalactic-feature-popover-text */ + background-color: var(--intergalactic-feature-popover-accent-bg, oklch(0.88 0.078 303)); + color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); /* TODO: --intergalactic-feature-popover-text */ } &[theme='neutral'] { - background-color: var(--intergalactic-feature-popover-bg-neutral, oklch(0.23 0.01 140)); - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-feature-popover-text-invert */ + background-color: var(--intergalactic-feature-popover-neutral-bg, oklch(0.23 0.01 140)); + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-feature-popover-text-invert */ } } @@ -94,15 +94,15 @@ SSpot { &[theme='accent'] { &::before { - background-color: var(--intergalactic-feature-popover-dot-outer-border, oklch(0.88 0.078 303)); /* change to --intergalactic-feature-popover-dot */ + background-color: var(--intergalactic-feature-popover-accent-dot-outer-border, oklch(0.88 0.078 303)); } &::after { - background-color: var(--intergalactic-feature-popover-bg, oklch(0.88 0.078 303)); + background-color: var(--intergalactic-feature-popover-accent-bg, oklch(0.88 0.078 303)); } } &[theme='neutral'] { &::before { - background-color: var(--intergalactic-feature-popover-dot-neutral-outer-border, oklch(0.88 0.078 303)); + background-color: var(--intergalactic-feature-popover-neutral-dot-outer-border, oklch(0.88 0.078 303)); } &::after { background-color: var(--intergalactic-feature-popover-dot-neutral, oklch(0.88 0.078 303)); diff --git a/semcore/feedback-form/src/style/checkbox-button.shadow.css b/semcore/feedback-form/src/style/checkbox-button.shadow.css index 14c10d1259..85e31f1d07 100644 --- a/semcore/feedback-form/src/style/checkbox-button.shadow.css +++ b/semcore/feedback-form/src/style/checkbox-button.shadow.css @@ -1,7 +1,7 @@ SCheckboxButton { margin-top: var(--intergalactic-spacing-2x, 8px); - /* add background-color: var(--intergalactic-checkbox-button-bg-normal); */ - border: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); /* change to --intergalactic-checkbox-button-border */ + /* add background-color: var(--intergalactic-control-checkbox-button-bg-normal); */ + border: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); /* TODO: --intergalactic-control-checkbox-button-border */ border-radius: var(--intergalactic-rounded-medium, 6px); label { @@ -13,10 +13,10 @@ SCheckboxButton { SCheckboxButton:hover, SCheckboxButton[checked] { cursor: pointer; - border-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2)); /* change to --intergalactic-checkbox-button-border-selected */ - background-color: rgba(0, 143, 248, 0.10); /* change to --intergalactic-checkbox-button-bg-hover on :hover:not([checked]), --intergalactic-checkbox-button-bg-selected on [checked] */ + border-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2)); /* TODO: --intergalactic-control-checkbox-button-border-selected */ + background-color: rgba(0, 143, 248, 0.10); /* TODO: --intergalactic-control-checkbox-button-bg-hover on :hover:not([checked]), --intergalactic-control-checkbox-button-bg-selected on [checked] */ } SCheckboxButton[checked]:hover { - background-color: rgba(0, 143, 248, 0.20); /* change to --intergalactic-checkbox-button-bg-selected-hover */ + background-color: rgba(0, 143, 248, 0.20); /* TODO: --intergalactic-control-checkbox-button-bg-selected-hover */ } diff --git a/semcore/feedback-form/src/style/slider-rating.shadow.css b/semcore/feedback-form/src/style/slider-rating.shadow.css index e0a3494905..b349949093 100644 --- a/semcore/feedback-form/src/style/slider-rating.shadow.css +++ b/semcore/feedback-form/src/style/slider-rating.shadow.css @@ -19,10 +19,10 @@ SStar[filled]:active { } SStar path { - fill: var(--intergalactic-slider-rating-normal, oklch(0.7 0.003 162.2)); + fill: var(--intergalactic-control-slider-rating-normal, oklch(0.7 0.003 162.2)); } SStar[filled] path { stroke-width: 0; - fill: var(--intergalactic-slider-rating-hover-active, oklch(0.66 0.212 300.1)); + fill: var(--intergalactic-control-slider-rating-hover-active, oklch(0.66 0.212 300.1)); } diff --git a/semcore/notice-bubble/src/style/notice-bubble.shadow.css b/semcore/notice-bubble/src/style/notice-bubble.shadow.css index 351683a228..9aa298395c 100644 --- a/semcore/notice-bubble/src/style/notice-bubble.shadow.css +++ b/semcore/notice-bubble/src/style/notice-bubble.shadow.css @@ -12,11 +12,11 @@ SView { gap: var(--intergalactic-spacing-2x, 8px); &[type='info'] { - background: var(--intergalactic-bg-primary-invert, oklch(0.23 0.01 140)); /* change to --intergalactic-notice-bubble-bg */ + background: var(--intergalactic-bg-primary-invert, oklch(0.23 0.01 140)); /* TODO: --intergalactic-notice-bubble-bg */ } &[type='warning'] { - background: var(--intergalactic-bg-primary-critical, oklch(0.64 0.226 24.5)); /* change to --intergalactic-notice-bubble-bg-critical */ + background: var(--intergalactic-bg-primary-critical, oklch(0.64 0.226 24.5)); /* TODO: --intergalactic-notice-bubble-bg-critical */ } } diff --git a/semcore/pills/src/style/pills.shadow.css b/semcore/pills/src/style/pills.shadow.css index e923a35382..ff5c6bcf2a 100644 --- a/semcore/pills/src/style/pills.shadow.css +++ b/semcore/pills/src/style/pills.shadow.css @@ -3,11 +3,11 @@ SPills { align-items: center; justify-content: center; isolation: isolate; - border-radius: var(--intergalactic-control-rounded, 6px); /* change to --intergalactic-pills-rounded */ + border-radius: var(--intergalactic-control-rounded, 6px); /* TODO: --intergalactic-pills-rounded */ SPill[selected] { - background: var(--intergalactic-control-secondary-info, oklch(0.527 0.264 262.9 / 0.039)); /* change to --intergalactic-pills-bg-selected */ - border-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2)); /* change to --intergalactic-pills-border-selected */ + background: var(--intergalactic-control-secondary-info, oklch(0.527 0.264 262.9 / 0.039)); /* TODO: --intergalactic-pills-bg-selected */ + border-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2)); /* TODO: --intergalactic-pills-border-selected */ z-index: 3; } SPill:focus-visible, SPill[selected] { @@ -39,9 +39,9 @@ SPill { vertical-align: middle; font-family: inherit; cursor: pointer; - background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* change to --intergalactic-pills-bg-normal */ - border: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); /* change to --intergalactic-pills-border */ - border-radius: var(--intergalactic-control-rounded, 6px); /* change to --intergalactic-pills-rounded */ + background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* TODO: --intergalactic-pills-bg-normal */ + border: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); /* TODO: --intergalactic-pills-border */ + border-radius: var(--intergalactic-control-rounded, 6px); /* TODO: --intergalactic-pills-rounded */ &::-moz-focus-inner { border: none; @@ -54,7 +54,7 @@ SPill { } &:hover { - background: var(--intergalactic-bg-primary-neutral-hover, oklch(0.98 0.001 180)); /* change to --intergalactic-pills-bg-hover */ + background: var(--intergalactic-bg-primary-neutral-hover, oklch(0.98 0.001 180)); /* TODO: --intergalactic-pills-bg-hover */ } } diff --git a/semcore/radio/src/style/radio.shadow.css b/semcore/radio/src/style/radio.shadow.css index 8bc04685d1..169c0583cf 100644 --- a/semcore/radio/src/style/radio.shadow.css +++ b/semcore/radio/src/style/radio.shadow.css @@ -33,7 +33,7 @@ SValue { left: 0; right: 0; bottom: 0; - background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* change to --intergalactic-radio-bg-normal */ + background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* TODO: --intergalactic-radio-bg-normal */ border: 1px solid; border-radius: 50%; transition: calc(var(--intergalactic-duration-control, 200) * 1ms) all ease-in-out; @@ -51,7 +51,7 @@ SValue { width: 0; height: 0; border-radius: 50%; - background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* change to --intergalactic-radio-bg-normal */ + background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* TODO: --intergalactic-radio-bg-normal */ } } @@ -83,11 +83,11 @@ SValue[size='l'] { } SValue[state='normal']::before { - border-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); /* change to --intergalactic-radio-border */ + border-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); /* TODO: --intergalactic-radio-border */ } SValue[state='invalid']::before { - border-color: var(--intergalactic-border-critical-active, oklch(0.7 0.21 23)); /* change to ...? not sure if we need to add special vars for invalid radio */ + border-color: var(--intergalactic-border-critical-active, oklch(0.7 0.21 23)); /* TODO: ...? not sure if we need to add special vars for invalid radio */ } SControl { @@ -106,18 +106,18 @@ SControl:checked~SValue[size='l']::after { } SControl:focus-visible+SValue[state='normal']::before { - border-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2)); /* change to ...? do we need this? radio get focus outline from Box and these color is rewritten */ + border-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2)); /* TODO: ...? do we need this? radio get focus outline from Box and these color is rewritten */ @mixin focus-outline-mixin; } SControl:checked~SValue::before, SControl:checked:focus-visible~SValue::before { - border-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* change to --intergalactic-radio-bg-selected */ - background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* change to --intergalactic-radio-bg-selected */ + border-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* TODO: --intergalactic-radio-bg-selected */ + background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* TODO: --intergalactic-radio-bg-selected */ } SControl:focus-visible+SValue[state='invalid']::before { - border-color: var(--intergalactic-border-critical-active, oklch(0.7 0.21 23)); /* change to ...? not sure if we need to add special vars for invalid radio */ + border-color: var(--intergalactic-border-critical-active, oklch(0.7 0.21 23)); /* TODO: ...? not sure if we need to add special vars for invalid radio */ @mixin focus-outline-mixin; outline-color: var(--intergalactic-keyboard-focus-invalid-outline, oklch(0.628 0.257 28.9 / 0.652)); } @@ -143,6 +143,6 @@ SInvalidPattern { border-radius: 50%; background-image: var(--intergalactic-border-critical-pattern, repeating-linear-gradient(315deg, oklch(0.7 0.21 23) 0, oklch(0.7 0.21 23) 1px, transparent 0, transparent 50%)); background-size: 6px 6px; - background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* change to --intergalactic-radio-bg-normal */ + background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* TODO: --intergalactic-radio-bg-normal */ } } diff --git a/semcore/select/src/style/select.shadow.css b/semcore/select/src/style/select.shadow.css index 441aedd57e..04cae287a4 100644 --- a/semcore/select/src/style/select.shadow.css +++ b/semcore/select/src/style/select.shadow.css @@ -48,13 +48,13 @@ SOptionCheckbox[size='l'][selected]::after { } SOptionCheckbox[selected]:before { - background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* change to --intergalactic-checkbox-bg-selected */ - border-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* change to --intergalactic-checkbox-bg-selected */ + background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* TODO: --intergalactic-control-checkbox-bg-selected */ + border-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* TODO: --intergalactic-control-checkbox-bg-selected */ } SOptionCheckbox[indeterminate]:before { - background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* change to --intergalactic-checkbox-bg-selected */ - border-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* change to --intergalactic-checkbox-bg-selected */ + background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* TODO: --intergalactic-control-checkbox-bg-selected */ + border-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* TODO: --intergalactic-control-checkbox-bg-selected */ } SOptionCheckbox[theme]:before { @@ -76,7 +76,7 @@ SOptionCheckbox[selected] { } SOptionCheckbox[indeterminate]:after { - background-color: #ffffff; /* change to --gray-white */ + background-color: #ffffff; /* TODO: --gray-white */ background-image: none; margin: auto; /* disable-tokens-validator */ diff --git a/semcore/slider/src/style/slider.shadow.css b/semcore/slider/src/style/slider.shadow.css index d70af0c1b2..4dd34ed7de 100644 --- a/semcore/slider/src/style/slider.shadow.css +++ b/semcore/slider/src/style/slider.shadow.css @@ -15,11 +15,11 @@ SSlider { height: 4px; width: 100%; border-radius: var(--intergalactic-progress-bar-rounded, 6px); - background-color: var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07)); /* change to --intergalactic-slider-bar */ + background-color: var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07)); /* TODO: --intergalactic-control-slider-bar */ } &:hover:before { - background-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); /* change to --intergalactic-slider-bar-hover */ + background-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); /* TODO: --intergalactic-control-slider-bar-hover */ } &:active SKnob, @@ -50,7 +50,7 @@ SBar { border-radius: var(--intergalactic-progress-bar-rounded, 6px); box-sizing: border-box; background-size: 12px; - background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* change to --intergalactic-slider-bar-value */ + background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* TODO: --intergalactic-control-slider-bar-value */ cursor: pointer; transition: calc(var(--intergalactic-duration-control, 200) * 1ms) width ease-in-out; } @@ -62,14 +62,14 @@ SKnob { width: 20px; border-radius: 50%; box-sizing: border-box; - background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* change to --intergalactic-slider-knob */ - border: 5px solid var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* change to --intergalactic-slider-knob-border */ + background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* TODO: --intergalactic-control-slider-knob */ + border: 5px solid var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* TODO: --intergalactic-control-slider-knob-border */ cursor: pointer; transform: translate(-50%, -50%); transition: calc(var(--intergalactic-duration-control, 200) * 1ms) left ease-in-out; &:hover { - border-color: var(--intergalactic-control-primary-info-hover, oklch(0.32 0.007 140)); /* change to --intergalactic-slider-knob-border-hover */ + border-color: var(--intergalactic-control-primary-info-hover, oklch(0.32 0.007 140)); /* TODO: --intergalactic-control-slider-knob-border-hover */ } } diff --git a/semcore/spin/src/style/spin.shadow.css b/semcore/spin/src/style/spin.shadow.css index f7ba23d597..a3e049ebfe 100644 --- a/semcore/spin/src/style/spin.shadow.css +++ b/semcore/spin/src/style/spin.shadow.css @@ -19,11 +19,11 @@ SSpin { } SSpin[theme='dark'] { - fill: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); /* change to --intergalactic-spin-bg */ + fill: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); /* TODO: --intergalactic-spin-bg */ } SSpin[theme='invert'] { - fill: var(--intergalactic-border-primary-invert, oklch(0.995 0.008 147.4 / 0.391)); /* change to --intergalactic-spin-bg-invert */ + fill: var(--intergalactic-border-primary-invert, oklch(0.995 0.008 147.4 / 0.391)); /* TODO: --intergalactic-spin-bg-invert */ } SSpin[centered] { diff --git a/semcore/switch/src/style/switch.shadow.css b/semcore/switch/src/style/switch.shadow.css index 953bdac273..b65962db82 100644 --- a/semcore/switch/src/style/switch.shadow.css +++ b/semcore/switch/src/style/switch.shadow.css @@ -76,7 +76,7 @@ SSwitch[disabled] { } SToggle { - background: var(--intergalactic-control-switch-bg, oklch(0.74 0.003 165.2)); /* change to --intergalactic-control-switch-bg */ + background: var(--intergalactic-control-switch-bg, oklch(0.74 0.003 165.2)); /* TODO: --intergalactic-control-switch-bg */ position: relative; color: var(--intergalactic-icon-secondary-neutral, oklch(0.104 0.023 162.3 / 0.385)); cursor: pointer; @@ -86,13 +86,13 @@ SToggle { } SToggle[checked][theme='info'] { - color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* change to --intergalactic-control-switch-bg-info-active */ - background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* change to --intergalactic-control-switch-bg-info-active */ + color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* TODO: --intergalactic-control-switch-bg-info-active */ + background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* TODO: --intergalactic-control-switch-bg-info-active */ } SToggle[checked][theme='success'] { - color: var(--intergalactic-control-primary-success, oklch(0.64 0.161 170)); /* change to --intergalactic-control-switch-bg-success-active */ - background-color: var(--intergalactic-control-primary-success, oklch(0.64 0.161 170)); /* change to --intergalactic-control-switch-bg-success-active */ + color: var(--intergalactic-control-primary-success, oklch(0.64 0.161 170)); /* TODO: --intergalactic-control-switch-bg-success-active */ + background-color: var(--intergalactic-control-primary-success, oklch(0.64 0.161 170)); /* TODO: --intergalactic-control-switch-bg-success-active */ } SToggle[checked][theme='custom'] { @@ -119,7 +119,7 @@ SToggle[neighborLocation='right'] { SSlider { /* margin: 0 var(--intergalactic-spacing-05x, 2px); */ - background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* change to --intergalactic-control-switch-handle */ + background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* TODO: --intergalactic-control-switch-handle */ transform: translateX(-50%) scaleX(1); transition: transform calc(var(--intergalactic-duration-switch, 100) * 1ms) ease-in-out; display: flex; diff --git a/semcore/tab-line/src/style/tab-line.shadow.css b/semcore/tab-line/src/style/tab-line.shadow.css index af4f99c24f..488b697c33 100644 --- a/semcore/tab-line/src/style/tab-line.shadow.css +++ b/semcore/tab-line/src/style/tab-line.shadow.css @@ -6,7 +6,7 @@ STabLine { } STabLine[underlined] { - border-bottom: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); /* change to --intergalactic-tab-line-border */ + border-bottom: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); /* TODO: --intergalactic-tab-line-border */ } STabLineItem { @@ -61,12 +61,12 @@ STabLineItem { } &:hover::before { - background-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); /* change to --intergalactic-tab-line-border-hover */ + background-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); /* TODO: --intergalactic-tab-line-border-hover */ } &[selected]::after { transition-delay: calc(var(--intergalactic-duration-control, 200) * 1ms); - background-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2)); /* change to --intergalactic-tab-line-border-active */ + background-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2)); /* TODO: --intergalactic-tab-line-border-active */ } & SText:not(:last-child) { @@ -82,7 +82,7 @@ SCaret { position: absolute; bottom: -1px; height: 3px; - background: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2)); /* change to --intergalactic-tab-line-border-active */ + background: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2)); /* TODO: --intergalactic-tab-line-border-active */ transition: calc(var(--intergalactic-duration-control, 200) * 1ms) all ease-in-out; } diff --git a/semcore/tag/src/style/tag.shadow.css b/semcore/tag/src/style/tag.shadow.css index 24e12b6aac..5c097db5af 100644 --- a/semcore/tag/src/style/tag.shadow.css +++ b/semcore/tag/src/style/tag.shadow.css @@ -45,9 +45,9 @@ STagContainerClose { align-items: center; justify-content: center; vertical-align: middle; - border: 1px solid var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* change to --intergalactic-tag-primary-border */ + border: 1px solid var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* TODO: --intergalactic-tag-primary-border */ box-sizing: border-box; - background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* change to --intergalactic-tag-primary-bg-normal */ + background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* TODO: --intergalactic-tag-primary-bg-normal */ border-radius: var(--intergalactic-tag-rounded, 24px); padding-left: var(--intergalactic-spacing-1x, 4px); padding-right: var(--intergalactic-spacing-1x, 4px); @@ -210,7 +210,7 @@ STag[theme="secondary-invert"], STagContainerClose[theme="secondary-invert"], STag[theme="additional-invert"], STagContainerClose[theme="additional-invert"] { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to--intergalactic-tag-secondary-white-text */ + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO:--intergalactic-tag-secondary-white-text */ } STag[theme="additional"] { diff --git a/semcore/tooltip/src/style/tooltip.shadow.css b/semcore/tooltip/src/style/tooltip.shadow.css index 809ae1ccdf..d5f5aa2fbf 100644 --- a/semcore/tooltip/src/style/tooltip.shadow.css +++ b/semcore/tooltip/src/style/tooltip.shadow.css @@ -3,7 +3,7 @@ STooltip { padding: var(--intergalactic-spacing-3x, 12px); border-radius: var(--intergalactic-popper-rounded, 6px); box-sizing: border-box; - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); /* change to --intergalactic-tooltip-text */ + color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); /* TODO: --intergalactic-tooltip-text */ font-size: var(--intergalactic-fs-200, 14px); line-height: var(--intergalactic-lh-200, 142%); word-wrap: break-word; @@ -15,18 +15,18 @@ STooltip { /* stylelint-disable-next-line no-duplicate-selectors */ STooltip { - background-color: var(--intergalactic-tooltip-default, oklch(1 0 0)); + background-color: var(--intergalactic-tooltip-bg-default, oklch(1 0 0)); border: 1px solid var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07)); } STooltip[theme='invert'] { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-tooltip-text-invert */ - background-color: var(--intergalactic-tooltip-invert, oklch(0.23 0.01 140)); - border: 1px solid var(--intergalactic-border-tooltip-invert, oklch(0.995 0.008 145.9 / 0.369)); + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-tooltip-text-invert */ + background-color: var(--intergalactic-tooltip-bg-invert, oklch(0.23 0.01 140)); + border: 1px solid var(--intergalactic-tooltip-border-invert, oklch(0.995 0.008 145.9 / 0.369)); } STooltip[theme='warning'] { - background-color: var(--intergalactic-tooltip-warning, oklch(0.958 0.029 5.7)); + background-color: var(--intergalactic-tooltip-bg-warning, oklch(0.958 0.029 5.7)); border: 1px solid var(--intergalactic-border-critical-active, oklch(0.7 0.21 23)); } @@ -47,15 +47,15 @@ SArrow { /* stylelint-disable-next-line no-duplicate-selectors */ &:before { - border-color: var(--intergalactic-tooltip-default, oklch(1 0 0)); + border-color: var(--intergalactic-tooltip-bg-default, oklch(1 0 0)); } } SArrow[theme='invert'] { - border-color: var(--intergalactic-border-tooltip-invert, oklch(0.995 0.008 145.9 / 0.369)); + border-color: var(--intergalactic-tooltip-border-invert, oklch(0.995 0.008 145.9 / 0.369)); &::before { - border-color: var(--intergalactic-tooltip-invert, oklch(0.23 0.01 140)); + border-color: var(--intergalactic-tooltip-bg-invert, oklch(0.23 0.01 140)); } } @@ -63,7 +63,7 @@ SArrow[theme='warning'] { border-color: var(--intergalactic-border-critical-active, oklch(0.7 0.21 23)); &::before { - border-color: var(--intergalactic-tooltip-warning, oklch(0.958 0.029 5.7)); + border-color: var(--intergalactic-tooltip-bg-warning, oklch(0.958 0.029 5.7)); } } diff --git a/semcore/wizard/src/style/wizard.shadow.css b/semcore/wizard/src/style/wizard.shadow.css index 4b1c9d17cb..142d7dae97 100644 --- a/semcore/wizard/src/style/wizard.shadow.css +++ b/semcore/wizard/src/style/wizard.shadow.css @@ -7,8 +7,8 @@ SWizard { } SSidebar { - background: var(--intergalactic-control-primary-advertising, oklch(0.64 0.223 299.3)); /* change to --intergalactic-wizard-sidebar-bg */ - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* change to --intergalactic-wizard-sidebar-text-primary */ + background: var(--intergalactic-control-primary-advertising, oklch(0.64 0.223 299.3)); /* TODO: --intergalactic-wizard-sidebar-bg */ + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-wizard-sidebar-text-primary */ font-weight: var(--intergalactic-bold, 700); font-size: var(--intergalactic-fs-300, 16px); line-height: var(--intergalactic-lh-300, 150%); @@ -38,11 +38,11 @@ SSidebar { } &:hover { - background: var(--intergalactic-control-primary-advertising-hover, oklch(0.6 0.244 297.8)); /* change to --intergalactic-wizard-sidebar-control-hover */ + background: var(--intergalactic-control-primary-advertising-hover, oklch(0.6 0.244 297.8)); /* TODO: --intergalactic-wizard-sidebar-control-hover */ z-index: 2; } &[active] { - background: var(--intergalactic-control-primary-advertising-active, oklch(0.58 0.254 297.1)); /* change to --intergalactic-wizard-sidebar-control-active */ + background: var(--intergalactic-control-primary-advertising-active, oklch(0.58 0.254 297.1)); /* TODO: --intergalactic-wizard-sidebar-control-active */ } &:disabled, &[disabled] { @@ -63,7 +63,7 @@ SSidebar { overflow: auto; } &[active]:hover SStepDescription { - background: var(--intergalactic-control-primary-advertising-active, oklch(0.58 0.254 297.1)); /* change to --intergalactic-wizard-sidebar-control-active */ + background: var(--intergalactic-control-primary-advertising-active, oklch(0.58 0.254 297.1)); /* TODO: --intergalactic-wizard-sidebar-control-active */ } } } @@ -101,7 +101,7 @@ SContent { flex: 1; border-radius: 0 var(--intergalactic-modal-rounded, 14px) var(--intergalactic-modal-rounded, 14px) 0; - background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* change to --intergalactic-wizard-bg */ + background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* TODO: --intergalactic-wizard-bg */ SWizardStepTitle { display: block; diff --git a/stories/components/tooltip/docs/examples/custom_bg_color.tsx b/stories/components/tooltip/docs/examples/custom_bg_color.tsx index f7dd7a4f79..82ed05853e 100644 --- a/stories/components/tooltip/docs/examples/custom_bg_color.tsx +++ b/stories/components/tooltip/docs/examples/custom_bg_color.tsx @@ -8,7 +8,7 @@ const Demo = () => ( Colored tooltip ( background: 'var(--intergalactic-bg-primary-advertising)', color: 'var(--intergalactic-text-primary-invert)', borderRadius: 'var(--intergalactic-popper-rounded)', - borderColor: 'var(--intergalactic-border-tooltip-invert)', + borderColor: 'var(--intergalactic-tooltip-border-invert)', }} p={3} > diff --git a/tools/theme/src/theme.ts b/tools/theme/src/theme.ts index a5c64cd33d..ab864a3c2b 100644 --- a/tools/theme/src/theme.ts +++ b/tools/theme/src/theme.ts @@ -259,253 +259,209 @@ export const theme: Theme = { }, semanticTokens: { colors: { - bg_primary_neutral_DEFAULT: { - value: neutral.at(L_BG_PRIMARY), - description: 'Primary background of the interface which contains the main data and information.', + badge_bg_admin: { + value: '{baseTokens.colors.blue.400}', + description: 'Background color of the admin Badge.', }, - bg_primary_neutral_hover: { - value: neutral.at(L_BG_PRIMARY_HOVER), - description: 'Hover state of the primary background of the interface which contains the main data and information.', + badge_bg_alpha: { + value: '{baseTokens.colors.red.400}', + description: 'Background color of the alpha Badge.', }, - bg_primary_neutral_active: { - value: neutral.at(L_BG_PRIMARY_ACTIVE), - description: 'Active (selected) state of the primary background of the interface which contains the main data and information.', + badge_bg_beta: { + value: '{baseTokens.colors.orange.400}', + description: 'Background color of the beta Badge.', }, - bg_primary_info: { - value: info.at(L_BG_STRONG), - description: 'Accent background of the message with regular information.', + badge_bg_invert: { + value: '{baseTokens.colors.gray.white}', + description: 'Background color of the inverted Badge.', }, - bg_primary_success: { - value: success.at(L_BG_STRONG), - description: 'Accent background of the message or banner with information about the successful result.', + badge_bg_new: { + value: '{baseTokens.colors.green.400}', + description: 'Background color of the new Badge.', + }, + badge_bg_soon: { + value: '{baseTokens.colors.gray.400}', + description: 'Background color of the soon Badge.', + }, + badge_bg_unavailable: { + value: '{baseTokens.colors.gray.100}', + description: 'Background color of the unavailable Badge.', + }, + badge_text_primary_DEFAULT: { + value: '{semanticTokens.colors.text_primary_DEFAULT}', + description: 'Primary text color for Badge.', + }, + badge_text_primary_invert: { + value: '{semanticTokens.colors.text_primary_invert}', + description: 'Inverted primary text color for Badge.', + }, + badge_text_secondary: { + value: '{semanticTokens.colors.text_secondary_DEFAULT}', + description: 'Secondary text color for Badge.', + }, + bg_highlight_focus: { + value: focus.opaqueAt(L_BG_SECONDARY_ACTIVE), + description: 'Focusing values in the input.', + }, + bg_highlight_results: { + value: highlight.at(L_BG_SECONDARY_ACTIVE), + description: 'Highlighting the search results.', + }, + bg_primary_advertising: { + value: advertising.at(L_BG_STRONG), + description: 'Accent background for the advertising banners and controls.', }, bg_primary_critical: { value: error.at(L_BG_STRONG), description: 'Accent background of a message or a banner with a critical information.', }, - bg_primary_warning: { - value: warning.at(0.7), - description: 'Accent background of a message or a banner with a warning information.', - }, bg_primary_highlight: { value: highlight.at(L_BG_MEDIUM), description: 'Accent background of the information you want to highlight.', }, - bg_primary_advertising: { - value: advertising.at(L_BG_STRONG), - description: 'Accent background for the advertising banners and controls.', - }, - bg_primary_muted: { - value: neutral.at(L_BG_STRONG), - description: 'Accented muted background for a message with regular information.', + bg_primary_info: { + value: info.at(L_BG_STRONG), + description: 'Accent background of the message with regular information.', }, bg_primary_invert_DEFAULT: { value: neutral.at(L_INV_BG_PRIMARY), description: 'Inverted version of the primary background of the interface that contains the main data and information.', }, - bg_primary_invert_hover: { - value: neutral.at(L_INV_BG_PRIMARY_HOVER), - description: 'Hover state for the inverted version of the primary background of the interface that contains the main data and information.', - }, bg_primary_invert_active: { value: neutral.at(L_INV_BG_PRIMARY_ACTIVE), description: 'Active (selected) state for the inverted version of the primary background of the interface that contains the main data and information.', }, - bg_secondary_neutral_DEFAULT: { - value: neutral.at(L_BG_SECONDARY), - description: 'Secondary background of the interface which contains the main data and information.', + bg_primary_invert_hover: { + value: neutral.at(L_INV_BG_PRIMARY_HOVER), + description: 'Hover state for the inverted version of the primary background of the interface that contains the main data and information.', }, - bg_secondary_neutral_hover: { - value: neutral.at(L_BG_SECONDARY_HOVER), - description: 'Hover state of the secondary background of the interface which contains the main data and information.', + bg_primary_muted: { + value: neutral.at(L_BG_STRONG), + description: 'Accented muted background for a message with regular information.', }, - bg_secondary_neutral_active: { - value: neutral.at(L_BG_SECONDARY_ACTIVE), - description: 'Active (selected) state of the secondary background of the interface which contains the main data and information.', + bg_primary_neutral_DEFAULT: { + value: neutral.at(L_BG_PRIMARY), + description: 'Primary background of the interface which contains the main data and information.', }, - bg_secondary_info_DEFAULT: { - value: info.at(L_BG_LIGHT), - description: 'Secondary background of a message with regular information.', + bg_primary_neutral_active: { + value: neutral.at(L_BG_PRIMARY_ACTIVE), + description: 'Active (selected) state of the primary background of the interface which contains the main data and information.', }, - bg_secondary_info_hover: { - value: info.at(L_BG_SECONDARY_HOVER), - description: 'Hover state of the secondary background of a message with regular information.', + bg_primary_neutral_hover: { + value: neutral.at(L_BG_PRIMARY_HOVER), + description: 'Hover state of the primary background of the interface which contains the main data and information.', }, - bg_secondary_info_active: { - value: info.at(L_BG_SECONDARY_ACTIVE), - description: 'Active (selected) state of the secondary background of a message with regular information.', + bg_primary_success: { + value: success.at(L_BG_STRONG), + description: 'Accent background of the message or banner with information about the successful result.', }, - bg_secondary_success_DEFAULT: { - value: success.at(L_BG_LIGHT), - description: 'Secondary background of the message with success information you want to accent.', + bg_primary_warning: { + value: warning.at(0.7), + description: 'Accent background of a message or a banner with a warning information.', }, - bg_secondary_success_hover: { - value: success.at(L_BG_SECONDARY_HOVER), - description: 'Hover state of the secondary background of the message with success information you want to accent.', + bg_secondary_advertising_DEFAULT: { + value: advertising.at(L_BG_SECONDARY), + description: 'Secondary background for the advertising message you want to accent.', }, - bg_secondary_success_active: { - value: success.at(L_BG_SECONDARY_ACTIVE), - description: 'Active (selected) state of the secondary background of the message with success information you want to accent.', + bg_secondary_advertising_active: { + value: advertising.at(L_BG_SECONDARY_ACTIVE), + description: 'Active (selected) state of the secondary background for the advertising message you want to accent.', + }, + bg_secondary_advertising_hover: { + value: advertising.at(L_BG_SECONDARY_HOVER), + description: 'Hover state of the secondary background for the advertising message you want to accent.', }, bg_secondary_critical_DEFAULT: { value: error.at(L_BG_LIGHT), description: 'Secondary background of the message with critical information you want to accent.', }, - bg_secondary_critical_hover: { - value: error.at(L_BG_SECONDARY_HOVER), - description: 'Hover state of the secondary background of the message with critical information you want to accent.', - }, bg_secondary_critical_active: { value: error.at(L_BG_SECONDARY_ACTIVE), description: 'Active (selected) state of the secondary background of the message with critical information you want to accent.', }, - bg_secondary_warning_DEFAULT: { - value: warning.at(L_BG_SECONDARY), - description: 'Secondary background of the message with warning information you want to accent.', - }, - bg_secondary_warning_hover: { - value: warning.at(L_BG_SECONDARY_HOVER), - description: 'Hover state of the secondary background of the message with warning information you want to accent.', - }, - bg_secondary_warning_active: { - value: warning.at(L_BG_SECONDARY_ACTIVE), - description: 'Active (selected) state of the secondary background of the message with critical information you want to accent.', + bg_secondary_critical_hover: { + value: error.at(L_BG_SECONDARY_HOVER), + description: 'Hover state of the secondary background of the message with critical information you want to accent.', }, bg_secondary_highlight_DEFAULT: { value: highlight.at(L_BG_SECONDARY), description: 'Secondary background of the information you want to highlight.', }, - bg_secondary_highlight_hover: { - value: highlight.at(L_BG_SECONDARY_HOVER), - description: 'Hover state of the secondary background of the information you want to highlight.', - }, bg_secondary_highlight_active: { value: highlight.at(L_BG_SECONDARY_ACTIVE), description: 'Active (selected) state of the secondary background of the information you want to highlight.', }, - bg_secondary_advertising_DEFAULT: { - value: advertising.at(L_BG_SECONDARY), - description: 'Secondary background for the advertising message you want to accent.', + bg_secondary_highlight_hover: { + value: highlight.at(L_BG_SECONDARY_HOVER), + description: 'Hover state of the secondary background of the information you want to highlight.', }, - bg_secondary_advertising_hover: { - value: advertising.at(L_BG_SECONDARY_HOVER), - description: 'Hover state of the secondary background for the advertising message you want to accent.', + bg_secondary_info_DEFAULT: { + value: info.at(L_BG_LIGHT), + description: 'Secondary background of a message with regular information.', }, - bg_secondary_advertising_active: { - value: advertising.at(L_BG_SECONDARY_ACTIVE), - description: 'Active (selected) state of the secondary background for the advertising message you want to accent.', + bg_secondary_info_active: { + value: info.at(L_BG_SECONDARY_ACTIVE), + description: 'Active (selected) state of the secondary background of a message with regular information.', }, - bg_highlight_results: { - value: highlight.at(L_BG_SECONDARY_ACTIVE), - description: 'Highlighting the search results.', + bg_secondary_info_hover: { + value: info.at(L_BG_SECONDARY_HOVER), + description: 'Hover state of the secondary background of a message with regular information.', }, - bg_highlight_focus: { - value: focus.opaqueAt(L_BG_SECONDARY_ACTIVE), - description: 'Focusing values in the input.', + bg_secondary_neutral_DEFAULT: { + value: neutral.at(L_BG_SECONDARY), + description: 'Secondary background of the interface which contains the main data and information.', }, - text_primary_DEFAULT: { - value: neutral.opaqueAt(L_TEXT_PRIMARY), - description: 'Default body and UI copy; strongest reading emphasis for primary content.', + bg_secondary_neutral_active: { + value: neutral.at(L_BG_SECONDARY_ACTIVE), + description: 'Active (selected) state of the secondary background of the interface which contains the main data and information.', }, - text_primary_invert: { - value: neutral.opaqueInvAt(L_INV_TEXT_PRIMARY), - description: 'Inverted version of the primary text.', + bg_secondary_neutral_hover: { + value: neutral.at(L_BG_SECONDARY_HOVER), + description: 'Hover state of the secondary background of the interface which contains the main data and information.', }, - text_secondary_DEFAULT: { - value: neutral.opaqueAt(L_TEXT_SECONDARY), - description: 'Supporting text: captions, metadata, hints in flowing copy—visually quieter than primary body text.', + bg_secondary_success_DEFAULT: { + value: success.at(L_BG_LIGHT), + description: 'Secondary background of the message with success information you want to accent.', }, - text_secondary_invert: { - value: neutral.opaqueInvAt(L_INV_TEXT_SECONDARY), - description: 'Inverted version of the secondary text.', + bg_secondary_success_active: { + value: success.at(L_BG_SECONDARY_ACTIVE), + description: 'Active (selected) state of the secondary background of the message with success information you want to accent.', }, - text_placeholder: { - value: neutral.opaqueAt(L_TEXT_PLACEHOLDER), - description: 'Placeholder text color for inputs and fields.', + bg_secondary_success_hover: { + value: success.at(L_BG_SECONDARY_HOVER), + description: 'Hover state of the secondary background of the message with success information you want to accent.', }, - text_success_DEFAULT: { - value: success.at(L_TEXT_SECONDARY), - description: 'Text associated with success states and data.', + bg_secondary_warning_DEFAULT: { + value: warning.at(L_BG_SECONDARY), + description: 'Secondary background of the message with warning information you want to accent.', }, - text_success_hover_active: { - value: success.at(L_TEXT_SECONDARY_HOVER), - description: 'Hover and active states for the text associated with success states and data.', + bg_secondary_warning_active: { + value: warning.at(L_BG_SECONDARY_ACTIVE), + description: 'Active (selected) state of the secondary background of the message with critical information you want to accent.', }, - text_critical_DEFAULT: { - value: error.at(L_TEXT_SECONDARY), - description: 'Text associated with critical states and data.', + bg_secondary_warning_hover: { + value: warning.at(L_BG_SECONDARY_HOVER), + description: 'Hover state of the secondary background of the message with warning information you want to accent.', }, - text_critical_hover_active: { - value: error.at(L_TEXT_SECONDARY_HOVER), - description: 'Hover and active states for the text associated with critical states and data.', + border_critical_DEFAULT: { + value: error.opaqueAt(L_BORDER_PRIMARY), + description: 'Subtle secondary border in the critical message and invalid input field.', }, - text_link_DEFAULT: { - value: link.at(L_TEXT_SECONDARY), - description: 'Default interactive link color for unfollowed links.', + border_critical_active: { + value: error.at(L_BORDER_ACTIVE), + description: 'Active border in the focused input field with invalid state, and active state of the other components with invalid state.', }, - text_link_hover_active: { - value: link.at(L_TEXT_SECONDARY_HOVER), - description: 'Hover and active states for the link text.', + border_critical_pattern: { + value: 'repeating-linear-gradient(315deg, {semanticTokens.colors.border.critical.active} 0, {semanticTokens.colors.border.critical.active} 1px, transparent 0, transparent 50%)', + description: 'Used for the invalidStatePattern utils component to mark all kinds of inputs with invalid states.', }, - text_link_invert_DEFAULT: { - value: link.at(L_INV_TEXT_SECONDARY), - description: 'Inverted version of the link text. Use on dark background only.', - }, - text_link_invert_hover: { - value: link.at(L_INV_TEXT_SECONDARY_HOVER), - description: 'Hover and active states of the inverted version of the link text. Use on dark background only.', - }, - text_link_visited: { - value: violet.at(L_TEXT_SECONDARY), - description: 'Visited link state so users can tell visited destinations apart from default links.', - }, - text_hint_DEFAULT: { - value: neutral.opaqueAt(L_TEXT_SECONDARY), - description: 'Supplementary helper text near controls (short guidance), distinct from placeholder text inside inputs.', - }, - text_hint_hover_active: { - value: neutral.opaqueAt(L_TEXT_SECONDARY_HOVER), - description: 'Hover and active states of the hint link text.', - }, - text_hint_invert_DEFAULT: { - value: neutral.at(L_INV_TEXT_SECONDARY), - description: 'Inverted version of the hint link text.', - }, - text_hint_invert_hover_active: { - value: neutral.at(L_INV_TEXT_SECONDARY_HOVER), - description: 'Hover and active states of the inverted version of the hint link text.', - }, - text_large_secondary: { - value: '{semanticTokens.colors.text.secondary}', - description: 'Secondary text. Use with font-size ≥20px.', - }, - text_large_info_DEFAULT: { - value: info.at(L_TEXT_SECONDARY), - description: 'Link text with font-size ≥20px.', - }, - text_large_info_hover_active: { - value: info.at(L_TEXT_SECONDARY_HOVER), - description: 'Hover and active states of the link text with font-size ≥20px.', - }, - text_large_success_DEFAULT: { - value: '{semanticTokens.colors.text.success}', - description: 'Text with font-size ≥20px associated with success states and data.', - }, - text_large_success_hover_active: { - value: '{semanticTokens.colors.text.success.hover.active}', - description: 'Hover and active states of the text with font-size ≥20px associated with success states and data.', - }, - text_large_critical_DEFAULT: { - value: '{semanticTokens.colors.text.critical}', - description: 'Text with font-size ≥20px associated with critical states and data.', - }, - text_large_critical_hover_active: { - value: '{semanticTokens.colors.text.critical.hover.active}', - description: 'Hover and active states of the text with font-size ≥20px associated with critical states and data.', + border_info_DEFAULT: { + value: info.opaqueAt(L_BORDER_PRIMARY), + description: 'Subtle secondary border in the informational message.', }, - text_advertising: { - value: advertising.at(L_TEXT_PRIMARY), - description: 'Promotional or sponsored emphasis (ads, marketing callouts)—use sparingly so it stays noticeable.', + border_info_active: { + value: info.at(L_BORDER_ACTIVE), + description: 'Active border in focused input filed.', }, border_primary_DEFAULT: { value: neutral.opaqueAt(L_BORDER_PRIMARY), @@ -523,14 +479,6 @@ export const theme: Theme = { value: neutral.opaqueInvAt(L_INV_BORDER_SECONDARY), description: 'Inverted version of the neutral secondary border. Use it for borders on the dark or color background.', }, - border_info_DEFAULT: { - value: info.opaqueAt(L_BORDER_PRIMARY), - description: 'Subtle secondary border in the informational message.', - }, - border_info_active: { - value: info.at(L_BORDER_ACTIVE), - description: 'Active border in focused input filed.', - }, border_success_DEFAULT: { value: success.opaqueAt(L_BORDER_PRIMARY), description: 'Subtle secondary border in the successful message and input field.', @@ -539,18 +487,6 @@ export const theme: Theme = { value: success.at(L_BORDER_ACTIVE), description: 'Active border in the focused input field with valid state.', }, - border_critical_DEFAULT: { - value: error.opaqueAt(L_BORDER_PRIMARY), - description: 'Subtle secondary border in the critical message and invalid input field.', - }, - border_critical_active: { - value: error.at(L_BORDER_ACTIVE), - description: 'Active border in the focused input field with invalid state, and active state of the other components with invalid state.', - }, - border_critical_pattern: { - value: 'repeating-linear-gradient(315deg, {semanticTokens.colors.border.critical.active} 0, {semanticTokens.colors.border.critical.active} 1px, transparent 0, transparent 50%)', - description: 'Used for the invalidStatePattern utils component to mark all kinds of inputs with invalid states.', - }, border_warning_DEFAULT: { value: warning.opaqueAt(L_BORDER_PRIMARY), description: 'Subtle secondary border in the warning message.', @@ -559,309 +495,478 @@ export const theme: Theme = { value: warning.at(L_BORDER_ACTIVE), description: 'Active border in components with warning intention.', }, - border_tooltip_invert: { - value: neutral.opaqueInvAt(L_INV_BORDER_SECONDARY), - description: 'Border of the Tooltip with dark theme.', + brand_facebook: { + value: '#1877f2', + description: 'Official Facebook brand fill for logos and icons in approved placements; follow the platform brand rules for size and clear space.', }, - border_table_accent: { - value: neutral.opaqueAt(L_BORDER_PRIMARY), - description: 'Accent borders in the Table: for the accordion in the table and for the header of the secondary table.', + brand_google_blue: { value: '#1a0dab', description: 'Google brand color for the link.' }, + brand_google_green: { + value: '#016723', + description: 'Google green brand color for the link.', }, - border_date_picker_range_comparison: { - value: highlight.at(L_BORDER_ACTIVE), - description: 'Border color of the second period for the comparison mode in the DatePicker.', + brand_google_my_business: { + value: '#1a73e8', + description: 'Official Google My Business brand fill for logos and icons in approved placements; follow Google brand guidelines for size and clear space.', }, - control_primary_info_DEFAULT: { - value: neutral.at(L_BG_BUTTON_STRONG), - description: 'Background of the regular primary control.', + brand_gradient: { + value: 'linear-gradient(180deg, #DCEEEB 0%, #EEE9FF 100%)', + description: 'Brand light gradient for branded surfaces.', }, - control_primary_info_hover: { - value: neutral.at(L_BG_BUTTON_STRONG_HOVER), - description: 'Hover state of the regular primary control.', + brand_instagram: { + value: '#e4405f', + description: 'Official Instagram brand fill for logos and icons in approved placements; follow the platform brand rules for size and clear space.', }, - control_primary_info_active: { - value: neutral.at(L_BG_BUTTON_STRONG_ACTIVE), - description: 'Active (selected) state of the regular primary control.', + brand_linkedIn: { + value: '#0a66c2', + description: 'Official LinkedIn brand fill for logos and icons in approved placements; follow the platform brand rules for size and clear space.', }, - control_primary_success_DEFAULT: { - value: green.at(L_BG_BUTTON), - description: 'Background of the primary control with successful theme.', + brand_pinterest: { + value: '#bd081c', + description: 'Official Pinterest brand fill for logos and icons in approved placements; follow the platform brand rules for size and clear space.', }, - control_primary_success_hover: { - value: green.at(L_BG_BUTTON_HOVER), - description: 'Hover state of the primary control with successful theme.', + brand_primary: { + value: violet.at(0.74), + description: 'Primary brand accent for logos and branded surfaces.', }, - control_primary_success_active: { - value: green.at(L_BG_BUTTON_ACTIVE), - description: 'Active (selected) state of the primary control with successful theme.', + brand_secondary: { + value: gray.at(0.22), + description: 'Secondary brand accent for paired brand treatments (secondary marks, duo-tone lockups).', }, - control_primary_critical_DEFAULT: { - value: error.at(L_BG_BUTTON), - description: 'Background of the primary control with danger theme.', + brand_twitter: { + value: '#1d9bf0', + description: 'Official Twitter brand fill for logos and icons in approved placements; follow the platform brand rules for size and clear space.', }, - control_primary_critical_hover: { - value: error.at(L_BG_BUTTON_HOVER), - description: 'Hover state of the primary control with danger theme.', + brand_youtube: { + value: '#ff0000', + description: 'Official YouTube brand fill for logos and icons in approved placements; follow the platform brand rules for size and clear space.', }, - control_primary_critical_active: { - value: error.at(L_BG_BUTTON_ACTIVE), - description: 'Active (selected) state of the primary control with danger theme.', + chart_data_critical: { + value: '{baseTokens.colors.red.400}', + description: 'Critical data color for charts.', }, - control_primary_brand_DEFAULT: { - value: brand.at(L_BG_BUTTON), - description: 'Background of the primary brand colored control.', + chart_data_success: { + value: '{baseTokens.colors.green.300}', + description: 'Success data color for charts.', }, - control_primary_brand_hover: { - value: brand.at(L_BG_BUTTON_HOVER), - description: 'Hover state of the primary brand colored control.', + chart_data_warning: { + value: '{baseTokens.colors.orange.300}', + description: 'Warning data color for charts.', }, - control_primary_brand_active: { - value: brand.at(L_BG_BUTTON_ACTIVE), - description: 'Active state of the primary brand colored control.', + chart_grid_bar_chart_base_bg: { + value: neutral.at(L_BG_LIGHT), + description: 'Default background color of a bar in the BarChart.', }, - control_primary_advertising_DEFAULT: { - value: advertising.at(L_BG_BUTTON), - description: 'Background of the advertising primary control.', + chart_grid_bar_chart_hover: { + value: neutral.opaqueAt(L_BG_PRIMARY_HOVER), + description: 'Background color for the hover state of a bar on the chart grid.', }, - control_primary_advertising_hover: { - value: advertising.at(L_BG_BUTTON_HOVER), - description: 'Hover state of the advertising primary control.', + chart_grid_border: { + value: '{baseTokens.colors.white}', + description: 'Border for distinguishing data sets and chart dots on the chart grid.', }, - control_primary_advertising_active: { - value: advertising.at(L_BG_BUTTON_ACTIVE), - description: 'Active (selected) state of the advertising primary control.', + chart_grid_line: { + value: neutral.at(L_BORDER_SECONDARY), + description: 'Grid and axis guide lines for charts.', }, - control_primary_invert_DEFAULT: { - value: neutral.at(L_INV_BG_BUTTON), - description: 'Inverted background of the primary control.', + chart_grid_period_bg: { + value: neutral.at(L_BG_LIGHT), + description: 'Use for highlighting a period on the chart grid.', }, - control_primary_invert_hover: { - value: neutral.at(L_INV_BG_BUTTON_HOVER), - description: 'Hover state of the inverted primary control.', + chart_grid_period_pattern: { + value: neutral.at(L_BORDER_SECONDARY), + description: 'Stripe color for diagonal pattern background.', }, - control_primary_invert_active: { - value: neutral.at(L_INV_BG_BUTTON_ACTIVE), - description: 'Active (selected) state of the inverted primary control.', + chart_grid_text_label: { + value: neutral.opaqueAt(L_TEXT_SECONDARY), + description: 'Text label on the chart grid.', }, - control_secondary_neutral_DEFAULT: { - value: neutral.opaqueAt(L_BG_SECONDARY), - description: 'Background of the regular secondary control.', + chart_grid_x_axis: { + value: neutral.at(L_BORDER_PRIMARY), + description: 'X-axis line on the chart grid.', }, - control_secondary_neutral_hover: { - value: neutral.opaqueAt(L_BG_SECONDARY_HOVER), - description: 'Hover state of the regular secondary control.', + chart_grid_y_accent_hover_line: { + value: neutral.at(L_BORDER_PRIMARY), + description: 'Accent line for the hover state on the chart grid.', }, - control_secondary_neutral_active: { - value: neutral.opaqueAt(L_BG_SECONDARY_ACTIVE), - description: 'Active (selected) state of the regular secondary control.', + chart_palette_order_1: { + value: colors.blue['400'].value, + description: '1 color in the default list of colors for charts.', }, - control_secondary_info_DEFAULT: { - value: info.opaqueAt(L_BG_SECONDARY), - description: 'Background of the accent secondary control.', + chart_palette_order_10: { + value: colors.green['300'].value, + description: '10 color in the default list of colors for charts.', }, - control_secondary_info_hover: { - value: info.opaqueAt(L_BG_SECONDARY_HOVER), - description: 'Hover state of the accent secondary control.', + chart_palette_order_11: { + value: colors.yellow['300'].value, + description: '11 color in the default list of colors for charts.', }, - control_secondary_info_active: { - value: info.opaqueAt(L_BG_SECONDARY_ACTIVE), - description: 'Active (selected) state of the accent secondary control.', + chart_palette_order_12: { + value: colors.pink['200'].value, + description: '12 color in the default list of colors for charts.', }, - control_secondary_invert_DEFAULT: { - value: neutral.opaqueInvAt(L_INV_BG_SECONDARY), - description: 'Background of the inverted version of the secondary control.', + chart_palette_order_13: { + value: colors.salad['400'].value, + description: '13 color in the default list of colors for charts.', }, - control_secondary_invert_hover: { - value: neutral.opaqueInvAt(L_INV_BG_SECONDARY_HOVER), - description: 'Hover state of the inverted version of the secondary control.', + chart_palette_order_14: { + value: colors.violet['200'].value, + description: '14 color in the default list of colors for charts.', }, - control_secondary_invert_active: { - value: neutral.opaqueInvAt(L_INV_BG_SECONDARY_ACTIVE), - description: 'Active (selected) state of the inverted version of the secondary control.', + chart_palette_order_15: { + value: colors.red['400'].value, + description: '15 color in the default list of colors for charts.', }, - control_tertiary_neutral_DEFAULT: { - value: 'transparent', - description: 'Background of the regular tertiary control.', + chart_palette_order_16: { + value: colors.green['300'].value, + description: '16 color in the default list of colors for charts.', }, - control_tertiary_neutral_hover: { - value: neutral.opaqueAt(L_BG_SECONDARY_HOVER), - description: 'Hover state of the regular tertiary control.', + chart_palette_order_17: { + value: colors.blue['200'].value, + description: '17 color in the default list of colors for charts.', }, - control_tertiary_neutral_active: { - value: neutral.opaqueAt(L_BG_SECONDARY_ACTIVE), - description: 'Active (selected) state of the regular tertiary control.', + chart_palette_order_18: { + value: colors.salad['300'].value, + description: '18 color in the default list of colors for charts.', }, - control_tertiary_info_DEFAULT: { - value: 'transparent', - description: 'Background of the accent and link-lookalike tertiary control.', + chart_palette_order_19: { + value: colors.yellow['400'].value, + description: '19 color in the default list of colors for charts.', }, - control_tertiary_info_hover: { - value: info.opaqueAt(L_BG_SECONDARY_HOVER), - description: 'Hover state of the accent and link-lookalike tertiary control.', + chart_palette_order_2: { + value: colors.green['200'].value, + description: '2 color in the default list of colors for charts.', }, - control_tertiary_info_active: { - value: info.opaqueAt(L_BG_SECONDARY_ACTIVE), - description: 'Active (selected) state of the accent and link-lookalike tertiary control.', + chart_palette_order_20: { + value: colors.red['200'].value, + description: '20 color in the default list of colors for charts.', }, - control_tertiary_invert_DEFAULT: { - value: 'transparent', - description: 'Background of the inverted version of the tertiary control.', + chart_palette_order_21: { + value: colors.yellow['500'].value, + description: '21 color in the default list of colors for charts.', }, - control_tertiary_invert_hover: { - value: neutral.opaqueInvAt(L_INV_BG_SECONDARY_HOVER), - description: 'Hover state of the inverted version of the tertiary control.', + chart_palette_order_22: { + value: colors.violet['400'].value, + description: '22 color in the default list of colors for charts.', }, - control_tertiary_invert_active: { - value: neutral.opaqueInvAt(L_INV_BG_SECONDARY_ACTIVE), - description: 'Active (selected) state of the inverted version of the tertiary control.', + chart_palette_order_23: { + value: colors.pink['400'].value, + description: '23 color in the default list of colors for charts.', }, - icon_primary_neutral_DEFAULT: { - value: neutral.opaqueAt(L_ICON_PRIMARY), - description: 'Default icon weight on normal backgrounds—stronger emphasis than secondary icons.', + chart_palette_order_24: { + value: colors.salad['500'].value, + description: '24 color in the default list of colors for charts.', }, - icon_primary_neutral_hover_active: { - value: neutral.opaqueAt(L_ICON_PRIMARY_HOVER), - description: 'Gray background color for the hover and active states of the primary neutral icon. It’s created using a CSS filter with a brightness(0.8), applied to the gray-500 color.', + chart_palette_order_3: { + value: colors.violet['300'].value, + description: '3 color in the default list of colors for charts.', }, - icon_primary_info_DEFAULT: { - value: info.opaqueAt(L_ICON_PRIMARY), - description: 'Primary link-lookalike icon.', + chart_palette_order_4: { + value: colors.yellow['200'].value, + description: '4 color in the default list of colors for charts.', }, - icon_primary_info_hover_active: { - value: info.opaqueAt(L_ICON_PRIMARY_HOVER), - description: 'Blue background color for the hover and active states of the primary link-lookalike icon. It’s created using a CSS filter with a brightness(0.8), applied to the blue-500 color.', + chart_palette_order_5: { + value: colors.red['300'].value, + description: '5 color in the default list of colors for charts.', }, - icon_primary_success_DEFAULT: { - value: success.opaqueAt(L_ICON_PRIMARY), - description: 'Semantic success icon.', + chart_palette_order_6: { + value: colors.blue['200'].value, + description: '6 color in the default list of colors for charts.', }, - icon_primary_success_hover_active: { - value: success.opaqueAt(L_ICON_PRIMARY_HOVER), - description: 'Green background color for the hover and active states of the primary success icon. It’s created using a CSS filter with a brightness(0.8), applied to the green-500 color.', + chart_palette_order_7: { + value: colors.pink['300'].value, + description: '7 color in the default list of colors for charts.', }, - icon_primary_critical_DEFAULT: { - value: error.opaqueAt(L_ICON_PRIMARY), - description: 'Semantic error icon.', + chart_palette_order_8: { + value: colors.salad['200'].value, + description: '8 color in the default list of colors for charts.', }, - icon_primary_critical_hover_active: { - value: error.opaqueAt(L_ICON_PRIMARY_HOVER), - description: 'Red background color for the hover and active states of the primary critical icon. It’s created using a CSS filter with a brightness(0.8), applied to the red-500 color.', + chart_palette_order_9: { + value: colors.blue['500'].value, + description: '9 color in the default list of colors for charts.', }, - icon_primary_warning_DEFAULT: { - value: warning.opaqueAt(L_ICON_PRIMARY + 0.15), - description: 'Semantic warning icon.', + chart_palette_order_null: { + value: colors.gray['100'].value, + description: 'Use it to show null value on the chart.', }, - icon_primary_warning_hover_active: { - value: warning.opaqueAt(L_ICON_PRIMARY_HOVER), - description: 'Orange background color for the hover and active states of the primary warning icon. It’s created using a CSS filter with a brightness(0.8), applied to the orange-500 color.', + chart_palette_order_other_data: { + value: colors.gray['200'].value, + description: 'Use it to indicate voids, missing or some other data on the chart.', }, - icon_primary_invert_DEFAULT: { - value: neutral.opaqueInvAt(L_INV_ICON_PRIMARY), - description: 'Inverted version of the primary icon.', + chart_palette_order_total_amount: { + value: colors.gray['400'].value, + description: 'Use it to show total value on the chart.', }, - icon_primary_invert_hover_active: { - value: neutral.opaqueInvAt(L_INV_ICON_PRIMARY_HOVER), - description: 'Hover and active (selected) states of the inverted version of the primary icon.', + chart_x_axis_accent_data_start_tracking: { + value: success.opaqueAt(L_BG_LIGHT), + description: 'Background color for the "Start tracking" date on the X-axis of the chart grid.', }, - icon_secondary_neutral_DEFAULT: { - value: neutral.opaqueAt(L_ICON_SECONDARY), - description: 'De-emphasized icons for dense layouts (tables, tertiary actions).', + chart_x_axis_accent_period_active: { + value: neutral.opaqueAt(L_BG_LIGHT), + description: 'Background color for the clickable date on the X-axis of the chart grid.', }, - icon_secondary_neutral_hover_active: { - value: neutral.opaqueAt(L_ICON_SECONDARY_HOVER), - description: 'Gray background color for the hover and active states of the secondary neutral icon. It’s created using a CSS filter with a brightness(0.8), applied to the gray-300 color.', + control_checkbox_bg_normal: { + value: '{semanticTokens.colors.bg_primary_neutral_DEFAULT}', + description: 'Background color of the Checkbox.', }, - icon_secondary_info_DEFAULT: { - value: info.opaqueAt(L_ICON_SECONDARY), - description: 'Secondary link-lookalike icon.', + control_checkbox_bg_selected: { + value: '{semanticTokens.colors.control_primary_info_DEFAULT}', + description: 'Background color of the checked Checkbox.', }, - icon_secondary_info_hover_active: { - value: info.at(L_ICON_SECONDARY_HOVER), - description: 'Blue background color for the hover and active states of the secondary link-lookalike icon. It’s created using a CSS filter with a brightness(0.8), applied to the blue-300 color.', + control_checkbox_border: { + value: '{semanticTokens.colors.border_primary_DEFAULT}', + description: 'Border color of the Checkbox.', }, - icon_secondary_success_DEFAULT: { - value: success.opaqueAt(L_ICON_SECONDARY), - description: 'Softer success icon for dense UI or inline hints where the surface should stay calm.', + control_checkbox_button_bg_hover: { + value: '{semanticTokens.colors.control_secondary_info_DEFAULT}', + description: 'Hover state of the Checkbox button background.', }, - icon_secondary_success_hover_active: { - value: success.opaqueAt(L_ICON_SECONDARY_HOVER), - description: 'Green background color for the hover and active states of the secondary success icon. It’s created using a CSS filter with a brightness(0.8), applied to the green-300 color.', + control_checkbox_button_bg_normal: { + value: '{semanticTokens.colors.bg_primary_neutral_DEFAULT}', + description: 'Normal state of the Checkbox button background.', }, - icon_secondary_critical_DEFAULT: { - value: error.opaqueAt(L_ICON_SECONDARY), - description: 'Softer error icon for dense UI or inline hints where the surface should stay calm.', + control_checkbox_button_bg_selected_DEFAULT: { + value: '{semanticTokens.colors.control_secondary_info_active}', + description: 'Selected state of the Checkbox button background.', }, - icon_secondary_critical_hover_active: { - value: error.opaqueAt(L_ICON_SECONDARY_HOVER), - description: 'Red background color for the hover and active states of the secondary critical icon. It’s created using a CSS filter with a brightness(0.8), applied to the red-300 color.', + control_checkbox_button_bg_selected_hover: { + value: '{semanticTokens.colors.control_secondary_info_active}', + description: 'Hover for a selected state of the Checkbox button background.', }, - icon_secondary_warning_DEFAULT: { - value: warning.opaqueAt(L_ICON_SECONDARY), - description: 'Softer warning icon for dense UI or inline hints where the surface should stay calm.', + control_checkbox_button_border_DEFAULT: { + value: '{semanticTokens.colors.border_primary_DEFAULT}', + description: 'Border color of the Checkbox button in its normal state.', }, - icon_secondary_warning_hover_active: { - value: warning.opaqueAt(L_ICON_SECONDARY_HOVER), - description: 'Orange background color for the hover and active states of the secondary warning icon. It’s created using a CSS filter with a brightness(0.8), applied to the orange-300 color.', + control_checkbox_button_border_selected: { + value: '{semanticTokens.colors.border_info_active}', + description: 'Border color of the Checkbox button in its active state.', }, - icon_non_interactive: { - value: neutral.opaqueAt(L_ICON_NON_INTERACTIVE), - description: 'Color for the default non-interactive icon.', + control_primary_advertising_DEFAULT: { + value: advertising.at(L_BG_BUTTON), + description: 'Background of the advertising primary control.', }, - illustration_red: { - value: red.at(0.737), - description: '⚠️ Use only for illustrations.', + control_primary_advertising_active: { + value: advertising.at(L_BG_BUTTON_ACTIVE), + description: 'Active (selected) state of the advertising primary control.', }, - illustration_orange: { - value: orange.at(0.823), - description: '⚠️ Use only for illustrations.', + control_primary_advertising_hover: { + value: advertising.at(L_BG_BUTTON_HOVER), + description: 'Hover state of the advertising primary control.', }, - illustration_yellow: { - value: yellow.at(0.924), - description: '⚠️ Use only for illustrations.', + control_primary_brand_DEFAULT: { + value: brand.at(L_BG_BUTTON), + description: 'Background of the primary brand colored control.', }, - illustration_salad: { - value: salad.at(0.922), - description: '⚠️ Use only for illustrations.', + control_primary_brand_active: { + value: brand.at(L_BG_BUTTON_ACTIVE), + description: 'Active state of the primary brand colored control.', }, - illustration_green: { - value: green.at(0.812), - description: '⚠️ Use only for illustrations.', + control_primary_brand_hover: { + value: brand.at(L_BG_BUTTON_HOVER), + description: 'Hover state of the primary brand colored control.', }, - illustration_blue: { - value: blue.at(0.84), - description: '⚠️ Use only for illustrations.', + control_primary_critical_DEFAULT: { + value: error.at(L_BG_BUTTON), + description: 'Background of the primary control with danger theme.', }, - illustration_violet: { - value: violet.at(0.709), - description: '⚠️ Use only for illustrations.', + control_primary_critical_active: { + value: error.at(L_BG_BUTTON_ACTIVE), + description: 'Active (selected) state of the primary control with danger theme.', }, - illustration_pink: { - value: pink.at(0.76), - description: '⚠️ Use only for illustrations.', + control_primary_critical_hover: { + value: error.at(L_BG_BUTTON_HOVER), + description: 'Hover state of the primary control with danger theme.', }, - date_picker_cell_DEFAULT: { - value: neutral.at(L_BG_PRIMARY), - description: 'Default date-picker cell background.', + control_primary_info_DEFAULT: { + value: neutral.at(L_BG_BUTTON_STRONG), + description: 'Background of the regular primary control.', }, - date_picker_cell_current_DEFAULT: { - value: neutral.opaqueAt(L_BORDER_ACTIVE), - description: 'Color for marking the cell with the current date, month or year in the date-picker.', + control_primary_info_active: { + value: neutral.at(L_BG_BUTTON_STRONG_ACTIVE), + description: 'Active (selected) state of the regular primary control.', }, - date_picker_cell_current_invert: { - value: neutral.opaqueInvAt(L_INV_BORDER_PRIMARY), - description: 'Color for marking the active cell with the current date, month or year in the date-picker.', + control_primary_info_hover: { + value: neutral.at(L_BG_BUTTON_STRONG_HOVER), + description: 'Hover state of the regular primary control.', }, - date_picker_cell_hover: { - value: neutral.at(L_BG_PRIMARY_HOVER), - description: 'Hover state of the default date-picker cell background.', + control_primary_invert_DEFAULT: { + value: neutral.at(L_INV_BG_BUTTON), + description: 'Inverted background of the primary control.', }, - date_picker_cell_range_DEFAULT: { - value: focus.at(L_BG_SELECTED), - description: 'Background for the cell which is included in the date range in the date-picker.', + control_primary_invert_active: { + value: neutral.at(L_INV_BG_BUTTON_ACTIVE), + description: 'Active (selected) state of the inverted primary control.', }, - date_picker_cell_range_hover: { - value: focus.at(L_BG_SELECTED_HOVER), - description: 'Hover state of the background for the cell which is included in the date range in the date-picker.', + control_primary_invert_hover: { + value: neutral.at(L_INV_BG_BUTTON_HOVER), + description: 'Hover state of the inverted primary control.', + }, + control_primary_success_DEFAULT: { + value: green.at(L_BG_BUTTON), + description: 'Background of the primary control with successful theme.', + }, + control_primary_success_active: { + value: green.at(L_BG_BUTTON_ACTIVE), + description: 'Active (selected) state of the primary control with successful theme.', + }, + control_primary_success_hover: { + value: green.at(L_BG_BUTTON_HOVER), + description: 'Hover state of the primary control with successful theme.', + }, + control_secondary_info_DEFAULT: { + value: info.opaqueAt(L_BG_SECONDARY), + description: 'Background of the accent secondary control.', + }, + control_secondary_info_active: { + value: info.opaqueAt(L_BG_SECONDARY_ACTIVE), + description: 'Active (selected) state of the accent secondary control.', + }, + control_secondary_info_hover: { + value: info.opaqueAt(L_BG_SECONDARY_HOVER), + description: 'Hover state of the accent secondary control.', + }, + control_secondary_invert_DEFAULT: { + value: neutral.opaqueInvAt(L_INV_BG_SECONDARY), + description: 'Background of the inverted version of the secondary control.', + }, + control_secondary_invert_active: { + value: neutral.opaqueInvAt(L_INV_BG_SECONDARY_ACTIVE), + description: 'Active (selected) state of the inverted version of the secondary control.', + }, + control_secondary_invert_hover: { + value: neutral.opaqueInvAt(L_INV_BG_SECONDARY_HOVER), + description: 'Hover state of the inverted version of the secondary control.', + }, + control_secondary_neutral_DEFAULT: { + value: neutral.opaqueAt(L_BG_SECONDARY), + description: 'Background of the regular secondary control.', + }, + control_secondary_neutral_active: { + value: neutral.opaqueAt(L_BG_SECONDARY_ACTIVE), + description: 'Active (selected) state of the regular secondary control.', + }, + control_secondary_neutral_hover: { + value: neutral.opaqueAt(L_BG_SECONDARY_HOVER), + description: 'Hover state of the regular secondary control.', + }, + control_select_trigger_active: { + value: '{semanticTokens.colors.bg_primary_neutral_DEFAULT}', + description: 'Background of the Select trigger in its active state.', + }, + control_select_trigger_hover: { + value: '{semanticTokens.colors.bg_primary_neutral_hover}', + description: 'Background of the Select trigger in its hover state.', + }, + control_select_trigger_normal: { + value: '{semanticTokens.colors.bg_primary_neutral_DEFAULT}', + description: 'Background of the Select trigger in its normal state.', + }, + control_slider_bar_DEFAULT: { + value: '{semanticTokens.colors.progress_bar_bg_DEFAULT}', + description: 'Background of the Slider bar.', + }, + control_slider_bar_hover: { + value: '{semanticTokens.colors.progress_bar_bg_hover}', + description: 'Hover state of the Slider bar.', + }, + control_slider_bar_value: { + value: '{semanticTokens.colors.control_primary_info_DEFAULT}', + description: 'Filled part of the Slider bar.', + }, + control_slider_knob_DEFAULT: { + value: '{baseTokens.colors.gray.white}', + description: 'Knob fill color of the Slider.', + }, + control_slider_knob_border_DEFAULT: { + value: '{semanticTokens.colors.control_primary_info_DEFAULT}', + description: 'Knob border color of the Slider in its normal state.', + }, + control_slider_knob_border_hover: { + value: '{semanticTokens.colors.control_primary_info_hover}', + description: 'Knob border color of the Slider in its hover state.', + }, + control_slider_rating_hover_active: { + value: highlight.at(L_ICON_SECONDARY_HOVER), + description: 'Icon color for the SliderRating component in its hovered and active states.', + }, + control_slider_rating_normal: { + value: neutral.at(L_ICON_SECONDARY), + description: 'Icon color for the SliderRating component in its normal state.', + }, + control_switch_bg_DEFAULT: { + value: '{baseTokens.colors.gray.300}', + description: 'Subtle background of the Switch control.', + }, + control_switch_bg_info_active: { + value: '{semanticTokens.colors.control_primary_info_DEFAULT}', + description: 'Active background of the Switch control.', + }, + control_switch_bg_success_active: { + value: '{semanticTokens.colors.control_primary_success_DEFAULT}', + description: 'Active background of the Switch control.', + }, + control_switch_handle: { + value: '{baseTokens.colors.gray.white}', + description: 'Handle color of the Switch control.', + }, + control_tertiary_info_DEFAULT: { + value: 'transparent', + description: 'Background of the accent and link-lookalike tertiary control.', + }, + control_tertiary_info_active: { + value: info.opaqueAt(L_BG_SECONDARY_ACTIVE), + description: 'Active (selected) state of the accent and link-lookalike tertiary control.', + }, + control_tertiary_info_hover: { + value: info.opaqueAt(L_BG_SECONDARY_HOVER), + description: 'Hover state of the accent and link-lookalike tertiary control.', + }, + control_tertiary_invert_DEFAULT: { + value: 'transparent', + description: 'Background of the inverted version of the tertiary control.', + }, + control_tertiary_invert_active: { + value: neutral.opaqueInvAt(L_INV_BG_SECONDARY_ACTIVE), + description: 'Active (selected) state of the inverted version of the tertiary control.', + }, + control_tertiary_invert_hover: { + value: neutral.opaqueInvAt(L_INV_BG_SECONDARY_HOVER), + description: 'Hover state of the inverted version of the tertiary control.', + }, + control_tertiary_neutral_DEFAULT: { + value: 'transparent', + description: 'Background of the regular tertiary control.', + }, + control_tertiary_neutral_active: { + value: neutral.opaqueAt(L_BG_SECONDARY_ACTIVE), + description: 'Active (selected) state of the regular tertiary control.', + }, + control_tertiary_neutral_hover: { + value: neutral.opaqueAt(L_BG_SECONDARY_HOVER), + description: 'Hover state of the regular tertiary control.', + }, + control_text_primary_DEFAULT: { + value: '{semanticTokens.colors.text_primary_DEFAULT}', + description: 'Primary text color for form controls.', + }, + control_text_primary_invert: { + value: '{semanticTokens.colors.text_primary_invert}', + description: 'Inverted primary text color for form controls.', + }, + control_text_secondary: { + value: '{semanticTokens.colors.text_secondary_DEFAULT}', + description: 'Secondary text color for form controls.', + }, + control_text_tertiary: { + value: '{semanticTokens.colors.text_secondary_DEFAULT}', + description: 'Tertiary text color for form controls.', + }, + date_picker_border_range_comparison: { + value: highlight.at(L_BORDER_ACTIVE), + description: 'Border color of the second period for the comparison mode in the DatePicker.', + }, + date_picker_cell_DEFAULT: { + value: neutral.at(L_BG_PRIMARY), + description: 'Default date-picker cell background.', }, date_picker_cell_active_DEFAULT: { value: focus.at(L_BG_BUTTON), @@ -879,6 +984,34 @@ export const theme: Theme = { value: highlight.at(L_BG_BUTTON_HOVER), description: 'Hover for the active (selected) date-picker cell background for comparison periods.', }, + date_picker_cell_current_DEFAULT: { + value: neutral.opaqueAt(L_BORDER_ACTIVE), + description: 'Color for marking the cell with the current date, month or year in the date-picker.', + }, + date_picker_cell_current_invert: { + value: neutral.opaqueInvAt(L_INV_BORDER_PRIMARY), + description: 'Color for marking the active cell with the current date, month or year in the date-picker.', + }, + date_picker_cell_hover: { + value: neutral.at(L_BG_PRIMARY_HOVER), + description: 'Hover state of the default date-picker cell background.', + }, + date_picker_cell_range_DEFAULT: { + value: focus.at(L_BG_SELECTED), + description: 'Background for the cell which is included in the date range in the date-picker.', + }, + date_picker_cell_range_hover: { + value: focus.at(L_BG_SELECTED_HOVER), + description: 'Hover state of the background for the cell which is included in the date range in the date-picker.', + }, + dot_notification_bg: { + value: '{semanticTokens.colors.icon_primary_warning_DEFAULT}', + description: 'Background color of the notification Dot.', + }, + dot_notification_text: { + value: '{semanticTokens.colors.text_primary_invert}', + description: 'Text color of the notification Dot.', + }, dropdown_menu_item_DEFAULT: { value: neutral.at(L_BG_PRIMARY), description: 'Default background color for the list item in the dropdown-menu.', @@ -891,224 +1024,216 @@ export const theme: Theme = { value: focus.opaqueAt(L_BG_SELECTED), description: 'Active (selected) state of the default background color for the list item in the dropdown-menu.', }, + dropdown_menu_item_selected_border: { + value: '{semanticTokens.colors.control_primary_info_DEFAULT}', + description: 'Border color of the selected item in the DropdownMenu.', + }, dropdown_menu_item_selected_hover: { value: focus.opaqueAt(L_BG_SELECTED_HOVER), description: 'Hover state for the selected state of the default background color for the list item in the dropdown-menu.', }, - feature_popover_bg_DEFAULT: { + feature_popover_accent_bg: { value: '{semanticTokens.colors.bg.primary.highlight}', description: 'Color of the outer border of the FeaturePopover.Spot.', }, - feature_popover_bg_neutral: { - value: neutral.at(L_INV_BG_PRIMARY), + feature_popover_accent_dot_outer_border: { + value: '{semanticTokens.colors.bg.primary.highlight}', description: 'Color of the outer border of the FeaturePopover.Spot.', }, - feature_popover_dot_outer_border: { - value: '{semanticTokens.colors.bg.primary.highlight}', + feature_popover_dot_DEFAULT: { + value: '{semanticTokens.colors.bg_primary_highlight}', description: 'Color of the outer border of the FeaturePopover.Spot.', }, feature_popover_dot_neutral_DEFAULT: { value: '{semanticTokens.colors.bg.primary.highlight}', description: 'Color of the outer border of the FeaturePopover.Spot.', }, - feature_popover_dot_neutral_outer_border: { + feature_popover_neutral_bg: { + value: neutral.at(L_INV_BG_PRIMARY), + description: 'Color of the outer border of the FeaturePopover.Spot.', + }, + feature_popover_neutral_dot_outer_border: { value: '{semanticTokens.colors.feature.popover.dot.neutral}', description: 'Color of the outer border of the FeaturePopover.Spot.', }, - progress_bar_bg_DEFAULT: { - value: neutral.at(L_BG_LIGHT), - description: 'Background color of the ProgressBar.', + feature_popover_text_DEFAULT: { + value: '{semanticTokens.colors.text_primary_DEFAULT}', + description: 'Text color of the FeaturePopover.', }, - progress_bar_bg_hover: { - value: neutral.at(L_BG_MEDIUM), - description: 'Hover state of the background color of the ProgressBar.', + feature_popover_text_invert: { + value: '{semanticTokens.colors.text_primary_invert}', + description: 'Inverted text color of the FeaturePopover.', }, - progress_bar_bg_invert_DEFAULT: { - value: neutral.at(L_INV_BG_LIGHT), - description: 'Inverted version of the background color of the ProgressBar.', + footer_bg: { value: '{semanticTokens.colors.page.bg}', + description: 'Background fill for the product page footer.', }, - progress_bar_bg_invert_hover: { - value: neutral.at(L_INV_BG_MEDIUM), - description: 'Hover state for the inverted version of the background color of the ProgressBar.', + header_bg: { value: '{semanticTokens.colors.page.bg}' }, + header_border_primary: { value: '{semanticTokens.colors.border.primary}' }, + header_border_secondary: { value: '{semanticTokens.colors.border.primary}' }, + icon_non_interactive: { + value: neutral.opaqueAt(L_ICON_NON_INTERACTIVE), + description: 'Color for the default non-interactive icon.', }, - progress_bar_value_gradient: { - value: `linear-gradient(-45deg, oklch(from ${highlight.at(0.74)} calc(l - 0.05) c h) 25%, ${highlight.at(0.74)} 0%, ${highlight.at(0.74)} 50%, oklch(from ${highlight.at(0.74)} calc(l - 0.05) c h) 0%, oklch(from ${highlight.at(0.74)} calc(l - 0.05) c h) 75%, ${highlight.at(0.74)} 0%)`, - description: 'Value with gradient for the ProgressBar.', + icon_primary_critical_DEFAULT: { + value: error.opaqueAt(L_ICON_PRIMARY), + description: 'Semantic error icon.', }, - progress_bar_value_bg: { - value: 'oklch(1 0 0)', - description: 'Base value background for the ProgressBar. It is used to create gradients for the values.', + icon_primary_critical_hover_active: { + value: error.opaqueAt(L_ICON_PRIMARY_HOVER), + description: 'Red background color for the hover and active states of the primary critical icon. It’s created using a CSS filter with a brightness(0.8), applied to the red-500 color.', }, - progress_bar_pattern_gradient: { - value: 'linear-gradient(-45deg, oklch(0 0 0 / 0.1) 25%, {semanticTokens.colors.progress.bar.bg} 0%, {semanticTokens.colors.progress.bar.bg} 50%, oklch(0 0 0 / 0.1) 0%, oklch(0 0 0 / 0.1) 75%, {semanticTokens.colors.progress.bar.bg} 0%)', - description: 'Null value gradient for the ProgressBar.', - }, - - skeleton_bg_DEFAULT: { - value: neutral.at(L_BG_SKELETON), - description: 'Default color for the Skeleton.', - }, - skeleton_bg_invert: { - value: neutral.at(L_INV_BG_SKELETON), - description: 'Inverted version of the default color for the Skeleton.', - }, - table_th_primary_cell_DEFAULT: { - value: neutral.at(L_BG_SECONDARY), - description: 'Background of the header cell in the primary Table.', - }, - table_th_primary_cell_hover: { - value: neutral.at(L_BG_SECONDARY_ACTIVE), - description: 'Background of the hovered header cell in the primary Table.', + icon_primary_info_DEFAULT: { + value: info.opaqueAt(L_ICON_PRIMARY), + description: 'Primary link-lookalike icon.', }, - table_th_primary_cell_active: { - value: neutral.at(L_BG_SECONDARY_ACTIVE), - description: 'Background of the active header cell in the primary Table.', + icon_primary_info_hover_active: { + value: info.opaqueAt(L_ICON_PRIMARY_HOVER), + description: 'Blue background color for the hover and active states of the primary link-lookalike icon. It’s created using a CSS filter with a brightness(0.8), applied to the blue-500 color.', }, - table_th_secondary_cell: { - value: neutral.at(L_BG_PRIMARY), - description: 'Background of the header cell in the secondary Table.', + icon_primary_invert_DEFAULT: { + value: neutral.opaqueInvAt(L_INV_ICON_PRIMARY), + description: 'Inverted version of the primary icon.', }, - table_th_gradient: { - value: `linear-gradient(to right, transparent 0%, ${colors.gray['100'].value} 100%)`, - description: 'Background gradient for sorting icon that absolute positioned in the table head.', + icon_primary_invert_hover_active: { + value: neutral.opaqueInvAt(L_INV_ICON_PRIMARY_HOVER), + description: 'Hover and active (selected) states of the inverted version of the primary icon.', }, - table_td_cell_DEFAULT: { - value: neutral.at(L_BG_PRIMARY), - description: 'Background of the default cell in the Table.', + icon_primary_neutral_DEFAULT: { + value: neutral.opaqueAt(L_ICON_PRIMARY), + description: 'Default icon weight on normal backgrounds—stronger emphasis than secondary icons.', }, - table_td_cell_hover: { - value: neutral.at(L_BG_PRIMARY_HOVER), - description: 'Background of the default hovered cell in the Table.', + icon_primary_neutral_hover_active: { + value: neutral.opaqueAt(L_ICON_PRIMARY_HOVER), + description: 'Gray background color for the hover and active states of the primary neutral icon. It’s created using a CSS filter with a brightness(0.8), applied to the gray-500 color.', }, - table_td_cell_active: { - value: neutral.at(L_BG_PRIMARY_ACTIVE), - description: 'Background of the default active cell in the Table.', + icon_primary_success_DEFAULT: { + value: success.opaqueAt(L_ICON_PRIMARY), + description: 'Semantic success icon.', }, - table_td_cell_unread: { - value: neutral.at(L_BG_SECONDARY), - description: 'Background of the unread cell in the Table.', + icon_primary_success_hover_active: { + value: success.opaqueAt(L_ICON_PRIMARY_HOVER), + description: 'Green background color for the hover and active states of the primary success icon. It’s created using a CSS filter with a brightness(0.8), applied to the green-500 color.', }, - table_td_cell_accordion: { - value: neutral.at(L_BG_PRIMARY), - description: 'Background of the cell used for Accordion or actions row, in the Table.', + icon_primary_warning_DEFAULT: { + value: warning.opaqueAt(L_ICON_PRIMARY + 0.15), + description: 'Semantic warning icon.', }, - table_td_cell_selected_DEFAULT: { - value: info.at(L_BG_SECONDARY), - description: 'Background of the selected cell in the Table.', + icon_primary_warning_hover_active: { + value: warning.opaqueAt(L_ICON_PRIMARY_HOVER), + description: 'Orange background color for the hover and active states of the primary warning icon. It’s created using a CSS filter with a brightness(0.8), applied to the orange-500 color.', }, - table_td_cell_selected_hover: { - value: info.at(L_BG_SECONDARY_HOVER), - description: 'Background of the hovered selected cell in the Table.', + icon_secondary_critical_DEFAULT: { + value: error.opaqueAt(L_ICON_SECONDARY), + description: 'Softer error icon for dense UI or inline hints where the surface should stay calm.', }, - table_td_cell_selected_active: { - value: info.at(L_BG_SECONDARY_ACTIVE), - description: 'Background of the active selected cell in the Table.', + icon_secondary_critical_hover_active: { + value: error.opaqueAt(L_ICON_SECONDARY_HOVER), + description: 'Red background color for the hover and active states of the secondary critical icon. It’s created using a CSS filter with a brightness(0.8), applied to the red-300 color.', }, - table_td_cell_new_DEFAULT: { - value: success.at(L_BG_SECONDARY), - description: 'Background of the cell with new information in the Table.', + icon_secondary_info_DEFAULT: { + value: info.opaqueAt(L_ICON_SECONDARY), + description: 'Secondary link-lookalike icon.', }, - table_td_cell_new_hover: { - value: success.at(L_BG_SECONDARY_HOVER), - description: 'Background of the hovered cell with new information in the Table.', + icon_secondary_info_hover_active: { + value: info.at(L_ICON_SECONDARY_HOVER), + description: 'Blue background color for the hover and active states of the secondary link-lookalike icon. It’s created using a CSS filter with a brightness(0.8), applied to the blue-300 color.', }, - table_td_cell_new_active: { - value: success.at(L_BG_SECONDARY_ACTIVE), - description: 'Background of the active cell with new information in the Table.', + icon_secondary_neutral_DEFAULT: { + value: neutral.opaqueAt(L_ICON_SECONDARY), + description: 'De-emphasized icons for dense layouts (tables, tertiary actions).', }, - table_td_cell_critical_DEFAULT: { - value: error.at(L_BG_SECONDARY), - description: 'Background of the cell with critical information in the Table.', + icon_secondary_neutral_hover_active: { + value: neutral.opaqueAt(L_ICON_SECONDARY_HOVER), + description: 'Gray background color for the hover and active states of the secondary neutral icon. It’s created using a CSS filter with a brightness(0.8), applied to the gray-300 color.', }, - table_td_cell_critical_hover: { - value: error.at(L_BG_SECONDARY_HOVER), - description: 'Background of the hovered cell with critical information in the Table.', + icon_secondary_success_DEFAULT: { + value: success.opaqueAt(L_ICON_SECONDARY), + description: 'Softer success icon for dense UI or inline hints where the surface should stay calm.', }, - table_td_cell_critical_active: { - value: error.at(L_BG_SECONDARY_ACTIVE), - description: 'Background of the active cell with critical information in the Table.', + icon_secondary_success_hover_active: { + value: success.opaqueAt(L_ICON_SECONDARY_HOVER), + description: 'Green background color for the hover and active states of the secondary success icon. It’s created using a CSS filter with a brightness(0.8), applied to the green-300 color.', }, - table_td_cell_warning_DEFAULT: { - value: warning.at(L_BG_SECONDARY), - description: 'Background of the cell with warning information in the Table.', + icon_secondary_warning_DEFAULT: { + value: warning.opaqueAt(L_ICON_SECONDARY), + description: 'Softer warning icon for dense UI or inline hints where the surface should stay calm.', }, - table_td_cell_warning_hover: { - value: warning.at(L_BG_SECONDARY_HOVER), - description: 'Background of the hovered cell with warning information in the Table.', + icon_secondary_warning_hover_active: { + value: warning.opaqueAt(L_ICON_SECONDARY_HOVER), + description: 'Orange background color for the hover and active states of the secondary warning icon. It’s created using a CSS filter with a brightness(0.8), applied to the orange-300 color.', }, - table_td_cell_warning_active: { - value: warning.at(L_BG_SECONDARY_ACTIVE), - description: 'Background of the active cell with warning information in the Table.', + illustration_blue: { + value: blue.at(0.84), + description: '⚠️ Use only for illustrations.', }, - brand_primary: { - value: violet.at(0.74), - description: 'Primary brand accent for logos and branded surfaces.', + illustration_border: { + value: '{baseTokens.colors.gray.500}', + description: 'Border color for illustrations.', }, - brand_secondary: { - value: gray.at(0.22), - description: 'Secondary brand accent for paired brand treatments (secondary marks, duo-tone lockups).', + illustration_gray: { + value: '{baseTokens.colors.gray.100}', + description: 'Gray fill color for illustrations.', }, - brand_gradient: { - value: 'linear-gradient(180deg, #DCEEEB 0%, #EEE9FF 100%)', - description: 'Brand light gradient for branded surfaces.', + illustration_green: { + value: green.at(0.812), + description: '⚠️ Use only for illustrations.', }, - brand_pinterest: { - value: '#bd081c', - description: 'Official Pinterest brand fill for logos and icons in approved placements; follow the platform brand rules for size and clear space.', + illustration_orange: { + value: orange.at(0.823), + description: '⚠️ Use only for illustrations.', }, - brand_instagram: { - value: '#e4405f', - description: 'Official Instagram brand fill for logos and icons in approved placements; follow the platform brand rules for size and clear space.', + illustration_pink: { + value: pink.at(0.76), + description: '⚠️ Use only for illustrations.', }, - brand_youtube: { - value: '#ff0000', - description: 'Official YouTube brand fill for logos and icons in approved placements; follow the platform brand rules for size and clear space.', + illustration_red: { + value: red.at(0.737), + description: '⚠️ Use only for illustrations.', }, - brand_facebook: { - value: '#1877f2', - description: 'Official Facebook brand fill for logos and icons in approved placements; follow the platform brand rules for size and clear space.', + illustration_salad: { + value: salad.at(0.922), + description: '⚠️ Use only for illustrations.', }, - brand_linkedIn: { - value: '#0a66c2', - description: 'Official LinkedIn brand fill for logos and icons in approved placements; follow the platform brand rules for size and clear space.', + illustration_violet: { + value: violet.at(0.709), + description: '⚠️ Use only for illustrations.', }, - brand_twitter: { - value: '#1d9bf0', - description: 'Official Twitter brand fill for logos and icons in approved placements; follow the platform brand rules for size and clear space.', + illustration_yellow: { + value: yellow.at(0.924), + description: '⚠️ Use only for illustrations.', }, - brand_google_blue: { value: '#1a0dab', description: 'Google brand color for the link.' }, - brand_google_green: { - value: '#016723', - description: 'Google green brand color for the link.', + keyboard_focus_invalid_outline: { + value: error.opaqueAt(L_BORDER_FOCUS), + description: 'Color for keyboard focus outline styles for elements with invalid state.', }, - brand_google_my_business: { - value: '#1a73e8', - description: 'Official Google My Business brand fill for logos and icons in approved placements; follow Google brand guidelines for size and clear space.', + keyboard_focus_invert_outline: { + value: 'oklch(1 0 0 / 0.7)', + description: 'Color for keyboard focus outline styles to use on the dark and color background.', }, keyboard_focus_outline: { value: focus.opaqueAt(L_BORDER_FOCUS), description: 'Color for default keyboard focus outline styles.', }, - keyboard_focus_invalid_outline: { - value: error.opaqueAt(L_BORDER_FOCUS), - description: 'Color for keyboard focus outline styles for elements with invalid state.', - }, keyboard_focus_valid_outline: { value: success.opaqueAt(L_BORDER_FOCUS), description: 'Color for keyboard focus outline styles for elements with valid state.', }, - keyboard_focus_invert_outline: { - value: 'oklch(1 0 0 / 0.7)', - description: 'Color for keyboard focus outline styles to use on the dark and color background.', + neighbor_location_invert: { + value: 'oklch(0 0 0 / 0.5)', + description: 'Inverted border of the components that are combined with neighbor-location property.', }, - overlay_primary: { - value: neutral.opaqueAt(0.74), - description: 'Use for cover the content under the modal dialogs.', + neighbor_location_neutral: { + value: 'oklch(1 0 0 / 0.5)', + description: 'Neutral border of the components that are combined with neighbor-location property.', }, - overlay_secondary: { - value: neutral.opaqueAt(0.8), - description: 'Use for the secondary modal dialogs that were opened upon the other modal dialogs.', + notice_bubble_bg_DEFAULT: { + value: '{semanticTokens.colors.bg_primary_invert_DEFAULT}', + description: 'Background of the NoticeBubble.', + }, + notice_bubble_bg_critical: { + value: '{semanticTokens.colors.bg_primary_critical}', + description: 'Critical background of the NoticeBubble.', }, overlay_limitation_primary: { value: `oklch(from ${neutral.at(L_BG_SECONDARY)} l c h / 0.85)`, @@ -1118,342 +1243,113 @@ export const theme: Theme = { value: 'oklch(1 0 0 / 0.85)', description: 'Use as a secondary cover of the content under the messages about limitations.', }, - tooltip_default: { - value: neutral.at(L_BG_PRIMARY), - description: 'Default Tooltip background.', + overlay_primary: { + value: neutral.opaqueAt(0.74), + description: 'Use for cover the content under the modal dialogs.', }, - tooltip_warning: { - value: error.at(L_BG_LIGHT), - description: 'Warning Tooltip background.', + overlay_secondary: { + value: neutral.opaqueAt(0.8), + description: 'Use for the secondary modal dialogs that were opened upon the other modal dialogs.', }, - tooltip_invert: { - value: neutral.at(L_INV_BG_PRIMARY), - description: 'Inverted version of the default Tooltip background.', + page_bg: { value: neutral.at(0.97), + description: 'Background fill for the whole product page.', }, - neighbor_location_neutral: { - value: 'oklch(1 0 0 / 0.5)', - description: 'Neutral border of the components that are combined with neighbor-location property.', + pills_bg_hover: { + value: '{semanticTokens.colors.bg_secondary_neutral_DEFAULT}', + description: 'Hover state of the Pills background.', }, - neighbor_location_invert: { - value: 'oklch(0 0 0 / 0.5)', - description: 'Inverted border of the components that are combined with neighbor-location property.', - }, - scroll_area_shadow_left: { - value: `linear-gradient(to right, oklch(from ${colors.gray['800'].value} l c h / 0.08) 20.55%, transparent 100%)`, - description: 'Left-to-right fade shadow for the ScrollArea.', - }, - scroll_area_shadow_right: { - value: `linear-gradient(to left, oklch(from ${colors.gray['800'].value} l c h / 0.08) 20.55%, transparent 100%)`, - description: 'Right-to-left fade shadow for the ScrollArea.', - }, - scroll_area_shadow_top: { - value: `linear-gradient(to bottom, oklch(from ${colors.gray['800'].value} l c h / 0.08) 20.55%, transparent 100%)`, - description: 'Top-to-bottom fade shadow for the ScrollArea.', - }, - scroll_area_shadow_bottom: { - value: `linear-gradient(to top, oklch(from ${colors.gray['800'].value} l c h / 0.08) 20.55%, transparent 100%)`, - description: 'Bottom-to-top fade shadow for the ScrollArea.', - }, - scroll_area_dropdown_menu_left: { - value: 'linear-gradient(to right, {baseTokens.colors.white} 34.38%, transparent 100%)', - description: 'Left-to-right fade shadow for the ScrollArea inside the DropdownMenu.', - }, - scroll_area_dropdown_menu_right: { - value: 'linear-gradient(to left, {baseTokens.colors.white} 34.38%, transparent 100%)', - description: 'Right-to-left fade shadow for the ScrollArea inside the DropdownMenu.', - }, - scroll_area_dropdown_menu_bottom: { - value: 'linear-gradient(to top, {baseTokens.colors.white} 34.38%, transparent 100%)', - description: 'Bottom-to-top fade shadow for the ScrollArea inside the DropdownMenu.', - }, - scroll_area_dropdown_menu_top: { - value: 'linear-gradient(to bottom, {baseTokens.colors.white} 34.38%, transparent 100%)', - description: 'Top-to-bottom fade shadow for the ScrollArea inside the DropdownMenu.', - }, - scroll_bar_background: { - value: neutral.opaqueAt(L_BORDER_PRIMARY), - description: 'Background color for ScrollBar.', - }, - tag_primary_gray_normal: { - value: '#ecedec', - description: 'Gray background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the gray-500 color with 0.2 opacity on the white background underneath.', - }, - tag_primary_gray_hover_active: { - value: '#e2e3e2', - description: 'Gray background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the gray-500 color with 0.3 opacity on the white background underneath.', - }, - tag_primary_gray_text: { - value: '#6a6c6a', - description: 'Gray text for the primary gray tag.', - }, - tag_primary_blue_normal: { - value: '#e7e5ff', - description: 'Blue background color for primary tag. It’s built with CSS filter brightness(150%) that was applied to blue-500 color with 0.2 opacity on the white background underneath.', - }, - tag_primary_blue_hover_active: { - value: '#dcd8ff', - description: 'Blue background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the blue-500 color with 0.3 opacity on the white background underneath. ', - }, - tag_primary_blue_text: { - value: '#5c53d9', - description: 'Blue text for the primary blue tag.', - }, - tag_primary_green_normal: { - value: '#ccf4e8', - description: 'Green background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the green-500 color with 0.2 opacity on the white background underneath.', - }, - tag_primary_green_hover_active: { - value: '#b3eedd', - description: 'Green background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the green-500 color with 0.3 opacity on the white background underneath.', - }, - tag_primary_green_text: { - value: '#00845f', - description: 'Green text for the primary green tag.', - }, - tag_primary_orange_normal: { - value: '#ffdecc', - description: 'Orange background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the orange-500 color with 0.2 opacity on the white background underneath.', - }, - tag_primary_orange_hover_active: { - value: '#ffceb3', - description: 'Orange background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the orange-500 color with 0.3 opacity on the white background underneath.', - }, - tag_primary_orange_text: { - value: '#b83c00', - description: 'Orange text for the primary orange tag.', - }, - tag_primary_red_normal: { - value: '#ffd3d4', - description: 'Red background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the red-500 color with 0.2 opacity on the white background underneath.', - }, - tag_primary_red_hover_active: { - value: '#ffbdbf', - description: 'Red background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the red-500 color with 0.3 opacity on the white background underneath.', - }, - tag_primary_red_text: { - value: '#c7161b', - description: 'Red text for the primary red tag.', - }, - tag_primary_violet_normal: { - value: '#f2d8ff', - description: 'Violet background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the violet-500 color with 0.2 opacity on the white background underneath.', - }, - tag_primary_violet_hover_active: { - value: '#ecc5ff', - description: 'Violet background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the violet-500 color with 0.3 opacity on the white background underneath.', - }, - tag_primary_violet_text: { - value: '#8029ec', - description: 'Violet text for the primary violet tag.', - }, - tag_primary_yellow_normal: { - value: '#fde5cc', - description: 'Yellow background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the yellow-500 color with 0.2 opacity on the white background underneath.', - }, - tag_primary_yellow_hover_active: { - value: '#fcd8b3', - description: 'Yellow background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the yellow-500 color with 0.3 opacity on the white background underneath.', - }, - tag_primary_yellow_text: { - value: '#a35400', - description: 'Yellow text for the primary yellow tag.', - }, - tag_primary_white_normal: { - value: 'rgba(255, 255, 255, 0.15)', - description: 'Primary tag on bold or dark backgrounds—translucent fill for contrast in the normal state.', - }, - tag_primary_white_hover_active: { - value: 'rgba(255, 255, 255, 0.3)', - description: 'Hover and active (selected) state of the primary white tag.', - }, - tag_primary_white_text: { - value: '#ffffff', - description: 'White text for the primary white tag.', - }, - tag_secondary_normal: { - value: '#ffffff', - description: 'Background color for the default secondary tag.', - }, - tag_secondary_hover_active: { - value: '#f4f5f5', - description: 'Hover and active (selected) states of the background color for the default secondary tag.', - }, - tag_secondary_white_normal: { - value: 'rgba(255, 255, 255, 0)', - description: 'Secondary/outline tag on bold or dark backgrounds—minimal fill in the normal state.', - }, - tag_secondary_white_hover_active: { - value: 'rgba(255, 255, 255, 0.1)', - description: 'Active state of the secondary white tag.', - }, - tag_secondary_white_text: { - value: '#ffffff', - description: 'White text for the secondary white tag.', - }, - tag_secondary_gray_text: { - value: '#6a6c6a', - description: 'Gray text for the default secondary tag.', - }, - chart_palette_order_1: { - value: colors.blue['400'].value, - description: '1 color in the default list of colors for charts.', - }, - chart_palette_order_2: { - value: colors.green['200'].value, - description: '2 color in the default list of colors for charts.', - }, - chart_palette_order_3: { - value: colors.violet['300'].value, - description: '3 color in the default list of colors for charts.', - }, - chart_palette_order_4: { - value: colors.yellow['200'].value, - description: '4 color in the default list of colors for charts.', - }, - chart_palette_order_5: { - value: colors.red['300'].value, - description: '5 color in the default list of colors for charts.', - }, - chart_palette_order_6: { - value: colors.blue['200'].value, - description: '6 color in the default list of colors for charts.', - }, - chart_palette_order_7: { - value: colors.pink['300'].value, - description: '7 color in the default list of colors for charts.', - }, - chart_palette_order_8: { - value: colors.salad['200'].value, - description: '8 color in the default list of colors for charts.', - }, - chart_palette_order_9: { - value: colors.blue['500'].value, - description: '9 color in the default list of colors for charts.', - }, - chart_palette_order_10: { - value: colors.green['300'].value, - description: '10 color in the default list of colors for charts.', - }, - chart_palette_order_11: { - value: colors.yellow['300'].value, - description: '11 color in the default list of colors for charts.', - }, - chart_palette_order_12: { - value: colors.pink['200'].value, - description: '12 color in the default list of colors for charts.', - }, - chart_palette_order_13: { - value: colors.salad['400'].value, - description: '13 color in the default list of colors for charts.', - }, - chart_palette_order_14: { - value: colors.violet['200'].value, - description: '14 color in the default list of colors for charts.', - }, - chart_palette_order_15: { - value: colors.red['400'].value, - description: '15 color in the default list of colors for charts.', - }, - chart_palette_order_16: { - value: colors.green['300'].value, - description: '16 color in the default list of colors for charts.', - }, - chart_palette_order_17: { - value: colors.blue['200'].value, - description: '17 color in the default list of colors for charts.', - }, - chart_palette_order_18: { - value: colors.salad['300'].value, - description: '18 color in the default list of colors for charts.', - }, - chart_palette_order_19: { - value: colors.yellow['400'].value, - description: '19 color in the default list of colors for charts.', + pills_bg_normal: { + value: '{semanticTokens.colors.bg_primary_neutral_DEFAULT}', + description: 'Background of the Pills in its normal state.', }, - chart_palette_order_20: { - value: colors.red['200'].value, - description: '20 color in the default list of colors for charts.', + pills_bg_selected: { + value: '{semanticTokens.colors.bg_secondary_info_DEFAULT}', + description: 'Background of the selected Pill.', }, - chart_palette_order_21: { - value: colors.yellow['500'].value, - description: '21 color in the default list of colors for charts.', + pills_border_DEFAULT: { + value: '{semanticTokens.colors.border_primary_DEFAULT}', + description: 'Border color of the Pills in its normal state.', }, - chart_palette_order_22: { - value: colors.violet['400'].value, - description: '22 color in the default list of colors for charts.', + pills_border_selected: { + value: '{semanticTokens.colors.border_info_active}', + description: 'Border color of the selected Pill.', }, - chart_palette_order_23: { - value: colors.pink['400'].value, - description: '23 color in the default list of colors for charts.', + progress_bar_bg_DEFAULT: { + value: neutral.at(L_BG_LIGHT), + description: 'Background color of the ProgressBar.', }, - chart_palette_order_24: { - value: colors.salad['500'].value, - description: '24 color in the default list of colors for charts.', + progress_bar_bg_hover: { + value: neutral.at(L_BG_MEDIUM), + description: 'Hover state of the background color of the ProgressBar.', }, - chart_palette_order_total_amount: { - value: colors.gray['400'].value, - description: 'Use it to show total value on the chart.', + progress_bar_bg_invert_DEFAULT: { + value: neutral.at(L_INV_BG_LIGHT), + description: 'Inverted version of the background color of the ProgressBar.', }, - chart_palette_order_other_data: { - value: colors.gray['200'].value, - description: 'Use it to indicate voids, missing or some other data on the chart.', + progress_bar_bg_invert_hover: { + value: neutral.at(L_INV_BG_MEDIUM), + description: 'Hover state for the inverted version of the background color of the ProgressBar.', }, - chart_palette_order_null: { - value: colors.gray['100'].value, - description: 'Use it to show null value on the chart.', + progress_bar_pattern_gradient: { + value: 'linear-gradient(-45deg, oklch(0 0 0 / 0.1) 25%, {semanticTokens.colors.progress.bar.bg} 0%, {semanticTokens.colors.progress.bar.bg} 50%, oklch(0 0 0 / 0.1) 0%, oklch(0 0 0 / 0.1) 75%, {semanticTokens.colors.progress.bar.bg} 0%)', + description: 'Null value gradient for the ProgressBar.', }, - chart_grid_line: { - value: neutral.at(L_BORDER_SECONDARY), - description: 'Grid and axis guide lines for charts.', + + progress_bar_value_bg: { + value: 'oklch(1 0 0)', + description: 'Base value background for the ProgressBar. It is used to create gradients for the values.', }, - chart_grid_x_axis: { - value: neutral.at(L_BORDER_PRIMARY), - description: 'X-axis line on the chart grid.', + progress_bar_value_gradient: { + value: `linear-gradient(-45deg, oklch(from ${highlight.at(0.74)} calc(l - 0.05) c h) 25%, ${highlight.at(0.74)} 0%, ${highlight.at(0.74)} 50%, oklch(from ${highlight.at(0.74)} calc(l - 0.05) c h) 0%, oklch(from ${highlight.at(0.74)} calc(l - 0.05) c h) 75%, ${highlight.at(0.74)} 0%)`, + description: 'Value with gradient for the ProgressBar.', }, - chart_grid_y_accent_hover_line: { - value: neutral.at(L_BORDER_PRIMARY), - description: 'Accent line for the hover state on the chart grid.', + radio_bg_normal: { + value: '{semanticTokens.colors.bg_primary_neutral_DEFAULT}', + description: 'Background color of the Radio.', }, - chart_grid_text_label: { - value: neutral.opaqueAt(L_TEXT_SECONDARY), - description: 'Text label on the chart grid.', + radio_bg_selected: { + value: '{semanticTokens.colors.control_primary_info}', + description: 'Selected state of the Radio background.', }, - chart_grid_bar_chart_hover: { - value: neutral.opaqueAt(L_BG_PRIMARY_HOVER), - description: 'Background color for the hover state of a bar on the chart grid.', + radio_border: { + value: '{semanticTokens.colors.border_primary_DEFAULT}', + description: 'Border color of the Radio.', }, - chart_grid_bar_chart_base_bg: { - value: neutral.at(L_BG_LIGHT), - description: 'Default background color of a bar in the BarChart.', + scroll_area_dropdown_menu_bottom: { + value: 'linear-gradient(to top, {baseTokens.colors.white} 34.38%, transparent 100%)', + description: 'Bottom-to-top fade shadow for the ScrollArea inside the DropdownMenu.', }, - chart_grid_period_bg: { - value: neutral.at(L_BG_LIGHT), - description: 'Use for highlighting a period on the chart grid.', + scroll_area_dropdown_menu_left: { + value: 'linear-gradient(to right, {baseTokens.colors.white} 34.38%, transparent 100%)', + description: 'Left-to-right fade shadow for the ScrollArea inside the DropdownMenu.', }, - chart_grid_period_pattern: { - value: neutral.at(L_BORDER_SECONDARY), - description: 'Stripe color for diagonal pattern background.', + scroll_area_dropdown_menu_right: { + value: 'linear-gradient(to left, {baseTokens.colors.white} 34.38%, transparent 100%)', + description: 'Right-to-left fade shadow for the ScrollArea inside the DropdownMenu.', }, - chart_grid_border: { - value: '{baseTokens.colors.white}', - description: 'Border for distinguishing data sets and chart dots on the chart grid.', + scroll_area_dropdown_menu_top: { + value: 'linear-gradient(to bottom, {baseTokens.colors.white} 34.38%, transparent 100%)', + description: 'Top-to-bottom fade shadow for the ScrollArea inside the DropdownMenu.', }, - chart_x_axis_accent_period_active: { - value: neutral.opaqueAt(L_BG_LIGHT), - description: 'Background color for the clickable date on the X-axis of the chart grid.', + scroll_area_shadow_bottom: { + value: `linear-gradient(to top, oklch(from ${colors.gray['800'].value} l c h / 0.08) 20.55%, transparent 100%)`, + description: 'Bottom-to-top fade shadow for the ScrollArea.', }, - chart_x_axis_accent_data_start_tracking: { - value: success.opaqueAt(L_BG_LIGHT), - description: 'Background color for the "Start tracking" date on the X-axis of the chart grid.', + scroll_area_shadow_left: { + value: `linear-gradient(to right, oklch(from ${colors.gray['800'].value} l c h / 0.08) 20.55%, transparent 100%)`, + description: 'Left-to-right fade shadow for the ScrollArea.', }, - header_bg: { value: '{semanticTokens.colors.page.bg}' }, - header_border_primary: { value: '{semanticTokens.colors.border.primary}' }, - header_border_secondary: { value: '{semanticTokens.colors.border.primary}' }, - page_bg: { value: neutral.at(0.97), - description: 'Background fill for the whole product page.', + scroll_area_shadow_right: { + value: `linear-gradient(to left, oklch(from ${colors.gray['800'].value} l c h / 0.08) 20.55%, transparent 100%)`, + description: 'Right-to-left fade shadow for the ScrollArea.', }, - footer_bg: { value: '{semanticTokens.colors.page.bg}', - description: 'Background fill for the product page footer.', + scroll_area_shadow_top: { + value: `linear-gradient(to bottom, oklch(from ${colors.gray['800'].value} l c h / 0.08) 20.55%, transparent 100%)`, + description: 'Top-to-bottom fade shadow for the ScrollArea.', + }, + scroll_bar_background: { + value: neutral.opaqueAt(L_BORDER_PRIMARY), + description: 'Background color for ScrollBar.', }, sidebar_nav_bg: { value: '{semanticTokens.colors.page.bg}', description: 'Background fill for the product page sidebar.', @@ -1461,233 +1357,269 @@ export const theme: Theme = { sidebar_nav_border: { value: '{semanticTokens.colors.border.primary}', description: 'Color for the border of the page sidebar.', }, - sidebar_nav_control_hover: { - value: neutral.opaqueAt(L_BG_SECONDARY_HOVER), - description: 'Sidebar navigation row hover background.', - }, sidebar_nav_control_active: { value: neutral.opaqueAt(L_BG_SECONDARY_ACTIVE), description: 'Sidebar navigation row active background.', }, - sidebar_nav_control_text_normal: { - value: neutral.at(L_TEXT_SECONDARY), - description: 'Sidebar navigation label color.', - }, - sidebar_nav_control_text_active: { - value: neutral.at(L_TEXT_PRIMARY), - description: 'Sidebar navigation label color for the active item.', - }, - sidebar_nav_control_icon_normal: { - value: neutral.at(L_ICON_PRIMARY), - description: 'Sidebar navigation icon color.', + sidebar_nav_control_hover: { + value: neutral.opaqueAt(L_BG_SECONDARY_HOVER), + description: 'Sidebar navigation row hover background.', }, sidebar_nav_control_icon_active: { value: neutral.at(L_ICON_PRIMARY_HOVER), description: 'Sidebar navigation icon color for the active item.', }, - slider_rating_normal: { - value: neutral.at(L_ICON_SECONDARY), - description: 'Icon color for the SliderRating component in its normal state.', - }, - slider_rating_hover_active: { - value: highlight.at(L_ICON_SECONDARY_HOVER), - description: 'Icon color for the SliderRating component in its hovered and active states.', - }, - control_switch_bg_DEFAULT: { - value: '{baseTokens.colors.gray.300}', - description: 'Subtle background of the Switch control.', - }, - control_switch_bg_info_active: { - value: '{semanticTokens.colors.control_primary_info_DEFAULT}', - description: 'Active background of the Switch control.', + sidebar_nav_control_icon_normal: { + value: neutral.at(L_ICON_PRIMARY), + description: 'Sidebar navigation icon color.', }, - control_switch_bg_success_active: { - value: '{semanticTokens.colors.control_primary_success_DEFAULT}', - description: 'Active background of the Switch control.', + sidebar_nav_control_text_active: { + value: neutral.at(L_TEXT_PRIMARY), + description: 'Sidebar navigation label color for the active item.', }, - control_switch_handle: { - value: '{baseTokens.colors.gray.white}', - description: 'Handle color of the Switch control.', + sidebar_nav_control_text_normal: { + value: neutral.at(L_TEXT_SECONDARY), + description: 'Sidebar navigation label color.', }, - dot_notification_bg: { - value: '{semanticTokens.colors.icon_primary_warning_DEFAULT}', - description: 'Background color of the notification Dot.', + skeleton_bg_DEFAULT: { + value: neutral.at(L_BG_SKELETON), + description: 'Default color for the Skeleton.', }, - dot_notification_text: { - value: '{semanticTokens.colors.text_primary_invert}', - description: 'Text color of the notification Dot.', + skeleton_bg_invert: { + value: neutral.at(L_INV_BG_SKELETON), + description: 'Inverted version of the default color for the Skeleton.', }, - tooltip_text: { - value: '{semanticTokens.colors.text_primary_DEFAULT}', - description: 'Text color of the default Tooltip.', + spin_bg_DEFAULT: { + value: '{semanticTokens.colors.border_primary_DEFAULT}', + description: 'Track color of the Spin loader.', }, - tooltip_text_invert: { - value: '{semanticTokens.colors.text_primary_invert}', - description: 'Text color of the inverted Tooltip.', + spin_bg_invert: { + value: '{semanticTokens.colors.border_primary_invert}', + description: 'Inverted track color of the Spin loader.', }, tab_line_border_DEFAULT: { value: '{semanticTokens.colors.border_primary_DEFAULT}', description: 'Border color of the TabLine in its normal state.', }, + tab_line_border_active: { + value: '{semanticTokens.colors.border_info_active}', + description: 'Border color of the TabLine in its active state.', + }, tab_line_border_hover: { value: '{semanticTokens.colors.border_primary_DEFAULT}', description: 'Border color of the TabLine in its hover state.', }, - tab_line_border_active: { - value: '{semanticTokens.colors.border_info_active}', - description: 'Border color of the TabLine in its active state.', + table_border_accent: { + value: neutral.opaqueAt(L_BORDER_PRIMARY), + description: 'Accent borders in the Table: for the accordion in the table and for the header of the secondary table.', }, - slider_bar_DEFAULT: { - value: '{semanticTokens.colors.progress_bar_bg_DEFAULT}', - description: 'Background of the Slider bar.', + table_td_cell_DEFAULT: { + value: neutral.at(L_BG_PRIMARY), + description: 'Background of the default cell in the Table.', }, - slider_bar_value: { - value: '{semanticTokens.colors.control_primary_info_DEFAULT}', - description: 'Filled part of the Slider bar.', + table_td_cell_accordion: { + value: neutral.at(L_BG_PRIMARY), + description: 'Background of the cell used for Accordion or actions row, in the Table.', }, - slider_bar_hover: { - value: '{semanticTokens.colors.progress_bar_bg_hover}', - description: 'Hover state of the Slider bar.', + table_td_cell_active: { + value: neutral.at(L_BG_PRIMARY_ACTIVE), + description: 'Background of the default active cell in the Table.', }, - slider_knob_DEFAULT: { - value: '{baseTokens.colors.gray.white}', - description: 'Knob fill color of the Slider.', + table_td_cell_critical_DEFAULT: { + value: error.at(L_BG_SECONDARY), + description: 'Background of the cell with critical information in the Table.', }, - slider_knob_border_DEFAULT: { - value: '{semanticTokens.colors.control_primary_info_DEFAULT}', - description: 'Knob border color of the Slider in its normal state.', + table_td_cell_critical_active: { + value: error.at(L_BG_SECONDARY_ACTIVE), + description: 'Background of the active cell with critical information in the Table.', }, - slider_knob_border_hover: { - value: '{semanticTokens.colors.control_primary_info_hover}', - description: 'Knob border color of the Slider in its hover state.', + table_td_cell_critical_hover: { + value: error.at(L_BG_SECONDARY_HOVER), + description: 'Background of the hovered cell with critical information in the Table.', }, - pills_bg_normal: { - value: '{semanticTokens.colors.bg_primary_neutral_DEFAULT}', - description: 'Background of the Pills in its normal state.', + table_td_cell_hover: { + value: neutral.at(L_BG_PRIMARY_HOVER), + description: 'Background of the default hovered cell in the Table.', }, - pills_border_DEFAULT: { - value: '{semanticTokens.colors.border_primary_DEFAULT}', - description: 'Border color of the Pills in its normal state.', + table_td_cell_new_DEFAULT: { + value: success.at(L_BG_SECONDARY), + description: 'Background of the cell with new information in the Table.', }, - pills_bg_hover: { - value: '{semanticTokens.colors.bg_secondary_neutral_DEFAULT}', - description: 'Hover state of the Pills background.', + table_td_cell_new_active: { + value: success.at(L_BG_SECONDARY_ACTIVE), + description: 'Background of the active cell with new information in the Table.', }, - pills_bg_selected: { - value: '{semanticTokens.colors.bg_secondary_info_DEFAULT}', - description: 'Background of the selected Pill.', + table_td_cell_new_hover: { + value: success.at(L_BG_SECONDARY_HOVER), + description: 'Background of the hovered cell with new information in the Table.', }, - pills_border_selected: { - value: '{semanticTokens.colors.border_info_active}', - description: 'Border color of the selected Pill.', + table_td_cell_selected_DEFAULT: { + value: info.at(L_BG_SECONDARY), + description: 'Background of the selected cell in the Table.', }, - control_text_primary_DEFAULT: { - value: '{semanticTokens.colors.text_primary_DEFAULT}', - description: 'Primary text color for form controls.', + table_td_cell_selected_active: { + value: info.at(L_BG_SECONDARY_ACTIVE), + description: 'Background of the active selected cell in the Table.', }, - control_text_secondary: { - value: '{semanticTokens.colors.text_secondary_DEFAULT}', - description: 'Secondary text color for form controls.', + table_td_cell_selected_hover: { + value: info.at(L_BG_SECONDARY_HOVER), + description: 'Background of the hovered selected cell in the Table.', }, - control_text_tertiary: { - value: '{semanticTokens.colors.text_secondary_DEFAULT}', - description: 'Tertiary text color for form controls.', + table_td_cell_unread: { + value: neutral.at(L_BG_SECONDARY), + description: 'Background of the unread cell in the Table.', }, - control_text_primary_invert: { - value: '{semanticTokens.colors.text_primary_invert}', - description: 'Inverted primary text color for form controls.', + table_td_cell_warning_DEFAULT: { + value: warning.at(L_BG_SECONDARY), + description: 'Background of the cell with warning information in the Table.', }, - control_select_trigger_normal: { + table_td_cell_warning_active: { + value: warning.at(L_BG_SECONDARY_ACTIVE), + description: 'Background of the active cell with warning information in the Table.', + }, + table_td_cell_warning_hover: { + value: warning.at(L_BG_SECONDARY_HOVER), + description: 'Background of the hovered cell with warning information in the Table.', + }, + table_th_gradient: { + value: `linear-gradient(to right, transparent 0%, ${colors.gray['100'].value} 100%)`, + description: 'Background gradient for sorting icon that absolute positioned in the table head.', + }, + table_th_primary_cell_DEFAULT: { + value: neutral.at(L_BG_SECONDARY), + description: 'Background of the header cell in the primary Table.', + }, + table_th_primary_cell_active: { + value: neutral.at(L_BG_SECONDARY_ACTIVE), + description: 'Background of the active header cell in the primary Table.', + }, + table_th_primary_cell_hover: { + value: neutral.at(L_BG_SECONDARY_ACTIVE), + description: 'Background of the hovered header cell in the primary Table.', + }, + table_th_secondary_cell: { + value: neutral.at(L_BG_PRIMARY), + description: 'Background of the header cell in the secondary Table.', + }, + tag_additional_border: { + value: '{semanticTokens.colors.border_primary_DEFAULT}', + description: 'Border color of the additional Tag.', + }, + tag_additional_hover_active: { + value: '{semanticTokens.colors.bg_primary_neutral_hover}', + description: 'Hover and active states of the additional Tag background.', + }, + tag_additional_normal: { + value: '{semanticTokens.colors.bg_primary_neutral_DEFAULT}', + description: 'Background of the additional Tag in its normal state.', + }, + tag_primary_bg_hover: { + value: '{semanticTokens.colors.bg_primary_neutral_hover}', + description: 'Hover state of the primary Tag background.', + }, + tag_primary_bg_normal: { value: '{semanticTokens.colors.bg_primary_neutral_DEFAULT}', - description: 'Background of the Select trigger in its normal state.', + description: 'Background of the primary Tag in its normal state.', }, - control_select_trigger_hover: { - value: '{semanticTokens.colors.bg_primary_neutral_hover}', - description: 'Background of the Select trigger in its hover state.', + tag_primary_blue_hover_active: { + value: '#dcd8ff', + description: 'Blue background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the blue-500 color with 0.3 opacity on the white background underneath. ', }, - control_select_trigger_active: { + tag_primary_blue_normal: { + value: '#e7e5ff', + description: 'Blue background color for primary tag. It’s built with CSS filter brightness(150%) that was applied to blue-500 color with 0.2 opacity on the white background underneath.', + }, + tag_primary_blue_text: { + value: '#5c53d9', + description: 'Blue text for the primary blue tag.', + }, + tag_primary_border: { value: '{semanticTokens.colors.bg_primary_neutral_DEFAULT}', - description: 'Background of the Select trigger in its active state.', + description: 'Border color of the primary Tag.', }, - spin_bg_DEFAULT: { - value: '{semanticTokens.colors.border_primary_DEFAULT}', - description: 'Track color of the Spin loader.', + tag_primary_gray_hover_active: { + value: '#e2e3e2', + description: 'Gray background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the gray-500 color with 0.3 opacity on the white background underneath.', }, - spin_bg_invert: { - value: '{semanticTokens.colors.border_primary_invert}', - description: 'Inverted track color of the Spin loader.', + tag_primary_gray_normal: { + value: '#ecedec', + description: 'Gray background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the gray-500 color with 0.2 opacity on the white background underneath.', }, - illustration_gray: { - value: '{baseTokens.colors.gray.100}', - description: 'Gray fill color for illustrations.', + tag_primary_gray_text: { + value: '#6a6c6a', + description: 'Gray text for the primary gray tag.', }, - illustration_border: { - value: '{baseTokens.colors.gray.500}', - description: 'Border color for illustrations.', + tag_primary_green_hover_active: { + value: '#b3eedd', + description: 'Green background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the green-500 color with 0.3 opacity on the white background underneath.', }, - chart_data_success: { - value: '{baseTokens.colors.green.300}', - description: 'Success data color for charts.', + tag_primary_green_normal: { + value: '#ccf4e8', + description: 'Green background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the green-500 color with 0.2 opacity on the white background underneath.', }, - chart_data_warning: { - value: '{baseTokens.colors.orange.300}', - description: 'Warning data color for charts.', + tag_primary_green_text: { + value: '#00845f', + description: 'Green text for the primary green tag.', }, - chart_data_critical: { - value: '{baseTokens.colors.red.400}', - description: 'Critical data color for charts.', + tag_primary_orange_hover_active: { + value: '#ffceb3', + description: 'Orange background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the orange-500 color with 0.3 opacity on the white background underneath.', }, - wizard_bg: { - value: '{semanticTokens.colors.bg_primary_neutral_DEFAULT}', - description: 'Main background of the Wizard.', + tag_primary_orange_normal: { + value: '#ffdecc', + description: 'Orange background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the orange-500 color with 0.2 opacity on the white background underneath.', }, - wizard_sidebar_bg: { - value: '{semanticTokens.colors.control_primary_advertising_DEFAULT}', - description: 'Background of the Wizard sidebar.', + tag_primary_orange_text: { + value: '#b83c00', + description: 'Orange text for the primary orange tag.', }, - wizard_sidebar_control_DEFAULT: { - value: '{semanticTokens.colors.control_primary_advertising_DEFAULT}', - description: 'Background of the control in the Wizard sidebar in its normal state.', + tag_primary_red_hover_active: { + value: '#ffbdbf', + description: 'Red background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the red-500 color with 0.3 opacity on the white background underneath.', }, - wizard_sidebar_control_hover: { - value: '{semanticTokens.colors.control_primary_advertising_hover}', - description: 'Hover state of the control in the Wizard sidebar.', + tag_primary_red_normal: { + value: '#ffd3d4', + description: 'Red background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the red-500 color with 0.2 opacity on the white background underneath.', }, - wizard_sidebar_control_active: { - value: '{semanticTokens.colors.control_primary_advertising_active}', - description: 'Active state of the control in the Wizard sidebar.', + tag_primary_red_text: { + value: '#c7161b', + description: 'Red text for the primary red tag.', }, - wizard_sidebar_text_primary: { - value: '{semanticTokens.colors.text_primary_invert}', - description: 'Primary text color in the Wizard sidebar.', + tag_primary_violet_hover_active: { + value: '#ecc5ff', + description: 'Violet background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the violet-500 color with 0.3 opacity on the white background underneath.', }, - wizard_sidebar_text_secondary: { - value: '{semanticTokens.colors.text_secondary_invert}', - description: 'Secondary text color in the Wizard sidebar.', + tag_primary_violet_normal: { + value: '#f2d8ff', + description: 'Violet background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the violet-500 color with 0.2 opacity on the white background underneath.', }, - dropdown_menu_item_selected_border: { - value: '{semanticTokens.colors.control_primary_info_DEFAULT}', - description: 'Border color of the selected item in the DropdownMenu.', + tag_primary_violet_text: { + value: '#8029ec', + description: 'Violet text for the primary violet tag.', }, - notice_bubble_bg_DEFAULT: { - value: '{semanticTokens.colors.bg_primary_invert_DEFAULT}', - description: 'Background of the NoticeBubble.', + tag_primary_white_hover_active: { + value: 'rgba(255, 255, 255, 0.3)', + description: 'Hover and active (selected) state of the primary white tag.', }, - notice_bubble_bg_critical: { - value: '{semanticTokens.colors.bg_primary_critical}', - description: 'Critical background of the NoticeBubble.', + tag_primary_white_normal: { + value: 'rgba(255, 255, 255, 0.15)', + description: 'Primary tag on bold or dark backgrounds—translucent fill for contrast in the normal state.', }, - tag_primary_bg_normal: { - value: '{semanticTokens.colors.bg_primary_neutral_DEFAULT}', - description: 'Background of the primary Tag in its normal state.', + tag_primary_white_text: { + value: '#ffffff', + description: 'White text for the primary white tag.', }, - tag_primary_bg_hover: { - value: '{semanticTokens.colors.bg_primary_neutral_hover}', - description: 'Hover state of the primary Tag background.', + tag_primary_yellow_hover_active: { + value: '#fcd8b3', + description: 'Yellow background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the yellow-500 color with 0.3 opacity on the white background underneath.', }, - tag_primary_border: { - value: '{semanticTokens.colors.bg_primary_neutral_DEFAULT}', - description: 'Border color of the primary Tag.', + tag_primary_yellow_normal: { + value: '#fde5cc', + description: 'Yellow background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the yellow-500 color with 0.2 opacity on the white background underneath.', + }, + tag_primary_yellow_text: { + value: '#a35400', + description: 'Yellow text for the primary yellow tag.', }, tag_secondary_border_DEFAULT: { value: '{semanticTokens.colors.border_primary_DEFAULT}', @@ -1697,133 +1629,185 @@ export const theme: Theme = { value: '{semanticTokens.colors.border_secondary_invert}', description: 'Inverted border color of the secondary Tag.', }, - tag_additional_normal: { - value: '{semanticTokens.colors.bg_primary_neutral_DEFAULT}', - description: 'Background of the additional Tag in its normal state.', + tag_secondary_gray_text: { + value: '#6a6c6a', + description: 'Gray text for the default secondary tag.', }, - tag_additional_hover_active: { - value: '{semanticTokens.colors.bg_primary_neutral_hover}', - description: 'Hover and active states of the additional Tag background.', + tag_secondary_hover_active: { + value: '#f4f5f5', + description: 'Hover and active (selected) states of the background color for the default secondary tag.', }, - tag_additional_border: { - value: '{semanticTokens.colors.border_primary_DEFAULT}', - description: 'Border color of the additional Tag.', + tag_secondary_normal: { + value: '#ffffff', + description: 'Background color for the default secondary tag.', }, - checkbox_border: { - value: '{semanticTokens.colors.border_primary_DEFAULT}', - description: 'Border color of the Checkbox.', + tag_secondary_white_hover_active: { + value: 'rgba(255, 255, 255, 0.1)', + description: 'Active state of the secondary white tag.', }, - checkbox_bg_normal: { - value: '{semanticTokens.colors.bg_primary_neutral_DEFAULT}', - description: 'Background color of the Checkbox.', + tag_secondary_white_normal: { + value: 'rgba(255, 255, 255, 0)', + description: 'Secondary/outline tag on bold or dark backgrounds—minimal fill in the normal state.', }, - checkbox_bg_selected: { - value: '{semanticTokens.colors.control_primary_info_DEFAULT}', - description: 'Background color of the checked Checkbox.', + tag_secondary_white_text: { + value: '#ffffff', + description: 'White text for the secondary white tag.', }, - checkbox_button_border_DEFAULT: { - value: '{semanticTokens.colors.border_primary_DEFAULT}', - description: 'Border color of the Checkbox button in its normal state.', + text_advertising: { + value: advertising.at(L_TEXT_PRIMARY), + description: 'Promotional or sponsored emphasis (ads, marketing callouts)—use sparingly so it stays noticeable.', }, - checkbox_button_border_selected: { - value: '{semanticTokens.colors.border_info_active}', - description: 'Border color of the Checkbox button in its active state.', + text_critical_DEFAULT: { + value: error.at(L_TEXT_SECONDARY), + description: 'Text associated with critical states and data.', }, - checkbox_button_bg_normal: { - value: '{semanticTokens.colors.bg_primary_neutral_DEFAULT}', - description: 'Normal state of the Checkbox button background.', + text_critical_hover_active: { + value: error.at(L_TEXT_SECONDARY_HOVER), + description: 'Hover and active states for the text associated with critical states and data.', }, - checkbox_button_bg_hover: { - value: '{semanticTokens.colors.control_secondary_info_DEFAULT}', - description: 'Hover state of the Checkbox button background.', + text_hint_DEFAULT: { + value: neutral.opaqueAt(L_TEXT_SECONDARY), + description: 'Supplementary helper text near controls (short guidance), distinct from placeholder text inside inputs.', }, - checkbox_button_bg_selected_DEFAULT: { - value: '{semanticTokens.colors.control_secondary_info_active}', - description: 'Selected state of the Checkbox button background.', + text_hint_hover_active: { + value: neutral.opaqueAt(L_TEXT_SECONDARY_HOVER), + description: 'Hover and active states of the hint link text.', }, - checkbox_button_bg_selected_hover: { - value: '{semanticTokens.colors.control_secondary_info_active}', - description: 'Hover for a selected state of the Checkbox button background.', + text_hint_invert_DEFAULT: { + value: neutral.at(L_INV_TEXT_SECONDARY), + description: 'Inverted version of the hint link text.', }, - radio_border: { - value: '{semanticTokens.colors.border_primary_DEFAULT}', - description: 'Border color of the Radio.', + text_hint_invert_hover_active: { + value: neutral.at(L_INV_TEXT_SECONDARY_HOVER), + description: 'Hover and active states of the inverted version of the hint link text.', }, - radio_bg_normal: { - value: '{semanticTokens.colors.bg_primary_neutral_DEFAULT}', - description: 'Background color of the Radio.', + text_large_critical_DEFAULT: { + value: '{semanticTokens.colors.text.critical}', + description: 'Text with font-size ≥20px associated with critical states and data.', + }, + text_large_critical_hover_active: { + value: '{semanticTokens.colors.text.critical.hover.active}', + description: 'Hover and active states of the text with font-size ≥20px associated with critical states and data.', + }, + text_large_info_DEFAULT: { + value: info.at(L_TEXT_SECONDARY), + description: 'Link text with font-size ≥20px.', + }, + text_large_info_hover_active: { + value: info.at(L_TEXT_SECONDARY_HOVER), + description: 'Hover and active states of the link text with font-size ≥20px.', + }, + text_large_secondary: { + value: '{semanticTokens.colors.text.secondary}', + description: 'Secondary text. Use with font-size ≥20px.', + }, + text_large_success_DEFAULT: { + value: '{semanticTokens.colors.text.success}', + description: 'Text with font-size ≥20px associated with success states and data.', + }, + text_large_success_hover_active: { + value: '{semanticTokens.colors.text.success.hover.active}', + description: 'Hover and active states of the text with font-size ≥20px associated with success states and data.', + }, + text_link_DEFAULT: { + value: link.at(L_TEXT_SECONDARY), + description: 'Default interactive link color for unfollowed links.', + }, + text_link_hover_active: { + value: link.at(L_TEXT_SECONDARY_HOVER), + description: 'Hover and active states for the link text.', + }, + text_link_invert_DEFAULT: { + value: link.at(L_INV_TEXT_SECONDARY), + description: 'Inverted version of the link text. Use on dark background only.', }, - radio_bg_selected: { - value: '{semanticTokens.colors.control_primary_info}', - description: 'Selected state of the Radio background.', + text_link_invert_hover: { + value: link.at(L_INV_TEXT_SECONDARY_HOVER), + description: 'Hover and active states of the inverted version of the link text. Use on dark background only.', }, - opacity_fader_primary: { - value: '0.32', - description: 'Primary opacity for content fader overlays.', + text_link_visited: { + value: violet.at(L_TEXT_SECONDARY), + description: 'Visited link state so users can tell visited destinations apart from default links.', }, - opacity_fader_secondary: { - value: '0.26', - description: 'Secondary opacity for content fader overlays.', + text_placeholder: { + value: neutral.opaqueAt(L_TEXT_PLACEHOLDER), + description: 'Placeholder text color for inputs and fields.', }, - opacity_limit_fader_primary: { - value: '0.85', - description: 'Primary opacity for limitation fader overlays.', + text_primary_DEFAULT: { + value: neutral.opaqueAt(L_TEXT_PRIMARY), + description: 'Default body and UI copy; strongest reading emphasis for primary content.', }, - opacity_limit_fader_secondary: { - value: '0.851', - description: 'Secondary opacity for limitation fader overlays.', + text_primary_invert: { + value: neutral.opaqueInvAt(L_INV_TEXT_PRIMARY), + description: 'Inverted version of the primary text.', }, - badge_bg_admin: { - value: '{baseTokens.colors.blue.400}', - description: 'Background color of the admin Badge.', + text_secondary_DEFAULT: { + value: neutral.opaqueAt(L_TEXT_SECONDARY), + description: 'Supporting text: captions, metadata, hints in flowing copy—visually quieter than primary body text.', }, - badge_bg_alpha: { - value: '{baseTokens.colors.red.400}', - description: 'Background color of the alpha Badge.', + text_secondary_invert: { + value: neutral.opaqueInvAt(L_INV_TEXT_SECONDARY), + description: 'Inverted version of the secondary text.', }, - badge_bg_beta: { - value: '{baseTokens.colors.orange.400}', - description: 'Background color of the beta Badge.', + text_success_DEFAULT: { + value: success.at(L_TEXT_SECONDARY), + description: 'Text associated with success states and data.', }, - badge_bg_new: { - value: '{baseTokens.colors.green.400}', - description: 'Background color of the new Badge.', + text_success_hover_active: { + value: success.at(L_TEXT_SECONDARY_HOVER), + description: 'Hover and active states for the text associated with success states and data.', }, - badge_bg_soon: { - value: '{baseTokens.colors.gray.400}', - description: 'Background color of the soon Badge.', + tooltip_bg_default: { + value: neutral.at(L_BG_PRIMARY), + description: 'Default Tooltip background.', }, - badge_bg_unavailable: { - value: '{baseTokens.colors.gray.100}', - description: 'Background color of the unavailable Badge.', + tooltip_bg_invert: { + value: neutral.at(L_INV_BG_PRIMARY), + description: 'Inverted version of the default Tooltip background.', }, - badge_bg_invert: { - value: '{baseTokens.colors.gray.white}', - description: 'Background color of the inverted Badge.', + tooltip_bg_warning: { + value: error.at(L_BG_LIGHT), + description: 'Warning Tooltip background.', }, - badge_text_primary_DEFAULT: { - value: '{semanticTokens.colors.text_primary_DEFAULT}', - description: 'Primary text color for Badge.', + tooltip_border_invert: { + value: neutral.opaqueInvAt(L_INV_BORDER_SECONDARY), + description: 'Border of the Tooltip with dark theme.', }, - badge_text_secondary: { - value: '{semanticTokens.colors.text_secondary_DEFAULT}', - description: 'Secondary text color for Badge.', + tooltip_text: { + value: '{semanticTokens.colors.text_primary_DEFAULT}', + description: 'Text color of the default Tooltip.', }, - badge_text_primary_invert: { + tooltip_text_invert: { value: '{semanticTokens.colors.text_primary_invert}', - description: 'Inverted primary text color for Badge.', + description: 'Text color of the inverted Tooltip.', }, - feature_popover_text_DEFAULT: { - value: '{semanticTokens.colors.text_primary_DEFAULT}', - description: 'Text color of the FeaturePopover.', + wizard_bg: { + value: '{semanticTokens.colors.bg_primary_neutral_DEFAULT}', + description: 'Main background of the Wizard.', }, - feature_popover_dot_DEFAULT: { - value: '{semanticTokens.colors.bg_primary_highlight}', - description: 'Color of the outer border of the FeaturePopover.Spot.', + wizard_sidebar_bg: { + value: '{semanticTokens.colors.control_primary_advertising_DEFAULT}', + description: 'Background of the Wizard sidebar.', }, - feature_popover_text_invert: { + wizard_sidebar_control_DEFAULT: { + value: '{semanticTokens.colors.control_primary_advertising_DEFAULT}', + description: 'Background of the control in the Wizard sidebar in its normal state.', + }, + wizard_sidebar_control_active: { + value: '{semanticTokens.colors.control_primary_advertising_active}', + description: 'Active state of the control in the Wizard sidebar.', + }, + wizard_sidebar_control_hover: { + value: '{semanticTokens.colors.control_primary_advertising_hover}', + description: 'Hover state of the control in the Wizard sidebar.', + }, + wizard_sidebar_text_primary: { value: '{semanticTokens.colors.text_primary_invert}', - description: 'Inverted text color of the FeaturePopover.', + description: 'Primary text color in the Wizard sidebar.', + }, + wizard_sidebar_text_secondary: { + value: '{semanticTokens.colors.text_secondary_invert}', + description: 'Secondary text color in the Wizard sidebar.', }, }, opacity: { @@ -1907,21 +1891,25 @@ export const theme: Theme = { value: `${RADII.medium}px`, description: 'Use for rounding Checkbox.', }, + 'control': { + value: `${RADII.medium}px`, + description: 'Use for rounding all form controls: Button, FilterTrigger, Input, Textarea, Pills, etc.', + }, 'counter': { value: `${RADII.large}px`, description: 'Rounding for counter/numeric capsules used as small indicators.', }, - 'tag': { - value: `${RADII['extra-large']}px`, - description: 'Corner radius for Tag (including removable tags) in dense UI.', + 'modal': { + value: `${RADII.large + 2}px`, + description: 'Use for rounding all kinds of big modal dialogs (e.g., Modal, Wizard).', }, - 'switch': { - value: `${RADII['extra-large']}px`, - description: 'Pill-shaped rounding for Switch geometry (full rounded track/thumb pattern).', + 'pills': { + value: `${RADII.medium}px`, + description: 'Use for rounding Pills.', }, - 'control': { + 'popper': { value: `${RADII.medium}px`, - description: 'Use for rounding all form controls: Button, FilterTrigger, Input, Textarea, Pills, etc.', + description: 'Use for rounding all kinds of poppers and dropdowns.', }, 'progress-bar': { value: `${RADII.medium}px`, @@ -1931,17 +1919,13 @@ export const theme: Theme = { value: `${RADII.medium + 2}px`, description: 'Use for rounding surfaces like Card, blocks, widgets, Notice, etc.', }, - 'popper': { - value: `${RADII.medium}px`, - description: 'Use for rounding all kinds of poppers and dropdowns.', - }, - 'modal': { - value: `${RADII.large + 2}px`, - description: 'Use for rounding all kinds of big modal dialogs (e.g., Modal, Wizard).', + 'switch': { + value: `${RADII['extra-large']}px`, + description: 'Pill-shaped rounding for Switch geometry (full rounded track/thumb pattern).', }, - 'pills': { - value: `${RADII.medium}px`, - description: 'Use for rounding Pills.', + 'tag': { + value: `${RADII['extra-large']}px`, + description: 'Corner radius for Tag (including removable tags) in dense UI.', }, }, durations: { @@ -2300,19 +2284,6 @@ type SemanticColors = { DEFAULT: Value; active: Value; }; - tooltip: { - invert: Value; - }; - table: { - accent: Value; - }; - date: { - picker: { - range: { - comparison: Value; - }; - }; - }; }; control: { switch: { @@ -2327,6 +2298,47 @@ type SemanticColors = { }; handle: Value; }; + slider: { + bar: { + DEFAULT: Value; + value: Value; + hover: Value; + }; + knob: { + DEFAULT: Value; + border: { + DEFAULT: Value; + hover: Value; + }; + }; + }; + slider_rating: { + normal: Value; + hover: { + active: Value; + }; + }; + checkbox: { + border: Value; + bg: { + normal: Value; + selected: Value; + }; + button: { + border: { + DEFAULT: Value; + selected: Value; + }; + bg: { + normal: Value; + hover: Value; + selected: { + DEFAULT: Value; + hover: Value; + }; + }; + }; + }; primary: { info: { DEFAULT: Value; @@ -2520,6 +2532,11 @@ type SemanticColors = { }; }; }; + border: { + range: { + comparison: Value; + }; + }; }; }; dropdown: { @@ -2537,20 +2554,26 @@ type SemanticColors = { }; feature: { popover: { - bg: { - DEFAULT: Value; - neutral: Value; + accent: { + bg: Value; + dot: { + outer: { + border: Value; + }; + }; + }; + neutral: { + bg: Value; + dot: { + outer: { + border: Value; + }; + }; }; dot: { DEFAULT: Value; - outer: { - border: Value; - }; neutral: { DEFAULT: Value; - outer: { - border: Value; - }; }; }; text: { @@ -2585,6 +2608,9 @@ type SemanticColors = { }; }; table: { + border: { + accent: Value; + }; th: { primary: { cell: { @@ -2669,11 +2695,16 @@ type SemanticColors = { }; }; tooltip: { - default: Value; - warning: Value; - invert: Value; + bg: { + default: Value; + warning: Value; + invert: Value; + }; text: Value; text_invert: Value; + border: { + invert: Value; + }; }; neighbor: { location: { @@ -2928,27 +2959,6 @@ type SemanticColors = { secondary: Value; }; }; - checkbox: { - border: Value; - bg: { - normal: Value; - selected: Value; - }; - button: { - border: { - DEFAULT: Value; - selected: Value; - }; - bg: { - normal: Value; - hover: Value; - selected: { - DEFAULT: Value; - hover: Value; - }; - }; - }; - }; dot: { notification: { bg: Value; @@ -2961,16 +2971,6 @@ type SemanticColors = { critical: Value; }; }; - opacity: { - fader: { - primary: Value; - secondary: Value; - }; - limit_fader: { - primary: Value; - secondary: Value; - }; - }; pills: { bg: { normal: Value; @@ -3017,26 +3017,6 @@ type SemanticColors = { }; }; }; - slider: { - rating: { - normal: Value; - hover: { - active: Value; - }; - }; - bar: { - DEFAULT: Value; - value: Value; - hover: Value; - }; - knob: { - DEFAULT: Value; - border: { - DEFAULT: Value; - hover: Value; - }; - }; - }; }; type SemanticShadows = { diff --git a/website/docs/.vitepress/theme/Tooltip.vue b/website/docs/.vitepress/theme/Tooltip.vue index 8c9c5d891c..d56b781edb 100644 --- a/website/docs/.vitepress/theme/Tooltip.vue +++ b/website/docs/.vitepress/theme/Tooltip.vue @@ -31,7 +31,7 @@ export default { opacity: 0; transition: calc(var(--intergalactic-duration-popper, 200) * 1ms) all ease-in-out; color: var(--intergalactic-text-primary-invert, #ffffff); - background-color: var(--intergalactic-tooltip-invert, #191b23); + background-color: var(--intergalactic-tooltip-bg-invert, #191b23); font-size: var(--intergalactic-fs-100, 12px); line-height: var(--intergalactic-lh-100, 133%); text-align: center; @@ -54,7 +54,7 @@ export default { top: -10px; left: 50%; transform: translateX(-50%); - border-color: transparent transparent var(--intergalactic-tooltip-invert, #191b23) transparent; + border-color: transparent transparent var(--intergalactic-tooltip-bg-invert, #191b23) transparent; } .vp-tooltip-container:has(:focus-visible) .vp-tooltip, @@ -84,10 +84,10 @@ body:has(.vp-tooltip-container > *:first-child:hover + .vp-tooltip) .vp-tooltip- .dark .vp-tooltip { color: var(--intergalactic-text-primary, #191b23); - background-color: var(--intergalactic-tooltip-default, #ffffff); + background-color: var(--intergalactic-tooltip-bg-default, #ffffff); } .dark .vp-tooltip-arrow { - border-color: transparent transparent var(--intergalactic-tooltip-default, #ffffff) transparent; + border-color: transparent transparent var(--intergalactic-tooltip-bg-default, #ffffff) transparent; } diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json index 1f9b04b3ed..3928046e9c 100644 --- a/website/docs/style/design-tokens/design-tokens.json +++ b/website/docs/style/design-tokens/design-tokens.json @@ -1,4 +1,136 @@ [ + { + "name": "--intergalactic-badge-bg-admin", + "value": "oklch(0.58 0.168 278.2)", + "description": "Background color of the admin Badge.", + "components": [] + }, + { + "name": "--intergalactic-badge-bg-alpha", + "value": "oklch(0.64 0.226 24.5)", + "description": "Background color of the alpha Badge.", + "components": [] + }, + { + "name": "--intergalactic-badge-bg-beta", + "value": "oklch(0.64 0.196 47.3)", + "description": "Background color of the beta Badge.", + "components": [] + }, + { + "name": "--intergalactic-badge-bg-invert", + "value": "#ffffff", + "description": "Background color of the inverted Badge.", + "components": [] + }, + { + "name": "--intergalactic-badge-bg-new", + "value": "oklch(0.64 0.161 170)", + "description": "Background color of the new Badge.", + "components": [] + }, + { + "name": "--intergalactic-badge-bg-soon", + "value": "oklch(0.64 0.003 157.8)", + "description": "Background color of the soon Badge.", + "components": [] + }, + { + "name": "--intergalactic-badge-bg-unavailable", + "value": "oklch(0.9 0.002 177)", + "description": "Background color of the unavailable Badge.", + "components": [] + }, + { + "name": "--intergalactic-badge-text-primary", + "value": "oklch(0.1 0.03 137 / 0.899)", + "description": "Primary text color for Badge.", + "components": [] + }, + { + "name": "--intergalactic-badge-text-primary-invert", + "value": "oklch(0.999 0.001 180 / 0.949)", + "description": "Inverted primary text color for Badge.", + "components": [] + }, + { + "name": "--intergalactic-badge-text-secondary", + "value": "oklch(0.088 0.026 147.7 / 0.583)", + "description": "Secondary text color for Badge.", + "components": [] + }, + { + "name": "--intergalactic-bg-highlight-focus", + "value": "oklch(0.524 0.266 263.1 / 0.116)", + "description": "Focusing values in the input.", + "components": [ + "date-picker", + "time-picker" + ] + }, + { + "name": "--intergalactic-bg-highlight-results", + "value": "oklch(0.94 0.039 303.2)", + "description": "Highlighting the search results.", + "components": [] + }, + { + "name": "--intergalactic-bg-primary-advertising", + "value": "oklch(0.64 0.223 299.3)", + "description": "Accent background for the advertising banners and controls.", + "components": [] + }, + { + "name": "--intergalactic-bg-primary-critical", + "value": "oklch(0.64 0.226 24.5)", + "description": "Accent background of a message or a banner with a critical information.", + "components": [ + "counter", + "notice-bubble" + ] + }, + { + "name": "--intergalactic-bg-primary-highlight", + "value": "oklch(0.88 0.078 303)", + "description": "Accent background of the information you want to highlight.", + "components": [] + }, + { + "name": "--intergalactic-bg-primary-info", + "value": "oklch(0.64 0.152 276.7)", + "description": "Accent background of the message with regular information.", + "components": [ + "counter" + ] + }, + { + "name": "--intergalactic-bg-primary-invert", + "value": "oklch(0.23 0.01 140)", + "description": "Inverted version of the primary background of the interface that contains the main data and information.", + "components": [ + "notice-bubble" + ] + }, + { + "name": "--intergalactic-bg-primary-invert-active", + "value": "oklch(0.4 0.004 140)", + "description": "Active (selected) state for the inverted version of the primary background of the interface that contains the main data and information.", + "components": [ + "drag-and-drop" + ] + }, + { + "name": "--intergalactic-bg-primary-invert-hover", + "value": "oklch(0.36 0.005 140)", + "description": "Hover state for the inverted version of the primary background of the interface that contains the main data and information.", + "components": [] + }, + { + "name": "--intergalactic-bg-primary-muted", + "value": "oklch(0.64 0.003 157.8)", + "description": "Accented muted background for a message with regular information.", + "components": [] + }, { "name": "--intergalactic-bg-primary-neutral", "value": "oklch(1 0 0)", @@ -31,15 +163,6 @@ "wizard" ] }, - { - "name": "--intergalactic-bg-primary-neutral-hover", - "value": "oklch(0.98 0.001 180)", - "description": "Hover state of the primary background of the interface which contains the main data and information.", - "components": [ - "base-trigger", - "pills" - ] - }, { "name": "--intergalactic-bg-primary-neutral-active", "value": "oklch(0.97 0.001 180)", @@ -49,11 +172,12 @@ ] }, { - "name": "--intergalactic-bg-primary-info", - "value": "oklch(0.64 0.152 276.7)", - "description": "Accent background of the message with regular information.", + "name": "--intergalactic-bg-primary-neutral-hover", + "value": "oklch(0.98 0.001 180)", + "description": "Hover state of the primary background of the interface which contains the main data and information.", "components": [ - "counter" + "base-trigger", + "pills" ] }, { @@ -62,15 +186,6 @@ "description": "Accent background of the message or banner with information about the successful result.", "components": [] }, - { - "name": "--intergalactic-bg-primary-critical", - "value": "oklch(0.64 0.226 24.5)", - "description": "Accent background of a message or a banner with a critical information.", - "components": [ - "counter", - "notice-bubble" - ] - }, { "name": "--intergalactic-bg-primary-warning", "value": "oklch(0.7 0.195 50.5)", @@ -80,45 +195,82 @@ ] }, { - "name": "--intergalactic-bg-primary-highlight", - "value": "oklch(0.88 0.078 303)", - "description": "Accent background of the information you want to highlight.", + "name": "--intergalactic-bg-secondary-advertising", + "value": "oklch(0.98 0.013 303.4)", + "description": "Secondary background for the advertising message you want to accent.", "components": [] }, { - "name": "--intergalactic-bg-primary-advertising", - "value": "oklch(0.64 0.223 299.3)", - "description": "Accent background for the advertising banners and controls.", + "name": "--intergalactic-bg-secondary-advertising-active", + "value": "oklch(0.94 0.039 303.2)", + "description": "Active (selected) state of the secondary background for the advertising message you want to accent.", "components": [] }, { - "name": "--intergalactic-bg-primary-muted", - "value": "oklch(0.64 0.003 157.8)", - "description": "Accented muted background for a message with regular information.", + "name": "--intergalactic-bg-secondary-advertising-hover", + "value": "oklch(0.96 0.026 303.3)", + "description": "Hover state of the secondary background for the advertising message you want to accent.", "components": [] }, { - "name": "--intergalactic-bg-primary-invert", - "value": "oklch(0.23 0.01 140)", - "description": "Inverted version of the primary background of the interface that contains the main data and information.", + "name": "--intergalactic-bg-secondary-critical", + "value": "oklch(0.958 0.029 5.7)", + "description": "Secondary background of the message with critical information you want to accent.", "components": [ - "notice-bubble" + "bulk-textarea", + "notice" ] }, { - "name": "--intergalactic-bg-primary-invert-hover", - "value": "oklch(0.36 0.005 140)", - "description": "Hover state for the inverted version of the primary background of the interface that contains the main data and information.", + "name": "--intergalactic-bg-secondary-critical-active", + "value": "oklch(0.938 0.042 8.4)", + "description": "Active (selected) state of the secondary background of the message with critical information you want to accent.", "components": [] }, { - "name": "--intergalactic-bg-primary-invert-active", - "value": "oklch(0.4 0.004 140)", - "description": "Active (selected) state for the inverted version of the primary background of the interface that contains the main data and information.", + "name": "--intergalactic-bg-secondary-critical-hover", + "value": "oklch(0.958 0.029 5.7)", + "description": "Hover state of the secondary background of the message with critical information you want to accent.", + "components": [] + }, + { + "name": "--intergalactic-bg-secondary-highlight", + "value": "oklch(0.98 0.013 303.4)", + "description": "Secondary background of the information you want to highlight.", + "components": [] + }, + { + "name": "--intergalactic-bg-secondary-highlight-active", + "value": "oklch(0.94 0.039 303.2)", + "description": "Active (selected) state of the secondary background of the information you want to highlight.", + "components": [] + }, + { + "name": "--intergalactic-bg-secondary-highlight-hover", + "value": "oklch(0.96 0.026 303.3)", + "description": "Hover state of the secondary background of the information you want to highlight.", + "components": [] + }, + { + "name": "--intergalactic-bg-secondary-info", + "value": "oklch(0.959 0.021 267.8)", + "description": "Secondary background of a message with regular information.", "components": [ - "drag-and-drop" + "notice" ] }, + { + "name": "--intergalactic-bg-secondary-info-active", + "value": "oklch(0.939 0.032 268)", + "description": "Active (selected) state of the secondary background of a message with regular information.", + "components": [] + }, + { + "name": "--intergalactic-bg-secondary-info-hover", + "value": "oklch(0.959 0.021 267.8)", + "description": "Hover state of the secondary background of a message with regular information.", + "components": [] + }, { "name": "--intergalactic-bg-secondary-neutral", "value": "oklch(0.98 0.001 180)", @@ -134,15 +286,6 @@ "time-picker" ] }, - { - "name": "--intergalactic-bg-secondary-neutral-hover", - "value": "oklch(0.96 0.001 180)", - "description": "Hover state of the secondary background of the interface which contains the main data and information.", - "components": [ - "accordion", - "time-picker" - ] - }, { "name": "--intergalactic-bg-secondary-neutral-active", "value": "oklch(0.94 0.002 180)", @@ -153,25 +296,14 @@ ] }, { - "name": "--intergalactic-bg-secondary-info", - "value": "oklch(0.959 0.021 267.8)", - "description": "Secondary background of a message with regular information.", + "name": "--intergalactic-bg-secondary-neutral-hover", + "value": "oklch(0.96 0.001 180)", + "description": "Hover state of the secondary background of the interface which contains the main data and information.", "components": [ - "notice" + "accordion", + "time-picker" ] }, - { - "name": "--intergalactic-bg-secondary-info-hover", - "value": "oklch(0.959 0.021 267.8)", - "description": "Hover state of the secondary background of a message with regular information.", - "components": [] - }, - { - "name": "--intergalactic-bg-secondary-info-active", - "value": "oklch(0.939 0.032 268)", - "description": "Active (selected) state of the secondary background of a message with regular information.", - "components": [] - }, { "name": "--intergalactic-bg-secondary-success", "value": "oklch(0.96 0.057 179.7)", @@ -180,12 +312,6 @@ "notice" ] }, - { - "name": "--intergalactic-bg-secondary-success-hover", - "value": "oklch(0.96 0.057 179.7)", - "description": "Hover state of the secondary background of the message with success information you want to accent.", - "components": [] - }, { "name": "--intergalactic-bg-secondary-success-active", "value": "oklch(0.94 0.074 178.1)", @@ -193,24 +319,9 @@ "components": [] }, { - "name": "--intergalactic-bg-secondary-critical", - "value": "oklch(0.958 0.029 5.7)", - "description": "Secondary background of the message with critical information you want to accent.", - "components": [ - "bulk-textarea", - "notice" - ] - }, - { - "name": "--intergalactic-bg-secondary-critical-hover", - "value": "oklch(0.958 0.029 5.7)", - "description": "Hover state of the secondary background of the message with critical information you want to accent.", - "components": [] - }, - { - "name": "--intergalactic-bg-secondary-critical-active", - "value": "oklch(0.938 0.042 8.4)", - "description": "Active (selected) state of the secondary background of the message with critical information you want to accent.", + "name": "--intergalactic-bg-secondary-success-hover", + "value": "oklch(0.96 0.057 179.7)", + "description": "Hover state of the secondary background of the message with success information you want to accent.", "components": [] }, { @@ -221,12 +332,6 @@ "notice" ] }, - { - "name": "--intergalactic-bg-secondary-warning-hover", - "value": "oklch(0.96 0.05 83.1)", - "description": "Hover state of the secondary background of the message with warning information you want to accent.", - "components": [] - }, { "name": "--intergalactic-bg-secondary-warning-active", "value": "oklch(0.939 0.069 79.8)", @@ -234,2699 +339,2570 @@ "components": [] }, { - "name": "--intergalactic-bg-secondary-highlight", - "value": "oklch(0.98 0.013 303.4)", - "description": "Secondary background of the information you want to highlight.", - "components": [] - }, - { - "name": "--intergalactic-bg-secondary-highlight-hover", - "value": "oklch(0.96 0.026 303.3)", - "description": "Hover state of the secondary background of the information you want to highlight.", - "components": [] - }, - { - "name": "--intergalactic-bg-secondary-highlight-active", - "value": "oklch(0.94 0.039 303.2)", - "description": "Active (selected) state of the secondary background of the information you want to highlight.", + "name": "--intergalactic-bg-secondary-warning-hover", + "value": "oklch(0.96 0.05 83.1)", + "description": "Hover state of the secondary background of the message with warning information you want to accent.", "components": [] }, { - "name": "--intergalactic-bg-secondary-advertising", - "value": "oklch(0.98 0.013 303.4)", - "description": "Secondary background for the advertising message you want to accent.", - "components": [] + "name": "--intergalactic-border-critical", + "value": "oklch(0.628 0.257 28.1 / 0.243)", + "description": "Subtle secondary border in the critical message and invalid input field.", + "components": [ + "notice" + ] }, { - "name": "--intergalactic-bg-secondary-advertising-hover", - "value": "oklch(0.96 0.026 303.3)", - "description": "Hover state of the secondary background for the advertising message you want to accent.", - "components": [] + "name": "--intergalactic-border-critical-active", + "value": "oklch(0.7 0.21 23)", + "description": "Active border in the focused input field with invalid state, and active state of the other components with invalid state.", + "components": [ + "base-trigger", + "bulk-textarea", + "checkbox", + "inline-input", + "input", + "radio", + "textarea", + "tooltip" + ] }, { - "name": "--intergalactic-bg-secondary-advertising-active", - "value": "oklch(0.94 0.039 303.2)", - "description": "Active (selected) state of the secondary background for the advertising message you want to accent.", - "components": [] + "name": "--intergalactic-border-critical-pattern", + "value": "repeating-linear-gradient(315deg, oklch(0.7 0.21 23) 0, oklch(0.7 0.21 23) 1px, transparent 0, transparent 50%)", + "description": "Used for the invalidStatePattern utils component to mark all kinds of inputs with invalid states.", + "components": [ + "base-components", + "bulk-textarea", + "radio", + "textarea" + ] }, { - "name": "--intergalactic-bg-highlight-results", - "value": "oklch(0.94 0.039 303.2)", - "description": "Highlighting the search results.", - "components": [] + "name": "--intergalactic-border-info", + "value": "oklch(0.51 0.274 263.6 / 0.222)", + "description": "Subtle secondary border in the informational message.", + "components": [ + "notice" + ] }, { - "name": "--intergalactic-bg-highlight-focus", - "value": "oklch(0.524 0.266 263.1 / 0.116)", - "description": "Focusing values in the input.", + "name": "--intergalactic-border-info-active", + "value": "oklch(0.7 0.131 275.2)", + "description": "Active border in focused input filed.", "components": [ - "date-picker", - "time-picker" + "base-trigger", + "bulk-textarea", + "checkbox", + "color-picker", + "feedback-form", + "inline-input", + "input", + "input-tags", + "pills", + "radio", + "tab-line", + "textarea" ] }, { - "name": "--intergalactic-text-primary", - "value": "oklch(0.1 0.03 137 / 0.899)", - "description": "Default body and UI copy; strongest reading emphasis for primary content.", + "name": "--intergalactic-border-primary", + "value": "oklch(0.137 0.026 175.7 / 0.161)", + "description": "Default stroke for interactive controls and structured surfaces.", "components": [ - "accordion", - "badge", - "base-components", "base-trigger", - "breadcrumbs", "bulk-textarea", "button", - "card", "checkbox", + "counter", "d3-chart", - "data-table", "date-picker", + "divider", "dropdown", - "dropdown-menu", - "errors", - "feature-popover", + "feedback-form", "fullscreen-modal", "inline-input", "input", - "input-mask", - "modal", - "notice", - "pagination", "pills", - "product-head", "radio", + "select", "side-panel", - "switch", + "slider", + "spin", "tab-line", "tab-panel", "textarea", - "time-picker", - "tooltip", - "typography" + "time-picker" ] }, { - "name": "--intergalactic-text-primary-invert", - "value": "oklch(0.999 0.001 180 / 0.949)", - "description": "Inverted version of the primary text.", + "name": "--intergalactic-border-primary-invert", + "value": "oklch(0.995 0.008 147.4 / 0.391)", + "description": "Inverted version of the neutral primary border. Use it for borders on the dark or color background.", "components": [ - "badge", - "base-components", "button", - "date-picker", - "dot", - "feature-highlight", - "feature-popover", - "notice-bubble", - "tag", - "tooltip", - "wizard" + "divider", + "spin" ] }, { - "name": "--intergalactic-text-secondary", - "value": "oklch(0.088 0.026 147.7 / 0.583)", - "description": "Supporting text: captions, metadata, hints in flowing copy—visually quieter than primary body text.", + "name": "--intergalactic-border-secondary", + "value": "oklch(0.176 0.033 175.7 / 0.07)", + "description": "Secondary hairline stroke for grids, cards, and subtle dividers.", "components": [ - "breadcrumbs", - "bulk-textarea", - "button", "card", - "counter", + "color-picker", "d3-chart", + "data-table", "date-picker", "dropdown", - "dropdown-menu", - "flags", - "fullscreen-modal", - "pills", + "notice", "slider", - "switch", - "tab-panel", - "time-picker", - "typography", - "widget-empty" + "tooltip" ] }, { - "name": "--intergalactic-text-secondary-invert", - "value": "oklch(0.997 0.004 165.9 / 0.684)", - "description": "Inverted version of the secondary text.", + "name": "--intergalactic-border-secondary-invert", + "value": "oklch(0.995 0.008 145.9 / 0.369)", + "description": "Inverted version of the neutral secondary border. Use it for borders on the dark or color background.", "components": [] }, { - "name": "--intergalactic-text-placeholder", - "value": "oklch(0.098 0.023 157.4 / 0.457)", - "description": "Placeholder text color for inputs and fields.", + "name": "--intergalactic-border-success", + "value": "oklch(0.818 0.171 165.4 / 0.531)", + "description": "Subtle secondary border in the successful message and input field.", + "components": [ + "notice" + ] + }, + { + "name": "--intergalactic-border-success-active", + "value": "oklch(0.7 0.166 170)", + "description": "Active border in the focused input field with valid state.", "components": [ "base-trigger", "bulk-textarea", "inline-input", "input", - "input-mask", "textarea" ] }, { - "name": "--intergalactic-text-success", - "value": "oklch(0.53 0.142 170)", - "description": "Text associated with success states and data.", + "name": "--intergalactic-border-warning", + "value": "oklch(0.77 0.174 64.1 / 0.543)", + "description": "Subtle secondary border in the warning message.", + "components": [ + "notice" + ] + }, + { + "name": "--intergalactic-border-warning-active", + "value": "oklch(0.7 0.195 50.5)", + "description": "Active border in components with warning intention.", "components": [] }, { - "name": "--intergalactic-text-success-hover-active", - "value": "oklch(0.51 0.137 170)", - "description": "Hover and active states for the text associated with success states and data.", + "name": "--intergalactic-brand-facebook", + "value": "#1877f2", + "description": "Official Facebook brand fill for logos and icons in approved placements; follow the platform brand rules for size and clear space.", "components": [] }, { - "name": "--intergalactic-text-critical", - "value": "oklch(0.53 0.206 27.3)", - "description": "Text associated with critical states and data.", + "name": "--intergalactic-brand-google-blue", + "value": "#1a0dab", + "description": "Google brand color for the link.", "components": [] }, { - "name": "--intergalactic-text-critical-hover-active", - "value": "oklch(0.51 0.202 27.8)", - "description": "Hover and active states for the text associated with critical states and data.", + "name": "--intergalactic-brand-google-green", + "value": "#016723", + "description": "Google green brand color for the link.", "components": [] }, { - "name": "--intergalactic-text-link", - "value": "oklch(0.53 0.21 263)", - "description": "Default interactive link color for unfollowed links.", - "components": [ - "button", - "link", - "tab-panel", - "typography" - ] - }, - { - "name": "--intergalactic-text-link-hover-active", - "value": "oklch(0.51 0.202 263)", - "description": "Hover and active states for the link text.", - "components": [ - "button", - "link", - "tab-panel", - "typography" - ] - }, - { - "name": "--intergalactic-text-link-invert", - "value": "oklch(0.75 0.125 265.3)", - "description": "Inverted version of the link text. Use on dark background only.", - "components": [ - "notice-bubble" - ] - }, - { - "name": "--intergalactic-text-link-invert-hover", - "value": "oklch(0.85 0.075 265.9)", - "description": "Hover and active states of the inverted version of the link text. Use on dark background only.", + "name": "--intergalactic-brand-google-my-business", + "value": "#1a73e8", + "description": "Official Google My Business brand fill for logos and icons in approved placements; follow Google brand guidelines for size and clear space.", "components": [] }, { - "name": "--intergalactic-text-link-visited", - "value": "oklch(0.53 0.26 296)", - "description": "Visited link state so users can tell visited destinations apart from default links.", - "components": [ - "link" - ] - }, - { - "name": "--intergalactic-text-hint", - "value": "oklch(0.088 0.026 147.7 / 0.583)", - "description": "Supplementary helper text near controls (short guidance), distinct from placeholder text inside inputs.", - "components": [ - "button", - "d3-chart" - ] - }, - { - "name": "--intergalactic-text-hint-hover-active", - "value": "oklch(0.086 0.026 145.8 / 0.605)", - "description": "Hover and active states of the hint link text.", - "components": [ - "button", - "typography" - ] + "name": "--intergalactic-brand-gradient", + "value": "linear-gradient(180deg, #DCEEEB 0%, #EEE9FF 100%)", + "description": "Brand light gradient for branded surfaces.", + "components": [] }, { - "name": "--intergalactic-text-hint-invert", - "value": "oklch(0.75 0.003 165.9)", - "description": "Inverted version of the hint link text.", + "name": "--intergalactic-brand-instagram", + "value": "#e4405f", + "description": "Official Instagram brand fill for logos and icons in approved placements; follow the platform brand rules for size and clear space.", "components": [] }, { - "name": "--intergalactic-text-hint-invert-hover-active", - "value": "oklch(0.85 0.002 173.3)", - "description": "Hover and active states of the inverted version of the hint link text.", + "name": "--intergalactic-brand-linkedIn", + "value": "#0a66c2", + "description": "Official LinkedIn brand fill for logos and icons in approved placements; follow the platform brand rules for size and clear space.", "components": [] }, { - "name": "--intergalactic-text-large-secondary", - "value": "oklch(0.088 0.026 147.7 / 0.583)", - "description": "Secondary text. Use with font-size ≥20px.", - "components": [ - "typography" - ] + "name": "--intergalactic-brand-pinterest", + "value": "#bd081c", + "description": "Official Pinterest brand fill for logos and icons in approved placements; follow the platform brand rules for size and clear space.", + "components": [] }, { - "name": "--intergalactic-text-large-info", - "value": "oklch(0.53 0.157 279.2)", - "description": "Link text with font-size ≥20px.", - "components": [ - "d3-chart" - ] + "name": "--intergalactic-brand-primary", + "value": "oklch(0.74 0.17 303)", + "description": "Primary brand accent for logos and branded surfaces.", + "components": [] }, { - "name": "--intergalactic-text-large-info-hover-active", - "value": "oklch(0.51 0.152 279.7)", - "description": "Hover and active states of the link text with font-size ≥20px.", + "name": "--intergalactic-brand-secondary", + "value": "oklch(0.22 0.01 140)", + "description": "Secondary brand accent for paired brand treatments (secondary marks, duo-tone lockups).", "components": [] }, { - "name": "--intergalactic-text-large-success", - "value": "oklch(0.53 0.142 170)", - "description": "Text with font-size ≥20px associated with success states and data.", + "name": "--intergalactic-brand-twitter", + "value": "#1d9bf0", + "description": "Official Twitter brand fill for logos and icons in approved placements; follow the platform brand rules for size and clear space.", "components": [] }, { - "name": "--intergalactic-text-large-success-hover-active", - "value": "oklch(0.51 0.137 170)", - "description": "Hover and active states of the text with font-size ≥20px associated with success states and data.", + "name": "--intergalactic-brand-youtube", + "value": "#ff0000", + "description": "Official YouTube brand fill for logos and icons in approved placements; follow the platform brand rules for size and clear space.", "components": [] }, { - "name": "--intergalactic-text-large-critical", - "value": "oklch(0.53 0.206 27.3)", - "description": "Text with font-size ≥20px associated with critical states and data.", + "name": "--intergalactic-chart-data-critical", + "value": "oklch(0.64 0.226 24.5)", + "description": "Critical data color for charts.", "components": [] }, { - "name": "--intergalactic-text-large-critical-hover-active", - "value": "oklch(0.51 0.202 27.8)", - "description": "Hover and active states of the text with font-size ≥20px associated with critical states and data.", + "name": "--intergalactic-chart-data-success", + "value": "oklch(0.74 0.17 170)", + "description": "Success data color for charts.", "components": [] }, { - "name": "--intergalactic-text-advertising", - "value": "oklch(0.23 0.113 296)", - "description": "Promotional or sponsored emphasis (ads, marketing callouts)—use sparingly so it stays noticeable.", + "name": "--intergalactic-chart-data-warning", + "value": "oklch(0.74 0.19 53)", + "description": "Warning data color for charts.", "components": [] }, { - "name": "--intergalactic-border-primary", - "value": "oklch(0.137 0.026 175.7 / 0.161)", - "description": "Default stroke for interactive controls and structured surfaces.", + "name": "--intergalactic-chart-grid-bar-chart-base-bg", + "value": "oklch(0.96 0.001 180)", + "description": "Default background color of a bar in the BarChart.", "components": [ - "base-trigger", - "bulk-textarea", - "button", - "checkbox", - "counter", "d3-chart", - "date-picker", - "divider", - "dropdown", - "feedback-form", - "fullscreen-modal", - "inline-input", - "input", - "pills", - "radio", - "select", - "side-panel", - "slider", - "spin", - "tab-line", - "tab-panel", - "textarea", - "time-picker" + "mini-chart" ] }, { - "name": "--intergalactic-border-primary-invert", - "value": "oklch(0.995 0.008 147.4 / 0.391)", - "description": "Inverted version of the neutral primary border. Use it for borders on the dark or color background.", + "name": "--intergalactic-chart-grid-bar-chart-hover", + "value": "oklch(0.177 0.033 175.6 / 0.028)", + "description": "Background color for the hover state of a bar on the chart grid.", "components": [ - "button", - "divider", - "spin" + "d3-chart" ] }, { - "name": "--intergalactic-border-secondary", - "value": "oklch(0.176 0.033 175.7 / 0.07)", - "description": "Secondary hairline stroke for grids, cards, and subtle dividers.", + "name": "--intergalactic-chart-grid-border", + "value": "#fff", + "description": "Border for distinguishing data sets and chart dots on the chart grid.", "components": [ - "card", - "color-picker", "d3-chart", - "data-table", - "date-picker", - "dropdown", - "notice", - "slider", - "tooltip" + "mini-chart" ] }, { - "name": "--intergalactic-border-secondary-invert", - "value": "oklch(0.995 0.008 145.9 / 0.369)", - "description": "Inverted version of the neutral secondary border. Use it for borders on the dark or color background.", - "components": [] + "name": "--intergalactic-chart-grid-line", + "value": "oklch(0.95 0.002 180)", + "description": "Grid and axis guide lines for charts.", + "components": [ + "d3-chart" + ] }, { - "name": "--intergalactic-border-info", - "value": "oklch(0.51 0.274 263.6 / 0.222)", - "description": "Subtle secondary border in the informational message.", + "name": "--intergalactic-chart-grid-period-bg", + "value": "oklch(0.96 0.001 180)", + "description": "Use for highlighting a period on the chart grid.", "components": [ - "notice" + "d3-chart" ] }, { - "name": "--intergalactic-border-info-active", - "value": "oklch(0.7 0.131 275.2)", - "description": "Active border in focused input filed.", + "name": "--intergalactic-chart-grid-period-pattern", + "value": "oklch(0.95 0.002 180)", + "description": "Stripe color for diagonal pattern background.", "components": [ - "base-trigger", - "bulk-textarea", - "checkbox", - "color-picker", - "feedback-form", - "inline-input", - "input", - "input-tags", - "pills", - "radio", - "tab-line", - "textarea" + "d3-chart" ] }, { - "name": "--intergalactic-border-success", - "value": "oklch(0.818 0.171 165.4 / 0.531)", - "description": "Subtle secondary border in the successful message and input field.", + "name": "--intergalactic-chart-grid-text-label", + "value": "oklch(0.088 0.026 147.7 / 0.583)", + "description": "Text label on the chart grid.", "components": [ - "notice" + "d3-chart" ] }, { - "name": "--intergalactic-border-success-active", - "value": "oklch(0.7 0.166 170)", - "description": "Active border in the focused input field with valid state.", + "name": "--intergalactic-chart-grid-x-axis", + "value": "oklch(0.88 0.002 175.6)", + "description": "X-axis line on the chart grid.", "components": [ - "base-trigger", - "bulk-textarea", - "inline-input", - "input", - "textarea" + "d3-chart" ] }, { - "name": "--intergalactic-border-critical", - "value": "oklch(0.628 0.257 28.1 / 0.243)", - "description": "Subtle secondary border in the critical message and invalid input field.", + "name": "--intergalactic-chart-grid-y-accent-hover-line", + "value": "oklch(0.88 0.002 175.6)", + "description": "Accent line for the hover state on the chart grid.", "components": [ - "notice" + "d3-chart" ] }, { - "name": "--intergalactic-border-critical-active", - "value": "oklch(0.7 0.21 23)", - "description": "Active border in the focused input field with invalid state, and active state of the other components with invalid state.", - "components": [ - "base-trigger", - "bulk-textarea", - "checkbox", - "inline-input", - "input", - "radio", - "textarea", - "tooltip" + "name": "--intergalactic-chart-palette-order-1", + "value": "oklch(0.58 0.168 278.2)", + "description": "1 color in the default list of colors for charts.", + "components": [ + "d3-chart", + "mini-chart" ] }, { - "name": "--intergalactic-border-critical-pattern", - "value": "repeating-linear-gradient(315deg, oklch(0.7 0.21 23) 0, oklch(0.7 0.21 23) 1px, transparent 0, transparent 50%)", - "description": "Used for the invalidStatePattern utils component to mark all kinds of inputs with invalid states.", - "components": [ - "base-components", - "bulk-textarea", - "radio", - "textarea" - ] + "name": "--intergalactic-chart-palette-order-10", + "value": "oklch(0.74 0.17 170)", + "description": "10 color in the default list of colors for charts.", + "components": [] }, { - "name": "--intergalactic-border-warning", - "value": "oklch(0.77 0.174 64.1 / 0.543)", - "description": "Subtle secondary border in the warning message.", - "components": [ - "notice" - ] + "name": "--intergalactic-chart-palette-order-11", + "value": "oklch(0.74 0.17 72)", + "description": "11 color in the default list of colors for charts.", + "components": [] }, { - "name": "--intergalactic-border-warning-active", - "value": "oklch(0.7 0.195 50.5)", - "description": "Active border in components with warning intention.", + "name": "--intergalactic-chart-palette-order-12", + "value": "oklch(0.82 0.18 330)", + "description": "12 color in the default list of colors for charts.", "components": [] }, { - "name": "--intergalactic-border-tooltip-invert", - "value": "oklch(0.995 0.008 145.9 / 0.369)", - "description": "Border of the Tooltip with dark theme.", - "components": [ - "base-components", - "tooltip" - ] + "name": "--intergalactic-chart-palette-order-13", + "value": "oklch(0.64 0.22 147)", + "description": "13 color in the default list of colors for charts.", + "components": [] }, { - "name": "--intergalactic-border-table-accent", - "value": "oklch(0.137 0.026 175.7 / 0.161)", - "description": "Accent borders in the Table: for the accordion in the table and for the header of the secondary table.", - "components": [ - "data-table" - ] + "name": "--intergalactic-chart-palette-order-14", + "value": "oklch(0.82 0.118 303)", + "description": "14 color in the default list of colors for charts.", + "components": [] }, { - "name": "--intergalactic-border-date-picker-range-comparison", - "value": "oklch(0.7 0.191 301.5)", - "description": "Border color of the second period for the comparison mode in the DatePicker.", + "name": "--intergalactic-chart-palette-order-15", + "value": "oklch(0.64 0.226 24.5)", + "description": "15 color in the default list of colors for charts.", "components": [] }, { - "name": "--intergalactic-control-primary-info", - "value": "oklch(0.23 0.01 140)", - "description": "Background of the regular primary control.", - "components": [ - "button", - "checkbox", - "dropdown", - "feature-highlight", - "radio", - "select", - "slider", - "switch" - ] + "name": "--intergalactic-chart-palette-order-16", + "value": "oklch(0.74 0.17 170)", + "description": "16 color in the default list of colors for charts.", + "components": [] }, { - "name": "--intergalactic-control-primary-info-hover", - "value": "oklch(0.32 0.007 140)", - "description": "Hover state of the regular primary control.", - "components": [ - "button", - "slider" - ] + "name": "--intergalactic-chart-palette-order-17", + "value": "oklch(0.82 0.088 272.1)", + "description": "17 color in the default list of colors for charts.", + "components": [] }, { - "name": "--intergalactic-control-primary-info-active", - "value": "oklch(0 0 140)", - "description": "Active (selected) state of the regular primary control.", - "components": [ - "button" - ] + "name": "--intergalactic-chart-palette-order-18", + "value": "oklch(0.74 0.23 146)", + "description": "18 color in the default list of colors for charts.", + "components": [] }, { - "name": "--intergalactic-control-primary-success", - "value": "oklch(0.64 0.161 170)", - "description": "Background of the primary control with successful theme.", - "components": [ - "button", - "switch" - ] + "name": "--intergalactic-chart-palette-order-19", + "value": "oklch(0.64 0.16 64)", + "description": "19 color in the default list of colors for charts.", + "components": [] }, { - "name": "--intergalactic-control-primary-success-hover", - "value": "oklch(0.6 0.155 170)", - "description": "Hover state of the primary control with successful theme.", + "name": "--intergalactic-chart-palette-order-2", + "value": "oklch(0.82 0.15 170)", + "description": "2 color in the default list of colors for charts.", "components": [ - "button" + "d3-chart" ] }, { - "name": "--intergalactic-control-primary-success-active", - "value": "oklch(0.58 0.151 170)", - "description": "Active (selected) state of the primary control with successful theme.", - "components": [ - "button" - ] + "name": "--intergalactic-chart-palette-order-20", + "value": "oklch(0.82 0.13 20)", + "description": "20 color in the default list of colors for charts.", + "components": [] }, { - "name": "--intergalactic-control-primary-critical", - "value": "oklch(0.64 0.226 24.5)", - "description": "Background of the primary control with danger theme.", - "components": [ - "button", - "checkbox" - ] + "name": "--intergalactic-chart-palette-order-21", + "value": "oklch(0.53 0.138 59.9)", + "description": "21 color in the default list of colors for charts.", + "components": [] }, { - "name": "--intergalactic-control-primary-critical-hover", - "value": "oklch(0.6 0.219 25.5)", - "description": "Hover state of the primary control with danger theme.", - "components": [ - "button" - ] + "name": "--intergalactic-chart-palette-order-22", + "value": "oklch(0.64 0.223 299.3)", + "description": "22 color in the default list of colors for charts.", + "components": [] }, { - "name": "--intergalactic-control-primary-critical-active", - "value": "oklch(0.58 0.215 26)", - "description": "Active (selected) state of the primary control with danger theme.", - "components": [ - "button" - ] + "name": "--intergalactic-chart-palette-order-23", + "value": "oklch(0.64 0.262 330)", + "description": "23 color in the default list of colors for charts.", + "components": [] }, { - "name": "--intergalactic-control-primary-brand", - "value": "oklch(0.64 0.223 299.3)", - "description": "Background of the primary brand colored control.", - "components": [ - "button" - ] + "name": "--intergalactic-chart-palette-order-24", + "value": "oklch(0.53 0.189 147)", + "description": "24 color in the default list of colors for charts.", + "components": [] }, { - "name": "--intergalactic-control-primary-brand-hover", - "value": "oklch(0.6 0.244 297.8)", - "description": "Hover state of the primary brand colored control.", - "components": [ - "button" - ] + "name": "--intergalactic-chart-palette-order-3", + "value": "oklch(0.74 0.17 303)", + "description": "3 color in the default list of colors for charts.", + "components": [] }, { - "name": "--intergalactic-control-primary-brand-active", - "value": "oklch(0.58 0.254 297.1)", - "description": "Active state of the primary brand colored control.", - "components": [ - "button" - ] + "name": "--intergalactic-chart-palette-order-4", + "value": "oklch(0.82 0.18 80)", + "description": "4 color in the default list of colors for charts.", + "components": [] }, { - "name": "--intergalactic-control-primary-advertising", - "value": "oklch(0.64 0.223 299.3)", - "description": "Background of the advertising primary control.", - "components": [ - "wizard" - ] + "name": "--intergalactic-chart-palette-order-5", + "value": "oklch(0.74 0.19 22)", + "description": "5 color in the default list of colors for charts.", + "components": [] }, { - "name": "--intergalactic-control-primary-advertising-hover", - "value": "oklch(0.6 0.244 297.8)", - "description": "Hover state of the advertising primary control.", - "components": [ - "wizard" - ] + "name": "--intergalactic-chart-palette-order-6", + "value": "oklch(0.82 0.088 272.1)", + "description": "6 color in the default list of colors for charts.", + "components": [] }, { - "name": "--intergalactic-control-primary-advertising-active", - "value": "oklch(0.58 0.254 297.1)", - "description": "Active (selected) state of the advertising primary control.", - "components": [ - "wizard" - ] + "name": "--intergalactic-chart-palette-order-7", + "value": "oklch(0.74 0.225 330)", + "description": "7 color in the default list of colors for charts.", + "components": [] }, { - "name": "--intergalactic-control-primary-invert", - "value": "oklch(1 0 0)", - "description": "Inverted background of the primary control.", - "components": [ - "button" - ] + "name": "--intergalactic-chart-palette-order-8", + "value": "oklch(0.82 0.19 143)", + "description": "8 color in the default list of colors for charts.", + "components": [] }, { - "name": "--intergalactic-control-primary-invert-hover", - "value": "oklch(0.96 0.001 180)", - "description": "Hover state of the inverted primary control.", + "name": "--intergalactic-chart-palette-order-9", + "value": "oklch(0.53 0.157 279.2)", + "description": "9 color in the default list of colors for charts.", "components": [ - "button" + "d3-chart" ] }, { - "name": "--intergalactic-control-primary-invert-active", - "value": "oklch(0.94 0.002 180)", - "description": "Active (selected) state of the inverted primary control.", + "name": "--intergalactic-chart-palette-order-null", + "value": "oklch(0.9 0.002 177)", + "description": "Use it to show null value on the chart.", "components": [ - "button" + "d3-chart" ] }, { - "name": "--intergalactic-control-secondary-neutral", - "value": "oklch(0.177 0.033 175.6 / 0.028)", - "description": "Background of the regular secondary control.", - "components": [ - "button" - ] + "name": "--intergalactic-chart-palette-order-other-data", + "value": "oklch(0.82 0.002 171.1)", + "description": "Use it to indicate voids, missing or some other data on the chart.", + "components": [] }, { - "name": "--intergalactic-control-secondary-neutral-hover", - "value": "oklch(0.176 0.033 175.6 / 0.056)", - "description": "Hover state of the regular secondary control.", - "components": [ - "button" - ] + "name": "--intergalactic-chart-palette-order-total-amount", + "value": "oklch(0.64 0.003 157.8)", + "description": "Use it to show total value on the chart.", + "components": [] }, { - "name": "--intergalactic-control-secondary-neutral-active", - "value": "oklch(0.176 0.033 175.7 / 0.084)", - "description": "Active (selected) state of the regular secondary control.", - "components": [ - "button" - ] + "name": "--intergalactic-chart-x-axis-accent-data-start-tracking", + "value": "oklch(0.889 0.178 168.8 / 0.21)", + "description": "Background color for the \"Start tracking\" date on the X-axis of the chart grid.", + "components": [] }, { - "name": "--intergalactic-control-secondary-info", - "value": "oklch(0.527 0.264 262.9 / 0.039)", - "description": "Background of the accent secondary control.", - "components": [ - "base-trigger", - "button", - "pills" - ] + "name": "--intergalactic-chart-x-axis-accent-period-active", + "value": "oklch(0.176 0.033 175.6 / 0.056)", + "description": "Background color for the clickable date on the X-axis of the chart grid.", + "components": [] }, { - "name": "--intergalactic-control-secondary-info-hover", - "value": "oklch(0.525 0.265 263 / 0.077)", - "description": "Hover state of the accent secondary control.", - "components": [ - "base-trigger", - "button" - ] + "name": "--intergalactic-control-checkbox-bg-normal", + "value": "oklch(1 0 0)", + "description": "Background color of the Checkbox.", + "components": [] }, { - "name": "--intergalactic-control-secondary-info-active", - "value": "oklch(0.524 0.266 263.1 / 0.116)", - "description": "Active (selected) state of the accent secondary control.", - "components": [ - "base-trigger", - "button" - ] + "name": "--intergalactic-control-checkbox-bg-selected", + "value": "oklch(0.23 0.01 140)", + "description": "Background color of the checked Checkbox.", + "components": [] }, { - "name": "--intergalactic-control-secondary-invert", - "value": "oklch(0.969 0.057 140 / 0.118)", - "description": "Background of the inverted version of the secondary control.", - "components": [ - "button" - ] + "name": "--intergalactic-control-checkbox-border", + "value": "oklch(0.137 0.026 175.7 / 0.161)", + "description": "Border color of the Checkbox.", + "components": [] }, { - "name": "--intergalactic-control-secondary-invert-hover", - "value": "oklch(0.976 0.043 140 / 0.145)", - "description": "Hover state of the inverted version of the secondary control.", - "components": [ - "button" - ] + "name": "--intergalactic-control-checkbox-button-bg-hover", + "value": "oklch(0.527 0.264 262.9 / 0.039)", + "description": "Hover state of the Checkbox button background.", + "components": [] }, { - "name": "--intergalactic-control-secondary-invert-active", - "value": "oklch(0.983 0.03 140 / 0.183)", - "description": "Active (selected) state of the inverted version of the secondary control.", - "components": [ - "button" - ] + "name": "--intergalactic-control-checkbox-button-bg-normal", + "value": "oklch(1 0 0)", + "description": "Normal state of the Checkbox button background.", + "components": [] }, { - "name": "--intergalactic-control-tertiary-neutral", - "value": "transparent", - "description": "Background of the regular tertiary control.", - "components": [ - "button" - ] + "name": "--intergalactic-control-checkbox-button-bg-selected", + "value": "oklch(0.524 0.266 263.1 / 0.116)", + "description": "Selected state of the Checkbox button background.", + "components": [] }, { - "name": "--intergalactic-control-tertiary-neutral-hover", - "value": "oklch(0.176 0.033 175.6 / 0.056)", - "description": "Hover state of the regular tertiary control.", - "components": [ - "button", - "color-picker" - ] + "name": "--intergalactic-control-checkbox-button-bg-selected-hover", + "value": "oklch(0.524 0.266 263.1 / 0.116)", + "description": "Hover for a selected state of the Checkbox button background.", + "components": [] }, { - "name": "--intergalactic-control-tertiary-neutral-active", - "value": "oklch(0.176 0.033 175.7 / 0.084)", - "description": "Active (selected) state of the regular tertiary control.", - "components": [ - "button", - "color-picker" - ] + "name": "--intergalactic-control-checkbox-button-border", + "value": "oklch(0.137 0.026 175.7 / 0.161)", + "description": "Border color of the Checkbox button in its normal state.", + "components": [] }, { - "name": "--intergalactic-control-tertiary-info", - "value": "transparent", - "description": "Background of the accent and link-lookalike tertiary control.", - "components": [ - "button" - ] + "name": "--intergalactic-control-checkbox-button-border-selected", + "value": "oklch(0.7 0.131 275.2)", + "description": "Border color of the Checkbox button in its active state.", + "components": [] }, { - "name": "--intergalactic-control-tertiary-info-hover", - "value": "oklch(0.525 0.265 263 / 0.077)", - "description": "Hover state of the accent and link-lookalike tertiary control.", + "name": "--intergalactic-control-primary-advertising", + "value": "oklch(0.64 0.223 299.3)", + "description": "Background of the advertising primary control.", "components": [ - "button" + "wizard" ] }, { - "name": "--intergalactic-control-tertiary-info-active", - "value": "oklch(0.524 0.266 263.1 / 0.116)", - "description": "Active (selected) state of the accent and link-lookalike tertiary control.", + "name": "--intergalactic-control-primary-advertising-active", + "value": "oklch(0.58 0.254 297.1)", + "description": "Active (selected) state of the advertising primary control.", "components": [ - "button" + "wizard" ] }, { - "name": "--intergalactic-control-tertiary-invert", - "value": "transparent", - "description": "Background of the inverted version of the tertiary control.", + "name": "--intergalactic-control-primary-advertising-hover", + "value": "oklch(0.6 0.244 297.8)", + "description": "Hover state of the advertising primary control.", "components": [ - "button" + "wizard" ] }, { - "name": "--intergalactic-control-tertiary-invert-hover", - "value": "oklch(0.976 0.043 140 / 0.145)", - "description": "Hover state of the inverted version of the tertiary control.", + "name": "--intergalactic-control-primary-brand", + "value": "oklch(0.64 0.223 299.3)", + "description": "Background of the primary brand colored control.", "components": [ "button" ] }, { - "name": "--intergalactic-control-tertiary-invert-active", - "value": "oklch(0.983 0.03 140 / 0.183)", - "description": "Active (selected) state of the inverted version of the tertiary control.", + "name": "--intergalactic-control-primary-brand-active", + "value": "oklch(0.58 0.254 297.1)", + "description": "Active state of the primary brand colored control.", "components": [ "button" ] }, { - "name": "--intergalactic-icon-primary-neutral", - "value": "oklch(0.092 0.024 152.2 / 0.526)", - "description": "Default icon weight on normal backgrounds—stronger emphasis than secondary icons.", + "name": "--intergalactic-control-primary-brand-hover", + "value": "oklch(0.6 0.244 297.8)", + "description": "Hover state of the primary brand colored control.", "components": [ - "accordion", - "base-trigger", - "carousel", - "drag-and-drop", - "feature-highlight", - "notice", - "typography" + "button" ] }, { - "name": "--intergalactic-icon-primary-neutral-hover-active", - "value": "oklch(0.088 0.026 147.7 / 0.583)", - "description": "Gray background color for the hover and active states of the primary neutral icon. It’s created using a CSS filter with a brightness(0.8), applied to the gray-500 color.", + "name": "--intergalactic-control-primary-critical", + "value": "oklch(0.64 0.226 24.5)", + "description": "Background of the primary control with danger theme.", "components": [ - "feature-highlight", - "notice" + "button", + "checkbox" ] }, { - "name": "--intergalactic-icon-primary-info", - "value": "oklch(0.372 0.253 264.1 / 0.598)", - "description": "Primary link-lookalike icon.", - "components": [] - }, - { - "name": "--intergalactic-icon-primary-info-hover-active", - "value": "oklch(0.322 0.222 264.1 / 0.641)", - "description": "Blue background color for the hover and active states of the primary link-lookalike icon. It’s created using a CSS filter with a brightness(0.8), applied to the blue-500 color.", - "components": [] - }, - { - "name": "--intergalactic-icon-primary-success", - "value": "oklch(0.595 0.124 165.4)", - "description": "Semantic success icon.", + "name": "--intergalactic-control-primary-critical-active", + "value": "oklch(0.58 0.215 26)", + "description": "Active (selected) state of the primary control with danger theme.", "components": [ - "notice" + "button" ] }, { - "name": "--intergalactic-icon-primary-success-hover-active", - "value": "oklch(0.545 0.115 164.9)", - "description": "Green background color for the hover and active states of the primary success icon. It’s created using a CSS filter with a brightness(0.8), applied to the green-500 color.", + "name": "--intergalactic-control-primary-critical-hover", + "value": "oklch(0.6 0.219 25.5)", + "description": "Hover state of the primary control with danger theme.", "components": [ - "notice" + "button" ] }, { - "name": "--intergalactic-icon-primary-critical", - "value": "oklch(0.552 0.226 28.7 / 0.848)", - "description": "Semantic error icon.", + "name": "--intergalactic-control-primary-info", + "value": "oklch(0.23 0.01 140)", + "description": "Background of the regular primary control.", "components": [ - "notice" + "button", + "checkbox", + "dropdown", + "feature-highlight", + "radio", + "select", + "slider", + "switch" ] }, { - "name": "--intergalactic-icon-primary-critical-hover-active", - "value": "oklch(0.511 0.209 28.7 / 0.91)", - "description": "Red background color for the hover and active states of the primary critical icon. It’s created using a CSS filter with a brightness(0.8), applied to the red-500 color.", + "name": "--intergalactic-control-primary-info-active", + "value": "oklch(0 0 140)", + "description": "Active (selected) state of the regular primary control.", "components": [ - "notice" + "button" ] }, { - "name": "--intergalactic-icon-primary-warning", - "value": "oklch(0.728 0.188 51.8)", - "description": "Semantic warning icon.", + "name": "--intergalactic-control-primary-info-hover", + "value": "oklch(0.32 0.007 140)", + "description": "Hover state of the regular primary control.", "components": [ - "dot", - "notice" + "button", + "slider" ] }, { - "name": "--intergalactic-icon-primary-warning-hover-active", - "value": "oklch(0.531 0.169 39.3)", - "description": "Orange background color for the hover and active states of the primary warning icon. It’s created using a CSS filter with a brightness(0.8), applied to the orange-500 color.", + "name": "--intergalactic-control-primary-invert", + "value": "oklch(1 0 0)", + "description": "Inverted background of the primary control.", "components": [ - "notice" + "button" ] }, { - "name": "--intergalactic-icon-primary-invert", - "value": "oklch(0.998 0.003 173.3 / 0.808)", - "description": "Inverted version of the primary icon.", + "name": "--intergalactic-control-primary-invert-active", + "value": "oklch(0.94 0.002 180)", + "description": "Active (selected) state of the inverted primary control.", "components": [ - "carousel" + "button" ] }, { - "name": "--intergalactic-icon-primary-invert-hover-active", - "value": "oklch(0.998 0.003 169.6 / 0.746)", - "description": "Hover and active (selected) states of the inverted version of the primary icon.", - "components": [] - }, - { - "name": "--intergalactic-icon-secondary-neutral", - "value": "oklch(0.104 0.023 162.3 / 0.385)", - "description": "De-emphasized icons for dense layouts (tables, tertiary actions).", + "name": "--intergalactic-control-primary-invert-hover", + "value": "oklch(0.96 0.001 180)", + "description": "Hover state of the inverted primary control.", "components": [ - "breadcrumbs", - "carousel", - "inline-input", - "input", - "input-number", - "switch", - "typography" + "button" ] }, { - "name": "--intergalactic-icon-secondary-neutral-hover-active", - "value": "oklch(0.1 0.023 159.1 / 0.433)", - "description": "Gray background color for the hover and active states of the secondary neutral icon. It’s created using a CSS filter with a brightness(0.8), applied to the gray-300 color.", + "name": "--intergalactic-control-primary-success", + "value": "oklch(0.64 0.161 170)", + "description": "Background of the primary control with successful theme.", "components": [ - "data-table", - "inline-input", - "input", - "input-number" + "button", + "switch" ] }, { - "name": "--intergalactic-icon-secondary-info", - "value": "oklch(0.424 0.269 264.2 / 0.469)", - "description": "Secondary link-lookalike icon.", - "components": [] + "name": "--intergalactic-control-primary-success-active", + "value": "oklch(0.58 0.151 170)", + "description": "Active (selected) state of the primary control with successful theme.", + "components": [ + "button" + ] }, { - "name": "--intergalactic-icon-secondary-info-hover-active", - "value": "oklch(0.66 0.145 276.2)", - "description": "Blue background color for the hover and active states of the secondary link-lookalike icon. It’s created using a CSS filter with a brightness(0.8), applied to the blue-300 color.", - "components": [] + "name": "--intergalactic-control-primary-success-hover", + "value": "oklch(0.6 0.155 170)", + "description": "Hover state of the primary control with successful theme.", + "components": [ + "button" + ] }, { - "name": "--intergalactic-icon-secondary-success", - "value": "oklch(0.711 0.146 166.9)", - "description": "Softer success icon for dense UI or inline hints where the surface should stay calm.", + "name": "--intergalactic-control-secondary-info", + "value": "oklch(0.527 0.264 262.9 / 0.039)", + "description": "Background of the accent secondary control.", "components": [ - "inline-input" + "base-trigger", + "button", + "pills" ] }, { - "name": "--intergalactic-icon-secondary-success-hover-active", - "value": "oklch(0.673 0.139 166.3)", - "description": "Green background color for the hover and active states of the secondary success icon. It’s created using a CSS filter with a brightness(0.8), applied to the green-300 color.", + "name": "--intergalactic-control-secondary-info-active", + "value": "oklch(0.524 0.266 263.1 / 0.116)", + "description": "Active (selected) state of the accent secondary control.", "components": [ - "inline-input" + "base-trigger", + "button" ] }, { - "name": "--intergalactic-icon-secondary-critical", - "value": "oklch(0.628 0.257 28.9 / 0.652)", - "description": "Softer error icon for dense UI or inline hints where the surface should stay calm.", - "components": [] + "name": "--intergalactic-control-secondary-info-hover", + "value": "oklch(0.525 0.265 263 / 0.077)", + "description": "Hover state of the accent secondary control.", + "components": [ + "base-trigger", + "button" + ] }, { - "name": "--intergalactic-icon-secondary-critical-hover-active", - "value": "oklch(0.628 0.257 28.5 / 0.763)", - "description": "Red background color for the hover and active states of the secondary critical icon. It’s created using a CSS filter with a brightness(0.8), applied to the red-300 color.", - "components": [] + "name": "--intergalactic-control-secondary-invert", + "value": "oklch(0.969 0.057 140 / 0.118)", + "description": "Background of the inverted version of the secondary control.", + "components": [ + "button" + ] }, { - "name": "--intergalactic-icon-secondary-warning", - "value": "oklch(0.701 0.191 48.1)", - "description": "Softer warning icon for dense UI or inline hints where the surface should stay calm.", - "components": [] + "name": "--intergalactic-control-secondary-invert-active", + "value": "oklch(0.983 0.03 140 / 0.183)", + "description": "Active (selected) state of the inverted version of the secondary control.", + "components": [ + "button" + ] }, { - "name": "--intergalactic-icon-secondary-warning-hover-active", - "value": "oklch(0.662 0.193 43.7)", - "description": "Orange background color for the hover and active states of the secondary warning icon. It’s created using a CSS filter with a brightness(0.8), applied to the orange-300 color.", - "components": [] + "name": "--intergalactic-control-secondary-invert-hover", + "value": "oklch(0.976 0.043 140 / 0.145)", + "description": "Hover state of the inverted version of the secondary control.", + "components": [ + "button" + ] }, { - "name": "--intergalactic-icon-non-interactive", - "value": "oklch(0.094 0.024 153.9 / 0.503)", - "description": "Color for the default non-interactive icon.", - "components": [] + "name": "--intergalactic-control-secondary-neutral", + "value": "oklch(0.177 0.033 175.6 / 0.028)", + "description": "Background of the regular secondary control.", + "components": [ + "button" + ] }, { - "name": "--intergalactic-illustration-red", - "value": "oklch(0.737 0.192 22.1)", - "description": "⚠️ Use only for illustrations.", - "components": [] + "name": "--intergalactic-control-secondary-neutral-active", + "value": "oklch(0.176 0.033 175.7 / 0.084)", + "description": "Active (selected) state of the regular secondary control.", + "components": [ + "button" + ] }, { - "name": "--intergalactic-illustration-orange", - "value": "oklch(0.823 0.154 61.9)", - "description": "⚠️ Use only for illustrations.", - "components": [] + "name": "--intergalactic-control-secondary-neutral-hover", + "value": "oklch(0.176 0.033 175.6 / 0.056)", + "description": "Hover state of the regular secondary control.", + "components": [ + "button" + ] }, { - "name": "--intergalactic-illustration-yellow", - "value": "oklch(0.924 0.109 96.8)", - "description": "⚠️ Use only for illustrations.", + "name": "--intergalactic-control-select-trigger-active", + "value": "oklch(1 0 0)", + "description": "Background of the Select trigger in its active state.", "components": [] }, { - "name": "--intergalactic-illustration-salad", - "value": "oklch(0.922 0.098 132.7)", - "description": "⚠️ Use only for illustrations.", + "name": "--intergalactic-control-select-trigger-hover", + "value": "oklch(0.98 0.001 180)", + "description": "Background of the Select trigger in its hover state.", "components": [] }, { - "name": "--intergalactic-illustration-green", - "value": "oklch(0.812 0.152 170)", - "description": "⚠️ Use only for illustrations.", + "name": "--intergalactic-control-select-trigger-normal", + "value": "oklch(1 0 0)", + "description": "Background of the Select trigger in its normal state.", "components": [] }, { - "name": "--intergalactic-illustration-blue", - "value": "oklch(0.84 0.081 271.5)", - "description": "⚠️ Use only for illustrations.", + "name": "--intergalactic-control-slider-bar", + "value": "oklch(0.96 0.001 180)", + "description": "Background of the Slider bar.", "components": [] }, { - "name": "--intergalactic-illustration-violet", - "value": "oklch(0.709 0.186 301.9)", - "description": "⚠️ Use only for illustrations.", + "name": "--intergalactic-control-slider-bar-hover", + "value": "oklch(0.88 0.002 175.6)", + "description": "Hover state of the Slider bar.", "components": [] }, { - "name": "--intergalactic-illustration-pink", - "value": "oklch(0.76 0.214 330)", - "description": "⚠️ Use only for illustrations.", + "name": "--intergalactic-control-slider-bar-value", + "value": "oklch(0.23 0.01 140)", + "description": "Filled part of the Slider bar.", "components": [] }, { - "name": "--intergalactic-date-picker-cell", - "value": "oklch(1 0 0)", - "description": "Default date-picker cell background.", - "components": [ - "date-picker" - ] - }, - { - "name": "--intergalactic-date-picker-cell-current", - "value": "oklch(0.104 0.023 162.3 / 0.385)", - "description": "Color for marking the cell with the current date, month or year in the date-picker.", - "components": [ - "date-picker" - ] - }, - { - "name": "--intergalactic-date-picker-cell-current-invert", - "value": "oklch(0.995 0.008 147.4 / 0.391)", - "description": "Color for marking the active cell with the current date, month or year in the date-picker.", + "name": "--intergalactic-control-slider-knob", + "value": "#ffffff", + "description": "Knob fill color of the Slider.", "components": [] }, { - "name": "--intergalactic-date-picker-cell-hover", - "value": "oklch(0.98 0.001 180)", - "description": "Hover state of the default date-picker cell background.", - "components": [ - "date-picker" - ] - }, - { - "name": "--intergalactic-date-picker-cell-range", - "value": "oklch(0.959 0.021 267.8)", - "description": "Background for the cell which is included in the date range in the date-picker.", - "components": [ - "date-picker" - ] - }, - { - "name": "--intergalactic-date-picker-cell-range-hover", - "value": "oklch(0.898 0.054 268.3)", - "description": "Hover state of the background for the cell which is included in the date range in the date-picker.", - "components": [ - "date-picker" - ] - }, - { - "name": "--intergalactic-date-picker-cell-active", - "value": "oklch(0.64 0.152 276.7)", - "description": "Active (selected) date-picker cell background.", - "components": [ - "date-picker" - ] - }, - { - "name": "--intergalactic-date-picker-cell-active-hover", - "value": "oklch(0.6 0.166 277.7)", - "description": "Hover for the active (selected) date-picker cell background.", - "components": [ - "date-picker" - ] + "name": "--intergalactic-control-slider-knob-border", + "value": "oklch(0.23 0.01 140)", + "description": "Knob border color of the Slider in its normal state.", + "components": [] }, { - "name": "--intergalactic-date-picker-cell-comparison-active", - "value": "oklch(0.64 0.223 299.3)", - "description": "Active (selected) date-picker cell background for comparison periods.", - "components": [ - "date-picker" - ] + "name": "--intergalactic-control-slider-knob-border-hover", + "value": "oklch(0.32 0.007 140)", + "description": "Knob border color of the Slider in its hover state.", + "components": [] }, { - "name": "--intergalactic-date-picker-cell-comparison-active-hover", - "value": "oklch(0.6 0.244 297.8)", - "description": "Hover for the active (selected) date-picker cell background for comparison periods.", + "name": "--intergalactic-control-slider-rating-hover-active", + "value": "oklch(0.66 0.212 300.1)", + "description": "Icon color for the SliderRating component in its hovered and active states.", "components": [ - "date-picker" + "feedback-form" ] }, { - "name": "--intergalactic-dropdown-menu-item", - "value": "oklch(1 0 0)", - "description": "Default background color for the list item in the dropdown-menu.", + "name": "--intergalactic-control-slider-rating-normal", + "value": "oklch(0.7 0.003 162.2)", + "description": "Icon color for the SliderRating component in its normal state.", "components": [ - "dropdown" + "feedback-form" ] }, { - "name": "--intergalactic-dropdown-menu-item-hover", - "value": "oklch(0.177 0.033 175.6 / 0.028)", - "description": "Hover state of the default background color for the list item in the dropdown-menu.", + "name": "--intergalactic-control-switch-bg", + "value": "oklch(0.74 0.003 165.2)", + "description": "Subtle background of the Switch control.", "components": [ - "dropdown" + "switch" ] }, { - "name": "--intergalactic-dropdown-menu-item-selected", - "value": "oklch(0.525 0.265 263 / 0.077)", - "description": "Active (selected) state of the default background color for the list item in the dropdown-menu.", - "components": [ - "dropdown", - "select" - ] + "name": "--intergalactic-control-switch-bg-info-active", + "value": "oklch(0.23 0.01 140)", + "description": "Active background of the Switch control.", + "components": [] }, { - "name": "--intergalactic-dropdown-menu-item-selected-hover", - "value": "oklch(0.52 0.268 263.2 / 0.191)", - "description": "Hover state for the selected state of the default background color for the list item in the dropdown-menu.", - "components": [ - "dropdown", - "select" - ] + "name": "--intergalactic-control-switch-bg-success-active", + "value": "oklch(0.64 0.161 170)", + "description": "Active background of the Switch control.", + "components": [] }, { - "name": "--intergalactic-feature-popover-bg", - "value": "oklch(0.88 0.078 303)", - "description": "Color of the outer border of the FeaturePopover.Spot.", - "components": [ - "feature-popover" - ] + "name": "--intergalactic-control-switch-handle", + "value": "#ffffff", + "description": "Handle color of the Switch control.", + "components": [] }, { - "name": "--intergalactic-feature-popover-bg-neutral", - "value": "oklch(0.23 0.01 140)", - "description": "Color of the outer border of the FeaturePopover.Spot.", + "name": "--intergalactic-control-tertiary-info", + "value": "transparent", + "description": "Background of the accent and link-lookalike tertiary control.", "components": [ - "feature-popover" + "button" ] }, { - "name": "--intergalactic-feature-popover-dot-outer-border", - "value": "oklch(0.88 0.078 303)", - "description": "Color of the outer border of the FeaturePopover.Spot.", + "name": "--intergalactic-control-tertiary-info-active", + "value": "oklch(0.524 0.266 263.1 / 0.116)", + "description": "Active (selected) state of the accent and link-lookalike tertiary control.", "components": [ - "feature-popover" + "button" ] }, { - "name": "--intergalactic-feature-popover-dot-neutral", - "value": "oklch(0.88 0.078 303)", - "description": "Color of the outer border of the FeaturePopover.Spot.", + "name": "--intergalactic-control-tertiary-info-hover", + "value": "oklch(0.525 0.265 263 / 0.077)", + "description": "Hover state of the accent and link-lookalike tertiary control.", "components": [ - "feature-popover" + "button" ] }, { - "name": "--intergalactic-feature-popover-dot-neutral-outer-border", - "value": "oklch(0.88 0.078 303)", - "description": "Color of the outer border of the FeaturePopover.Spot.", + "name": "--intergalactic-control-tertiary-invert", + "value": "transparent", + "description": "Background of the inverted version of the tertiary control.", "components": [ - "feature-popover" + "button" ] }, { - "name": "--intergalactic-progress-bar-bg", - "value": "oklch(0.96 0.001 180)", - "description": "Background color of the ProgressBar.", + "name": "--intergalactic-control-tertiary-invert-active", + "value": "oklch(0.983 0.03 140 / 0.183)", + "description": "Active (selected) state of the inverted version of the tertiary control.", "components": [ - "progress-bar" + "button" ] }, { - "name": "--intergalactic-progress-bar-bg-hover", - "value": "oklch(0.88 0.002 175.6)", - "description": "Hover state of the background color of the ProgressBar.", - "components": [] - }, - { - "name": "--intergalactic-progress-bar-bg-invert", - "value": "oklch(0.45 0.004 143.7)", - "description": "Inverted version of the background color of the ProgressBar.", + "name": "--intergalactic-control-tertiary-invert-hover", + "value": "oklch(0.976 0.043 140 / 0.145)", + "description": "Hover state of the inverted version of the tertiary control.", "components": [ - "progress-bar" + "button" ] }, { - "name": "--intergalactic-progress-bar-bg-invert-hover", - "value": "oklch(0.56 0.003 151.9)", - "description": "Hover state for the inverted version of the background color of the ProgressBar.", - "components": [] - }, - { - "name": "--intergalactic-progress-bar-value-gradient", - "value": "linear-gradient(-45deg, oklch(from oklch(0.74 0.17 303) calc(l - 0.05) c h) 25%, oklch(0.74 0.17 303) 0%, oklch(0.74 0.17 303) 50%, oklch(from oklch(0.74 0.17 303) calc(l - 0.05) c h) 0%, oklch(from oklch(0.74 0.17 303) calc(l - 0.05) c h) 75%, oklch(0.74 0.17 303) 0%)", - "description": "Value with gradient for the ProgressBar.", + "name": "--intergalactic-control-tertiary-neutral", + "value": "transparent", + "description": "Background of the regular tertiary control.", "components": [ - "progress-bar" + "button" ] }, { - "name": "--intergalactic-progress-bar-value-bg", - "value": "oklch(1 0 0)", - "description": "Base value background for the ProgressBar. It is used to create gradients for the values.", + "name": "--intergalactic-control-tertiary-neutral-active", + "value": "oklch(0.176 0.033 175.7 / 0.084)", + "description": "Active (selected) state of the regular tertiary control.", "components": [ - "progress-bar" + "button", + "color-picker" ] }, { - "name": "--intergalactic-progress-bar-pattern-gradient", - "value": "linear-gradient(-45deg, oklch(0 0 0 / 0.1) 25%, oklch(0.96 0.001 180) 0%, oklch(0.96 0.001 180) 50%, oklch(0 0 0 / 0.1) 0%, oklch(0 0 0 / 0.1) 75%, oklch(0.96 0.001 180) 0%)", - "description": "Null value gradient for the ProgressBar.", + "name": "--intergalactic-control-tertiary-neutral-hover", + "value": "oklch(0.176 0.033 175.6 / 0.056)", + "description": "Hover state of the regular tertiary control.", "components": [ - "progress-bar" + "button", + "color-picker" ] }, { - "name": "--intergalactic-skeleton-bg", - "value": "oklch(0.9 0.002 177)", - "description": "Default color for the Skeleton.", - "components": [ - "skeleton" - ] + "name": "--intergalactic-control-text-primary", + "value": "oklch(0.1 0.03 137 / 0.899)", + "description": "Primary text color for form controls.", + "components": [] }, { - "name": "--intergalactic-skeleton-bg-invert", - "value": "oklch(0.3 0.007 140)", - "description": "Inverted version of the default color for the Skeleton.", - "components": [ - "skeleton" - ] + "name": "--intergalactic-control-text-primary-invert", + "value": "oklch(0.999 0.001 180 / 0.949)", + "description": "Inverted primary text color for form controls.", + "components": [] }, { - "name": "--intergalactic-table-th-primary-cell", - "value": "oklch(0.98 0.001 180)", - "description": "Background of the header cell in the primary Table.", - "components": [ - "data-table" - ] + "name": "--intergalactic-control-text-secondary", + "value": "oklch(0.088 0.026 147.7 / 0.583)", + "description": "Secondary text color for form controls.", + "components": [] }, { - "name": "--intergalactic-table-th-primary-cell-hover", - "value": "oklch(0.94 0.002 180)", - "description": "Background of the hovered header cell in the primary Table.", - "components": [ - "data-table" - ] + "name": "--intergalactic-control-text-tertiary", + "value": "oklch(0.088 0.026 147.7 / 0.583)", + "description": "Tertiary text color for form controls.", + "components": [] }, { - "name": "--intergalactic-table-th-primary-cell-active", - "value": "oklch(0.94 0.002 180)", - "description": "Background of the active header cell in the primary Table.", + "name": "--intergalactic-date-picker-border-range-comparison", + "value": "oklch(0.7 0.191 301.5)", + "description": "Border color of the second period for the comparison mode in the DatePicker.", "components": [] }, { - "name": "--intergalactic-table-th-secondary-cell", + "name": "--intergalactic-date-picker-cell", "value": "oklch(1 0 0)", - "description": "Background of the header cell in the secondary Table.", + "description": "Default date-picker cell background.", "components": [ - "data-table" + "date-picker" ] }, { - "name": "--intergalactic-table-th-gradient", - "value": "linear-gradient(to right, transparent 0%, oklch(0.9 0.002 177) 100%)", - "description": "Background gradient for sorting icon that absolute positioned in the table head.", - "components": [] - }, - { - "name": "--intergalactic-table-td-cell", - "value": "oklch(1 0 0)", - "description": "Background of the default cell in the Table.", - "components": [] + "name": "--intergalactic-date-picker-cell-active", + "value": "oklch(0.64 0.152 276.7)", + "description": "Active (selected) date-picker cell background.", + "components": [ + "date-picker" + ] }, { - "name": "--intergalactic-table-td-cell-hover", - "value": "oklch(0.98 0.001 180)", - "description": "Background of the default hovered cell in the Table.", + "name": "--intergalactic-date-picker-cell-active-hover", + "value": "oklch(0.6 0.166 277.7)", + "description": "Hover for the active (selected) date-picker cell background.", "components": [ - "data-table" + "date-picker" ] }, { - "name": "--intergalactic-table-td-cell-active", - "value": "oklch(0.97 0.001 180)", - "description": "Background of the default active cell in the Table.", + "name": "--intergalactic-date-picker-cell-comparison-active", + "value": "oklch(0.64 0.223 299.3)", + "description": "Active (selected) date-picker cell background for comparison periods.", "components": [ - "data-table" + "date-picker" ] }, { - "name": "--intergalactic-table-td-cell-unread", - "value": "oklch(0.98 0.001 180)", - "description": "Background of the unread cell in the Table.", + "name": "--intergalactic-date-picker-cell-comparison-active-hover", + "value": "oklch(0.6 0.244 297.8)", + "description": "Hover for the active (selected) date-picker cell background for comparison periods.", "components": [ - "data-table" + "date-picker" ] }, { - "name": "--intergalactic-table-td-cell-accordion", - "value": "oklch(1 0 0)", - "description": "Background of the cell used for Accordion or actions row, in the Table.", + "name": "--intergalactic-date-picker-cell-current", + "value": "oklch(0.104 0.023 162.3 / 0.385)", + "description": "Color for marking the cell with the current date, month or year in the date-picker.", "components": [ - "data-table" + "date-picker" ] }, { - "name": "--intergalactic-table-td-cell-selected", - "value": "oklch(0.98 0.01 267.6)", - "description": "Background of the selected cell in the Table.", + "name": "--intergalactic-date-picker-cell-current-invert", + "value": "oklch(0.995 0.008 147.4 / 0.391)", + "description": "Color for marking the active cell with the current date, month or year in the date-picker.", + "components": [] + }, + { + "name": "--intergalactic-date-picker-cell-hover", + "value": "oklch(0.98 0.001 180)", + "description": "Hover state of the default date-picker cell background.", "components": [ - "data-table" + "date-picker" ] }, { - "name": "--intergalactic-table-td-cell-selected-hover", + "name": "--intergalactic-date-picker-cell-range", "value": "oklch(0.959 0.021 267.8)", - "description": "Background of the hovered selected cell in the Table.", + "description": "Background for the cell which is included in the date range in the date-picker.", "components": [ - "data-table" + "date-picker" ] }, { - "name": "--intergalactic-table-td-cell-selected-active", - "value": "oklch(0.939 0.032 268)", - "description": "Background of the active selected cell in the Table.", + "name": "--intergalactic-date-picker-cell-range-hover", + "value": "oklch(0.898 0.054 268.3)", + "description": "Hover state of the background for the cell which is included in the date range in the date-picker.", "components": [ - "data-table" + "date-picker" ] }, { - "name": "--intergalactic-table-td-cell-new", - "value": "oklch(0.977 0.036 184)", - "description": "Background of the cell with new information in the Table.", - "components": [ - "data-table" - ] + "name": "--intergalactic-dot-notification-bg", + "value": "oklch(0.728 0.188 51.8)", + "description": "Background color of the notification Dot.", + "components": [] }, { - "name": "--intergalactic-table-td-cell-new-hover", - "value": "oklch(0.96 0.057 179.7)", - "description": "Background of the hovered cell with new information in the Table.", - "components": [ - "data-table" - ] + "name": "--intergalactic-dot-notification-text", + "value": "oklch(0.999 0.001 180 / 0.949)", + "description": "Text color of the notification Dot.", + "components": [] }, { - "name": "--intergalactic-table-td-cell-new-active", - "value": "oklch(0.94 0.074 178.1)", - "description": "Background of the active cell with new information in the Table.", + "name": "--intergalactic-dropdown-menu-item", + "value": "oklch(1 0 0)", + "description": "Default background color for the list item in the dropdown-menu.", "components": [ - "data-table" + "dropdown" ] }, { - "name": "--intergalactic-table-td-cell-critical", - "value": "oklch(0.977 0.016 1.8)", - "description": "Background of the cell with critical information in the Table.", + "name": "--intergalactic-dropdown-menu-item-hover", + "value": "oklch(0.177 0.033 175.6 / 0.028)", + "description": "Hover state of the default background color for the list item in the dropdown-menu.", "components": [ - "data-table" + "dropdown" ] }, { - "name": "--intergalactic-table-td-cell-critical-hover", - "value": "oklch(0.958 0.029 5.7)", - "description": "Background of the hovered cell with critical information in the Table.", + "name": "--intergalactic-dropdown-menu-item-selected", + "value": "oklch(0.525 0.265 263 / 0.077)", + "description": "Active (selected) state of the default background color for the list item in the dropdown-menu.", "components": [ - "data-table" + "dropdown", + "select" ] }, { - "name": "--intergalactic-table-td-cell-critical-active", - "value": "oklch(0.938 0.042 8.4)", - "description": "Background of the active cell with critical information in the Table.", - "components": [ - "data-table" - ] + "name": "--intergalactic-dropdown-menu-item-selected-border", + "value": "oklch(0.23 0.01 140)", + "description": "Border color of the selected item in the DropdownMenu.", + "components": [] }, { - "name": "--intergalactic-table-td-cell-warning", - "value": "oklch(0.979 0.03 88.1)", - "description": "Background of the cell with warning information in the Table.", + "name": "--intergalactic-dropdown-menu-item-selected-hover", + "value": "oklch(0.52 0.268 263.2 / 0.191)", + "description": "Hover state for the selected state of the default background color for the list item in the dropdown-menu.", "components": [ - "data-table" + "dropdown", + "select" ] }, { - "name": "--intergalactic-table-td-cell-warning-hover", - "value": "oklch(0.96 0.05 83.1)", - "description": "Background of the hovered cell with warning information in the Table.", + "name": "--intergalactic-feature-popover-accent-bg", + "value": "oklch(0.88 0.078 303)", + "description": "Color of the outer border of the FeaturePopover.Spot.", "components": [ - "data-table" + "feature-popover" ] }, { - "name": "--intergalactic-table-td-cell-warning-active", - "value": "oklch(0.939 0.069 79.8)", - "description": "Background of the active cell with warning information in the Table.", + "name": "--intergalactic-feature-popover-accent-dot-outer-border", + "value": "oklch(0.88 0.078 303)", + "description": "Color of the outer border of the FeaturePopover.Spot.", "components": [ - "data-table" + "feature-popover" ] }, { - "name": "--intergalactic-brand-primary", - "value": "oklch(0.74 0.17 303)", - "description": "Primary brand accent for logos and branded surfaces.", - "components": [] - }, - { - "name": "--intergalactic-brand-secondary", - "value": "oklch(0.22 0.01 140)", - "description": "Secondary brand accent for paired brand treatments (secondary marks, duo-tone lockups).", + "name": "--intergalactic-feature-popover-dot", + "value": "oklch(0.88 0.078 303)", + "description": "Color of the outer border of the FeaturePopover.Spot.", "components": [] }, { - "name": "--intergalactic-brand-gradient", - "value": "linear-gradient(180deg, #DCEEEB 0%, #EEE9FF 100%)", - "description": "Brand light gradient for branded surfaces.", - "components": [] + "name": "--intergalactic-feature-popover-dot-neutral", + "value": "oklch(0.88 0.078 303)", + "description": "Color of the outer border of the FeaturePopover.Spot.", + "components": [ + "feature-popover" + ] }, { - "name": "--intergalactic-brand-pinterest", - "value": "#bd081c", - "description": "Official Pinterest brand fill for logos and icons in approved placements; follow the platform brand rules for size and clear space.", - "components": [] + "name": "--intergalactic-feature-popover-neutral-bg", + "value": "oklch(0.23 0.01 140)", + "description": "Color of the outer border of the FeaturePopover.Spot.", + "components": [ + "feature-popover" + ] }, { - "name": "--intergalactic-brand-instagram", - "value": "#e4405f", - "description": "Official Instagram brand fill for logos and icons in approved placements; follow the platform brand rules for size and clear space.", - "components": [] + "name": "--intergalactic-feature-popover-neutral-dot-outer-border", + "value": "oklch(0.88 0.078 303)", + "description": "Color of the outer border of the FeaturePopover.Spot.", + "components": [ + "feature-popover" + ] }, { - "name": "--intergalactic-brand-youtube", - "value": "#ff0000", - "description": "Official YouTube brand fill for logos and icons in approved placements; follow the platform brand rules for size and clear space.", + "name": "--intergalactic-feature-popover-text", + "value": "oklch(0.1 0.03 137 / 0.899)", + "description": "Text color of the FeaturePopover.", "components": [] }, { - "name": "--intergalactic-brand-facebook", - "value": "#1877f2", - "description": "Official Facebook brand fill for logos and icons in approved placements; follow the platform brand rules for size and clear space.", + "name": "--intergalactic-feature-popover-text-invert", + "value": "oklch(0.999 0.001 180 / 0.949)", + "description": "Inverted text color of the FeaturePopover.", "components": [] }, { - "name": "--intergalactic-brand-linkedIn", - "value": "#0a66c2", - "description": "Official LinkedIn brand fill for logos and icons in approved placements; follow the platform brand rules for size and clear space.", + "name": "--intergalactic-footer-bg", + "value": "oklch(0.97 0.001 180)", + "description": "Background fill for the product page footer.", "components": [] }, { - "name": "--intergalactic-brand-twitter", - "value": "#1d9bf0", - "description": "Official Twitter brand fill for logos and icons in approved placements; follow the platform brand rules for size and clear space.", + "name": "--intergalactic-header-bg", + "value": "oklch(0.97 0.001 180)", "components": [] }, { - "name": "--intergalactic-brand-google-blue", - "value": "#1a0dab", - "description": "Google brand color for the link.", + "name": "--intergalactic-header-border-primary", + "value": "oklch(0.137 0.026 175.7 / 0.161)", "components": [] }, { - "name": "--intergalactic-brand-google-green", - "value": "#016723", - "description": "Google green brand color for the link.", + "name": "--intergalactic-header-border-secondary", + "value": "oklch(0.137 0.026 175.7 / 0.161)", "components": [] }, { - "name": "--intergalactic-brand-google-my-business", - "value": "#1a73e8", - "description": "Official Google My Business brand fill for logos and icons in approved placements; follow Google brand guidelines for size and clear space.", + "name": "--intergalactic-icon-non-interactive", + "value": "oklch(0.094 0.024 153.9 / 0.503)", + "description": "Color for the default non-interactive icon.", "components": [] }, { - "name": "--intergalactic-keyboard-focus-outline", - "value": "oklch(0.424 0.269 264.2 / 0.469)", - "description": "Color for default keyboard focus outline styles.", + "name": "--intergalactic-icon-primary-critical", + "value": "oklch(0.552 0.226 28.7 / 0.848)", + "description": "Semantic error icon.", "components": [ - "base-components" + "notice" ] }, { - "name": "--intergalactic-keyboard-focus-invalid-outline", - "value": "oklch(0.628 0.257 28.9 / 0.652)", - "description": "Color for keyboard focus outline styles for elements with invalid state.", + "name": "--intergalactic-icon-primary-critical-hover-active", + "value": "oklch(0.511 0.209 28.7 / 0.91)", + "description": "Red background color for the hover and active states of the primary critical icon. It’s created using a CSS filter with a brightness(0.8), applied to the red-500 color.", "components": [ - "base-trigger", - "bulk-textarea", - "checkbox", - "inline-input", - "input", - "radio", - "textarea" + "notice" ] }, { - "name": "--intergalactic-keyboard-focus-valid-outline", - "value": "oklch(0.711 0.146 166.9)", - "description": "Color for keyboard focus outline styles for elements with valid state.", - "components": [ - "bulk-textarea", - "inline-input", - "input", - "textarea" - ] + "name": "--intergalactic-icon-primary-info", + "value": "oklch(0.372 0.253 264.1 / 0.598)", + "description": "Primary link-lookalike icon.", + "components": [] }, { - "name": "--intergalactic-keyboard-focus-invert-outline", - "value": "oklch(1 0 0 / 0.7)", - "description": "Color for keyboard focus outline styles to use on the dark and color background.", + "name": "--intergalactic-icon-primary-info-hover-active", + "value": "oklch(0.322 0.222 264.1 / 0.641)", + "description": "Blue background color for the hover and active states of the primary link-lookalike icon. It’s created using a CSS filter with a brightness(0.8), applied to the blue-500 color.", + "components": [] + }, + { + "name": "--intergalactic-icon-primary-invert", + "value": "oklch(0.998 0.003 173.3 / 0.808)", + "description": "Inverted version of the primary icon.", "components": [ - "base-components", - "carousel", - "wizard" + "carousel" ] }, { - "name": "--intergalactic-overlay-primary", - "value": "oklch(0.109 0.023 165.5 / 0.337)", - "description": "Use for cover the content under the modal dialogs.", + "name": "--intergalactic-icon-primary-invert-hover-active", + "value": "oklch(0.998 0.003 169.6 / 0.746)", + "description": "Hover and active (selected) states of the inverted version of the primary icon.", + "components": [] + }, + { + "name": "--intergalactic-icon-primary-neutral", + "value": "oklch(0.092 0.024 152.2 / 0.526)", + "description": "Default icon weight on normal backgrounds—stronger emphasis than secondary icons.", "components": [ - "modal", - "side-panel" + "accordion", + "base-trigger", + "carousel", + "drag-and-drop", + "feature-highlight", + "notice", + "typography" ] }, { - "name": "--intergalactic-overlay-secondary", - "value": "oklch(0.118 0.023 170.1 / 0.262)", - "description": "Use for the secondary modal dialogs that were opened upon the other modal dialogs.", + "name": "--intergalactic-icon-primary-neutral-hover-active", + "value": "oklch(0.088 0.026 147.7 / 0.583)", + "description": "Gray background color for the hover and active states of the primary neutral icon. It’s created using a CSS filter with a brightness(0.8), applied to the gray-500 color.", "components": [ - "modal", - "spin-container" + "feature-highlight", + "notice" ] }, { - "name": "--intergalactic-overlay-limitation-primary", - "value": "oklch(from oklch(0.98 0.001 180) l c h / 0.85)", - "description": "Use as a primary cover of the content under the messages about limitations.", - "components": [] - }, - { - "name": "--intergalactic-overlay-limitation-secondary", - "value": "oklch(1 0 0 / 0.85)", - "description": "Use as a secondary cover of the content under the messages about limitations.", + "name": "--intergalactic-icon-primary-success", + "value": "oklch(0.595 0.124 165.4)", + "description": "Semantic success icon.", "components": [ - "data-table", - "spin-container" + "notice" ] }, { - "name": "--intergalactic-tooltip-default", - "value": "oklch(1 0 0)", - "description": "Default Tooltip background.", + "name": "--intergalactic-icon-primary-success-hover-active", + "value": "oklch(0.545 0.115 164.9)", + "description": "Green background color for the hover and active states of the primary success icon. It’s created using a CSS filter with a brightness(0.8), applied to the green-500 color.", "components": [ - "tooltip" + "notice" ] }, { - "name": "--intergalactic-tooltip-warning", - "value": "oklch(0.958 0.029 5.7)", - "description": "Warning Tooltip background.", + "name": "--intergalactic-icon-primary-warning", + "value": "oklch(0.728 0.188 51.8)", + "description": "Semantic warning icon.", "components": [ - "tooltip" + "dot", + "notice" ] }, { - "name": "--intergalactic-tooltip-invert", - "value": "oklch(0.23 0.01 140)", - "description": "Inverted version of the default Tooltip background.", + "name": "--intergalactic-icon-primary-warning-hover-active", + "value": "oklch(0.531 0.169 39.3)", + "description": "Orange background color for the hover and active states of the primary warning icon. It’s created using a CSS filter with a brightness(0.8), applied to the orange-500 color.", "components": [ - "base-components", - "tooltip" + "notice" ] }, { - "name": "--intergalactic-neighbor-location-neutral", - "value": "oklch(1 0 0 / 0.5)", - "description": "Neutral border of the components that are combined with neighbor-location property.", + "name": "--intergalactic-icon-secondary-critical", + "value": "oklch(0.628 0.257 28.9 / 0.652)", + "description": "Softer error icon for dense UI or inline hints where the surface should stay calm.", "components": [] }, { - "name": "--intergalactic-neighbor-location-invert", - "value": "oklch(0 0 0 / 0.5)", - "description": "Inverted border of the components that are combined with neighbor-location property.", + "name": "--intergalactic-icon-secondary-critical-hover-active", + "value": "oklch(0.628 0.257 28.5 / 0.763)", + "description": "Red background color for the hover and active states of the secondary critical icon. It’s created using a CSS filter with a brightness(0.8), applied to the red-300 color.", "components": [] }, { - "name": "--intergalactic-scroll-area-shadow-left", - "value": "linear-gradient(to right, oklch(from oklch(0.23 0.01 140) l c h / 0.08) 20.55%, transparent 100%)", - "description": "Left-to-right fade shadow for the ScrollArea.", - "components": [ - "base-components", - "data-table" - ] + "name": "--intergalactic-icon-secondary-info", + "value": "oklch(0.424 0.269 264.2 / 0.469)", + "description": "Secondary link-lookalike icon.", + "components": [] }, { - "name": "--intergalactic-scroll-area-shadow-right", - "value": "linear-gradient(to left, oklch(from oklch(0.23 0.01 140) l c h / 0.08) 20.55%, transparent 100%)", - "description": "Right-to-left fade shadow for the ScrollArea.", - "components": [ - "base-components", - "data-table" - ] + "name": "--intergalactic-icon-secondary-info-hover-active", + "value": "oklch(0.66 0.145 276.2)", + "description": "Blue background color for the hover and active states of the secondary link-lookalike icon. It’s created using a CSS filter with a brightness(0.8), applied to the blue-300 color.", + "components": [] }, { - "name": "--intergalactic-scroll-area-shadow-top", - "value": "linear-gradient(to bottom, oklch(from oklch(0.23 0.01 140) l c h / 0.08) 20.55%, transparent 100%)", - "description": "Top-to-bottom fade shadow for the ScrollArea.", + "name": "--intergalactic-icon-secondary-neutral", + "value": "oklch(0.104 0.023 162.3 / 0.385)", + "description": "De-emphasized icons for dense layouts (tables, tertiary actions).", "components": [ - "base-components" + "breadcrumbs", + "carousel", + "inline-input", + "input", + "input-number", + "switch", + "typography" ] }, { - "name": "--intergalactic-scroll-area-shadow-bottom", - "value": "linear-gradient(to top, oklch(from oklch(0.23 0.01 140) l c h / 0.08) 20.55%, transparent 100%)", - "description": "Bottom-to-top fade shadow for the ScrollArea.", + "name": "--intergalactic-icon-secondary-neutral-hover-active", + "value": "oklch(0.1 0.023 159.1 / 0.433)", + "description": "Gray background color for the hover and active states of the secondary neutral icon. It’s created using a CSS filter with a brightness(0.8), applied to the gray-300 color.", "components": [ - "base-components" + "data-table", + "inline-input", + "input", + "input-number" ] }, { - "name": "--intergalactic-scroll-area-dropdown-menu-left", - "value": "linear-gradient(to right, #fff 34.38%, transparent 100%)", - "description": "Left-to-right fade shadow for the ScrollArea inside the DropdownMenu.", + "name": "--intergalactic-icon-secondary-success", + "value": "oklch(0.711 0.146 166.9)", + "description": "Softer success icon for dense UI or inline hints where the surface should stay calm.", "components": [ - "base-components" + "inline-input" ] }, { - "name": "--intergalactic-scroll-area-dropdown-menu-right", - "value": "linear-gradient(to left, #fff 34.38%, transparent 100%)", - "description": "Right-to-left fade shadow for the ScrollArea inside the DropdownMenu.", + "name": "--intergalactic-icon-secondary-success-hover-active", + "value": "oklch(0.673 0.139 166.3)", + "description": "Green background color for the hover and active states of the secondary success icon. It’s created using a CSS filter with a brightness(0.8), applied to the green-300 color.", "components": [ - "base-components" + "inline-input" ] }, { - "name": "--intergalactic-scroll-area-dropdown-menu-bottom", - "value": "linear-gradient(to top, #fff 34.38%, transparent 100%)", - "description": "Bottom-to-top fade shadow for the ScrollArea inside the DropdownMenu.", - "components": [ - "base-components" - ] + "name": "--intergalactic-icon-secondary-warning", + "value": "oklch(0.701 0.191 48.1)", + "description": "Softer warning icon for dense UI or inline hints where the surface should stay calm.", + "components": [] }, { - "name": "--intergalactic-scroll-area-dropdown-menu-top", - "value": "linear-gradient(to bottom, #fff 34.38%, transparent 100%)", - "description": "Top-to-bottom fade shadow for the ScrollArea inside the DropdownMenu.", - "components": [ - "base-components" - ] + "name": "--intergalactic-icon-secondary-warning-hover-active", + "value": "oklch(0.662 0.193 43.7)", + "description": "Orange background color for the hover and active states of the secondary warning icon. It’s created using a CSS filter with a brightness(0.8), applied to the orange-300 color.", + "components": [] }, { - "name": "--intergalactic-scroll-bar-background", - "value": "oklch(0.137 0.026 175.7 / 0.161)", - "description": "Background color for ScrollBar.", - "components": [ - "base-components" - ] + "name": "--intergalactic-illustration-blue", + "value": "oklch(0.84 0.081 271.5)", + "description": "⚠️ Use only for illustrations.", + "components": [] }, { - "name": "--intergalactic-tag-primary-gray-normal", - "value": "#ecedec", - "description": "Gray background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the gray-500 color with 0.2 opacity on the white background underneath.", + "name": "--intergalactic-illustration-border", + "value": "oklch(0.53 0.004 149.6)", + "description": "Border color for illustrations.", "components": [] }, { - "name": "--intergalactic-tag-primary-gray-hover-active", - "value": "#e2e3e2", - "description": "Gray background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the gray-500 color with 0.3 opacity on the white background underneath.", + "name": "--intergalactic-illustration-gray", + "value": "oklch(0.9 0.002 177)", + "description": "Gray fill color for illustrations.", "components": [] }, { - "name": "--intergalactic-tag-primary-gray-text", - "value": "#6a6c6a", - "description": "Gray text for the primary gray tag.", + "name": "--intergalactic-illustration-green", + "value": "oklch(0.812 0.152 170)", + "description": "⚠️ Use only for illustrations.", "components": [] }, { - "name": "--intergalactic-tag-primary-blue-normal", - "value": "#e7e5ff", - "description": "Blue background color for primary tag. It’s built with CSS filter brightness(150%) that was applied to blue-500 color with 0.2 opacity on the white background underneath.", + "name": "--intergalactic-illustration-orange", + "value": "oklch(0.823 0.154 61.9)", + "description": "⚠️ Use only for illustrations.", "components": [] }, { - "name": "--intergalactic-tag-primary-blue-hover-active", - "value": "#dcd8ff", - "description": "Blue background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the blue-500 color with 0.3 opacity on the white background underneath. ", + "name": "--intergalactic-illustration-pink", + "value": "oklch(0.76 0.214 330)", + "description": "⚠️ Use only for illustrations.", "components": [] }, { - "name": "--intergalactic-tag-primary-blue-text", - "value": "#5c53d9", - "description": "Blue text for the primary blue tag.", + "name": "--intergalactic-illustration-red", + "value": "oklch(0.737 0.192 22.1)", + "description": "⚠️ Use only for illustrations.", "components": [] }, { - "name": "--intergalactic-tag-primary-green-normal", - "value": "#ccf4e8", - "description": "Green background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the green-500 color with 0.2 opacity on the white background underneath.", + "name": "--intergalactic-illustration-salad", + "value": "oklch(0.922 0.098 132.7)", + "description": "⚠️ Use only for illustrations.", "components": [] }, { - "name": "--intergalactic-tag-primary-green-hover-active", - "value": "#b3eedd", - "description": "Green background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the green-500 color with 0.3 opacity on the white background underneath.", + "name": "--intergalactic-illustration-violet", + "value": "oklch(0.709 0.186 301.9)", + "description": "⚠️ Use only for illustrations.", "components": [] }, { - "name": "--intergalactic-tag-primary-green-text", - "value": "#00845f", - "description": "Green text for the primary green tag.", + "name": "--intergalactic-illustration-yellow", + "value": "oklch(0.924 0.109 96.8)", + "description": "⚠️ Use only for illustrations.", "components": [] }, { - "name": "--intergalactic-tag-primary-orange-normal", - "value": "#ffdecc", - "description": "Orange background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the orange-500 color with 0.2 opacity on the white background underneath.", + "name": "--intergalactic-keyboard-focus-invalid-outline", + "value": "oklch(0.628 0.257 28.9 / 0.652)", + "description": "Color for keyboard focus outline styles for elements with invalid state.", + "components": [ + "base-trigger", + "bulk-textarea", + "checkbox", + "inline-input", + "input", + "radio", + "textarea" + ] + }, + { + "name": "--intergalactic-keyboard-focus-invert-outline", + "value": "oklch(1 0 0 / 0.7)", + "description": "Color for keyboard focus outline styles to use on the dark and color background.", + "components": [ + "base-components", + "carousel", + "wizard" + ] + }, + { + "name": "--intergalactic-keyboard-focus-outline", + "value": "oklch(0.424 0.269 264.2 / 0.469)", + "description": "Color for default keyboard focus outline styles.", + "components": [ + "base-components" + ] + }, + { + "name": "--intergalactic-keyboard-focus-valid-outline", + "value": "oklch(0.711 0.146 166.9)", + "description": "Color for keyboard focus outline styles for elements with valid state.", + "components": [ + "bulk-textarea", + "inline-input", + "input", + "textarea" + ] + }, + { + "name": "--intergalactic-neighbor-location-invert", + "value": "oklch(0 0 0 / 0.5)", + "description": "Inverted border of the components that are combined with neighbor-location property.", + "components": [] + }, + { + "name": "--intergalactic-neighbor-location-neutral", + "value": "oklch(1 0 0 / 0.5)", + "description": "Neutral border of the components that are combined with neighbor-location property.", + "components": [] + }, + { + "name": "--intergalactic-notice-bubble-bg", + "value": "oklch(0.23 0.01 140)", + "description": "Background of the NoticeBubble.", "components": [] }, { - "name": "--intergalactic-tag-primary-orange-hover-active", - "value": "#ffceb3", - "description": "Orange background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the orange-500 color with 0.3 opacity on the white background underneath.", + "name": "--intergalactic-notice-bubble-bg-critical", + "value": "oklch(0.64 0.226 24.5)", + "description": "Critical background of the NoticeBubble.", "components": [] }, { - "name": "--intergalactic-tag-primary-orange-text", - "value": "#b83c00", - "description": "Orange text for the primary orange tag.", + "name": "--intergalactic-overlay-limitation-primary", + "value": "oklch(from oklch(0.98 0.001 180) l c h / 0.85)", + "description": "Use as a primary cover of the content under the messages about limitations.", "components": [] }, { - "name": "--intergalactic-tag-primary-red-normal", - "value": "#ffd3d4", - "description": "Red background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the red-500 color with 0.2 opacity on the white background underneath.", - "components": [] + "name": "--intergalactic-overlay-limitation-secondary", + "value": "oklch(1 0 0 / 0.85)", + "description": "Use as a secondary cover of the content under the messages about limitations.", + "components": [ + "data-table", + "spin-container" + ] }, { - "name": "--intergalactic-tag-primary-red-hover-active", - "value": "#ffbdbf", - "description": "Red background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the red-500 color with 0.3 opacity on the white background underneath.", - "components": [] + "name": "--intergalactic-overlay-primary", + "value": "oklch(0.109 0.023 165.5 / 0.337)", + "description": "Use for cover the content under the modal dialogs.", + "components": [ + "modal", + "side-panel" + ] }, { - "name": "--intergalactic-tag-primary-red-text", - "value": "#c7161b", - "description": "Red text for the primary red tag.", - "components": [] + "name": "--intergalactic-overlay-secondary", + "value": "oklch(0.118 0.023 170.1 / 0.262)", + "description": "Use for the secondary modal dialogs that were opened upon the other modal dialogs.", + "components": [ + "modal", + "spin-container" + ] }, { - "name": "--intergalactic-tag-primary-violet-normal", - "value": "#f2d8ff", - "description": "Violet background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the violet-500 color with 0.2 opacity on the white background underneath.", + "name": "--intergalactic-page-bg", + "value": "oklch(0.97 0.001 180)", + "description": "Background fill for the whole product page.", "components": [] }, { - "name": "--intergalactic-tag-primary-violet-hover-active", - "value": "#ecc5ff", - "description": "Violet background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the violet-500 color with 0.3 opacity on the white background underneath.", + "name": "--intergalactic-pills-bg-hover", + "value": "oklch(0.98 0.001 180)", + "description": "Hover state of the Pills background.", "components": [] }, { - "name": "--intergalactic-tag-primary-violet-text", - "value": "#8029ec", - "description": "Violet text for the primary violet tag.", + "name": "--intergalactic-pills-bg-normal", + "value": "oklch(1 0 0)", + "description": "Background of the Pills in its normal state.", "components": [] }, { - "name": "--intergalactic-tag-primary-yellow-normal", - "value": "#fde5cc", - "description": "Yellow background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the yellow-500 color with 0.2 opacity on the white background underneath.", + "name": "--intergalactic-pills-bg-selected", + "value": "oklch(0.959 0.021 267.8)", + "description": "Background of the selected Pill.", "components": [] }, { - "name": "--intergalactic-tag-primary-yellow-hover-active", - "value": "#fcd8b3", - "description": "Yellow background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the yellow-500 color with 0.3 opacity on the white background underneath.", + "name": "--intergalactic-pills-border", + "value": "oklch(0.137 0.026 175.7 / 0.161)", + "description": "Border color of the Pills in its normal state.", "components": [] }, { - "name": "--intergalactic-tag-primary-yellow-text", - "value": "#a35400", - "description": "Yellow text for the primary yellow tag.", + "name": "--intergalactic-pills-border-selected", + "value": "oklch(0.7 0.131 275.2)", + "description": "Border color of the selected Pill.", "components": [] }, { - "name": "--intergalactic-tag-primary-white-normal", - "value": "rgba(255, 255, 255, 0.15)", - "description": "Primary tag on bold or dark backgrounds—translucent fill for contrast in the normal state.", + "name": "--intergalactic-progress-bar-bg", + "value": "oklch(0.96 0.001 180)", + "description": "Background color of the ProgressBar.", "components": [ - "tag" + "progress-bar" ] }, { - "name": "--intergalactic-tag-primary-white-hover-active", - "value": "rgba(255, 255, 255, 0.3)", - "description": "Hover and active (selected) state of the primary white tag.", + "name": "--intergalactic-progress-bar-bg-hover", + "value": "oklch(0.88 0.002 175.6)", + "description": "Hover state of the background color of the ProgressBar.", "components": [] }, { - "name": "--intergalactic-tag-primary-white-text", - "value": "#ffffff", - "description": "White text for the primary white tag.", - "components": [] + "name": "--intergalactic-progress-bar-bg-invert", + "value": "oklch(0.45 0.004 143.7)", + "description": "Inverted version of the background color of the ProgressBar.", + "components": [ + "progress-bar" + ] }, { - "name": "--intergalactic-tag-secondary-normal", - "value": "#ffffff", - "description": "Background color for the default secondary tag.", + "name": "--intergalactic-progress-bar-bg-invert-hover", + "value": "oklch(0.56 0.003 151.9)", + "description": "Hover state for the inverted version of the background color of the ProgressBar.", "components": [] }, { - "name": "--intergalactic-tag-secondary-hover-active", - "value": "#f4f5f5", - "description": "Hover and active (selected) states of the background color for the default secondary tag.", - "components": [] + "name": "--intergalactic-progress-bar-pattern-gradient", + "value": "linear-gradient(-45deg, oklch(0 0 0 / 0.1) 25%, oklch(0.96 0.001 180) 0%, oklch(0.96 0.001 180) 50%, oklch(0 0 0 / 0.1) 0%, oklch(0 0 0 / 0.1) 75%, oklch(0.96 0.001 180) 0%)", + "description": "Null value gradient for the ProgressBar.", + "components": [ + "progress-bar" + ] }, { - "name": "--intergalactic-tag-secondary-white-normal", - "value": "rgba(255, 255, 255, 0)", - "description": "Secondary/outline tag on bold or dark backgrounds—minimal fill in the normal state.", - "components": [] + "name": "--intergalactic-progress-bar-value-bg", + "value": "oklch(1 0 0)", + "description": "Base value background for the ProgressBar. It is used to create gradients for the values.", + "components": [ + "progress-bar" + ] }, { - "name": "--intergalactic-tag-secondary-white-hover-active", - "value": "rgba(255, 255, 255, 0.1)", - "description": "Active state of the secondary white tag.", + "name": "--intergalactic-progress-bar-value-gradient", + "value": "linear-gradient(-45deg, oklch(from oklch(0.74 0.17 303) calc(l - 0.05) c h) 25%, oklch(0.74 0.17 303) 0%, oklch(0.74 0.17 303) 50%, oklch(from oklch(0.74 0.17 303) calc(l - 0.05) c h) 0%, oklch(from oklch(0.74 0.17 303) calc(l - 0.05) c h) 75%, oklch(0.74 0.17 303) 0%)", + "description": "Value with gradient for the ProgressBar.", + "components": [ + "progress-bar" + ] + }, + { + "name": "--intergalactic-radio-bg-normal", + "value": "oklch(1 0 0)", + "description": "Background color of the Radio.", "components": [] }, { - "name": "--intergalactic-tag-secondary-white-text", - "value": "#ffffff", - "description": "White text for the secondary white tag.", + "name": "--intergalactic-radio-bg-selected", + "value": "oklch(0.23 0.01 140)", + "description": "Selected state of the Radio background.", "components": [] }, { - "name": "--intergalactic-tag-secondary-gray-text", - "value": "#6a6c6a", - "description": "Gray text for the default secondary tag.", + "name": "--intergalactic-radio-border", + "value": "oklch(0.137 0.026 175.7 / 0.161)", + "description": "Border color of the Radio.", "components": [] }, { - "name": "--intergalactic-chart-palette-order-1", - "value": "oklch(0.58 0.168 278.2)", - "description": "1 color in the default list of colors for charts.", + "name": "--intergalactic-scroll-area-dropdown-menu-bottom", + "value": "linear-gradient(to top, #fff 34.38%, transparent 100%)", + "description": "Bottom-to-top fade shadow for the ScrollArea inside the DropdownMenu.", "components": [ - "d3-chart", - "mini-chart" + "base-components" ] }, { - "name": "--intergalactic-chart-palette-order-2", - "value": "oklch(0.82 0.15 170)", - "description": "2 color in the default list of colors for charts.", + "name": "--intergalactic-scroll-area-dropdown-menu-left", + "value": "linear-gradient(to right, #fff 34.38%, transparent 100%)", + "description": "Left-to-right fade shadow for the ScrollArea inside the DropdownMenu.", "components": [ - "d3-chart" + "base-components" ] }, { - "name": "--intergalactic-chart-palette-order-3", - "value": "oklch(0.74 0.17 303)", - "description": "3 color in the default list of colors for charts.", - "components": [] - }, - { - "name": "--intergalactic-chart-palette-order-4", - "value": "oklch(0.82 0.18 80)", - "description": "4 color in the default list of colors for charts.", - "components": [] - }, - { - "name": "--intergalactic-chart-palette-order-5", - "value": "oklch(0.74 0.19 22)", - "description": "5 color in the default list of colors for charts.", - "components": [] + "name": "--intergalactic-scroll-area-dropdown-menu-right", + "value": "linear-gradient(to left, #fff 34.38%, transparent 100%)", + "description": "Right-to-left fade shadow for the ScrollArea inside the DropdownMenu.", + "components": [ + "base-components" + ] }, { - "name": "--intergalactic-chart-palette-order-6", - "value": "oklch(0.82 0.088 272.1)", - "description": "6 color in the default list of colors for charts.", - "components": [] + "name": "--intergalactic-scroll-area-dropdown-menu-top", + "value": "linear-gradient(to bottom, #fff 34.38%, transparent 100%)", + "description": "Top-to-bottom fade shadow for the ScrollArea inside the DropdownMenu.", + "components": [ + "base-components" + ] }, { - "name": "--intergalactic-chart-palette-order-7", - "value": "oklch(0.74 0.225 330)", - "description": "7 color in the default list of colors for charts.", - "components": [] + "name": "--intergalactic-scroll-area-shadow-bottom", + "value": "linear-gradient(to top, oklch(from oklch(0.23 0.01 140) l c h / 0.08) 20.55%, transparent 100%)", + "description": "Bottom-to-top fade shadow for the ScrollArea.", + "components": [ + "base-components" + ] }, { - "name": "--intergalactic-chart-palette-order-8", - "value": "oklch(0.82 0.19 143)", - "description": "8 color in the default list of colors for charts.", - "components": [] + "name": "--intergalactic-scroll-area-shadow-left", + "value": "linear-gradient(to right, oklch(from oklch(0.23 0.01 140) l c h / 0.08) 20.55%, transparent 100%)", + "description": "Left-to-right fade shadow for the ScrollArea.", + "components": [ + "base-components", + "data-table" + ] }, { - "name": "--intergalactic-chart-palette-order-9", - "value": "oklch(0.53 0.157 279.2)", - "description": "9 color in the default list of colors for charts.", + "name": "--intergalactic-scroll-area-shadow-right", + "value": "linear-gradient(to left, oklch(from oklch(0.23 0.01 140) l c h / 0.08) 20.55%, transparent 100%)", + "description": "Right-to-left fade shadow for the ScrollArea.", "components": [ - "d3-chart" + "base-components", + "data-table" ] }, { - "name": "--intergalactic-chart-palette-order-10", - "value": "oklch(0.74 0.17 170)", - "description": "10 color in the default list of colors for charts.", - "components": [] + "name": "--intergalactic-scroll-area-shadow-top", + "value": "linear-gradient(to bottom, oklch(from oklch(0.23 0.01 140) l c h / 0.08) 20.55%, transparent 100%)", + "description": "Top-to-bottom fade shadow for the ScrollArea.", + "components": [ + "base-components" + ] }, { - "name": "--intergalactic-chart-palette-order-11", - "value": "oklch(0.74 0.17 72)", - "description": "11 color in the default list of colors for charts.", - "components": [] + "name": "--intergalactic-scroll-bar-background", + "value": "oklch(0.137 0.026 175.7 / 0.161)", + "description": "Background color for ScrollBar.", + "components": [ + "base-components" + ] }, { - "name": "--intergalactic-chart-palette-order-12", - "value": "oklch(0.82 0.18 330)", - "description": "12 color in the default list of colors for charts.", + "name": "--intergalactic-sidebar-nav-bg", + "value": "oklch(0.97 0.001 180)", + "description": "Background fill for the product page sidebar.", "components": [] }, { - "name": "--intergalactic-chart-palette-order-13", - "value": "oklch(0.64 0.22 147)", - "description": "13 color in the default list of colors for charts.", + "name": "--intergalactic-sidebar-nav-border", + "value": "oklch(0.137 0.026 175.7 / 0.161)", + "description": "Color for the border of the page sidebar.", "components": [] }, { - "name": "--intergalactic-chart-palette-order-14", - "value": "oklch(0.82 0.118 303)", - "description": "14 color in the default list of colors for charts.", + "name": "--intergalactic-sidebar-nav-control-active", + "value": "oklch(0.176 0.033 175.7 / 0.084)", + "description": "Sidebar navigation row active background.", "components": [] }, { - "name": "--intergalactic-chart-palette-order-15", - "value": "oklch(0.64 0.226 24.5)", - "description": "15 color in the default list of colors for charts.", + "name": "--intergalactic-sidebar-nav-control-hover", + "value": "oklch(0.176 0.033 175.6 / 0.056)", + "description": "Sidebar navigation row hover background.", "components": [] }, { - "name": "--intergalactic-chart-palette-order-16", - "value": "oklch(0.74 0.17 170)", - "description": "16 color in the default list of colors for charts.", + "name": "--intergalactic-sidebar-nav-control-icon-active", + "value": "oklch(0.53 0.004 149.6)", + "description": "Sidebar navigation icon color for the active item.", "components": [] }, { - "name": "--intergalactic-chart-palette-order-17", - "value": "oklch(0.82 0.088 272.1)", - "description": "17 color in the default list of colors for charts.", + "name": "--intergalactic-sidebar-nav-control-icon-normal", + "value": "oklch(0.58 0.003 153.3)", + "description": "Sidebar navigation icon color.", "components": [] }, { - "name": "--intergalactic-chart-palette-order-18", - "value": "oklch(0.74 0.23 146)", - "description": "18 color in the default list of colors for charts.", + "name": "--intergalactic-sidebar-nav-control-text-active", + "value": "oklch(0.23 0.01 140)", + "description": "Sidebar navigation label color for the active item.", "components": [] }, { - "name": "--intergalactic-chart-palette-order-19", - "value": "oklch(0.64 0.16 64)", - "description": "19 color in the default list of colors for charts.", + "name": "--intergalactic-sidebar-nav-control-text-normal", + "value": "oklch(0.53 0.004 149.6)", + "description": "Sidebar navigation label color.", "components": [] }, { - "name": "--intergalactic-chart-palette-order-20", - "value": "oklch(0.82 0.13 20)", - "description": "20 color in the default list of colors for charts.", - "components": [] + "name": "--intergalactic-skeleton-bg", + "value": "oklch(0.9 0.002 177)", + "description": "Default color for the Skeleton.", + "components": [ + "skeleton" + ] }, { - "name": "--intergalactic-chart-palette-order-21", - "value": "oklch(0.53 0.138 59.9)", - "description": "21 color in the default list of colors for charts.", - "components": [] + "name": "--intergalactic-skeleton-bg-invert", + "value": "oklch(0.3 0.007 140)", + "description": "Inverted version of the default color for the Skeleton.", + "components": [ + "skeleton" + ] }, { - "name": "--intergalactic-chart-palette-order-22", - "value": "oklch(0.64 0.223 299.3)", - "description": "22 color in the default list of colors for charts.", + "name": "--intergalactic-spin-bg", + "value": "oklch(0.137 0.026 175.7 / 0.161)", + "description": "Track color of the Spin loader.", "components": [] }, { - "name": "--intergalactic-chart-palette-order-23", - "value": "oklch(0.64 0.262 330)", - "description": "23 color in the default list of colors for charts.", + "name": "--intergalactic-spin-bg-invert", + "value": "oklch(0.995 0.008 147.4 / 0.391)", + "description": "Inverted track color of the Spin loader.", "components": [] }, { - "name": "--intergalactic-chart-palette-order-24", - "value": "oklch(0.53 0.189 147)", - "description": "24 color in the default list of colors for charts.", + "name": "--intergalactic-tab-line-border", + "value": "oklch(0.137 0.026 175.7 / 0.161)", + "description": "Border color of the TabLine in its normal state.", "components": [] }, { - "name": "--intergalactic-chart-palette-order-total-amount", - "value": "oklch(0.64 0.003 157.8)", - "description": "Use it to show total value on the chart.", + "name": "--intergalactic-tab-line-border-active", + "value": "oklch(0.7 0.131 275.2)", + "description": "Border color of the TabLine in its active state.", "components": [] }, { - "name": "--intergalactic-chart-palette-order-other-data", - "value": "oklch(0.82 0.002 171.1)", - "description": "Use it to indicate voids, missing or some other data on the chart.", + "name": "--intergalactic-tab-line-border-hover", + "value": "oklch(0.137 0.026 175.7 / 0.161)", + "description": "Border color of the TabLine in its hover state.", "components": [] }, { - "name": "--intergalactic-chart-palette-order-null", - "value": "oklch(0.9 0.002 177)", - "description": "Use it to show null value on the chart.", + "name": "--intergalactic-table-border-accent", + "value": "oklch(0.137 0.026 175.7 / 0.161)", + "description": "Accent borders in the Table: for the accordion in the table and for the header of the secondary table.", "components": [ - "d3-chart" + "data-table" ] }, { - "name": "--intergalactic-chart-grid-line", - "value": "oklch(0.95 0.002 180)", - "description": "Grid and axis guide lines for charts.", - "components": [ - "d3-chart" - ] + "name": "--intergalactic-table-td-cell", + "value": "oklch(1 0 0)", + "description": "Background of the default cell in the Table.", + "components": [] }, { - "name": "--intergalactic-chart-grid-x-axis", - "value": "oklch(0.88 0.002 175.6)", - "description": "X-axis line on the chart grid.", + "name": "--intergalactic-table-td-cell-accordion", + "value": "oklch(1 0 0)", + "description": "Background of the cell used for Accordion or actions row, in the Table.", "components": [ - "d3-chart" + "data-table" ] }, { - "name": "--intergalactic-chart-grid-y-accent-hover-line", - "value": "oklch(0.88 0.002 175.6)", - "description": "Accent line for the hover state on the chart grid.", + "name": "--intergalactic-table-td-cell-active", + "value": "oklch(0.97 0.001 180)", + "description": "Background of the default active cell in the Table.", "components": [ - "d3-chart" + "data-table" ] }, { - "name": "--intergalactic-chart-grid-text-label", - "value": "oklch(0.088 0.026 147.7 / 0.583)", - "description": "Text label on the chart grid.", + "name": "--intergalactic-table-td-cell-critical", + "value": "oklch(0.977 0.016 1.8)", + "description": "Background of the cell with critical information in the Table.", "components": [ - "d3-chart" + "data-table" ] }, { - "name": "--intergalactic-chart-grid-bar-chart-hover", - "value": "oklch(0.177 0.033 175.6 / 0.028)", - "description": "Background color for the hover state of a bar on the chart grid.", + "name": "--intergalactic-table-td-cell-critical-active", + "value": "oklch(0.938 0.042 8.4)", + "description": "Background of the active cell with critical information in the Table.", "components": [ - "d3-chart" + "data-table" ] }, { - "name": "--intergalactic-chart-grid-bar-chart-base-bg", - "value": "oklch(0.96 0.001 180)", - "description": "Default background color of a bar in the BarChart.", + "name": "--intergalactic-table-td-cell-critical-hover", + "value": "oklch(0.958 0.029 5.7)", + "description": "Background of the hovered cell with critical information in the Table.", "components": [ - "d3-chart", - "mini-chart" + "data-table" ] }, { - "name": "--intergalactic-chart-grid-period-bg", - "value": "oklch(0.96 0.001 180)", - "description": "Use for highlighting a period on the chart grid.", + "name": "--intergalactic-table-td-cell-hover", + "value": "oklch(0.98 0.001 180)", + "description": "Background of the default hovered cell in the Table.", "components": [ - "d3-chart" + "data-table" ] }, { - "name": "--intergalactic-chart-grid-period-pattern", - "value": "oklch(0.95 0.002 180)", - "description": "Stripe color for diagonal pattern background.", + "name": "--intergalactic-table-td-cell-new", + "value": "oklch(0.977 0.036 184)", + "description": "Background of the cell with new information in the Table.", "components": [ - "d3-chart" + "data-table" ] }, { - "name": "--intergalactic-chart-grid-border", - "value": "#fff", - "description": "Border for distinguishing data sets and chart dots on the chart grid.", + "name": "--intergalactic-table-td-cell-new-active", + "value": "oklch(0.94 0.074 178.1)", + "description": "Background of the active cell with new information in the Table.", "components": [ - "d3-chart", - "mini-chart" + "data-table" ] }, { - "name": "--intergalactic-chart-x-axis-accent-period-active", - "value": "oklch(0.176 0.033 175.6 / 0.056)", - "description": "Background color for the clickable date on the X-axis of the chart grid.", - "components": [] - }, - { - "name": "--intergalactic-chart-x-axis-accent-data-start-tracking", - "value": "oklch(0.889 0.178 168.8 / 0.21)", - "description": "Background color for the \"Start tracking\" date on the X-axis of the chart grid.", - "components": [] - }, - { - "name": "--intergalactic-header-bg", - "value": "oklch(0.97 0.001 180)", - "components": [] - }, - { - "name": "--intergalactic-header-border-primary", - "value": "oklch(0.137 0.026 175.7 / 0.161)", - "components": [] - }, - { - "name": "--intergalactic-header-border-secondary", - "value": "oklch(0.137 0.026 175.7 / 0.161)", - "components": [] - }, - { - "name": "--intergalactic-page-bg", - "value": "oklch(0.97 0.001 180)", - "description": "Background fill for the whole product page.", - "components": [] - }, - { - "name": "--intergalactic-footer-bg", - "value": "oklch(0.97 0.001 180)", - "description": "Background fill for the product page footer.", - "components": [] - }, - { - "name": "--intergalactic-sidebar-nav-bg", - "value": "oklch(0.97 0.001 180)", - "description": "Background fill for the product page sidebar.", - "components": [] - }, - { - "name": "--intergalactic-sidebar-nav-border", - "value": "oklch(0.137 0.026 175.7 / 0.161)", - "description": "Color for the border of the page sidebar.", - "components": [] - }, - { - "name": "--intergalactic-sidebar-nav-control-hover", - "value": "oklch(0.176 0.033 175.6 / 0.056)", - "description": "Sidebar navigation row hover background.", - "components": [] - }, - { - "name": "--intergalactic-sidebar-nav-control-active", - "value": "oklch(0.176 0.033 175.7 / 0.084)", - "description": "Sidebar navigation row active background.", - "components": [] + "name": "--intergalactic-table-td-cell-new-hover", + "value": "oklch(0.96 0.057 179.7)", + "description": "Background of the hovered cell with new information in the Table.", + "components": [ + "data-table" + ] }, { - "name": "--intergalactic-sidebar-nav-control-text-normal", - "value": "oklch(0.53 0.004 149.6)", - "description": "Sidebar navigation label color.", - "components": [] + "name": "--intergalactic-table-td-cell-selected", + "value": "oklch(0.98 0.01 267.6)", + "description": "Background of the selected cell in the Table.", + "components": [ + "data-table" + ] }, { - "name": "--intergalactic-sidebar-nav-control-text-active", - "value": "oklch(0.23 0.01 140)", - "description": "Sidebar navigation label color for the active item.", - "components": [] + "name": "--intergalactic-table-td-cell-selected-active", + "value": "oklch(0.939 0.032 268)", + "description": "Background of the active selected cell in the Table.", + "components": [ + "data-table" + ] }, { - "name": "--intergalactic-sidebar-nav-control-icon-normal", - "value": "oklch(0.58 0.003 153.3)", - "description": "Sidebar navigation icon color.", - "components": [] + "name": "--intergalactic-table-td-cell-selected-hover", + "value": "oklch(0.959 0.021 267.8)", + "description": "Background of the hovered selected cell in the Table.", + "components": [ + "data-table" + ] }, { - "name": "--intergalactic-sidebar-nav-control-icon-active", - "value": "oklch(0.53 0.004 149.6)", - "description": "Sidebar navigation icon color for the active item.", - "components": [] + "name": "--intergalactic-table-td-cell-unread", + "value": "oklch(0.98 0.001 180)", + "description": "Background of the unread cell in the Table.", + "components": [ + "data-table" + ] }, { - "name": "--intergalactic-slider-rating-normal", - "value": "oklch(0.7 0.003 162.2)", - "description": "Icon color for the SliderRating component in its normal state.", + "name": "--intergalactic-table-td-cell-warning", + "value": "oklch(0.979 0.03 88.1)", + "description": "Background of the cell with warning information in the Table.", "components": [ - "feedback-form" + "data-table" ] }, { - "name": "--intergalactic-slider-rating-hover-active", - "value": "oklch(0.66 0.212 300.1)", - "description": "Icon color for the SliderRating component in its hovered and active states.", + "name": "--intergalactic-table-td-cell-warning-active", + "value": "oklch(0.939 0.069 79.8)", + "description": "Background of the active cell with warning information in the Table.", "components": [ - "feedback-form" + "data-table" ] }, { - "name": "--intergalactic-control-switch-bg", - "value": "oklch(0.74 0.003 165.2)", - "description": "Subtle background of the Switch control.", + "name": "--intergalactic-table-td-cell-warning-hover", + "value": "oklch(0.96 0.05 83.1)", + "description": "Background of the hovered cell with warning information in the Table.", "components": [ - "switch" + "data-table" ] }, { - "name": "--intergalactic-control-switch-bg-info-active", - "value": "oklch(0.23 0.01 140)", - "description": "Active background of the Switch control.", + "name": "--intergalactic-table-th-gradient", + "value": "linear-gradient(to right, transparent 0%, oklch(0.9 0.002 177) 100%)", + "description": "Background gradient for sorting icon that absolute positioned in the table head.", "components": [] }, { - "name": "--intergalactic-control-switch-bg-success-active", - "value": "oklch(0.64 0.161 170)", - "description": "Active background of the Switch control.", - "components": [] + "name": "--intergalactic-table-th-primary-cell", + "value": "oklch(0.98 0.001 180)", + "description": "Background of the header cell in the primary Table.", + "components": [ + "data-table" + ] }, { - "name": "--intergalactic-control-switch-handle", - "value": "#ffffff", - "description": "Handle color of the Switch control.", + "name": "--intergalactic-table-th-primary-cell-active", + "value": "oklch(0.94 0.002 180)", + "description": "Background of the active header cell in the primary Table.", "components": [] }, { - "name": "--intergalactic-dot-notification-bg", - "value": "oklch(0.728 0.188 51.8)", - "description": "Background color of the notification Dot.", - "components": [] + "name": "--intergalactic-table-th-primary-cell-hover", + "value": "oklch(0.94 0.002 180)", + "description": "Background of the hovered header cell in the primary Table.", + "components": [ + "data-table" + ] }, { - "name": "--intergalactic-dot-notification-text", - "value": "oklch(0.999 0.001 180 / 0.949)", - "description": "Text color of the notification Dot.", - "components": [] + "name": "--intergalactic-table-th-secondary-cell", + "value": "oklch(1 0 0)", + "description": "Background of the header cell in the secondary Table.", + "components": [ + "data-table" + ] }, { - "name": "--intergalactic-tooltip-text", - "value": "oklch(0.1 0.03 137 / 0.899)", - "description": "Text color of the default Tooltip.", + "name": "--intergalactic-tag-additional-border", + "value": "oklch(0.137 0.026 175.7 / 0.161)", + "description": "Border color of the additional Tag.", "components": [] }, { - "name": "--intergalactic-tooltip-text-invert", - "value": "oklch(0.999 0.001 180 / 0.949)", - "description": "Text color of the inverted Tooltip.", + "name": "--intergalactic-tag-additional-hover-active", + "value": "oklch(0.98 0.001 180)", + "description": "Hover and active states of the additional Tag background.", "components": [] }, { - "name": "--intergalactic-tab-line-border", - "value": "oklch(0.137 0.026 175.7 / 0.161)", - "description": "Border color of the TabLine in its normal state.", + "name": "--intergalactic-tag-additional-normal", + "value": "oklch(1 0 0)", + "description": "Background of the additional Tag in its normal state.", "components": [] }, { - "name": "--intergalactic-tab-line-border-hover", - "value": "oklch(0.137 0.026 175.7 / 0.161)", - "description": "Border color of the TabLine in its hover state.", + "name": "--intergalactic-tag-primary-bg-hover", + "value": "oklch(0.98 0.001 180)", + "description": "Hover state of the primary Tag background.", "components": [] }, { - "name": "--intergalactic-tab-line-border-active", - "value": "oklch(0.7 0.131 275.2)", - "description": "Border color of the TabLine in its active state.", + "name": "--intergalactic-tag-primary-bg-normal", + "value": "oklch(1 0 0)", + "description": "Background of the primary Tag in its normal state.", "components": [] }, { - "name": "--intergalactic-slider-bar", - "value": "oklch(0.96 0.001 180)", - "description": "Background of the Slider bar.", + "name": "--intergalactic-tag-primary-blue-hover-active", + "value": "#dcd8ff", + "description": "Blue background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the blue-500 color with 0.3 opacity on the white background underneath. ", "components": [] }, { - "name": "--intergalactic-slider-bar-value", - "value": "oklch(0.23 0.01 140)", - "description": "Filled part of the Slider bar.", + "name": "--intergalactic-tag-primary-blue-normal", + "value": "#e7e5ff", + "description": "Blue background color for primary tag. It’s built with CSS filter brightness(150%) that was applied to blue-500 color with 0.2 opacity on the white background underneath.", "components": [] }, { - "name": "--intergalactic-slider-bar-hover", - "value": "oklch(0.88 0.002 175.6)", - "description": "Hover state of the Slider bar.", + "name": "--intergalactic-tag-primary-blue-text", + "value": "#5c53d9", + "description": "Blue text for the primary blue tag.", "components": [] }, { - "name": "--intergalactic-slider-knob", - "value": "#ffffff", - "description": "Knob fill color of the Slider.", + "name": "--intergalactic-tag-primary-border", + "value": "oklch(1 0 0)", + "description": "Border color of the primary Tag.", "components": [] }, { - "name": "--intergalactic-slider-knob-border", - "value": "oklch(0.23 0.01 140)", - "description": "Knob border color of the Slider in its normal state.", + "name": "--intergalactic-tag-primary-gray-hover-active", + "value": "#e2e3e2", + "description": "Gray background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the gray-500 color with 0.3 opacity on the white background underneath.", "components": [] }, { - "name": "--intergalactic-slider-knob-border-hover", - "value": "oklch(0.32 0.007 140)", - "description": "Knob border color of the Slider in its hover state.", + "name": "--intergalactic-tag-primary-gray-normal", + "value": "#ecedec", + "description": "Gray background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the gray-500 color with 0.2 opacity on the white background underneath.", "components": [] }, { - "name": "--intergalactic-pills-bg-normal", - "value": "oklch(1 0 0)", - "description": "Background of the Pills in its normal state.", + "name": "--intergalactic-tag-primary-gray-text", + "value": "#6a6c6a", + "description": "Gray text for the primary gray tag.", "components": [] }, { - "name": "--intergalactic-pills-border", - "value": "oklch(0.137 0.026 175.7 / 0.161)", - "description": "Border color of the Pills in its normal state.", + "name": "--intergalactic-tag-primary-green-hover-active", + "value": "#b3eedd", + "description": "Green background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the green-500 color with 0.3 opacity on the white background underneath.", "components": [] }, { - "name": "--intergalactic-pills-bg-hover", - "value": "oklch(0.98 0.001 180)", - "description": "Hover state of the Pills background.", + "name": "--intergalactic-tag-primary-green-normal", + "value": "#ccf4e8", + "description": "Green background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the green-500 color with 0.2 opacity on the white background underneath.", "components": [] }, { - "name": "--intergalactic-pills-bg-selected", - "value": "oklch(0.959 0.021 267.8)", - "description": "Background of the selected Pill.", + "name": "--intergalactic-tag-primary-green-text", + "value": "#00845f", + "description": "Green text for the primary green tag.", "components": [] }, { - "name": "--intergalactic-pills-border-selected", - "value": "oklch(0.7 0.131 275.2)", - "description": "Border color of the selected Pill.", + "name": "--intergalactic-tag-primary-orange-hover-active", + "value": "#ffceb3", + "description": "Orange background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the orange-500 color with 0.3 opacity on the white background underneath.", "components": [] }, { - "name": "--intergalactic-control-text-primary", - "value": "oklch(0.1 0.03 137 / 0.899)", - "description": "Primary text color for form controls.", + "name": "--intergalactic-tag-primary-orange-normal", + "value": "#ffdecc", + "description": "Orange background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the orange-500 color with 0.2 opacity on the white background underneath.", "components": [] }, { - "name": "--intergalactic-control-text-secondary", - "value": "oklch(0.088 0.026 147.7 / 0.583)", - "description": "Secondary text color for form controls.", + "name": "--intergalactic-tag-primary-orange-text", + "value": "#b83c00", + "description": "Orange text for the primary orange tag.", "components": [] }, { - "name": "--intergalactic-control-text-tertiary", - "value": "oklch(0.088 0.026 147.7 / 0.583)", - "description": "Tertiary text color for form controls.", + "name": "--intergalactic-tag-primary-red-hover-active", + "value": "#ffbdbf", + "description": "Red background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the red-500 color with 0.3 opacity on the white background underneath.", "components": [] }, { - "name": "--intergalactic-control-text-primary-invert", - "value": "oklch(0.999 0.001 180 / 0.949)", - "description": "Inverted primary text color for form controls.", + "name": "--intergalactic-tag-primary-red-normal", + "value": "#ffd3d4", + "description": "Red background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the red-500 color with 0.2 opacity on the white background underneath.", "components": [] }, { - "name": "--intergalactic-control-select-trigger-normal", - "value": "oklch(1 0 0)", - "description": "Background of the Select trigger in its normal state.", + "name": "--intergalactic-tag-primary-red-text", + "value": "#c7161b", + "description": "Red text for the primary red tag.", "components": [] }, { - "name": "--intergalactic-control-select-trigger-hover", - "value": "oklch(0.98 0.001 180)", - "description": "Background of the Select trigger in its hover state.", + "name": "--intergalactic-tag-primary-violet-hover-active", + "value": "#ecc5ff", + "description": "Violet background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the violet-500 color with 0.3 opacity on the white background underneath.", "components": [] }, { - "name": "--intergalactic-control-select-trigger-active", - "value": "oklch(1 0 0)", - "description": "Background of the Select trigger in its active state.", + "name": "--intergalactic-tag-primary-violet-normal", + "value": "#f2d8ff", + "description": "Violet background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the violet-500 color with 0.2 opacity on the white background underneath.", "components": [] }, { - "name": "--intergalactic-spin-bg", - "value": "oklch(0.137 0.026 175.7 / 0.161)", - "description": "Track color of the Spin loader.", + "name": "--intergalactic-tag-primary-violet-text", + "value": "#8029ec", + "description": "Violet text for the primary violet tag.", "components": [] }, { - "name": "--intergalactic-spin-bg-invert", - "value": "oklch(0.995 0.008 147.4 / 0.391)", - "description": "Inverted track color of the Spin loader.", + "name": "--intergalactic-tag-primary-white-hover-active", + "value": "rgba(255, 255, 255, 0.3)", + "description": "Hover and active (selected) state of the primary white tag.", "components": [] }, { - "name": "--intergalactic-illustration-gray", - "value": "oklch(0.9 0.002 177)", - "description": "Gray fill color for illustrations.", + "name": "--intergalactic-tag-primary-white-normal", + "value": "rgba(255, 255, 255, 0.15)", + "description": "Primary tag on bold or dark backgrounds—translucent fill for contrast in the normal state.", + "components": [ + "tag" + ] + }, + { + "name": "--intergalactic-tag-primary-white-text", + "value": "#ffffff", + "description": "White text for the primary white tag.", "components": [] }, { - "name": "--intergalactic-illustration-border", - "value": "oklch(0.53 0.004 149.6)", - "description": "Border color for illustrations.", + "name": "--intergalactic-tag-primary-yellow-hover-active", + "value": "#fcd8b3", + "description": "Yellow background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the yellow-500 color with 0.3 opacity on the white background underneath.", "components": [] }, { - "name": "--intergalactic-chart-data-success", - "value": "oklch(0.74 0.17 170)", - "description": "Success data color for charts.", + "name": "--intergalactic-tag-primary-yellow-normal", + "value": "#fde5cc", + "description": "Yellow background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the yellow-500 color with 0.2 opacity on the white background underneath.", "components": [] }, { - "name": "--intergalactic-chart-data-warning", - "value": "oklch(0.74 0.19 53)", - "description": "Warning data color for charts.", + "name": "--intergalactic-tag-primary-yellow-text", + "value": "#a35400", + "description": "Yellow text for the primary yellow tag.", "components": [] }, { - "name": "--intergalactic-chart-data-critical", - "value": "oklch(0.64 0.226 24.5)", - "description": "Critical data color for charts.", + "name": "--intergalactic-tag-secondary-border", + "value": "oklch(0.137 0.026 175.7 / 0.161)", + "description": "Border color of the secondary Tag.", "components": [] }, { - "name": "--intergalactic-wizard-bg", - "value": "oklch(1 0 0)", - "description": "Main background of the Wizard.", + "name": "--intergalactic-tag-secondary-border-invert", + "value": "oklch(0.995 0.008 145.9 / 0.369)", + "description": "Inverted border color of the secondary Tag.", "components": [] }, { - "name": "--intergalactic-wizard-sidebar-bg", - "value": "oklch(0.64 0.223 299.3)", - "description": "Background of the Wizard sidebar.", + "name": "--intergalactic-tag-secondary-gray-text", + "value": "#6a6c6a", + "description": "Gray text for the default secondary tag.", "components": [] }, { - "name": "--intergalactic-wizard-sidebar-control", - "value": "oklch(0.64 0.223 299.3)", - "description": "Background of the control in the Wizard sidebar in its normal state.", + "name": "--intergalactic-tag-secondary-hover-active", + "value": "#f4f5f5", + "description": "Hover and active (selected) states of the background color for the default secondary tag.", "components": [] }, { - "name": "--intergalactic-wizard-sidebar-control-hover", - "value": "oklch(0.6 0.244 297.8)", - "description": "Hover state of the control in the Wizard sidebar.", + "name": "--intergalactic-tag-secondary-normal", + "value": "#ffffff", + "description": "Background color for the default secondary tag.", "components": [] }, { - "name": "--intergalactic-wizard-sidebar-control-active", - "value": "oklch(0.58 0.254 297.1)", - "description": "Active state of the control in the Wizard sidebar.", + "name": "--intergalactic-tag-secondary-white-hover-active", + "value": "rgba(255, 255, 255, 0.1)", + "description": "Active state of the secondary white tag.", "components": [] }, { - "name": "--intergalactic-wizard-sidebar-text-primary", - "value": "oklch(0.999 0.001 180 / 0.949)", - "description": "Primary text color in the Wizard sidebar.", + "name": "--intergalactic-tag-secondary-white-normal", + "value": "rgba(255, 255, 255, 0)", + "description": "Secondary/outline tag on bold or dark backgrounds—minimal fill in the normal state.", "components": [] }, { - "name": "--intergalactic-wizard-sidebar-text-secondary", - "value": "oklch(0.997 0.004 165.9 / 0.684)", - "description": "Secondary text color in the Wizard sidebar.", + "name": "--intergalactic-tag-secondary-white-text", + "value": "#ffffff", + "description": "White text for the secondary white tag.", "components": [] }, { - "name": "--intergalactic-dropdown-menu-item-selected-border", - "value": "oklch(0.23 0.01 140)", - "description": "Border color of the selected item in the DropdownMenu.", + "name": "--intergalactic-text-advertising", + "value": "oklch(0.23 0.113 296)", + "description": "Promotional or sponsored emphasis (ads, marketing callouts)—use sparingly so it stays noticeable.", "components": [] }, { - "name": "--intergalactic-notice-bubble-bg", - "value": "oklch(0.23 0.01 140)", - "description": "Background of the NoticeBubble.", + "name": "--intergalactic-text-critical", + "value": "oklch(0.53 0.206 27.3)", + "description": "Text associated with critical states and data.", "components": [] }, { - "name": "--intergalactic-notice-bubble-bg-critical", - "value": "oklch(0.64 0.226 24.5)", - "description": "Critical background of the NoticeBubble.", + "name": "--intergalactic-text-critical-hover-active", + "value": "oklch(0.51 0.202 27.8)", + "description": "Hover and active states for the text associated with critical states and data.", "components": [] }, { - "name": "--intergalactic-tag-primary-bg-normal", - "value": "oklch(1 0 0)", - "description": "Background of the primary Tag in its normal state.", - "components": [] + "name": "--intergalactic-text-hint", + "value": "oklch(0.088 0.026 147.7 / 0.583)", + "description": "Supplementary helper text near controls (short guidance), distinct from placeholder text inside inputs.", + "components": [ + "button", + "d3-chart" + ] }, { - "name": "--intergalactic-tag-primary-bg-hover", - "value": "oklch(0.98 0.001 180)", - "description": "Hover state of the primary Tag background.", - "components": [] + "name": "--intergalactic-text-hint-hover-active", + "value": "oklch(0.086 0.026 145.8 / 0.605)", + "description": "Hover and active states of the hint link text.", + "components": [ + "button", + "typography" + ] }, { - "name": "--intergalactic-tag-primary-border", - "value": "oklch(1 0 0)", - "description": "Border color of the primary Tag.", + "name": "--intergalactic-text-hint-invert", + "value": "oklch(0.75 0.003 165.9)", + "description": "Inverted version of the hint link text.", "components": [] }, { - "name": "--intergalactic-tag-secondary-border", - "value": "oklch(0.137 0.026 175.7 / 0.161)", - "description": "Border color of the secondary Tag.", + "name": "--intergalactic-text-hint-invert-hover-active", + "value": "oklch(0.85 0.002 173.3)", + "description": "Hover and active states of the inverted version of the hint link text.", "components": [] }, { - "name": "--intergalactic-tag-secondary-border-invert", - "value": "oklch(0.995 0.008 145.9 / 0.369)", - "description": "Inverted border color of the secondary Tag.", + "name": "--intergalactic-text-large-critical", + "value": "oklch(0.53 0.206 27.3)", + "description": "Text with font-size ≥20px associated with critical states and data.", "components": [] }, { - "name": "--intergalactic-tag-additional-normal", - "value": "oklch(1 0 0)", - "description": "Background of the additional Tag in its normal state.", + "name": "--intergalactic-text-large-critical-hover-active", + "value": "oklch(0.51 0.202 27.8)", + "description": "Hover and active states of the text with font-size ≥20px associated with critical states and data.", "components": [] }, { - "name": "--intergalactic-tag-additional-hover-active", - "value": "oklch(0.98 0.001 180)", - "description": "Hover and active states of the additional Tag background.", - "components": [] + "name": "--intergalactic-text-large-info", + "value": "oklch(0.53 0.157 279.2)", + "description": "Link text with font-size ≥20px.", + "components": [ + "d3-chart" + ] }, { - "name": "--intergalactic-tag-additional-border", - "value": "oklch(0.137 0.026 175.7 / 0.161)", - "description": "Border color of the additional Tag.", + "name": "--intergalactic-text-large-info-hover-active", + "value": "oklch(0.51 0.152 279.7)", + "description": "Hover and active states of the link text with font-size ≥20px.", "components": [] }, { - "name": "--intergalactic-checkbox-border", - "value": "oklch(0.137 0.026 175.7 / 0.161)", - "description": "Border color of the Checkbox.", - "components": [] + "name": "--intergalactic-text-large-secondary", + "value": "oklch(0.088 0.026 147.7 / 0.583)", + "description": "Secondary text. Use with font-size ≥20px.", + "components": [ + "typography" + ] }, { - "name": "--intergalactic-checkbox-bg-normal", - "value": "oklch(1 0 0)", - "description": "Background color of the Checkbox.", + "name": "--intergalactic-text-large-success", + "value": "oklch(0.53 0.142 170)", + "description": "Text with font-size ≥20px associated with success states and data.", "components": [] }, { - "name": "--intergalactic-checkbox-bg-selected", - "value": "oklch(0.23 0.01 140)", - "description": "Background color of the checked Checkbox.", + "name": "--intergalactic-text-large-success-hover-active", + "value": "oklch(0.51 0.137 170)", + "description": "Hover and active states of the text with font-size ≥20px associated with success states and data.", "components": [] }, { - "name": "--intergalactic-checkbox-button-border", - "value": "oklch(0.137 0.026 175.7 / 0.161)", - "description": "Border color of the Checkbox button in its normal state.", - "components": [] + "name": "--intergalactic-text-link", + "value": "oklch(0.53 0.21 263)", + "description": "Default interactive link color for unfollowed links.", + "components": [ + "button", + "link", + "tab-panel", + "typography" + ] }, { - "name": "--intergalactic-checkbox-button-border-selected", - "value": "oklch(0.7 0.131 275.2)", - "description": "Border color of the Checkbox button in its active state.", - "components": [] + "name": "--intergalactic-text-link-hover-active", + "value": "oklch(0.51 0.202 263)", + "description": "Hover and active states for the link text.", + "components": [ + "button", + "link", + "tab-panel", + "typography" + ] }, { - "name": "--intergalactic-checkbox-button-bg-normal", - "value": "oklch(1 0 0)", - "description": "Normal state of the Checkbox button background.", - "components": [] + "name": "--intergalactic-text-link-invert", + "value": "oklch(0.75 0.125 265.3)", + "description": "Inverted version of the link text. Use on dark background only.", + "components": [ + "notice-bubble" + ] }, { - "name": "--intergalactic-checkbox-button-bg-hover", - "value": "oklch(0.527 0.264 262.9 / 0.039)", - "description": "Hover state of the Checkbox button background.", + "name": "--intergalactic-text-link-invert-hover", + "value": "oklch(0.85 0.075 265.9)", + "description": "Hover and active states of the inverted version of the link text. Use on dark background only.", "components": [] }, { - "name": "--intergalactic-checkbox-button-bg-selected", - "value": "oklch(0.524 0.266 263.1 / 0.116)", - "description": "Selected state of the Checkbox button background.", - "components": [] + "name": "--intergalactic-text-link-visited", + "value": "oklch(0.53 0.26 296)", + "description": "Visited link state so users can tell visited destinations apart from default links.", + "components": [ + "link" + ] }, { - "name": "--intergalactic-checkbox-button-bg-selected-hover", - "value": "oklch(0.524 0.266 263.1 / 0.116)", - "description": "Hover for a selected state of the Checkbox button background.", - "components": [] + "name": "--intergalactic-text-placeholder", + "value": "oklch(0.098 0.023 157.4 / 0.457)", + "description": "Placeholder text color for inputs and fields.", + "components": [ + "base-trigger", + "bulk-textarea", + "inline-input", + "input", + "input-mask", + "textarea" + ] + }, + { + "name": "--intergalactic-text-primary", + "value": "oklch(0.1 0.03 137 / 0.899)", + "description": "Default body and UI copy; strongest reading emphasis for primary content.", + "components": [ + "accordion", + "badge", + "base-components", + "base-trigger", + "breadcrumbs", + "bulk-textarea", + "button", + "card", + "checkbox", + "d3-chart", + "data-table", + "date-picker", + "dropdown", + "dropdown-menu", + "errors", + "feature-popover", + "fullscreen-modal", + "inline-input", + "input", + "input-mask", + "modal", + "notice", + "pagination", + "pills", + "product-head", + "radio", + "side-panel", + "switch", + "tab-line", + "tab-panel", + "textarea", + "time-picker", + "tooltip", + "typography" + ] }, { - "name": "--intergalactic-radio-border", - "value": "oklch(0.137 0.026 175.7 / 0.161)", - "description": "Border color of the Radio.", - "components": [] + "name": "--intergalactic-text-primary-invert", + "value": "oklch(0.999 0.001 180 / 0.949)", + "description": "Inverted version of the primary text.", + "components": [ + "badge", + "base-components", + "button", + "date-picker", + "dot", + "feature-highlight", + "feature-popover", + "notice-bubble", + "tag", + "tooltip", + "wizard" + ] }, { - "name": "--intergalactic-radio-bg-normal", - "value": "oklch(1 0 0)", - "description": "Background color of the Radio.", - "components": [] + "name": "--intergalactic-text-secondary", + "value": "oklch(0.088 0.026 147.7 / 0.583)", + "description": "Supporting text: captions, metadata, hints in flowing copy—visually quieter than primary body text.", + "components": [ + "breadcrumbs", + "bulk-textarea", + "button", + "card", + "counter", + "d3-chart", + "date-picker", + "dropdown", + "dropdown-menu", + "flags", + "fullscreen-modal", + "pills", + "slider", + "switch", + "tab-panel", + "time-picker", + "typography", + "widget-empty" + ] }, { - "name": "--intergalactic-radio-bg-selected", - "value": "oklch(0.23 0.01 140)", - "description": "Selected state of the Radio background.", + "name": "--intergalactic-text-secondary-invert", + "value": "oklch(0.997 0.004 165.9 / 0.684)", + "description": "Inverted version of the secondary text.", "components": [] }, { - "name": "--intergalactic-opacity-fader-primary", - "value": "0.32", - "description": "Primary opacity for content fader overlays.", + "name": "--intergalactic-text-success", + "value": "oklch(0.53 0.142 170)", + "description": "Text associated with success states and data.", "components": [] }, { - "name": "--intergalactic-opacity-fader-secondary", - "value": "0.26", - "description": "Secondary opacity for content fader overlays.", + "name": "--intergalactic-text-success-hover-active", + "value": "oklch(0.51 0.137 170)", + "description": "Hover and active states for the text associated with success states and data.", "components": [] }, { - "name": "--intergalactic-opacity-limit-fader-primary", - "value": "0.85", - "description": "Primary opacity for limitation fader overlays.", - "components": [] + "name": "--intergalactic-tooltip-bg-default", + "value": "oklch(1 0 0)", + "description": "Default Tooltip background.", + "components": [ + "tooltip" + ] }, { - "name": "--intergalactic-opacity-limit-fader-secondary", - "value": "0.851", - "description": "Secondary opacity for limitation fader overlays.", - "components": [] + "name": "--intergalactic-tooltip-bg-invert", + "value": "oklch(0.23 0.01 140)", + "description": "Inverted version of the default Tooltip background.", + "components": [ + "base-components", + "tooltip" + ] }, { - "name": "--intergalactic-badge-bg-admin", - "value": "oklch(0.58 0.168 278.2)", - "description": "Background color of the admin Badge.", - "components": [] + "name": "--intergalactic-tooltip-bg-warning", + "value": "oklch(0.958 0.029 5.7)", + "description": "Warning Tooltip background.", + "components": [ + "tooltip" + ] }, { - "name": "--intergalactic-badge-bg-alpha", - "value": "oklch(0.64 0.226 24.5)", - "description": "Background color of the alpha Badge.", - "components": [] + "name": "--intergalactic-tooltip-border-invert", + "value": "oklch(0.995 0.008 145.9 / 0.369)", + "description": "Border of the Tooltip with dark theme.", + "components": [ + "base-components", + "tooltip" + ] }, { - "name": "--intergalactic-badge-bg-beta", - "value": "oklch(0.64 0.196 47.3)", - "description": "Background color of the beta Badge.", + "name": "--intergalactic-tooltip-text", + "value": "oklch(0.1 0.03 137 / 0.899)", + "description": "Text color of the default Tooltip.", "components": [] }, { - "name": "--intergalactic-badge-bg-new", - "value": "oklch(0.64 0.161 170)", - "description": "Background color of the new Badge.", + "name": "--intergalactic-tooltip-text-invert", + "value": "oklch(0.999 0.001 180 / 0.949)", + "description": "Text color of the inverted Tooltip.", "components": [] }, { - "name": "--intergalactic-badge-bg-soon", - "value": "oklch(0.64 0.003 157.8)", - "description": "Background color of the soon Badge.", + "name": "--intergalactic-wizard-bg", + "value": "oklch(1 0 0)", + "description": "Main background of the Wizard.", "components": [] }, { - "name": "--intergalactic-badge-bg-unavailable", - "value": "oklch(0.9 0.002 177)", - "description": "Background color of the unavailable Badge.", + "name": "--intergalactic-wizard-sidebar-bg", + "value": "oklch(0.64 0.223 299.3)", + "description": "Background of the Wizard sidebar.", "components": [] }, { - "name": "--intergalactic-badge-bg-invert", - "value": "#ffffff", - "description": "Background color of the inverted Badge.", + "name": "--intergalactic-wizard-sidebar-control", + "value": "oklch(0.64 0.223 299.3)", + "description": "Background of the control in the Wizard sidebar in its normal state.", "components": [] }, { - "name": "--intergalactic-badge-text-primary", - "value": "oklch(0.1 0.03 137 / 0.899)", - "description": "Primary text color for Badge.", + "name": "--intergalactic-wizard-sidebar-control-active", + "value": "oklch(0.58 0.254 297.1)", + "description": "Active state of the control in the Wizard sidebar.", "components": [] }, { - "name": "--intergalactic-badge-text-secondary", - "value": "oklch(0.088 0.026 147.7 / 0.583)", - "description": "Secondary text color for Badge.", + "name": "--intergalactic-wizard-sidebar-control-hover", + "value": "oklch(0.6 0.244 297.8)", + "description": "Hover state of the control in the Wizard sidebar.", "components": [] }, { - "name": "--intergalactic-badge-text-primary-invert", + "name": "--intergalactic-wizard-sidebar-text-primary", "value": "oklch(0.999 0.001 180 / 0.949)", - "description": "Inverted primary text color for Badge.", - "components": [] - }, - { - "name": "--intergalactic-feature-popover-text", - "value": "oklch(0.1 0.03 137 / 0.899)", - "description": "Text color of the FeaturePopover.", - "components": [] - }, - { - "name": "--intergalactic-feature-popover-dot", - "value": "oklch(0.88 0.078 303)", - "description": "Color of the outer border of the FeaturePopover.Spot.", + "description": "Primary text color in the Wizard sidebar.", "components": [] }, { - "name": "--intergalactic-feature-popover-text-invert", - "value": "oklch(0.999 0.001 180 / 0.949)", - "description": "Inverted text color of the FeaturePopover.", + "name": "--intergalactic-wizard-sidebar-text-secondary", + "value": "oklch(0.997 0.004 165.9 / 0.684)", + "description": "Secondary text color in the Wizard sidebar.", "components": [] }, { @@ -3106,31 +3082,6 @@ "description": "Use for rounding Checkbox.", "components": [] }, - { - "name": "--intergalactic-counter-rounded", - "value": "12px", - "description": "Rounding for counter/numeric capsules used as small indicators.", - "components": [ - "counter", - "dot" - ] - }, - { - "name": "--intergalactic-tag-rounded", - "value": "24px", - "description": "Corner radius for Tag (including removable tags) in dense UI.", - "components": [ - "tag" - ] - }, - { - "name": "--intergalactic-switch-rounded", - "value": "24px", - "description": "Pill-shaped rounding for Switch geometry (full rounded track/thumb pattern).", - "components": [ - "switch" - ] - }, { "name": "--intergalactic-control-rounded", "value": "6px", @@ -3152,6 +3103,43 @@ "wizard" ] }, + { + "name": "--intergalactic-counter-rounded", + "value": "12px", + "description": "Rounding for counter/numeric capsules used as small indicators.", + "components": [ + "counter", + "dot" + ] + }, + { + "name": "--intergalactic-modal-rounded", + "value": "14px", + "description": "Use for rounding all kinds of big modal dialogs (e.g., Modal, Wizard).", + "components": [ + "modal", + "wizard" + ] + }, + { + "name": "--intergalactic-pills-rounded", + "value": "6px", + "description": "Use for rounding Pills.", + "components": [] + }, + { + "name": "--intergalactic-popper-rounded", + "value": "6px", + "description": "Use for rounding all kinds of poppers and dropdowns.", + "components": [ + "base-components", + "d3-chart", + "dropdown", + "feature-popover", + "notice-bubble", + "tooltip" + ] + }, { "name": "--intergalactic-progress-bar-rounded", "value": "6px", @@ -3176,33 +3164,21 @@ ] }, { - "name": "--intergalactic-popper-rounded", - "value": "6px", - "description": "Use for rounding all kinds of poppers and dropdowns.", + "name": "--intergalactic-switch-rounded", + "value": "24px", + "description": "Pill-shaped rounding for Switch geometry (full rounded track/thumb pattern).", "components": [ - "base-components", - "d3-chart", - "dropdown", - "feature-popover", - "notice-bubble", - "tooltip" + "switch" ] }, { - "name": "--intergalactic-modal-rounded", - "value": "14px", - "description": "Use for rounding all kinds of big modal dialogs (e.g., Modal, Wizard).", + "name": "--intergalactic-tag-rounded", + "value": "24px", + "description": "Corner radius for Tag (including removable tags) in dense UI.", "components": [ - "modal", - "wizard" + "tag" ] }, - { - "name": "--intergalactic-pills-rounded", - "value": "6px", - "description": "Use for rounding Pills.", - "components": [] - }, { "name": "--intergalactic-duration-switch", "value": "100", From 7d7e87624dc25fbee75140715e7c4291ce40380e Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Thu, 2 Jul 2026 18:16:37 +0200 Subject: [PATCH 04/12] [theme] added renamed vars to derprecated --- tools/theme/src/theme.ts | 41 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/tools/theme/src/theme.ts b/tools/theme/src/theme.ts index ab864a3c2b..78105da729 100644 --- a/tools/theme/src/theme.ts +++ b/tools/theme/src/theme.ts @@ -2049,6 +2049,28 @@ export const theme: Theme = { }, table: { td: { cell: { actions: { accordion: { value: '{semanticTokens.colors.table_td_cell_accordion}' } } } } }, keyboard: { focus: { outline: { invert: { value: '{semanticTokens.colors.keyboard_focus_invert_outline}' } } } }, + border: { + tooltip: { invert: { value: '{semanticTokens.colors.tooltip_border_invert}' } }, + table: { accent: { value: '{semanticTokens.colors.table_border_accent}' } }, + date: { picker: { range: { comparison: { value: '{semanticTokens.colors.date_picker_border_range_comparison}' } } } }, + }, + tooltip: { + default: { value: '{semanticTokens.colors.tooltip_bg_default}' }, + invert: { value: '{semanticTokens.colors.tooltip_bg_invert}' }, + warning: { value: '{semanticTokens.colors.tooltip_bg_warning}' }, + }, + feature: { + popover: { + bg: { + DEFAULT: { value: '{semanticTokens.colors.feature_popover_accent_bg}' }, + neutral: { value: '{semanticTokens.colors.feature_popover_neutral_bg}' }, + }, + dot: { + outer: { border: { value: '{semanticTokens.colors.feature_popover_accent_dot_outer_border}' } }, + neutral: { outer: { border: { value: '{semanticTokens.colors.feature_popover_neutral_dot_outer_border}' } } }, + }, + }, + }, }, }; @@ -3090,6 +3112,25 @@ type Deprecates = { blue: { 400: Value; 500: Value }; table: { td: { cell: { actions: { accordion: Value } } } }; keyboard: { focus: { outline: { invert: Value } } }; + border: { + tooltip: { invert: Value }; + table: { accent: Value }; + date: { picker: { range: { comparison: Value } } }; + }; + tooltip: { + default: Value; + invert: Value; + warning: Value; + }; + feature: { + popover: { + bg: { DEFAULT: Value; neutral: Value }; + dot: { + outer: { border: Value }; + neutral: { outer: { border: Value } }; + }; + }; + }; }; export type BasicColorKeys = `${keyof BaseTokens['colors']}-${Lightness}`; From c880f63ca5d3e2a0868f45244ef4e0d71f51f4a0 Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Fri, 3 Jul 2026 20:43:16 +0200 Subject: [PATCH 05/12] [theme] added TODO instead of changing styles --- semcore/badge/src/Badge.tsx | 16 +++---- .../src/components/hint/style/hint.shadow.css | 4 +- .../src/components/Body/style.shadow.css | 2 +- .../src/components/Head/style.shadow.css | 2 +- .../src/style/feature-popover.shadow.css | 10 ++-- .../src/style/slider-rating.shadow.css | 6 +-- semcore/tooltip/src/style/tooltip.shadow.css | 16 +++---- .../docs/style/design-tokens/base-tokens.json | 40 ++++++++++++++++ .../style/design-tokens/design-tokens.json | 46 +++++-------------- 9 files changed, 79 insertions(+), 63 deletions(-) diff --git a/semcore/badge/src/Badge.tsx b/semcore/badge/src/Badge.tsx index fc139b2a49..df5e8dd7cd 100644 --- a/semcore/badge/src/Badge.tsx +++ b/semcore/badge/src/Badge.tsx @@ -91,7 +91,7 @@ class RootBadge extends Component { if (type === 'unavailable' && !inverted) { return resolveColor('--intergalactic-text-secondary'); - } // change to --intergalactic-badge-text-secondary + } // TODO: --intergalactic-badge-text-secondary return undefined; } @@ -102,27 +102,27 @@ class RootBadge extends Component { if (inverted) { return resolveColor('--gray-white'); - } // change to --intergalactic-badge-bg-invert + } // TODO: --intergalactic-badge-bg-invert switch (type) { case 'admin': { return resolveColor('--blue-400'); - } // change to --intergalactic-badge-bg-admin + } // TODO: --intergalactic-badge-bg-admin case 'alpha': { return resolveColor('--red-400'); - } // change to --intergalactic-badge-bg-alpha + } // TODO: --intergalactic-badge-bg-alpha case 'beta': { return resolveColor('--orange-400'); - } // change to --intergalactic-badge-bg-beta + } // TODO: --intergalactic-badge-bg-beta case 'new': { return resolveColor('--green-400'); - } // change to --intergalactic-badge-bg-new + } // TODO: --intergalactic-badge-bg-new case 'soon': { return resolveColor('--gray-400'); - } // change to --intergalactic-badge-bg-soon + } // TODO: --intergalactic-badge-bg-soon case 'unavailable': { return resolveColor('--gray-100'); - } // change to --intergalactic-badge-bg-unavailable + } // TODO: --intergalactic-badge-bg-unavailable default: { const t: never = type; throw new Error(`Type can't be "${t}"`); diff --git a/semcore/base-components/src/components/hint/style/hint.shadow.css b/semcore/base-components/src/components/hint/style/hint.shadow.css index fdf1d69857..4c579cb206 100644 --- a/semcore/base-components/src/components/hint/style/hint.shadow.css +++ b/semcore/base-components/src/components/hint/style/hint.shadow.css @@ -8,8 +8,8 @@ SHintPopper { opacity: 0; pointer-events: none; - background: var(--intergalactic-tooltip-bg-invert, oklch(0.23 0.01 140)); - border: 1px solid var(--intergalactic-tooltip-border-invert, oklch(0.995 0.008 145.9 / 0.369)); + background: var(--intergalactic-tooltip-invert, oklch(0.23 0.01 140)); /* TODO: --intergalactic-tooltip-bg-invert */ + border: 1px solid var(--intergalactic-border-tooltip-invert, oklch(0.995 0.008 145.9 / 0.369)); /* TODO: --intergalactic-tooltip-border-invert */ color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); padding: var(--intergalactic-spacing-1x, 4px) var(--intergalactic-spacing-2x, 8px); border-radius: var(--intergalactic-rounded-small, 4px); diff --git a/semcore/data-table/src/components/Body/style.shadow.css b/semcore/data-table/src/components/Body/style.shadow.css index 4b021eecc5..d2d98fd64d 100644 --- a/semcore/data-table/src/components/Body/style.shadow.css +++ b/semcore/data-table/src/components/Body/style.shadow.css @@ -59,7 +59,7 @@ SCollapseRow[gridArea] > SCellWrapper, SRow[isAccordionRow] > SCellWrapper { SCollapseRow[gridArea] > SCellWrapper > SCell:not([withoutBorder]), SAccordionRows > SRow[isAccordionRow]:last-child > SCellWrapper > SCell:not([withoutBorder]) { - border-bottom: 1px solid var(--intergalactic-table-border-accent, oklch(0.137 0.026 175.7 / 0.161)); + border-bottom: 1px solid var(--intergalactic-border-table-accent, oklch(0.137 0.026 175.7 / 0.161)); /* TODO: --intergalactic-table-border-accent */ } SCollapseRow > SCellWrapper > SCell { diff --git a/semcore/data-table/src/components/Head/style.shadow.css b/semcore/data-table/src/components/Head/style.shadow.css index 9bda6155e3..124491bc5c 100644 --- a/semcore/data-table/src/components/Head/style.shadow.css +++ b/semcore/data-table/src/components/Head/style.shadow.css @@ -130,7 +130,7 @@ SColumn[use='primary'] { SColumn[use='secondary'] { padding: var(--intergalactic-spacing-2x, 8px); - border-bottom: 1px solid var(--intergalactic-table-border-accent, oklch(0.137 0.026 175.7 / 0.161)); + border-bottom: 1px solid var(--intergalactic-border-table-accent, oklch(0.137 0.026 175.7 / 0.161)); /* TODO: --intergalactic-table-border-accent */ background-color: var(--intergalactic-table-th-secondary-cell, oklch(1 0 0)); SSortWrapper::before { diff --git a/semcore/feature-popover/src/style/feature-popover.shadow.css b/semcore/feature-popover/src/style/feature-popover.shadow.css index 2592b0487a..8692ffef7c 100644 --- a/semcore/feature-popover/src/style/feature-popover.shadow.css +++ b/semcore/feature-popover/src/style/feature-popover.shadow.css @@ -9,11 +9,11 @@ SFeaturePopover { position: relative; &[theme='accent'] { - background-color: var(--intergalactic-feature-popover-accent-bg, oklch(0.88 0.078 303)); + background-color: var(--intergalactic-feature-popover-bg, oklch(0.88 0.078 303)); /* TODO: --intergalactic-feature-popover-accent-bg */ color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); /* TODO: --intergalactic-feature-popover-text */ } &[theme='neutral'] { - background-color: var(--intergalactic-feature-popover-neutral-bg, oklch(0.23 0.01 140)); + background-color: var(--intergalactic-feature-popover-bg-neutral, oklch(0.23 0.01 140)); /* TODO: --intergalactic-feature-popover-neutral-bg */ color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-feature-popover-text-invert */ } } @@ -94,15 +94,15 @@ SSpot { &[theme='accent'] { &::before { - background-color: var(--intergalactic-feature-popover-accent-dot-outer-border, oklch(0.88 0.078 303)); + background-color: var(--intergalactic-feature-popover-dot-outer-border, oklch(0.88 0.078 303)); /* TODO: --intergalactic-feature-popover-accent-dot-outer-border */ } &::after { - background-color: var(--intergalactic-feature-popover-accent-bg, oklch(0.88 0.078 303)); + background-color: var(--intergalactic-feature-popover-bg, oklch(0.88 0.078 303)); /* TODO: --intergalactic-feature-popover-accent-bg */ } } &[theme='neutral'] { &::before { - background-color: var(--intergalactic-feature-popover-neutral-dot-outer-border, oklch(0.88 0.078 303)); + background-color: var(--intergalactic-feature-popover-dot-neutral-outer-border, oklch(0.88 0.078 303)); /* TODO: --intergalactic-feature-popover-neutral-dot-outer-border */ } &::after { background-color: var(--intergalactic-feature-popover-dot-neutral, oklch(0.88 0.078 303)); diff --git a/semcore/feedback-form/src/style/slider-rating.shadow.css b/semcore/feedback-form/src/style/slider-rating.shadow.css index b349949093..cfce168614 100644 --- a/semcore/feedback-form/src/style/slider-rating.shadow.css +++ b/semcore/feedback-form/src/style/slider-rating.shadow.css @@ -19,10 +19,10 @@ SStar[filled]:active { } SStar path { - fill: var(--intergalactic-control-slider-rating-normal, oklch(0.7 0.003 162.2)); -} + fill: var(--intergalactic-slider-rating-normal, undefined); +} /* TODO: --intergalactic-control-slider-rating-normal */ SStar[filled] path { stroke-width: 0; - fill: var(--intergalactic-control-slider-rating-hover-active, oklch(0.66 0.212 300.1)); + fill: var(--intergalactic-slider-rating-hover-active, undefined); /* TODO: --intergalactic-control-slider-rating-hover-active */ } diff --git a/semcore/tooltip/src/style/tooltip.shadow.css b/semcore/tooltip/src/style/tooltip.shadow.css index d5f5aa2fbf..6a2e50be7c 100644 --- a/semcore/tooltip/src/style/tooltip.shadow.css +++ b/semcore/tooltip/src/style/tooltip.shadow.css @@ -15,18 +15,18 @@ STooltip { /* stylelint-disable-next-line no-duplicate-selectors */ STooltip { - background-color: var(--intergalactic-tooltip-bg-default, oklch(1 0 0)); + background-color: var(--intergalactic-tooltip-default, oklch(1 0 0)); /* TODO: --intergalactic-tooltip-bg-default */ border: 1px solid var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07)); } STooltip[theme='invert'] { color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-tooltip-text-invert */ - background-color: var(--intergalactic-tooltip-bg-invert, oklch(0.23 0.01 140)); - border: 1px solid var(--intergalactic-tooltip-border-invert, oklch(0.995 0.008 145.9 / 0.369)); + background-color: var(--intergalactic-tooltip-invert, oklch(0.23 0.01 140)); /* TODO: --intergalactic-tooltip-bg-invert */ + border: 1px solid var(--intergalactic-border-tooltip-invert, oklch(0.995 0.008 145.9 / 0.369)); /* TODO: --intergalactic-tooltip-border-invert */ } STooltip[theme='warning'] { - background-color: var(--intergalactic-tooltip-bg-warning, oklch(0.958 0.029 5.7)); + background-color: var(--intergalactic-tooltip-warning, oklch(0.958 0.029 5.7)); /* TODO: --intergalactic-tooltip-bg-warning */ border: 1px solid var(--intergalactic-border-critical-active, oklch(0.7 0.21 23)); } @@ -47,15 +47,15 @@ SArrow { /* stylelint-disable-next-line no-duplicate-selectors */ &:before { - border-color: var(--intergalactic-tooltip-bg-default, oklch(1 0 0)); + border-color: var(--intergalactic-tooltip-default, oklch(1 0 0)); /* TODO: --intergalactic-tooltip-bg-default */ } } SArrow[theme='invert'] { - border-color: var(--intergalactic-tooltip-border-invert, oklch(0.995 0.008 145.9 / 0.369)); + border-color: var(--intergalactic-border-tooltip-invert, oklch(0.995 0.008 145.9 / 0.369)); /* TODO: --intergalactic-tooltip-border-invert */ &::before { - border-color: var(--intergalactic-tooltip-bg-invert, oklch(0.23 0.01 140)); + border-color: var(--intergalactic-tooltip-invert, oklch(0.23 0.01 140)); /* TODO: --intergalactic-tooltip-bg-invert */ } } @@ -63,7 +63,7 @@ SArrow[theme='warning'] { border-color: var(--intergalactic-border-critical-active, oklch(0.7 0.21 23)); &::before { - border-color: var(--intergalactic-tooltip-bg-warning, oklch(0.958 0.029 5.7)); + border-color: var(--intergalactic-tooltip-warning, oklch(0.958 0.029 5.7)); /* TODO: --intergalactic-tooltip-bg-warning */ } } diff --git a/website/docs/style/design-tokens/base-tokens.json b/website/docs/style/design-tokens/base-tokens.json index ac5cf5e783..5fc11ae4d0 100644 --- a/website/docs/style/design-tokens/base-tokens.json +++ b/website/docs/style/design-tokens/base-tokens.json @@ -837,5 +837,45 @@ { "name": "--intergalactic-keyboard-focus-outline-invert", "value": "oklch(1 0 0 / 0.7)" + }, + { + "name": "--intergalactic-border-tooltip-invert", + "value": "oklch(0.995 0.008 145.9 / 0.369)" + }, + { + "name": "--intergalactic-border-table-accent", + "value": "oklch(0.137 0.026 175.7 / 0.161)" + }, + { + "name": "--intergalactic-border-date-picker-range-comparison", + "value": "oklch(0.7 0.191 301.5)" + }, + { + "name": "--intergalactic-tooltip-default", + "value": "oklch(1 0 0)" + }, + { + "name": "--intergalactic-tooltip-invert", + "value": "oklch(0.23 0.01 140)" + }, + { + "name": "--intergalactic-tooltip-warning", + "value": "oklch(0.958 0.029 5.7)" + }, + { + "name": "--intergalactic-feature-popover-bg", + "value": "oklch(0.88 0.078 303)" + }, + { + "name": "--intergalactic-feature-popover-bg-neutral", + "value": "oklch(0.23 0.01 140)" + }, + { + "name": "--intergalactic-feature-popover-dot-outer-border", + "value": "oklch(0.88 0.078 303)" + }, + { + "name": "--intergalactic-feature-popover-dot-neutral-outer-border", + "value": "oklch(0.88 0.078 303)" } ] diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json index 3928046e9c..df2c2fd9c5 100644 --- a/website/docs/style/design-tokens/design-tokens.json +++ b/website/docs/style/design-tokens/design-tokens.json @@ -1190,17 +1190,13 @@ "name": "--intergalactic-control-slider-rating-hover-active", "value": "oklch(0.66 0.212 300.1)", "description": "Icon color for the SliderRating component in its hovered and active states.", - "components": [ - "feedback-form" - ] + "components": [] }, { "name": "--intergalactic-control-slider-rating-normal", "value": "oklch(0.7 0.003 162.2)", "description": "Icon color for the SliderRating component in its normal state.", - "components": [ - "feedback-form" - ] + "components": [] }, { "name": "--intergalactic-control-switch-bg", @@ -1466,17 +1462,13 @@ "name": "--intergalactic-feature-popover-accent-bg", "value": "oklch(0.88 0.078 303)", "description": "Color of the outer border of the FeaturePopover.Spot.", - "components": [ - "feature-popover" - ] + "components": [] }, { "name": "--intergalactic-feature-popover-accent-dot-outer-border", "value": "oklch(0.88 0.078 303)", "description": "Color of the outer border of the FeaturePopover.Spot.", - "components": [ - "feature-popover" - ] + "components": [] }, { "name": "--intergalactic-feature-popover-dot", @@ -1496,17 +1488,13 @@ "name": "--intergalactic-feature-popover-neutral-bg", "value": "oklch(0.23 0.01 140)", "description": "Color of the outer border of the FeaturePopover.Spot.", - "components": [ - "feature-popover" - ] + "components": [] }, { "name": "--intergalactic-feature-popover-neutral-dot-outer-border", "value": "oklch(0.88 0.078 303)", "description": "Color of the outer border of the FeaturePopover.Spot.", - "components": [ - "feature-popover" - ] + "components": [] }, { "name": "--intergalactic-feature-popover-text", @@ -2160,9 +2148,7 @@ "name": "--intergalactic-table-border-accent", "value": "oklch(0.137 0.026 175.7 / 0.161)", "description": "Accent borders in the Table: for the accordion in the table and for the header of the secondary table.", - "components": [ - "data-table" - ] + "components": [] }, { "name": "--intergalactic-table-td-cell", @@ -2821,35 +2807,25 @@ "name": "--intergalactic-tooltip-bg-default", "value": "oklch(1 0 0)", "description": "Default Tooltip background.", - "components": [ - "tooltip" - ] + "components": [] }, { "name": "--intergalactic-tooltip-bg-invert", "value": "oklch(0.23 0.01 140)", "description": "Inverted version of the default Tooltip background.", - "components": [ - "base-components", - "tooltip" - ] + "components": [] }, { "name": "--intergalactic-tooltip-bg-warning", "value": "oklch(0.958 0.029 5.7)", "description": "Warning Tooltip background.", - "components": [ - "tooltip" - ] + "components": [] }, { "name": "--intergalactic-tooltip-border-invert", "value": "oklch(0.995 0.008 145.9 / 0.369)", "description": "Border of the Tooltip with dark theme.", - "components": [ - "base-components", - "tooltip" - ] + "components": [] }, { "name": "--intergalactic-tooltip-text", From a902bfaf723e0beb335a55eaa58e8f8d47b13a50 Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Fri, 3 Jul 2026 20:47:00 +0200 Subject: [PATCH 06/12] [theme] added more context for neighborlocation styles --- semcore/button/src/component/Button/button.shadow.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/semcore/button/src/component/Button/button.shadow.css b/semcore/button/src/component/Button/button.shadow.css index 8ad22c0ffa..1bc9544c9c 100644 --- a/semcore/button/src/component/Button/button.shadow.css +++ b/semcore/button/src/component/Button/button.shadow.css @@ -285,11 +285,11 @@ SButton[neighborLocation='left'] { &:after { background-color: var(--intergalactic-border-primary-invert, oklch(0.995 0.008 147.4 / 0.391)); - } /* TODO: ? */ + } /* TODO: need to add a new variables for neighbor location borders based on the final UI */ &[theme='secondary-muted'] { &:after { - background-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); /* TODO: ? */ + background-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); /* TODO: need to add a new variables for neighbor location borders based on the final UI */ } } } From 5bfa958d2874b2d6a6f9901c6cd4c12e0a9b3379 Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Tue, 7 Jul 2026 17:21:19 +0200 Subject: [PATCH 07/12] [theme] a bunch of updates after discussing --- .../checkbox/src/style/checkbox.shadow.css | 2 +- semcore/dot/src/style/dot.shadow.css | 4 +- .../src/components/button/button.shadow.css | 6 +- .../components/checkbox/checkbox.shadow.css | 15 +- .../src/components/pills/pills.shadow.css | 11 +- .../src/components/radio/radio.shadow.css | 5 +- .../src/components/switch/switch.shadow.css | 2 +- .../components/tab-line/tabLine.shadow.css | 4 +- .../src/style/slider-rating.shadow.css | 4 +- .../src/component/score/line.shadow.css | 2 +- semcore/pills/src/style/pills.shadow.css | 10 +- semcore/slider/src/style/slider.shadow.css | 8 +- .../tab-line/src/style/tab-line.shadow.css | 8 +- tools/theme/src/theme.ts | 138 +++++++++++------- .../docs/style/design-tokens/base-tokens.json | 16 ++ .../style/design-tokens/design-tokens.json | 34 ++--- 16 files changed, 154 insertions(+), 115 deletions(-) diff --git a/semcore/checkbox/src/style/checkbox.shadow.css b/semcore/checkbox/src/style/checkbox.shadow.css index 57ac8e2a4e..079fa1add8 100644 --- a/semcore/checkbox/src/style/checkbox.shadow.css +++ b/semcore/checkbox/src/style/checkbox.shadow.css @@ -44,7 +44,7 @@ SCheckbox { left: 0; right: 0; bottom: 0; - background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* TODO: --intergalactic-control-checkbox-bg */ + background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* TODO: --intergalactic-control-checkbox-bg-normal */ border: 1px solid; border-radius: var(--intergalactic-addon-rounded, 4px); /* TODO: --intergalactic-checkbox-rounded */ transition: calc(var(--intergalactic-duration-control, 200) * 1ms) all ease-in-out; diff --git a/semcore/dot/src/style/dot.shadow.css b/semcore/dot/src/style/dot.shadow.css index 9f5272e91a..78e5547217 100644 --- a/semcore/dot/src/style/dot.shadow.css +++ b/semcore/dot/src/style/dot.shadow.css @@ -4,8 +4,8 @@ SDot { justify-content: center; font-size: var(--intergalactic-fs-50, 10px); line-height: normal; - background-color: var(--intergalactic-icon-primary-warning, oklch(0.728 0.188 51.8)); /* TODO: --intergalactic-dot-notification-bg */ - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-dot-notification-text */ + background-color: var(--intergalactic-icon-primary-warning, oklch(0.728 0.188 51.8)); /* TODO: --intergalactic-dot-bg */ + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-dot-text */ box-sizing: border-box; z-index: 1; border-radius: 100%; diff --git a/semcore/feature-highlight/src/components/button/button.shadow.css b/semcore/feature-highlight/src/components/button/button.shadow.css index 9292b19ff7..0b1d8bf3df 100644 --- a/semcore/feature-highlight/src/components/button/button.shadow.css +++ b/semcore/feature-highlight/src/components/button/button.shadow.css @@ -1,5 +1,5 @@ SHighlightedButton[theme='primary-highlighted'] { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */ + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); background-image: linear-gradient(90deg, var(--intergalactic-violet-500, oklch(0.53 0.26 296)), var(--intergalactic-blue-500, oklch(0.53 0.157 279.2)), @@ -10,13 +10,13 @@ SHighlightedButton[theme='primary-highlighted'] { transition: background-position-x 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); &:hover { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */ + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); background-position-x: 1%; } &:active, &[active] { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */ + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); background-image: var(--intergalactic-control-primary-feature-highlight-active, linear-gradient(90deg in oklch, oklch(0.64 0.223 299.3), oklch(0.58 0.168 278.2))); background-size: 100%; } diff --git a/semcore/feature-highlight/src/components/checkbox/checkbox.shadow.css b/semcore/feature-highlight/src/components/checkbox/checkbox.shadow.css index f5e0b8b74b..823a6b2d00 100644 --- a/semcore/feature-highlight/src/components/checkbox/checkbox.shadow.css +++ b/semcore/feature-highlight/src/components/checkbox/checkbox.shadow.css @@ -4,17 +4,16 @@ SHighlightedCheckbox:not([state="invalid"]) { transform: translate(0); border: 1px solid transparent; - border-radius: var(--intergalactic-addon-rounded, 4px); /* TODO: --intergalactic-checkbox-rounded */ - background: linear-gradient(white, white) padding-box, /* TODO: --intergalactic-control-checkbox-bg */ - var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, oklch(0.82 0.118 303), oklch(0.82 0.088 272.1))) border-box; /* TODO: --intergalactic-control-checkbox-border */ + border-radius: var(--intergalactic-addon-rounded, 4px); + background: linear-gradient(white, white) padding-box, + var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, oklch(0.82 0.118 303), oklch(0.82 0.088 272.1))) border-box; background-origin: border-box; background-clip: padding-box, border-box; } input[data-ui-name="CheckboxFH.Value"]:checked + [data-ui-name="Value.CheckMark"] { border-color: transparent; - background: var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.74 0.117 274.1))) padding-box, /* TODO: --intergalactic-control-checkbox-bg-selected */ - var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.74 0.117 274.1))) border-box; /* TODO: --intergalactic-control-checkbox-bg-selected */ + background: var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.74 0.117 274.1))) padding-box, var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.74 0.117 274.1))) border-box; } [data-ui-name="Value.CheckMark"]::before { @@ -25,10 +24,10 @@ SHighlightedCheckbox:not([state="invalid"]) { margin: -5px; padding: 1px; border-width: 2px; - border-radius: calc(var(--intergalactic-addon-rounded, 4px) + 3px); /* TODO: --intergalactic-checkbox-rounded */ + border-radius: calc(var(--intergalactic-addon-rounded, 4px) + 3px); border-color: transparent; pointer-events: none; - background: linear-gradient(white, white) padding-box, var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, oklch(0.82 0.118 303), oklch(0.82 0.088 272.1))) border-box; /* TODO: --intergalactic-control-checkbox-border */ + background: linear-gradient(white, white) padding-box, var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, oklch(0.82 0.118 303), oklch(0.82 0.088 272.1))) border-box; mask: linear-gradient(0deg, #fff, #fff) content-box, linear-gradient(0deg, #fff, #fff); mask-composite: exclude; @@ -52,6 +51,6 @@ SHighlightedCheckbox:not([state="invalid"]) { input[data-ui-name="CheckboxFH.Value"]:checked:focus-visible+[data-ui-name="Value.CheckMark"]::before { border-color: transparent; - background: linear-gradient(white, white) padding-box, var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.74 0.117 274.1))) border-box; /* TODO: --intergalactic-control-checkbox-bg-selected */ + background: linear-gradient(white, white) padding-box, var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.74 0.117 274.1))) border-box; } } diff --git a/semcore/feature-highlight/src/components/pills/pills.shadow.css b/semcore/feature-highlight/src/components/pills/pills.shadow.css index 0bd7569bb0..271f87ac69 100644 --- a/semcore/feature-highlight/src/components/pills/pills.shadow.css +++ b/semcore/feature-highlight/src/components/pills/pills.shadow.css @@ -1,8 +1,7 @@ SHighlightedPill { border: 1px solid transparent; background: - linear-gradient(white, white) padding-box, /* TODO: --intergalactic-pills-bg-normal */ - var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, oklch(0.82 0.118 303), oklch(0.82 0.088 272.1))) border-box; /* TODO: --intergalactic-pills-border */ + linear-gradient(white, white) padding-box, var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, oklch(0.82 0.118 303), oklch(0.82 0.088 272.1))) border-box; background-origin: border-box; background-clip: padding-box, border-box; z-index: 1; @@ -15,7 +14,7 @@ SHighlightedPill { inset: 0; margin: -5px; padding: 2px; - border-radius: calc(var(--intergalactic-control-rounded, 6px) + 3px); /* TODO: --intergalactic-pills-rounded */ + border-radius: calc(var(--intergalactic-control-rounded, 6px) + 3px); background-image: var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.58 0.168 278.2))); mask: linear-gradient(0deg, #fff, #fff) content-box, linear-gradient(0deg, #fff, #fff); @@ -46,14 +45,12 @@ SHighlightedPill { } &:hover { - background: var(--intergalactic-bg-primary-feature-highlight-hover-active, linear-gradient(90deg in oklch, oklch(0.97 0.019 303.4), oklch(0.929 0.037 268))) padding-box, /* TODO: --intergalactic-pills-bg-hover */ - var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, oklch(0.82 0.118 303), oklch(0.82 0.088 272.1))) border-box; /* TODO: --intergalactic-pills-border */ + background: var(--intergalactic-bg-primary-feature-highlight-hover-active, linear-gradient(90deg in oklch, oklch(0.97 0.019 303.4), oklch(0.929 0.037 268))) padding-box, var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, oklch(0.82 0.118 303), oklch(0.82 0.088 272.1))) border-box; } &[selected] { background: - var(--intergalactic-bg-primary-feature-highlight-hover-active, linear-gradient(90deg in oklch, oklch(0.97 0.019 303.4), oklch(0.929 0.037 268))) padding-box, /* TODO: --intergalactic-pills-bg-selected */ - var(--intergalactic-control-primary-feature-highlight-hover, linear-gradient(90deg in oklch, oklch(0.64 0.223 299.3), oklch(0.74 0.117 274.1))) border-box; /* TODO: --intergalactic-pills-border-selected */ + var(--intergalactic-bg-primary-feature-highlight-hover-active, linear-gradient(90deg in oklch, oklch(0.97 0.019 303.4), oklch(0.929 0.037 268))) padding-box, var(--intergalactic-control-primary-feature-highlight-hover, linear-gradient(90deg in oklch, oklch(0.64 0.223 299.3), oklch(0.74 0.117 274.1))) border-box; background-origin: border-box; background-clip: padding-box, border-box; border-color: transparent; diff --git a/semcore/feature-highlight/src/components/radio/radio.shadow.css b/semcore/feature-highlight/src/components/radio/radio.shadow.css index ec1eae96b2..435b7915b5 100644 --- a/semcore/feature-highlight/src/components/radio/radio.shadow.css +++ b/semcore/feature-highlight/src/components/radio/radio.shadow.css @@ -5,7 +5,7 @@ SHighlightedRadio { SHighlightedRadio:not([state="invalid"]) { [data-ui-name="Value.RadioMark"] { border-radius: 50%; - background: var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, oklch(0.82 0.118 303), oklch(0.82 0.088 272.1))); /* TODO: --intergalactic-radio-border */ + background: var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, oklch(0.82 0.118 303), oklch(0.82 0.088 272.1))); } [data-ui-name="Value.RadioMark"]::before { @@ -38,8 +38,7 @@ SHighlightedRadio:not([state="invalid"]) { right: 0; bottom: 0; border-radius: 50%; - background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* TODO: --intergalactic-radio-bg-normal */ - top: 50%; + background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); left: 50%; width: calc(100% - 2px); height: calc(100% - 2px); diff --git a/semcore/feature-highlight/src/components/switch/switch.shadow.css b/semcore/feature-highlight/src/components/switch/switch.shadow.css index b96830aed3..4db8d1c773 100644 --- a/semcore/feature-highlight/src/components/switch/switch.shadow.css +++ b/semcore/feature-highlight/src/components/switch/switch.shadow.css @@ -26,7 +26,7 @@ SToggle { } SToggle[checked] { - color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* TODO: --intergalactic-control-switch-bg-info-active */ + color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); background-image: var(--intergalactic-control-primary-feature-highlight, linear-gradient(90deg in oklch, oklch(0.64 0.223 299.3), oklch(0.74 0.117 274.1))); } diff --git a/semcore/feature-highlight/src/components/tab-line/tabLine.shadow.css b/semcore/feature-highlight/src/components/tab-line/tabLine.shadow.css index bc74bbdf5d..f54465b645 100644 --- a/semcore/feature-highlight/src/components/tab-line/tabLine.shadow.css +++ b/semcore/feature-highlight/src/components/tab-line/tabLine.shadow.css @@ -14,7 +14,7 @@ SHighlightedItem { } &[selected]::after, &:hover:not(:focus-visible)::after { opacity: 1; - background: var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.74 0.117 274.1))); /* TODO: --intergalactic-tab-line-border-hover, --intergalactic-tab-line-border-active */ + background: var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.74 0.117 274.1))); } &::before { @@ -42,5 +42,5 @@ SHighlightedItem { } SHighlightedCaret { - background: var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.74 0.117 274.1))); /* TODO: --intergalactic-tab-line-border-active */ + background: var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.74 0.117 274.1))); } diff --git a/semcore/feedback-form/src/style/slider-rating.shadow.css b/semcore/feedback-form/src/style/slider-rating.shadow.css index cfce168614..1d09120a7d 100644 --- a/semcore/feedback-form/src/style/slider-rating.shadow.css +++ b/semcore/feedback-form/src/style/slider-rating.shadow.css @@ -19,10 +19,10 @@ SStar[filled]:active { } SStar path { - fill: var(--intergalactic-slider-rating-normal, undefined); + fill: var(--intergalactic-slider-rating-normal, oklch(0.7 0.003 162.2)); } /* TODO: --intergalactic-control-slider-rating-normal */ SStar[filled] path { stroke-width: 0; - fill: var(--intergalactic-slider-rating-hover-active, undefined); /* TODO: --intergalactic-control-slider-rating-hover-active */ + fill: var(--intergalactic-slider-rating-hover-active, oklch(0.66 0.212 300.1)); /* TODO: --intergalactic-control-slider-rating-hover-active */ } diff --git a/semcore/mini-chart/src/component/score/line.shadow.css b/semcore/mini-chart/src/component/score/line.shadow.css index fe53257aa9..6447478756 100644 --- a/semcore/mini-chart/src/component/score/line.shadow.css +++ b/semcore/mini-chart/src/component/score/line.shadow.css @@ -41,7 +41,7 @@ SLineSegmentItem:last-child { SLineSegmentItem { height: 8px; background: transparent; - border-right-color: var(--intergalactic-chart-grid-border, #fff); + border-right-color: var(--intergalactic-chart-grid-border, #ffffff); border-right-style: solid; border-right-width: 1px; box-sizing: content-box; diff --git a/semcore/pills/src/style/pills.shadow.css b/semcore/pills/src/style/pills.shadow.css index ff5c6bcf2a..0a40d3c0c4 100644 --- a/semcore/pills/src/style/pills.shadow.css +++ b/semcore/pills/src/style/pills.shadow.css @@ -6,8 +6,8 @@ SPills { border-radius: var(--intergalactic-control-rounded, 6px); /* TODO: --intergalactic-pills-rounded */ SPill[selected] { - background: var(--intergalactic-control-secondary-info, oklch(0.527 0.264 262.9 / 0.039)); /* TODO: --intergalactic-pills-bg-selected */ - border-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2)); /* TODO: --intergalactic-pills-border-selected */ + background: var(--intergalactic-control-secondary-info, oklch(0.527 0.264 262.9 / 0.039)); /* TODO: --intergalactic-control-pills-bg-selected */ + border-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2)); /* TODO: --intergalactic-control-pills-border-selected */ z-index: 3; } SPill:focus-visible, SPill[selected] { @@ -39,8 +39,8 @@ SPill { vertical-align: middle; font-family: inherit; cursor: pointer; - background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* TODO: --intergalactic-pills-bg-normal */ - border: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); /* TODO: --intergalactic-pills-border */ + background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* TODO: --intergalactic-control-pills-bg-normal */ + border: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); /* TODO: --intergalactic-control-pills-border */ border-radius: var(--intergalactic-control-rounded, 6px); /* TODO: --intergalactic-pills-rounded */ &::-moz-focus-inner { @@ -54,7 +54,7 @@ SPill { } &:hover { - background: var(--intergalactic-bg-primary-neutral-hover, oklch(0.98 0.001 180)); /* TODO: --intergalactic-pills-bg-hover */ + background: var(--intergalactic-bg-primary-neutral-hover, oklch(0.98 0.001 180)); /* TODO: --intergalactic-control-pills-bg-hover */ } } diff --git a/semcore/slider/src/style/slider.shadow.css b/semcore/slider/src/style/slider.shadow.css index 4dd34ed7de..e7936885d1 100644 --- a/semcore/slider/src/style/slider.shadow.css +++ b/semcore/slider/src/style/slider.shadow.css @@ -15,11 +15,11 @@ SSlider { height: 4px; width: 100%; border-radius: var(--intergalactic-progress-bar-rounded, 6px); - background-color: var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07)); /* TODO: --intergalactic-control-slider-bar */ + background-color: var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07)); /* TODO: --intergalactic-control-slider-bar-bg */ } &:hover:before { - background-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); /* TODO: --intergalactic-control-slider-bar-hover */ + background-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); /* TODO: --intergalactic-control-slider-bar-bg-hover */ } &:active SKnob, @@ -50,7 +50,7 @@ SBar { border-radius: var(--intergalactic-progress-bar-rounded, 6px); box-sizing: border-box; background-size: 12px; - background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* TODO: --intergalactic-control-slider-bar-value */ + background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* TODO: --intergalactic-control-slider-bar-value-bg */ cursor: pointer; transition: calc(var(--intergalactic-duration-control, 200) * 1ms) width ease-in-out; } @@ -62,7 +62,7 @@ SKnob { width: 20px; border-radius: 50%; box-sizing: border-box; - background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* TODO: --intergalactic-control-slider-knob */ + background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* TODO: --intergalactic-control-slider-knob-bg */ border: 5px solid var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* TODO: --intergalactic-control-slider-knob-border */ cursor: pointer; transform: translate(-50%, -50%); diff --git a/semcore/tab-line/src/style/tab-line.shadow.css b/semcore/tab-line/src/style/tab-line.shadow.css index 488b697c33..7b0ab427d6 100644 --- a/semcore/tab-line/src/style/tab-line.shadow.css +++ b/semcore/tab-line/src/style/tab-line.shadow.css @@ -6,7 +6,7 @@ STabLine { } STabLine[underlined] { - border-bottom: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); /* TODO: --intergalactic-tab-line-border */ + border-bottom: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); /* TODO: --intergalactic-control-tab-line-border */ } STabLineItem { @@ -61,12 +61,12 @@ STabLineItem { } &:hover::before { - background-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); /* TODO: --intergalactic-tab-line-border-hover */ + background-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); /* TODO: --intergalactic-control-tab-line-border-hover */ } &[selected]::after { transition-delay: calc(var(--intergalactic-duration-control, 200) * 1ms); - background-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2)); /* TODO: --intergalactic-tab-line-border-active */ + background-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2)); /* TODO: --intergalactic-control-tab-line-border-active */ } & SText:not(:last-child) { @@ -82,7 +82,7 @@ SCaret { position: absolute; bottom: -1px; height: 3px; - background: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2)); /* TODO: --intergalactic-tab-line-border-active */ + background: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2)); /* TODO: --intergalactic-control-tab-line-border-active */ transition: calc(var(--intergalactic-duration-control, 200) * 1ms) all ease-in-out; } diff --git a/tools/theme/src/theme.ts b/tools/theme/src/theme.ts index 78105da729..d487b43b8d 100644 --- a/tools/theme/src/theme.ts +++ b/tools/theme/src/theme.ts @@ -260,15 +260,15 @@ export const theme: Theme = { semanticTokens: { colors: { badge_bg_admin: { - value: '{baseTokens.colors.blue.400}', + value: colors.blue['400'].value, description: 'Background color of the admin Badge.', }, badge_bg_alpha: { - value: '{baseTokens.colors.red.400}', + value: colors.red['400'].value, description: 'Background color of the alpha Badge.', }, badge_bg_beta: { - value: '{baseTokens.colors.orange.400}', + value: colors.orange['400'].value, description: 'Background color of the beta Badge.', }, badge_bg_invert: { @@ -276,15 +276,15 @@ export const theme: Theme = { description: 'Background color of the inverted Badge.', }, badge_bg_new: { - value: '{baseTokens.colors.green.400}', + value: colors.green['400'].value, description: 'Background color of the new Badge.', }, badge_bg_soon: { - value: '{baseTokens.colors.gray.400}', + value: colors.gray['400'].value, description: 'Background color of the soon Badge.', }, badge_bg_unavailable: { - value: '{baseTokens.colors.gray.100}', + value: colors.gray['100'].value, description: 'Background color of the unavailable Badge.', }, badge_text_primary_DEFAULT: { @@ -541,15 +541,15 @@ export const theme: Theme = { description: 'Official YouTube brand fill for logos and icons in approved placements; follow the platform brand rules for size and clear space.', }, chart_data_critical: { - value: '{baseTokens.colors.red.400}', + value: colors.red['400'].value, description: 'Critical data color for charts.', }, chart_data_success: { - value: '{baseTokens.colors.green.300}', + value: colors.green['300'].value, description: 'Success data color for charts.', }, chart_data_warning: { - value: '{baseTokens.colors.orange.300}', + value: colors.orange['300'].value, description: 'Warning data color for charts.', }, chart_grid_bar_chart_base_bg: { @@ -561,7 +561,7 @@ export const theme: Theme = { description: 'Background color for the hover state of a bar on the chart grid.', }, chart_grid_border: { - value: '{baseTokens.colors.white}', + value: '{baseTokens.colors.gray.white}', description: 'Border for distinguishing data sets and chart dots on the chart grid.', }, chart_grid_line: { @@ -860,19 +860,19 @@ export const theme: Theme = { value: '{semanticTokens.colors.bg_primary_neutral_DEFAULT}', description: 'Background of the Select trigger in its normal state.', }, - control_slider_bar_DEFAULT: { + control_slider_bar_bg_DEFAULT: { value: '{semanticTokens.colors.progress_bar_bg_DEFAULT}', description: 'Background of the Slider bar.', }, - control_slider_bar_hover: { + control_slider_bar_bg_hover: { value: '{semanticTokens.colors.progress_bar_bg_hover}', description: 'Hover state of the Slider bar.', }, - control_slider_bar_value: { + control_slider_bar_value_bg: { value: '{semanticTokens.colors.control_primary_info_DEFAULT}', description: 'Filled part of the Slider bar.', }, - control_slider_knob_DEFAULT: { + control_slider_knob_bg_DEFAULT: { value: '{baseTokens.colors.gray.white}', description: 'Knob fill color of the Slider.', }, @@ -893,7 +893,7 @@ export const theme: Theme = { description: 'Icon color for the SliderRating component in its normal state.', }, control_switch_bg_DEFAULT: { - value: '{baseTokens.colors.gray.300}', + value: colors.gray['300'].value, description: 'Subtle background of the Switch control.', }, control_switch_bg_info_active: { @@ -1004,13 +1004,13 @@ export const theme: Theme = { value: focus.at(L_BG_SELECTED_HOVER), description: 'Hover state of the background for the cell which is included in the date range in the date-picker.', }, - dot_notification_bg: { + dot_bg: { value: '{semanticTokens.colors.icon_primary_warning_DEFAULT}', - description: 'Background color of the notification Dot.', + description: 'Background color of the Dot.', }, - dot_notification_text: { + dot_text: { value: '{semanticTokens.colors.text_primary_invert}', - description: 'Text color of the notification Dot.', + description: 'Text color of the Dot.', }, dropdown_menu_item_DEFAULT: { value: neutral.at(L_BG_PRIMARY), @@ -1168,11 +1168,11 @@ export const theme: Theme = { description: '⚠️ Use only for illustrations.', }, illustration_border: { - value: '{baseTokens.colors.gray.500}', + value: colors.gray['500'].value, description: 'Border color for illustrations.', }, illustration_gray: { - value: '{baseTokens.colors.gray.100}', + value: colors.gray['100'].value, description: 'Gray fill color for illustrations.', }, illustration_green: { @@ -1254,23 +1254,23 @@ export const theme: Theme = { page_bg: { value: neutral.at(0.97), description: 'Background fill for the whole product page.', }, - pills_bg_hover: { + control_pills_bg_hover: { value: '{semanticTokens.colors.bg_secondary_neutral_DEFAULT}', description: 'Hover state of the Pills background.', }, - pills_bg_normal: { + control_pills_bg_normal: { value: '{semanticTokens.colors.bg_primary_neutral_DEFAULT}', description: 'Background of the Pills in its normal state.', }, - pills_bg_selected: { + control_pills_bg_selected: { value: '{semanticTokens.colors.bg_secondary_info_DEFAULT}', description: 'Background of the selected Pill.', }, - pills_border_DEFAULT: { + control_pills_border_DEFAULT: { value: '{semanticTokens.colors.border_primary_DEFAULT}', description: 'Border color of the Pills in its normal state.', }, - pills_border_selected: { + control_pills_border_selected: { value: '{semanticTokens.colors.border_info_active}', description: 'Border color of the selected Pill.', }, @@ -1397,15 +1397,15 @@ export const theme: Theme = { value: '{semanticTokens.colors.border_primary_invert}', description: 'Inverted track color of the Spin loader.', }, - tab_line_border_DEFAULT: { + control_tab_line_border_DEFAULT: { value: '{semanticTokens.colors.border_primary_DEFAULT}', description: 'Border color of the TabLine in its normal state.', }, - tab_line_border_active: { + control_tab_line_border_active: { value: '{semanticTokens.colors.border_info_active}', description: 'Border color of the TabLine in its active state.', }, - tab_line_border_hover: { + control_tab_line_border_hover: { value: '{semanticTokens.colors.border_primary_DEFAULT}', description: 'Border color of the TabLine in its hover state.', }, @@ -2071,6 +2071,18 @@ export const theme: Theme = { }, }, }, + slider: { + rating: { + normal: { value: '{semanticTokens.colors.control_slider_rating_normal}' }, + hover: { active: { value: '{semanticTokens.colors.control_slider_rating_hover_active}' } }, + }, + }, + dot: { + notification: { + bg: { value: '{semanticTokens.colors.dot_bg}' }, + text: { value: '{semanticTokens.colors.dot_text}' }, + }, + }, }, }; @@ -2322,12 +2334,18 @@ type SemanticColors = { }; slider: { bar: { - DEFAULT: Value; - value: Value; - hover: Value; + bg: { + DEFAULT: Value; + hover: Value; + }; + value: { + bg: Value; + }; }; knob: { - DEFAULT: Value; + bg: { + DEFAULT: Value; + }; border: { DEFAULT: Value; hover: Value; @@ -2442,6 +2460,24 @@ type SemanticColors = { active: Value; }; }; + pills: { + bg: { + normal: Value; + hover: Value; + selected: Value; + }; + border: { + DEFAULT: Value; + selected: Value; + }; + }; + tab_line: { + border: { + DEFAULT: Value; + hover: Value; + active: Value; + }; + }; }; icon: { primary: { @@ -2982,10 +3018,8 @@ type SemanticColors = { }; }; dot: { - notification: { - bg: Value; - text: Value; - }; + bg: Value; + text: Value; }; notice_bubble: { bg: { @@ -2993,17 +3027,6 @@ type SemanticColors = { critical: Value; }; }; - pills: { - bg: { - normal: Value; - hover: Value; - selected: Value; - }; - border: { - DEFAULT: Value; - selected: Value; - }; - }; radio: { border: Value; bg: { @@ -3017,13 +3040,6 @@ type SemanticColors = { invert: Value; }; }; - tab_line: { - border: { - DEFAULT: Value; - hover: Value; - active: Value; - }; - }; wizard: { bg: Value; sidebar: { @@ -3131,6 +3147,18 @@ type Deprecates = { }; }; }; + slider: { + rating: { + normal: Value; + hover: { active: Value }; + }; + }; + dot: { + notification: { + bg: Value; + text: Value; + }; + }; }; export type BasicColorKeys = `${keyof BaseTokens['colors']}-${Lightness}`; diff --git a/website/docs/style/design-tokens/base-tokens.json b/website/docs/style/design-tokens/base-tokens.json index 5fc11ae4d0..f561080b85 100644 --- a/website/docs/style/design-tokens/base-tokens.json +++ b/website/docs/style/design-tokens/base-tokens.json @@ -877,5 +877,21 @@ { "name": "--intergalactic-feature-popover-dot-neutral-outer-border", "value": "oklch(0.88 0.078 303)" + }, + { + "name": "--intergalactic-slider-rating-normal", + "value": "oklch(0.7 0.003 162.2)" + }, + { + "name": "--intergalactic-slider-rating-hover-active", + "value": "oklch(0.66 0.212 300.1)" + }, + { + "name": "--intergalactic-dot-notification-bg", + "value": "oklch(0.728 0.188 51.8)" + }, + { + "name": "--intergalactic-dot-notification-text", + "value": "oklch(0.999 0.001 180 / 0.949)" } ] diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json index df2c2fd9c5..5e92d6c53c 100644 --- a/website/docs/style/design-tokens/design-tokens.json +++ b/website/docs/style/design-tokens/design-tokens.json @@ -610,7 +610,7 @@ }, { "name": "--intergalactic-chart-grid-border", - "value": "#fff", + "value": "#ffffff", "description": "Border for distinguishing data sets and chart dots on the chart grid.", "components": [ "d3-chart", @@ -1151,25 +1151,25 @@ "components": [] }, { - "name": "--intergalactic-control-slider-bar", + "name": "--intergalactic-control-slider-bar-bg", "value": "oklch(0.96 0.001 180)", "description": "Background of the Slider bar.", "components": [] }, { - "name": "--intergalactic-control-slider-bar-hover", + "name": "--intergalactic-control-slider-bar-bg-hover", "value": "oklch(0.88 0.002 175.6)", "description": "Hover state of the Slider bar.", "components": [] }, { - "name": "--intergalactic-control-slider-bar-value", + "name": "--intergalactic-control-slider-bar-value-bg", "value": "oklch(0.23 0.01 140)", "description": "Filled part of the Slider bar.", "components": [] }, { - "name": "--intergalactic-control-slider-knob", + "name": "--intergalactic-control-slider-knob-bg", "value": "#ffffff", "description": "Knob fill color of the Slider.", "components": [] @@ -1407,15 +1407,15 @@ ] }, { - "name": "--intergalactic-dot-notification-bg", + "name": "--intergalactic-dot-bg", "value": "oklch(0.728 0.188 51.8)", - "description": "Background color of the notification Dot.", + "description": "Background color of the Dot.", "components": [] }, { - "name": "--intergalactic-dot-notification-text", + "name": "--intergalactic-dot-text", "value": "oklch(0.999 0.001 180 / 0.949)", - "description": "Text color of the notification Dot.", + "description": "Text color of the Dot.", "components": [] }, { @@ -1877,31 +1877,31 @@ "components": [] }, { - "name": "--intergalactic-pills-bg-hover", + "name": "--intergalactic-control-pills-bg-hover", "value": "oklch(0.98 0.001 180)", "description": "Hover state of the Pills background.", "components": [] }, { - "name": "--intergalactic-pills-bg-normal", + "name": "--intergalactic-control-pills-bg-normal", "value": "oklch(1 0 0)", "description": "Background of the Pills in its normal state.", "components": [] }, { - "name": "--intergalactic-pills-bg-selected", + "name": "--intergalactic-control-pills-bg-selected", "value": "oklch(0.959 0.021 267.8)", "description": "Background of the selected Pill.", "components": [] }, { - "name": "--intergalactic-pills-border", + "name": "--intergalactic-control-pills-border", "value": "oklch(0.137 0.026 175.7 / 0.161)", "description": "Border color of the Pills in its normal state.", "components": [] }, { - "name": "--intergalactic-pills-border-selected", + "name": "--intergalactic-control-pills-border-selected", "value": "oklch(0.7 0.131 275.2)", "description": "Border color of the selected Pill.", "components": [] @@ -2127,19 +2127,19 @@ "components": [] }, { - "name": "--intergalactic-tab-line-border", + "name": "--intergalactic-control-tab-line-border", "value": "oklch(0.137 0.026 175.7 / 0.161)", "description": "Border color of the TabLine in its normal state.", "components": [] }, { - "name": "--intergalactic-tab-line-border-active", + "name": "--intergalactic-control-tab-line-border-active", "value": "oklch(0.7 0.131 275.2)", "description": "Border color of the TabLine in its active state.", "components": [] }, { - "name": "--intergalactic-tab-line-border-hover", + "name": "--intergalactic-control-tab-line-border-hover", "value": "oklch(0.137 0.026 175.7 / 0.161)", "description": "Border color of the TabLine in its hover state.", "components": [] From 0cfa5b46286fee288feb4b8a5388a39dcc20d22b Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Tue, 7 Jul 2026 17:25:30 +0200 Subject: [PATCH 08/12] [theme] update comment for Hint styles --- .../base-components/src/components/hint/style/hint.shadow.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/semcore/base-components/src/components/hint/style/hint.shadow.css b/semcore/base-components/src/components/hint/style/hint.shadow.css index 4c579cb206..42e1b824a8 100644 --- a/semcore/base-components/src/components/hint/style/hint.shadow.css +++ b/semcore/base-components/src/components/hint/style/hint.shadow.css @@ -8,8 +8,8 @@ SHintPopper { opacity: 0; pointer-events: none; - background: var(--intergalactic-tooltip-invert, oklch(0.23 0.01 140)); /* TODO: --intergalactic-tooltip-bg-invert */ - border: 1px solid var(--intergalactic-border-tooltip-invert, oklch(0.995 0.008 145.9 / 0.369)); /* TODO: --intergalactic-tooltip-border-invert */ + background: var(--intergalactic-tooltip-invert, oklch(0.23 0.01 140)); /* TODO: --intergalactic-tooltip-bg-invert or consider adding hint category */ + border: 1px solid var(--intergalactic-border-tooltip-invert, oklch(0.995 0.008 145.9 / 0.369)); /* TODO: --intergalactic-tooltip-border-invert or consider adding hint category */ color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); padding: var(--intergalactic-spacing-1x, 4px) var(--intergalactic-spacing-2x, 8px); border-radius: var(--intergalactic-rounded-small, 4px); From 20fb9cc36c0497b8097479ae3488bb27249053d2 Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Tue, 7 Jul 2026 19:07:48 +0200 Subject: [PATCH 09/12] [theme] name updates --- .../src/style/slider-rating.shadow.css | 4 +-- .../src/style/notice-bubble.shadow.css | 2 +- tools/theme/src/theme.ts | 32 ++++++++++--------- 3 files changed, 20 insertions(+), 18 deletions(-) diff --git a/semcore/feedback-form/src/style/slider-rating.shadow.css b/semcore/feedback-form/src/style/slider-rating.shadow.css index 1d09120a7d..23765dc382 100644 --- a/semcore/feedback-form/src/style/slider-rating.shadow.css +++ b/semcore/feedback-form/src/style/slider-rating.shadow.css @@ -20,9 +20,9 @@ SStar[filled]:active { SStar path { fill: var(--intergalactic-slider-rating-normal, oklch(0.7 0.003 162.2)); -} /* TODO: --intergalactic-control-slider-rating-normal */ +} /* TODO: --intergalactic-control-slider-rating-icon */ SStar[filled] path { stroke-width: 0; - fill: var(--intergalactic-slider-rating-hover-active, oklch(0.66 0.212 300.1)); /* TODO: --intergalactic-control-slider-rating-hover-active */ + fill: var(--intergalactic-slider-rating-hover-active, oklch(0.66 0.212 300.1)); /* TODO: --intergalactic-control-slider-rating-icon-hover-active */ } diff --git a/semcore/notice-bubble/src/style/notice-bubble.shadow.css b/semcore/notice-bubble/src/style/notice-bubble.shadow.css index 9aa298395c..e58b969080 100644 --- a/semcore/notice-bubble/src/style/notice-bubble.shadow.css +++ b/semcore/notice-bubble/src/style/notice-bubble.shadow.css @@ -12,7 +12,7 @@ SView { gap: var(--intergalactic-spacing-2x, 8px); &[type='info'] { - background: var(--intergalactic-bg-primary-invert, oklch(0.23 0.01 140)); /* TODO: --intergalactic-notice-bubble-bg */ + background: var(--intergalactic-bg-primary-invert, oklch(0.23 0.01 140)); /* TODO: --intergalactic-notice-bubble-bg-info */ } &[type='warning'] { diff --git a/tools/theme/src/theme.ts b/tools/theme/src/theme.ts index d487b43b8d..5b9adfcc4e 100644 --- a/tools/theme/src/theme.ts +++ b/tools/theme/src/theme.ts @@ -884,14 +884,14 @@ export const theme: Theme = { value: '{semanticTokens.colors.control_primary_info_hover}', description: 'Knob border color of the Slider in its hover state.', }, - control_slider_rating_hover_active: { - value: highlight.at(L_ICON_SECONDARY_HOVER), - description: 'Icon color for the SliderRating component in its hovered and active states.', - }, - control_slider_rating_normal: { + control_slider_rating_icon_DEFAULT: { value: neutral.at(L_ICON_SECONDARY), description: 'Icon color for the SliderRating component in its normal state.', }, + control_slider_rating_icon_hover_active: { + value: highlight.at(L_ICON_SECONDARY_HOVER), + description: 'Icon color for the SliderRating component in its hovered and active states.', + }, control_switch_bg_DEFAULT: { value: colors.gray['300'].value, description: 'Subtle background of the Switch control.', @@ -1227,14 +1227,14 @@ export const theme: Theme = { value: 'oklch(1 0 0 / 0.5)', description: 'Neutral border of the components that are combined with neighbor-location property.', }, - notice_bubble_bg_DEFAULT: { - value: '{semanticTokens.colors.bg_primary_invert_DEFAULT}', - description: 'Background of the NoticeBubble.', - }, notice_bubble_bg_critical: { value: '{semanticTokens.colors.bg_primary_critical}', description: 'Critical background of the NoticeBubble.', }, + notice_bubble_bg_info: { + value: '{semanticTokens.colors.bg_primary_invert_DEFAULT}', + description: 'Background of the NoticeBubble.', + }, overlay_limitation_primary: { value: `oklch(from ${neutral.at(L_BG_SECONDARY)} l c h / 0.85)`, description: 'Use as a primary cover of the content under the messages about limitations.', @@ -2073,8 +2073,8 @@ export const theme: Theme = { }, slider: { rating: { - normal: { value: '{semanticTokens.colors.control_slider_rating_normal}' }, - hover: { active: { value: '{semanticTokens.colors.control_slider_rating_hover_active}' } }, + normal: { value: '{semanticTokens.colors.control_slider_rating_icon_DEFAULT}' }, + hover: { active: { value: '{semanticTokens.colors.control_slider_rating_icon_hover_active}' } }, }, }, dot: { @@ -2353,9 +2353,11 @@ type SemanticColors = { }; }; slider_rating: { - normal: Value; - hover: { - active: Value; + icon: { + DEFAULT: Value; + hover: { + active: Value; + }; }; }; checkbox: { @@ -3023,8 +3025,8 @@ type SemanticColors = { }; notice_bubble: { bg: { - DEFAULT: Value; critical: Value; + info: Value; }; }; radio: { From 208e04abc4016fc4154b0e9946b477803ccde53b Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Tue, 7 Jul 2026 20:47:40 +0200 Subject: [PATCH 10/12] [theme] add bg to additional Tag --- semcore/tag/src/style/tag.shadow.css | 2 +- tools/theme/src/theme.ts | 20 +++++++++++--------- 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/semcore/tag/src/style/tag.shadow.css b/semcore/tag/src/style/tag.shadow.css index 5c097db5af..f0230d0316 100644 --- a/semcore/tag/src/style/tag.shadow.css +++ b/semcore/tag/src/style/tag.shadow.css @@ -170,7 +170,7 @@ STag[theme="secondary"], STagContainerClose[theme="secondary"], STag[theme="additional"], STagContainerClose[theme="additional"] { - /* chenge to ...? secondary: change to --intergalactic-tag-secondary-border; additional: change to --intergalactic-tag-additional-normal */ + /* chenge to ...? secondary: change to --intergalactic-tag-secondary-border; additional: change to --intergalactic-tag-additional-bg-normal */ &::before { opacity: 0.01; } diff --git a/tools/theme/src/theme.ts b/tools/theme/src/theme.ts index 5b9adfcc4e..57cf0d49c9 100644 --- a/tools/theme/src/theme.ts +++ b/tools/theme/src/theme.ts @@ -1501,18 +1501,18 @@ export const theme: Theme = { value: neutral.at(L_BG_PRIMARY), description: 'Background of the header cell in the secondary Table.', }, - tag_additional_border: { - value: '{semanticTokens.colors.border_primary_DEFAULT}', - description: 'Border color of the additional Tag.', - }, - tag_additional_hover_active: { + tag_additional_bg_hover_active: { value: '{semanticTokens.colors.bg_primary_neutral_hover}', description: 'Hover and active states of the additional Tag background.', }, - tag_additional_normal: { + tag_additional_bg_normal: { value: '{semanticTokens.colors.bg_primary_neutral_DEFAULT}', description: 'Background of the additional Tag in its normal state.', }, + tag_additional_border: { + value: '{semanticTokens.colors.border_primary_DEFAULT}', + description: 'Border color of the additional Tag.', + }, tag_primary_bg_hover: { value: '{semanticTokens.colors.bg_primary_neutral_hover}', description: 'Hover state of the primary Tag background.', @@ -2878,9 +2878,11 @@ type SemanticColors = { }; }; additional: { - normal: Value; - hover: { - active: Value; + bg: { + normal: Value; + hover: { + active: Value; + }; }; border: Value; }; From f23e679518a7ec52e7e11fa74c6dca1eaaa68792 Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Tue, 7 Jul 2026 23:07:19 +0200 Subject: [PATCH 11/12] [feature-highlight] fix missing top prop --- semcore/feature-highlight/src/components/radio/radio.shadow.css | 1 + 1 file changed, 1 insertion(+) diff --git a/semcore/feature-highlight/src/components/radio/radio.shadow.css b/semcore/feature-highlight/src/components/radio/radio.shadow.css index 435b7915b5..5386c68d3f 100644 --- a/semcore/feature-highlight/src/components/radio/radio.shadow.css +++ b/semcore/feature-highlight/src/components/radio/radio.shadow.css @@ -39,6 +39,7 @@ SHighlightedRadio:not([state="invalid"]) { bottom: 0; border-radius: 50%; background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); + top: 50%; left: 50%; width: calc(100% - 2px); height: calc(100% - 2px); From 19e6690a7260c893f8fbd672843ea55ed6cbfd49 Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Thu, 9 Jul 2026 17:53:19 +0200 Subject: [PATCH 12/12] [theme] update some variables names --- .../src/style/feature-popover.shadow.css | 12 +- semcore/radio/src/style/radio.shadow.css | 12 +- semcore/wizard/src/style/wizard.shadow.css | 8 +- tools/theme/src/theme.ts | 139 +++++++++++------- .../docs/style/design-tokens/base-tokens.json | 36 +++++ .../style/design-tokens/design-tokens.json | 66 +++++---- 6 files changed, 168 insertions(+), 105 deletions(-) diff --git a/semcore/feature-popover/src/style/feature-popover.shadow.css b/semcore/feature-popover/src/style/feature-popover.shadow.css index 8692ffef7c..4df66ad267 100644 --- a/semcore/feature-popover/src/style/feature-popover.shadow.css +++ b/semcore/feature-popover/src/style/feature-popover.shadow.css @@ -9,11 +9,11 @@ SFeaturePopover { position: relative; &[theme='accent'] { - background-color: var(--intergalactic-feature-popover-bg, oklch(0.88 0.078 303)); /* TODO: --intergalactic-feature-popover-accent-bg */ + background-color: var(--intergalactic-feature-popover-bg, oklch(0.88 0.078 303)); /* TODO: --intergalactic-feature-popover-bg-accent */ color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); /* TODO: --intergalactic-feature-popover-text */ } &[theme='neutral'] { - background-color: var(--intergalactic-feature-popover-bg-neutral, oklch(0.23 0.01 140)); /* TODO: --intergalactic-feature-popover-neutral-bg */ + background-color: var(--intergalactic-feature-popover-bg-neutral, oklch(0.23 0.01 140)); /* TODO: --intergalactic-feature-popover-bg-neutral */ color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-feature-popover-text-invert */ } } @@ -94,18 +94,18 @@ SSpot { &[theme='accent'] { &::before { - background-color: var(--intergalactic-feature-popover-dot-outer-border, oklch(0.88 0.078 303)); /* TODO: --intergalactic-feature-popover-accent-dot-outer-border */ + background-color: var(--intergalactic-feature-popover-dot-outer-border, oklch(0.88 0.078 303)); /* TODO: --intergalactic-feature-popover-dot-outer-border-accent */ } &::after { - background-color: var(--intergalactic-feature-popover-bg, oklch(0.88 0.078 303)); /* TODO: --intergalactic-feature-popover-accent-bg */ + background-color: var(--intergalactic-feature-popover-bg, oklch(0.88 0.078 303)); /* TODO: --intergalactic-feature-popover-dot-accent */ } } &[theme='neutral'] { &::before { - background-color: var(--intergalactic-feature-popover-dot-neutral-outer-border, oklch(0.88 0.078 303)); /* TODO: --intergalactic-feature-popover-neutral-dot-outer-border */ + background-color: var(--intergalactic-feature-popover-dot-neutral-outer-border, oklch(0.88 0.078 303)); /* TODO: --intergalactic-feature-popover-dot-outer-border-neutral */ } &::after { - background-color: var(--intergalactic-feature-popover-dot-neutral, oklch(0.88 0.078 303)); + background-color: var(--intergalactic-feature-popover-dot-neutral, oklch(0.88 0.078 303)); /* TODO: --intergalactic-feature-popover-dot-neutral */ } } } diff --git a/semcore/radio/src/style/radio.shadow.css b/semcore/radio/src/style/radio.shadow.css index 169c0583cf..20d4a75ff5 100644 --- a/semcore/radio/src/style/radio.shadow.css +++ b/semcore/radio/src/style/radio.shadow.css @@ -33,7 +33,7 @@ SValue { left: 0; right: 0; bottom: 0; - background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* TODO: --intergalactic-radio-bg-normal */ + background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* TODO: --intergalactic-control-radio-bg-normal */ border: 1px solid; border-radius: 50%; transition: calc(var(--intergalactic-duration-control, 200) * 1ms) all ease-in-out; @@ -51,7 +51,7 @@ SValue { width: 0; height: 0; border-radius: 50%; - background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* TODO: --intergalactic-radio-bg-normal */ + background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* TODO: --intergalactic-control-radio-bg-normal */ } } @@ -83,7 +83,7 @@ SValue[size='l'] { } SValue[state='normal']::before { - border-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); /* TODO: --intergalactic-radio-border */ + border-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); /* TODO: --intergalactic-control-radio-border */ } SValue[state='invalid']::before { @@ -112,8 +112,8 @@ SControl:focus-visible+SValue[state='normal']::before { SControl:checked~SValue::before, SControl:checked:focus-visible~SValue::before { - border-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* TODO: --intergalactic-radio-bg-selected */ - background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* TODO: --intergalactic-radio-bg-selected */ + border-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* TODO: --intergalactic-control-radio-bg-selected */ + background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* TODO: --intergalactic-control-radio-bg-selected */ } SControl:focus-visible+SValue[state='invalid']::before { @@ -143,6 +143,6 @@ SInvalidPattern { border-radius: 50%; background-image: var(--intergalactic-border-critical-pattern, repeating-linear-gradient(315deg, oklch(0.7 0.21 23) 0, oklch(0.7 0.21 23) 1px, transparent 0, transparent 50%)); background-size: 6px 6px; - background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* TODO: --intergalactic-radio-bg-normal */ + background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* TODO: --intergalactic-control-radio-bg-normal */ } } diff --git a/semcore/wizard/src/style/wizard.shadow.css b/semcore/wizard/src/style/wizard.shadow.css index fd0f1bfc37..142d7dae97 100644 --- a/semcore/wizard/src/style/wizard.shadow.css +++ b/semcore/wizard/src/style/wizard.shadow.css @@ -7,7 +7,7 @@ SWizard { } SSidebar { - background: var(--intergalactic-control-primary-advertising, oklch(0.23 0.01 140)); /* TODO: --intergalactic-wizard-sidebar-bg */ + background: var(--intergalactic-control-primary-advertising, oklch(0.64 0.223 299.3)); /* TODO: --intergalactic-wizard-sidebar-bg */ color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-wizard-sidebar-text-primary */ font-weight: var(--intergalactic-bold, 700); font-size: var(--intergalactic-fs-300, 16px); @@ -38,11 +38,11 @@ SSidebar { } &:hover { - background: var(--intergalactic-control-primary-advertising-hover, oklch(0.36 0.005 140)); /* TODO: --intergalactic-wizard-sidebar-control-hover */ + background: var(--intergalactic-control-primary-advertising-hover, oklch(0.6 0.244 297.8)); /* TODO: --intergalactic-wizard-sidebar-control-hover */ z-index: 2; } &[active] { - background: var(--intergalactic-control-primary-advertising-active, oklch(0.4 0.004 140)); /* TODO: --intergalactic-wizard-sidebar-control-active */ + background: var(--intergalactic-control-primary-advertising-active, oklch(0.58 0.254 297.1)); /* TODO: --intergalactic-wizard-sidebar-control-active */ } &:disabled, &[disabled] { @@ -63,7 +63,7 @@ SSidebar { overflow: auto; } &[active]:hover SStepDescription { - background: var(--intergalactic-control-primary-advertising-active, oklch(0.4 0.004 140)); /* TODO: --intergalactic-wizard-sidebar-control-active */ + background: var(--intergalactic-control-primary-advertising-active, oklch(0.58 0.254 297.1)); /* TODO: --intergalactic-wizard-sidebar-control-active */ } } } diff --git a/tools/theme/src/theme.ts b/tools/theme/src/theme.ts index e4ebcfd405..72a0e6f965 100644 --- a/tools/theme/src/theme.ts +++ b/tools/theme/src/theme.ts @@ -740,6 +740,18 @@ export const theme: Theme = { value: '{semanticTokens.colors.border_info_active}', description: 'Border color of the Checkbox button in its active state.', }, + control_radio_bg_normal: { + value: '{semanticTokens.colors.bg_primary_neutral_DEFAULT}', + description: 'Background color of the Radio.', + }, + control_radio_bg_selected: { + value: '{semanticTokens.colors.control_primary_info}', + description: 'Selected state of the Radio background.', + }, + control_radio_border: { + value: '{semanticTokens.colors.border_primary_DEFAULT}', + description: 'Border color of the Radio.', + }, control_primary_advertising_DEFAULT: { value: advertising.at(L_BG_BUTTON), description: 'Background of the advertising primary control.', @@ -1032,29 +1044,29 @@ export const theme: Theme = { value: focus.opaqueAt(L_BG_SELECTED_HOVER), description: 'Hover state for the selected state of the default background color for the list item in the dropdown-menu.', }, - feature_popover_accent_bg: { + feature_popover_bg_accent: { value: '{semanticTokens.colors.bg.primary.highlight}', - description: 'Color of the outer border of the FeaturePopover.Spot.', + description: 'Background of the FeaturePopover with accent theme.', }, - feature_popover_accent_dot_outer_border: { - value: '{semanticTokens.colors.bg.primary.highlight}', - description: 'Color of the outer border of the FeaturePopover.Spot.', + feature_popover_bg_neutral: { + value: neutral.at(L_INV_BG_PRIMARY), + description: 'Background of the FeaturePopover with neutral theme.', }, - feature_popover_dot_DEFAULT: { + feature_popover_dot_accent: { value: '{semanticTokens.colors.bg_primary_highlight}', - description: 'Color of the outer border of the FeaturePopover.Spot.', + description: 'Fill color of the FeaturePopover.Spot with accent theme.', }, - feature_popover_dot_neutral_DEFAULT: { + feature_popover_dot_neutral: { value: '{semanticTokens.colors.bg.primary.highlight}', - description: 'Color of the outer border of the FeaturePopover.Spot.', + description: 'Fill color of the FeaturePopover.Spot with neutral theme.', }, - feature_popover_neutral_bg: { - value: neutral.at(L_INV_BG_PRIMARY), - description: 'Color of the outer border of the FeaturePopover.Spot.', + feature_popover_dot_outer_border_accent: { + value: '{semanticTokens.colors.bg.primary.highlight}', + description: 'Outer border color of the FeaturePopover.Spot with accent theme.', }, - feature_popover_neutral_dot_outer_border: { - value: '{semanticTokens.colors.feature.popover.dot.neutral}', - description: 'Color of the outer border of the FeaturePopover.Spot.', + feature_popover_dot_outer_border_neutral: { + value: '{semanticTokens.colors.feature_popover_dot_neutral}', + description: 'Outer border color of the FeaturePopover.Spot with neutral theme.', }, feature_popover_text_DEFAULT: { @@ -1303,18 +1315,6 @@ export const theme: Theme = { value: `linear-gradient(-45deg, oklch(from ${highlight.at(0.74)} calc(l - 0.05) c h) 25%, ${highlight.at(0.74)} 0%, ${highlight.at(0.74)} 50%, oklch(from ${highlight.at(0.74)} calc(l - 0.05) c h) 0%, oklch(from ${highlight.at(0.74)} calc(l - 0.05) c h) 75%, ${highlight.at(0.74)} 0%)`, description: 'Value with gradient for the ProgressBar.', }, - radio_bg_normal: { - value: '{semanticTokens.colors.bg_primary_neutral_DEFAULT}', - description: 'Background color of the Radio.', - }, - radio_bg_selected: { - value: '{semanticTokens.colors.control_primary_info}', - description: 'Selected state of the Radio background.', - }, - radio_border: { - value: '{semanticTokens.colors.border_primary_DEFAULT}', - description: 'Border color of the Radio.', - }, scroll_area_dropdown_menu_bottom: { value: 'linear-gradient(to top, {baseTokens.colors.white} 34.38%, transparent 100%)', description: 'Bottom-to-top fade shadow for the ScrollArea inside the DropdownMenu.', @@ -2062,12 +2062,24 @@ export const theme: Theme = { feature: { popover: { bg: { - DEFAULT: { value: '{semanticTokens.colors.feature_popover_accent_bg}' }, - neutral: { value: '{semanticTokens.colors.feature_popover_neutral_bg}' }, + DEFAULT: { value: '{semanticTokens.colors.feature_popover_bg_accent}' }, + neutral: { value: '{semanticTokens.colors.feature_popover_bg_neutral}' }, }, dot: { - outer: { border: { value: '{semanticTokens.colors.feature_popover_accent_dot_outer_border}' } }, - neutral: { outer: { border: { value: '{semanticTokens.colors.feature_popover_neutral_dot_outer_border}' } } }, + DEFAULT: { value: '{semanticTokens.colors.feature_popover_dot_accent}' }, + outer: { border: { value: '{semanticTokens.colors.feature_popover_dot_outer_border_accent}' } }, + neutral: { + DEFAULT: { value: '{semanticTokens.colors.feature_popover_dot_neutral}' }, + outer: { border: { value: '{semanticTokens.colors.feature_popover_dot_outer_border_neutral}' } }, + }, + }, + accent: { + bg: { value: '{semanticTokens.colors.feature_popover_bg_accent}' }, + dot: { outer: { border: { value: '{semanticTokens.colors.feature_popover_dot_outer_border_accent}' } } }, + }, + neutral: { + bg: { value: '{semanticTokens.colors.feature_popover_bg_neutral}' }, + dot: { outer: { border: { value: '{semanticTokens.colors.feature_popover_dot_outer_border_neutral}' } } }, }, }, }, @@ -2083,6 +2095,13 @@ export const theme: Theme = { text: { value: '{semanticTokens.colors.dot_text}' }, }, }, + radio: { + border: { value: '{semanticTokens.colors.control_radio_border}' }, + bg: { + normal: { value: '{semanticTokens.colors.control_radio_bg_normal}' }, + selected: { value: '{semanticTokens.colors.control_radio_bg_selected}' }, + }, + }, }, }; @@ -2381,6 +2400,13 @@ type SemanticColors = { }; }; }; + radio: { + border: Value; + bg: { + normal: Value; + selected: Value; + }; + }; primary: { info: { DEFAULT: Value; @@ -2614,26 +2640,16 @@ type SemanticColors = { }; feature: { popover: { - accent: { - bg: Value; - dot: { - outer: { - border: Value; - }; - }; - }; - neutral: { - bg: Value; - dot: { - outer: { - border: Value; - }; - }; + bg: { + accent: Value; + neutral: Value; }; dot: { - DEFAULT: Value; - neutral: { - DEFAULT: Value; + accent: Value; + neutral: Value; + outer_border: { + accent: Value; + neutral: Value; }; }; text: { @@ -3031,13 +3047,6 @@ type SemanticColors = { info: Value; }; }; - radio: { - border: Value; - bg: { - normal: Value; - selected: Value; - }; - }; spin: { bg: { DEFAULT: Value; @@ -3146,8 +3155,17 @@ type Deprecates = { popover: { bg: { DEFAULT: Value; neutral: Value }; dot: { + DEFAULT: Value; outer: { border: Value }; - neutral: { outer: { border: Value } }; + neutral: { DEFAULT: Value; outer: { border: Value } }; + }; + accent: { + bg: Value; + dot: { outer: { border: Value } }; + }; + neutral: { + bg: Value; + dot: { outer: { border: Value } }; }; }; }; @@ -3163,6 +3181,13 @@ type Deprecates = { text: Value; }; }; + radio: { + border: Value; + bg: { + normal: Value; + selected: Value; + }; + }; }; export type BasicColorKeys = `${keyof BaseTokens['colors']}-${Lightness}`; diff --git a/website/docs/style/design-tokens/base-tokens.json b/website/docs/style/design-tokens/base-tokens.json index f561080b85..e03805fcee 100644 --- a/website/docs/style/design-tokens/base-tokens.json +++ b/website/docs/style/design-tokens/base-tokens.json @@ -870,14 +870,38 @@ "name": "--intergalactic-feature-popover-bg-neutral", "value": "oklch(0.23 0.01 140)" }, + { + "name": "--intergalactic-feature-popover-dot", + "value": "oklch(0.88 0.078 303)" + }, { "name": "--intergalactic-feature-popover-dot-outer-border", "value": "oklch(0.88 0.078 303)" }, + { + "name": "--intergalactic-feature-popover-dot-neutral", + "value": "oklch(0.88 0.078 303)" + }, { "name": "--intergalactic-feature-popover-dot-neutral-outer-border", "value": "oklch(0.88 0.078 303)" }, + { + "name": "--intergalactic-feature-popover-accent-bg", + "value": "oklch(0.88 0.078 303)" + }, + { + "name": "--intergalactic-feature-popover-accent-dot-outer-border", + "value": "oklch(0.88 0.078 303)" + }, + { + "name": "--intergalactic-feature-popover-neutral-bg", + "value": "oklch(0.23 0.01 140)" + }, + { + "name": "--intergalactic-feature-popover-neutral-dot-outer-border", + "value": "oklch(0.88 0.078 303)" + }, { "name": "--intergalactic-slider-rating-normal", "value": "oklch(0.7 0.003 162.2)" @@ -893,5 +917,17 @@ { "name": "--intergalactic-dot-notification-text", "value": "oklch(0.999 0.001 180 / 0.949)" + }, + { + "name": "--intergalactic-radio-border", + "value": "oklch(0.137 0.026 175.7 / 0.161)" + }, + { + "name": "--intergalactic-radio-bg-normal", + "value": "oklch(1 0 0)" + }, + { + "name": "--intergalactic-radio-bg-selected", + "value": "oklch(0.23 0.01 140)" } ] diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json index 2c35c25e5b..8382a8ef6f 100644 --- a/website/docs/style/design-tokens/design-tokens.json +++ b/website/docs/style/design-tokens/design-tokens.json @@ -902,6 +902,24 @@ "description": "Border color of the Checkbox button in its active state.", "components": [] }, + { + "name": "--intergalactic-control-radio-bg-normal", + "value": "oklch(1 0 0)", + "description": "Background color of the Radio.", + "components": [] + }, + { + "name": "--intergalactic-control-radio-bg-selected", + "value": "oklch(0.23 0.01 140)", + "description": "Selected state of the Radio background.", + "components": [] + }, + { + "name": "--intergalactic-control-radio-border", + "value": "oklch(0.137 0.026 175.7 / 0.161)", + "description": "Border color of the Radio.", + "components": [] + }, { "name": "--intergalactic-control-primary-advertising", "value": "oklch(0.64 0.223 299.3)", @@ -1459,41 +1477,43 @@ ] }, { - "name": "--intergalactic-feature-popover-accent-bg", + "name": "--intergalactic-feature-popover-bg-accent", "value": "oklch(0.88 0.078 303)", - "description": "Color of the outer border of the FeaturePopover.Spot.", + "description": "Background of the FeaturePopover with accent theme.", "components": [] }, { - "name": "--intergalactic-feature-popover-accent-dot-outer-border", - "value": "oklch(0.88 0.078 303)", - "description": "Color of the outer border of the FeaturePopover.Spot.", - "components": [] + "name": "--intergalactic-feature-popover-bg-neutral", + "value": "oklch(0.23 0.01 140)", + "description": "Background of the FeaturePopover with neutral theme.", + "components": [ + "feature-popover" + ] }, { - "name": "--intergalactic-feature-popover-dot", + "name": "--intergalactic-feature-popover-dot-accent", "value": "oklch(0.88 0.078 303)", - "description": "Color of the outer border of the FeaturePopover.Spot.", + "description": "Fill color of the FeaturePopover.Spot with accent theme.", "components": [] }, { "name": "--intergalactic-feature-popover-dot-neutral", "value": "oklch(0.88 0.078 303)", - "description": "Color of the outer border of the FeaturePopover.Spot.", + "description": "Fill color of the FeaturePopover.Spot with neutral theme.", "components": [ "feature-popover" ] }, { - "name": "--intergalactic-feature-popover-neutral-bg", - "value": "oklch(0.23 0.01 140)", - "description": "Color of the outer border of the FeaturePopover.Spot.", + "name": "--intergalactic-feature-popover-dot-outer-border-accent", + "value": "oklch(0.88 0.078 303)", + "description": "Outer border color of the FeaturePopover.Spot with accent theme.", "components": [] }, { - "name": "--intergalactic-feature-popover-neutral-dot-outer-border", + "name": "--intergalactic-feature-popover-dot-outer-border-neutral", "value": "oklch(0.88 0.078 303)", - "description": "Color of the outer border of the FeaturePopover.Spot.", + "description": "Outer border color of the FeaturePopover.Spot with neutral theme.", "components": [] }, { @@ -1958,24 +1978,6 @@ "progress-bar" ] }, - { - "name": "--intergalactic-radio-bg-normal", - "value": "oklch(1 0 0)", - "description": "Background color of the Radio.", - "components": [] - }, - { - "name": "--intergalactic-radio-bg-selected", - "value": "oklch(0.23 0.01 140)", - "description": "Selected state of the Radio background.", - "components": [] - }, - { - "name": "--intergalactic-radio-border", - "value": "oklch(0.137 0.026 175.7 / 0.161)", - "description": "Border color of the Radio.", - "components": [] - }, { "name": "--intergalactic-scroll-area-dropdown-menu-bottom", "value": "linear-gradient(to top, #fff 34.38%, transparent 100%)",