Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// Components custom properties applications
// OUDS Core tokens version 1.9.0
// OUDS Core tokens version 1.10.0
// Orange Compact Core tokens version 1.2.0
// Orange Compact System tokens version 2.3.0
// Orange Compact System tokens version 2.5.0

// scss-docs-start ouds-all-component-css-color
// scss-docs-start ouds-component-css-color
Expand Down Expand Up @@ -43,19 +43,21 @@
--#{$prefix}button-mono-color-content-strong-focus: #{$core-ouds-color-functional-white};
--#{$prefix}button-mono-color-border-default-enabled: #{$core-ouds-color-functional-black};
--#{$prefix}button-mono-color-border-default-disabled: #{$core-ouds-color-opacity-black-280};
--#{$prefix}link-mono-color-content-enabled: #{$core-ouds-color-functional-black};
--#{$prefix}link-mono-color-content-hover: #{$core-ouds-color-functional-black};
--#{$prefix}link-mono-color-content-pressed: #{$core-ouds-color-opacity-black-520};
--#{$prefix}link-mono-color-content-disabled: #{$core-ouds-color-opacity-black-280};
--#{$prefix}link-mono-color-content-focus: #{$core-ouds-color-functional-black};
--#{$prefix}icon-color-content-status-warning-external-shape: #{$core-ouds-color-functional-sun-500};
--#{$prefix}icon-color-content-status-warning-internal-shape: #{$core-ouds-color-functional-sun-750};
--#{$prefix}icon-color-content-status-warning-inverse-external-shape: #{$core-ouds-color-functional-sun-300};
--#{$prefix}switch-color-cursor: #{$core-ouds-color-functional-white};
--#{$prefix}switch-color-track-selected: #{$core-ouds-color-functional-malachite-700};
--#{$prefix}switch-color-track-selected-interaction: #{$core-ouds-color-functional-malachite-750};
--#{$prefix}switch-color-track-unselected: #{$core-ouds-color-opacity-black-440};
--#{$prefix}switch-color-track-unselected-interaction: #{$core-ouds-color-opacity-black-520};
--#{$prefix}icon-color-content-status-warning-external-shape: #{$core-ouds-color-functional-sun-500};
--#{$prefix}icon-color-content-status-warning-internal-shape: #{$core-ouds-color-functional-sun-750};
--#{$prefix}icon-color-content-default: #{$core-ouds-color-functional-black};
--#{$prefix}progress-indicator-color-bg: #{$core-ouds-color-functional-gray-light-400};
--#{$prefix}link-mono-color-content-enabled: #{$core-ouds-color-functional-black};
--#{$prefix}link-mono-color-content-hover: #{$core-ouds-color-functional-black};
--#{$prefix}link-mono-color-content-pressed: #{$core-ouds-color-opacity-black-520};
--#{$prefix}link-mono-color-content-disabled: #{$core-ouds-color-opacity-black-280};
--#{$prefix}link-mono-color-content-focus: #{$core-ouds-color-functional-black};
--#{$prefix}icon-color-content-status-warning-inverse-internal-shape: #{$ouds-color-opacity-transparent-dark};
}
// scss-docs-end ouds-component-css-color

Expand Down Expand Up @@ -97,18 +99,20 @@
--#{$prefix}button-mono-color-content-strong-focus: #{$core-ouds-color-functional-black};
--#{$prefix}button-mono-color-border-default-enabled: #{$core-ouds-color-functional-white};
--#{$prefix}button-mono-color-border-default-disabled: #{$core-ouds-color-opacity-white-440};
--#{$prefix}link-mono-color-content-enabled: #{$core-ouds-color-functional-white};
--#{$prefix}link-mono-color-content-hover: #{$core-ouds-color-functional-white};
--#{$prefix}link-mono-color-content-pressed: #{$core-ouds-color-opacity-white-800};
--#{$prefix}link-mono-color-content-disabled: #{$core-ouds-color-opacity-white-440};
--#{$prefix}link-mono-color-content-focus: #{$core-ouds-color-functional-white};
--#{$prefix}icon-color-content-status-warning-external-shape: #{$core-ouds-color-functional-sun-300};
--#{$prefix}icon-color-content-status-warning-internal-shape: #{$ouds-color-opacity-transparent-dark};
--#{$prefix}icon-color-content-status-warning-inverse-external-shape: #{$core-ouds-color-functional-sun-500};
--#{$prefix}switch-color-cursor: #{$core-ouds-color-functional-gray-dark-880};
--#{$prefix}switch-color-track-selected: #{$core-ouds-color-functional-malachite-600};
--#{$prefix}switch-color-track-selected-interaction: #{$core-ouds-color-functional-malachite-300};
--#{$prefix}switch-color-track-unselected: #{$core-ouds-color-opacity-white-640};
--#{$prefix}switch-color-track-unselected-interaction: #{$core-ouds-color-opacity-white-800};
--#{$prefix}icon-color-content-status-warning-external-shape: #{$core-ouds-color-functional-sun-300};
--#{$prefix}icon-color-content-status-warning-internal-shape: #{$ouds-color-opacity-transparent-dark};
--#{$prefix}icon-color-content-default: #{$core-ouds-color-functional-gray-light-160};
--#{$prefix}progress-indicator-color-bg: #{$core-ouds-color-functional-gray-dark-480};
--#{$prefix}link-mono-color-content-enabled: #{$core-ouds-color-functional-white};
--#{$prefix}link-mono-color-content-hover: #{$core-ouds-color-functional-white};
--#{$prefix}link-mono-color-content-pressed: #{$core-ouds-color-opacity-white-800};
--#{$prefix}link-mono-color-content-disabled: #{$core-ouds-color-opacity-white-440};
--#{$prefix}link-mono-color-content-focus: #{$core-ouds-color-functional-white};
--#{$prefix}icon-color-content-status-warning-inverse-internal-shape: #{$core-ouds-color-functional-sun-750};
}
// scss-docs-end ouds-all-component-css-color
86 changes: 62 additions & 24 deletions packages/orange-compact/scss/tokens/_component.scss
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
// Component application
// Depends on semantic applications
// OUDS Core tokens version 1.9.0
// OUDS Core tokens version 1.10.0
// Orange Compact Core tokens version 1.2.0
// Orange Compact System tokens version 2.3.0
// Orange Compact System tokens version 2.5.0

// Alert

Expand Down Expand Up @@ -30,7 +30,9 @@ $ouds-badge-size-large: $ouds-dimension-3xsmall !default;
$ouds-badge-size-medium: $ouds-dimension-4xsmall !default;
$ouds-badge-size-small: $ouds-dimension-5xsmall !default;
$ouds-badge-size-xsmall: $ouds-dimension-8xsmall !default;
$ouds-badge-space-inset: $core-ouds-dimension-out-of-system-75 !default;
$ouds-badge-space-inset-medium-large: $core-ouds-dimension-out-of-system-75 !default;
$ouds-badge-space-inset-small: $core-ouds-dimension-out-of-system-50 !default;
$ouds-badge-space-inset-xsmall: $core-ouds-dimension-out-of-system-25 !default;
$ouds-badge-space-padding-inline-large: $ouds-space-padding-inline-2xsmall !default;
$ouds-badge-space-padding-inline-medium: $ouds-space-padding-inline-3xsmall !default;
// scss-docs-end ouds-component-badge
Expand Down Expand Up @@ -170,7 +172,6 @@ $ouds-checkbox-border-width-unselected-focus: $ouds-border-width-medium !default
$ouds-checkbox-border-width-unselected-hover: $ouds-border-width-medium !default;
$ouds-checkbox-border-width-unselected-pressed: $ouds-border-width-medium !default;
$ouds-checkbox-border-width-unselected: $ouds-border-width-thin !default;
$ouds-checkbox-size-indicator: $ouds-size-icon-with-label-large-size-xsmall !default;
$ouds-checkbox-size-max-height: $ouds-size-min-interactive-area !default;
$ouds-checkbox-size-min-height: $ouds-size-min-interactive-area !default;
$ouds-checkbox-size-min-width: $ouds-size-min-interactive-area !default;
Expand Down Expand Up @@ -233,24 +234,51 @@ $ouds-chip-space-padding-inline-icon: $ouds-space-padding-inline-small !default;
// Control

// scss-docs-start ouds-component-control
$ouds-control-item-border-radius-item-only: $ouds-border-radius-default !default;
$ouds-control-item-border-radius: $ouds-border-radius-none !default;
$ouds-control-item-color-bg-focus: $ouds-color-action-support-focus !default;
$ouds-control-item-color-bg-hover: $ouds-color-action-support-hover !default;
$ouds-control-item-color-bg-loading: $ouds-color-action-support-loading !default;
$ouds-control-item-color-bg-pressed: $ouds-color-action-support-pressed !default;
$ouds-control-item-color-content-loader: $ouds-color-content-default !default;
$ouds-control-item-size-error-icon: $ouds-size-icon-with-label-large-size-small !default;
$ouds-control-item-size-icon: $ouds-size-icon-with-label-large-size-medium !default;
$ouds-control-item-size-loader: $ouds-size-icon-with-label-large-size-small !default;
$ouds-control-item-size-max-height-assets-container: $core-ouds-dimension-1000 !default;
$ouds-control-item-border-radius-current-indicator: $ouds-border-radius-none !default;
$ouds-control-item-border-radius-default: $ouds-border-radius-default !default;
$ouds-control-item-border-radius-media-rounded-corner: $ouds-border-radius-small !default;
$ouds-control-item-border-radius-media: $ouds-border-radius-default !default;
$ouds-control-item-border-radius-rounded: $ouds-border-radius-medium !default;
$ouds-control-item-border-width-current-page: $ouds-border-width-medium !default;
$ouds-control-item-border-width-default: $ouds-border-width-default !default;
$ouds-control-item-color-badge-safety-area: $ouds-color-bg-primary !default;
$ouds-control-item-color-bg-current-disabled: $ouds-color-action-support-disabled !default;
$ouds-control-item-color-bg-current-enabled: $ouds-color-action-support-enabled !default;
$ouds-control-item-color-bg-current-focus: $ouds-color-action-support-focus !default;
$ouds-control-item-color-bg-current-hover: $ouds-color-action-support-hover !default;
$ouds-control-item-color-bg-current-pressed: $ouds-color-action-support-pressed !default;
$ouds-control-item-color-content-current-disabled: $ouds-color-content-default !default;
$ouds-control-item-color-content-current-enabled: $ouds-color-content-default !default;
$ouds-control-item-color-content-current-focus: $ouds-color-content-default !default;
$ouds-control-item-color-content-current-hover: $ouds-color-content-default !default;
$ouds-control-item-color-content-current-pressed: $ouds-color-content-default !default;
$ouds-control-item-font-letter-spacing-avatar-initial-xlarge: $core-ouds-font-letter-spacing-350 !default;
$ouds-control-item-font-line-height-avatar-initial-xlarge: $core-ouds-font-line-height-550 !default;
$ouds-control-item-font-size-avatar-initial-xlarge: $core-ouds-font-size-350 !default;
$ouds-control-item-opacity-current-divider: $ouds-opacity-opaque !default;
$ouds-control-item-opacity-current-indicator: $ouds-opacity-opaque !default;
$ouds-control-item-size-asset-large: $ouds-dimension-medium !default;
$ouds-control-item-size-asset-medium: $ouds-size-icon-with-label-large-size-medium !default;
$ouds-control-item-size-asset-small: $ouds-size-icon-with-label-large-size-small !default;
$ouds-control-item-size-asset-xlarge: $ouds-dimension-3xlarge !default;
$ouds-control-item-size-control-indicator: $ouds-size-icon-with-label-large-size-xsmall !default;
$ouds-control-item-size-current-indicator-width: $core-ouds-dimension-50 !default;
$ouds-control-item-size-flag-height: $ouds-size-icon-with-label-large-size-xsmall !default;
$ouds-control-item-size-max-width: $core-ouds-dimension-4000 !default;
$ouds-control-item-size-min-height: $core-ouds-dimension-500 !default;
$ouds-control-item-size-min-height-compact: $ouds-size-min-interactive-area !default;
$ouds-control-item-size-min-height-default: $core-ouds-dimension-650 !default;
$ouds-control-item-size-min-width: $core-ouds-dimension-1800 !default;
$ouds-control-item-space-column-gap: $ouds-space-column-gap-medium !default;
$ouds-control-item-space-padding-block-default: $ouds-space-padding-block-medium !default;
$ouds-control-item-space-padding-block-top-error-text: $ouds-space-padding-block-xsmall !default;
$ouds-control-item-space-padding-inline-error-icon: $ouds-space-padding-inline-4xsmall !default;
$ouds-control-item-space-padding-block-bottom-slot: $ouds-space-padding-block-4xsmall !default;
$ouds-control-item-space-padding-block-density-compact-bottom-expand-container: $ouds-space-padding-block-2xlarge !default;
$ouds-control-item-space-padding-block-density-compact-top-alignment-top-counterweight: $ouds-space-padding-block-xsmall !default;
$ouds-control-item-space-padding-block-density-compact-top-alignment-top-text-container: $ouds-space-padding-block-none !default;
$ouds-control-item-space-padding-block-density-compact: $ouds-space-padding-block-xsmall !default;
$ouds-control-item-space-padding-block-density-default-bottom-expand-container: $ouds-space-padding-block-3xlarge !default;
$ouds-control-item-space-padding-block-density-default-top-alignment-top-counterweight: $ouds-space-padding-block-small !default;
$ouds-control-item-space-padding-block-density-default-top-alignment-top-text-container: $ouds-space-padding-block-none !default;
$ouds-control-item-space-padding-block-density-default: $ouds-space-padding-block-medium !default;
$ouds-control-item-space-padding-block-top-helper-text: $ouds-space-padding-block-xsmall !default;
$ouds-control-item-space-padding-inline: $ouds-space-padding-inline-large !default;
$ouds-control-item-space-row-gap: $ouds-space-row-gap-none !default;
// scss-docs-end ouds-component-control
Expand Down Expand Up @@ -325,6 +353,12 @@ $ouds-pin-code-input-size-min-width: $ouds-dimension-large !default;
$ouds-pin-code-input-space-column-gap-digit-input: $ouds-space-column-gap-medium !default;
// scss-docs-end ouds-component-pin

// Progress

// scss-docs-start ouds-component-progress
$ouds-progress-indicator-color-bg: var(--#{$prefix}progress-indicator-color-bg) !default;
// scss-docs-end ouds-component-progress

// Quantity

// scss-docs-start ouds-component-quantity
Expand All @@ -347,7 +381,6 @@ $ouds-radio-button-border-width-unselected-focus: $ouds-border-width-medium !def
$ouds-radio-button-border-width-unselected-hover: $ouds-border-width-medium !default;
$ouds-radio-button-border-width-unselected-pressed: $ouds-border-width-medium !default;
$ouds-radio-button-border-width-unselected: $ouds-border-width-thin !default;
$ouds-radio-button-size-indicator: $ouds-size-icon-with-label-large-size-xsmall !default;
$ouds-radio-button-size-max-height: $ouds-size-min-interactive-area !default;
$ouds-radio-button-size-min-height: $ouds-size-min-interactive-area !default;
$ouds-radio-button-size-min-width: $ouds-size-min-interactive-area !default;
Expand Down Expand Up @@ -405,8 +438,8 @@ $ouds-tag-size-asset-small: $ouds-size-icon-with-label-small-size-small !default
$ouds-tag-size-min-height-default: $ouds-dimension-xsmall !default;
$ouds-tag-size-min-height-interactive-area: $ouds-size-min-interactive-area !default;
$ouds-tag-size-min-height-small: $ouds-dimension-3xsmall !default;
$ouds-tag-size-min-width-default: $ouds-dimension-xsmall !default; // Manually changed to take design decision in advance
$ouds-tag-size-min-width-small: $ouds-dimension-2xsmall !default; // Manually changed to take design decision in advance
$ouds-tag-size-min-width-default: $ouds-dimension-xsmall !default;
$ouds-tag-size-min-width-small: $ouds-dimension-2xsmall !default;
$ouds-tag-space-column-gap-default: $ouds-space-column-gap-2xsmall !default;
$ouds-tag-space-column-gap-small: $ouds-space-column-gap-2xsmall !default;
$ouds-tag-space-inset-bullet-default: $core-ouds-dimension-out-of-system-75 !default;
Expand All @@ -430,9 +463,12 @@ $ouds-text-area-size-max-height-assets-container: $core-ouds-dimension-950 !defa
$ouds-text-area-size-max-height-input: $core-ouds-dimension-2500 !default;
$ouds-text-area-size-max-width: $core-ouds-dimension-6000 !default;
$ouds-text-area-size-min-height-input: $core-ouds-dimension-750 !default;
$ouds-text-area-space-padding-block: $ouds-space-padding-block-small !default;
$ouds-text-area-space-padding-block-empty-trailing-container: $ouds-space-padding-block-xsmall !default;
$ouds-text-area-space-padding-block-top-empty: $ouds-space-padding-block-large !default;
$ouds-text-area-space-padding-block-trailing-container: $ouds-space-padding-block-large !default;
$ouds-text-area-space-padding-block: $ouds-space-padding-block-xsmall !default;
$ouds-text-input-border-radius-default: $ouds-border-radius-default !default;
$ouds-text-input-border-radius-rounded: $ouds-border-radius-small !default;
$ouds-text-input-border-radius-rounded: $ouds-border-radius-medium !default;
$ouds-text-input-border-width-default: $ouds-border-width-default !default;
$ouds-text-input-border-width-focus: $ouds-border-width-medium !default;
$ouds-text-input-color-border-enabled: $ouds-color-border-default !default;
Expand All @@ -448,6 +484,8 @@ $ouds-text-input-size-min-width: $core-ouds-dimension-2500 !default;
$ouds-text-input-size-vertical-divider-height: $ouds-dimension-4xsmall !default;
$ouds-text-input-space-column-gap-default: $ouds-space-column-gap-medium !default;
$ouds-text-input-space-column-gap-inline-text: $ouds-space-column-gap-xsmall !default;
$ouds-text-input-space-column-gap-label-asterisk: $ouds-space-column-gap-2xsmall !default;
$ouds-text-input-space-column-gap-label-small-asterisk: $core-ouds-dimension-out-of-system-75 !default;
$ouds-text-input-space-column-gap-trailing-error-action: $ouds-space-column-gap-xsmall !default;
$ouds-text-input-space-padding-block-default: $ouds-space-padding-block-2xsmall !default;
$ouds-text-input-space-padding-block-top-helper-text: $ouds-space-padding-block-xsmall !default;
Expand Down
11 changes: 5 additions & 6 deletions packages/orange-compact/scss/tokens/_raw.scss
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
// Raw primitive values
// Insertion of brand foundations
// OUDS Core tokens version 1.9.0
// OUDS Core tokens version 1.10.0
// Orange Compact Core tokens version 1.2.0
// Orange Compact System tokens version 2.3.0
// Orange Compact System tokens version 2.5.0

// Border

Expand Down Expand Up @@ -208,8 +208,7 @@ $core-ouds-color-opacity-black-920: rgba(0, 0, 0, .92) !default;
$core-ouds-color-opacity-black-960: rgba(0, 0, 0, .96) !default;
$core-ouds-color-opacity-dodger-blue-80: rgba(38, 178, 255, .08) !default;
$core-ouds-color-opacity-dodger-blue-520: rgba(0, 89, 138, .52) !default;
$core-ouds-color-opacity-gray-dark-800-800: rgba(31, 31, 31, .8) !default;
$core-ouds-color-opacity-gray-light-80-800: rgba(244, 244, 244, .8) !default;
$core-ouds-color-opacity-gray-dark-880-800: rgba(20, 20, 20, .8) !default;
$core-ouds-color-opacity-malachite-120: rgba(61, 227, 90, .12) !default;
$core-ouds-color-opacity-malachite-640: rgba(14, 98, 29, .64) !default;
$core-ouds-color-opacity-scarlet-80: rgba(219, 0, 2, .08) !default;
Expand Down Expand Up @@ -295,8 +294,8 @@ $core-ouds-dimension-out-of-system-250: $core-ouds-dimension-base * 2.5 !default
// Effect

// scss-docs-start ouds-raw-effect
$core-ouds-effect-blur-160: 16px !default;
$core-ouds-effect-blur-320: 32px !default;
$core-ouds-effect-blur-480: 48px !default;
// scss-docs-end ouds-raw-effect

// Elevation
Expand Down Expand Up @@ -419,7 +418,7 @@ $core-ouds-grid-max-width-600: 1639px !default;
$core-ouds-grid-max-width-650: 1680px !default;
$core-ouds-grid-max-width-700: 1879px !default;
$core-ouds-grid-max-width-800: 1920px !default;
$core-ouds-grid-min-width-100: 1px !default;
$core-ouds-grid-min-width-100: 320px !default;
$core-ouds-grid-min-width-200: 390px !default;
$core-ouds-grid-min-width-300: 480px !default;
$core-ouds-grid-min-width-400: 736px !default;
Expand Down
Loading
Loading