From 63f722a54ac1f7f6df5bf09d329740470c55e230 Mon Sep 17 00:00:00 2001 From: Patrick DeVries <39521214+PatrickDeVries@users.noreply.github.com> Date: Thu, 17 Jul 2025 15:22:25 -0400 Subject: [PATCH 1/9] Clean up rebrand logic and styles from components Q-Z --- packages/Radio/src/radio.scss | 32 ----- packages/Select/src/SelectInput.tsx | 17 +-- .../src/__snapshots__/Select.test.tsx.snap | 11 +- packages/Select/src/select-input.scss | 10 -- packages/Select/src/select-option.scss | 17 --- packages/Select/src/select-value.scss | 19 --- packages/Select/src/select.scss | 45 -------- .../StackedBar/src/stacked-bar-tooltip.scss | 33 ------ packages/StackedBar/src/stacked-bar.scss | 29 ----- packages/Stepper/src/step.scss | 28 ----- packages/Stepper/src/stepper.scss | 15 --- packages/Tabs/src/Tabs.tsx | 38 ++---- packages/Tabs/src/tabs.scss | 50 -------- packages/Tag/src/mixins.scss | 5 - packages/Tag/src/tag.scss | 109 ------------------ packages/TagPicker/src/mixins.scss | 8 -- packages/TagPicker/src/tag-picker.scss | 42 ------- .../src/plugins/floating-link-editor.scss | 18 --- packages/TextEditor/src/plugins/toolbar.scss | 23 ---- packages/TextEditor/src/text-editor.scss | 97 ---------------- packages/Textarea/src/mixins.scss | 9 +- packages/Textarea/src/textarea.scss | 38 ------ packages/Toaster/src/Toast.tsx | 29 +---- .../src/__snapshots__/Toaster.test.tsx.snap | 36 +++--- packages/Toaster/src/toaster.scss | 32 ----- packages/Toggle/src/toggle.scss | 53 --------- packages/Tooltip/src/Tooltip.tsx | 8 +- packages/Tooltip/src/tooltip.scss | 21 ---- .../src/VerticalBarChart.stories.tsx | 9 -- .../src/vertical-bar-chart.scss | 10 -- 30 files changed, 37 insertions(+), 854 deletions(-) diff --git a/packages/Radio/src/radio.scss b/packages/Radio/src/radio.scss index 35b3c3554..941b07f76 100644 --- a/packages/Radio/src/radio.scss +++ b/packages/Radio/src/radio.scss @@ -6,38 +6,6 @@ @layer igloo { :root { - /* Default */ - --ids-radio-font-family: #{tokens.$primary-font-family}; - --ids-radio-font-weight: #{tokens.$font-weight-regular}; - --ids-radio-font-size: #{tokens.$font-size-4}; - --ids-radio-font-size-small: #{tokens.$font-size-3}; - --ids-radio-font-size-description: #{tokens.$font-size-3}; - --ids-radio-line-height: normal; - --ids-radio-line-height-small: normal; - --ids-radio-text: #{tokens.$grey-800}; - --ids-radio-text-hover: #{tokens.$grey-800}; - --ids-radio-text-pressed: #{tokens.$grey-800}; - --ids-radio-text-description: #{tokens.$grey-600}; - --ids-radio-description-padding: #{tokens.$space-1}; - --ids-radio-padding: #{tokens.$space-2}; - --ids-radio-margin: .2rem 0 0; - --ids-radio-margin-small: .12rem 0 0; - --ids-radio-size: #{tokens.$font-size-4}; - --ids-radio-check: #{tokens.$samoyed}; - --ids-radio-border: #{tokens.$grey-400}; - --ids-radio-border-hover: #{tokens.$grey-800}; - --ids-radio-border-disabled: #{tokens.$grey-300}; - --ids-radio-border-checked: #{tokens.$electric-blue-500}; - --ids-radio-border-checked-hover: #{tokens.$electric-blue-500}; - --ids-radio-border-pressed: #{tokens.$grey-800}; - --ids-radio-background-pressed: #{tokens.$samoyed}; - --ids-radio-background: #{tokens.$samoyed}; - --ids-radio-background-disabled: #{tokens.$grey-200}; - --ids-radio-background-checked: #{tokens.$electric-blue-500}; - --ids-radio-background-disabled-checked: #{tokens.$grey-300}; - } - - [data-brand="workleap"] { /* Default */ --ids-radio-font-family: var(--hop-body-md-font-family); --ids-radio-font-weight: var(--hop-body-md-font-weight); diff --git a/packages/Select/src/SelectInput.tsx b/packages/Select/src/SelectInput.tsx index d75f4dc1c..ebddb5bc5 100644 --- a/packages/Select/src/SelectInput.tsx +++ b/packages/Select/src/SelectInput.tsx @@ -1,7 +1,5 @@ import * as React from "react"; -import ChevronUp from "@igloo-ui/icons/dist/TableChevronSelectedUp"; -import ChevronDown from "@igloo-ui/icons/dist/TableChevronSelectedDown"; import { AngleDownIcon, AngleUpIcon } from "@hopper-ui/icons-react16"; import "./select-input.scss"; @@ -14,32 +12,21 @@ export interface SelectInputProps extends React.ComponentProps<"div"> { /** Callback for when the clear button is clicked */ } -const getBrand = (): string => { - return document.documentElement.getAttribute("data-brand") ?? "igloo"; -}; - const SelectInput: React.FunctionComponent = ({ children, isOpen = false, ...rest }: SelectInputProps) => { - const isWorkleap = getBrand() === "workleap"; const chevronClass = "ids-select__input__chevron"; - const chevronUpIcon = isWorkleap ? - : - ; - const chevronDownIcon = isWorkleap ? - : - ; return (
{children}
{isOpen ? ( - chevronUpIcon + ) : ( - chevronDownIcon + )}
diff --git a/packages/Select/src/__snapshots__/Select.test.tsx.snap b/packages/Select/src/__snapshots__/Select.test.tsx.snap index 2fd1d4836..4f8c32642 100644 --- a/packages/Select/src/__snapshots__/Select.test.tsx.snap +++ b/packages/Select/src/__snapshots__/Select.test.tsx.snap @@ -23,17 +23,16 @@ exports[`Select It should render a snapshot 1`] = ` class="ids-select__input-actions" > diff --git a/packages/Select/src/select-input.scss b/packages/Select/src/select-input.scss index 035b5e122..cfa58bd3a 100644 --- a/packages/Select/src/select-input.scss +++ b/packages/Select/src/select-input.scss @@ -2,16 +2,6 @@ @layer igloo { :root { - /* Default */ - --ids-select-input-chevron-color: #{tokens.$grey-800}; - --ids-select-input-search-height: 3.9rem; - --ids-select-input-actions-padding: 0 #{tokens.$space-2}; - - /* Disabled */ - --ids-select-input-chevron-color-disabled: #{tokens.$grey-600}; - } - - [data-brand="workleap"] { /* Default */ --ids-select-input-chevron-color: var(--hop-neutral-icon-weak); --ids-select-input-search-height: 2.4375rem; diff --git a/packages/Select/src/select-option.scss b/packages/Select/src/select-option.scss index 60b9efbb5..0764cc74e 100644 --- a/packages/Select/src/select-option.scss +++ b/packages/Select/src/select-option.scss @@ -2,23 +2,6 @@ @layer igloo { :root { - --ids-select-option-min-height: #{tokens.$space-5}; - - /* Focused */ - --ids-select-option-background-focused: #{tokens.$electric-blue-50}; - - /* Selected */ - --ids-select-option-background-selected: none; - - /* Disabled */ - --ids-select-option-color-disabled: #{tokens.$grey-600}; - - /* Checkmark */ - --ids-select-option-checkmark-color: #{tokens.$electric-blue-500}; - --ids-select-option-checkmark-margin: 0 #{tokens.$space-3} 0 0; - } - - [data-brand="workleap"] { --ids-select-option-min-height: 2rem; /* Focused */ diff --git a/packages/Select/src/select-value.scss b/packages/Select/src/select-value.scss index 1b33aee0a..ed89ab1a7 100644 --- a/packages/Select/src/select-value.scss +++ b/packages/Select/src/select-value.scss @@ -2,25 +2,6 @@ @layer igloo { :root { - /* Default */ - --ids-select-value-padding: #{tokens.$space-2} #{tokens.$space-3}; - - /* Compact **/ - --ids-select-value-padding-compact: #{tokens.$space-1} #{tokens.$space-3}; - - /* Disabled */ - --ids-select-value-color-disabled: #{tokens.$grey-500}; - - /* Placeholder */ - --ids-select-value-color-placeholder: #{tokens.$grey-400}; - - /* Visual Identifier */ - --ids-select-value-icon-color: inherit; - --ids-select-value-icon-size: #{tokens.$space-3}; - --ids-select-value-icon-margin-right: #{tokens.$space-2}; - } - - [data-brand="workleap"] { /* Default */ --ids-select-value-padding: var(--hop-space-stack-sm) var(--hop-space-inline-md); diff --git a/packages/Select/src/select.scss b/packages/Select/src/select.scss index cb267977b..7f7224899 100644 --- a/packages/Select/src/select.scss +++ b/packages/Select/src/select.scss @@ -7,51 +7,6 @@ @layer igloo { :root { - /* Default */ - --ids-select-font-family: #{tokens.$primary-font-family}; - --ids-select-font-size: #{tokens.$font-size-4}; - --ids-select-font-weight: #{tokens.$font-weight-regular}; - --ids-select-line-height: #{tokens.$space-4}; - --ids-select-color: #{tokens.$grey-800}; - --ids-select-background: #{tokens.$samoyed}; - --ids-select-border-color: #{tokens.$grey-300}; - --ids-select-border-radius: #{tokens.$border-radius-sm}; - --ids-select-number-of-option-to-display: 4; - --ids-select-border-width: 0.1rem; - --ids-select-height: #{tokens.$space-6}; - - /* Compact */ - --ids-select-font-size-compact: #{tokens.$font-size-3}; - --ids-select-line-height-compact: #{tokens.$line-height-xxl}; - --ids-select-height-compact: #{tokens.$space-5}; - - /* Hover */ - --ids-select-background-color-hover: #{tokens.$samoyed}; - --ids-select-border-color-hover: #{tokens.$grey-600}; - - /* Active */ - --ids-select-background-active: #{tokens.$samoyed}; - --ids-select-border-color-active: #{tokens.$electric-blue-500}; - - /* Focus */ - --ids-select-border-color-focus: #{tokens.$electric-blue-500}; - --ids-select-background-focus: #{tokens.$samoyed}; - --ids-select-focus: none; - - /* Pressed */ - --ids-select-border-color-pressed: #{tokens.$grey-600}; - --ids-select-background-pressed: #{tokens.$samoyed}; - - /* Disabled */ - --ids-select-color-disabled: #{tokens.$grey-500}; - --ids-select-background-disabled: #{tokens.$grey-200}; - --ids-select-border-color-disabled: #{tokens.$grey-200}; - - /* Error */ - --ids-select-border-color-error: #{tokens.$coral-500}; - } - - [data-brand="workleap"] { /* Default */ --ids-select-font-family: var(--hop-body-md-font-family); --ids-select-font-size: var(--hop-body-md-font-size); diff --git a/packages/StackedBar/src/stacked-bar-tooltip.scss b/packages/StackedBar/src/stacked-bar-tooltip.scss index 999fa1760..2fd2d75f2 100644 --- a/packages/StackedBar/src/stacked-bar-tooltip.scss +++ b/packages/StackedBar/src/stacked-bar-tooltip.scss @@ -6,39 +6,6 @@ @layer igloo { :root { - /* Default */ - --ids-stacked-bar-tooltip-font-family: #{tokens.$primary-font-family}; - --ids-stacked-bar-tooltip-font-size: #{tokens.$font-size-7}; - --ids-stacked-bar-tooltip-data-item-padding: #{tokens.$space-1} 0; - --ids-stacked-bar-tooltip-data-item-no-color: #{tokens.$grey-400}; - --ids-stacked-bar-tooltip-data-item-strength-minus-2: #{tokens.$coral-500}; - --ids-stacked-bar-tooltip-data-item-strength-minus-1: #{tokens.$coral-300}; - --ids-stacked-bar-tooltip-data-item-strength-0: #{tokens.$creamsicle-150}; - --ids-stacked-bar-tooltip-data-item-strength-1: #{tokens.$seaweed-300}; - --ids-stacked-bar-tooltip-data-item-strength-2: #{tokens.$seaweed-500}; - - /* No Data */ - --ids-stacked-bar-tooltip-no-data-color: #{tokens.$grey-600}; - --ids-stacked-bar-tooltip-no-data-font-size: #{tokens.$font-size-2}; - --ids-stacked-bar-tooltip-no-data-font-weight: #{tokens.$font-weight-regular}; - --ids-stacked-bar-tooltip-no-data-line-height: #{tokens.$line-height-xl}; - - /* Value */ - --ids-stacked-bar-tooltip-value-color: #{tokens.$grey-800}; - --ids-stacked-bar-tooltip-value-font-family: #{tokens.$secondary-font-family}; - --ids-stacked-bar-tooltip-value-font-size: #{tokens.$font-size-6}; - --ids-stacked-bar-tooltip-value-font-weight: #{tokens.$font-weight-semi-bold}; - --ids-stacked-bar-tooltip-value-line-height: #{tokens.$line-height-lg}; - --ids-stacked-bar-tooltip-value-margin: #{tokens.$space-2}; - - /* Label */ - --ids-stacked-bar-tooltip-label-color: #{tokens.$grey-600}; - --ids-stacked-bar-tooltip-label-font-size: #{tokens.$font-size-3}; - --ids-stacked-bar-tooltip-label-font-weight: #{tokens.$font-weight-regular}; - --ids-stacked-bar-tooltip-label-line-height: #{tokens.$line-height-xxl}; - } - - [data-brand="workleap"] { /* Default */ --ids-stacked-bar-tooltip-font-family: var(--hop-heading-lg-font-family); --ids-stacked-bar-tooltip-font-size: var(--hop-heading-lg-font-size); diff --git a/packages/StackedBar/src/stacked-bar.scss b/packages/StackedBar/src/stacked-bar.scss index 4f55fe2c0..b155d8ea9 100644 --- a/packages/StackedBar/src/stacked-bar.scss +++ b/packages/StackedBar/src/stacked-bar.scss @@ -6,35 +6,6 @@ @layer igloo { :root { - /* Default */ - --ids-stacked-bar-font-family: #{tokens.$primary-font-family}; - --ids-stacked-bar-font-size: #{tokens.$font-size-2}; - --ids-stacked-bar-font-weight: #{tokens.$font-weight-semi-bold}; - --ids-stacked-bar-color: #{tokens.$grey-800}; - --ids-stacked-bar-color-ends: #{tokens.$grey-800}; - --ids-stacked-bar-height: #{tokens.$space-4}; - --ids-stacked-bar-height-small: #{tokens.$space-2}; - --ids-stacked-bar-empty-fill-side: #{tokens.$grey-300}; - --ids-stacked-bar-empty-fill-middle: #{tokens.$grey-250}; - - /* Bar Colors */ - --ids-stacked-bar-strength-minus-2: #{tokens.$coral-400}; - --ids-stacked-bar-strength-minus-1: #{tokens.$coral-200}; - --ids-stacked-bar-strength-0: #{tokens.$creamsicle-100}; - --ids-stacked-bar-strength-1: #{tokens.$seaweed-200}; - --ids-stacked-bar-strength-2: #{tokens.$seaweed-400}; - --ids-stacked-bar-no-color: #{tokens.$grey-300}; - - /* Hover */ - --ids-stacked-bar-strength-minus-2-hover: #{tokens.$coral-500}; - --ids-stacked-bar-strength-minus-1-hover: #{tokens.$coral-300}; - --ids-stacked-bar-strength-0-hover: #{tokens.$creamsicle-150}; - --ids-stacked-bar-strength-1-hover: #{tokens.$seaweed-300}; - --ids-stacked-bar-strength-2-hover: #{tokens.$seaweed-500}; - --ids-stacked-bar-no-color-hover: #{tokens.$grey-400}; - } - - [data-brand="workleap"] { /* Default */ --ids-stacked-bar-font-family: var(--hop-body-xs-semibold-font-family); --ids-stacked-bar-font-size: var(--hop-body-xs-semibold-font-size); diff --git a/packages/Stepper/src/step.scss b/packages/Stepper/src/step.scss index 402dd5bb5..1c449a669 100644 --- a/packages/Stepper/src/step.scss +++ b/packages/Stepper/src/step.scss @@ -6,34 +6,6 @@ @layer igloo { :root { - /* Default */ - --ids-step-font-family: #{tokens.$primary-font-family}; - --ids-step-font-size: #{tokens.$font-size-4}; - --ids-step-background: #{tokens.$samoyed}; - --ids-step-border: #{tokens.$grey-300}; - --ids-step-size: 2rem; - --ids-step-complete-color: #{tokens.$samoyed}; - --ids-step-complete-background: #{tokens.$electric-blue-500}; - --ids-step-focus: #{tokens.$focus}; - - /* Hover */ - --ids-step-border-hover: #{tokens.$grey-800}; - --ids-step-background-hover: #{tokens.$samoyed}; - --ids-step-complete-background-hover: #{tokens.$electric-blue-600}; - - /* Pressed */ - --ids-step-border-pressed: #{tokens.$grey-800}; - --ids-step-background-pressed: #{tokens.$samoyed}; - --ids-step-complete-background-pressed: #{tokens.$electric-blue-600}; - - /* Current Step */ - --ids-step-current-background: #{tokens.$samoyed}; - --ids-step-current-border: #{tokens.$grey-300}; - --ids-step-current-dot-background: #{tokens.$electric-blue-500}; - --ids-step-current-dot-size: 1rem; - } - - [data-brand="workleap"] { /* Default */ --ids-step-font-family: var(--hop-body-md-font-family); --ids-step-font-size: var(--hop-body-md-font-size); diff --git a/packages/Stepper/src/stepper.scss b/packages/Stepper/src/stepper.scss index ec2a7fd0d..c33d30689 100644 --- a/packages/Stepper/src/stepper.scss +++ b/packages/Stepper/src/stepper.scss @@ -6,21 +6,6 @@ @layer igloo { :root { - /* Default */ - --ids-stepper-font-family: #{tokens.$primary-font-family}; - --ids-stepper-font-size: #{tokens.$font-size-4}; - - /* Divider */ - --ids-stepper-divider-background: #{tokens.$grey-300}; - --ids-stepper-divider-border-radius: 1rem; - --ids-stepper-divider-height: 0.2rem; - --ids-stepper-divider-margin: 0 #{tokens.$space-2}; - --ids-stepper-divider-width: 5rem; - --ids-stepper-divider-background-completed: #{tokens.$electric-blue-500}; - --ids-stepper-divider-height-completed: #{tokens.$space-1}; - } - - [data-brand="workleap"] { /* Default */ --ids-stepper-font-family: var(--hop-body-md-font-family); --ids-stepper-font-size: var(--hop-body-md-font-size); diff --git a/packages/Tabs/src/Tabs.tsx b/packages/Tabs/src/Tabs.tsx index 1370258bc..bee83d004 100644 --- a/packages/Tabs/src/Tabs.tsx +++ b/packages/Tabs/src/Tabs.tsx @@ -2,8 +2,6 @@ import * as React from "react"; import cx from "classnames"; -import CrownSolid from "@igloo-ui/icons/dist/CrownSolid"; -import TextBulletSolid from "@igloo-ui/icons/dist/TextBulletSolid"; import { BulletIcon, UpsellIcon } from "@hopper-ui/icons-react16"; import "./tabs.scss"; @@ -36,10 +34,6 @@ export interface TabsProps extends React.ComponentProps<"div"> { tabs: Array; } -const getBrand = (): string => { - return document.documentElement.getAttribute("data-brand") ?? "igloo"; -}; - const Tabs: React.FunctionComponent = ({ onSelectTab, selected = 0, @@ -53,8 +47,6 @@ const Tabs: React.FunctionComponent = ({ "ids-tabs--inline": isInline, "ids-tabs--heading": !isInline }); - - const isWorkleap = getBrand() === "workleap"; const handleOnClick = (index: number): void => { if (onSelectTab) { @@ -70,30 +62,16 @@ const Tabs: React.FunctionComponent = ({ let tabContents = ( <> {tab.notification && ( - isWorkleap ? ( - - ) : ( - - ) + )} {tab.premium && ( - isWorkleap ? ( - - ) : ( - - ) + )} ); diff --git a/packages/Tabs/src/tabs.scss b/packages/Tabs/src/tabs.scss index ffa0afd9b..a4beae4ef 100644 --- a/packages/Tabs/src/tabs.scss +++ b/packages/Tabs/src/tabs.scss @@ -9,56 +9,6 @@ @layer igloo { :root { - /* Default */ - --ids-tabs-font-family: #{tokens.$primary-font-family}; - --ids-tabs-font-size: #{tokens.$font-size-4}; - --ids-tabs-margin: #{tokens.$space-0} #{tokens.$space-0} 2rem; - - /* Tab */ - --ids-tab-height: 4rem; - --ids-tab-button-padding: #{tokens.$space-2}; - --ids-tab-button-font-size: #{tokens.$font-size-4}; - --ids-tab-button-font-weight: #{tokens.$font-weight-medium}; - --ids-tab-button-line-height: #{tokens.$line-height-xxxl}; - --ids-tab-button-color: #{tokens.$grey-600}; - --ids-tab-button-hover-color: #{tokens.$electric-blue-500}; - --ids-tab-button-pressed-color: #{tokens.$electric-blue-500}; - --ids-tab-button-active-color: #{tokens.$electric-blue-500}; - --ids-tab-button-after-horizontal-space: #{tokens.$space-2}; - --ids-tab-button-after-height: calc(#{tokens.$space-1} / 2); - --ids-tab-button-after-bottom: calc(#{tokens.$space-2} - var(--ids-tab-button-after-height)); - --ids-tab-button-after-background: #{tokens.$electric-blue-500}; - --ids-tab-button-focus-outline-size: 0.2rem; - --ids-tab-button-focus-outline-color: var(--hop-primary-surface-strong); - --ids-tab-button-focus-outline-radius: var(--hop-shape-rounded-sm); - --ids-tab-button-focus-height: 100%; - --ids-tab-button-focus-width: 100%; - - /* Icons */ - --ids-tab-icon-margin-left: #{tokens.$space-1}; - --ids-tab-icon-notification-color: #{tokens.$coral-500}; - --ids-tab-icon-premium-color: #{tokens.$dandelion-600}; - - /* === Inline Style === */ - - --ids-inline-tab-height: 4.5rem; - --ids-inline-tab-background-color: transparent; - --ids-inline-tab-border-radius: 0; - --ids-inline-tab-outline: none; - --ids-inline-tab-outline-offset: 0; - --ids-inline-tab-button-font-size: #{tokens.$font-size-3}; - --ids-inline-tab-button-line-height: #{tokens.$line-height-xxxl}; - --ids-inline-tab-button-focus-height: 100%; - --ids-inline-tab-button-focus-width: 100%; - - /* Tab */ - --ids-inline-tab-button-padding: #{tokens.$space-2} #{tokens.$space-3}; - --ids-inline-tab-button-after-bottom: -#{tokens.$space-1}; - --ids-inline-tab-button-after-height: #{tokens.$space-1}; - --ids-inline-tab-button-after-horizontal-space: #{tokens.$space-0}; - } - - [data-brand="workleap"] { /* Default */ --ids-tabs-font-family: var(--hop-body-sm-font-family); --ids-tabs-font-size: var(--hop-body-sm-font-size); diff --git a/packages/Tag/src/mixins.scss b/packages/Tag/src/mixins.scss index 9b3521454..fe74be20c 100644 --- a/packages/Tag/src/mixins.scss +++ b/packages/Tag/src/mixins.scss @@ -1,11 +1,6 @@ @use '~@igloo-ui/tokens/dist/base10/variables' as tokens; :root { - --ids-tag-border-size: 0.1rem; - --ids-tag-hover-cursor: initial; -} - -[data-brand="workleap"] { --ids-tag-border-size: 0.0625rem; --ids-tag-background-disabled: var(--hop-neutral-surface-disabled); --ids-tag-color-disabled: var(--hop-neutral-text-disabled); diff --git a/packages/Tag/src/tag.scss b/packages/Tag/src/tag.scss index 18730019e..4b07cddc2 100644 --- a/packages/Tag/src/tag.scss +++ b/packages/Tag/src/tag.scss @@ -8,115 +8,6 @@ @layer igloo { :root { - /* Default */ - --ids-tag-border-radius: #{tokens.$border-radius-sm}; - --ids-tag-border-radius-rounded: 4.2rem; - --ids-tag-border-radius-rounded-medium: 2.5rem; - --ids-tag-font-family: #{tokens.$primary-font-family}; - --ids-tag-font-weight: #{tokens.$font-weight-regular}; - --ids-tag-line-height: #{tokens.$line-height-xl}; - --ids-tag-max-width: 24rem; - --ids-tag-caution-icon-color: #{tokens.$coral-500}; - --ids-tag-badge-font-family: #{tokens.$primary-font-family}; - --ids-tag-badge-font-weight: #{tokens.$font-weight-regular}; - --ids-tag-badge-line-height: #{tokens.$line-height-xl}; - - /* === Appearance === */ - - /* Default */ - --ids-tag-background-default: #{tokens.$grey-200}; - --ids-tag-color-default: #{tokens.$grey-600}; - - /* Progress */ - --ids-tag-background-progress: #{tokens.$electric-blue-100}; - --ids-tag-color-progress: #{tokens.$electric-blue-600}; - - /* Negative */ - --ids-tag-background-negative: #{tokens.$coral-100}; - --ids-tag-color-negative: #{tokens.$coral-900}; - - /* Positive */ - --ids-tag-background-positive: #{tokens.$seaweed-50}; - --ids-tag-color-positive: #{tokens.$seaweed-900}; - - /* Caution */ - --ids-tag-background-caution: #{tokens.$creamsicle-100}; - --ids-tag-color-caution: #{tokens.$coral-800}; - - /* Primary */ - --ids-tag-background-primary: #{tokens.$electric-blue-500}; - --ids-tag-color-primary: #{tokens.$samoyed}; - - /* Inactive */ - --ids-tag-background-inactive: #{tokens.$grey-200}; - --ids-tag-color-inactive: #{tokens.$grey-600}; - - /* Neutral */ - --ids-tag-background-neutral: #{tokens.$samoyed}; - --ids-tag-color-neutral: #{tokens.$grey-800}; - --ids-tag-border-neutral: #{tokens.$grey-300}; - --ids-tag-neutral-dismiss-btn-color: #{tokens.$grey-600}; - --ids-tag-neutral-dismiss-btn-hover-color: #{tokens.$grey-800}; - - /* Option 1 */ - --ids-tag-background-option1: #{tokens.$electric-blue-200}; - --ids-tag-color-option1: #{tokens.$grey-800}; - - /* Option 2 */ - --ids-tag-background-option2: #{tokens.$strawberry-fields-200}; - --ids-tag-color-option2: #{tokens.$grey-800}; - - /* Option 3 */ - --ids-tag-background-option3: #{tokens.$seaweed-400}; - --ids-tag-color-option3: #{tokens.$grey-800}; - - /* Option 4 */ - --ids-tag-background-option4: #{tokens.$electric-blue-500}; - --ids-tag-color-option4: #{tokens.$samoyed}; - - /* Option 5 */ - --ids-tag-background-option5: #{tokens.$grey-500}; - --ids-tag-color-option5: #{tokens.$samoyed}; - - /* Option 6 */ - --ids-tag-background-option6: #{tokens.$dandelion-400}; - --ids-tag-color-option6: #{tokens.$grey-800}; - - /* Select */ - --ids-tag-background-select: #{tokens.$samoyed}; - --ids-tag-background-has-error-select: #{tokens.$samoyed}; - --ids-tag-color-select: #{tokens.$grey-800}; - --ids-tag-border-select: #{tokens.$grey-300}; - --ids-tag-select-dismiss-btn-color: #{tokens.$grey-600}; - --ids-tag-select-dismiss-btn-hover-color: #{tokens.$grey-800}; - - /* === Sizes === */ - - /* Medium */ - --ids-tag-font-size: #{tokens.$font-size-3}; - --ids-tag-badge-font-size: #{tokens.$font-size-3}; - --ids-tag-height: #{tokens.$space-5}; - --ids-tag-padding: #{tokens.$space-0} #{tokens.$space-3}; - --ids-tag-icon-gap: #{tokens.$space-2}; - - /* Small */ - --ids-tag-font-size-small: #{tokens.$font-size-2}; - --ids-tag-badge-font-size-small: #{tokens.$font-size-3}; - --ids-tag-height-small: #{tokens.$space-4}; - --ids-tag-padding-small: 0 #{tokens.$space-2}; - --ids-tag-padding-small-select: 0 #{tokens.$space-3}; - - /* XSmall */ - --ids-tag-height-xsmall: 2rem; - - /* Micro */ - --ids-tag-height-micro: #{tokens.$space-3}; - - /* === isError === */ - --ids-tag-border-has-error: #{tokens.$coral-600}; - } - - [data-brand="workleap"] { /* Default */ --ids-tag-border-radius: var(--hop-shape-pill); --ids-tag-border-radius-rounded: var(--hop-shape-pill); diff --git a/packages/TagPicker/src/mixins.scss b/packages/TagPicker/src/mixins.scss index cbd36e13e..3ffcd7706 100644 --- a/packages/TagPicker/src/mixins.scss +++ b/packages/TagPicker/src/mixins.scss @@ -1,14 +1,6 @@ @use '~@igloo-ui/tokens/dist/base10/variables' as tokens; :root { - --ids-scrollbar-color: #{tokens.$grey-300}; - --ids-scrollbar-border-color: #{tokens.$samoyed}; - --ids-scrollbar-border-size: 1rem; - --ids-scrollbar-size: 0.2rem; - --ids-scrollbar-radii: #{tokens.$border-radius-md}; -} - -[data-brand="workleap"] { --ids-scrollbar-color: var(--hop-neutral-border-weak); --ids-scrollbar-border-color: var(--hop-neutral-surface); --ids-scrollbar-border-size: 0.625rem; diff --git a/packages/TagPicker/src/tag-picker.scss b/packages/TagPicker/src/tag-picker.scss index d6fb13a79..f9d3d27af 100644 --- a/packages/TagPicker/src/tag-picker.scss +++ b/packages/TagPicker/src/tag-picker.scss @@ -6,48 +6,6 @@ @layer igloo { :root { - /* Default */ - --ids-tag-picker-border-size: 0.1rem; - --ids-tag-picker-border-color: #{tokens.$grey-400}; - --ids-tag-picker-border-color-hover: #{tokens.$grey-600}; - --ids-tag-picker-border-color-focus: #{tokens.$electric-blue-500}; - --ids-tag-picker-border-color-error: #{tokens.$coral-500}; - --ids-tag-picker-border-radius: #{tokens.$border-radius-sm}; - --ids-tag-picker-font-family: #{tokens.$primary-font-family}; - --ids-tag-picker-font-size: #{tokens.$font-size-4}; - --ids-tag-picker-background-disabled: #{tokens.$grey-250}; - --ids-tag-picker-background-hover: transparent; - --ids-tag-picker-border-disabled: #{tokens.$grey-250}; - --ids-tag-picker-height: #{tokens.$space-6}; - - /* Search icon */ - --ids-tag-picker-search-icon-color: #{tokens.$grey-400}; - --ids-tag-picker-search-icon-margin: 0 #{tokens.$space-2} 0 #{tokens.$space-3}; - - /* Search input */ - --ids-tag-picker-input-min-width: 0.2rem; - --ids-tag-picker-input-disabled-padding: 0; - --ids-tag-picker-input-offset: var(--ids-tag-picker-content-padding-vertical) * 2; - --ids-tag-picker-input-height: calc(#{tokens.$space-5} - var(--ids-tag-picker-input-offset)); - - /* Tag */ - --ids-tag-picker-tag-gap: #{tokens.$space-1}; - - /* Dropdown */ - --ids-tag-picker-dropdown-loading-width: 45rem; - - /* Results */ - --ids-tag-picker-content-padding-vertical: #{tokens.$space-1}; - --ids-tag-picker-content-padding-selected: calc(var(--ids-tag-picker-content-padding-vertical) - var(--ids-tag-picker-border-size)) #{tokens.$space-2}; - --ids-tag-picker-results-padding: #{tokens.$space-2} 0; - --ids-tag-picker-results-min-width: 24rem; - - /* No Results */ - --ids-tag-picker-no-results-padding: #{tokens.$space-2}; - --ids-tag-picker-no-results-color: #{tokens.$grey-600}; - } - - [data-brand="workleap"] { /* Default */ --ids-tag-picker-border-size: 0.0625rem; --ids-tag-picker-border-color: var(--hop-neutral-border); diff --git a/packages/TextEditor/src/plugins/floating-link-editor.scss b/packages/TextEditor/src/plugins/floating-link-editor.scss index 3151ec59e..b1f0aa426 100644 --- a/packages/TextEditor/src/plugins/floating-link-editor.scss +++ b/packages/TextEditor/src/plugins/floating-link-editor.scss @@ -2,24 +2,6 @@ @use "~@igloo-ui/tokens/dist/fonts"; :root { - /* Default */ - --ids-link-editor-font-family: #{tokens.$primary-font-family}; - --ids-link-editor-font-size: #{tokens.$font-size-4}; - --ids-link-editor-background: #{tokens.$samoyed}; - --ids-link-editor-padding: #{tokens.$space-3}; - --isa-link-editor-border-width: 0; - --ids-link-editor-border-color: transparent; - --ids-link-editor-border-radius: #{tokens.$border-radius-sm}; - --ids-link-editor-line-height: #{tokens.$line-height-xxl}; - --ids-link-editor-z-index: #{tokens.$z-index-max}; - --ids-link-editor-width: 100%; - --ids-link-editor-text: #{tokens.$grey-600}; - --ids-link-editor-shadow: #{tokens.$shadow-12}; - --ids-link-editor-button-margin: #{tokens.$space-2}; - --ids-link-editor-max-width: 30rem; -} - -[data-brand="workleap"] { /* Default */ --ids-link-editor-font-family: var(--hop-body-md-font-family); --ids-link-editor-font-size: var(--hop-body-md-font-size); diff --git a/packages/TextEditor/src/plugins/toolbar.scss b/packages/TextEditor/src/plugins/toolbar.scss index 565e0040e..6fea0e320 100644 --- a/packages/TextEditor/src/plugins/toolbar.scss +++ b/packages/TextEditor/src/plugins/toolbar.scss @@ -2,29 +2,6 @@ @use '~@igloo-ui/tokens/dist/fonts'; :root { - /* Default */ - --ids-toolbar-font-family: #{tokens.$primary-font-family}; - --ids-toolbar-font-size: #{tokens.$font-size-3}; - --ids-toolbar-border-color: #{tokens.$grey-200}; - --ids-toolbar-border-width: 0.1rem; - --ids-toolbar-padding: #{tokens.$space-1} #{tokens.$space-3}; - - /* Disabled */ - --ids-toolbar-border-color-disabled: #{tokens.$grey-300}; - - /* Buttons */ - --ids-toolbar-btn-margin: #{tokens.$space-1}; - --ids-toolbar-btn-color: #{tokens.$grey-600}; - --ids-toolbar-btn-color-disabled: #{tokens.$grey-600}; - - /* Divider */ - --ids-toolbar-divider-color: #{tokens.$grey-300}; - --ids-toolbar-divider-color-disabled: #{tokens.$grey-300}; - --ids-toolbar-divider-height: #{tokens.$space-3}; - --ids-toolbar-divider-width: 0.1rem; -} - -[data-brand="workleap"] { /* Default */ --ids-toolbar-font-family: var(--hop-body-sm-font-family); --ids-toolbar-font-size: var(--hop-body-sm-font-size); diff --git a/packages/TextEditor/src/text-editor.scss b/packages/TextEditor/src/text-editor.scss index d077b9d7d..7ecab59a9 100644 --- a/packages/TextEditor/src/text-editor.scss +++ b/packages/TextEditor/src/text-editor.scss @@ -6,103 +6,6 @@ @layer igloo { :root { - /* === Default === */ - --ids-text-editor-font-family: #{tokens.$primary-font-family}; - --ids-text-editor-font-size: #{tokens.$font-size-4}; - --ids-text-editor-background: #{tokens.$samoyed}; - --ids-text-editor-border-width: 0.1rem; - --ids-text-editor-border-color: #{tokens.$grey-300}; - --ids-text-editor-border-radius: #{tokens.$border-radius-sm}; - --ids-text-editor-color: #{tokens.$grey-800}; - --ids-text-editor-padding: #{tokens.$space-2} #{tokens.$space-3}; - --ids-text-editor-line-height: #{tokens.$line-height-xxxl}; - --ids-text-editor-placeholder-color: #{tokens.$grey-400}; - --ids-text-editor-min-height: 12rem; - --ids-text-editor-min-width: 31.4rem; - - /* Hover */ - --ids-text-editor-border-color-hover: #{tokens.$grey-600}; - --ids-text-editor-background-hover: #{tokens.$samoyed}; - - /* Focus */ - --ids-text-editor-border-color-focus: #{tokens.$electric-blue-500}; - --ids-text-editor-focus: none; - - /* Disabled */ - --ids-text-editor-background-disabled: #{tokens.$grey-200}; - --ids-text-editor-border-color-disabled: #{tokens.$grey-200}; - - /* Error */ - --ids-text-editor-border-color-error: #{tokens.$coral-500}; - - /* Footer */ - --ids-text-editor-footer-spacing: #{tokens.$space-2}; - --ids-text-editor-chars-limit-color: #{tokens.$grey-400}; - --ids-text-editor-chars-limit-font-size: #{tokens.$font-size-2}; - --ids-text-editor-private-icon-margin: 0 #{tokens.$space-2} 0 0; - --ids-text-editor-private-color: #{tokens.$grey-600}; - --ids-text-editor-private-font-size: #{tokens.$font-size-2}; - --ids-text-editor-private-line-height: #{tokens.$line-height-xl}; - --ids-text-editor-private-background: #{tokens.$dandelion-50}; - --ids-text-editor-private-border-color: #{tokens.$dandelion-100}; - - /* === Theme === */ - - /* Bold */ - --ids-text-editor-bold: #{tokens.$font-weight-bold}; - - /* Text Code */ - --ids-text-editor-text-code-background: #{tokens.$grey-200}; - - /* Link */ - --ids-text-editor-link-color: #{tokens.$electric-blue-500}; - --ids-text-editor-link-font-weight: #{tokens.$font-weight-medium}; - --ids-text-editor-link-hover: #{tokens.$electric-blue-600}; - - /* Code */ - --ids-text-editor-code-font-size: #{tokens.$font-size-2}; - --ids-text-editor-code-line-height: #{tokens.$line-height-xxxl}; - --ids-text-editor-code-margin: #{tokens.$space-2} #{tokens.$space-0}; - --ids-text-editor-code-padding: #{tokens.$space-2} #{tokens.$space-2} #{tokens.$space-2} #{tokens.$space-7}; - --ids-text-editor-code-before-background: #{tokens.$grey-300}; - --ids-text-editor-code-before-border-color: #{tokens.$grey-300}; - --ids-text-editor-code-before-color: #{tokens.$grey-600}; - --ids-text-editor-code-before-padding: #{tokens.$space-2}; - --ids-text-editor-code-after-font-size: #{tokens.$font-size-1}; - - /* Code Tokens */ - --ids-text-editor-token-comment: #{tokens.$grey-600}; - --ids-text-editor-token-punctuation: #{tokens.$grey-500}; - --ids-text-editor-token-property: #{tokens.$coral-900}; - --ids-text-editor-token-selector: #{tokens.$seaweed-800}; - --ids-text-editor-token-function: #{tokens.$strawberry-fields-300}; - --ids-text-editor-token-variable: #{tokens.$electric-blue-500}; - - /* Paragraphs */ - --ids-text-editor-paragraph-margin: 0 0 #{tokens.$space-2}; - - /* Headings */ - --ids-text-editor-heading-1-font-size: #{tokens.$font-size-7}; - --ids-text-editor-heading-1-font-weight: #{tokens.$font-weight-regular}; - --ids-text-editor-heading-1-margin: 0 0 #{tokens.$space-3}; - --ids-text-editor-heading-1-color: #{tokens.$grey-800}; - --ids-text-editor-heading-2-color: #{tokens.$grey-800}; - --ids-text-editor-heading-2-font-size: #{tokens.$font-size-4}; - --ids-text-editor-heading-2-font-weight: #{tokens.$font-weight-semi-bold}; - --ids-text-editor-heading-2-margin: 0 0 #{tokens.$space-2}; - - /* Quote */ - --ids-text-editor-quote-color: #{tokens.$grey-600}; - --ids-text-editor-quote-border-color: #{tokens.$grey-300}; - --ids-text-editor-quote-border-size: #{tokens.$space-1}; - --ids-text-editor-quote-margin: 0 0 #{tokens.$space-2} #{tokens.$space-3}; - --ids-text-editor-quote-padding: 0 0 0 #{tokens.$space-3}; - - /* List */ - --ids-text-editor-list-margin: #{tokens.$space-2} #{tokens.$space-5}; - } - - [data-brand="workleap"] { /* === Default === */ --ids-text-editor-font-family: var(--hop-body-md-font-family); --ids-text-editor-font-size: var(--hop-body-md-font-size); diff --git a/packages/Textarea/src/mixins.scss b/packages/Textarea/src/mixins.scss index cbd36e13e..9d6bca169 100644 --- a/packages/Textarea/src/mixins.scss +++ b/packages/Textarea/src/mixins.scss @@ -1,14 +1,6 @@ @use '~@igloo-ui/tokens/dist/base10/variables' as tokens; :root { - --ids-scrollbar-color: #{tokens.$grey-300}; - --ids-scrollbar-border-color: #{tokens.$samoyed}; - --ids-scrollbar-border-size: 1rem; - --ids-scrollbar-size: 0.2rem; - --ids-scrollbar-radii: #{tokens.$border-radius-md}; -} - -[data-brand="workleap"] { --ids-scrollbar-color: var(--hop-neutral-border-weak); --ids-scrollbar-border-color: var(--hop-neutral-surface); --ids-scrollbar-border-size: 0.625rem; @@ -16,6 +8,7 @@ --ids-scrollbar-radii: var(--hop-shape-rounded-md); } + @mixin fancy-webkit-scrollbar( $border-color: var(--ids-scrollbar-border-color), $scrollbar-color: var(--ids-scrollbar-color), diff --git a/packages/Textarea/src/textarea.scss b/packages/Textarea/src/textarea.scss index 3b60fc6c3..717832e69 100644 --- a/packages/Textarea/src/textarea.scss +++ b/packages/Textarea/src/textarea.scss @@ -7,44 +7,6 @@ @layer igloo { :root { - /* Default */ - --ids-textarea-font-family: #{tokens.$primary-font-family}; - --ids-textarea-font-size: #{tokens.$font-size-4}; - --ids-textarea-line-height: #{tokens.$line-height-xxxl}; - --ids-textarea-color: #{tokens.$grey-800}; - --ids-textarea-border-color: #{tokens.$grey-300}; - --ids-textarea-border-size: .1rem; - --ids-textarea-border-radius: #{tokens.$border-radius-sm}; - --ids-textarea-padding: #{tokens.$space-2} #{tokens.$space-3}; - - /* Placeholder */ - --ids-textarea-color-placeholder: #{tokens.$grey-400}; - - /* Focus */ - --ids-textarea-focus-border-color: #{tokens.$electric-blue-500}; - --ids-textarea-focus-box-shadow: none; - - /* Hover */ - --ids-textarea-hover-border-color: #{tokens.$grey-300}; - --ids-textarea-hover-background-color: initial; - - /* Error */ - --ids-textarea-error-border-color: #{tokens.$coral-500}; - - /* Disabled */ - --ids-textarea-disabled-background: #{tokens.$grey-200}; - --ids-textarea-disabled-color: #{tokens.$grey-500}; - - /* Character Indicator */ - --ids-textarea-char-indicator-padding-bottom: #{tokens.$space-4}; - --ids-textarea-char-indicator-bottom: #{tokens.$space-2}; - --ids-textarea-char-indicator-right: #{tokens.$space-3}; - --ids-textarea-char-indicator-color: #{tokens.$grey-400}; - --ids-textarea-char-indicator-size: #{tokens.$font-size-2}; - --ids-textarea-char-indicator-line-height: #{tokens.$line-height-xl}; - } - - [data-brand="workleap"] { /* Default */ --ids-textarea-font-family: var(--hop-body-md-font-family); --ids-textarea-font-size: var(--hop-body-md-font-size); diff --git a/packages/Toaster/src/Toast.tsx b/packages/Toaster/src/Toast.tsx index cca8cc2e5..a43508726 100644 --- a/packages/Toaster/src/Toast.tsx +++ b/packages/Toaster/src/Toast.tsx @@ -1,12 +1,11 @@ -import * as React from "react"; -import cx from "classnames"; -import type { QueuedToast, ToastState } from "@react-stately/toast"; import { useToast } from "@react-aria/toast"; +import type { QueuedToast, ToastState } from "@react-stately/toast"; +import cx from "classnames"; +import * as React from "react"; -import IconButton from "@igloo-ui/icon-button"; import Close from "@igloo-ui/icons/dist/Close"; -import SuccessSolid from "@igloo-ui/icons/dist/SuccessSolid"; import RemoveSolid from "@igloo-ui/icons/dist/RemoveSolid"; +import SuccessSolid from "@igloo-ui/icons/dist/SuccessSolid"; import type { ToastArgs } from "./Toaster"; export interface ToastProps { @@ -30,10 +29,6 @@ const Toast: React.FunctionComponent> = ({ toastRef ); - const getBrand = (): string => { - return document.documentElement.getAttribute("data-brand") ?? "igloo"; - }; - delete closeButtonProps.onPress; React.useEffect(() => { @@ -69,21 +64,7 @@ const Toast: React.FunctionComponent> = ({
{statusIcon} {message}
- {isClosable && getBrand() === "igloo" && ( - { - state.close(toast.key); - }} - appearance={{ - type: "ghost", - variant: "secondary" - }} - icon={} - /> - )} - {isClosable && getBrand() === "workleap" && ( + {isClosable && (
= #{tokens.$breakpoints-sm}) { :root { - --ids-toaster-font-size: #{tokens.$font-size-4}; - --ids-toaster-font-weight: #{tokens.$font-weight-bold}; - --ids-toaster-inset: #{tokens.$space-3} 0 auto 0; - --ids-toaster-border-radius: #{tokens.$border-radius-sm}; - --ids-toaster-padding: #{tokens.$space-3} #{tokens.$space-3} calc(#{tokens.$space-3} + #{tokens.$space-1}) #{tokens.$space-3}; - } - - [data-brand="workleap"] { --ids-toaster-font-size: var(--hop-body-md-medium-font-size); --ids-toaster-font-weight: var(--hop-body-md-medium-font-weight); --ids-toaster-inset: var(--hop-space-stack-md) 0 auto 0; diff --git a/packages/Toggle/src/toggle.scss b/packages/Toggle/src/toggle.scss index 8d044affe..a0521efb6 100644 --- a/packages/Toggle/src/toggle.scss +++ b/packages/Toggle/src/toggle.scss @@ -6,59 +6,6 @@ @layer igloo { :root { - /* Default */ - --ids-toggle-font-family: #{tokens.$primary-font-family}; - --ids-toggle-font-size: #{tokens.$font-size-4}; - --ids-toggle-line-height: normal; - --ids-toggle-text-padding: #{tokens.$space-2}; - --ids-toggle-font-weight: #{tokens.$font-weight-regular}; - --ids-toggle-width: #{tokens.$space-6}; - --ids-toggle-height: 2rem; - --ids-toggle-background: #{tokens.$grey-300}; - --ids-toggle-border: transparent; - --ids-toggle-transition: background-color 0.3s ease-in-out; - --ids-toggle-focus: #{tokens.$focus}; - --ids-toggle-padding: #{tokens.$space-1}; - --ids-toggle-font-size-description: #{tokens.$font-size-3}; - --ids-toggle-line-height-description: normal; - --ids-toggle-text-description: #{tokens.$grey-600}; - - /* switch */ - --ids-toggle-width-switch: #{tokens.$space-3}; - --ids-toggle-height-switch: #{tokens.$space-3}; - --ids-toggle-margin: 0.2rem; - --ids-toggle-background-switch: #{tokens.$samoyed}; - --ids-toggle-background-switch-disabled: #{tokens.$samoyed}; - --ids-toggle-shadow-switch: 0 .1rem .3rem 0 rgb(0 0 0 / 25%); - - /* checked */ - --ids-toggle-background-checked: #{tokens.$electric-blue-500}; - --ids-toggle-background-switch-checked: #{tokens.$samoyed}; - --ids-toggle-border-checked: transparent; - --ids-toggle-position-checked: - calc( - var(--ids-toggle-width) - var(--ids-toggle-width-switch) - 0.4rem - ); - - /* hover */ - --ids-toggle-background-hover: #{tokens.$grey-300}; - --ids-toggle-border-hover: transparent; - --ids-toggle-text-label-hover: inherit; - --ids-toggle-background-switch-hover: var(--ids-toggle-background); - - /* pressed */ - --ids-toggle-background-pressed: #{tokens.$grey-300}; - --ids-toggle-border-pressed: transparent; - --ids-toggle-text-label-pressed: inherit; - - /* disabled */ - --ids-toggle-background-disabled: #{tokens.$grey-200}; - --ids-toggle-background-checked-disabled: #{tokens.$electric-blue-300}; - --ids-toggle-border-disabled: transparent; - --ids-toggle-border-checked-disabled: transparent; - } - - [data-brand="workleap"] { /* Default */ --ids-toggle-font-family: var(--hop-body-md-font-family); --ids-toggle-font-size: var(--hop-body-md-font-size); diff --git a/packages/Tooltip/src/Tooltip.tsx b/packages/Tooltip/src/Tooltip.tsx index 25862fc72..8be60f596 100644 --- a/packages/Tooltip/src/Tooltip.tsx +++ b/packages/Tooltip/src/Tooltip.tsx @@ -48,10 +48,6 @@ export interface TooltipProps showOnMobile?: boolean; } -const getBrand = (): string => { - return document.documentElement.getAttribute("data-brand") ?? "igloo"; -}; - const Tooltip: React.FunctionComponent = ({ children, content, @@ -66,9 +62,7 @@ const Tooltip: React.FunctionComponent = ({ showOnMobile = false, ...rest }: TooltipProps) => { - const isWorkleap = getBrand() === "workleap"; const classes = cx("ids-tooltip__container", className); - const fontBase = isWorkleap ? 16 : 10; const arrowRef = React.useRef(null); @@ -142,7 +136,7 @@ const Tooltip: React.FunctionComponent = ({ "ids-tooltip--light": appearance === "light" }); - const fromPxToRem = (value: number, base = fontBase): string => + const fromPxToRem = (value: number, base = 16): string => `${value / base}rem`; const center = position === "top" || position === "bottom"; diff --git a/packages/Tooltip/src/tooltip.scss b/packages/Tooltip/src/tooltip.scss index 0457e91e5..4cd3902a6 100644 --- a/packages/Tooltip/src/tooltip.scss +++ b/packages/Tooltip/src/tooltip.scss @@ -6,27 +6,6 @@ @layer igloo { :root { - /* Default */ - --ids-tooltip-font-family: #{tokens.$primary-font-family}; - --ids-tooltip-font-size: #{tokens.$font-size-2}; - --ids-tooltip-padding: #{tokens.$space-2} #{tokens.$space-3}; - --ids-tooltip-border-radius: #{tokens.$border-radius-sm}; - --ids-tooltip-z-index: #{tokens.$z-index-max}; - --ids-tooltip-arrow-size: .5rem; - --ids-tooltip-arrow-display: block; - - /* Theme */ - --ids-tooltip-text: #{tokens.$samoyed}; - --ids-tooltip-background: #{tokens.$electric-blue-900}; - --ids-tooltip-shadow: none; - - /* Light */ - --ids-tooltip-light-text: #{tokens.$grey-800}; - --ids-tooltip-light-background: #{tokens.$samoyed}; - --ids-tooltip-light-shadow: #{tokens.$shadow-12}; - } - - [data-brand="workleap"] { /* Default */ --ids-tooltip-font-family: var(--hop-body-xs-font-family); --ids-tooltip-font-size: var(--hop-body-xs-font-size); diff --git a/packages/VerticalBarChart/src/VerticalBarChart.stories.tsx b/packages/VerticalBarChart/src/VerticalBarChart.stories.tsx index 46276c7be..17dd112d8 100644 --- a/packages/VerticalBarChart/src/VerticalBarChart.stories.tsx +++ b/packages/VerticalBarChart/src/VerticalBarChart.stories.tsx @@ -2,7 +2,6 @@ import React from 'react'; import { Meta, StoryObj } from '@storybook/react'; -import tokens from '@igloo-ui/tokens/dist/base10/tokens.json'; import readme from '../README.md'; import VerticalBarChart from './VerticalBarChart'; @@ -23,14 +22,6 @@ export default {